Мой первый JS

Вспомним, что мы узнали из предыдущих уроков

Мы знаем, что:

• HTML определяет структуру веб-страницы. Подобен каркасу дома.

• CSS отвечает за внешний вид и стиль элементов HTML. Подобен покраске стен и дизайну окон дома.

• JavaScript добавляет интерактивность и действия на веб-страницу. Подобен движухе в доме – открывающимся дверям, работающему лифту и т.д.

• JavaScript обслуживает HTML

Создадим файл index.html, чтобы увидеть как работает HTML

<input value="hello" />

Надо внимательно следить за правильностью написания названий тегов, иначе браузер не сможет их отобразить.

Tег script

Существуют разные типы HTML-тегов: не все они отвечают за разметку и внешний вид страницы. Например тег <input> - Браузер его рисует как поле ввода. А тег <script> браузер никак не отрисовывает, но выполняет команды, находящиеся внутри него.

Что такое JavaScript?

JavaScript - это код, набор команд, которые выполняются последовательно, строчка за строчкой.

command 1;
command 2;
command 3;
.........;
command n;

Браузер выполняет команды сверху вниз, по порядку, строчка за строчкой. Это и есть программа. Набор команд. В дальнейшем мы будем использовать слова-синонимы: программа равно алгоритм.

Что такое программа и алгоритм

Представим жизненный пример. Есть неуверенный парень, который приходит в «школу знакомств». Опытный тренер, условный мастер, даёт программу, то есть чёткий алгоритм действий, как знакомиться с девушками. У тренера задан фиксированный порядок.

<h1>Пикап</h1>
<ul>
  <li>Подстричься</li>
  <li>Приодеться</li>
  <li>Выучить пару шуток</li>
  <li>Подойти к девушке</li>
  <li>Сказать привет</li>
  <li>Рассказать пару шуток</li>
  <li>Взять номер телефона</li>
</ul>

Менять последовательность нельзя: сначала стрижка, затем одежда, потом выучить пару удачных шуток, после этого подойти к девушке, поздороваться и поговорить. Нельзя сначала приодеться, а потом подстричься, даже если кажется, что так тоже логично. Действуем строго пошагово: пока один шаг не выполнен, к следующему не переходим.

Теперь напишем программу на JavaScript. Чтобы написать программу, нужно формулировать команды. Команды должны быть понятны тому, кто их выполняет.

В жизни исполнитель — человек. Он должен понимать, что значит «подстричься», «приодеться», «выучить пару шуток» и уметь это сделать.

В программировании исполнитель — браузер. Он читает HTML-документ, понимает теги и по ним отображает страницу. Именно браузер отображает HTML и именно браузер будет выполнять команды внутри тега <script>. Поэтому программа должна состоять из таких команд, которые браузер умеет понимать и выполнять.

Команды могут повторяться — как шаги в реальной жизни. Тренер может сказать: «подстричься → приодеться → выучить пару шуток → снова выучить пару шуток». Повторение помогает закрепить результат. В коде это соответствует выполнению одной и той же команды несколько раз (цикл).

Первая команда на JavaScript

Мы изучим и запомним одну команду и будем выполнять ее много раз. Это команда window.alert. Это вызов метода alert у глобального объекта window в браузере:

Мы детально с вами изучим, что такое объекты, что такое методы и как они работают в следующих уроках.

<script>
  window.alert("Hello")
</script>

Синтаксис: window.alert("Сообщение")

• window – это объект, к которому обращается браузер (как к "окну").
• .alert() – это метод, который вызывается у объекта window для вывода сообщения.
• ("Сообщение") – это параметр, который передается в метод alert. Оно заключается в кавычки внутри скобок.

В конце каждой команды ставится точка с запятой (завершение команды).

<script>
  window.alert("number 1")
  window.alert("number 2")
  window.alert("number 3")
  window.alert("number 4")
  window.alert("number 5")
  window.alert("number 6")
  window.alert("number 7")
  window.alert("number 8")
  window.alert("number 9")
  window.alert("number 10")
</script>

❗Особенности выполнения window.alert(). Эта команда замораживает (ставит на паузу) выполнение программы до тех пор, пока пользователь не нажмет кнопку "ОК" в появившемся окне. Строчка 2 не выполняется, пока не выполнится строчка 1. Именно по этой причине мы не видим с вами сразу 10 окон.

Ошибки в коде

Чувствительность к регистру (Case Sensitivity)

• В JavaScript имена команд, функций и переменных чувствительны к регистру. Например, alert и Alert считаются разными идентификаторами.

• Это означает, что window.alert и window.Alert будут восприниматься как разные вещи. Если вы попытаетесь вызвать window.Alert, браузер выдаст ошибку, так как такого метода у объекта window не существует.

• Всегда используйте правильный регистр при написании команд и имен, чтобы избежать ошибок.

Отладка ошибок с помощью консоли разработчика

Если вы видите ошибку, но не понимаете, в чём дело, это может быть как общая ошибка, так и конкретная. Например, вы можете даже не заметить, что допустили ошибку в коде.

Чтобы разобраться, откройте инструменты разработчика (нажмите F12) и перейдите во вкладку «Консоль» (Console) — там будут указаны подробности ошибки.