JavaScript с нуля - читать бесплатно онлайн полную версию книги автора Кирупа Чиннатамби (Глава 1. Hello, world!) #6

Глава 1. Hello, world!

Суть HTML в отображении, а CSS — в хорошей картинке. С помощью их обоих вы можете создать нечто прекрасное вроде примера с прогнозом погоды, доступного для просмотра здесь: http://bit.ly/kirupaWeather. На рис. 1.1 показано, как это выглядит.

Рис. 1.1. Приложение прогноза погоды — яркий пример дизайна страницы, выполненного с помощью CSS

Несмотря на то как изящно смотрятся сайты, выполненные с помощью CSS и HTML, они до боли статичны. Они не подстроятся и не среагируют на ваши действия. Эффект, созданный этой парочкой, напоминает непрерывный просмотр любимой серии «Друзей», что рано или поздно все равно навеет на вас скуку. Сайты, которые вы используете часто (вроде тех, что изображены на рис. 1.2), обладают некоторой степенью интерактивности и персонализации, что само по себе значительно выходит за пределы возможностей HTML и CSS.

Для оживления контента на вашем сайте вам пригодится сторонний помощник. Им вполне может стать JavaScript!

Рис. 1.2. Примеры сайтов, функциональность которых во многом полагается на JavaScript

Что такое JavaScript?

JavaScript — это современный язык программирования и партнер HTML и CSS. Если коротко, этот язык позволяет привнести в документ интерактивность. Вот краткий перечень возможностей, которые предоставляет JavaScript:

• Прослушивание событий, будь то клик мыши или выполнение команды.

• Изменение HTML- и CSS-страниц после их загрузки.

• Задание незаурядных траекторий перемещения объектов по экрану.

• Создание увлекательнейших браузерных игр вроде Cut the Rope.

• Обмен данными между сервером и браузером.

• Взаимодействие с веб-камерой, микрофоном и другими устройствами.

А также многое другое! Написание же JavaScript кода весьма несложно. Вы комбинируете слова, большинство из которых встречается в английском языке, отдавая таким образом браузеру команды. Следующий пример — некое сочетание классики JavaScript в новой доработке:

let defaultName = "JavaScript";

function sayHello(name) {

if (name == null) {

alert("Hello, " + defaultName +"!");

} else {

alert("Hello, " + name +"!");

}

Ничего страшного, если вам пока ничего не понятно. Просто обратите внимание на то, как этот код выглядит. Заметьте, что использовано много английских слов: function, if, else, alert, name. Помимо них есть еще странные символы и знаки из тех областей клавиатуры, куда взгляд обычно не падает. Но скоро, по мере того как их количество начнет расти на ваших глазах, вы постепенно разберетесь, за что отвечает каждый элемент приведенного кода.

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

Hello, world!

Возможно, сейчас вы ощутите недостаток навыков для написания кода. Тем более если вы не знакомы с программированием даже в общих чертах. Но уже скоро вы поймете, что JavaScript не такой бесячий и сложный, каким ему хочется казаться. Итак, приступим.

Важно знать основы веб-программирования

Чтобы начать писать на JavaScript, вам нужно знать основы создания веб-страниц, использования редактора кода и добавления HTML/CSS. Если вы не знакомы с этими вещами, призываю вас для начала прочесть статью «Создание вашей первой веб-страницы» (https://www.kirupa.com/html5/building_your_first_web_page.htm). Это поможет плавно настроиться на восприятие дальнейшей информации.

HTML-документ

Первое, что вам нужно, — это открыть HTML-документ. В этом документе вы будете записывать свой код на JavaScript. Затем запустите свой любимый редактор кода. Если у вас такового пока нет, рекомендую использовать Visual Studio Code. После запуска редактора перейдите к созданию нового файла. В Visual Studio Code вы увидите вкладку Untitled, как на рис. 1.3.

Рис. 1.3. Вкладка Untitled-1 в Visual Studio Code

Сохраните созданный файл через меню File | Save. Вам нужно указать его имя и рабочий стол. После сохранения добавьте в него следующий код HTML:

An Interesting Title Goes Here

После добавления этого HTML сохраните документ для подтверждения изменений. Теперь можно посмотреть, как будет выглядеть ваша страница в браузере.

Проследуйте на рабочий стол в проводнике или поисковике и двойным щелчком откройте файл hello_world.htm. Вы увидите, как появится ваш браузер по умолчанию, который отобразит имя этого файла. На рис. 1.4 показано примерно то, что вы увидите у себя на экране.

Если все сработало, как надо, вы увидите пустую страницу, и это вполне нормально. Несмотря на то что страница имеет содержимое, на ней ничего не отображается. Скоро мы это исправим. Для этого потребуется вернуться в редактор и обратиться к тегу

Тег script выступает в роли контейнера, в который вы можете помещать любой JavaScript-код для запуска. Мы же хотим отобразить слова hello, world! в диалоговом окне, появляющемся при загрузке HTML-страницы. Для этого внутрь сегмента script добавим следующую строку:

Сохраните файл HTML и запустите его в браузере. Обратите внимание на то, что увидите после загрузки страницы. Должно появиться диалоговое окно (рис. 1.5).

Если это была ваша первая попытка написания кода на JavaScript, примите мои поздравления! Теперь давайте разберем, как именно все это у вас получилось.

Рис. 1.4. Проименованная вкладка в Visual Studio Code

Рис. 1.5. Так должно выглядеть диалоговое окно hello, world

Обзор кода: инструкции и функции

Вы только что написали очень простую инструкцию JavaScript. Инструкция состоит из логического набора действий, которые должен выполнить браузер. В обычном приложении содержится великое множество инструкций. В нашем же случае есть только одна:

alert("hello, world!");

Понять, что перед вами инструкция, можно, обратив внимание на ее последний знак. Обычно это точка с запятой (;).

Внутри инструкции вы увидите всевозможный незатейливый жаргон на JavaScript. И наш код длиной в одну строку — не исключение. Мы также видим странный элемент alert, который задает отображение. Это пример привычного английского слова, имеющего схожее значение в мире языка JavaScript. Оно призвано привлечь ваше внимание путем отображения некоего текста.

Если быть более точным, слово alert — это то, что часто называют функцией. Вы будете использовать функции повсеместно. По своей сути они являются фрагментами переиспользуемого кода, который что-то делает. Это «что-то» может определяться вами, сторонней библиотекой или же самим фреймворком JavaScript. В нашем случае код, который дает функции alert магическую способность отображать диалоговое окно с переданным в нее сообщением, существует в глубинах браузера. Все, что вам на самом деле нужно знать, так это то, что для использования функции alert ее нужно просто вызвать и передать ей сообщение для отображения. Все остальное будет сделано за вас.

Вернемся к нашему примеру. Обратите внимание на то, как я определяю отображение текста hello, world!. Я заключаю эти слова в кавычки:

При работе с текстом (наиболее часто используемый термин — строка) он всегда заключается в одинарные или двойные кавычки. И как бы странно это ни прозвучало, но у каждого языка программирования свои особенности. И эта — одна из многих, с которыми вы столкнетесь при дальнейшем знакомстве с JavaScript. Очень скоро мы рассмотрим строки более подробно, а пока просто наслаждайтесь их видом.

Сделаем еще шаг. Вместо hello, world! укажите свои имя и фамилию. Вот пример кода, в котором использовано мое имя:

Запустите приложение, и тогда вы увидите свое имя в диалоговом окне (рис. 1.6).

Рис. 1.6. Теперь в диалоговом окне отображается ваше имя

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

КОРОТКО О ГЛАВНОМ

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

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

Если у вас есть какие-либо вопросы относительно этой главы, оставляйте свои сообщения на форуме https://forum.kirupa.com, где вам оперативно ответит кто-то из крутых разработчиков или я.