JavaScript для начинающих | Ваш первый скрипт
Это вводный курс по JavaScript для начинающих. Сегодня мы напишем нашу первую программу на JavaScript. Напомню, что программы на JavaScript называются сценариями или просто скриптами. Поехали!
Вы, наверное, сразу подумали про «Hello World!»? Нет! Это оставим для чайников. Напишем что-то более интересное. Но прежде давайте разберемся, в чем писать наш скрипт. На первых порах вам понадобится какой-нибудь простенький редактор кода. Я пользуюсь PSPad и всем его рекомендую. Это бесплатный текстовый редактор для программистов. Все!
Запускаете редактор, нажимаете Ctrl+N и выбираете, какой файл хотите создать. В длинном списке вы найдете и JavaScript, но он вам пока не нужен. Понадобится он лишь когда вы будете писать отдельные скрипты, вынесенные в отдельные файлы. Нам же сейчас нужна простая HTML страничка, куда мы сможем внедрить наш скрипт.
Поэтому переходим на вкладку Из шаблона, далее HTML и в выпадающем списке выбираем HTML5. Мы же за современную веб-разработку, верно?
Шаблон лучше сразу подправить и сохранить на будущее. Сейчас он выглядит так:
<!DOCTYPE html>
<html lang='cs'>
<head>
<title></title>
<meta charset='utf-8'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='author' content=''>
<meta name='robots' content='all'>
<!-- -->
<link href='/favicon.png' rel='shortcut icon' type='image/png'>
</head>
<body>
</body>
</html>
Внесем несколько исправлений и уберем все лишнее. В частности, исправим язык, уберем лишние кавычки и лишние строки, но добавим одну полезную строку, которая пригодится еще в будущем (viewport). Получим вот такую красотень:
<!DOCTYPE html>
<html lang=ru>
<head>
<title></title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1>
</head>
<body>
</body>
</html>
Отлично! Предварительная подготовка закончена. Теперь напишем непосредственно сам скрипт. Между тегами <body></body> добавим вот такой кусок кода:
<script>
alert( 'Что смотришь? Нажми скорее кнопку!' );
</script>
А теперь сохраним этот файл под именем test с расширением .html и откроем его в браузере. Вуаля!
Браузер сразу покажет всплывающее окошко, так называемый алерт (alert — предупреждение). Обратите внимание на поведение браузера: он будет оставаться в процессе загрузки страницы до тех пор, пока вы не нажмете на кнопку ОК. Это не ошибка. Браузер именно ожидает от нас, что мы будем делать дальше.
Если мы проигнорируем предупреждение, то загрузка страницы так и застрянет на этом месте, а если нажмем на кнопку ОК, то программа будет завершена, и страница загрузится до конца.
Бывает такое, что некоторые скрипты работают криво, или у пользователя специально отключена в браузере работа JavaScript. Тогда страница может застрять на этом месте конкретно. Об этом мы уже говорили во введении. Как обойти эти траблы мы поговорим позднее. Замечу только, что не всегда помогает вынос скриптов в самый конец страницы, а иногда это даже вредно.
Ну, а пока самое время таки нажать на кнопку ОК.
Так нажмите же на нее, наконец!
Как вы, наверное, уже догадались, текст с поздравлением загрузился сразу после нажатия на кнопку. Просто мы в коде страницы после скрипта добавили этот текст с заголовком. Вот как это выглядит в коде:
<!DOCTYPE html>
<html lang=ru>
<head>
<title></title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1>
</head>
<body>
<script>
alert( 'Что смотришь? Нажми скорее кнопку!' );
<h1>Поздравляю!</h1>
<p>Ну, красава! Ты справился. Возьми с полки пирожок. Ты уже шаришь в JavaScript!</p>
</script>
</body>
</html>
Правда, ведь, ничего сложного? Подобные всплывающие окошки с предупреждением вы видели уже не раз и не два. Теперь вы знаете, откуда они берутся, и почему страницы не грузятся дальше, пока вы не нажмете на кнопку в окне предупреждения.
В следующий раз мы применим alert для проверки правильности заполнения полей формы обратной связи и познакомимся с понятием функции в JavaScript. Оставайтесь на связи!
