Лекция № 7.
Тема. Основы языка JavaScript.
План.
1. Основные определения JavaScript.
2.Возможности и ограничения JavaScript.
3.Связь с HTML – документом
4.Переменные и операторы
5.Арифметические операторы
6.Операторы сравнения
7.Логические операторы
8.Условные операторы
1. Основные определения JavaScript.
JavaScript - объектно-ориентированный язык сценариев, позволяющий включать в веб-страницы исполняемое содержимое (скрипты). JavaScript выполняется на стороне клиента, и поддержка JavaScript включена практически во всех браузерах. С помощью JavaScript можно создавать как статические HTML страницы, так и страницы с динамически изменяемым содержанием.
Сам JavaScript был разработан Брендоном Айхом (на тот момент сотрудником компании Netscape). Собственно, о самом процессе работы над JavaScript ходят чуть ли не легенды, поскольку сроки были очень и очень сжатыми, нужен был результат. Это объясняет ряд все еще существующих в языке ошибок. Подробнее об этом можно прочитать в указанных материалах для самостоятельного изучения.
Предпосылкой появления JavaScript стало желание дать разработчикам HTML-документов возможность динамически управлять всеми объектами, описываемыми в веб-страницах. Изначально язык был включён в браузер Netscape Navigator, начиная с версии 2.0B3 в декабре 1995 года. Первоначально язык назывался Mocha, затем был переименован в LiveScript. На синтаксис JavaScript оказали влияние такие языки, как C и Java, и поскольку технология Java была в то время очень модной, LiveScript переименовали в JavaScript, получив соответствующую лицензию от Sun Microsystems, Inc.
Реализация компании Microsoft получила название JScript. Internet Explorer, начиная с версии 3.0, выпущенной в августе 1996 года, поддерживает JScript. Стандартизация языка ассоциацией ECMA иниицирована компанией Netscape. Стандартизированная версия имеет название ECMAScript, описывается стандартом ECMA-262.
Web-обозреватель, работающий на компьютере-клиенте, обеспечивает среду, в которой JavaScript имеет доступ к объектам, которые представляют собой окна, меню, диалоги, текстовые области, фреймы, cookies(куки) и ввод-вывод в Web-страницу. Кроме того, обозреватель позволяет присоединить сценарии на языке JavaScript к таким событиям, как загрузка и выгрузка страниц и графических образов, нажатие клавиш и движение мыши, выбор текста и пересылка форм. При этом программный код сценариев только реагирует на события и поэтому не нуждается в главной программе. Набор объектов, предоставляемых обозревателем, известен под названием Document Object Model (DOM).
Web-сервер обеспечивает иную среду, в которой объектами являются запросы к базам данных, клиенты, файлы и механизмы блокировки и совместного использования данных. Совместное использование сценариев и на стороне клиента, и на стороне сервера позволяет распределить вычисления между ними и обеспечить желаемый пользовательский интерфейс для Web-приложения.
JavaScript — это язык программирования, основанный на объектах: и языковые средства, и возможности среды представляются объектами, а сценарий (программа) на JavaScript — это набор взаимодействующих объектов.
Объект JavaScript — это неупорядоченный набор свойств, каждое из которых имеет нуль или более атрибутов, которые определяют, как это свойство может использоваться. Например, если атрибуту свойства ReadOnly (неизменяемый) присвоено значение true (истина), то все попытки программно изменить значение этого свойства будут безрезультатны. Свойства — это контейнеры, которые содержат другие объекты, примитивные значения и методы. Примитивное значение — это элемент любого из встроенных типов: Undefined, Null, Boolean, Number и String; объект — это элемент еще одного встроенного типа Object; метод — функция, ассоциированная с объектом через свойство.
2.Возможности и ограничения JavaScript
Подведем итог всему вышесказанному и сформулируем список основных возможностей JavaScript. JavaScript позволяет:
добавлять различные эффекты анимации элементам веб – страницы;
реализовывать поведение веб – страницы в ответ на события (перемещение указателя мыши, нажатие клавиш с клавиатуры и т.д.);
осуществлять проверку ввода данных в поля формы до отправки на сервер, как следствие снижение нагрузки на сервер;
извлекать данные о компьютере посетителя (посредством cookie - файлов);
определять тип пользовательского браузера и, соответственно, загружать веб – страницу, ориентированную на данный браузер;
изменять содержимое html-элементов, добавлять новые теги, изменять стили.
Существуют также и ряд ограничений:
нельзя закрыть окна и вкладки открытые без использования JavaScript;
нет защиты исходного кода страницы;
нельзя запретить копирование текста или изображений со страницы;
нельзя получить доступ к веб-страницам, расположенным на другом домене;
нет доступа к файлам, расположенным на компьютере пользователя (вообще нет доступа куда – либо за пределами веб - страницы).
Указанные ограничения сложно назвать недостатками, поскольку они являются следствием сознательного желания повысить защиту от вредоносного кода (веб – страница, закрывающая все окна операционной системы и самовольно прекращающая выполнение запущенных процессов, еще не самое страшное, что можно было бы придумать).
3.Связь с html – документом
Как и в случае с CSS, JavaScript – код может быть размещен как в рамке самой веб – страницы, так и за ее пределами, в качестве отдельного файла. Предпочтительнее с точки зрения Web 2.0, безусловно, является второй вариант. Для подключения JavaScript используется парный тег <script>.
Всего существует три способа подключения JavaScript:
Подключение в любом месте:
<html>
<body>
<script type="text/javascript">
for(var i=0; i<5; i++)
{
alert("Номер входа в цикл:"+i)
}
</script>
</body>
</html>
Когда браузер открывает HTML-страничку, он первым делом читает и выполняет то, что находится в теге <script> ;</script>, потом продолжает читать страницу дальше.
Атрибут type говорит о том, что это javascript. Вообще говоря, атрибут может отсутствовать - разницы нет, но с точки зрения стандарта его следует указать.
Вынос скриптов в заголовок
<html>
<head>
<script type="text/javascript">
function start_example()
{
for(var i=1; i<5; i++)
{
alert("Номер входа в цикл:"+i)
}
}
</script>
</head>
<body>
<input type="button" onclick="start_example()"
value="Запустить цикл"/>
</body>
</html>
В данном примере, код javascript, размещен внутри тега <head> </head>.
Внешние скрипты
Обычно javascript-код вообще не пишут в HTML, а подключают отдельный файл со скриптом:
<script type="text/javascript" src="/myscript.js"/>
При этом файл /myscript.js содержит javascript-код, который иначе мог бы находиться внутри тега <script>.
Для подключения более одного скрипта, используется несколько тегов::
<script type="text/javascript" src="/js/script1.js"/>
<script type="text/javascript" src="/js/script2.js"/>
...
При указании атрибута src содержимое тега игнорируется.
Одновременно подключить внешний файл и написать что-то внутри тега нельзя. Придется делать два разных тега <script>: первый с src, второй - с командами, которые будут выполнены после выполнения внешнего файла.