Javascript урок 1. Внедрение сценариев в HTML

Javascript урок 1. Внедрение сценариев в HTML

Скрипты используются в html-страницах для увеличения функциональности и возможностей взаимодействия с посетителями сайта.

Для добавления сценария на страницу HTML используется дескриптор:

Или сегодня можно использовать упрощенный вариант:

Атрибуты дескриптора:

  • type — атрибут, пришедший на замену language ; он сообщает браузеру, какой язык используется внутри дескрипторов;
  • src — атрибут определяет URL внешнего исходного JavaScript-файла, сценарий которого прикрепляется к html-странице.
  1. Устаревший вариант:
  • тег script обычно помещается в html-страницу в область head или body ;
  • этот тег указывает на то, что внутри находится сценарий — исполняемый код, в нашем случае скрипт на языке javascript;
  • когда html-парсер браузера, отображая последовательно структуру html, доходит до тега script , то он передает инициативу интерпретатору javascript ;
  • интерпретатор, в свою очередь, исполняет содержимое кода до закрывающего тега script , а затем опять передает управление html-парсеру.
Добавление javascript в html

Встраивание javascript в html происходит двумя основными способами, которые рассмотрим на примере:

  • Создайте html-страницу со следующим кодом:

<script> document.write("Это JavaScript!"); </script>

<!-- Конец сценария --> <hr> Это обычный HTML документ. </body></html>

  • Создайте две страницы: lab1.html и myscript.js. Расположите обе страницы в одном каталоге.
  • В html-документе разместите код:

<html> <head> <!-- Прикрепление файла с кодом сценария -->

Выполните следующий пример, чтобы увидеть особенности работы метода alert() :

Обратите внимание, как работает javascript, помещенный в теги оформления шрифта:

  • Что такое сценарий (скрипт)?
  • Сформулируйте основные задачи, решаемые с помощью скриптов javaScript.
  • Опишите основные правила подключения сценариев к странице html.
  • Какой метод javaScript используется для вывода текста (html-кода) на страницу?

2. Синтаксис javaScript, основные понятия

JavaScript – язык интерпретируемый (простыми словами: интерпретируемый — исполняется последовательно команда за командой), но также оснащен JIT-компиляцией.

JIT или компиляция «на лету» (Just-in-time compilation) — технология увеличения скорости работы программных систем, использующих байт-код, путём компиляции байт-кода в машинный код непосредственно во время работы программы.

Рассмотрим некоторые понятия, относящиеся к синтаксису языка:

Сценарий — текст, состоящий из:

  • операторов,
  • блоков, т. е. взаимосвязанных наборов операторов, и
  • комментариев.

Операторы могут содержать:

  • переменные — могут изменять свое значение в программе,
  • константы — не изменяют свое значение,
  • выражения.

Идентификаторы (identifiers) — имена переменных, методов и объектов:

  • состоят из комбинации букв и цифр;
  • должны начинаться либо с буквы, либо с символа подчеркивания;
  • не должны содержать пробелов.

//переменные различаются: counter=1 Counter=1

«Верблюжья нотация» в записи идентификаторов:

Есть определенные устоявшиеся среди программистов правила для идентификаторов (имён) переменных, функций, массивов и классов. Рассмотрим их:

  • num_docs — знак подчеркивания между словами — хорошо, но есть способ лучше
  • numDocs — вот такой «верблюжий» стиль превосходно подходит для именования переменных:
  • все имена строчными буквами,
  • на стыке слов — большая буква,
  • переменные и свойства — называем именами существительными,
  • массивы и коллекции — называем существительными во множительном числе,
  • функции и методы — называем глаголами,
  • название классов — с заглавной буквы.

let myCounter=1; // просто переменная let userNames = new Array(); // массив function getUserCounter()// функция

Ключевые слова (keywords) — предварительно определенные идентификаторы, составляющие основу языка программирования. Ключевые слова нельзя использовать для имен переменных, функций, объектов и методов.

Литералы (literals) — это постоянные значения JavaScript. Это значения, которые не изменяются во время выполнения сценария (целочисленные литералы, литералы с плавающей точкой, логические литералы (true и false), строковый литерал — это ноль и более символов, заключенных в двойные («») или одиночные (») кавычки).

Правила оформления скрипта JavaScript
  • каждый оператор JavaScript лучше начинать с новой строки;
  • каждый оператор заканчивается точкой с запятой;

Такой код не работает:

Код работает верно:

// способ 1: a=5 document.write(a) // способ 2: a=5; document.write(a); // способ 3: a=5; document.write(a);

  • блок — это набор операторов (составной оператор), заключенный в фигурные скобки < >.
JavaScript комментарии
  1. // — одна строка символов, расположенная справа от этого оператора, считается комментарием;
  2. /*. */ — все, что заключено между /* и */ , считается комментарием; с помощью этого оператора можно выделить несколько строк в качестве комментария.

// проверка /* здесь может быть ошибка a=5; document.write(a); */

alert("Hello World!"); / это однострочный комментарий

Объявление переменных в javaScript и оператор присваивания

Переменная (variable) — это имя, присваиваемое ячейке памяти компьютера, которая хранит определенные данные.

JavaScript — нетипизированный язык. Это значит, что переменные принимают тот тип данных, значение которого в них присваивается. Напрямую задавать тип переменной не надо.

📎📎📎📎📎📎📎📎📎📎