Пиши Дома Нужные Работы

Обратная связь

Основные положения синтаксиса

Сценарий 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 (начинается с нуля, а, следовательно, является восьмеричным целым и точки в литерале быть не должно)






ТОП 5 статей:
Экономическая сущность инвестиций - Экономическая сущность инвестиций – долгосрочные вложения экономических ресурсов сроком более 1 года для получения прибыли путем...
Тема: Федеральный закон от 26.07.2006 N 135-ФЗ - На основании изучения ФЗ № 135, дайте максимально короткое определение следующих понятий с указанием статей и пунктов закона...
Сущность, функции и виды управления в телекоммуникациях - Цели достигаются с помощью различных принципов, функций и методов социально-экономического менеджмента...
Схема построения базисных индексов - Индекс (лат. INDEX – указатель, показатель) - относительная величина, показывающая, во сколько раз уровень изучаемого явления...
Тема 11. Международное космическое право - Правовой режим космического пространства и небесных тел. Принципы деятельности государств по исследованию...



©2015- 2024 pdnr.ru Все права принадлежат авторам размещенных материалов.