Урок 1

Введение

Первый скрипт.

Концепция

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

Скрипт

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

Эффект

Разбор скрипта

Давайте сперва поговорим о том, как писать на JavaScript.

Для начала запомните, что JavaScript — это не HTML. Однако у JavaScript и HTML очень похожие правила.
Во-первых, JavaScript располагается внутри документа HTML. Где именно, мы обсудим позже. JavaScript сохраняется в виде текста вместе с документом HTML. Главная же разница в том, что в HTML имеет довольно расплывчатые правила. Не имеет значения, сколько пробелов вы оставляете между словами или абзацами. По правде говоря, HTML можно было бы писать одной сплошной строкой.
Совсем другое дело JavaScript. У него четкая форма. И пренебрегать ею можно лишь изредка. Например, вторая строка нашего скрипта выглядит следующим образом:

document.write("<font color='red'>Красный текст</font>")

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

document.write("<font color='red'
>Красный текст</font>")

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

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

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

Важен ли РеГиСтр для JavaScript?

Да.

Некоторые скрипты по-разному действуют в Нетскейпе и Експлорере.

Вернемся к разбору скрипта

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

Это код HTML, который дает браузеру понять, что с этого места начинается JavaScript. Кажется, это несложно. Все скрипты начинаются с такой команды. А как насчет части LANGUAGE(язык)JavaScript? Разве это необходимо? Да. Есть еще и другие типы скриптов, например, VBS или LiveScript. Так что ваша команда LANGUAGE не даст браузеру запутаться.
Раз уж у нас всего три строчки текста, позвольте сразу же перейти к концу.
Так</SCRIPT> ...заканчивается любой JavaScript без исключений. Зарубите себе на носу, потому что к этому вопросу мы больше возвращаться не будем. Помните, начинаем с <SCRIPT LANGUAGE="javascript"> и заканчиваем </SCRIPT>.
Идем дальше...

Вот основная часть скрипта:

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

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

DOCUMENT представляет собой object
(WRITE) изменения, которые в нем произойдут.
Какие изменения,будет указано в скобках.

Телерь разберём некоторые термены применяемые в JavaScript

Специально для работы с документами HTML в языке JavaScript имеется отдельный объект с названием document. Пользуясь его свойствами и методами, сценарий JavaScript может получить информацию о текущем документе, загруженном в окно браузера, а также управлять отображением содержимого этого документа. В первой главе нашей книги мы уже применяли один из методов объекта document с именем write для записи строки в тело документа HTML. Заголовок документа определяется при помощи оператора языка HTML <HEAD>, а тело документа - при помощи оператора <BODY>. Прежде чем мы перейдем к описанию свойств и методов объекта document, рассмотрим назначение отдельных параметров оператора <BODY>.

В общем виде этот оператор выглядит следующим образом:
<BODY
BACKGROUND="Фоновое_изображение"
BGCOLOR="Цвет_фона"
TEXT="Цвет_текста"
LINK="Цвет_непосещенных_ссылок"
ALINK="Цвет_активизированных_ссылок"
VLINK=" Цвет_посещенных_ссылок "
onLoad="Обработчик_события_при_загрузке_документа"
onUnload="Обработчик_события_при_выгрузке_документа"
</BODY>

Описание параметров оператора приведено ниже:

BACKGROUND- С помощью этого параметра можно указать адрес (URL) изображения, заполняющего фон тела документа

BGCOLOR - этот параметр применяется в тех случаях, когда фон документа необходимо раскрасить в какой-либо цвет. Цвет задается в виде "#rrggbb", где константы rr, gg и bb - соответственно, красная, зеленая и голубая компоненты цвета. Значение констант может находиться в диапазоне от 0 до FF (в шестнадцатеричном виде). Цвет может также задаваться символическими константами, такими как red или white

TEXT - Цвет текста задается таким же образом, что и цвет фона BGCOLOR

LINK- этот параметр определяет цвет ссылок, размещенных в документе HTML, и еще не посещенных пользователем

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

VLINK- зтот параметр определяет цвет ссылок, размещенных в документе HTML, которые уже посещались пользователем ранее

onLoad- С помощью зтого параметра можно определить обработчик события, который получит управление при загрузке документа в окно браузера

onUnload- Аналогично предыдущему, однако обработчик события получит управление при удалении документа из окна браузера

Анализируя свойства объекта document, сценарий JavaScript может определить значения перечисленных выше параметров.
Кроме того, сценарию доступны локальные метки, формы и связи документа как элементы соответствующих массивов, а также информация из заголовка документа.

Свойства объекта document, доступные сценарию JavaScript:

alinkColor- Содержимое параметра ALINK

anchors- Массив локальных меток, размещенных в документе. Эти метки применяются для организации ссылок внутри документа

applets- Массив объектов, соответствующих аплетам Java, расположенным в документе HTML

bgColor - Содержимое параметра BGCOLOR

cookie - Значение cookie для текущего документа. О том, что это такое, мы расскажем в последней главе нашей книги

embeds - Массив объектов plug-in, содержащихся в документе HTML

fgColor - Содержимое параметра TEXT

forms- Массив, содержащий в виде объектов все формы, расположенные в документе HTML

images - Массив растровых изображений, включенных в документ

lastModified - Дата последнего изменения документа HTML

linkColor - Содержимое параметра LINK

links - Массив, содержащий все ссылки в документе HTML

location - Полный адрес URL документа HTML

referrer - Адрес URL вызывающего документа HTML

title - Заголовок документа, заданный с помощью оператора <TITLE>

URL - Полный адрес URL документа HTML

vlinkColor- Содержимое параметра VLINK

Объект document может содержать в себе другие объекты, доступные как свойства:

anchor - Локальная метка, определенная в документе HTML с помощью оператора <A>

form- Форма, определяемая в документе HTML с помощью оператора <FORM>

history - Список адресов URL, посещенных пользователем

link- Текст или изображение, играющее роль гипертекстовой ссылки. Создается с помощью оператора языка HTML <A>, в котором дополнительно задаются обработчики событий onClick и onMouseOver

Методы объекта document

Сценарии JavaScript могут вызывать следующие пять методов, определенных в объекте document:

clear - Удаление содержимого документа из окна просмотра

close- Закрытие потока данных, открытого для документа методом open. В окне будут отображены все изменения содержимого документа, сделанные сценарием после открытия потока

open- Открытие выходного потока для записи в документ HTML данных типа MIME при помощи методов
write и writeln

write- Запись в документ произвольной конструкции языка HTML

writeln - Аналогично предыдущему, но в конце строки добавляется символ новой строки

Слово WRITE(писать) , отделенное точкой, называется method(методом объекта).
Таким образом, скрипт попросту говорит:
«Возьмите объект (что-то, уже существующее) и припишите что-то к нему».
Текст в скобках называется instance(примером метода), он передает то, что происходит, когда метод воздействует на объект.
Следите за ходом мысли и имейте в виду, что текст внутри скобок находится в кавычках. Никогда нельзя про них забывать.
Текст в кавычках представляет собой простой HTML. Думаю, вы узнаете в нем команду <FONT>, которая делает текст красным. Обратите внимание, что дальше идут одинарные кавычки. Если поставить двойные, JavaScript решит, что это конец строки, и получится, что только часть вашего текста будет применена к объекту, а это уже ошибка.
Запомните: внутри двойных кавычек ставятся одинарные.

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

Ваше задание

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

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

<SCRIPT LANGUAGE="javascript">
document.write("<FONT COLOR='blue'>Это красный текст</FONT>")
</SCRIPT> Эффект: