Области применения языка программирования JavaScript

Лекция 7: Введение в язык программирования JavaScript

< Практическая работа

JavaScript - объектно-ориентированный скриптовый язык программирования. Чаще всего применяется в браузерах для создания сценариев. Сценарии придают веб-страницам интерактивность. Синтаксически язык похож на Си и Java. JavaScript чувствителен к регистру.

Структурно JavaScript состоит из трех частей:

1. ядро ( ECMAScript ),

2. объектная модель браузера ( Browser Object Model или BOM),

3. объектная модель документа ( Document Object Model или DOM).

Ядро

Ядром JavaScript является спецификация ECMAScript, описывающая типы данных, инструкции, ключевые и зарезервированные слова, операторы, объекты, регулярные выражения.

Объектная модель браузера

Каждое из окон браузера представляется объектом window. Браузеры управляют окнами, фреймами, адресом открытой страницы, поддерживают работу с cookie.

Объектная модель документа

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

JavaScript сценарии можно запускать несколькими способами:

Пример 1. Встраивание кода JavaScript в web-страницы

Для добавления JavaScript-кода на страницу, можно использовать теги <script></script>. В качестве примера приведем программу, выводящую на экран модальное окно с надписью "Здравствуй, Мир!" ().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

alert('Здраствуй, Мир!');

</script>

</head>

<body>

</body>

</html>

Рис. 7.1.

Пример 2. Расположение кода JavaScript внутри HTML-тега

В предлагаемом примере JavaScript-код интегрирован в HTML-код ссылки ().

<html>

<head>

<title> Расположение кода JavaScript внутри тега </title>

</head>

<body>

<a href="order.aspx" onclick="return confirm('Подтвердите ввод?');">Заказать товар</a>

</body>

</html>

Рис. 7.2.

Пример 3. Создание обработчика события

Использование JavaScript- кода в контексте разметки страницы считается не очень удачной практикой. Более предпочтительным для решения этой же задачи является следующий код ():

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title> Пример 3. Создание обработчика события</title>

window.onload = function() {

var myLink = document.getElementById("orderLink");

myLink.onclick = function() {

return confirm('Вы уверены?');

};

</script>

</head>

<body>

<a href="order.aspx" id="orderLink">заказать товар</a>

</body>

</html>

Рис. 7.3.

Пример 4. Вынесение JavaScript-кода в отдельный файл

Есть еще одна возможность подключения JavaScript - написать скрипт в отдельном файле, а потом подключить его с помощью конструкции:

Создадим файл со следующим содержимым:

var sentense;

sentense = "Иссушают науки и тело, и ум," + "<br>" +

"Муж ученый поэтому худ и угрюм." + "<br>" +

"Не отведав до срока лозы винограда," + "<br>" +

"Он до времени сам превратился в изюм";

document.write(sentense);

Затем создадим web-страничку со следующим кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Вынесение JavaScript-кода в отдельный файл</title>

</head>

<body>

</body>

</html>

Рис. 7.4.

Области применения языка программирования JavaScript

Web-приложения

JavaScript используется в клиентской части web-приложений, при этом клиенты не зависят от конкретной операционной системы пользователя.

AJAX

JavaScript используется в AJAX, когда web-страница не перезагружается полностью при обновлении данных и интерфейс web-приложения становится быстрее, чем при традиционном подходе. В качестве примера можно привести Gmail, некоторые картографические сервисы.

Comet

Comet - механизм работы веб-приложений, использующих постоянные HTTP-соединения, когда web-сервер отправляет данные браузеру без дополнительного запроса со стороны браузера.