Конспект JavaScript | Рекс – друг у світі комп'ютерів

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

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

JavaScript учебник для начинающих с нуля //html5css.ru
JavaScript Tutorial //www.w3schools.com
Стандарты кодирования (оформления) Javascript //codex.wordpress.org
Справочник по JavaScript //developer.mozilla.org
Дока / JavaScript //doka.guide/js/
Здесь живет профессиональный javascript //javascript.ru
- Здесь вы можете изучить JavaScript //learn.javascript.ru/js
Snipp JS/jQuery //snipp.ru

Зміст ♻

Синтаксис

Исходный код 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

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

/**
* A function that sums two numbers
* @param {number} a - first number
* @param {number} b - second number
* @returns {number} The sum of two numbers
* @public
* @since 1.2.3456 (2023-10-25)
*/
function addNumbers(a, b) {
return a + b;
}

/**

* A function that sums two numbers

* @param {number} a - first number

* @param {number} b - second number

* @returns {number} The sum of two numbers

* @public

* @since 1.2.3456 (2023-10-25)

function addNumbers(a, b) {

return a + b;

}

Типы

!!! 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 представляет целые числа больше 2⁵³ - 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 указывает на то, что переменная была объявлена, но ей не было присвоено значение.

var demo;
if(typeof(demo) === 'undefined)
    demo={};
if(demo.id === undefined)
    demo.id = 0;
if (void 0 !== demo && void 0 !== demo.id)
    demo.id++;

var demo;

if(typeof(demo) === 'undefined)

demo={};

if(demo.id === undefined)

demo.id = 0;

if (void 0 !== demo && void 0 !== demo.id)

demo.id++;

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

null

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

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

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

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

var variable; if (variable === undefined) { ... if (typeof variable === 'undefined') { ...

1
2
3
4
5

var variable;
if (variable === undefined) {
...
if (typeof variable === '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 представляет ложное логическое значение

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

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

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

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

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

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

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

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

undefined
null
Infinity

Функция

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

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

function Distance (Speed, Time) {
	return (Speed * Time);
}
...
way2home = Distance (bykeSpeed, 0.5);

function Distance (Speed, Time) {

return (Speed * Time);

}

...

way2home = Distance (bykeSpeed, 0.5);

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

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

function counter() {
	return ++counter.value;}
counter.value = 0;

function counter() {

return ++counter.value;}

counter.value = 0;

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

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

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

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

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

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

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

window['nonAnonymous'] = function ( myArg ) {
  console.log( myArg );
}
nonAnonymous( 'This function is not anonymous.' );

window['nonAnonymous'] = function ( myArg ) {

console.log( myArg );

}

nonAnonymous( 'This function is not anonymous.' );

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

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

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

let sourceCode = 'console.log( "You run new function" );';
let func = new Function( sourceCode );
func();

let sourceCode = 'console.log( "You run new function" );';

let func = new Function( sourceCode );

func();

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

let sourceCode = 'console.log( greeting + ", you run new function, " + name );';
let func = new Function( 'greeting', 'name', sourceCode );
func( 'Hello', 'ReKS' );

let sourceCode = 'console.log( greeting + ", you run new function, " + name );';

let func = new Function( 'greeting', 'name', sourceCode );

func( 'Hello', 'ReKS' );

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

let sourceCode = 'console.log( greeting + ", you run new function, " + name );';
let args = [ 'greeting', 'name' ];
let func = new Function( ...args, sourceCode );
func( 'Hello', 'ReKS' );

let sourceCode = 'console.log( greeting + ", you run new function, " + name );';

let args = [ 'greeting', 'name' ];

let func = new Function( ...args, sourceCode );

func( 'Hello', 'ReKS' );

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

let sourceCode = 'console.log( greeting + ", you run new function, " + name );';
let args = { 'greeting': 'Hello', 'name': 'ReKS' };
let func = new Function( ...Object.keys( args ), sourceCode );
func( args );

let sourceCode = 'console.log( greeting + ", you run new function, " + name );';

let args = { 'greeting': 'Hello', 'name': 'ReKS' };

let func = new Function( ...Object.keys( args ), sourceCode );

func( args );

Строка (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];

Объект

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:

var today = new Date();
Logger.log(typeof today);            // object
Logger.log(today instanceof Date);   // true
Logger.log(today.constructor.name);  // Date

var today = new Date();

Logger.log(typeof today); // object

Logger.log(today instanceof Date); // true

Logger.log(today.constructor.name); // Date

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

for( const property in data ) {
  // Вывод имени свойства
  console.log(property);

  // Вывод значения свойства
  console.log(data[property]);
}


<span class="hljs-comment">// Итерация по свойствам структуры без унаследованных свойств</span>
<span class="hljs-keyword">for</span>( <span class="hljs-keyword">const</span> property <span class="hljs-keyword">of</span> <span class="hljs-built_in">Object</span>.keys( data )) {
  <span class="hljs-comment">// Вывод имени свойства</span>
  <span class="hljs-built_in">console</span>.log( property );

  <span class="hljs-comment">// Вывод значения свойства</span>
  <span class="hljs-built_in">console</span>.log( data[property] );
}


<span class="hljs-comment">// Итерация по свойствам структуры с помощью метода forEach()</span>
data.forEach(<span class="hljs-function">(<span class="hljs-params">property</span>) =></span> {
  <span class="hljs-comment">// Вывод свойства</span>
  <span class="hljs-built_in">console</span>.log(property);
});

<span class="hljs-comment">// Итерация по свойствам и методам структуры</span>
data.forEach(<span class="hljs-function">(<span class="hljs-params">property</span>) =></span> {
  <span class="hljs-comment">// Проверка, является ли свойство методом</span>
  <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> data[property] === <span class="hljs-string">"function"</span>) {
    <span class="hljs-comment">// Вывод метода</span>
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Это метод: "</span> + property);
  } <span class="hljs-keyword">else</span> {
    <span class="hljs-comment">// Вывод свойства</span>
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Это свойство: "</span> + property);
  }
});

for( const property in data ) {

// Вывод имени свойства

console.log(property);

// Вывод значения свойства

console.log(data[property]);

}

// Итерация по свойствам структуры без унаследованных свойств

for( const property of Object.keys( data )) {

// Вывод имени свойства

console.log( property );

// Вывод значения свойства

console.log( data[property] );

}

// Итерация по свойствам структуры с помощью метода forEach()

data.forEach((property) => {

// Вывод свойства

console.log(property);

});

// Итерация по свойствам и методам структуры

data.forEach((property) => {

// Проверка, является ли свойство методом

if (typeof data[property] === "function") {

// Вывод метода

console.log("Это метод: " + property);

} else {

// Вывод свойства

console.log("Это свойство: " + property);

}

});

Массив

Справочник по 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 ) ...
/

///+?

const array1 = ['a', 'b', 'c'];
const iterator1 = array1[Symbol.iterator]();
for (const value of iterator1) {
console.log(value);
}

const array1 = ['a', 'b', 'c'];

const iterator1 = array1[Symbol.iterator]();

for (const value of iterator1) {

console.log(value);

}

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

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

try {
   try_statements
}
[catch (exception_var_1 if condition_1) { // не стандартно
   catch_statements_1
}]
...
[catch (exception_var_2) {
   catch_statements_2
}]
[finally {
   finally_statements
}]

try {

try_statements

}

[catch (exception_var_1 if condition_1) { // не стандартно

catch_statements_1

}]

...

[catch (exception_var_2) {

catch_statements_2

}]

[finally {

finally_statements

}]

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

Асинхронные функции 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.

Класс

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

class Car {
	static staticProperty;
	constructor(name, year) {
		this.name = name;
		this.year = year;
	}
	age() {
		let date = new Date();
		return date.getFullYear() - this.year;
	}
	static method() {}
}

class Car {

static staticProperty;

constructor(name, year) {

this.name = name;

this.year = year;

}

age() {

let date = new Date();

return date.getFullYear() - this.year;

}

static method() {}

}

Средства

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

function countdown(sec){
	window.setTimeout(countdown, 1000, sec - 1);
}

function countdown(sec){

window.setTimeout(countdown, 1000, sec - 1);

}

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

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

Примеры

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

console.log(document.getElementById('demo').hidden);

1	console.log(document.getElementById('demo').hidden);

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

document.getElementById("a").style.color = 'blue';
document.getElementById("b").style.backgroundColor = "#AA0000";

1 2	document.getElementById("a").style.color = 'blue'; document.getElementById("b").style.backgroundColor = "#AA0000";

Якоря

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

location.href="#myanchor";
location.href="https://reks.biz/#myanchor";

1 2	location.href="#myanchor"; location.href="https://reks.biz/#myanchor";

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

window.onhashchange = function(event) {
  if (location.hash == "#start") 
    alert("Hello again!");
}

window.onhashchange = function(event) {

if (location.hash == "#start")

alert("Hello again!");

}

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

window.onload = function(event) {
  if (location.hash == "#finish") 
    alert("Let's finish");
}

window.onload = function(event) {

if (location.hash == "#finish")

alert("Let's finish");

}

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 позволяет им создавать потрясающие визуальные информационные отчеты, адаптивные маркированные диаграммы, диаграммы солнечных лучей и иллюстрации. Он сочетает в себе мощные методы визуализации и взаимодействия, чтобы дать вам полный контроль над вашими данными.

Источники

JavaScript — мультипарадигменный язык программирования //ru.wikipedia.org
Курс лекций по программированию на JavaScript в КПИ //github.com/HowProgrammingWorks
JSDoc //en.wikipedia.org/wiki/JSDoc

M	T	W	T	F	S	S
« Nov
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Синтаксис

Комментарий

Стандарт JSDoc

Типы

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

undefined

null

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

Оператор

Литерал /Literal

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

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

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

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

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

Функция

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

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

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

Строка (String)

Условие

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

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

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

Инструкции цикла for

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

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

Объект

Тип

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

Массив

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

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

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

Разрешение Promise

Ожидание await

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

Дата и время

Событие

Класс

Средства

JSON

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

HTMLElement

Таймеры

Примеры

Якоря

CSS стили

JQuery

Библиотеки

SVG.js

Zdog

3D: Three.Js

3D: D3

Источники

Leave a Reply Cancel reply

Реформація комп'ютерних систем