Несколько простых примеров составления сценариев на JavaScript
После прохождения «курса молодого бойца» по оформлению веб-страничек («К+П» N 4–11/2001) у многих читателей, вероятно, появилось желание сделать их более оригинальными. Например, запустить «бегущую строку», запрограммировать реакцию на определенные действия пользователя или просто автоматизировать обновление страницы, чтобы на ней всегда стояло сегодняшнее число или чтобы браузер сам определял дату последнего обновления. А может быть, пускай страница сама дает рекомендации, каким браузером ее лучше просматривать?..
Почему бы и нет? Для этого нужно воспользоваться специальным языком программирования, который будет понятен браузеру. Именно такие возможности и предоставляет «язык сценариев» JavaScript (не путать с Java! Несмотря на созвучие, это разные языки).
Разработчиком JavaScript считается компания Netscape. Сейчас доступно несколько версий этого языка. Обычно каждый новый релиз браузера поддерживает и более свежую версию JavaScript (табл. 1).
| JavaScript | Navigator |
| 1.0 | 2.0 |
| 1.1 | 3.0 |
| 1.2 | 4.0-4.05 |
| 1.3 | 4.06-4.7x |
| 1.4 | — |
| 1.5 | 6.0 Mozilla |
По имеющимся данным, оба последних релиза (5.x и 6.0) браузера Opera поддерживают JavaScript не выше версии 1.3. Аналогичная ситуация сложилась и с Internet Explorer 5.
Прежде всего, хотелось бы отметить, что некоторые функции, несмотря на одинаковые названия, работают в разных браузерах по-разному. Поэтому веб-странички, отлаженные, например, в Internet Explorer, в Navigator или Opera, могут выглядеть совсем не так, как того вы хотели, или вообще никак не выглядеть. Некоторые различия наблюдаются даже для разных релизов одного и того же браузера. Для упрощения поставленной задачи мы будем ориентироваться на два браузера: Internet Explorer 5 (стандартная «начинка» подавляющего большинства ПК под управлением Windows 98) и Opera 5 (которому я отдаю предпочтение ввиду скорости работы и суперкомпактности). Одним из преимуществ JavaScript является то, что код выполняется всегда - независимо от того, поддерживает браузер язык Java или нет. Поддержка JavaScript реализована во многих современных браузерах: Internet Explorer, Netscape Navigator, Opera…
К сожалению, JavaScript (как, впрочем, и Java) не лишен недостатков. Основных минусов, на мой взгляд, два.
Первый заключается в том, что эти «умные» программы способны выполнять на ПК пользователя разные действия. Так, случайно попав на сайт какого-нибудь недоброжелателя, можно лишиться паролей доступа к сети или номеров электронных кредиток. Конечно, можно отключить в браузере выполнение сценариев, но что за удовольствие путешествовать по «неживому» сайту?
Второй недостаток - невозможность защитить код веб-страницы. Любой желающий может просмотреть ее HTML-код (вместе с JavaScript), скопировать интересующие его фрагменты и использовать их в личных целях.
Как же работают странички с JavaScript? Структура веб-страницы с JavaScript практически не отличается от страницы без сценариев. Нужно только вставить в определенную область HTML-документа необходимый код. В общем случае структура HTML-страницы может иметь такой вид: <HTML> <HEAD> <TITLE> Заголовок </TITLE> <SCRIPT language="JavaScript"> function FFF1() { <!—тело функции 1 --> } <!-- ..... --> function FFFn() { <!-- тело функции n --> } </SCRIPT> </HEAD> <BODY> <!-- тело веб-страницы:--> <!--обращение к функциям FFF1(),...FFFn() --> </BODY> </HTML>
Рассмотрим простейший вариант. Браузер загружает страницу, которая выдает какое-нибудь сообщение (рис. 1). Для этого можно использовать следующий код: <HTML> <HEAD> <TITLE> Приветствие </TITLE> <BODY> <!-- Ваш комментарий... --> <SCRIPT language="JavaScript"> alert('С Днем рождения!') </SCRIPT> </HEAD> </BODY> </HTML>
В данном случае использована стандартная функция alert. В качестве аргумента ей передается строковая переменная, содержимое которой отображается в отдельном окне. Кстати, в данном случае кавычки в строке <SCRIPT language="JavaScript"> можно опустить и вообще сократить код до минимума, оставив лишь <SCRIPT>.
Строка <SCRIPT language="JavaScript"> выполняет несколько функций. Во-первых, она информирует браузер, что фрагмент кода написан на языке JavaScript, а не на VBScript. Последний поддерживается далеко не всеми браузерами (за все время серфинга я встречал его только на сайте MP3.com).
Во-вторых, браузеру сообщается, что здесь расположен фрагмент встроенного сценария на JavaScript, который нужно выполнить. «Сообразительные» браузеры последних версий различают и версию языка. О том, как это сделать, мы поговорим позже.
Комментарии внутри скриптов не отличаются от обычного HTML. Началом служит комбинация символов <!--, концом — -->. Однако можно использовать и стиль комментариев, принятый в C++, две косые (//).
Особо хотелось бы отметить следующее. Первое и, пожалуй, самое главное - не злоупотребляйте комментариями. Это увеличивает размер веб-страничек, что не всегда нравится пользователям. Поэтому известный принцип великого марксиста «лучше меньше, да лучше» здесь как нельзя кстати. Во-вторых, комментарии помогают... скрывать сценарии от браузеров, которые их не поддерживают. Обычно в таком случае речь идет об устаревших версиях или нестандартном софте. Для этого в первой строке сценария ставится «начало» комментария, а в конце - его окончание.
В нашем примере фрагмент функции можно было бы записать так: <SCRIPT language="JavaScript"> <!-- alert('С Днем рождения!') //--> </SCRIPT>
