Содержание

Выражения и операторы — JavaScript

Эта глава описывает выражения и операторы языка JavaScript, такие как операторы присваивания, сравнения, арифметические, битовые, логические, строчные, и различные специальные операторы.

Полный и детальный список операторов и выражений также доступен в этом руководстве.

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

JavaScript поддерживает бинарные и унарные операторы, а также ещё один специальный тернарный оператор — условный оператор. Бинарная операция использует два операнда, один перед оператором и другой за ним:

operand1 operator operand2

Например: 3+4 или x*y.

В свою очередь унарная операция использует один операнд, перед или после оператора:

operator operand

или

operand operator

Например: 

x++ или ++x.

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

В результате операции присваивания операнду слева от оператора присваивания (en-US) (знак «=») устанавливается значение , которое берётся из правого операнда. Основным оператором присваивания является  =, он присваивает значение правого операнда операнду, находящемуся слева. Таким образом, выражение x = y означает, что x присваивается значение y.

Существуют также составные операторы присваивания, которые используются для сокращённого представления операций, описанных в следующей таблице:

Деструктуризация

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

var foo = ["one", "two", "three"];


var one   = foo[0];
var two   = foo[1];
var three = foo[2];


var [one, two, three] = foo;

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

Оператор сравнения (en-US) сравнивает свои операнды и возвращает логическое значение, базируясь на истинности сравнения. Операнды могут быть числами, строками, логическими величинами или объектами. Строки сравниваются на основании стандартного лексикографического порядка, используя Unicode-значения. В большинстве случаев, если операнды имеют разный тип, то JavaScript пробует преобразовать их в тип, подходящий для сравнения. Такое поведение обычно происходит при сравнении числовых операндов. Единственным исключением из данного правила является сравнение с использованием операторов

=== и !==, которые производят строгое сравнение на равенство или неравенство. Эти операторы не пытаются преобразовать операнды перед их сравнением. Следующая таблица описывает операторы сравнения в контексте следующего примера кода:

Операторы сравнения
Оператор Описание Примеры, возвращающие true
Равно (==) Возвращает true, если операнды равны. 3 == var1
"3" == var1
3 == '3'
Не равно (!=) Возвращает true, если операнды не равны. var1 != 4
var2 != "3"
Строго равно (===) Возвращает true, если операнды равны и имеют одинаковый тип. Смотрите также Object.is и sameness in JS. 3 === var1
Строго не равно(!==) Возвращает true, если операнды не равны и/или имеют разный тип. var1 !== "3"
3 !== '3'
Больше (>) Возвращает true, если операнд слева больше операнда справа. var2 > var1
"12" > 2
Больше или равно (>=) Возвращает true, если операнд слева больше или равен операнду справа. var2 >= var1
var1 >= 3
Меньше (<) Возвращает true, если операнд слева меньше операнда справа. var1 < var2
"2" < 12
Меньше или равно (<=) Возвращает true, если операнд слева меньше или равен операнду справа. var1 <= var2
var2 <= 5

Арифметические операторы

Арифметические операторы (en-US) используют в качестве своих операндов числа (также литералы или переменные) и в качестве результата возвращают одно числовое значение. Стандартными арифметическими операторами являются сложение (+), вычитание (-), умножение (*), и деление (/). При работе с числами с плавающей точкой эти операторы работают аналогично их работе в большинстве других языках программирования (обратите внимание, что деление на ноль возвращает бесконечность

Infinity). Например:

console.log(1 / 2); 
console.log(1 / 2 == 1.0 / 2.0); 

Кроме того, JavaScript позволяет использовать следующие арифметические операторы, представленные в таблице:

Арифметические операторы
Оператор Описание Пример
Остаток от деления (en-US) (%) Бинарный оператор. Возвращает целочисленный остаток от деления двух операндов. 12 % 5 вернёт 2.
Инкремент (en-US) (++) Унарный оператор. Добавляет единицу к своему операнду. Если используется в качестве префикса (++x), то возвращает значение операнда с добавленной к нему единицей; а в случае применения в качестве окончания (x++) возвращает значение операнда перед добавлением к нему единицы. Если x равно 3, тогда ++x установит значение
x
равным 4 и вернёт 4, напротив x++ вернёт 3 и потом установит значение x равным 4.
Декремент (en-US) (--) Унарный оператор. Вычитает единицу из значения своего операнда. Логика данного оператора аналогична оператору инкремента. Если x равно 3, тогда --x установит значение x равным 2 и вернёт 2, напротив x-- вернёт 3 и потом установит значение x равным 2.
Унарный минус (en-US)- Унарный оператор. Возвращает отрицательное значение своего операнда. Если x равно 3, тогда
-x
вернёт -3.
Унарный плюс (en-US) (+) Унарный оператор. Пытается конвертировать операнд в число, если он ещё не оно. +"3" вернёт 3.
+true вернёт 1.
Возведение в степень (en-US) (**) Возводит основание в показатель степени, как, основаниестепень 2 ** 3 вернёт 8.
10 ** -1 вернёт 0.1.

Битовые (поразрядные) операторы

Битовые операторы (en-US) обрабатывают свои операнды как последовательности из 32 бит (нулей и единиц), а не как десятичные, шестнадцатеричные или восьмеричные числа. Например, десятичное число 9 имеет двоичное представление 1001. b

Возвращает единицу в каждой битовой позиции, для которой только один из соответствующих битов операндов является единицей. Побитовое НЕ (en-US) ~ a Заменяет биты операнда на противоположные. Сдвиг влево (en-US) a << b Сдвигает a в двоичном представлении на b бит влево, добавляя справа нули. Сдвиг вправо с переносом знака (en-US) a >> b Сдвигает a в двоичном представлении на
b
бит вправо, отбрасывая сдвигаемые биты. Сдвиг вправо с заполнением нулями (en-US) a >>> b Сдвигает a в двоичном представлении на b бит вправо, отбрасывая сдвигаемые биты и добавляя слева нули.
Битовые логические операторы

Основной смысл работы битовых логических операторов состоит в следующем:

  • Операнды преобразуются в 32-битные целые числа и представляются в виде последовательности бит (нулей и единиц). Числа, имеющие более 32 битов будут сокращены. Например, следующее число имеет больше 32 битов и сконвертируется в 32-х битное:
    До : 11100110111110100000000000000110000000000001 После : 10100000000000000110000000000001
  • Каждый бит первого операнда связывается с соответствующим битом второго операнда: первый бит с первым битом, второй бит — со вторым, и так далее.
  • К каждой паре бит применяется заданный оператор, и побитово формируется итоговый результат.

Например, двоичным представлением числа 9 является 1001, а двоичным представлением пятнадцати — 1111. Результаты применения к этим числам битовых логических операторов выглядят следующим образом:

Примеры работы битовых операторов
Выражение Результат Двоичное описание
15 & 9 9 1111 & 1001 = 1001
15 | 9 15 1111 | 1001 = 1111
15 ^ 9 6 1111 ^ 1001 = 0110
~15 -16 ~00000000...00001111 = 11111111...11110000
~9 -10 ~00000000...00001001 = 11111111...11110110

Обратите внимание, что все 32 бита преобразуются с использованием битового оператора НЕ, и что величины с наиболее значимым (самым левым) битом равным 1 представляют собой отрицательные числа (в представлении дополнения до двух).

Битовые операторы сдвига

Битовые операторы сдвига используют два операнда: первый представляет величину, подлежащую сдвигу, а второй операнд указывает число битовых позиций на которое должен быть сдвинут первый операнд. Направление операции сдвига определяется используемым оператором.

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

Операторы сдвига перечислены в следующей таблице.

Битовые операторы сдвига
Оператор Описание Пример
Сдвиг влево (en-US)
(<<)
Данный оператор сдвигает первый операнд на указанное количество бит влево. Излишние биты, сдвинутые влево, отбрасываются. Справа число дополняется нулевыми битами. 9<<2 равно 36, так как 1001 после сдвига на 2 бита влево превращается в 100100, что соответствует числу 36.
Сдвиг вправо с переносом знака (en-US) (>>) Данный оператор сдвигает первый операнд на указанное количество бит вправо. Излишние биты, сдвинутые вправо, отбрасываются. Слева число дополняется копиями крайнего слева бита. 9>>2 равно 2, так как 1001 после сдвига на 2 бита вправо превращается в 10, что соответствует числу 2. Подобным же образом -9>>2 равно -3, так как знак сохраняется.
Сдвиг вправо с заполнением нулями (en-US) (>>>) Данный оператор сдвигает первый операнд на указанное количество бит вправо. Излишние биты, сдвинутые вправо, отбрасываются. Слева число дополняется нулевыми битами. 19>>>2 равно 4, так как 10011 после сдвига на 2 бита вправо превращается в 100, что соответствует числу 4. Для неотрицательных чисел сдвиг вправо с заполнением нулями и сдвиг вправо с переносом знака дают одинаковый результат.

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

Логические операторы (en-US) обычно используются с булевыми (логическими) значениями; при этом возвращаемое ими значение также является булевым. Однако операторы && и || фактически возвращают значение одного из операндов, поэтому, если эти операторы используются с небулевыми величинами, то возвращаемая ими величина также может быть не булевой. Логические операторы описаны в следующей таблице.

Логические операторы
Оператор Использование Описание
Логическое И (en-US) (&&) expr1 && expr2 (Логическое И) Возвращает операнд expr1, если он может быть преобразован в false; в противном случае возвращает операнд expr2. Таким образом, при использовании булевых величин в качестве операндов, оператор && возвращает true, если оба операнда true; в противном случае возвращает false.
Логическое ИЛИ (en-US)(||) expr1 || expr2 (Логическое ИЛИ) Возвращает операнд expr1, если он может быть преобразован в true; в противном случае возвращает операнд expr2. Таким образом, при использовании булевых величин в качестве операндов, оператор || возвращает true, если один из операндов true; если же оба false, то возвращает false.
Логическое НЕ (en-US)(!) !expr (Логическое НЕ) Возвращает false, если операнд может быть преобразован в true; в противном случае возвращает true.

Примерами выражений, которые могут быть преобразованы в false являются: null, 0, NaN, пустая строка («») или undefined.

Следующий код демонстрирует примеры использования оператора && (логическое И).

var a1 =  true && true;     
var a2 =  true && false;    
var a3 = false && true;     
var a4 = false && (3 == 4); 
var a5 = "Cat" && "Dog";    
var a6 = false && "Cat";    
var a7 = "Cat" && false;    

Следующий код демонстрирует примеры использования оператора || (логическое ИЛИ).

var o1 =  true || true;     
var o2 = false || true;     
var o3 =  true || false;    
var o4 = false || (3 == 4); 
var o5 = "Cat" || "Dog";    
var o6 = false || "Cat";    
var o7 = "Cat" || false;    

Следующий код демонстрирует примеры использования оператора ! (логическое НЕ).

var n1 = !true;  
var n2 = !false; 
var n3 = !"Cat"; 
Сокращённая оценка

Так как логические выражения вычисляются слева направо, они проверяются на возможность выполнения сокращённой оценки с использованием следующих правил:

  • false && anything — сокращение с результатом false.
  • true || anything — сокращение с результатом true.

Правила логики гарантируют, что данные вычисления всегда корректны. Обратите внимание, что часть «anything» представленных выше выражений не вычисляется, таким образом удаётся избежать любых побочных эффектов вычисления данной части.

Строковые операторы

В дополнение к операторам сравнения, которые могут использоваться со строковыми значениями, оператор (+) позволяет объединить две строки, возвращая при этом третью строку, которая представляет собой объединение двух строк-операндов:

console.log("my " + "string");  

Сокращённый оператор присваивания += также может быть использован для объединения (конкатенации) строк:

var  mystring = "alpha";  mystring += "bet"; 

Условный (тернарный) оператор

Условный оператор является единственным оператором JavaScript, который использует три операнда. Оператор принимает одно из двух значений в зависимости от заданного условия. Синтаксис оператора:

condition ? val1 : val2

   val1 и val2 обязательно должны что-то возвращать, поэтому в этой конструкции нельзя использовать continue или break

Если condition (условие) — истина, то оператор принимает значение val1. В противном случае оператор принимает значение val2. Вы можете использовать условный оператор во всех случаях, где может быть использован стандартный оператор.

var status = (age >= 18) ? "adult" : "minor";

Данное выражение присваивает значение «adult» переменной status, если age имеет значение 18 или более. В противном случае переменной status присваивается значение «minor».

Оператор запятая

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

Например, если a является двумерным массивом, каждая строка которого содержит 10 элементов, то следующий код с использованием оператора запятая позволяет выполнять одновременное приращение двух переменных. Данный код выводит на экран значения диагональных элементов массива:

for (var i = 0, j = 9; i <= 9; i++, j--)
  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);

Унарные операторы

Унарная операция — операция только с одним операндом.

delete

Оператор delete выполняет удаление объекта, свойства объекта, или элемента массива с заданным индексом. Синтаксис оператора:

delete objectName;
delete objectName.property;
delete objectName[index];
delete property; 

где objectName представляет собой имя объекта, property — свойство объекта, а index — целое число, указывающее на положение (номер позиции)  элемента в массиве.

Четвёртый вариант использования позволяет удалить свойство объекта, но допускается только внутри with.

Вы можете использовать оператор delete для удаления переменных, объявленных неявно, но вы не можете с его помощью удалять переменные, объявленные с помощью var.

После применения оператора delete свойство элемента меняется на undefined. Оператор delete возвращает true если выполнение операции возможно; оператор возвращает false, если выполнение операции невозможно.

x = 42;
var y = 43;
myobj = new Number();
myobj.h = 4;    
delete x;       
delete y;       
delete Math.PI; 
delete myobj.h; 
delete myobj;   
Удаление элементов массива

Удаление элемента массива не влияет на длину массива. Например, если вы удалите a[3], элемент a[4] останется a[4], a[3] станет undefined.

Когда элемент массива удаляется с помощью оператора delete, то из массива удаляется значение данного элемента. В следующем примере элемент trees[3] удалён с помощью оператора delete. Однако, элемент trees[3] остаётся адресуемым и возвращает значение undefined.

var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
delete trees[3];
if (3 in trees) {
  
}

Если вы хотите, чтобы элемент оставался в массиве, но имел значение undefined, то используйте ключевое слово undefined вместо оператора delete. В следующем примере элементу trees[3] присвоено значение undefined, но элемент при этом остаётся в массиве:

var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
trees[3] = undefined;
if (3 in trees) {
  
}
Оператор typeof

Оператор typeof используется одним из следующих способов:

typeof operand
typeof (operand)

Оператор typeof возвращает строку обозначающую тип невычисленного операнда. Значение operand может быть строкой, переменной, дескриптором, или объектом, тип которого следует определить. Скобки вокруг операнда необязательны.

Предположим, вы определяете следующие переменные:

var myFun = new Function("5 + 2");
var shape = "round";
var size = 1;
var today = new Date();

Оператор typeof возвращает следующие результаты для этих переменных:

typeof myFun;     
typeof shape;     
typeof size;      
typeof today;     
typeof dontExist; 

Для дескрипторов true и null оператор typeof возвращает следующие результаты:

typeof true; 
typeof null; 

Для чисел и строк оператор typeof возвращает следующие результаты:

typeof 62;            
typeof 'Hello world'; 

Для свойств оператор typeof возвращает тип значения данного свойства:

typeof document.lastModified; 
typeof window.length;         
typeof Math.LN2;              

Для методов и функций оператор typeof возвращает следующие результаты:

typeof blur;        
typeof eval;        
typeof parseInt;    
typeof shape.split; 

Для встроенных объектов оператор typeof возвращает следующие результаты:

typeof Date;     
typeof Function; 
typeof Math;     
typeof Option;   
typeof String;   
Оператор void

Оператор void используется любым из следующих способов:

void (expression)
void expression

Оператор void определяет выражение, которое должно быть вычислено без возвращения результата. expression — это выражение JavaScript, требующее вычисления. Скобки вокруг выражения необязательны, но их использование является правилом хорошего тона.

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

Следующий код служит примером создания гипертекстовой ссылки, которая бездействует при нажатии на неё пользователем. Когда пользователь нажимает на ссылку, void(0) вычисляется равным undefined, что не приводит ни к каким действиям в JavaScript.

<A HREF="javascript:void(0)">Нажмите здесь, чтобы ничего не произошло</A>

Приведённый ниже код создаёт гипертекстовую ссылку, которая подтверждает отправку формы при клике на ней пользователем:

<A HREF="javascript:void(document.form.submit())">
Нажмите здесь, чтобы подтвердить отправку формы</A>

Операторы отношения

Оператор отношения сравнивает свои операнды и возвращает результат сравнения в виде булева значения.

Оператор in

Оператор in возвращает true, если указанный объект имеет указанное свойство. Синтаксис оператора:

propNameOrNumber in objectName

где propNameOrNumber — строка или числовое выражение, представляющее имя свойства или индекс массива, а objectName — имя объекта.

Некоторые примеры способов использования оператора in:


var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
0 in trees;        
3 in trees;        
6 in trees;        
"bay" in trees;    
                   
"length" in trees; 


"PI" in Math;          
var myString = new String("coral");
"length" in myString;  


var mycar = {make: "Honda", model: "Accord", year: 1998};
"make" in mycar;  
"model" in mycar; 
Оператор
instanceof

Оператор instanceof возвращает true, если заданный объект является объектом указанного типа. Его синтаксис:

objectName instanceof objectType

где objectName — имя объекта, тип которого необходимо сравнить с objectType, а objectType — тип объекта, например, Date или Array.

Используйте оператор instanceof, когда вам необходимо подтвердить тип объекта во время выполнения программы. Например, при перехвате исключений вы можете создать различные программные переходы для обработки исключений в зависимости от типа обрабатываемого исключения.

Например, следующий код использует оператор instanceof для проверки того, является ли объект theDay объектом типа Date. Так как theDay действительно является объектом типа Date, то программа выполняет код, содержащийся в утверждении if.

var theDay = new Date(1995, 12, 17);
if (theDay instanceof Date) {
  
}

Приоритет операторов

Приоритет операторов определяет порядок их выполнения при вычислении выражения. Вы можете влиять на приоритет операторов с помощью скобок.

Приведённая ниже таблица описывает приоритет операторов от наивысшего до низшего.

Таблица 3.7 Приоритет операторов
Тип оператора Операторы
свойство объекта .= |=
запятая ,

Более подробная версия данной таблицы, содержащая ссылки и дополнительную информацию по каждому оператору, находится в справочнике JavaScript.

Выражением является любой корректный блок кода, который возвращает значение.

Концептуально, существуют два типа выражений: те которые присваивают переменной значение, и те, которые вычисляют значение без его присваивания.

Выражение x = 7  является примером выражения первого типа. Данное выражение использует оператор = для присваивания переменной значения 7. Само выражение также равняется 7.

Код 3 + 4 является примером выражения второго типа. Данное выражение использует  оператор «+» для сложения чисел 3 и 4 без присваивания переменной полученного результата 7.

Все выражения в JavaScript делятся на следующие категории:

  • Арифметические: вычисляются в число, например: 3.14159 (Используют арифметические операторы).
  • Строковые: вычисляются в текстовую строку, например: «Fred» или «234» (Используют строковые операторы).
  • Логические: вычисляются в true или false (Используют логические операторы).
  • Основные выражения: Базовые ключевые слова и основные выражения в JavaScript.
  • Левосторонние выражения: Значениям слева назначаются значения справа.

Основные выражения

Базовые ключевые слова и основные выражения в JavaScript.

Оператор
this

Используйте ключевое слово this для указания на текущий объект. В общем случае this указывает на вызываемый объект, которому принадлежит данный метод. Используйте this следующим образом:

this["propertyName"]
this.propertyName

Предположим, функция validate выполняет проверку свойства value некоторого объекта; задан объект, а также верхняя и нижняя граница величины данного свойства:

function validate(obj, lowval, hival){
  if ((obj.value < lowval) || (obj.value > hival))
    alert("Неверное значение!");
}

Вы можете вызвать функцию validate для обработчика события onChange для каждого элемента формы, используя this для указания на элемент формы, как это показано в следующем примере:

<B>Введите число от 18 до 99:</B>
<INPUT TYPE="text" NAME="age" SIZE=3
   onChange="validate(this, 18, 99);">
Оператор группировки

Оператор группировки "скобки" ( ) контролирует приоритет вычисления выражений. Например, вы можете переопределить порядок — «умножение и деление, а потом сложение и вычитание», так чтобы, например, чтобы сложение выполнялось до умножения:

var a = 1;
var b = 2;
var c = 3;


a + b * c     

a + (b * c)   



(a + b) * c   


a * c + b * c 
Упрощённый синтаксис создания массивов и генераторов

Упрощённый синтаксис — экспериментальная возможность JavaScript, которая возможно будет добавлена в будущие версии ECMAScript. Есть 2 версии синтаксиса:

[for (x of y) x]
Упрощённый синтаксис для массивов.
(for (x of y) y)
Упрощённый синтаксис для генераторов.

Упрощённые синтаксисы существуют во многих языках программирования и позволяют вам быстро собирать новый массив, основанный на существующем. Например:

[for (i of [ 1, 2, 3 ]) i*i ];


var abc = [ "A", "B", "C" ];
[for (letters of abc) letters.toLowerCase()];

Левосторонние выражения

Значениям слева назначаются значения справа.

new

Вы можете использовать оператор new для создания экземпляра объекта пользовательского типа или одного из встроенных объектов. Используйте оператор new следующим образом:

var objectName = new objectType([param1, param2, ..., paramN]);
super

Ключевое слово используется, чтобы вызывать функции родительского объекта. Это полезно и с классами для вызова конструктора родителя, например.

Оператор расширения

Оператор расширения позволяет выражению расширяться в местах с множеством аргументов (для вызовов функций) или множестве элементов (для массивов).

Пример: Сегодня, если у вас есть массив и вы хотите создать новый с существующей частью первого, то литерального синтаксиса массива уже не достаточно, и вы должны писать императивный (без вариантов) код, используя комбинацию pushspliceconcat и т.д. Но с этим оператором код становится более коротким:

var parts = ['shoulder', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];

Похожим образом оператор работает с вызовами функций:

function f(x, y, z) { }
var args = [0, 1, 2];
f(...args);

 

Ошибка «JavaScript error occurred in the main process» в Discord: как исправить

Discord – это крайне полезная программа для голосового общения со своими друзьями во время игры во что-то, тем не менее на данный момент многие пользователи сталкиваются с ошибкой «JavaScript error occurred in the main process» при ее запуске. В сегодняшней статье мы рассмотрим с вами, как можно избавиться от этой ошибки.

Как исправить ошибку «JavaScript error occurred in the main process» в Discord

В этой статье мы с вами рассмотрим два метода, способные устранить ошибку «JavaScript error occurred in the main process» при запуске Discord. Стоит сразу заметить, что при отсутствия эффекта от применения одного из них – попробуйте выполнить и другой. Что-то из них должно да сработать.

Метод №1 Обновление клиента Discord

В некоторых случаях ошибка «JavaScript error occurred in the main process» при запуске Discord возникает по причине того, что клиент программы требует для себя обновление, но процесс автоматического обновление запущен не был. Вам нужно выполнить обновление Discord вручную. Чтобы сделать это, вам потребуется следовать нижеуказанным шагам:

  • для начала откройте Диспетчер задач и закройте все открытые процессы программы Discord;
  • далее нажмите на клавиатуре Windows+R;
  • впишите в строку команду %AppData% и нажмите Enter;
  • вернитесь из папки «Roaming» в папку «AppData»;
  • откройте папку «Local» и перейдите из нее в папку «Discord»;
  • дважды кликните на исполнительный файл Update.exe;
  • закройте открытые папки и запустите Discord как обычно.

После всего вышеуказанного, программа Discord после запуска должна будет начать свое обновление. Подождите, пока та закончит устанавливать найденные обновления, а затем убедитесь, что она нормально работает. Если проблема заключалась именно в отсутствии обновление, то ошибка «JavaScript error occurred in the main process» должна будет исчезнуть.

Метод №2 Полная переустановка Discord

Не помог первый метод? Что же, многим он тоже не помогает, но попробовать все же стоило. Однако, что действительно помогает многим, так это полная переустановка программы Discord. Чтобы осуществить полную переустановку, вам потребуется сделать следующее:

  • снова откройте Диспетчер задач и закройте все открытые процессы программы Discord;
  • пройдите в «Панель управления» и перейдите в элемент системы под названием «Программы и компоненты»;
  • найдите в списках ПО Discord и удалите его;
  • затем откройте папку «AppData», как было показано в предыдущем методе;
  • откройте папку «Local» и полностью удалите папку «Discord»;
  • теперь вернитесь обратно в «AppData» и перейдите в папку «Roaming»;
  • найдите в ней папку «discord» и удалите ее;
  • повторите установку Discord.

Как только вы запустите программу, никакой ошибки «JavaScript error occurred in the main process» в Discord больше не будет. Мы надеемся, что данный материал помог вам избавиться от проблемы, и вы наконец-то связались со своими товарищами по игре.

Что такое TypeScript и как его использовать

TypeScript — это язык программирования, в котором исправлены многие недостатки JavaScript. Код на TypeScript выглядит почти так же, как и код на JS, и, если у вас есть опыт frontend-разработки, изучить TypeScript достаточно просто. Особенно учитывая, что вы можете писать JS-код прямо в TS-скриптах.

Код на TypeScript компилируется в JS и подходит для разработки любых проектов под любые браузеры — тем более что можно выбрать версию JS, в которую будет компилироваться код.

TypeScript — проект с открытым исходным кодом, поэтому он очень быстро развивается. Многое, что появляется в TS, позже переходит и в JavaScript: например, let и const, стрелочные функции и так далее.

Давайте разберём два главных преимущества TS перед JS.

Многие проблемы в JavaScript появляются из-за динамической типизации и в целом странного поведения типов данных:

В TypeScript типизация статическая, что избавляет от множества проблем. Есть числовой тип, строковый, логический и другие. Возможно описывать и свои типы данных, например, с помощью enum:


enum Direction
{
   Up,
   Down,
   Left,
   Right,
   None
}
 

let d : Direction = Direction.Up;

И в JS, и в TS есть поддержка объектно-ориентированного программирования: классы, объекты, наследование. Однако TypeScript шагнул чуть дальше и использует больше возможностей ОПП. В том числе, например, интерфейсы:


interface IPost
{
   id: number;
   text: string;
}
 

class Message implements IPost
{
   id: number;
   text: string;
   senderId: number;
   recieverId: number;
}
 
class ArticleComment implements IPost
{
   id: number;
   text: string;
   senderId: number;
   articleId: number;
}

Другой большой плюс — модификаторы доступа. Их в TypeScript три: public, private и protected. Вот пример их использования:

class User
{
   
   private id: number;
   private login: number;
 
   constructor(id: number, login: number)
   {
       this.id = id;
       this.login = login;
   }
 
   
   public GetId(): number
   {
       return this.id;
   }
 
   
   public get Login(): number
   {
       return this.login;
   }
}

Также есть и другие возможности:

  • определение полей в конструкторе;
  • преобразование типов;
  • абстрактные классы;
  • обобщение и так далее.

В будущем всё это может появиться и в JavaScript, но браузеры начнут поддерживать такие возможности ещё очень нескоро.

Observer паттерн в Javascript

В этом видео мы с вами разберем такой паттерн, как Observer. Он достаточно сильно похож на Pub/Sub, но его идея немного в другом.

Каждый день, при разработке, у нас возникает проблема, когда у нас есть разные части приложения, которые должны реагировать на разные события. Например, пользователь ввел какой-то текст, и вам нужно изменить несколько компонентов. И, достаточно сложно, все это синхронизировать.

В этом нам может помочь Observer pattern. Он позволяет делать связи один ко многим между компонентами.

Мы хотим реализовать класс, у которого будут такие методы.

const observer = new EventObserver()

observer.subscribe(data => {
  console.log('subscribe was fired', data)
})

observer.broadcast({someData: 'hello'})

То есть мы создаем один обсервер и потом в нескольких местах подписываемся на события этого обсервера с помощью subscribe. Поэтому когда мы вызовем observer.broadcast, то это уведомит всех подписчиков.

Давайте попробуем реализовать этот паттерн самостоятельно.

class EventObserver {
  constructor () {
    this.observers = []
  }

  subscribe (fn) {
    this.observers.push(fn)
  }

  unsubscribe (fn) {
    this.observers = this.observers.filter(subscriber => subscriber !== fn)
  }

  broadcast (data) {
    this.observers.forEach(subscriber => subscriber(data))
  }
}

Мы создали класс, в котором мы храним массив подписчиков. Также мы описали методы subscribe, unsubscribe и broadcast.

Теперь давайте проверим, что этот код работает.

const observer = new EventObserver()

observer.subscribe(data => {
  console.log('subscribe for module 1 fired', data)
})

observer.subscribe(data => {
  console.log('subscribe for module 2 fired', data)
})

observer.broadcast({someData: 'hello'})

Если мы посмотрим в браузер, то мы видим два консоль лога с данными.

Теперь давайте попробуем на реальном примере. Мы хотим написать 2 компонента: в одном мы будем вводить данные, а другой будет выводить количество введенных слов.

Для начала давайте добавим 2 элемента в нашу разметку.

<textarea></textarea>
<div>
  Words Count:
  <p></p>
</div>

Теперь давайте создадим новый Observer и найдем наши 2 элемента.

const blogObserver = new EventObserver()

const textField = document.querySelector('.textField')
const countField = document.querySelector('.countField')

Теперь мы хотим подписаться на наш blogObserver.

blogObserver.subscribe(text => {
  console.log('broadcast catched')
})

И файрить broadcast, когда мы меняем текстовое поле

textField.addEventListener('keyup', () => {
  blogObserver.broadcast(textField.value)
})

Внутрь broadcast, в качестве данных, мы передали значение поля.

Если мы посмотрим в браузер, то при вводе данных у нас стреляет наш console.log. Это значит, что наш broadcast работает.

Теперь мы хотим из текста найти количество слов. Давайте напишем дополнительную функцию для этого.

const getWordsCount = text =>
  text ? text.trim().split(/\s+/).length : 0

И вызовем ее внутри subscribe.

blogObserver.subscribe(text => {
  countField.innerHTML = getWordsCount(text)
})

Если мы посмотрим в браузер, то все работает и количество слов меняется.

И, хоть это маленький пример, он отлично показывает как работает Observer паттерн.

  1. Сначала мы создаем новый экземпляр класс Observer. Например, для компонента поля.
  2. Дальше во всех других компонентах мы можем подписаться на broadcast этого обсервера.
  3. И теперь все наши компоненты синхронизированы и изменяются одновременно, при изменении данных.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

в какой последовательности изучать JavaScript

Огромный инструментарий JS и тонны материалов по нему. С чего начать? Расскажем, как изучать JavaScript, и предоставим полезные ссылки.

JavaScript (JS) – нативный язык, база, а библиотеки и JavaScript фреймворки – все то, что уже «накладывается» сверху. Язык программирования JavaScript клиентский и выполняется на стороне браузера. Грубо говоря, вся нагрузка ложится именно на ПК пользователя, а не на сервер, как было бы в случае с PHP. Поэтому кривой скрипт также будет затрагивать напрямую клиента, а не сервер: хорошо для вас, да плохо для пользователя.

Подробнее о том, что такое JavaScript, вы сможете узнать из данного видео:

Не упускайте из виду JavaScript фреймворки, библиотеки и прочие инструменты.

  • jQuery – дополнительная библиотека, способная облегчить работу с XHR-запросами и селекторами.
  • Node.js представляет собой серверную вариацию JS.
  • Gulp – автоматизация работ (напр., по сборке проекта).
  • Webpack  заменяет собой и Gulp, и многие другие инструменты. Это сборщик модулей, который  позволяет собрать все js-файлы в необходимое кол-во пакетов, а также убедиться в правильности порядка собранных файлов.
  • Angular/Vue/React. Не нужно вестись на хайповые статьи вроде «Angular vs React». Хватит одного инструмента из трех перечисленных. Остальные – по мере необходимости.

Теперь давайте условимся: идеальной последовательности не существует. Все напрямую зависит от того, чем вы занимаетесь и на что ориентированы: фронтенд или full-stack. Если первое, делайте меньший упор на взаимодействие с серверной частью, а если второе – напротив. Изучать JavaScript вы можете и по своему плану. Наш – лишь одна из возможных вариаций, которая, тем не менее, имеет право на существование.

1. JavaScript основы

Книги по JavaScript для начинающих и аналогичные видеоуроки, которые разбудят в вас веб-разработчика. Массивы, коллекции, строки и прочий базис обязательны к изучению на старте. Список литературы солидный, поэтому в первую очередь загляните сюда:

И еще много чего интересного в нашей статье 16 бесплатных книг по JavaScript.

2. jQuery

Рекомендуем ознакомиться с серией видео «Уроки jQuery» от Web Developer Blog. Вы узнаете все о jQuery, начиная синтаксисом и заканчивая практической реализацией того, что может потребоваться.

3. JavaScript: углубленное изучение

Начинаем изучать JavaScript более серьезно.

В этом поможет неплохой видеокурс от loftblog под названием «Продвинутый JavaScript»:

4. Node.js

И вот мы переходим к самому «вкусному». В сети немало материалов по Node.js, но мы предлагаем сперва ознакомиться с нашими статьями:

  1. Руководство для начинающих в Node.js
  2. Подборка бесплатных ресурсов для изучения Node.js

Далее посмотрите серию уроков Node.js от ITVDN:

Ребята излагают материал максимально доступно, так что никто не уйдет «обиженным» 😉

Менеджер пакетов, который входит в Node.js. Нужен, важен и нередко украшает требования вакансий. У Дмитрия Лаврика есть хорошее видео, разбирающее по косточкам npm в рамках основ:

Захотите узнать больше – обязательно найдете на его канале дополнительные видео, посвященные данному менеджеру.

6. Gulp

Исчерпывающий ответ на вопрос «Что это такое» дает Современный учебник JavaScript: Скринкаст по Gulp. Все выпуски скринкаста собраны в одном месте, что безумно удобно.

7. Webpack

За основой по Webpack вам на канал WebForMySelf:

Дополнительная информация по этому инструменту. Плохо с английским? Не вопрос: переведенный вариант.

8. Angular/Vue/React

Выше уже упоминалось, что можно выбрать что-то одно, но все зависит от конкретного проекта и соответствующих требований к нему. Хоть Vue.js сейчас по обсуждениям впереди планеты всей, затронем каждый из трех инструментов.

Angular курс

Vue.js

Знакомство с React

Надеемся, вам помог наш лайфхак. Если же вы знаете более эффективный способ изучить JS – поделитесь в комментариях 🙂

Кто такой frontend developer и что должен уметь фронтенд-разработчик

Вы можете учиться самостоятельно — по книгам или видео курсам, а можете записаться на курсы для максимально эффективного обучения. Вначале вам следует изучить языки верстки HTML и CSS. Очень важно научиться выполнять адаптивную, блочную, кроссбраузерную, кроссплатформенную, валидную и семантическую верстки, поскольку современные сайты должны быть гибкими и хорошо индексируемыми. Практиковаться можно, верстая страницы по макетам, которые находятся в открытом доступе в интернете. 

Для ускорения работы можете взяться за освоения CSS препроцессора — SASS, например. Когда научитесь создавать страницы на HTML и CSS быстро и без особых проблем, начинайте учить язык программирования JavaScript и параллельно практиковаться в онлайн-тренажерах. Мы предлагаем интерактивный тренажер от ITVDN. Он позволит вам отточить навыки создания кода на HTML, CSS и JavaScript.   

Знание языка JavaScript на базовом уровне даст вам возможность перейти к освоению библиотеки jQuery. Однако, владение самим JavaScript следует довести до высокого уровня, ведь это главный инструмент Frontend разработчика. Затем определитесь с фреймворком (Angular, React, Vue.js) и изучите его, а также такие веб-технологии, как DOM, AJAX, JSON и другие. После можно и за системы сборки проектов взяться. 

Очень желательно, чтобы у вас был наставник, который мог бы проверять ваши проекты на наличие ошибок, отвечать на возникающие вопросы, давать полезные советы. 

Изучите Git, начните делать проекты и публикуйте их на GitHub — это даст вам ценный опыт взаимодействия с распределенной системой управления версиями и позволит демонстрировать ваши работы другим людям. Несколько хороших веб-проектов, которые демонстрируют все ваши навыки, и полноценное портфолио готово, а с ним вы можете уверенно подавать резюме на вакансию Frontend разработчика.

Подробное руководство по освоению профессии Frontend разработчика вы сможете найти в нашем вебинаре.

JavaScript (JS) – что это такое за язык программирования

JavaScript – это мультипарадигменный язык программирования, который обычно применяется в качестве встраиваемого инструмента для программного доступа к различным объектам приложений. С точки зрения веб-разработки, без знаний этой технологии невозможно заниматься созданием современных интерактивных сайтов. Язык JS – это то, что «оживляет» разметку страниц (HTML) и пользовательский функционал (CMS) сайтов. С помощью этого языка реализуется возможность реакции страницы или отдельных ее элементов на действия посетителя. Сегодня JavaScript является базовым языком программирования для браузеров. Он полностью совместим с операционными системами Windows, Linux, Mac OS, а также всеми популярными мобильными платформами.

Как работает технология

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

Стандартный алгоритм работы выглядит следующим образом:

  1. Пользователь выполнил определенное действие.
  2. Браузер определил событие.
  3. Активируется JS-код.
  4. На странице происходит заданное изменение.

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

  1. Пользователь нажимает левую кнопку мыши.
  2. Браузер фиксирует событие onclick.
  3. Активируется функция changePhoto.
  4. В окне просмотра фотографий изменяется изображение.

Если обработчик не внедрен в код, то алгоритм работы будет примерно следующим:

  1. Пользователь совершает клик.
  2. Браузер фиксирует событие onkeydown.
  3. Для его обработки нет специального JS-кода.
  4. После клика ничего не происходит.

Нужно отметить, что программирование не всегда привязывается к активным действиям пользователя. К примеру, JavaScript-код может срабатывать при полной загрузке страницы или после определенного времени нахождения на сайте. Эти возможности активно используются для создания всплывающих Pop-up элементов и чатов.

Положительные особенности технологии

Что это – JS, и как он работает, мы выяснили. Но почему этот язык программирования получил такое широкое распространение? Основным плюсом считается полная интеграция с HTML, позволяющая трансформировать страницу без ограничений. С помощью JavaScript специалист может:

  • быстро интегрировать в код страницы любые теги;
  • определять внешний вид элементов;
  • выполнять позиционирование объектов;
  • получать пользовательские данные;
  • взаимодействовать с сервером (AJAX).

И это перечислены только основные и самые используемые возможности технологии. Применение JavaScript позволяет делать в пределах страницы практически все, что понадобится.

Стоит ли новичкам осваивать JS

Язык программирования JavaScript хорошо подходит для освоения с нуля. Он не перегружен техническими моментами, но уже содержит все базовые компоненты:

  • структуры данных;
  • алгоритмы;
  • объектно-ориентированную модель.

Традиционно рекомендуют начинать свой путь в программировании с Basic и Pascal. Эти языки помогут разобраться с основами, но нужно понимать, что монетизировать или практически применить полученные знания не получится. А JavaScript – это востребованная и реально рабочая технология.

Важным плюсом JS являет и то, что он имеет синтаксическое сходство с Java, С++, C# и PHP. Эти языки программирования тоже активно используются в своих нишах, поэтому начинающему веб-разработчику будет полезно познакомиться с ними.

Чем ограничен JavaScript

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

Существуют ли конкуренты

На сегодня в индустрии веб-разработки не существует технологий, которые могли бы оттеснить JavaScript с его лидерских позиций. Он просто настолько удобен и удачен, что нет смысла создавать что-то новое. С классическим JS могут конкурировать только некоторые надстройки. К ним можно отнести TypeScript, Dart и CoffeeScript. Они часто имеют более удобный и простой код, но он все равно перед исполнением трансформируется в чистый JavaScript.

Главным преимуществом JS можно считать его стабильную актуальность. Язык появился более 20 лет назад, но он продолжает развиваться. Это точно не та технология, которая устареет через несколько лет, после того как вы потратите время на ее изучение.

Что стоит освоить перед JavaScript

Язык JS можно изучать без какой-либо базы, но есть направления, которые помогут на пути к развитию. Очень хорошим подспорьем будет освоение HTML и CSS. Вообще, деятельность в сфере веб- разработки лучше начинать с создания статичных страниц, которые в процессе можно будет оживить с использованием JavaScript. Изучение HTML и CSS поможет получить базовые знания о принципах работы сайтов и передачи данных.

В каком направлении можно развиваться

После основательного изучения JavaScript можно совершенствовать свои навыки практически в любом направлении. Рекомендуется освоить фреймворки и библиотеки, что позволит пользоваться эффективными наборами функциональных классов. В перечень самых распространенных технологий этой группы входят jQuery, Angular и React. Также стоит обратить внимание на надстройки TypeScript, Dart и CoffeeScript. В зависимости от выбранной технологии, они помогут сделать программный код компактнее, строже или чище.

Сегодня трендовым направлением в разработке, основанным на базе JavaScript, является серверное программирование по технологии Node.js. Эта технология активно используется в Apple, BMW, Amazon и других крупных компаниях.

Теперь вы знаете, что это такое – JavaScript, а также то, что в этом направлении программирования нет ограничений для профессионального роста.

Другие термины на букву «J»

Все термины SEO-Википедии

Теги термина

Что такое JavaScript? — Изучите веб-разработку

Добро пожаловать на курс JavaScript для новичков в MDN! В этой статье мы рассмотрим JavaScript с высокого уровня, ответив на такие вопросы, как «Что это такое?». и «Что вы можете с этим сделать?» и убедитесь, что вам понятна цель JavaScript.

Предварительные требования: Базовая компьютерная грамотность, базовое понимание HTML и CSS.
Цель: Чтобы познакомиться с тем, что такое JavaScript, что он может делать и как он вписывается в веб-сайт.

JavaScript — это язык сценариев или программирования, который позволяет вам реализовывать сложные функции на веб-страницах — каждый раз, когда веб-страница делает больше, чем просто сидит и отображает статическую информацию, на которую вы можете смотреть, — отображение своевременных обновлений контента, интерактивных карт , анимированная 2D / 3D графика, музыкальные автоматы с прокруткой и т. д. — вы можете поспорить, что, вероятно, задействован JavaScript. Это третий слой слоеного пирога стандартных веб-технологий, два из которых (HTML и CSS) мы рассмотрели более подробно в других частях области обучения.

  • HTML — это язык разметки, который мы используем для структурирования и придания значения нашему веб-контенту, например, для определения абзацев, заголовков и таблиц данных или для встраивания изображений и видео на страницу.
  • CSS — это язык правил стиля, который мы используем для применения стилей к нашему HTML-содержимому, например, для установки цвета фона и шрифтов, а также для размещения нашего содержимого в нескольких столбцах.
  • JavaScript — это язык сценариев, который позволяет вам создавать динамически обновляемый контент, управлять мультимедиа, анимировать изображения и многое другое.(Ладно, не все, но удивительно, чего можно достичь с помощью нескольких строк кода JavaScript.)

Три слоя красиво накладываются друг на друга. В качестве примера возьмем простую текстовую метку. Мы можем разметить его с помощью HTML, чтобы придать ему структуру и цель:

Затем мы можем добавить немного CSS в микс, чтобы он выглядел красиво:

  п {
  семейство шрифтов: 'helvetica neue', helvetica, sans-serif;
  межбуквенный интервал: 1 пиксель;
  текст-преобразование: прописные буквы;
  выравнивание текста: центр;
  граница: 2px сплошной rgba (0,0,200,0.6);
  фон: rgba (0,0,200,0.3);
  цвет: rgba (0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba (0,0,200,0.4);
  радиус границы: 10 пикселей;
  отступ: 3px 10px;
  дисплей: встроенный блок;
  курсор: указатель;
}  

И, наконец, мы можем добавить JavaScript для реализации динамического поведения:

  const para = document.querySelector ('p');

para.addEventListener ('щелчок', updateName);

function updateName () {
  let name = prompt ('Введите новое имя');
  para.textContent = 'Игрок 1:' + имя;
}
  

Попробуйте щелкнуть эту последнюю версию текстовой метки, чтобы увидеть, что происходит (обратите внимание, что вы можете найти эту демонстрацию на GitHub — посмотрите исходный код или запустите его вживую)!

JavaScript может гораздо больше — давайте рассмотрим, что именно.

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

  • Хранить полезные значения внутри переменных. Например, в приведенном выше примере мы просим ввести новое имя, а затем сохраняем это имя в переменной с именем name .
  • Операции с фрагментами текста (в программировании известные как «строки»). В приведенном выше примере мы берем строку «Player 1:» и присоединяем ее к переменной name , чтобы создать полную текстовую метку, например.грамм. «Игрок 1: Крис».
  • Запуск кода в ответ на определенные события, происходящие на веб-странице. В нашем примере выше мы использовали событие click , чтобы определить, когда была нажата кнопка, а затем запустить код, обновляющий текстовую метку.
  • И многое другое!

Что еще более интересно, так это функциональность, построенная на основе клиентского языка JavaScript. Так называемые интерфейсы прикладного программирования ( API ) предоставляют вам дополнительные сверхспособности для использования в вашем коде JavaScript.

API

— это готовые наборы строительных блоков кода, которые позволяют разработчику реализовывать программы, которые в противном случае было бы трудно или невозможно реализовать. Они делают то же самое для программирования, что и готовые комплекты мебели для домашнего строительства — гораздо проще взять готовые панели и скрутить их вместе, чтобы сделать книжную полку, чем самому разработать дизайн, пойти и найти Подправьте дерево, вырежьте все панели нужного размера и формы, найдите винты нужного размера и , затем соедините их вместе, чтобы получилась книжная полка.

Обычно они делятся на две категории.

API-интерфейсы браузера встроены в ваш веб-браузер и могут предоставлять данные из окружающей компьютерной среды или выполнять полезные сложные задачи. Например:

  • API DOM (объектная модель документа) позволяет вам манипулировать HTML и CSS, создавать, удалять и изменять HTML, динамически применять новые стили к вашей странице и т. Д. Каждый раз, когда вы видите всплывающее окно, появляющееся на странице, или отображается некоторый новый контент (как мы видели выше в нашей простой демонстрации), например, это DOM в действии.
  • API геолокации извлекает географическую информацию. Таким образом Google Maps может определять ваше местоположение и наносить его на карту.
  • API Canvas и WebGL позволяют создавать анимированную 2D- и 3D-графику. С помощью этих веб-технологий люди делают удивительные вещи — см. Эксперименты Chrome и примеры webgls.
  • API-интерфейсы аудио и видео
  • , такие как HTMLMediaElement и WebRTC , позволяют делать действительно интересные вещи с мультимедиа, например воспроизводить аудио и видео прямо на веб-странице или захватывать видео с веб-камеры и отображать его на чужом компьютере ( попробуйте нашу простую демонстрацию Snapshot, чтобы понять идею).

Примечание : Многие из вышеперечисленных демонстраций не будут работать в более старых версиях браузера — при экспериментировании рекомендуется использовать современный браузер, такой как Firefox, Chrome, Edge или Opera, для запуска вашего кода. Вам необходимо учитывать кроссбраузерное тестирование более подробно, когда вы приблизитесь к доставке производственного кода (т.е. реального кода, который будут использовать реальные клиенты).

Сторонние API не встроены в браузер по умолчанию, и вам обычно приходится брать их код и информацию из Интернета.Например:

Примечание : Эти API являются расширенными, и мы не будем рассматривать их в этом модуле. Вы можете узнать больше об этом в нашем модуле клиентских веб-API.

Доступно еще много всего! Однако пока не стоит слишком сильно волноваться. Вы не сможете создать следующий Facebook, Google Maps или Instagram после изучения JavaScript в течение 24 часов — сначала нужно изучить множество основ. И поэтому вы здесь — идем дальше!

Здесь мы фактически начнем смотреть на некоторый код, и при этом исследуем, что на самом деле происходит, когда вы запускаете некоторый JavaScript на своей странице.

Давайте вкратце напомним историю того, что происходит, когда вы загружаете веб-страницу в браузере (о чем впервые говорилось в нашей статье «Как работает CSS»). Когда вы загружаете веб-страницу в свой браузер, вы запускаете свой код (HTML, CSS и JavaScript) внутри среды выполнения (вкладка браузера). Это похоже на фабрику, которая принимает сырье (код) и выпускает продукт (веб-страницу).

Очень часто JavaScript используется для динамического изменения HTML и CSS для обновления пользовательского интерфейса через API объектной модели документа (как упоминалось выше).Обратите внимание, что код в ваших веб-документах обычно загружается и выполняется в том порядке, в котором он отображается на странице. Ошибки могут возникнуть, если JavaScript загружается и запускается перед HTML и CSS, которые он предназначен для изменения. Способы решения этой проблемы вы узнаете позже в статье, в разделе «Стратегии загрузки скриптов».

Безопасность браузера

Каждая вкладка браузера имеет свой собственный сегмент для запуска кода (эти сегменты называются «средами выполнения» в технических терминах) — это означает, что в большинстве случаев код на каждой вкладке запускается полностью отдельно, и код на одной вкладке не может напрямую влиять на код на другой вкладке или на другом веб-сайте.Это хорошая мера безопасности — если бы это было не так, пираты могли бы начать писать код для кражи информации с других веб-сайтов и других подобных плохих вещей.

Примечание : Существуют способы безопасной передачи кода и данных между разными веб-сайтами / вкладками, но это продвинутые методы, которые мы не будем рассматривать в этом курсе.

Порядок выполнения JavaScript

Когда браузер встречает блок JavaScript, он обычно запускает его по порядку, сверху вниз.Это означает, что вам нужно быть осторожным в том, в каком порядке вы размещаете вещи. Например, давайте вернемся к блоку JavaScript, который мы видели в нашем первом примере:

  const para = document.querySelector ('p');

para.addEventListener ('щелчок', updateName);

function updateName () {
  let name = prompt ('Введите новое имя');
  para.textContent = 'Игрок 1:' + имя;
}  

Здесь мы выбираем текстовый абзац (строка 1), затем присоединяем к нему прослушиватель событий (строка 3), чтобы при щелчке на абзаце запускался блок кода updateName () (строки 5–8).Кодовый блок updateName () (эти типы повторно используемых кодовых блоков называются «функциями») запрашивает у пользователя новое имя, а затем вставляет это имя в абзац, чтобы обновить отображение.

Если вы поменяли местами первые две строки кода, он больше не будет работать — вместо этого вы получите сообщение об ошибке в консоли разработчика браузера — TypeError: para is undefined . Это означает, что объект para еще не существует, поэтому мы не можем добавить к нему прослушиватель событий.

Примечание : Это очень распространенная ошибка — вы должны быть осторожны, чтобы объекты, на которые есть ссылки в вашем коде, существовали, прежде чем пытаться что-то с ними сделать.

Интерпретируемый и скомпилированный код

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

С другой стороны, скомпилированные языки преобразуются (компилируются) в другую форму перед запуском на компьютере. Например, C / C ++ компилируются в машинный код, который затем запускается на компьютере. Программа выполняется из двоичного формата, который был сгенерирован из исходного исходного кода программы.

JavaScript — это облегченный интерпретируемый язык программирования. Веб-браузер получает код JavaScript в его исходной текстовой форме и запускает сценарий из него.С технической точки зрения, большинство современных интерпретаторов JavaScript фактически используют технику под названием , своевременная компиляция для повышения производительности; исходный код JavaScript компилируется в более быстрый двоичный формат во время использования сценария, чтобы его можно было запустить как можно быстрее. Однако JavaScript по-прежнему считается интерпретируемым языком, поскольку компиляция выполняется во время выполнения, а не заранее.

У обоих типов языка есть свои преимущества, но мы не будем их сейчас обсуждать.

Сравнение кода на стороне сервера и на стороне клиента

Вы также можете услышать термины на стороне сервера и на стороне клиента код , особенно в контексте веб-разработки. Клиентский код — это код, который запускается на компьютере пользователя: когда веб-страница просматривается, клиентский код страницы загружается, затем запускается и отображается в браузере. В этом модуле мы явно говорим о клиентском JavaScript .

Серверный код, с другой стороны, запускается на сервере, затем его результаты загружаются и отображаются в браузере.Примеры популярных серверных веб-языков включают PHP, Python, Ruby, ASP.NET и … JavaScript! JavaScript также может использоваться в качестве серверного языка, например, в популярной среде Node.js. Вы можете узнать больше о серверном JavaScript в разделе «Динамические веб-сайты — серверное программирование».

Сравнение динамического и статического кода

Слово динамический используется для описания как клиентского JavaScript, так и серверных языков — оно относится к возможности обновлять отображение веб-страницы / приложения, чтобы отображать разные вещи по-разному. обстоятельства, генерируя новый контент по мере необходимости.Серверный код динамически генерирует новый контент на сервере, например извлекает данные из базы данных, тогда как клиентский JavaScript динамически генерирует новый контент внутри браузера на клиенте, например создание новой таблицы HTML, заполнение ее данными, запрошенными с сервера, а затем отображение таблицы на веб-странице, отображаемой пользователю. Значение немного отличается в двух контекстах, но связано, и оба подхода (на стороне сервера и на стороне клиента) обычно работают вместе.

Веб-страница без динамически обновляемого содержимого называется статической — она ​​просто показывает одно и то же содержимое все время.

JavaScript применяется к вашей HTML-странице аналогично CSS. В то время как CSS использует элементы для применения внешних таблиц стилей и элементы