Привет, мир!

В этой статье мы создадим простой скрипт и посмотрим, как он работает.

Тег SCRIPT

А побыстрее?

В том (и только в том!) случае, если читатель нетерпелив и уже разрабатывал на JavaScript или имеет достаточно опыта в другом языке программировании, он может не читать каждую статью этого раздела, а перепрыгнуть сразу к главе Всё вместе: особенности JavaScript. Там будет кратко самое основное.

Если же у вас есть достаточно времени и желание начать с азов, то читайте дальше :)

Программы на языке JavaScript можно вставить в любое место HTML при помощи тега SCRIPT. Например:

<!DOCTYPE HTML>
<html>

<head>
  <!-- Тег meta для указания кодировки -->
  <meta charset="utf-8">
</head>

<body>

  <p>Начало документа...</p>
  <script>
    alert( 'Привет, Мир!' );
  </script>

  <p>...Конец документа</p>

</body>

</html>

Этот пример использует следующие элементы:

<script> ... </script>

Тег script содержит исполняемый код. Предыдущие стандарты HTML требовали обязательного указания атрибута type, но сейчас он уже не нужен. Достаточно просто <script>.

Браузер, когда видит <script>:

  1. Начинает отображать страницу, показывает часть документа до script
  1. Встретив тег script, переключается в JavaScript-режим и не показывает, а исполняет его содержимое.

  2. Закончив выполнение, возвращается обратно в HTML-режим и только тогда отображает оставшуюся часть документа.

    Попробуйте этот пример в действии, и вы сами всё увидите.

alert(сообщение)
Отображает окно с сообщением и ждёт, пока посетитель не нажмёт «Ок».
Кодировка и тег META

При попытке сделать такой же файл у себя на диске и запустить, вы можете столкнуться с проблемой – выводятся «кракозяблы», «квадратики» и «вопросики» вместо русского текста.

Чтобы всё было хорошо, нужно:

  1. Убедиться, что в HEAD есть строка <meta charset="utf-8">. Если вы будете открывать файл с диска, то именно он укажет браузеру кодировку.
  2. Убедиться, что редактор сохранил файл именно в кодировке UTF-8, а не, скажем, в windows-1251.

Указание кодировки – часть обычного HTML, я упоминаю об этом «на всякий случай», чтобы не было сюрпризов при запуске примеров локально.

Современная разметка для SCRIPT

В старых скриптах оформление тега SCRIPT было немного сложнее. В устаревших руководствах можно встретить следующие элементы:

Атрибут <script type=…>
В отличие от HTML5, стандарт HTML 4 требовал обязательного указания этого атрибута. Выглядел он так: type="text/javascript". Если указать другое значение type, то скрипт выполнен не будет.

В современной разработке атрибут type не обязателен.

Атрибут <script language=…>

Этот атрибут предназначен для указания языка, на котором написан скрипт. По умолчанию, язык – JavaScript, так что и этот атрибут ставить не обязательно.

Комментарии до и после скриптов

В совсем старых руководствах и книгах иногда рекомендуют использовать HTML-комментарии внутри SCRIPT, чтобы спрятать Javascript от браузеров, которые не поддерживают его.

Выглядит это примерно так:

<script type="text/javascript"><!--
    ...
//--></script>

Браузер, для которого предназначались такие трюки, очень старый Netscape, давно умер. Поэтому в этих комментариях нет нужды.

Итак, для вставки скрипта мы просто пишем <script>, без дополнительных атрибутов и комментариев.

Задачи

важность: 5

Сделайте страницу, которая выводит «Я – JavaScript!».

Создайте её на диске, откройте в браузере, убедитесь, что всё работает.

Демо в новом окне

Код страницы:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>

  <script>
    alert( 'Я - JavaScript!' );
  </script>

</body>

</html>

Открыть решение в песочнице.

Карта учебника

Комментарии

перед тем как писать…
  • Приветствуются комментарии, содержащие дополнения и вопросы по статье, и ответы на них.
  • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.