JavaScript для начинающих: основные моменты и примеры

Возможности JavaScript

JavaScript выполняет пользовательские функции на стороне клиента (в браузере) без перезагрузки страницы. Рассмотрим примеры.

Сайт Google использует HTML и CSS для структуры и стилей. Обработка поискового запроса происходит на сервере (например, на Python), что вызывает перезагрузку страницы. Однако, многие элементы интерфейса Google, такие как выпадающие меню, работают без перезагрузки благодаря JavaScript. Этот функционал, взаимодействующий с пользователем без перезагрузки, создаётся с помощью JavaScript и его библиотек. Библиотеки упрощают разработку, но не обязательны – всё можно написать на чистом JavaScript. Изучив JavaScript, вы сможете создавать интерактивные элементы веб-сайтов, например, кнопки и меню, без перезагрузки страницы.

Пример кода (без подробного разбора): фрагмент кода меняет текст абзаца при нажатии кнопки, демонстрируя управление HTML-структурой с помощью JavaScript.

Работа с HTML-тегами

Для работы с JavaScript в веб-разработке полезно знать несколько HTML-тегов.

<noscript>

Этот тег выводит информацию только при отключенном JavaScript. Внутри <noscript> обычно размещается сообщение с просьбой включить JavaScript для корректной работы сайта. Пример: Включите JavaScript!!!. Если вы видите этот текст, JavaScript отключен в вашем браузере. Инструкции по включению можно найти в Google.

<script>

Этот тег используется для подключения внешних JavaScript-файлов или встраивания JavaScript-кода в HTML-страницу. Подробно рассмотрим его в следующем уроке.

Рекомендуется размещать тег <script> перед закрывающим тегом </body>. Это связано с тем, что JavaScript загружается дольше, чем HTML и CSS. Размещение в конце гарантирует отображение страницы пользователю до загрузки скриптов, улучшая восприятие. Хотя размещение в других местах не вызовет ошибок, это считается хорошим тоном. Можно использовать несколько тегов <script> на странице.

Комментарии в JavaScript

Комментарии создаются с помощью двух слешей (//) для однострочных комментариев или /* */ для многострочных.

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

Что будем искать? Например,программа