Конспект JavaScript

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

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

Зміст

Синтаксис

Исходный код JavaScript - это текстовые блоки, включаемые в HTML для интерпретации браузером. Первая строка JS вида "use strict"; означает, что блок следует интерпретировать более строго, в соответствии со стандартом ECMAScript 5 (ES5) 2009 года.

Комментарий

В комментарии можно поместить любой текст, т.к. комментарии не влияют на выполнение js-скрипта

//... комментарий до конца строки
/*...*/ комментарий находится внутри, при этом вложенные комментарии не поддерживаются

Стандарт JSDoc

Стандарт для комментариев JSDoc позволяет IDE анализировать исходный код и создавать авто-документацию. Комментарии должны начинаться с /** и могут содержать теги, описывающие различные аспекты кода:

  • @author Developer's name
  • @constructor Marks a function as a constructor
  • @deprecated Marks a method as deprecated
  • @exception Synonym for @throws
  • @exports Identifies a member that is exported by the module
  • @param Documents a method parameter; a datatype indicator can be added between curly braces
  • @private Signifies that a member is private
  • @returns Documents a return value
  • @return Synonym for @returns
  • @see Documents an association to another object
  • @todo Documents something that is missing/open
  • @this Specifies the type of the object to which the keyword this refers within a function.
  • @throws Documents an exception thrown by a method
  • @version Provides the version number of a library

Пример описания функции:

Типы

!!! string number boolean array object

!!! Оператор typeof

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"); из строковой константы бинарного представления

!!!!

Специальные типы

//

undefined

Специальный тип с единственным одноименным значением undefined указывает на то, что переменная была объявлена, но ей не было присвоено значение.

Иногда вместо undefined используют выражение void 0, которое тоже определяет значение undefined.

null

Специальный тип с единственным одноименным значением null указывает на то, что переменная не содержит значения (содержит "ничто"). Это очень сходно со значением undefined, но отличается тем, что значение null подразумевает намеренную и явную установку.

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

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

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

Литерал /Literal

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

Для типов

Логические литералы

  • true представляет истинное логическое значение
  • false представляет ложное логическое значение

Числовые литералы

  • 0
Специальные числовые значения и литералы Infinity и NaN

Литерал Infinity и значения Infinity и -Infinity представляют положительную и отрицательную бесконечности, которые могут возникнуть в результате деления на ноль.

Литерал и значение NaN представляет значение, которое является результатом математической операции, но не является числом.

Значения и литералы Infinity и NaN сохраняют числовой тип и оператор typeof(...) для них возвращает 'number'.

Строковые литералы

  • '...' литерал в одинарных кавычках, требует маскирования ' и спецсимволов
  • "..." литерал в двойных кавычках аналогичен литералу в одинарных кавычках, но требует маскирования " и не требует '
  • ... литерал в обратных кавычках обрабатывается как шаблон, в котором для всех фрагментов вида ${...} вычисляется значение, замещающее фрагмент

Специальные литералы

  • undefined
  • null
  • Infinity

Функция

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

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

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

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

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

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

Функция-генератор (Generator function) /function*

Функция-генератор определяется оператором function* и позволяет выполнить свой код не целиком, а как последовательность фрагментов. Завершение выполнения фрагмента осуществляет оператор yield, который возвращает результат фрагмента подобно оператору return с той разницей, что значение не считается последним, а return возвращает последнее значение последовательности.

Взаимодействие с функцией-генератором осуществляется через объект генератор:

.. В отличие от обычных функции, генераторы могут создавать множество значений одно за другим, по мере необходимости. Добавление нового значения

Генераторы отлично работают с перебираемыми объектами и позволяют легко создавать потоки данных.

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

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

/

Анонимная функции

Анонимная функция создается динамически и остается доступной в пределах области определения и в течении существования области определения. Функция называется анонимной, т.к. при определении ей не назначается имя, такая функция используется через имя переменной или параметра, в которые она помещается.

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

!!!
// Если функция в глобальном контексте
window[functionName]();
// Если функция в контексте документа
document[functionName]();

Создание функции с динамическим исходным кодом

Создание и вызов функции без параметров:

Создание и вызов функции с параметрами заданными литералами:

Создание и вызов функции с параметрами заданными массивом имен:

Создание и вызов функции с параметрами заданными объектом с набором свойств:

 

 

Строка (String)

//developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String
Внутренний формат строки String использует UTF-16, в котором большинство символов использует одно 16-битное кодовое значение, но некоторые символы требуется два кодовых значения.

' ' 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");

  • !!!Операторы (String).
    • [index]: String возвращает новую строку с символом по указанному индексу (индексация от 0)
  • !!!Свойства (String).
    • length длина строки в кодовых значения UTF-16
      • свойство может не соответствовать  фактическому числу символов, т.к. некоторые emoji-символы используют для кодирования 2 кодовых значения

Условие

//

Тернарный оператор

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

Инструкция условия if()else

//

if (условие)
statement;
[else
statement;]

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

Инструкция условия switch()case break default

//

switch (expression) {
case value:
statement;
[break;]
...
[default:
statement;]
}

  • использует строгое сравнение ===

Инструкции цикла 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];

 

Объект

В JavaScript большинство сущностей являются объектами, начиная с самых основных, как строки (strings) и массивы (array), и заканчивая встроенными в браузер API. Объекты позволяют инкапсулировать связанные между собой переменные и функции в общей упаковке, которая удобна для хранения данных и эффективного применения связанных методов.

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

objectName.propertyName or objectName["propertyName"]

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

Тип

Объекты относятся к примитивному типу object, который возвращает оператор typeof value. Для определение принадлежность объекта определенному классу применяется value instanceof class. Получить имя класса можно через имя конструктора value.constructor.name:

Итерация свойств

//

//

Прототип

Прототипы - это механизм, с помощью которого объекты JavaScript наследуют свойства друг от друга. В этой статье мы объясним, как работают цепочки прототипов, и рассмотрим, как свойство prototype можно использовать для добавления методов к существующим конструкторам.

//

Массив

Справочник по 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 устанавливает или возвращает число элементов массива
  •  Методы Array.

Массив является iterable типом и может использоваться в конструкции:
for( var value of myArray ) ...
/

///+?

Обработка ошибок try catch finally

Общий синтаксис:

 

Многопоточность и асинхронность

//

Асинхронные функции async function

!!!
async function [name]([param1[, param2[, ..., paramN]]]) { statements }

!!!

Разрешение Promise

!!!

Ожидание await

Оператор [rv] = await expression; используется для ожидания окончания Promise. Может быть использован только внутри async function или на верхнем уровне модуля.

!!!

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

/

  • 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) создаёт строковое представление исходного кода объекта; не стандартизировано и может не поддерживаться.

Дата и время

//developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Date

Для работы с датами и временем в JS предусмотрен класс Date.

Событие

//

  • 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>

Класс

//

  • Свойство
    • декларация свойств необязательна, но возможна.
      • тип в декларации поддерживается только в TypeScript
    • свойство в объекте используется в конструкции this.property
    • static декларирует ClassName.property
  • Конструктор
    • с помощью constructor(...) {...} можно создать один конструктор
  • Метод
  • Наследование
    • Наследование реализуется с помощью extends в конструкции сlass Heritor extends Ancestor { ...
      • Множественные наследования не поддерживаются
      • Интерфейсы поддерживаются в TypeScript
    • конструктор должен начинаться с вызова конструктора предка super(...), если класс реализован наследованием
    • методы предка можно переопределить
      • после переопределения метода предка доступен как super.method(...)

c

 

Средства

//

Объектная модель документа 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:

//

CSS стили

//

 

JQuery

Официальный API Documentation //api.jquery.com
JavaScript и jQuery»3.10. Введение в jQuery //html5book.ru

https://developers.google.com/speed/libraries

  • <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  • <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  • <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Дивись "Конспект jQuery + Promise + Axios" на //reks.biz

Библиотеки

SVG.js

The lightweight library for manipulating and animating SVG https://svgjs.dev/docs/3.0/

Zdog

https://zzz.dog/

Круглый, плоский, удобный для дизайнера псевдо-3D-движок для Canvas и SVG (геометрия существует в 3D, но отображается как плоские фигуры).

3D: Three.Js

https://github.com/mrdoob/three.js/
https://threejs.org/

Threejs — это высокоуровневая графическая библиотека JavaScript и API, разработанная Рикардо Кабельо в 2010 году, которая предоставляет разработчикам возможность отображать 3D-графику из любого браузера. Он самый популярный и поддерживается большим сообществом разработчиков.

3D: D3

Официальная платная библиотека https://d3js.org/
... и открытая https://github.com/d3/d3/

D3 — Data-Driven Document позволяет им создавать потрясающие визуальные информационные отчеты, адаптивные маркированные диаграммы, диаграммы солнечных лучей и иллюстрации. Он сочетает в себе мощные методы визуализации и взаимодействия, чтобы дать вам полный контроль над вашими данными.

 

Источники

Leave a Reply