Данная статья предназначена для читателей с начальным уровнем подготовки по языку JavaScript. В ней я разберу пример кода (программы) в деталях. Это будет первый и последний пример, в котором будет "разжевана" каждая строчка кода. Далее мы помчимся галопом по Европам. Более опытные читатели могут просто мельком взглянуть на эту заметку моего блога и сразу перейти к следующей.
Приготовления к написанию кода JavaScript
Для начала надо определиться, в чем мы будем писать свои примеры. Сценарии JavaScript можно писать в любом текстовом редакторе. Существуют текстовые редакторы от сторонних разработчиков с более продвинутыми функциями, например, подсветкой синтаксиса языка. Я же все свои примеры писал в программе Блокнот, входящем в состав любой Windows. Это самый простой путь, не требующий установки новых программ. Тем более, у вас не будет другого выбора, если у вас нет в данный момент подключения к Интернету или диска с нужными программами, а также прав администратора для установки сторонних программ.
Так как сценарии используются в основном в Web-страницах, то для начала надо эту самую Web-страницу создать. Алгоритм действий следующий. Открываем папку Мои документы в Проводнике и создаем новую папку — JavaScript в примерах. Далее, открываем созданную папку, щелкаем правой кнопкой мыши на свободном месте и выбираем последовательно пункты контекстного меню Создать
| Текстовый документ
. В результате наших манипуляций будет создан пустой файл под именем Текстовый документ .txt
. Так как Web-страницы имеют расширение htm
или html
, то щелкаем правой кнопкой мыши на созданном файле, выбираем команду Переименовать и присваиваем файлу новое имя, например, 1.htm. Windows спросит вас, действительно ли вы хотите присвоить файлу новое расширение. На данный вопрос следует ответить утвердительно. После этого еще раз щелкаем правой кнопкой мыши на измененном файле и выбираем уже команду Изменить. У вас запустится стандартный Блокнот (по умолчанию). Пока он пустой. Вы можете теперь вводить код, приведенный в листинге чуть ниже. Будьте внимательны, постарайтесь избежать ошибок.
Первый сценарий JavaScript
По устоявшейся традиции среди программистов первой программой при изучении любого языка программирования должно быть приложение, выводящее на экран сообщение "Здравствуй, мир!" (или "Hello, world!"). Не будем пренебрегать традициями и напишем наш первый сценарий в этом духе. В уже открытом Блокноте пишем следующее (листинг 1).
Листинг 1. Пишем первый сценарий
<html>
<head>
<title>Наш первый сценарий</title>
<script type="text/javascript">
alert("Здравствуй, мир!");
</script>
</head>
<body>
<h1>Первый пример</h1>
<p>Добро пожаловать на наш первый урок!</p>
<script language = "JavaScript">
<!--
document.write("Привет, мир!");
// -->
</script>
<p>
<input type="button" value="Поздороваться"
onClick="alert('Еще раз здравствуй')"></p>
</body>
</html>
Сохраните документ под именем helloworld.htm. Мы пока не будем смотреть написанный сценарий в действии, а получше изучим написанное.
Разбор полетов
Для того чтобы добавить сценарий JavaScript на Web-страничку, используется пара тегов <script> </script>. Данная пара дает указание браузеру рассматривать текст программы как сценарий. Исключение составляют только обработчики событий, где использование команды script не требуется. Здесь стоит немного задержаться. На сегодняшний день существует рекомендация использовать строчку
<script type = "text/javascript">
Совсем недавно более распространенным вариантом был код
<script language = "JavaScript">
Обратите внимание, что тег script содержит параметр JavaScript. Этот параметр определяет используемый язык сценария. Кроме того, в нем можно указать и номер версии языка.
Сейчас подобная конструкция считается устаревшей и разработчикам настоятельно рекомендовано отказываться от такого выражения. Существует вероятность, что новые версии браузеров будут более строго подходить к рекомендованным стандартам и не станут понимать устаревший синтаксис. В то же время очень старые версии браузеров не понимают нового формата. Поэтому некоторые программисты используют такую универсальную строчку:
<script type = "text/javascript" language = "JavaScript">
Существует еще один вариант для ленивых, которые не любят набирать лишние символы на клавиатуре:
<script> </script>
Так как по умолчанию считается, что в браузерах используется именно сценарий JavaScript, то этот код не вызовет ошибки. Но подобный способ вызывает дополнительную нагрузку на браузер, и от такой экономии следует всячески воздерживаться.
Как вы уже заметили, сценарии могут размещаться в различных частях документа. Всего способов их размещения четыре:
- сценарий находится между тегами
<head>
</head>
; - сценарий находится в теле программы после тега
<body>
; - сценарий находится в обработчиках событий. Данный способ позволяет выполнять сценарий JavaScript при наступлении нужного события;
- сценарий находится в отдельном файле. JavaScript позволяет создавать собственные файлы с расширением js. В этом случае на странице указывается местоположение такого файла. В нашем примере этот способ не использовался.
Таким образом, на одной странице могут располагаться сразу несколько сценариев. В какой последовательности браузер будет выполнять эти сценарии? Ничего сложного тут нет. Просто надо запомнить несколько правил. Сначала идет анализ сценария в заголовке документа HTML (между тегами <head>
</head>
). После идет выполнение сценариев, расположенных в теле документа (между тегами <body>
</body>
). А обработчики событий запускаются при выполнении соответствующих событий. Например, обработчик кнопки onCiick
выполняется после нажатия кнопки. Взглянем на пример еще раз. Первый сценарий находится в заголовке документа:
<script type = "text/javascript">
// выводим окно с сообщением
alert("Здравствуй, мир!");
</script>
Между тегами сценария находится единственная команда alert, которая выводит специальное окно с выбранным сообщением. Внешний вид данного окна может отличаться в разных браузерах. Следующий сценарий уже находится в теле документа после тега <body>
и тоже содержит единственную команду:
<script type = "text/javascript">
document.write("Привет, мир!");
</script>
Команда document.write
позволяет вводить новые строчки в документе. Текст "Привет, мир!" будет записан сразу после строчки "Добро пожаловать на наш первый урок!" И, наконец, третий сценарий находится в обработчике события onCiick
. Как вы уже догадались, данное событие наступает при нажатии кнопки. В этом сценарии используется уже знакомая нам команда alert
.
Скрытие сценария JavaScript
У первых браузеров, предназначенных для просмотра Web-страничек, не было возможности использования сценариев. Тег <script>
был добавлен в спецификацию HTML чуть позднее. Поэтому старые браузеры не выполняют сценарии JavaScript и просто выводят текст вашего сценария на странице. Внешний вид такой странички будет выглядеть не совсем так, как вы задумали.
Чтобы избежать подобных проблем, рекомендуется использовать скрытие сценария, для чего следует обрамлять код сценария тегами комментариев. Они дают указание старым браузерам игнорировать программу сценария. Комментарии в HTML начинаются с дескриптора <!--
и заканчиваются дескриптором -->
:
<script type="text/javascript">
<!--
document.write("Ваш браузер поддерживает JavaScript");
// -->
</ script >
Впрочем, браузерами без поддержки JavaScript на практике никто не пользуется, поэтому можете не обращать на эту рекомендацию особого внимания. Я больше не буду в дальнейших примерах использовать этот прием.
Комментарии в JavaScript
Как и во многих языках программирования, существует возможность создания комментариев и для JavaScript. Они не выводятся на экран пользователя, но позволяют включить в код сценария необходимую документацию. Если вы напишете очень сложный код, то по прошествии длительного времени можете просто забыть, что он делает. Кроме того, комментарии помогут другому разработчику разобраться в вашем сценарии (если вы в этом заинтересованы).
Чтобы включить комментарий в сценарий JavaScript, начните строку с двух символов косой черты (слэш):
// это комментарий
Также можно включить комментарий после строчки кода:
а = а + 1; // к переменной а прибавляем единицу
Если вам понадобится закомментировать сразу несколько строк, то оставлять в начале каждой строки две наклонные косые черты может оказаться утомительным занятием. В этом случае используют комментарии, начинающиеся с /*
и заканчивающиеся */
, что гораздо удобнее. Данный способ демонстрируется в приведенном ниже примере:
/* Этот сценарий содержит самые различные команды и операторы, а также комментарии */
Все, что находится между знаками комментариев, игнорируется браузером и не выполняется. Не забывайте, что комментарии JavaScript используются только в самом сценарии между тегами <script>
. Их нельзя вводить в программном коде HTML.
Проблемы
Итак, мы написали свой первый сценарий, изучили его содержимое. Теперь самое время увидеть написанный сценарий в действии. Найдите созданный файл helloworld.htm
в Проводнике и запустите его двойным щелчком мыши. У вас запустится Internet Explorer. Так как мы основную часть примеров будем тестировать на компьютерах с Windows 10, то нас поджидают некоторые трудности. Компания Microsoft в последнее время уделяет много внимания безопасности компьютера. Сценарии JavaScript, написанные нехорошими людьми, могут представлять потенциальную опасность для вашего компьютера. Поэтому по умолчанию при загрузке Web-странички с локального компьютера вы получите сначала несколько предупреждающих сообщений. Сначала вы увидите диалоговое окно Панель информации (рис. 1).
Рис. 1. Диалоговое окно Панель информации
Вам нужно нажать кнопку OK (если вы хотите, чтобы это окно у вас больше не появлялось, то установите соответствующий флажок). Но и это еще не все. Теперь вам придется щелкнуть по желтой полоске наверху страницы (но не на крестике в углу этой полоски!). Появится еще одно окно, где нужно выбрать первый пункт Разрешить заблокированное содержимое.... И наконец, в диалоговом окне Предупреждение системы безопасности нажать кнопку Да.
Не волнуйтесь, когда ваш документ будет выложен на сайт, данные предупреждения выводиться не будут, они появляются только при запуске сценариев на локальном компьютере. Впрочем, в следующих заметках моего блога, посвященной советам и хитростям JavaScript, я расскажу, как можно обойти эту чересчур назойливую процедуру. Если же вы будете запускать примеры через Mozilla Firefox, то подобных сообщений не увидите.
Сценарий JavaScript в действии
Наконец-то мы продрались через частокол предупреждений и можем увидеть написанный сценарий в действии. Сначала вы увидите окно с сообщением "Здравствуй, мир!" После нажатия кнопки OK откроется наша страница. Обратите внимание, что в третьей строчке выводится результат второго сценария. Осталось только нажать кнопку Поздороваться, чтобы запустить третий сценарий. На этом краткий курс по запуску сценариев JavaScript будем считать закрытым. В следующих моих блогах мы начнем изучать уже конкретные примеры.