Глава 6. Базовые понятия JS

Содержание

6.1. Основные понятия
6.1.1. Концепция
6.1.2. Сценарий
6.1.3. Результат работы сценария
6.1.4. Разбор сценария
6.1.5. Что такое JavaScript?
6.1.6. Как создать сценарий JavaScript
6.1.7. Редактирование JavaScript
6.1.8. Важен ли РеГиСтр символов для JavaScript?
6.1.9. Вернемся к разбору сценария
6.1.10. Задание
6.1.11. Возможное решение
6.2. Сообщения об ошибках
6.2.1. Концепция
6.2.2. Сообщение об ошибке
6.2.3. Исправление ошибок
6.2.4. Строка ошибки
6.2.5. Что дальше?
6.2.6. Множественные ошибки
6.2.7. Отсутствие определения
6.2.8. Задание
6.2.9. Возможное решение
6.3. Дата и время
6.3.1. Концепция
6.3.2. Сценарий
6.3.3. Результат работы сценария
6.3.4. Разбор сценария
6.3.5. Добавление пробелов
6.3.6. Создание длинной строки
6.3.7. Известная проблема
6.3.8. Задание
6.3.9. Возможное решение
6.4. Обработчики событий: onMouseOver
6.4.1. Концепция
6.4.2. Сценарий
6.4.3. Результат работы сценария
6.4.4. Разбор сценария
6.4.5. Другие свойства
6.4.6. Задание
6.4.7. Возможное решение
6.5. Еще несколько обработчиков событий
6.5.1. Концепция
6.5.2. Сценарии и результаты их работы
6.5.3. Задание
6.5.4. Возможное решение
6.6. Запросы пользователю и переменные
6.6.1. Концепция
6.6.2. Сценарий
6.6.3. Результат работы сценария
6.6.4. Разбор сценария
6.6.5. Задание
6.6.6. Разбор задания

В главе использованы материалы [BARNS].

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

6.1.1. Концепция

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

6.1.2. Сценарий

<SCRIPT LANGUAGE="javascript">

document.write

("<FONT COLOR='RED'>Это красный текст </FONT>")

</SCRIPT>

6.1.3. Результат работы сценария

Это красный текст

6.1.4. Разбор сценария

Так как это очень простой сценарий, то поговорим сначала о том, что такое JavaScript вообще.

6.1.5. Что такое JavaScript?

Во-первых, это не Java. Тут легко запутаться и решить, что Java и JavaScript — одно и то же. Это не так. Java — язык программирования, разработанный в компании Sun Microsystems. А JavaScript придумали в компании Netscape. Но это не единственное отличие.

Оба языка схожи в том, что представляют собой ООР (Object Orientated Programming, объектно-ориентированный язык программирования). Это значит, что с их помощью можно строить небольшие объекты, из которых потом складывается целое. Это станет понятнее по ходу дела. Главное отличие в том, что Java позволяет создавать совершенно самостоятельные события. "Java-applet" ("приложеньице" или просто апплет, называемый так, поскольку является небольшим приложением) может запускаться на Web-странице, нo на самом деле это полностью независимая самодостаточная программа, хотя и маленькая. К тому же, ее нельзя выполнить в виде текста. Для запуска ее необходимо "транслировать" в то, что называется "машинным языком".

Netscape как бы упростил Java до набора более простых команд. JavaScript не может существовать сам по себе, он должен выполняться внутри Web-страницы, а Web-страница должна просматриваться в браузере, который понимает язык JavaScript (скажем, Netscape Communicator или Internet Explorer).

6.1.6. Как создать сценарий JavaScript

Прежде всего надо помнить, что JavaScript — это не HTML! Часто задают вопрос, не является ли первый просто другой версией второго. Нет. Однако у JavaScript и HTML имеются очень похожие правила.

Во-первых, JavaScript располагается внутри документа HTML. Где именно, мы обсудим позже. JavaScript сохраняется в виде текста вместе с документом HTML.

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

Совсем другое дело JavaScript. У него четкая форма. И пренебрегать ею можно лишь изредка. Например, вторая строка сценария этого урока выглядит следующим образом.

document.write

("<FONT COLOR='RED'>Это красный текст</font>")

Она целиком находится на одной линии и должна сохранять свою форму. Предположим, вы скопировали ее в текстовый редактор с узкими страницами, и поля разорвали строку:

document.write

("<FONT COLOR='RED'>Это красный текст</font>

")

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

6.1.7. Редактирование JavaScript

Пишете вы сценарий или редактируете, не давайте полям страницы вставать у вас на пути. Всегда используйте для работы текстовой редактор без полей. Речь идет не просто о широкой странице. Имеется в виду ПОЛНОЕ ОТСУТСТВИЕ ПОЛЕЙ. У вас должна быть возможность написать строку длиной в несколько километров. Иначе не оберетесь проблем.

6.1.8. Важен ли РеГиСтр символов для JavaScript?

Да.

6.1.9. Вернемся к разбору сценария

Начнем с первой строки:

<SCRIPT LANGUAGE="JavaScript">

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

А как насчет части LANGUAGE (язык) ="JavaScript"? Разве это необходимо? Да. Есть еще и другие типы сценариев, например, VBS или LiveScript. Так что команда LANGUAGE не даст браузеру запутаться.

Так как у нас всего три строчки текста, то можно сразу заглянуть в конец. Код

</SCRIPT>

заканчивает любой сценарий JavaScript без исключений. Запомните это навсегда, потому что к этому вопросу мы больше возвращаться не будем. Начинаем со <SCRIPT LANGUAGE="javascript"> и заканчиваем </SCRIPT>. Двигаемся дальше...

Вот основная часть сценария:

document.write("<FONT COLOR='RED'>Это красный текст</FONT>")

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

Сценарий устроен следующим образом. С помощью DOCUMENT объявляется документ (документ HTML). Этот документ будет изменен — в нем что-то будет написано ( WRITE ). То, что будет написано, находится внутри скобок.

Настала очередь терминов. DOCUMENT представляет собой объект. Слово WRITE (писать), отделенное точкой, называется методом объекта. Таким образом, сценарий по сути говорит: "Возьмите объект (что-то, уже существующее) и что-то в нем запишите".

Обратите внимание, что текст внутри скобок находится в кавычках. В HTML эти кавычки не требуются. Здесь они необходимы. Никогда нельзя про них забывать.

Текст в кавычках представляет собой простой код HTML. Легко увидеть в нем команду <FONT>, которая делает текст красным. Обратите внимание, что RED находится в одинарных кавычках. Если использовать двойные, JavaScript решит, что это конец строки, и получится, что только часть текста будет записана в объект, а это уже ошибка.

Запомните: внутри двойных кавычек используются одинарные.

Получается, что JavaScript перекрасил текст в красный цвет? Нет, это сделал HTML. А JavaScript только записал код на страницу.

6.1.10. Задание

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

Это красный текст

Это синий текст

6.1.11. Возможное решение

... было создано следующим кодом:

<SCRIPT type="text/javascript">

 document.write

 ("<FONT COLOR='RED'>Это красный текст</FONT><BR>")

 document.write

 ("<FONT COLOR='BLUE'>Это синий текст</FONT>")

</SCRIPT>

Результат получен добавлением в сценарий второй строки document.write и изменением кода HTML внутри экземпляра (параметра) метода. Добавлена также команда <BR> в конце первого экземпляра метода, чтобы получить две строки.