http://webuchitel.ru/JavaScript/js_01.html
Динамические веб-страницы на основе 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
Добавьте второй сценарий к коду первого. Должны выполниться и первый и второй сценарии.
Сообщения об ошибках
Вы помните, что если браузер встречает ошибку HTML (например, непонятный ему тег), то он пытается отобразить код «как может». Но если браузер встретит ошибку в коде JavaScript, то весь сценарий не будет исполнен. Если код большой, то найти ошибку бывает сложно. В этом деле помогает сообщение об ошибке, которое может выдавать браузер. Но для этого нужно настроить браузер.
в Internet Explorer: Сервис > Дополнительно > Обзор > Показывать уведомление о каждой ошибке сценария;
в Opera: Инструменты > Настройки > Дополнительно > Содержимое > Настроить JavaScript > Открывать консоль при ошибке;
в Firefox: Инструменты > Консоль ошибок.
Для просмотра сообщения об ошибке удалим в первом примере закрывающую скобку: document.write("Эта страница написана на JavaScript!";
Проверьте реакцию браузера.
Двойной
щелчок на значке предупреждения
открывает
окно с описанием ошибки, показанное на
рис. 1.
|
Рис.1. Окно с описанием ошибки |
