Основные понятия

Динамические веб-страницы на основе JavaScript

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

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

Брендан Айк

JavaScript произносится как “джаваскрипт”, или “яваскрипт”. JavaScript придумал Брендан Айк из Netscape (США). Не нужно путать языки програмирования JavaScript и Java. Главное отличие в том, что на Java создаётся полностью независимая программа, хоть и маленькая. Сценаний же JavaScript не может существовать сам по себе, он находится внутри веб-страницы, а веб-страница просматривается в браузере. Так как браузер является клиентом в клиент-серверной технологии, то JavaScript называют языком программирования на стороне клиента. Примером языка програмирования на стороне сервера является PHP.

Роль JavaScript заключается в расширении возможностей пользователя, облегчая для него получение и передачу информации. Вот несколько примеров:

создание визуальных эффектов, таких как анимация графических изображений, ненавязчиво помогающих пользователю ориентироваться при просмотре страницы passport.yandex.ru;
сортировка столбцов таблицы, упрощающая поиск нужной пользователю информации auction.nic.ru;
сокрытие части содержимого и раскрытие элементов с подробными сведениями по выбору пользователя free-lance.ru.

Простейшие примеры

Фрагменты кода, написанные на языке JavaScript, отделяются от остальной части HTML-документа тегами <script> и </script>:

<html>
<head>
<title>скрипт</title>
</head>
<body>
<script type="text/javascript">
document.write("Эти слова написаны на JavaScript!");
</script>
</body>
</html>

Как видите, текст на страницу выведен не HTML-тегом, а с помощью объекта document и метода write.

Задание 1

Создайте новую папку JavaScript и в ней подпапку images для будущих изображений. Создайте временную HTML-страницу Untitled-1.html.
Скопируйте код сценария (в тегах script) и вставьте его внутри body. Проверьте результат в браузере.
Переместите сценарий из body в head и убедитесь, что результат не изменился.

В настройках браузера может быть отключено выполнение сценария JavaScript-кода. Выполнение скриптов включается следующим образом:

в Internet Explorer: Сервис > Дополнительно > Разрешать запуск активного содержимого на моём компьютере;
в Opera: Инструменты > Настройки > Дополнительно > Содержимое > Включить JavaScript;
в Firefox: Инструменты > Настройки > Содержимое > Использовать JavaScript.

В следующем примере воспользуемся объектом window и его методом alert (предупреждение), которое выводит окно сообщения:
<script type="text/javascript">
window.alert('Привет!');
</script>

Задание 2

Добавьте второй сценарий к коду первого. Должны выполниться и первый и второй сценарии.