А. В. ДИКОВ КЛИЕНТСКИЕ ТЕХНОЛОГИИ ВЕБПРОГРАММИРОВАНИЯ: JAVASCRIPT И DOM Учебное пособие САНКТПЕТЕРБУРГ МОСКВА КРАСНОДАР 018.1я73 Д 45 Диков А. В. Клиентские технологии вебпрограммирова ния: JavaScript и DOM : учебное пособие / А. В. Диков. — СанктПетербург : Лань, 2020. — 124 с. : ил. — (Учебники для вузов. Специальная литература). — Текст : непосредствен ный. 5811440740 Учебное пособие является логическим продолжением предыдущей работы «Клиентские технологии вебдизайна: HTML5 и CSS3» и пред назначено для освоения технологий расширения функционала вебстраниц и придания им подлинной динамичности и интерактивности на уровне клиента. Язык JavaScript до сих пор остается самым популярным языком разработки сценариев для веббраузера. В книге делается акцент на актуаль ную версию стандарта ES2015 (ES6) и не рассматриваются устаревшие возможности. Технология DOM выделена в отдельную часть книги, так как является самостоятельной, но может быть реализована посредством JavaScript. Потенциал DOM, выражающийся в возможности любого динами ческого изменения контента вебстраницы, позволяет создавать не просто вебстраницы, а вебприложения. Учебное пособие может быть полезно как для организации учебного процесса в рамках изучаемых технологий, так и для самостоятельной работы. 018.1я73 Рецензент Д. В. ПАЩЕНКО — доктор технических наук, профессор, проректор по научной работе Пензенского государственного технологического универси тета, почетный работник сферы образования РФ. Îáëîæêà П. И. ПОЛЯКОВА © Издательство «Лань», 2020 © А. В. Диков, 2020 © Издательство «Лань», художественное оформление, 2020 ОГЛАВЛЕНИЕ JAVASCRIPT ........................................................................................................5 ВВЕДЕНИЕ ....................................................................................................6 БАЗОВЫЕ СОБЫТИЯ ....................................................................................7 ПЕРЕМЕННЫЕ И ЗНАЧЕНИЯ ........................................................................9 ФУНКЦИИ ПРЕОБРАЗОВАНИЯ ..................................................................12 КОНСТАНТЫ...............................................................................................14 ШАБЛОННЫЕ ЛИТЕРАЛЫ..........................................................................14 ОБЛАСТЬ ВИДИМОСТИ ПЕРЕМЕННОЙ ....................................................15 УПРАВЛЯЮЩИЕ КОНСТРУКЦИИ...............................................................16 Цикл ........................................................................................................16 Развилка (условный переход) ...............................................................18 Множественный переход......................................................................18 ПРОЦЕДУРЫ И ФУНКЦИИ .........................................................................20 Анонимные функции .............................................................................24 Анонимная функция как обработчик события ....................................26 Стрелочные функции .............................................................................27 Функции обратного вызова...................................................................28 Функция как объект ...............................................................................28 МАТЕМАТИКА НА ВЕБ-СТРАНИЦАХ. Объект Math ..................................28 Динамическое изменение списка ...........................................................34 Практическая работа 1 .............................................................................36 МАССИВЫ ..................................................................................................39 Основные свойства и методы объекта Array .......................................40 Перебирающие методы объекта Array ................................................42 Вложенные массивы..............................................................................44 ОПЕРАТОР РАСШИРЕНИЯ .........................................................................45 Практическая работа 2 .............................................................................47 СТРОКИ. Объект String ..............................................................................49 РЕГУЛЯРНЫЕ ВЫРАЖЕНИЯ .......................................................................53 Практическая работа 3 .............................................................................56 ДАТА И ВРЕМЯ. Объект Date ....................................................................58 Практическая работа 4 .............................................................................61 ОБЪЕКТНАЯ МОДЕЛЬ БРАУЗЕРА ..............................................................62 КУКИЗ (COOKIES)........................................................................................81 Практическая работа 5 .............................................................................85 Практическая работа 6 .............................................................................87 КЛАССЫ......................................................................................................89 DOM .................................................................................................................93 ВВЕДЕНИЕ ..................................................................................................94 УЗЛЫ ..........................................................................................................97 АТРИБУТЫ И СВОЙСТВА..........................................................................103 ТЕКСТОВЫЙ УЗЕЛ ....................................................................................108 ОПЕРАЦИИ С УЗЛАМИ ............................................................................113 Практическая работа 7 ...........................................................................118 JAVASCRIPT ВВЕДЕНИЕ Наиболее известными скриптовыми языками на сегодняшний день являются JavaScript, JScript (аналог языка JavaScript от Microsoft), VBScript (Visual Basic Script от Microsoft) и ActionScript (от компании Macromedia). Скриптовый язык — это объектно-ориентированный язык программирования, который добавляет интерактивность, обработку данных, управление браузером и многое другое в содержимое разрабатываемых веб-страниц или flash-приложений (ActionScript). Скриптовый язык не содержит всех возможностей обычных языков программирования, таких, например, как работа с файлами или управление графикой. Созданные с помощью скриптовых языков программы работают в браузерах, поддерживающих их выполнение. Создаваемые на скриптовых языках программы, называемые сценариями или скриптами, включаются в состав вебстраниц и распознаются и обрабатываются браузером отдельно от остального html-кода. Браузер, встречая ошибки в скриптах, выдает диалоговое сообщение об этом или указывает об ошибке в своей статусной строке. ActionScript может компилироваться в код для хранения в SWF-файле. SWF-файлы исполняются программой Flash Player, которая существует в виде плагина к веб-браузеру. Язык JavaScript разработан в 1995 г. фирмой Netscape в сотрудничестве с Sun Microsystems на базе языка Sun’s Java*. По инициативе компании Netscape была проведена стандартизация языка ассоциацией ECMA. Стандартизированная версия имеет название ECMAScript (сокращенно ES). Первой версии спецификации ES1, появившейся в 1997 г., соответствовал JavaScript версии 1.1. Всего существует 8 версий ES. Режим strict (строгий режим), введенный в ECMAScript 5, позволяет использовать более строгий вариант JavaScript. Операторы JavaScript размещаются в контейнере Приведенный скрипт выводит на веб-страницу текстовую строку «Это JavaScript!». Подробное объяснение метода write объекта document можно найти на с. 74. Комментарии JavaScript отличаются от комментариев языка HTML. // комментарии на одной строке комментарии на нескольких строчках Комментарии могут быть использованы для отладки сценариев. Кроме комментариев можно использовать метод log объекта Console, который выводит в консоль браузера значение α. console.log(α) где α — выражение или переменная. Язык чувствителен к регистру при задании значений параметров! БАЗОВЫЕ СОБЫТИЯ Веб-страница, содержащая скрипт, позволяет обрабатывать события, связанные с окном браузера, — такие как загрузка документа, закрытие окна, появление курсора над объектом страницы, нажатие клавиши мыши или клавиатуры и др. Скрипт может по-разному реагировать на эти события. Скриптовые программы иногда еще называют сценариями просмотра веб-страницы. Базовые события JavaScript onBlur элемент теряет фокус onChange изменение значения текстового поля onFocus элемент получает фокус onCopy копирование в буфер обмена onClick щелчок мышкой в области элемента onMouseOver перемещение мышиного курсора на область элемента onMouseOut перемещение мышиного курсора за область элемента onMouseMove перемещение мышиного курсора в области элемента onMouseDown нажатие кнопки мыши onMouseUp отпускание кнопки мыши onReset нажатие кнопки типа RESET onSubmit нажатие кнопки типа SUBMIT onLoad завершение загрузки страницы или графического изображения onUnload переход на другую страницу или завершение работы браузера onTransitionEnd окончание анимационного перехода (для css-свойства transition) События, как и атрибуты, связываются с тегами языка HTML и не заключаются в контейнер Для написания скриптов, управляющих содержимым веб-страницы, необходимо представлять себе иерархию объектов HTML-документа. Управление содержимым веб-страницы после ее загрузки на компьютер клиента лежит в основе технологии Dynamic HTML. JavaScript вместе с каскадными таблицами стилей (CSS) составляют фундамент этой технологии. ПЕРЕМЕННЫЕ И ЗНАЧЕНИЯ Переменной в языке программирования называют такое слово, которое обладает каким-либо значением, и это значение можно изменить в любой момент времени, а предыдущее значение будет безвозвратно потеряно. Значением переменной в JavaScript может быть либо число, либо логическое значение (true/false), либо строка, либо массив. Присвоить (изменить) значение переменной можно разными способами, о которых будет сказано. В JavaScript переменные можно объявлять с помощью служебного слова var (или let), после которого следует имя переменной или нескольких переменных, разделенных запятой. Имена переменных, как и все другие элементы языка, чувствительны к регистру. var α [{,β}] var x, y, z var угол, радиус, длина_окружности Переменным могут быть даны следующие типы значений. 1. Числовой (целые числа и с плавающей запятой). var пи = 3.14 var радиус = 5.06 / 2 document.write ("Площадь круга = " + пи*радиус*радиус + "
") //научная запись нч = 3.1415782e + 21 document.write (“Научная запись”, нч, "
") // восьмеричные (первая цифра ноль) var вч = 015 document.write ("015", "₈", "->", вч, "
") //16-ричные (первая цифра ноль) var шч = 0x23 document.write ("0x23", "₁₆", "->", шч, "
") Свойства MAX_VALUE и MIN_VALUE объекта Number возвращают информацию о максимальном и минимальном числах, с которыми может оперировать JavaScript. document.write ('Максимальное число JavaScript = ', Number.MAX_VALUE, "
") document.write ('Минимальное число JavaScript = ', Number.MIN_VALUE, "
") Над числами определены следующие операции: умножение (*), деление (/), остаток от деления (%), сложение (+), вычитание (–). Например: 5*x-7%2+x/5 2. Логический (true/false). var flag = false 3. Строковый. Строка — последовательность символов алфавита языка программирования, заключенная в кавычки или апострофы. Если в кавычки или апострофы не заключить ни одного символа, будем иметь пустую строку. Каждый символ