JavaScript. Общие сведения

Показывать лекцию целиком

Структурно веб – страницу можно представить как совокупность трех составляющих: содержания, внешнего представления и поведения.

Инструментарий для наполнения веб–страницы содержанием и управления его структурой разработчику предоставляет HTML. В общем и целом, при управлении внешним видом веб–страницы можно также использовать гипертекстовый язык разметки, однако, предпочтительнее пользоваться каскадными таблицами стилей.

Таким образом, инструментарий работы с представлением веб – документа нам предоставляет CSS.

Осталось пояснить вопрос с поведением веб–страницы. Прежде всего необходимо понять, что скрывается за термином "поведение".

Поведение веб страницы это то, как она будет реагировать на активность пользователя. Также можно сказать, что поведение веб–страницы – это ряд правил, по которым она взаимодействует с пользователем.

Если копнуть историю HTML, что нами было проделано в одной из первых лекций, то можно узнать, что этот язык создавался для упрощения взаимодействия групп ученых (запомните этот аргумент, если придется доказывать кому-либо ценность научного труда).

То есть никто изначально не закладывал в HTML поддержку интерактивного взаимодействия с пользователем. Попросту никто не мог и предположить, какое развитие получит глобальная паутина в дальнейшем.

При помощи HTML и CSS можно создавать прекрасно оформленные и грамотно структурированные, но не интерактивные сайты. Конечно, существует ряд сайтов, прекрасно обходящихся без какого – либо "сложного" взаимодействия с пользователем. Но следует помнить, что единственным неоспоримым на данный момент показателем успешности сайта является число его посетителей.

Поэтому хорошим тоном стало "обрастание" сайтов форумами, блогами, возможностями взаимодействия со сторонними сервисами и т.д. А в этом деле без интерактивности уже далеко не уйти.

Под интерактивностью, в данном контексте, авторы понимают более сложное поведение элементов веб–страницы в ответ на действия пользователя, чем простая возможность переходить по указанным ссылкам, потому как это является стандартной функцией HTML, заложенной в него с самого начала.

Веб – сценарии

Итак, стандартизованный HTML, несмотря на все его достоинства, сдерживает разработчика, стремящегося к добавлению сложных сценариев поведения в ответ на действия пользователя.

Конечно, разнообразные попытки расширить возможности HTML предпринимались, чуть ли не с самого начала его существования, об этом мы уже говорили во вступительной части к теме о каскадных таблицах стилей. Разработчики различных браузеров закладывали в них возможность работы с нестандартизованными тегами. Легко можно догадаться, что это вело к возникновению проблем совместимости, а разработчик, раннее существовавший в рамках HTML, становился также зависимым и от определенного браузера.

Выходом из ситуации стали веб – сценарии – программы написанные на "обычных" языках программирования и внедренные непосредственно в HTML – код страницы.

Вообще, фантазия веб - дизайнера, решившего создать интерактивную Web-страницу с использованием Web-сценариев, почти ничем не ограничена. (В настоящее время существуют даже Web-страницы, содержимое которых может изменяться самим пользователем прямо в окне Web-обозревателя. Также Web-сценарии часто используются для правильного размещения на странице свободно позиционируемых элементов. В частности, можно создать свободный элемент, который при любых изменениях размеров окна Web-обозревателя всегда будет находиться в его центре.

С помощью Web-сценариев можно создать принципиально новый интерфейс пользователя для своей страницы. На многих страницах применяется иерархический список, в котором перечислены все разделы и подразделы сайта. Такие страницы напоминают окно Проводника Windows. Часто с помощью свободно позиционируемых элементов и сложных Web-сценариев создают принципиально новые элементы управления для ввода данных.

Для поддержки языка сценариев используется так называемый интерпретатор (или виртуальная машина) языка. Web-обозреватель выделяет сценарии из HTML-кода страницы и передает его на выполнение интерпретатору. Последний анализирует код сценариев, расшифровывает их и выполняет, передавая результат выполнения обратно Web-обозревателю.

Языки, на которых написаны веб – сценарии являются интерпретируемыми, это означает, что программа расшифровывается при каждом ее выполнении. В этом основное отличие интерпретируемых языков программирования от компилируемых. В компилируемых языках программа расшифровывается однократно, после чего преобразуется в выполнямый машинный код.

Естественно, что программы, написанные на компилируемых языках выполняются быстрее, чем на интерпретируемых, однако, в силу специфики веба, для написания веб – сценариев подходят только интерпретируемые языки.

Существует еще один очень важный момент, который обязательно нужно понимать. Веб – сценарии выполняются на стороне клиента. Подобный подход имеет как ряд преимуществ, так и ряд недостатков, но об этом будет сказано позже.

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; метод — функция, ассоциированная с объектом через свойство.

JavaScript содержит несколько встроенных объектов, таких, как Global, Object, Error, Function, Array, String, Boolean, Number, Math, Date, RegExp. Кроме того, JavaScript содержит набор встроенных операций, которые, строго говоря, не обязательно являются функциями или методами, а также набор встроенных операторов, управляющих логикой выполнения программ. Синтаксис JavaScript в основном соответствует синтаксису языка Java, но упрощен в сравнении с ним, чтобы сделать язык сценариев легким для изучения. Подробнее синтаксис языка будет рассмотрен в последующих лекциях.

Отметим, что в рамках настоящего курса мы будем говорить о JavaScript исключительно в контексте применения языка в веб – сценариях. Соответственно, все возможности, ограничения и прочее указывается только с точки зрения работы с вебом.

Возможности и ограничения JavaScript

Подведем итог всему вышесказанному и сформулируем список основных возможностей JavaScript. JavaScript позволяет:

добавлять различные эффекты анимации элементам веб–страницы;

реализовывать поведение веб–страницы в ответ на события (перемещение указателя мыши, нажатие клавиш с клавиатуры и т.д.);

осуществлять проверку ввода данных в поля формы до отправки на сервер, как следствие снижение нагрузки на сервер;

извлекать данные о компьютере посетителя (посредством cookie - файлов);

определять тип пользовательского браузера и, соответственно, загружать веб – страницу, ориентированную на данный браузер;

изменять содержимое html-элементов, добавлять новые теги, изменять стили.

Существуют также и ряд ограничений:

нельзя закрыть окна и вкладки открытые без использования JavaScript;

нет защиты исходного кода страницы;

нельзя запретить копирование текста или изображений со страницы;

нельзя получить доступ к веб-страницам, расположенным на другом домене;

нет доступа к файлам, расположенным на компьютере пользователя (вообще нет доступа куда – либо за пределами веб - страницы).

Указанные ограничения сложно назвать недостатками, поскольку они являются следствием сознательного желания повысить защиту от вредоносного кода (веб – страница, закрывающая все окна операционной системы и самовольно прекращающая выполнение запущенных процессов, еще не самое страшное, что можно было бы придумать).

Связь с 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, второй - с командами, которые будут выполнены после выполнения внешнего файла.

Ключевые термины и определения

Веб – сценарии – программный код на интерпретируемом языке, внедренный в веб – страницу.

Cookie файлы - текстовые файлы, хранящие информацию, которую передает веб – сайт браузеру пользователя.

Интерпретируемый язык программирования - язык программирования, в котором исходный код программы не преобразовывается в машинный код для непосредственного выполнения центральным процессором (как в компилируемых языках), а исполняется с помощью специальной программы-интерпретатора.

Краткие итоги

Нами были рассмотрены основы использования веб – сценариев, их возможности и ограничения. Современная веб – разработка также не обходится без применения JavaScript, как и без CSS.

Тем не менее, использовать веб – сценарии следует аккуратно, нужно помнить, что они выполняются на стороне клиента, а значит, их корректное функционирование будет отчасти и зависеть от клиента. Более того есть программные способы ограничения активного содержимого веб – страниц, либо его блокировки.

Синтаксис языка JavaScript и базовые приемы работы с ним будут рассмотрены в следующих трех лекциях курса.