Обратная связь
|
Основные положения синтаксиса Сценарий JavaScript, являясь, по-существу, обычной программой, представляет собой последовательность операторов этого языка.
Каждый оператор с необязательным в конце разделителем (символ ;) обычно располагается в отдельной строке кода программы:
var m=5alert('Подсказка'+m)m = "five"; // но можно и так Разделитель обязателен только в случае задания нескольких операторов на одной строке:
var m=5; alert('Подсказка',m) Любой оператор для удобства чтения может быть продолжен на следующую строку без использования какого-либо символа продолжения:
alert("Подсказка");alert( "Подсказка" ); Нельзя продолжать на другую строку строковый литерал - он должен располагаться полностью на одной строке текста программы или разбит на два строковых литерала, соединенных операцией конкатенации +:
alert("Подсказка") // Правильноalert("Под // Не правильно сказка")alert("Под" + // Правильно "сказка") Пробельные символы в тексте программы являются незначащими, если только они не используются в строковых литералах.
Комментарии в программе JavaScript двух видов - однострочные и многострочные:
// комментарий, расположенный на одной строке./* комментарий, расположенный на нескольких строках.*/ Язык JavaScript чувствителен к регистру.
Размещение операторов языка на странице
Способы встраивания сценария JavaScript в страницу HTML:
· заданием операторов языка JavaScript внутри элемента SCRIPT документа HTML;
· указанием файла с кодом JavaScript в атрибуте SRC открывающего тега элемента SCRIPT;
· определением обработчика событий в открывающем теге любого элемента HTML.
1.4.5. Использование элемента SCRIPT
Элемент SCRIPT состоит из открывающего тега <SCRIPT> и закрывающего тега </SCRIPT>. Между ними записывается код JavaScript. Для совместимости с обозревателями, не поддерживающими язык сценариев JavaScript, рекомендуется код JavaScript заключать в теги комментария HTML. Необязательный атрибут LANGUAGE элемента SCRIPT задает используемый в сценарии язык (по умолчанию JavaScript).
<SCRIPT LANGUAGE="JavaScript"><!--операторы JavaScript//--></SCRIPT> Иногда перед закрывающим тегом комментария HTML ставят символы однострочного комментария JavaScript (как в приведенном примере). Это исторический казус, относящийся к версии 3.0 MS Internet Explorer, в котором этот тег рассматривался как оператор языка JavaScript и приводил к ошибке интерпретации.
Элементов SCRIPT в документе может быть несколько, и они могут располагаться в любом его месте. Но обычно его (или их) располагают в элементе HEAD и в нем (в них) определяют функции, реализующие реакцию документа HTML на действия пользователя, перехватываемые заданными в документе обработчиками событий (см. ниже).
Следует помнить, что сценарий JavaScript, как и весь документ HTML, обрабатывается постепенно, начиная с первой строки. Поэтому если в сценарии используется, например, переменная, определяемая в элементе SCRIPT, расположенном ниже, или ссылка на объект, соответствующий элементу HTML документа, расположенному после элемента SCRIPT, то значение переменной или ссылка на объект для выполняемого в данный момент оператора будут не доступны. После завершения загрузки документа в обозреватель все глобальные переменные и ссылки на объекты HTML, естественно, становятся доступными.
Задание файла с кодом JavaScript
В атрибуте SRC открывающего тега <SCRIPT> можно указать файл с кодом сценария, который будет загружен на машину клиента, вставлен в документ и интерпретирован:
<SCRIPT SRC="./functionsJS/myFuncs.js" LANGUAGE="JavaScript"></SCRIPT> Такой подход удобен, если на многих страницах сайта используются, например, одни и те же функции.
Подгружаемый указанным способом файл сценария не должен содержать никакой разметки HTML.
Содержимое элемента SCRIPT в последних версиях обозревателя Internet Explorer (версии 5.0 и выше) не выполняется никогда. Тогда как в предыдущих версиях оно выполнялось в случае, если по какой-то причине файл сценария, указанный в атрибуте SRC не был загружен.
Обработчики событий
С помощью обработчиков событий, представляющих собой введенные в стандарт HTML дополнительные атрибуты для всех элементов HTML, реализуется реакция отображаемого в обозревателе Интернета документа на действия пользователя или системы. По-существу с их помощью документ становится "живым", реализуя событийно-управляемое приложение.
Имя обработчика начинается с приставки on, за которым следует имя самого события (о возможных событиях и их названиях см. в уроке 11):
xnclick обработчик события click (щелчок мышью)
xnmouseover обработчик события mouseover (наведение указателя мыши на элемент HTML)
Значением атрибута, соответствующего обработчику события, является код JavaScript. Обычно в нем задается вызов функции, реализующей "реакцию" страницы на действия пользователя, но может быть задана и целая последовательность операторов:
<p xnmouseover="color(this)" xnmouseout="color(this)" xnclick="click++; myFunc();">. . . </p> Функция или процедура - это именованная последовательность операторов, которая выполняет определенную задачу и может возвращать некоторое значение, определяемое операцией return (если такой операции в теле функции нет, то ее возвращаемым значением будет специальное значение undefined):
function имя_функции([параметры]) { [операторы JavaScript] [return значение]} Определение необходимых функций следует осуществлять в элементах SCRIPT, расположенных в элементе HEAD документа, так как они становятся доступными уже в начале обработки документа (содержимое элемента HEAD обрабатывается первым).
| Пример 3. Сценарий, вычисляющий время обработки документа
| | В этом примере представлен документ HTML со всеми возможными способами внедрения кода сценария JavaScript, реализующий вычисление времени обработки браузером документа HTML и отображения этой информации в диалоговом окне.
Для вычисления общего времени обработки документа в сценарии, расположенном в элементе HEAD, задается переменная tBegin, в которой хранится время начала обработки документа (не считая времени, ушедшего на обработку тега <HEAD> и самого тега <SCRIPT>).
Второй элемент SCRIPT подключает файл 3.js, в котором находится определение функции time(), возвращающей текущую дату. Эта функция вызывается в сценарии третьего элемента SCRIPT, расположенного в теле документа HTML (элемент BODY). В нем для отображения на странице полученной функцией time() даты используется метод write() объекта document обозревателя. Этот объект представляет всю загруженную в обозреватель страницу, и в момент ее формирования указанным методом можно "писать" на страницу все, что требуется. Однако после завершения обработки документа (при этом генерируется событие load объекта document) запись этим методом в документ приведет к тому, что в нем будет содержаться только то, что записано этим методом.
Для определения времени завершения обработки документа обозревателем используется упоминавшееся событие load и в обработчике события xnload элемента BODY создается переменная tEnd, в которой и хранится время завершения обработки документа.
Для получения общего времени обработки документа по щелчку на кнопке выполняется код, определенный в ее обработчике события xnclick, который вычисляет разность между временем, хранящемся в переменных tBegin и tEnd и отображает результат функцией alert().
<HEAD><SCRIPT LANGUAGE="JavaScript"><!--// Объявление переменной tBegin и инициализация ее// объектом Date, содержащим текущие дату и времяvar tBegin = new Date(); //--></SCRIPT> <SCRIPT SRC=3.js LANGUAGE="JavaScript"></SCRIPT></HEAD> <BODY xnload="tEnd = new Date();"> <P>Начинается отображение страницы, в которую внедрен сценарий JavaScript.</P> <p>Следующая строка сгенерирована внедренным сценарием:</p> <hr><SCRIPT><!--document.write("<p>Сегодня <b>", time(), "</b></p>");//--></SCRIPT><hr> <input type=button xnclick="delta = tEnd.getTime()-tBegin.getTime(); s = 'Время обработки документа:\n'+delta+ ' миллисекунд'; alert(s)" value="Время обработки документа"> </BODY> Файл 3.js располагается в том же каталоге, что и файл документа HTML, и содержит следующий код JavaScript, определяющий функцию получения текущей даты в форме число.месяц.год. |
| Упражнение 1.
| | | Напишите сценарий, который при загрузке документа в браузер формирует его содержимое, представляющее отображенным в виде элемента H1 предложение "Привет, читатель!" и в виде абзаца строку "Сегодня, дата, ты начинаешь изучать динамический HTML.". Вместо дата сценарий должен подставлять текущую дату в формате мм.дд.гггг.
|
| Упражнение 2.
| | | Сценарий, формирующий страницу HTML упражнения 1, сохранить в отдельном файле и подключить его к документу HTML через атрибут SRC открывающего тега элемента SCRIPT. Подключение выполнить, когда файл сценария располагается в том же каталоге, что и документ HTML, а также в подкаталоге каталога документа HTML и в подкаталоге каталога, содержащего каталог с документом HTML.
|
| Упражнение 3.
| | | Напишите сценарий, в котором создается переменная currentDate со значением текущей даты и сразу же после обработки страницы браузером ее содержимое отображается с помощью функции alert().
|
| Упражнение 4.
| | | Создайте страницу с кнопкой и напишите сценарий, реализующий отображение функцией alert() при щелчке на кнопке количество миллисекунд, прошедших от начала загрузки документа в браузер и до момента нажатия кнопки пользователем (каждое нажатие должно отображать увеличивающийся интервал).
|
| Упражнение 5.
| | | Повторите упражнение 3, но только отсчет интервала времени следует вести от момента завершения обработки страницы браузером.
|
Переменные и литералы
Реализация JavaScript является примером языка свободного использования типов. Тип переменной зависит от типа хранимых в ней данных, причем при изменении типа данных, меняется и тип переменной.
JavaScript поддерживает следующие простые типы данных:
1. Числовой(целый и вещественный)
2. Строковый
3. Булевый, или логический
Сложные (ссылочные) типы данных:
1. Объектный
2. Массив
Специальные типы данных:
1. null
2. undefined
Числовой тип
В языке JavaScript целые и вещественные числа не различаются - внутренне они представляются числами в формате плавающей точки. Используется стандарт IEEE 754 представления вещественных чисел в восьмибайтном формате чисел с плавающей точкой. Диапазон изменения абсолютных значений: от 5*10-324 до 1.7976931348623157*10308.
Целые литералы
123, -123, +678 // целое: десятичные числа 0123, -0123, +0677 // целое: восьмеричные числа0x18F, -0X8A, +0xAA // целое: положительное число
Вещественные литералы
1.25 0.125е01 12.5Е-1 0.0125Е+2 Ошибка: 00.234 (начинается с нуля, а, следовательно, является восьмеричным целым и точки в литерале быть не должно)
|
|