1 Проф. Куссуль Н.Н. Программирование для Web. Язык JavaScript

2 Объектная модель документа DOM (Document Object Model) платформенной-независимый интерфейс броузера с отображаемым документом HTML. Спецификация такой модели определена консорциумом W3C, и большинство разработчиков броузеров реализовали ее в последних версиях своих продуктов. Основная идея состоит в использовании общего интерфейса API, который разработчики Web-страниц могут применять для обработки содержимого документа HTML (или XML), а также ресурсов самого броузера.

3 Объектная модель документа Объектная модель документа определяет следующее Интерфейсы и объекты, используемые для представления и обработки документа. Семантику этих интерфейсов и объектов, включая поведение и атрибуты. Взаимосвязи и взаимодействие между этими интерфейсами и объектами. Еще одним ключевым аспектом модели DOM является ее независимость от платформы и разработчика.

4 Язык JavaScript Является языком написания сценариев для броузеров Был разработан компанией Netscape как LiveScript В 1995 переименован как JavaScript В настоящее время стандартизирован European Computer Manufacturers Association (ECMA) как ECMA-262

5 JavaScript и Java Язык JavaScript похож на Java, но, в отличие от последнего, не обеспечивает строгой проверки типов. Среда выполнения JavaScript тоже меньше, чем Java, и содержит меньшее количество типов данных Язык JavaScript основан на объектах, но не является объектно-ориентированным т.е. он использует встроенные расширяемые объекты, но не поддерживает определенные пользователем типы и механизм наследования

6 JavaScript и Java Поскольку язык JavaScript не является компилируемым, он поддерживает динамическое связывание и все ссылки на объекты проверяются в процессе выполнения сценария. JavaScript поддерживает функции без каких-либо специальных требований к их объявлению.

7 Применение JavaScript Некоторые операции, выполняемые CGI, могут быть реализованы JavaScript (кроме манипулирования файлами или сетевыми операциями) Обработка пользовательских форм проверка корректности вводимых данных обработка событий DOM позволяет создавать динамические документы HTML с использованием JavaScript

8 Выполнение сценария JavaScript Сценарии JavaScript выполняются броузерами Загрузив страницу HTML, нет возможности обмениваться информацией с сервером NB сценарии могут выполнять запросы HTTP и загружать другие страницы Нет необходимости в использовании виртуальной машины Java VM

9 JavaScript и ООП JavaScript НЕ является объектно- ориентированным Основан на использовании объектов НЕ поддерживает наследование классов НЕ поддерживает полиморфизм

10 Вставка JavaScript Поскольку сценарии JavaScript внедряются в код HTML, они должны сосуществовать в рамках одного документа как различные элементы. Для определения области сценария JavaScript в коде HTML используется дескриптор. Этот дескриптор относится к расширению языка HTML и может содержать любое количество операторов JavaScript. Дескриптор обозначает начало сценария JavaScript, а его конец.

11 Способы вставки Напрямую -- Сценарий JavaScript -- Посредством отдельного файла <script type = text/javascript src = myScript.js>

12 Пример alert(Hello World.)

13 Характеристики синтаксиса Название идентификаторов: начинаются с буквы или символа подчеркивания, а затем могут следовать дополнительно цифры чувствительный к регистру 25 зарезервированных ключевых слов + будущие слова Использование точки с запятой Может вызывать проблемы Является «как бы» необязательным

14 Ключевые слова

15 Комментарии Разные формы // /* … */ Поскольку код JavaScript не соответствует правилам и структуре языка HTML, устаревшие броузеры могут неправильно его интерпретировать и выдавать большое количество ошибок и предупреждений. Во избежание этого используются комментарии HTML и JavaScript, позволяющие защитить области, при обработке которых у броузеров, не поддерживающих JavaScript, могут возникнуть проблемы.

16 Базовые типы Пять базовых типов: Number, String, Boolean, Undefined, or Null Для Number, String и Boolean реализованы соответствующие объекты

17 Базовые типы Все числа сохраняются как числа с плавающей точкой (двойная точность) Для разделения символов и строк используются символы или " Булевы значения: true или false Тип Null имеет единственное значение null Тип Undefined имеет единственное значение undefined

18 Создание переменных При создании переменной нет необходимости указывать ее тип. Переменные определяют как с начальными значениями, так и без них. В процессе выполнения программы уже созданные переменные можно даже приводить к различным типам данных. Переменную можно создать одним из способов: при помощи оператора var и операции присваивания (=); при помощи операции присваивания (=). Пример var sum = 0, today = "Monday", flag = false;

19 Числовые операции умножения (*); деления (/); сложения (+); вычитания (-); инкремент (++); декремент (--);

20 Объекты Math и Number Объект Math предоставляет математические функции: floor, round, max, min и т.д. например, Math.cos(x) Объект Number обладает следующими полезными свойствами

21 Объект String Предоставляет свойства и методы для работ со строками var str = George; var len = str.length; Строковый объект может содержать специальные символы, управляющие форматированием строк: \n - символ новой строки; \r - символ возврата каретки; \f - код перехода на новую страницу; \xnn - представление символа в виде шестнадцатеричного ASCII-кода nn; \b - код клавиши [Backspace].

22 Функции для работы со строками charAt() – возвращает символ, находящийся в заданной позиции строки indexOf() – возвращает индекс первого заданного символа, найденного в строке. substring() – возвращает подстроку текстовой строки. toLowerCase() – преобразует все буквы строки в строчные toUpperCase() – преобразует все буквы строки в прописные

23 Объект Date Создание объекта, используя конструктор Date по умолчанию var today = new Date(); Методы объекта Date: toLocaleString – returns a string of the date getDate – returns the day of the month getMonth – returns the month of the year (0 – 11) getDay – returns the day of the week (0 – 6) getFullYear – returns the year getTime – returns the number of milliseconds since January 1, 1970 getHours – returns the hour (0 – 23) getMinutes – returns the minutes (0 – 59) getMilliseconds – returns the millisecond (0 – 999)

24 Вывод информации на экран Модель для отображения в окне броузера – объект Window Содержит два атрибута: document и window Для вывода в HTML-страницу используется объект Document содержит метод write, который позволяет динамически менять содержимое страницы Например document.write("Answer:, result, " "); Параметр отправляется и отображается в броузере

25 Вывод информации на экран Объект Window содержит три метода для вывода диалоговых окон 1. Alert alert(The sum is: + sum + \n");

26 Вывод информации на экран Объект Window содержит три метода для вывода диалоговых окон 2. Confirm var question = confirm("Do you want to continue this download?");

27 Вывод информации на экран Объект Window содержит три метода для вывода диалоговых окон 3. Prompt prompt("What is your name?", ");

28 Условные операторы Операторы if и if…else if (a > b) document.write(a is greater than b ); else { a = b; document.write(a was not greater than b, now they are equal ); } Оператор switch

29 Циклы while (условие) операторы for (init; control; increment) операторы do операторы while (условие)

30 Массивы В качестве элементов массивов могут использоваться базовые типы и объекты Массивы можно создать двумя способами: используя оператор new или присвоив некоторые значения var myList = new Array(24, "bread", true);//4 элемента с инициализацией var myList2 = new Array(24);//массив 24 элемента var myList3 = [24, "bread", true]; Длина массива является динамической и доступна с использованием атрибута length myList.length = 150;

31 Функции function имя_функции([формальные параметры]) { -- тело функции – } Для возврата значений используется оператор return

32 Пример вызова функций Parameters function params(a, b){ document.write("Function params was passed ", arguments.length, " parameter(s) "); document.write("Parameter values are: "); for (var arg = 0; arg "); document.write(" "); } // --> // A text driver for params params("Mozart"); params("Mozart", "Beethoven"); params("Mozart", "Beethoven", "Tchaikowsky");

33 Объекты JavaScript и DOM Объектная модель документа – главный источник объектов для JavaScript Обеспечивает объектный интерфейс не только для документов HTML, но и для броузера. Сценарий JavaScript может взаимодействовать с броузером для загрузки новой страницы, проверять журнал броузера (список загруженных ранее Web-страниц) или взаимодействовать с другими страницами в соседних фреймах

34 Объекты JavaScript и DOM Главным объектом при работе с документами является document. Ссылку на этот объект можно получить с помощью свойства document объекта window, который является глобальным для любой функции JavaScript. Например today = new Date(); weekdays = new Array(Вс, Пн, Вт, Ср, Чт,Пт, Сб); dow = weekdays[today.getDay()]; //строка window.document.forms[demo].elements[inday ].value =dow;

35 Объекты JavaScript и DOM Подобным образом функционирует большинство сценариев JavaScript: сначала выполняются вычисления, реализующие бизнес-логику, а затем осуществляется доступ к соответствующим интерфейсам модели DOM для обновления документа.

36 Объекты JavaScript и DOM Подобным образом функционирует большинство сценариев JavaScript: сначала выполняются вычисления, реализующие бизнес-логику, а затем осуществляется доступ к соответствующим интерфейсам модели DOM для обновления документа. Стандарт DOM определяет иерархию объектов, используемых сценариями для доступа к содержащейся в документе информации и даже к самому броузеру.

37 Объекты JavaScript и DOM Иерархия объектов

38 Пользовательские объекты JavaScript Хотя JavaScript и не является полноценным объектно-ориентированным языком, он обеспечивает механизм для инкапсуляции. Инкапсуляция (encapsulation) это возможность сокрытия данных внутри объекта. В языке JavaScript можно создать экземпляр родового объекта (generic object) и назначить ему свойства и даже методы.

39 Пример cartLineItem= new Object(); cartLineItem.productID = MG1234; cartLineItem.productName = MGB Mk I Roadster; cartLineItem.qty = 2; cartLineItem.unitPrice = 12500;

40 Пример (прод.) Создание метода для объекта function total() { return (this.qty * this.unitPrice); } document.write( + cartLineItem.qty + + cartLineItem.productName +стоит $ + cartLineItem.total() + ); Результат выполнения 2 MGB Mk I Roadster стоит $25000

41 Прототип (конструктор) Для простоты можно определить прототип, напоминающий конструктор в С++. Прототип (prototype) это функция, создающая определенный пользователем объект и, кроме того, инициализирующая его свойства. Прототип для объекта JavaScript должен также включать функции объекта.

42 Прототип (конструктор) Прототип рассмотренного выше объекта LineItem должен иметь следующий вид. function LineItem( id, name, qty, price) { this.productID = id; this.productName = name; this.qty = qty; this.unitPrice = price; this.total = total; }

43 Прототип (конструктор) Если определен прототип, то массив экземпляров LineItem можно создать с помощью следующего кода JavaScript. cartLineItem1 = new LineItem (MG123, MGB Mk I Roadster, 1, 36000); cartLineItem2 = new LineItem (AH736, Austin-Healey Sprite, 1, 9560); cartLineItem3 = new LineItem (TS225, Triumph Spitfire Mk I, 1, 11000);

44 События в JavaScript Принцип использования событий в клиентской части играет важную роль для большинства приложений. Событие HTML или броузера это нечто, включающее сценарий или запускающее модуль. Обычно событие генерируется при выполнении пользователем некоторых действий с броузером или документом, хотя в некоторых случаях броузер сам может генерировать события.

45 Категории событий события, связанные с документами (события документа): загрузка и выгрузка документов; события, связанные с гиперсвязью (события гиперсвязи): активизация гиперсвязи; события, связанные с формой (события формы): щелчки мыши на кнопках получение и потеря фокуса ввода и изменение содержимого полей ввода, областей текста и списков; выделение текста в полях ввода и областях текста; события, связанные с мышью: помещение указателя мыши на гиперсвязь и активизация гиперсвязи.

46 События В таблице перечислены имена всех событий и условия их возникновения: Имя события Атрибут HTMLУсловие возникновения события BluronBlur Потеря фокуса ввода элементом формы ChangeonChange Изменение содержимого поля ввода иди области текста, либо выбор нового элемента списка ClickonClick Щелчок мыши на элементе формы или гиперсвязи FocusonFocus Получение фокуса ввода элементом формы LoadonLoad Завершение загрузки документа MouseOveronMouseOver Помещение указателя мыши на гиперсвязь MouseOutonMouseOut Помещение указателя мыши не на гиперсвязь SelectonSelect Выделение текста в поле ввода или области текста SubmitonSubmit Передача данных формы UnloadonUnload Выгрузка текущего документа и начало загрузки нового

47 События в JavaScript Обработчик события определяет имя функции, вызываемой при возникновении события. При этом не все элементы документа HTML могут генерировать события. За исключением встроенных сценариев JavaScript (не рекомендуемых к использованию), все функции JavaScript выполняются в ответ на некоторые события. Пример Дескриптор документа HTML определяет основную содержательную часть документа и позволяет генерировать следующие события: onLoad onUnload onBlur onFocus

48 Пример обработки событий function main() { document.write(Теперь командовать буду я!); } тестовая страница Это нормальная страница

49 Рекомендации использования JavaScript На сегодняшний день одним из наиболее популярных способов использования сценариев JavaScript в Internet является обработка элементов меню или кнопок на Web-странице. При отображении сценариев JavaScript в модели анализа или проектирования приложения очень важно разделять бизнес-логику и уровень представления. NB Язык JavaScript очень полезен для обоих аспектов. Если сценарий JavaScript используется при реализации бизнес-логики для проверки правил ввода, выполнения вычислений и т.д. значит, он относится к модели проектирования (и к модели анализа). Если же сценарии используются для улучшения внешнего вида приложения, то они относятся к модели интерфейса пользователя и прототипам.

50 Регулярные выражения Регулярное выражение (regular expression) средство для обработки строк или последовательность символов, определяющая шаблон текста. Способы var reg=/рег_выражение/ reg = new RegExp(рег_выражение)

51 Метасимволы Символ Значение \bграница слова \Bне граница слова \dцифра от 0 до 9 \Dне цифра \sодиночный пустой символ \Sодиночный непустой символ \wбуква, цифра или символ подчёркивания \Wне буква, цифра или символ подчёркивания.любой символ [ ]набор символов [^ ]набор не входящих символов

52 Примеры Правильность Почтовый индекс /\d{5}/

53 Функции exec– Метод объекта RegExp. Выполняет поиск соответствия в строке. Результат возвращает в массиве. test – Метод объекта RegExp. Тестирует строку на соответствие шаблону. Возвращает true или false. match – Выполняющий поиск на соответствие строки шаблону. В случае успешного соответствия результат возвращает в массиве, иначе null. Метод объекта String.

54 Функции search – Выполняет тестирование на соответствие. В случае успешного соответствия возвращает индекс в массиве строки, иначе –1. Метод объекта String. replace – Выполняет поиск и замену подстроки. Метод объекта String. split – Используется для разделения строки на массив подстрок. В качестве разделителя может выступать регулярное выражение.

55 Пример function tst_phone_num(num){ // Use a simple pattern to check the number of digits and the dash var ok = num.search(/\d{3}-\d{4}/); if (ok == 0) return true; else return false; }

56 Пример (прод.) var tst = tst_phone_num(" "); tst = tst_phone_num("444-r432"); tst = tst_phone_num(" "); Результат is a legal phone number 444-r432 is not a legal phone number is not a legal phone number