Лаб 2 (Лабораторный практикум)

Методические указания к выполнениюлабораторной работы и практикума №2Javascript. Добавление динамического поведения. Средства отладки.Создание сложных HTML-страниц.Самарев Роман Станиславовичканд. техн. наук, доцентsamarev@acm.orgкаф. ИУ-6 «Компьютерные системы и сети»МГТУ им. Н.Э. БауманаМосква 2013ОглавлениеЦель работы ................................................................................................................. 3Краткие сведения о Javascript .................................................................................... 4Подключение Javascript в HTML ........................................................................... 4Синтаксис ................................................................................................................. 5Комментарии ...........................................................................................................

6Числа......................................................................................................................... 6Строки ...................................................................................................................... 6Преобразование чисел в строку .........................................................................

7Преобразование строк в числа ........................................................................... 7Логические операции .............................................................................................. 8Циклы ....................................................................................................................... 9Функции ................................................................................................................. 10Объекты ..................................................................................................................

10Массивы ................................................................................................................. 10Переменные и их области видимости ................................................................. 11Основные операторы и инструкции .................................................................... 13Объекты и классы.................................................................................................. 13Document Object Model (DOM) и программирование в браузере ........................

15Работа с документами ........................................................................................... 18Обработка событий ............................................................................................... 21Средства отладки ......................................................................................................

23Литература ................................................................................................................. 25Контрольные вопросы .............................................................................................. 26Задание для практикума №2 .................................................................................... 27Задание для лабораторной работы №2 ...................................................................

28Приложение. Библиотеки jQuery. Dojo ................................................................... 29Библиотека jQuery............................................................................. 29Библиотека Dojo ................................................................................ 322Цель работыЦелью работы является изучение основных принципов программирования наязыке Javascript, изучение способов обхода узлов модели документа DOM,изучение принципов динамического формирования кода страницы HTM, атакже получение практических навыков отладки Javascript-приложения.3Краткие сведения о JavascriptОбъектно-ориентированный скриптовый язык программирования. Являетсядиалектом стандартизованного языка ECMA_262 (версия 3) European ComputerManufacturer’s Association (ECMA).Язык с динамической типизацией, автоматическим управлением памяти.Версия 1.0 была реализована в Netscape 2.0, март 1996. Предназначен дляиспользования в веб-приложениях.

Позднее область применения быларасширена. В настоящее время активно используется как для выполненияпрограмм на стороне веб-браузера, так и на стороне веб-сервера для упрощенияинтеграции с «тяжелыми» веб-приложениями. Кроме того, в программныхпродуктах Mozilla активно используется для программирования интерфейсанастольных приложений в составе технологии XUL.Подключение Javascript в HTMLВ HTML-документах Javascript при помощи одного и того же элемента <script>может быть внедрён в тело документа или подключен внешний ресурс.В случае внедрения в тело документа Javascript-код вставляется между тегами<script> и </script>:<script type="text/javascript">//Внедрённый код....</script>Рекомендуется весь Javascript-код включать в заголовок страницы, однако этотребование не является жёстким.В случае подключения внешнего ресурса используется атрибут src, которомууказывается URL Javascript-кода.<script type="text/javascript" src="overlib.js"></script>Обратите внимание на то, что теги <script></script> всегда парные!Пример клиентского JavaScript [1] с внедрённым кодом:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Факториалы</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><h1>Таблица факториалов</h1><script>for(fact = i = 1; i < 10; i++) {fact = fact * i;document.write(i + "! = " + fact + "<br />");}</script></body></html>Результат выполнения этого скрипта представлен на рисунке 1.

Разметкапродемонстрирована с использованием отладчика Firebug.4Рисунок 1 Просмотр структуры динамически сгенерированной разметки.СинтаксисСпецификации ECMAScript v1 и v2 предполагают использование в кодепрограммы 7-ми битной ASCII-кодировки и использование UNICODEсимволов в комментариях или строковых литералах. ECMAScript v3 позволяетиспользовать UNICODE в любой части программы, однако для того, чтобыисключить проблемы совместимости со старыми браузерами, этого следуетизбегать.JavaScript чувствителен к регистру.

Символы табуляции и перевода строкигнорируются. Однако есть одно замечание. Разделителем простых операторовявляется символ “;”, но не является обязательным в том случае, если операторыразделены переводом строк.5Обратите внимание на то, что следующие записи эквивалентны:a=1;b=3;иa=1b=3Однако запись:returntrueявляется некорректной, поскольку её эквивалент:return;true;но неreturn true;КомментарииКомментарии Javascript аналогичны языкам C и C++.// однострочный комментарий/* многострочныйкомментарий*/ЧислаС точки зрения внутреннего представления для JavaScript все числа являются64-х разрядными числами с плавающей точкой и описываются стандартомIEEE 754.Все целые числа должны лежать в диапазоне от –9007199254740992 (–253) до9007199254740992 (253), поскольку иначе произойдёт потеря младшихразрядов.Вещественные числа могут находиться в диапазоне от ±1,7976931348623157 ×10308 до ±5 × 10-324.Допустимы следующие литералы: Десятичные целые числа (0, 234, 652345). Шестнадцатеричные числа (0xF1, 0xfe340b). Вещественные числа ([цифры][.цифры][(E|e)[(+|_)]цифры]).При работе с числами доступны все традиционные арифметические операции.Кроме того, отметим, что существуют специальные константы Infinity, NaN,Number.MAX_VALUE и некоторые другие, которые могут быть использованыв арифметических операциях [1].СтрокиСтроки являются объектами класса String.6Строковый литерал – это последовательность из нуля или более Unicodeсимволов, заключенная в одинарные или двойные кавычки (' или ").Строка может содержать специальные управляющие символы такие как: \n, \b,\0, \xXX, \xXXXX и некоторые другие.При работе со строками доступны операции конкатенации:str = "123" + "456"Для определения длины строки можно использовать свойство length:str.lengthИзвлечение подстроки производится методом substring (первая позиция,количество).

Нумерация символов – с нуля.substr = str.substring(2,5);Метод indexOf определяет позицию первого символа в указанной строке s:i = str.indexOf('a');Операции, которые можно проводить со строками определяются классомString, однако их подробное рассмотрение см. в [1].Преобразование чисел в строкуJavascript непосредственно обеспечивает преобразование чисел в строку, еслиони используются при конкатенации строк.var n = 10str = n + " получено в результате";str = n.toString() + " получено в результате";Если формат вывода необходимо четко определить, могут быть использованыдополнительные методы:var n = 123456.789;n.toFixed(0);// "123457"n.toFixed(2);// "123456.79"n.toExponential(1); // "1.2e+5"n.toExponential(3); // "1.235e+5"n.toPrecision(4); // "1.235e+5"n.toPrecision(7); // "123456.8"Преобразование строк в числаJavascript может явно преобразовать строки в числа, если это следует изконтекста.Пример:var n = "12"*"2" // результат 24Однако это не сработает в случае:var n = "12" + "2" // результат "122", поскольку + является конкатенацией7Для решения этой проблемы может быть использован класс Number(), однакотребование его использования заключается в том, что число должно бытьобязательно десятичным.Функции parseInt() и parseFloat() позволяют организовать разбор чисел изстроки, содержащей не только цифры.