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

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

i | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ?

введение | зачет | задания | дополнения | урок 2

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

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

“Чистый” HTML имеет весьма ограниченные возможности для программирования интерфейса приложений и построения интерактивных сеансов работы пользователей.

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

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

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

Хочется придумать и “выпечь” в гипертексте динамическую игру или обучающую программу с “живыми” демонстрациями, зачетными классами и испытательными стендами. Хочется больше жизни!

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

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

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

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

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

Коды JavaScript дополняют коды HTML и “живут” вместе с ними. Даже если они расположены в отдельном файле.

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

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

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

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

пояснения

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

пример

Посмотрите на этот документ.

пояснения

Скрипт в приведенном выше примере, содержит всего одну команду на языке JavaScript — вызов функции alert. Функция alert создает информационное окно с единственной кнопкой “Ok” внутри:

окно alert

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

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

Если браузер не поддерживает JavaScript или эта поддержка отключена в настройках, в окно документа выводится сообщение:

замечания

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

alert("Язык JavaScript был разработан в 1995 году фирмой"+
      " Netscape для второй версии своего браузера");

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

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

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

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

Дополнительный материал

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

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

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

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

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

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