Роботландский Университет © А.А.Дуванов

ЗНАКОМСТВО С ЯЗЫКОМ

урок 1: первый скрипт

классический html болен статичностью

HTML-технология в отличие от полномасшабного компьютерного программирования имеет очень ограниченный инструментарий для визуального воздействия на пользователя и построения интерактивных сеансов работы.

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

Традиционная динамика в документе -- анимационный GIF. Но этой анимации далеко до настоящей мультипликации.

А ведь хочется? Правда, хочется! Хочется динамических меню, реакций на мышиные перемещения и щелчки. Хочется полноценного диалога на страницах документа, такого, как в "настоящих" компьютерных программах. Хочется придумать и "выпечь" в гипертексте динамическую игру или обучающую программу с яркими демонстрациями, зачетными классами и испытательными стендами. Хочется больше жизни!

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

Посмотрите примеры использования JavaScript и CSS (каскадные таблицы стилей) в HTML-файлах (документы нормально просматриваются только в Internet Explorer 4).

JavaScript?.. что это такое?

Это язык программирования, который понятен браузеру. Это означает, что браузер умеет выполнять (интерпретировать) команды этого языка.

Программу на JavaScript можно помещать внутрь HTML-кода или держать в отдельном файле. Этот файл браузер прочитает (по специальной команде-тегу LINK) во время интерпретации HTML-программы.

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

как скрипт монтируется в html

Скрипт размещается между двумя парными тегами <SCRIPT>...</SCRIPT>. Обычно запись скрипта выглядит так:

Начало скрипта
  Скрипт представлен как
  HTML-комментарий, чтобы
  не "смущать" браузеры,
  которые о скриптах  не
  знают.
Конец скрипта

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

пояснения

Код скрипта оформляют как HTML-комментарий. Браузеры, которые умеют работать со скриптами, об этом знают, а другие -- просто пропустят комментарии.
Закрывающий тег HTML-комментария предваряется двумя наклонными чертами "//" (комментарий языка JavaScript) опять же в целях безопасности. Некоторые браузеры сходят с ума, если не видят этих знаков. (Комментарием в JavaScript считается все, что располагается от символов "//" и до конца текущей строки).
Открывающий тег SCRIPT использует атрибут language для указания языка, на котором написан скрипт. Значением этого атрибута в нашем случае является ключевое слово JavaScript.
Команда <NOSCRIPT>...</NOSCRIPT> является не обязательной, но желательной. Внутри этой команды располагаются теги HTML.

пример

Увидеть этот документ можно здесь.

пояснения

Скрипт, расположенный в приведенном выше примере, содержит всего одну команду на языке JavaScript -- вызов функции alert.

Функция alert создает информационную панель с единственной кнопкой "Ok".

Пользователь читает сообщение, нажимает кнопку и панель убирается с экрана.

Теперь браузер приступает к интерпретации команд, расположенных вслед за скриптом в HTML-коде -- выводит в окошко текст:

Для возврата к основному тексту нажмите кнопку Назад на инструментальной панели браузера.

замечания

Если текст-параметр функции alert слишком длинный, его можно записывать в нескольких строчках используя знак "+" (операция соединения):

alert("Язык JavaScript был разработан фирмой Netscape"+
" (первое название \языка -- LiveScript)");

Операция соединения не означает разрыв строки на экране браузера. Для перевода строк используйте символы "\n":

alert("Первая строка.\nСтрока вторая.");

Браузеры Netscape третьих версий не любят, когда в текстовых константах JavaScript попадаются русские буквы "я" и "С". Лечится это записью перед этими буквами слэша (обратной косой черты):

alert("Перва\я строка.\n\Строка втора\я.");

Нажмите кнопку Сброс, затем приступайте к решению.

Отметьте верные высказывания:
JavaScript - это язык программирования
Программы на JavaScript выполняет Windows
Программы на JavaScript выполняет браузер
JavaScript позволяет создавать динамические гипертексты
Программа на JavaScript называется скриптом
Программа на JavaScript может располагаться в отдельном файле
Программа на JavaScript обязана располагаться в HTML-файле
Программа на JavaScript может работать без HTML
Символы "//" обозначают начало комментария в JavaScript
Символы "//" обозначают начало комментария в HTML
Напишите название тега HTML, который задает начало скрипта.
Напишите название функции JavaScript, которая создает всплывающую информационную панель.
Как вы думаете, этот зачетный класс построен
средствами классического HTML
с помощью JavaScript

Чтобы увидеть результат работы, нажмите кнопку Оценка.

Проведите серию опытов с функцией alert. Задайте вывод сообщения:

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

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