🗊Презентация JavaScript

Категория: Образование
Нажмите для полного просмотра!
– / 43
Скачать

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему JavaScript . Доклад-сообщение содержит 43 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


JavaScript Шестаков А.П.
Описание слайда:
JavaScript Шестаков А.П.

Слайд 2


Введение Язык JavaScript разработан фирмой Netscape для создания интерактивных HTML-документов. Области применения: создание динамических страниц, т.е. их содержание может меняться после загрузки документа; проверка правильности заполнения форм пользователем до пересылки их на сервер; решение локальных задач с помощью сценариев Программа (сценарий, скрипт) на языке JavaScript представляет собой последовательность операторов.
Описание слайда:
Введение Язык JavaScript разработан фирмой Netscape для создания интерактивных HTML-документов. Области применения: создание динамических страниц, т.е. их содержание может меняться после загрузки документа; проверка правильности заполнения форм пользователем до пересылки их на сервер; решение локальных задач с помощью сценариев Программа (сценарий, скрипт) на языке JavaScript представляет собой последовательность операторов.

Слайд 3


Литералы Простейшие данные, с которыми может оперировать программа, называются литералами. Типы литералов Целые Десятичные (0, -17, 22) Шестнадцатеричные (0xAFF, 0x123, 0x2E) Восьмеричные (0123, 056, 04) Вещественные (123.24, -9.0, 1e-6) Логические (true, false) Строковые (“строка”)
Описание слайда:
Литералы Простейшие данные, с которыми может оперировать программа, называются литералами. Типы литералов Целые Десятичные (0, -17, 22) Шестнадцатеричные (0xAFF, 0x123, 0x2E) Восьмеричные (0123, 056, 04) Вещественные (123.24, -9.0, 1e-6) Логические (true, false) Строковые (“строка”)

Слайд 4


Переменные Переменные используются для хранения данных Типы переменных – те же, что и для литералов Объявляются без указания типа (он определяется при задании значения) Например var t var x=-2.2 var stroka=“Результат работы программы: “
Описание слайда:
Переменные Переменные используются для хранения данных Типы переменных – те же, что и для литералов Объявляются без указания типа (он определяется при задании значения) Например var t var x=-2.2 var stroka=“Результат работы программы: “

Слайд 5


Правила описания и использования переменных в JavaScript переменные начинаются с VAR (от слова variable), следом идет имя, знак = и значение переменной. Служебное слово VAR можно опускать; имя переменной может состоять из любого количества букв. Но лучше давать им названия, имеющие соответствующее смысловое значение; имена переменных различают регистр. Таким образом Х и х — это две разные переменные; значение текстовой переменной ставится в кавычки. Числовые переменные не ставятся в кавычки, иначе интерпретатор поймет их как текст с числовым значением 0; в JavaScript, как и в других языках программирования, есть зарезервированные слова, например, названия команд. Этими словами называть переменные нельзя; если необходимо, вместо пробела можно ставить знак подчеркивания, например, _user_name.
Описание слайда:
Правила описания и использования переменных в JavaScript переменные начинаются с VAR (от слова variable), следом идет имя, знак = и значение переменной. Служебное слово VAR можно опускать; имя переменной может состоять из любого количества букв. Но лучше давать им названия, имеющие соответствующее смысловое значение; имена переменных различают регистр. Таким образом Х и х — это две разные переменные; значение текстовой переменной ставится в кавычки. Числовые переменные не ставятся в кавычки, иначе интерпретатор поймет их как текст с числовым значением 0; в JavaScript, как и в других языках программирования, есть зарезервированные слова, например, названия команд. Этими словами называть переменные нельзя; если необходимо, вместо пробела можно ставить знак подчеркивания, например, _user_name.

Слайд 6


Пример скрипта В HTML–документе скрипт помещается внутри парных тэгов <SCRIPT> и </SCRIPT> непосредственно на HTML–странице. Рассмотрим следующий простой пример: <HTML> <BODY> <BR> Текст HTML документа <BR> <SCRIPT language="JavaScript"> document.write("А здесь начинается JavaScript") </SCRIPT> <BR> Продолжение HTML документа </BODY> </HTML> Все, что стоит между тэгами <SCRIPT> и </SCRIPT>, интерпретируется браузером как код на языке JavaScript.
Описание слайда:
Пример скрипта В HTML–документе скрипт помещается внутри парных тэгов <SCRIPT> и </SCRIPT> непосредственно на HTML–странице. Рассмотрим следующий простой пример: <HTML> <BODY> <BR> Текст HTML документа <BR> <SCRIPT language="JavaScript"> document.write("А здесь начинается JavaScript") </SCRIPT> <BR> Продолжение HTML документа </BODY> </HTML> Все, что стоит между тэгами <SCRIPT> и </SCRIPT>, интерпретируется браузером как код на языке JavaScript.

Слайд 7


Операции в JavaScript Присваивания: = += –= *= /= %= Операции += –= *= /= являются упрощенными аналогами следующих выражений: a = a + b или a += b a = a – b или a –= b a = a * b или a *= b a = a / b или a /= b Пример: x = 3; //После выполнения фрагмента программы: y = 7; //х равен 10, у равен 7 x += y; x = 21; //После выполнения фрагмента программы: y = 7; //х равен 3, у равен 7 x /= y;
Описание слайда:
Операции в JavaScript Присваивания: = += –= *= /= %= Операции += –= *= /= являются упрощенными аналогами следующих выражений: a = a + b или a += b a = a – b или a –= b a = a * b или a *= b a = a / b или a /= b Пример: x = 3; //После выполнения фрагмента программы: y = 7; //х равен 10, у равен 7 x += y; x = 21; //После выполнения фрагмента программы: y = 7; //х равен 3, у равен 7 x /= y;

Слайд 8


Операции в JavaScript Отношения: < > <= >= == (равно) != (не равно) Арифметические: + – * / % ++ -- ++ – операция инкремента: i++ или ++i или i = i+1 -- – операция декремента: i-- или --i или i = i-1 Различие в записях инкремента (++i и i++) и декремента (--i и i--), заключается в том, что указанная операция будет выполняться либо до использования переменной (++i, --i), либо после (i++, i--). Пример: x = 12; //После выполнения фрагмента программы: y = ++x; //х равен 13, у равен 13 x = 12; //После выполнения фрагмента программы: y = x++; //х равен 13, у равен 12
Описание слайда:
Операции в JavaScript Отношения: < > <= >= == (равно) != (не равно) Арифметические: + – * / % ++ -- ++ – операция инкремента: i++ или ++i или i = i+1 -- – операция декремента: i-- или --i или i = i-1 Различие в записях инкремента (++i и i++) и декремента (--i и i--), заключается в том, что указанная операция будет выполняться либо до использования переменной (++i, --i), либо после (i++, i--). Пример: x = 12; //После выполнения фрагмента программы: y = ++x; //х равен 13, у равен 13 x = 12; //После выполнения фрагмента программы: y = x++; //х равен 13, у равен 12

Слайд 9


Операции в JavaScript Побитовые: & | ^ ~ << >> >>> Логические: || (или) && (и) ! (отрицание)
Описание слайда:
Операции в JavaScript Побитовые: & | ^ ~ << >> >>> Логические: || (или) && (и) ! (отрицание)

Слайд 10


Выражения Выражение – любой имеющий силу набор литералов, переменных, операторов и соотношений, которые вычисляют простое значение. Значением может быть число, строка или логическое значение. Правила построения выражений: выражение может занимать как одну строчку, так и несколько; выражение может содержать любое количество операторов и операндов, но поскольку слишком сложные выражение трудны для понимания, рекомендуется разбивать их на более простые. Примеры операторов, содержащих выражения: a = 241; x = y*2 + f(y) - z--;
Описание слайда:
Выражения Выражение – любой имеющий силу набор литералов, переменных, операторов и соотношений, которые вычисляют простое значение. Значением может быть число, строка или логическое значение. Правила построения выражений: выражение может занимать как одну строчку, так и несколько; выражение может содержать любое количество операторов и операндов, но поскольку слишком сложные выражение трудны для понимания, рекомендуется разбивать их на более простые. Примеры операторов, содержащих выражения: a = 241; x = y*2 + f(y) - z--;

Слайд 11


Методы alert, prompt, confirm В языке JavaScript существует ряд методов объекта window, которые используются достаточно часто. Основные из них: alert(строка) – вызывает диалоговое окно с текстом (строка) и кнопкой OK. confirm(строка) – вызывает диалоговое окно с текстом (строка) и кнопками OK и Cancel. Функция возвращает значение true, если пользователь нажал кнопку OK и false – если кнопку Cancel. prompt(строка, значение) – вызывает диалоговое окно с надписью «строка» и с полем для ввода текста («значение» – устанавливается по умолчанию). Возвращает введенное пользователем текстовое значение.
Описание слайда:
Методы alert, prompt, confirm В языке JavaScript существует ряд методов объекта window, которые используются достаточно часто. Основные из них: alert(строка) – вызывает диалоговое окно с текстом (строка) и кнопкой OK. confirm(строка) – вызывает диалоговое окно с текстом (строка) и кнопками OK и Cancel. Функция возвращает значение true, если пользователь нажал кнопку OK и false – если кнопку Cancel. prompt(строка, значение) – вызывает диалоговое окно с надписью «строка» и с полем для ввода текста («значение» – устанавливается по умолчанию). Возвращает введенное пользователем текстовое значение.

Слайд 12


Операторы Условный оператор Оператор if выполняет проверку значения выражения, стоящего после if, после чего, если результат true (не нуль), выполняет блок операторов 1. В случае, когда результат false (нуль) и если присутствует часть else, будет выполнен блок операторов из else, в противном случае – ничего. if (выражение) { блок операторов 1; } else { блок операторов 2; } Пример: if (age >= 18) status = ‘adult’; else status = ‘minor’; В качестве выражения в операторе if можно записывать не только логические, но арифметические и строковые выражения. При этом считается, что условие ложно, если значение выражения равно 0 или пустой строке ‘’, и истинно в противном случае.
Описание слайда:
Операторы Условный оператор Оператор if выполняет проверку значения выражения, стоящего после if, после чего, если результат true (не нуль), выполняет блок операторов 1. В случае, когда результат false (нуль) и если присутствует часть else, будет выполнен блок операторов из else, в противном случае – ничего. if (выражение) { блок операторов 1; } else { блок операторов 2; } Пример: if (age >= 18) status = ‘adult’; else status = ‘minor’; В качестве выражения в операторе if можно записывать не только логические, но арифметические и строковые выражения. При этом считается, что условие ложно, если значение выражения равно 0 или пустой строке ‘’, и истинно в противном случае.

Слайд 13


Операторы Иногда альтернативой оператору if может служить операция ? (если в результате возвращается одно значение, которое можно присвоить переменной). переменная = (выражение) ? { блок операторов 1 } : { блок операторов 2 } Пример status = (age >= 18) ? ‘adult’ : ‘minor’;
Описание слайда:
Операторы Иногда альтернативой оператору if может служить операция ? (если в результате возвращается одно значение, которое можно присвоить переменной). переменная = (выражение) ? { блок операторов 1 } : { блок операторов 2 } Пример status = (age >= 18) ? ‘adult’ : ‘minor’;

Слайд 14


Операторы Цикл for for ([инициализация]; [выражение]; [изменение выражения]) { операторы; } позволяет многократно выполнять операторы в программе. Пример var n=1234; var k=0; for (; n;) {k++; n=Math.floor(n/10);}
Описание слайда:
Операторы Цикл for for ([инициализация]; [выражение]; [изменение выражения]) { операторы; } позволяет многократно выполнять операторы в программе. Пример var n=1234; var k=0; for (; n;) {k++; n=Math.floor(n/10);}

Слайд 15


Операторы Цикл while while (выражение) { операторы } выполнение операторов до тех пор, пока заданное после while выражение истинно (не равно нулю). Пример var n=1234; var k=0; while (n) {k++; n=Math.floor(n/10);}
Описание слайда:
Операторы Цикл while while (выражение) { операторы } выполнение операторов до тех пор, пока заданное после while выражение истинно (не равно нулю). Пример var n=1234; var k=0; while (n) {k++; n=Math.floor(n/10);}

Слайд 16


Операторы Цикл do … while do { операторы тела цикла } while (выражение); выполнение операторов до тех пор, пока заданное после while выражение истинно (не равно нулю). Пример var n=1234; var k=0; do {k++; n=Math.floor(n/10);} while (n);
Описание слайда:
Операторы Цикл do … while do { операторы тела цикла } while (выражение); выполнение операторов до тех пор, пока заданное после while выражение истинно (не равно нулю). Пример var n=1234; var k=0; do {k++; n=Math.floor(n/10);} while (n);

Слайд 17


Функции Функции — один из основных способов объединения операторов в блоки. Функция представляет собой группу операторов, решающих какую-либо определенную задачу. В JavaScript функции, не возвращающие результатов, можно рассматривать как процедуры. Описание функции и ее вызов: function Имя_Функции (список формальных параметров) { тело функции; return значение; } Рекомендуется определять функции в части HEAD для ускорения работы скрипта и, следовательно, просмотра Web–страницы. Команда вызова функции имеет вид: Имя_Функции (список фактических параметров)
Описание слайда:
Функции Функции — один из основных способов объединения операторов в блоки. Функция представляет собой группу операторов, решающих какую-либо определенную задачу. В JavaScript функции, не возвращающие результатов, можно рассматривать как процедуры. Описание функции и ее вызов: function Имя_Функции (список формальных параметров) { тело функции; return значение; } Рекомендуется определять функции в части HEAD для ускорения работы скрипта и, следовательно, просмотра Web–страницы. Команда вызова функции имеет вид: Имя_Функции (список фактических параметров)

Слайд 18


Функции Аргументы функции хранятся в массиве. Внутри функции можно адресовать параметры следующим образом: Имя_Функции.arguments[i], где i – порядковый номер аргумента, начиная с нуля. Общее число аргументов обозначено переменной Имя_Функции.arguments.length. Существует возможность вызывать функцию с большим количеством аргументов, чем она формально объявлена, используя массив arguments. Это бывает полезным, когда заранее не известно, сколько аргументов будет в функции. Схема проста: используя свойство arguments.length, определяется число аргументов в функции, и затем организуется обращение к каждому аргументу при помощи массива arguments.
Описание слайда:
Функции Аргументы функции хранятся в массиве. Внутри функции можно адресовать параметры следующим образом: Имя_Функции.arguments[i], где i – порядковый номер аргумента, начиная с нуля. Общее число аргументов обозначено переменной Имя_Функции.arguments.length. Существует возможность вызывать функцию с большим количеством аргументов, чем она формально объявлена, используя массив arguments. Это бывает полезным, когда заранее не известно, сколько аргументов будет в функции. Схема проста: используя свойство arguments.length, определяется число аргументов в функции, и затем организуется обращение к каждому аргументу при помощи массива arguments.

Слайд 19


Функции Пример. Опишем функцию, которая будет создавать списки HTML. Единственный формальный аргумент функции – строка, имеющая значение "U", если список неупорядочен, или "O", если список упорядочен (пронумерован). function List(type) { document.write('<' + type + 'L>'); for (var i = 1; i < arguments.length; i++) document.write('<LI>' + arguments[i] + '</LI>'); document.write('</' + type + 'L>'); } Вызов функции: List(‘U','Пункт 1','Пункт 2','Пункт 3','Пункт 4');
Описание слайда:
Функции Пример. Опишем функцию, которая будет создавать списки HTML. Единственный формальный аргумент функции – строка, имеющая значение "U", если список неупорядочен, или "O", если список упорядочен (пронумерован). function List(type) { document.write('<' + type + 'L>'); for (var i = 1; i < arguments.length; i++) document.write('<LI>' + arguments[i] + '</LI>'); document.write('</' + type + 'L>'); } Вызов функции: List(‘U','Пункт 1','Пункт 2','Пункт 3','Пункт 4');

Слайд 20


Объект Math
Описание слайда:
Объект Math

Слайд 21


Объект Math
Описание слайда:
Объект Math

Слайд 22


Объект Date
Описание слайда:
Объект Date

Слайд 23


Объект Date
Описание слайда:
Объект Date

Слайд 24


Объект Date
Описание слайда:
Объект Date

Слайд 25


Объектная модель документа Объектная модель документа (Document Object Model – DOM) обеспечивает программный интерфейс для HTML-документов. Она определяет логическую структуру документов и способы взаимодействия с ними. Все встроенные объекты JavaScript берут свое начало от рабочей области документа. Кроме этих классов объектов пользователь может создавать и свои собственные. Но обычно большинство программ используют эту систему классов и не создают новых. Все объекты в JavaScript берут свое начало от трех родительских объектов: Global — содержит глобальные переменные. Math — содержит большое количество разнообразных математических функций. Object — предок всех остальных встроенных классов.
Описание слайда:
Объектная модель документа Объектная модель документа (Document Object Model – DOM) обеспечивает программный интерфейс для HTML-документов. Она определяет логическую структуру документов и способы взаимодействия с ними. Все встроенные объекты JavaScript берут свое начало от рабочей области документа. Кроме этих классов объектов пользователь может создавать и свои собственные. Но обычно большинство программ используют эту систему классов и не создают новых. Все объекты в JavaScript берут свое начало от трех родительских объектов: Global — содержит глобальные переменные. Math — содержит большое количество разнообразных математических функций. Object — предок всех остальных встроенных классов.

Слайд 26


Объектная модель документа
Описание слайда:
Объектная модель документа

Слайд 27


Объект Window
Описание слайда:
Объект Window

Слайд 28


Объект Window
Описание слайда:
Объект Window

Слайд 29


Объект Window
Описание слайда:
Объект Window

Слайд 30


Объект Window
Описание слайда:
Объект Window

Слайд 31


Объект Window
Описание слайда:
Объект Window

Слайд 32


Объект history
Описание слайда:
Объект history

Слайд 33


Объект location
Описание слайда:
Объект location

Слайд 34


Объект location
Описание слайда:
Объект location

Слайд 35


Объект document
Описание слайда:
Объект document

Слайд 36


Объект document
Описание слайда:
Объект document

Слайд 37


Объект document
Описание слайда:
Объект document

Слайд 38


Объект document Способы обращения к элементам коллекции: 1) как к элементам массива Например, document.forms[1] 2) по имени элемента коллекции Например, document.images[“ris.jpg”]
Описание слайда:
Объект document Способы обращения к элементам коллекции: 1) как к элементам массива Например, document.forms[1] 2) по имени элемента коллекции Например, document.images[“ris.jpg”]

Слайд 39


Объект document
Описание слайда:
Объект document

Слайд 40


Объект document
Описание слайда:
Объект document

Слайд 41


События Событие – действие браузера или пользователя. Пользователь манипулирует мышью и клавиатурой, браузер генерирует «события». Обработка нужных событий предусматривается в скриптовых кодах, и документ начинает реагировать на перемещение мыши, нажатия клавиш на клавиатуре, окончание загрузки документа по сети, закрытие окна браузера и т.д.
Описание слайда:
События Событие – действие браузера или пользователя. Пользователь манипулирует мышью и клавиатурой, браузер генерирует «события». Обработка нужных событий предусматривается в скриптовых кодах, и документ начинает реагировать на перемещение мыши, нажатия клавиш на клавиатуре, окончание загрузки документа по сети, закрытие окна браузера и т.д.

Слайд 42


События Событие onMouseDown возникает при нажатии левой кнопкой мыши. В следующем примере при нажатии кнопки мыши на тексте меняется стиль оформления текста (текст выделяется жирным шрифтом).
Описание слайда:
События Событие onMouseDown возникает при нажатии левой кнопкой мыши. В следующем примере при нажатии кнопки мыши на тексте меняется стиль оформления текста (текст выделяется жирным шрифтом).

Слайд 43


События Пример: создадим в документе следующую гиперссылку: <A HREF = “My_research1.htm”>Моя исследовательская работа</A> — браузер передаст событие объекту, построенному для тега <A>. При щелчке мышкой по тексту Моя исследовательская работа произойдет вызов стандартной обработки этого события — в окно загрузится документ My_research1.htm. Добавим свой обработчик данного события: <A HREF = “My_research1.htm” onClick=”alert(“Эта информация строго конфиденциальна”)”>Моя исследовательская работа</A> Теперь, при щелчке мышкой по тексту Моя исследовательская работа на экране появится надпись: Эта информация строго конфиденциальна. А затем в окно загрузится документ My_research1.htm.
Описание слайда:
События Пример: создадим в документе следующую гиперссылку: <A HREF = “My_research1.htm”>Моя исследовательская работа</A> — браузер передаст событие объекту, построенному для тега <A>. При щелчке мышкой по тексту Моя исследовательская работа произойдет вызов стандартной обработки этого события — в окно загрузится документ My_research1.htm. Добавим свой обработчик данного события: <A HREF = “My_research1.htm” onClick=”alert(“Эта информация строго конфиденциальна”)”>Моя исследовательская работа</A> Теперь, при щелчке мышкой по тексту Моя исследовательская работа на экране появится надпись: Эта информация строго конфиденциальна. А затем в окно загрузится документ My_research1.htm.

Скачать

Теги JavaScript
Похожие презентации
Mypresentation.ru
Загрузить презентацию