Экстракт JavaScript

Используется как встраиваемый язык для программного доступа к объектам приложений. Широко применяется в браузерах как язык сценариев на веб-страницах.

Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке. Название «JavaScript» является зарегистрированным товарным знаком корпорации Oracle в США.

Основы применения JS в HTML

  • допустимо размещать js-скрипты и в разделе <head>, и в разделе <body>
  • скрипт помещают в тэг <script>...</script>
  • скрипт из внешнего файла <script src="https://myDomain/myPath/myScript.js"></script> облегчает чтение html и задействует механизм кэширования

JS-скрипт позволяет внести любые изменения в документ:

  • изменение содержания
    • изменяет текст в блоке document.getElementById("myDiv").innerHTML = "Hello JS!";
    • перезагружает файл картинки document.getElementById('myImg').src='hello.gif';
  • изменение стиля
    • изменяет размер шрифта блока document.getElementById("myDiv").style.fontSize = "35px";
    • делает картинку невидимой document.getElementById("mySVG").style.display = "none";
  • изменение события
    • замещение обработчика document.getElementById("myButton").onclick = function() { alert('Hello JS!') };
    • добавление обработчика document.getElementById("myInput").addEventListener( "click" , () => alert('Hello JS!'));
      • удаление обработчика document.getElementById("myInput").removeEventListener( "click" , () => alert('Hello JS!'));

JS-скрипт позволяет осуществить html-вставку аналогично тому, как это осуществляет <?php ?> с той разницей, что вставка осуществится на стороне браузера:

Синтаксис

Комментарий

//
/*  */

Литерал /Literal

Явно заданное значение называется литерал, а

Переменная /Variable

Значение, которое может быть изменено, содержится переменной:

  • имена переменных регистрозависимые и соответствуют правилам имен, могут использовать латинские буквы, цифры и знаки _ и $
  • ключевое слово var объявляет переменную, видимую в области функции
  • ключевое слово let объявляет переменную, видимую в области блока
  • ключевое слово const объявляет переменную, видимую в области блока (как let), для немедленного присвоения значения, которое затем нельзя будет изменить
  • независимо от способа декларации, переменная видима в блоке и всех вложенных блоках, в т.ч. в блоках описанных в них функций
  • глобальная переменная декларируется вне функции
    • но по сути глобальная переменная является свойством глобального объекта window, поэтому доступна как window.variable
  • переменная до присвоения значения содержит undefined
    • выражение с переменной до ее объявления вызовет ошибку ReferenceError
  • повторная декларация переменной с тем же именем в том же блоке возможна только для var, для let и const это вызовет ошибку.

Операторы

Присвоение значения переменной выполняет знак = (assignment operator)

  • Арифметические
    • + Addition
      - Subtraction
      * Multiplication
      ** Exponentiation (ES2016)
      / Division
      % Modulus (Division Remainder)
      ++ Increment
      -- Decrement
    • = x = y x = y
      += x += y x = x + y
      -= x -= y x = x - y
      *= x *= y x = x * y
      /= x /= y x = x / y
      %= x %= y x = x % y
      **= x **= y x = x ** y
  • Строковые
    • +
    • +=
  •  Сравнение
    • == равенство значений с приведением к общему типу при необходимости
    • === строгое равенство значений и типов (без приведения)
    • != неравенство значений с приведением типов
    • !== неравенство без приведения типов
    • < <= > >=
    • ? ternary operator
  • Логические
    • && logical and
      || logical or
      ! logical not
  • Операторы типов
    • typeof Returns the type of a variable
    • instanceof Returns true if an object is an instance of an object type
  • Битовые
    • & AND 5 & 1 0101 & 0001 0001 1
      | OR 5 | 1 0101 | 0001 0101 5
      ~ NOT ~ 5 ~0101 1010 10
      ^ XOR 5 ^ 1 0101 ^ 0001 0100 4
      << left shift 5 << 1 0101 << 1 1010 10
      >> right shift 5 >> 1 0101 >> 1 0010 2
      >>> unsigned right shift 5 >>> 1 0101 >>> 1 0010 2
  • ..method() приведение к объектному типу с обращением к методу

Типы

string number boolean array object

Оператор typeof

Специальное значение undefined используется для выражения отсутствия значения. Например, значение переменной до инициализации или результат функции, которая не вернула значение. Тип undefined - тоже undefined.

x = new String(); // Declares x as a String object
y = new Number(); // Declares y as a Number object
z = new Boolean(); // Declares z as a Boolean object
Избегайте String, Number, and Boolean объектов. Они усложняют ваш код и замедляют скорость выполнения.

BigInt представляет целые числа больше  253 - 1, наибольшего числа, которое JavaScript может надёжно представить с Number примитивом

  • const theBiggestInt = 9007199254740991n; добавлением n в конец целочисленного литерала — 10n
  • const alsoHuge = BigInt(9007199254740991); из числовой константы
  • const hugeString = BigInt("9007199254740991"); из строковой константы десятичного представления
  • const hugeHex = BigInt("0x1fffffffffffff"); из строковой константы HEX
  • const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111"); из строковой константы бинарного представления

Функция

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

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

Использование имени функции без () подразумевает объект функции, а не ее выполнение. Объект функции может быть "помещен" в переменную или передан другой функции в качестве параметра.

Являясь статическим объектом функция может иметь свойства, которые также являются статическими и будут сохранять значение в области видимости функции:

Остаточные аргументы function f(arg1, ...rest) образуют массив
Массив может быть развернут оператором расширения f(...arr)

Все аргументы функции находятся в псевдомассиве arguments под своими порядковыми номерами. Исключение составляют стрелочные функции, которые получат аргументы внешней функции.

Стрелочная функция (=>)

Имеют более короткий синтаксис по сравнению с функциональными выражениями и лексически привязаны к значению this (но не привязаны к собственному this, arguments, super, или new.target). Выражение стрелочных функций не позволяют задавать имя, поэтому стрелочные функции анонимны, если их ни к чему не присвоить.
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression

/

Число (Number)

/

  • Методы
    • Number.isInteger(value) определяет, является ли переданное значение целым числом
    • Number.isFinite(testValue) определяет, является ли переданное значение конечным числом
    • Number.parseFloat(string)
    • Number.parseInt(string[, radix])
    • numObj.toString([radix])
    • numObj.toPrecision([precision]) возвращает строку, представляющую объект Number с указанным числом значащих цифр (от 1 до 100)

Строка (String)

\' ' Single quote
\" " Double quote
\\ \ Backslash
\b Backspace
\f Form Feed
\n New Line
\r Carriage Return
\t Horizontal Tabulator
\v Vertical Tabulator

перенос строк допустимый не не желательный
document.getElementById("demo").innerHTML = "Hello \
Dolly!";

When using the === operator, x and y are not equal:
let x = "John";
let y = new String("John");

  • Свойства
    • str.length -
  • Методы
    • str.charAt(index)
    • str.charCodeAt(index)
    • str.concat(string2, string3[, ..., stringN])
    • str.startsWith(searchString[, position]) определить, начинается ли строка с символов указанных
    • str.endsWith(searchString[, length])
    • str.includes(searchString[, position])
    • str.padStart(targetLength [, padString]) заполняет текущую строку другой строкой (несколько раз, если нужно) так, что итоговая строка достигает заданной длины
    • str.padEnd(targetLength [, padString]) дополняет текущую строку с помощью заданной строки (в конечном счёте повторяя), так чтобы результирующая строка достигла заданной длины
    • str.trim(), удаляет пробельные символы (пробел, табуляция, неразрывный пробел и прочие) и все символы конца строки (LF, CR и прочие)
      • str.trimStart(), str.trimEnd() (trimLeft, trimRight) - ?
    • str.slice(beginIndex[, endIndex]) извлекает часть строки и возвращает новую строку без изменения оригинальной строки
    • str.substring(indexA[, indexB]) возвращает подстроку строки между двумя индексами, или от одного индекса и до конца строки.
    • str.split([separator[, limit]]) разбивает объект String на массив строк путём разделения строки указанной подстрокой
    • str.match(regexp)
    • str.valueOf() возвращает примитивное значение объекта,

Условие

//

var c = (a < b) ? 'minor' : 'major';

if (условие)
инструкция1
[else
инструкция2]

Присвоение в if принято акцентировать двойными скобками
if ((x = y)) { }

Операторы цикла for

do statement while (condition);

while (condition) statement

for ([initialization]; [condition]; [final-expression]) statement

for (key in object) { statement }

for (variable of iterable) { statement }

for await (variable of iterable) { statement }

Оператор продолжения continue

continue [label];

label: while() {
continua label;
}

Оператор прерывания break

break [label];

 

Объект

const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};

objectName.propertyName or objectName["propertyName"]

В JavaScript ключевое слово this относится к объекту.

Массив

Справочник по JavaScript > Стандартные встроенные объекты > Array //developer.mozilla.org

  • var Declares a variable
    let Declares a block variable
    const Declares a block constant
    if Marks a block of statements to be executed on a condition
    switch Marks a block of statements to be executed in different cases
    for Marks a block of statements to be executed in a loop
    function Declares a function
    return Exits a function
    try Implements error handling to a block of statements
  • Конструкторы
    • let arr = [0, ...arr1, 2, ...arr2]; для комбинированного использования с оператором расширения
  • Свойства
    • length устанавливает или возвращает число элементов массива
  •  Методы
    • arr.fill(value[, start = 0[, end = this.length]]) - заполняет все элементы массива от начального до конечного индексов значением, возвращает изменённый массив
    • arr.push(element1, ..., elementN) - добавляет один или более элементов в конец массива, возвращает новую длину массива
    • arr.pop() - удаляет последний элемент из массива, возвращает его значение
    • arr.forEach(function callback(currentValue, index, array) { iterator }[, thisArg]); - метод итератора
    • arr.reverse() -
    • arr.some(callback(element[, index[, array]])[, thisArg]) -
  • Статический метод
    • Array.isArray(obj) - проверяет, что объект является массивом

 

Прикладные функции и объекты

/

  • parseInt(a) приводит значение к целому или NaN
  • Math встроенный объект, включающий математические константы в свойствах и математические функции в методах; не работает с числами типа BigInt; не является функциональным объектом.
    • Константы
      • Math.PI знаменитая тригонометрическая константа
      • Math.E, .LN10, .LN2, .LOG10E, .LOG2E, .SQRT1_2, .SQRT2 другие математические константы
    • Целочисленные функции и Co
      • Math.round(x) округляет аргумент по правилам округления и приводит к целому
        • Math.fround(x) округляет и приводит к плавающей точке одинарной точности
      • Math.ceil(x) округляет аргумент к большему целому
      • Math.floor(x) округляет аргумент к меньшему целому
      • Math.trunc(x) отбрасывает дробную часть аргумента
      • Math.abs(x) возвращает абсолютное значение числа (модуль)
      • Math.sign(x) возвращает одно из пяти значений: 1, -1, 0, -0 и NaN
    • Алгебраические
      • Math.pow(base, exponent) возводит основание в степень показателя
      • Math.sqrt(x) квадратный корень
      • Math.cbrt(x) кубический корень
      • Math.hypot([value1[, value2[, ...]]]) квадратный корень суммы квадратов всех аргументов
  • Строковые объекты String
  • eval(string) выполняет код в строке; требования безопасности рекомендуют использовать с осторожностью.
  • uneval(object) создаёт строковое представление исходного кода объекта; не стандартизировано и может не поддерживаться.

Событие

//

  • focusin event: fired when an element is about to gain focus.
  • focusout event: fired when an element is about to lose focus.

<script>
function demoCanvas() {
var b_canvas = document.getElementById("demoCanvas");
var b_context = b_canvas.getContext("2d");
var cIndex = 0;
var rIndex = 0;
for (rIndex = 0; rIndex < 6; rIndex++) {
for (cIndex = 0; cIndex < 30; cIndex++) {
b_context.fillStyle = "rgb(" + String(Math.floor(Math.random() * 256)) + "," + String(Math.floor(Math.random() * 256)) + "," + String(Math.floor(Math.random() * 256)) + ")";
b_context.fillRect(cIndex * 25, rIndex * 25, 20, 20);
}
}
}
demoCanvas();
</script>

Класс

//

c

 

Средства

/

JSON

  • Конструктор json-переменные можно инициировать в коде выражениями в json-нотации
  • obj = JSON.parse(text[, reviver]) -
    • reviver
  • text = JSON.stringify(value[, replacer[, space]]) -
    • value
    • replacer
    • space
    • obj.toJSON() - если преобразуемый в строку объект имеет свойство с именем toJSON и значением свойства, установленным в функцию, то этот метод toJSON() изменит стандартное поведение преобразования в JSON: вместо преобразования объекта будет использоваться значение, возвращаемое методом toJSON()

Объектная модель документа DOM

  • NodeList
    Объект NodeList — это коллекция узлов, возвращаемая такими методами, как Node.childNodes и document.querySelectorAll.
    Несмотря на то, что NodeList не является массивом ( Array ), его вполне возможно перебрать при помощи метода forEach(). NodeList также можно конвертировать в Array при помощи Array.from()
    Однако некоторые старые браузеры на данный момент все ещё не поддерживают NodeList.forEach() или Array.from(). Данные ограничения можно обойти, используя Array.prototype.forEach() ( больше информации на этой странице ).

    • Свойства
      • length Количество элементов в NodeList.
    • Методы
      • item ( idx ) Возвращает элемент из списка по его индексу или null, если индекс выходит за границы допустимого диапазона. Может быть использован как альтернатива nodeList[idx], возвращающему undefined при недопустимом idx.
      • entries() Возвращает iterator, позволяя перебрать все пары ключ/значение, содержащиеся в объекте.
      • forEach() Выполняет указанную функцию один раз для каждого элемента NodeList
      • keys() Возвращает iterator, позволяя перебрать все ключи каждой пары ключ/значение, содержащейся в объекте.
      • values() Возвращает iterator, позволяя перебрать все значения каждой пары ключ/значение, содержащейся в объекте.
  • Node (Element)
    • Node.firstChild
    • Node.lastChild
    • Node.nextSibling
    • Node.previousSibling
    • ParentNode.children (en-US)
    • .tagName
    • obj[prop] -
    • obj.hasOwnProperty(prop) -
    • Object.getOwnPropertyNames(obj)
    • ? .attributes Только для чтения Возвращает NamedNodeMap, в котором перечислены все атрибуты связанные с элементом
    •  .childNodes
      • .forEach
    • .ParentNode
      • .childElementCount
        Это Number представляющее число дочерних узлов, представленных в элементе.
      • .children (en-US)
        Is a live HTMLCollection, содержащая все дочерние элементы, в виде коллекции.
  • DOMTokenList

HTMLElement

Web APIs > HTMLElement //developer.mozilla.org

  • Свойства
    • .style - коллекция свойств оформления
    • .classList Только для чтения Возвращает DOMTokenList содержащий список атрибутов класса.
    • .parentElement
  • Методы
    • .click() Sends a mouse click event to the element.
    • .focus(options) устанавливает курсор на элементе
    • .blur() to remove the focus from an element

Таймеры

Веб-технологии для разработчиков > Интерфейсы веб API > WindowTimers.setTimeout() //developer.mozilla.org

Таймаут реализует однократный вызов функции или выполнение фрагмента кода по истечению указанной задержки.
var timeoutID = window.setTimeout(func [, delay, param1, param2, ...]);
Отмена таймаута позволяет предотвратить вызов,  но также освобождает память кода и параметров после того, как вызов был выполнен.
clearTimeout(timeoutID);

Интервал реализует регулярный вызов функции или кода с заданной периодичностью
var intervalID = window.setInterval(func [, delay, param1, param2, ...]);
Отмена интервала прекращает его работу
clearInterval(intervalID);

Вызов  функции Таймером или Интервалом осуществляется не асинхронно, т.е. вызов произойдет не раньше, чем завершится выполнение текущей функции. Точное соблюдение задержки не гарантируется и она может увеличиться. Есть мнение, что это обусловлено однопоточность интерпретации JS.

Функция setImmediate(func [, param1, param2, ...]); выполняет функцию или код немедленно. Использовать ее в клиентском коде не рекомендуется и не во всех браузерах она поддерживается.

Примеры

Для вывода отладочных сообщений используется метод log объекта console:

Cвойства стиля color, background-color и другие расположены в коллекции style и могут назначаться скриптом:

Якоря

Переход на странице по якорю выполняется через значение свойства href объекта location:

При переходе по якорю возникает событие window.onhashchange, в котором якорь доступен в location.hash:

Якорь в составе URL не доступен на сервере, поэтому серверный php-скрипт его не может обработать, но обработать якорь может js-скрипт на странице по событию загрузки onload:

//

Источники

Leave a Reply