JavaScript для начинающих | Ваш первый скрипт

JavaScript для начинающихЭто вводный курс по JavaScript для начинающих. Сегодня мы напишем нашу первую программу на JavaScript. Напомню, что программы на JavaScript называются сценариями или просто скриптами. Поехали!

Вы, наверное, сразу подумали про «Hello World!»? Нет! Это оставим для чайников. Напишем что-то более интересное. Но прежде давайте разберемся, в чем писать наш скрипт. На первых порах вам понадобится какой-нибудь простенький редактор кода. Я пользуюсь PSPad и всем его рекомендую. Это бесплатный текстовый редактор для программистов. Все!

Запускаете редактор, нажимаете Ctrl+N и выбираете, какой файл хотите создать. В длинном списке вы найдете и JavaScript, но он вам пока не нужен. Понадобится он лишь когда вы будете писать отдельные скрипты, вынесенные в отдельные файлы. Нам же сейчас нужна простая HTML страничка, куда мы сможем внедрить наш скрипт.

Поэтому переходим на вкладку Из шаблона, далее HTML и в выпадающем списке выбираем HTML5. Мы же за современную веб-разработку, верно?

JavaScript для начинающих | Ваш первый скрипт

Шаблон лучше сразу подправить и сохранить на будущее. Сейчас он выглядит так:

JavaScript для начинающих | Ваш первый скрипт

Внесем несколько исправлений и уберем все лишнее. В частности, исправим язык, уберем лишние кавычки и лишние строки, но добавим одну полезную строку, которая пригодится еще в будущем (viewport). Получим вот такую красотень:

JavaScript для начинающих | Ваш первый скрипт

Отлично! Предварительная подготовка закончена. Теперь напишем непосредственно сам скрипт. Между тегами <body></body> добавим вот такой кусок кода:

<script>
alert( 'Что смотришь? Нажми скорее кнопку!' );
</script>

А теперь сохраним этот файл под именем test с расширением .html и откроем его в браузере. Вуаля!

JavaScript для начинающих | Ваш первый скрипт

Браузер сразу покажет всплывающее окошко, так называемый алерт (alert — предупреждение). Обратите внимание на поведение браузера: он будет оставаться в процессе загрузки страницы до тех пор, пока вы не нажмете на кнопку ОК. Это не ошибка. Браузер именно ожидает от нас, что мы будем делать дальше.

Если мы проигнорируем предупреждение, то загрузка страницы так и застрянет на этом месте, а если нажмем на кнопку ОК, то программа будет завершена, и страница загрузится до конца.

Бывает такое, что некоторые скрипты работают криво, или у пользователя специально отключена в браузере работа JavaScript. Тогда страница может застрять на этом месте конкретно. Об этом мы уже говорили во введении. Как обойти эти траблы мы поговорим позднее. Замечу только, что не всегда помогает вынос скриптов в самый конец страницы, а иногда это даже вредно.

Ну, а пока самое время таки нажать на кнопку ОК.

Так нажмите же на нее, наконец!

JavaScript для начинающих | Ваш первый скрипт

Как вы, наверное, уже догадались, текст с поздравлением загрузился сразу после нажатия на кнопку. Просто мы в коде страницы после скрипта добавили этот текст с заголовком. Вот как это выглядит в коде:

JavaScript для начинающих | Ваш первый скрипт

Правда, ведь, ничего сложного? Подобные всплывающие окошки с предупреждением вы видели уже не раз и не два. Теперь вы знаете, откуда они берутся, и почему страницы не грузятся дальше, пока вы не нажмете на кнопку в окне предупреждения.

В следующий раз мы применим alert для проверки правильности заполнения полей формы обратной связи и познакомимся с понятием функции в JavaScript. Оставайтесь на связи!

20.01.2017

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (8 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

Оставить комментарий: