Выполнение кода javascript

Последнее обновление: 08.08.2023

Когда браузер получает веб-страницу с кодом html и javascript, то он ее интерпретирует. Результат интерпретации в виде различных элементов - кнопок, полей ввода, текстовых блоков и т.д., мы видим перед собой в браузере. Интерпретация веб-страницы происходит последовательно сверху вниз.

Когда браузер встречает на веб-странице элемент <script> с кодом javascript, то вступает в действие встроенный интерпретатор javascript. И пока он не закончит свою работу, дальше интерпретация веб-страницы не идет.

Рассмотрим небольшой пример и для этого определим файл index.html со следующим кодом:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
    <script>
        document.write("Начальный текст");
    </script>
</head>
<body>
    <h2>Первый заголовок</h2>
    <script>
        document.write("Первый текст");
    </script>
    <h2>Второй заголовок</h2>
    <script>
        document.write("Второй текст");
    </script>
</body>
</html>

Здесь три вставки кода javascript - один в секции <head> и по одному после каждого заголовка.

Откроем веб-страницу в браузере и мы увидим, что браузер последовательно выполняет код веб-страницы:

Интерпретация кода JavaScript

Здесь мы видим, что вначале выполняется код javascript из секции head, который выводит на веб-страницу некоторый текст:

document.write("Начальный текст");

Далее выводится первый стандартный html-элемент <h2>:

<h2>Первый заголовок</h2>

После этого выполняется вторая вставка кода на javascript:

document.write("Первый текст");

Затем выводится второй html-элемент <h2>:

<h2>Второй заголовок</h2>

И в конце выполняется последняя вставка кода на javascript:

document.write("Второй текст");

После этого браузер закончит интерпретацию веб-страницы, и веб-страница окажется полностью загружена. Данный момент очень важен, поскольку может влиять на производительность. Поэтому нередко вставки кода javascript идут перед закрывающим тегом </body>, когда основная часть веб-страницы уже загружена в браузере.

Основы синтаксиса javascript

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

Код javascript состоит из инструкций. Каждая инструкция представляет некоторое действие. И для отделения инструкций друг от друга в javascript после инструкции ставится точка с запятой:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <script>
        document.write("2 + 5 =  "); const sum = 2 + 5; document.write(sum); 
    </script>
</body>
</html>

Здесь в коде javascript определены три инструкции:

  1. document.write("2 + 5 =  ")

    Выводит на страницу текст "2 + 5 = "

  2. const sum = 2 + 5;

    С помощью оператора const определяет константу sum - некоторое значение, которое не должно меняться (так как в данном случае мы присваиваем ему значение только один раз и больше не изменяем. И эта константа равна сумме 2 + 5

  3. document.write(sum);

    Выводит на страницу значение константы sum (то есть суму 2 + 5)

Инструкции в JavaScript

Однако современные браузеры вполне могут различать отдельные инструкции, если они просто располагаются на отдельных строках без точки запятой:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <script>
        document.write("2 + 5 =  ")
        const sum = 2 + 5
        document.write(sum)
    </script>
</body>
</html>

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

Блоки кода

Отдельные инструкции можно можно объединять в блоки кода, которые представляют некоторый код, заключенные между фигурными скобками { блок кода }. Например, определим следующую страницу:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <script>
        document.write("Привет! ");
		{
			document.write("Как дела? ");
			document.write("Че не отвечаешь, ты че спишь? ");
		}
        document.write("Ну пока...");
    </script>
</body>
</html>

Здесь программа на JavaScript состоит из 4-х инструкций. Причем две из инструкций помещены в блок кода:

{
	document.write("Как дела? ");
	document.write("Че не отвечаешь, ты че спишь? ");
}

Одна инструкция выполняется до блока кода, и еще одна - после блока кода.

Комментарии

В коде javascript могут использоваться комментарии. Комментарии не обрабатываются интерпретатором javascript и никак не учитываются в работе программы. Они предназначены для ориентации по коду, чтобы указать, что делает тот или иной код.

Комментарии могут быть однострочными, для которых используется двойной слеш:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <script>
        // выводим сообщение
        document.write("2 + 5 =  ")
        // объявляем константу и присваиваем ей сумму чисел 2 и 5
        const sum = 2 + 5
		// выводим значение константы sum
        document.write(sum)
    </script>
</body>
</html>

Кроме однострочных комментариев могут использоваться и многострочные. Такие комментарии заключаются между символами /*текст комментария*/. Например:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <script>
        /*  Пример арифметической операции
        и определения константы
        в коде JavaScript */
        document.write("2 + 5 =  ")
        const sum = 2 + 5
        document.write(sum)
    </script>
</body>
</html>

НазадСодержаниеВперед

Помощь сайту
Помощь сайту
Юмани:
410011174743222
Номер карты:
4048415020898850
Телеграмм