Введение в язык программирования JavaScript
Презентацию к данной лекции Вы можете скачать здесь.
JavaScript - объектно-ориентированный скриптовый язык программирования. Чаще всего применяется в браузерах для создания сценариев. Сценарии придают веб-страницам интерактивность. Синтаксически язык похож на Си и Java. JavaScript чувствителен к регистру.
Структурно JavaScript состоит из трех частей:
- ядро ( ECMAScript ),
- объектная модель браузера ( Browser Object Model или BOM),
- объектная модель документа ( 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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript">
alert('Здраствуй, Мир!');
</script>
</head>
<body>
</body>
</html>
Пример 2. Расположение кода JavaScript внутри HTML-тега
В предлагаемом примере JavaScript-код интегрирован в HTML-код ссылки ().
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<body>
<a href="order.aspx" onclick="return confirm('Подтвердите ввод?');">Заказать товар</a>
</body>
</html>
Пример 3. Создание обработчика события
Использование JavaScript- кода в контексте разметки страницы считается не очень удачной практикой. Более предпочтительным для решения этой же задачи является следующий код ():
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title> Пример 3. Создание обработчика события</title>
<script type="text/vbscript">
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>
Пример 4. Вынесение JavaScript-кода в отдельный файл
Есть еще одна возможность подключения JavaScript - написать скрипт в отдельном файле, а потом подключить его с помощью конструкции:
<script type="text/javascript" src = "http://Путь к файлу со скриптом"> </script>
Создадим файл со следующим содержимым:
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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Вынесение JavaScript-кода в отдельный файл</title>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body>
</body>
</html>
Области применения языка программирования JavaScript
Web-приложения
JavaScript используется в клиентской части web-приложений, при этом клиенты не зависят от конкретной операционной системы пользователя.
AJAX
JavaScript используется в AJAX, когда web-страница не перезагружается полностью при обновлении данных и интерфейс web-приложения становится быстрее, чем при традиционном подходе. В качестве примера можно привести Gmail, некоторые картографические сервисы.
Comet
Comet - механизм работы веб-приложений, использующих постоянные HTTP-соединения, когда web-сервер отправляет данные браузеру без дополнительного запроса со стороны браузера.
Браузерные операционные системы
Исходный код IndraDesktop WebOS на 73 % состоит из JavaScript, код браузерной операционной системы IntOS написан на JavaScript на 70 %. Доля JavaScript в исходном коде eyeOS - 21 %.
Букмарклеты
JavaScript используется для создания небольших программ, размещаемых в закладки браузера. При этом используются URL-адреса со спецификатором javascript.
Пользовательские скрипты в браузере
Пользовательские скрипты в браузере - это программы, позволяющие автоматически заполнять формы, переформатировать страницы, скрывать нежелательное содержимого и встраивать желательное для отображения содержимое, изменять поведение клиентской части веб-приложений, добавлять элементы управления на страницу и т. д.
Серверные приложения
JavaScript на стороне сервера используется в проектах Google.
Мобильные приложения
JavaScript использовался при разработке операционной системы Palm webOS.
Виджеты
Виджет - вспомогательная программа, использующаяся для украшения рабочего стола или быстрого получения информации из интернета без помощи web-браузера. При помощи JavaScript созданы Apple Dashboard, Microsoft Gadgets, Yahoo!_Widgets, Google Desktop Gadgets и Klipfolio Dashboard.
Прикладное программное обеспечение
57 % исходного кода Mozilla Firefox написано на JavaScript.
Манипуляция объектами приложений
Сценарии JavaScript поддерживаются в таких приложениях Adobe, как Adobe Photoshop, Adobe Dreamweaver, Adobe Illustrator и Adobe InDesign.
Офисные приложения
JavaScript используется в офисных приложениях для автоматизации рутинных действий, написания макросов и организации доступа со стороны веб-служб.
Microsoft Office
В Excel Services 2010 добавлен интерфейс JavaScript Object Model (JSOM). JSOM даёт возможность реагировать на действия пользователя в отношении Excel Web Access (EWA), программно взаимодействовать с составляющими EWA. Использование JSOM осуществляется при помощи помещения кода JavaScript на страницу, содержащую компоненты EWA.
OpenOffice.org
JavaScript использовался для написания макросов в приложениях, входящих в состав OpenOffice.org.
Краткие итоги
Язык программирования JavaScript состоит из трех частей: ядра, объектной модели браузера и объектной модель документа. Язык имеет Си-подобный синтаксис, но, в отличие от Си - слабую типизацию. Слабая типизация может вызвать проблемы при автоматическом преобразовании типов переменных. JavaScript - объектно-ориентированный язык, но функции ООП выражены относительно слабо. Код JavaScript можно размещать как на самой web-странице, так и в отдельном файле. JavaScript очень широко применяется при разработке web-приложения. Прежде всего это относится к клиентским web-приложениям, на JavaScript основана технология асинхронного обмена данных с web-сервером AJAX, существенная часть кода некоторых браузерных ОС также написана на JavaScript. JavaScript хорошо подходит для интеграции с различными офисными продуктами, например, в Excel Services 2010 добавлен интерфейс JavaScript Object Model (JSOM).
Набор для практики
Вопросы:
- Из каких частей состоит JavaScript?
- Назовите сильные и слабые стороны языка
- Что общего между JavaScript и C++?
- Где может размещаться JavaScript-код?
- Что такое "песочница"?
- Что такое ECMAScript?
Упражнения:
- Подготовьте сообщение об угрозах для информационных систем, связанных с JavaScript
- Что такое межсайтовый скриптинг?
- Подготовьте сообщение об объектно-ориентированных свойствах JavaScript