Web - кодинг: JavaScript:


Самоучитель по JavaScript
Урок 1. Введение



  Автор: и Эндри Грауни
  Перевод © Татьяна

красным цветом даны примечания переводчика
Концепция  Скрипт  Эффект  Разбор скрипта  Задание

Концепция

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

Скрипт

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

 

Эффект

.

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

Давайте сперва поговорим о том, что такое JavaScript вообще.

Что такое JavaScript?

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

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

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

Как писать на 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?

Да.

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

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

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

<SCRIPT LANGUAGE="JavaScript">

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

</SCRIPT>

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

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

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

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

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

Ваше задание

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

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

Вперед, на Урок 2

Авторы и Эндри Грауни.

©
Перевод © Татьяна.






При перепечатке любого материала с сайта, видимая ссылка на источник www.warayg.narod.ru и все имена, ссылки авторов обязательны.

© 2005