как вставить скрипт в документ HTML (общие сведения);
комментарии в javascript;
как объявлять переменные и давать им правильные имена;
разбор скрипта и синтаксис методов;
метод alert();
полезная мелочь: «заглушка» на временно не работающую ссылку

В создании web-страниц есть много разных тонкостей. Но есть и три кита. Это HTML, CSS и javascript.

Рекомендую организовать самообразование следующим образом: как только освоите синтаксис HTML и научитесь делать примитивные странички с текстом, картинками и таблицами, сразу подключайтесь к изучению CSS. Как только поймёте, как работать с CSS, начинайте осваивать javascript, параллельно пополняя «словарный запас» во всех трёх языках. Думаю, что через полгода сможете построить весьма красивый и функциональный сайт.

Долго я не знал, как подступиться к javascript. Попадались учебники либо слишком абстрактные — теория, теория, и непонятно, как приложить её к практике, либо, наоборот, слишком конкретные: вот тебе набор готовых рецептов, бери и пользуйся, а как это всё крутится — не твоего умишки дело.

Попался мне как-то учебник Вадима Дунаева. Многие, я знаю, ругают этот учебник. Кроме того, я скачл мерзко отсканированный PDF, где вместо "()" могло оказаться, например, "Q", а латинские буквы в кодах заменены (местами!) аналогичными русскими, из-за чего эти коды не работают. В общем, пришлось попыхтеть. И, честно скажу, если бы я до этого ничего не читал про javascript, то в этих ошибках бы не разобрался и присоединился бы к числу ругателей. Но я тогда сидел без работы, было время вникнуть, и учебник мне понравился. Но он очень подробный и рассчитан на людей, которые уже с программированием соприкасались.

Так вот, я хочу попробовать убить двух зайцев. Написать нечто понятное для любого чайника и в то же время конструктивно-познавательное. Чтобы этот чайник на основе моих советов мог написать пусть простой, но полностью оригинальный скрипт.

Итак:
Вставка в документ HTML

Вы наверняка видели в HTML-кодах такие тэги:

<!-- ТАБЛИЦЫ С КОДОМ-->

<script>
<!-- здесь какая-то непонятная абракадабра
-->
</script>

Вот эта абракадабра между тэгами и есть скрипт.
Сам тэг относится к языку HTML, и у него могут быть следующие атрибуты:

language
type
src

<script language="javascript">
<!-- код скрипта -->
</script>

Этот атрибут необязателен. Его стоит использовать либо для уточнения версии языка (javascript1.1, javascript1.2 и т.п.), либо если используешь другой язык (например, ). То есть вреда этот атрибут в любом случае не принесёт, но в стандартной ситуации он вроде как лишний.

<script type="text/javascript">
<!-- код скрипта -->
</script>

Атрибут type, который указывает на тип текста: text/javascript. Он появился в версии HTML 4.0. Его-то я и рекомендую использовать.

Прежде чем перейти к атрибуту src, выясним, в какие разделы кода HTML можно вставлять скрипты.

В любые. Но с умом.

Часто в скрипте указывается вывод конкретного текста, что называется, здесь и сейчас. Такой скрипт вставляется прямо в , «на место происшествия».

Бывают скрипты с объявлениями переменных, которые могут быть использованы в других скриптах на странице, с функциями, которые можно вызвать из любого места кода HTML. Такие скрипты разумнее всего помещать между тэгами.

Но можно сделать и так, чтобы использовать скрипт сразу на нескольких web-страницах. Для этого его код нужно записать в отдельный файл с расширением .js (например, myscript_1.js). Тэги и писать в нём уже не надо.

И вот тогда-то, для вызова скрипта с web-страницы, нам и понадобится атрибут src. Работает он так же, как и аналогичный атрибут тэга :

<script type="text/javascript"
src="scripts/myscript_1.js"></script>

Вот таким образом и помещается на разные страницы одна и та же шапка или меню, записанные в файле скрипта. Особенно это выручает на тех хостингах, где SSI не проходит.

Можно также вставлять маленькие скрипты в некоторые атрибуты тэгов HTML, но об этом — чуть позже.

Комментарии

Говорят, остались ещё такие браузеры, которые не понимают скриптов. Встречаются и маньяки-пользователи, которые настолько задвинуты на безопасности, что отключают скрипты. В этой ситуации скрипт выполняться не будет, но код его, та самая «абракадабра», просто вывалится на экран.

Так вот, чтобы не вываливалась, мы заключаем её в HTML-комментарии.

<script type="text/javascript">
<!--
    Код скрипта
// -->
</script>

Ммм... а что это за два слэша перед закрытием комментария?

Закрывающий комментарий находится уже в «теле» скрипта. А javascript не понимает этих корявых HTML'ских скобок, для него это инородное тело, генерирующее ошибку. Значит, нужно скрыть этот закрывающий тэг от скрипта, поместив его как комментарий javascript. У javascript комментарии выглядят несколько изящнее: //. После этого знака скрипт не видит закрывающую скобку HTML, а HTML благополучно скрывает текст скрипта, и на экране не видно никаких «левых» записей.

Раз уж мы коснулись комментариев, то надо сказать, что в javascript они имеют две формы — такие же, как в C и C++ (а кстати и в CSS тоже).

// Эта форма комментария
// действует только на одну строку,
// то есть на каждой новой строке
// нужно выставлять знак комментария.
А это уже код скрипта...

/* А эта форма комментария
действует на сколько угодно строк
до тех пор, пока не натолкнётся
на закрывающий значок,
зеркально отражающий начальный. */
А теперь опять код скрипта...

Не путайте комментарии HTML и комментарии javascript! Это разные языки, хотя и сосуществуют «в одном флаконе». Или, точнее, в одной банке. Как пауки...

Вернёмся к проблеме ветхих браузеров. Допустим, с помощью javascript Вы сделали из двух картинок что-то вроде анимированного баннера. Тогда Вы можете порадовать пользователей «убогих» браузеров (а Вы, я надеюсь, не полностью лишены альтруизма) лицезрением хотя бы одной из этих картинок с помощью тэга
<noscript />
:

<script type="text/javascript">
<!--
    Код Вашего баннера
// -->
</script>
<noscript>
<img src="одна_из_картинок.gif">
</noscript>

В каких редакторах писать скрипты

Возможно, существуют какие-то специальные редакторы для javascript. Я таких не встречал да и не слишком искал. Обычно скрипты пишут в тех же редакторах, какие используют для создания web-страниц. Я, например, люблю HomeSite. Написание скрипта в этих редакторах ничем не отличается от написания его в простом блокноте, кроме подсветки кода. А она иногда очень помогает. Скачал я однажды скрипт (у какого-то немца), а он не работает. Присмотрелся к коду и увидел, что ключевое слово switch почему-то не выделено. Гляжу — а там не switch, а switsch, Donner, Wetter! Убрал буковку — и поехало.

Кстати, во всех наших примерах код выглядит именно так, как в окне HomeSite.

С места в карьер

Следующий пример — плагиат у Дунаева. Но он настолько прост и глубок, что не могу удержаться. Я добавил сюда только некоторые детали оформления записи, чтобы объяснить заодно и их.

Сразу предупреждаю: практически этот пример абсолютно бесполезный. Но в нём сконцентрированы многие ключевые понятия языка javascript и его синтаксиса.

<html>
<head>
    <title>Пример 1</title>
</head>
<body>
<script type="text/javascript">
<!--
    var х = 5;
    var y = х + 3;
    alert(y);

</script>
</body>
</html>

Собственно скрипт

Если Вы скопируете этот код в чистую страницу Блокнота и сохраните её как файл.html, то при открытии файла увидите следующее:

Разберём, как это выходит.

var х = 5;

Здесь мы объявляем переменную x, которая равна 5.