JavaScript Шестаков А.П.. © Шестаков А.П.Язык JavaScript2 Введение Язык JavaScript разработан фирмой Netscape для создания интерактивных HTML-документов. - презентация

1 JavaScript Шестаков А.П.

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

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

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

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

6 © Шестаков А.П.Язык JavaScript6 Пример скрипта В HTML–документе скрипт помещается внутри парных тэгов и непосредственно на HTML–странице. Рассмотрим следующий простой пример: Текст HTML документа document.write("А здесь начинается JavaScript") Продолжение HTML документа Все, что стоит между тэгами и, интерпретируется браузером как код на языке JavaScript.

7 © Шестаков А.П.Язык JavaScript7 Операции в 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 © Шестаков А.П.Язык JavaScript8 Операции в 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 © Шестаков А.П.Язык JavaScript9 Операции в JavaScript Побитовые: & | ^ ~ > >>> Логические: || (или) && (и) ! (отрицание)

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

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

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

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

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

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

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

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

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

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

20 © Шестаков А.П.Язык JavaScript20 Объект Math МетодОписание Math.abs (x)Возвращает абсолютное значение своего аргумента Math.acos (x)Возвращает арккосинус аргумента Math.asin (x)Возвращает арксинус аргумента Math.atan (x)Возвращает арктангенс аргумента Math.atan2 (y, x) Возвращает угол в радианах между осью абсцисс и линией, соединяющей начало координат с точкой (х, у) Math.ceil (x)Возвращает целое число, большее или равное аргументу Math.cos (x)Возвращает косинус аргумента Math.exp (x)Возвращает e x Math.floor (x)Возвращает целое число, меньшее или равное аргументу

21 © Шестаков А.П.Язык JavaScript21 Объект Math МетодОписание Math.log (x)Возвращает натуральный логарифм аргумента Math.max (x, y)Возвращает большее из значений аргументов Math.min (x, y)Возвращает меньшее из значений аргументов Math.pow (x, y)Возвращает х у Math.random ()Возвращает случайное число на полуинтервале [0, 1) Math.round (x)Округляет аргумент до ближайшего целого Math.sin (x)Возвращает синус аргумента Math.sqrt (x)Возвращает корень квадратный аргумента Math.tan (x)Возвращает тангенс аргумента

22 © Шестаков А.П.Язык JavaScript22 Объект Date МетодОписание getDate () Возвращает день месяца (целое число в диапазоне от 1 до 31), например: var D = new Date(); var date = D.getDate(); getDay () Возвращает день недели (целое число в диапазоне от 0 до 6, нулю соответствует воскресенье). getFullYear () Возвращает год. getHours () Возвращает целое число часов в диапазоне от 0 до 23, прошедших с начала суток по местному времени. getMinutes ()Возвращает целое число минут в диапазоне от 0 до 59. getSeconds ()Возвращает целое число секунд в диапазоне от 0 до 59. getMilliseconds () Возвращает целое число миллисекунд в диапазоне от 0 до 999. getMonth ()Возвращает месяц в диапазоне от 0 до 11

23 © Шестаков А.П.Язык JavaScript23 Объект Date МетодОписание getTime ()Число миллисекунд, прошедших с полуночи getTimezoneOffset ()Разность между гринвичским и местным временем в минутах setDate (date)Задает день месяца. Если, например, текущая дата соответствует июлю 2000 года, то D.setDate (31) задаст , D. setDate (32) setFullYear (year) Задает год. В отличие от конструктора с помощью данного метода можно задавать любой год setHours (hours) Задание часа в диапазоне от 0 до 23. Если задать час меньше 0 или больше 23, то осуществляется переход к предыдущим и последующим суткам, соответственно

24 © Шестаков А.П.Язык JavaScript24 Объект Date МетодОписание setMinutes (minutes)Задание минуты в диапазоне от 0 до 59. setSeconds (seconds)Задание секунды в диапазоне от 0 до 59. setMilliseconds (ms)Задание миллисекунды в диапазоне от 0 до 999. setMonth(month)Задание месяца в диапазоне от 0 до 11 setTime(ms)Задание времени в миллисекундах с полуночи toGMTString () Возвращает дату, преобразованную в строку, время гринвичское toLocaleString () Возвращает дату, преобразованную в строку, время местное. Отображение локального времени и даты существенно зависит от браузера, рекомендуется формировать его вручную

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

26 © Шестаков А.П.Язык JavaScript26 Объектная модель документа window event frames location screen history navigator document links images function area anchors arrays forms elements

27 © Шестаков А.П.Язык JavaScript27 Объект Window СвойствоОписание closedСвойство хранит логическое значение, указывающее, закрыто ли окно defaultStatusЗначение – строка, отображающаяся в строке состояния окна браузера documentСсылка на объект document framesМассив фреймов, загруженных в окно historyЗначение – объект history, содержащий массив адресов ресурсов, просмотренных в данном окне locationАдрес ресурса, загруженного в окно nameИмя окна navigatorСсылка на объект navigator, содержащий информацию о браузере

28 © Шестаков А.П.Язык JavaScript28 Объект Window СвойствоОписание openerСсылка на окно, открывшее данное parentСсылка на родительское окно или фрейм, содержащий данный фрейм screenИнформация о разрешении экрана selfСсылка на текущее окно statusЗадание строки, которая будет отображаться в строке состояния topСсылка на ближайшее к пользователю окно

29 © Шестаков А.П.Язык JavaScript29 Объект Window МетодОписание blur()При вызове метода окно теряет фокус close()Окно закрывается, фокус передается родительскому окну focus()Фокус передается заданному окну moveBy(x, y) moveTo(x, y) open(url, wn, f) print() resizeBy(x, y)

30 © Шестаков А.П.Язык JavaScript30 Объект Window МетодОписание resizeTo(x, y) scrollTo(x, y) scrollBy(x, y) stop()

31 © Шестаков А.П.Язык JavaScript31 Объект Window СобытиеОписание onBlurВозникает при потере фокуса окном onErrorВозникает в случае ошибки при загрузке документа в окно onFocusВозникает при получении фокуса окном onLoadВозникает при завершении загрузки документа в окно onResizeВозникает при изменении размеров окна или фрейма onUnLoadВозникает при завершении работы пользователя с документом, например, при переходе к другому документу

32 © Шестаков А.П.Язык JavaScript32 Объект history Свойство или метод Описание lengthСвойство хранит число элементов в объекте back()Метод загружает предыдущий элемент списка forward()Метод загружает следующий элемент списка go(n)Метод загружает n-й элемент списка (нумерация осуществляется с нуля)

33 © Шестаков А.П.Язык JavaScript33 Объект location СвойствоОписание hrefПолный унифицированный указатель ресурса документа, загружаемого в окно браузера hashЧасть унифицированного указателя ресурса - закладка, показывающая положение фрагмента в документе, следует за символом «#» hostЧасть унифицированного указателя ресурса, содержащая доменный или IP-адрес ресурса и номер порта hostnameЧасть унифицированного указателя ресурса, содержащая доменный или IP-адрес ресурса и номер порта pathnameЧасть унифицированного указателя ресурса, содержащая каталог и имя документа portНомер порта, используемого сервером protocolПротокол, обеспечивающий загрузку документа, включая двоеточие

34 © Шестаков А.П.Язык JavaScript34 Объект location МетодОписание reload()Обеспечивает перезагрузку текущего документа в окно браузера replace(url)Метод загружает документ с заданным url, заменяет объект history так, что становится невозможным перейти к замененному документу с помощью кнопки Назад или метода history.back

35 © Шестаков А.П.Язык JavaScript35 Объект document СвойствоОписание alinkColorЦвет активной гиперссылки linkColorЦвет текста гиперссылки vlinkColorЦвет текста гиперссылки на просмотренный документ bgColorЦвет фона документа fgColorЦвет текста в документе URLСтрока – URL документа titleСтрока – заголовок документа

36 © Шестаков А.П.Язык JavaScript36 Объект document МетодОписание close()Закрывает выходной поток вывода данных в документ open()Открывает выходной поток вывода данных в документ write(t1, t2, …, tn) Вывод текста в документ без перевода строки writeln(t1, t2, …, tn) Вывод текста в документ с переводом строки

37 © Шестаков А.П.Язык JavaScript37 Объект document КоллекцияОписание allКоллекция всех тегов и элементов документа anchorsКоллекция закладок документа formsКоллекция всех форм документа linksКоллекция всех гиперссылок документа pluginsКоллекция встроенных модулей, доступных в документе imagesКоллекция всех изображений в документе

38 © Шестаков А.П.Язык JavaScript38 Объект document Способы обращения к элементам коллекции: 1) как к элементам массива Например, document.forms[1] 2) по имени элемента коллекции Например, document.images[ris.jpg]

39 © Шестаков А.П.Язык JavaScript39 Объект document СобытиеОписание onclickПроисходит при щелчке одной из кнопок мыши в области документа onkeydownПроисходит при нажатии одной из клавиш клавиатуры onkeypressedПроисходит при нажатии и удерживании одной из клавиш клавиатуры onkeyupПроисходит, когда пользователь отпускает клавишу клавиатуры onmousedownПроисходит при нажатии одной из кнопок мыши

40 © Шестаков А.П.Язык JavaScript40 Объект document onmousemoveПроисходит при перемещении курсора мыши в области документа onmouseoutПроисходит при выходе курсора мыши за область документа onmouseoverПроисходит при входе курсора мыши в область документа onmouseupПроисходит, когда пользователь отпускает ранее нажатую кнопку мыши

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

42 © Шестаков А.П.Язык JavaScript42 События Событие onMouseDown возникает при нажатии левой кнопкой мыши. В следующем примере при нажатии кнопки мыши на тексте меняется стиль оформления текста (текст выделяется жирным шрифтом). КодОтображение Пример использования события onMouseDown.

43 © Шестаков А.П.Язык JavaScript43 События Пример: создадим в документе следующую гиперссылку: Моя исследовательская работа браузер передаст событие объекту, построенному для тега. При щелчке мышкой по тексту Моя исследовательская работа произойдет вызов стандартной обработки этого события в окно загрузится документ My_research1.htm. Добавим свой обработчик данного события: Моя исследовательская работа Теперь, при щелчке мышкой по тексту Моя исследовательская работа на экране появится надпись: Эта информация строго конфиденциальна. А затем в окно загрузится документ My_research1.htm.