Уроки JavaScript (Урок 1 - Введение в синтаксис) - Веб-дизайнеру - Каталог статей

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

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

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

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

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

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

Вот эта абракадабра между тэгами и есть скрипт.

Сам тэг <script> относится к языку HTML и у него могут быть следующие атрибуты:

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

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

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

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

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

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

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

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

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

Комментарии

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<html>
<head>
<title>Пример 1</title>
</head>
<body>
<script type="text/javascript">

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

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

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

Здесь мы объявляем переменную x, которая равна 5. Стоп! А знаете ли Вы, что такое переменная?

var — ключевое слово для объявления переменной (по-английски variable).
x — имя переменной.

(Кстати, насчёт регистра. Само название языка пишется большими J и S: JavaScript. Существует заблуждение, что именно так и надо писать это слово в тэгах HTML. Но HTML к регистру не чувствителен, поэтому там можно писать, как заблагорассудится. Я привык маленькими, как и мой любимый HomeSite, кто-то — большими.)

В этом скрипте переменной сразу при объявлении присваивается значение. Это не обязательно. Значение можно присвоить и позже. В конце строки стоит точка с запятой. Это в данном случае тоже не обязательно. Но в больших и сложных скриптах это иногда оказывается важным, поэтому я демонстрирую полную подробную запись. У Дунаева эта строка выглядит просто x = 5, явное объявление var здесь тоже не обязательно. Но всё-таки желательно.

В следующей строке, как Вы уже можете догадаться, объявлена переменная y. Ей присвоено значение относительно уже объявленной x, на 3 больше, чем x.

Этот метод выводит на экран окно диалога с сообщением, указанным в скобках. Это синтаксис всех методов javascript: имя метода и скобки с его содержимым.

Содержимое этого метода — значение переменной y и в окне диалога мы увидим восьмёрку. Поняли, почему?

Раз уж мы с Вами познакомились с методом alert(), то вот его простое и полезное применение: иногда какие-то страницы сайта ещё не сделаны, а ссылки уже приготовлены. Неприятно бывает попадать на «страницу 404». Не очень также приятно ждать, пока она загрузится, а потом узнать, что раздел в разработке. Я всегда затыкаю подобные ссылки следующим образом:

<a href="javascript: alert('Страница в разработке');">Пункт меню</a>

Кстати, вот вам ещё один способ внедрения кода JavaScript в код HTML. Здесь он вставляется в атрибут href тэга ссылки и вводится через ключевое слово «javascript: » (с двоеточием и последующим пробелом: всегда обращайте внимание на синтаксические мелочи). Обратите также внимание на традиционные двойные кавычки значения атрибута HTML и «вложенные» одиночные кавычки в тексте самого скрипта.

Очень скоро мы узнаем и о специальных «событийных» атрибутах тэгов HTML, например, onClick, которые специально предназначены для введения кода JavaScript и не требуют ключевого слова.