Введение в язык программирования 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-кода на страницу, можно использовать теги ).

<!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>

(рис 7.1)

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

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

<!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>

(рис 7.2)

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

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

<!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>

(рис 7.3)

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

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

<script type="text/javascript" src = "http://Путь к файлу со скриптом"> </script>

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

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>

(рис 7.4)

Области применения языка программирования 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

Занятие пройдено

Предыдущее занятие Занятие пройдено Следующее занятие

Вернуться к учебному плану