Theory and Tasks for Students - Spring 2019
Введение в Javascript

Javascript - интерпретируемый язык скриптов, выполняемых на стороне клиента. С помощью этих скриптов можно модифицировать код веб-страницы без взаимодействия с сервером, отсылать данные серверу без переадресации и многое другое.

Для подключения скриптов используется тег <script> двумя способами:

  • Подключение отдельного файла с помощью атрибута src: <script src="./scripts.js"></script>;
  • Запись кода скрипта непосредственно в теге <script>: <script> alert(); </script>.

Как только скрипт загружается браузером, его код тут же выполняется - поэтому часто можно увидеть этот тег в конце документа, что гарантирует существование всех предшествующих элементов на момент выполнения скрипта. Однако в большинстве случаев рекомендуется подключать скрипты в теге <head>.

Одной из особенностей Javascript является слабая типизация, т.е. переменные не имеют строго объявленный тип и могут хранить любые данные - однако это не значит, что сами данные не имеют тип. Локальные переменные объявляются с помощью ключевого слова var, переменные, объявленные без него становятся глобальными: var a = 2; a = "string"; a = ['str1', "str2", 2, []]; // массив может содержать элементы различных типов b = 10; Область видимости локальных переменных ограничивается функцией, в которой она была объявлена, а не первым родительским блоком кода(пара фигурных скобок).

Некоторые языковые конструкции Javascript:

  • Условный оператор if и его строчный вариант (expr) ? v1 : v2, конструкция switch ... case. Для логических выражений существует дополнительный оператор равенства ===, обозначающий равенство не только по значению, но и по типу. В частности, 2 == "2" вернёт true, а 2 === "2" вернёт false.

  • Циклы for с тремя формами записи и цикл while. for (var i = 0; i < 10; i++) {} // важно: переменная i будет доступна после цикла for (var prop in obj) {} // перебирает все члены объекта - и поля, и методы for (var item of arr) {} // перебирает все элементы массива

  • Конструкция try {} catch(..) {} и оператор throw.

  • Литеральное объявление массивов [], объектов {} и регулярных выражений /./: var arr = []; var arr2 = [1, 3, "2"]; var obj = {}; obj.key = "value"; obj["key2"] = 2; var obj2 = { key : "value", key2 : 2 }; var regex = /[a-z]+/g;

  • Именованные и анонимные функции: function foo() {} foo(); var f = function(arg) {}; f(2); var bar = foo; bar(); На основе функции можно описывать классы - в таком случае эта функция выполняет роль конструктора: function A() { x = 2; // приватное поле this.X = x; // публичное поле function method1() {} // приватный метол this.method2 = function() {}; // публичный метод } var a = new A();

Вывод данных осуществляется с помощью функций document.write(), window.console.log(), alert() или в один из элементов документа. В последнем случае для начала необходимо получить ссылку на объект этого элемента, это делается с помощью ряда методов объекта document:

  • getElementById("str") - вернёт один элемент документа с указанным значением атрибута id;
  • getElementsByName("str") - вернёт массив элементов с указанным значением атрибута name;
  • getElementsByClassName("str") - вернёт массив элементов, у которых имеется указанный класс;
  • getElementsByTagName("str") - вернёт массив элементов с указанным название тега;
  • querySelector("str") - вернёт первый элемент, подходящий под шаблон заданного CSS селектора;
  • querySelectorAll("str") - вернёт массив элементов, подходящих под шаблон CSS селектора.

Полученные DOM (Document Object Model) элементы имеют ряд полезных полей:

  • innerHTML - строка HTML кода содержания этого элемента;
  • innerText - строка текста содержания этого элемента без каких-либо тегов;
  • attributes - массив атрибутов тега;
  • children - массив дочерних элементов;
  • parentElement - родительский элемент;
  • className - равносильно attributes["class"].value;
  • classList - коллекция классов элемента, имеет методы add(), remove() и toggle();
  • id - равносильно attributes["id"].value;
  • tagName - название тега элемента;
  • append(), prepend() - добавляет текст в конец/начало содержания элемента;
  • remove() - удаляет элемент;
  • Существует множество других полей и методов у DOM элементов, полный список можно посмотреть, например, здесь (W3Schools.com).

В большинстве случаев требуется выполнение кода не в момент загрузки скрипта, а по событиям: var element = document.getElementById("my_id"); element.onclick = function(e) { e.target.style.color = "red"; }; Многие события доступны как поля формата onEVENTNAME, однако существует другой, более гибкий способ: element.addEventListener("click", function(e) { e.target.style.color = "red"; }); В частности, часто используется событие полной загрузки документа, гарантирующее существование всех DOM элементов: document.addEventListener("DOMContentLoaded", function() { // своеобразный main() вашего приложения });