JavaScript был создан в 1995 году Бренданом Айком, работавшим в компании Netscape. Изначально он был задуман как простой язык сценариев для веб-сайтов, дополняющий Java для более сложных веб-приложений, но его тесная интеграция с веб-страницами и встроенная поддержка браузерами привели к тому, что он стал более распространённым, чем Java в веб-интерфейсах.
JavaScript не ограничивается только веб-браузером: например, Node.js, программная платформа, позволяющая выполнять JavaScript, основанная на движке V8 от браузера Google Chrome, становится все более популярной.
1// Си-подобные комментарии. Однострочные комментарии начинаются с двух символов слэш,
2/* а многострочные комментарии начинаются с последовательности слэш-звёздочка
3 и заканчиваются символами звёздочка-слэш */
4
5// Инструкции могут заканчиваться точкой с запятой ;
6doStuff();
7
8// ... но она необязательна, так как точки с запятой автоматически вставляются
9// везде, где есть символ новой строки, за некоторыми исключениями.
10doStuff()
11
12// Так как эти исключения могут привести к неожиданным результатам, мы будем всегда
13// использовать точку с запятой в этом руководстве.
14
15///////////////////////////////////
16// 1. Числа, Строки и Операторы
17
18// В JavaScript только один тип числа (64-bit IEEE 754 double).
19// Он имеет 52-битную мантиссу, которой достаточно для хранения целых чисел
20// с точностью вплоть до 9✕10¹⁵.
213; // = 3
221.5; // = 1.5
23
24// Некоторые простые арифметические операции работают так, как вы ожидаете.
251 + 1; // = 2
260.1 + 0.2; // = 0.30000000000000004 (а некоторые - нет)
278 - 1; // = 7
2810 * 2; // = 20
2935 / 5; // = 7
30
31// Включая деление с остатком.
325 / 2; // = 2.5
33
34// Побитовые операции также имеются; когда вы проводите такую операцию,
35// ваше число с плавающей запятой переводится в целое со знаком
36// длиной *до* 32 разрядов.
371 << 2; // = 4
38
39// Приоритет в выражениях можно явно задать скобками.
40(1 + 3) * 2; // = 8
41
42// Есть три специальных значения, которые не являются реальными числами:
43Infinity; // "бесконечность", например, результат деления на 0
44-Infinity; // "минус бесконечность", результат деления отрицательного числа на 0
45NaN; // "не число", например, результат деления 0/0
46
47// Существует также логический тип.
48true;
49false;
50
51// Строки создаются при помощи двойных или одинарных кавычек.
52'абв';
53"Привет, мир!";
54
55// Для логического отрицания используется восклицательный знак.
56!true; // = false
57!false; // = true
58
59// Строгое равенство ===
601 === 1; // = true
612 === 1; // = false
62
63// Строгое неравенство !==
641 !== 1; // = false
652 !== 1; // = true
66
67// Другие операторы сравнения
681 < 10; // = true
691 > 10; // = false
702 <= 2; // = true
712 >= 2; // = true
72
73// Строки объединяются при помощи оператора +
74"привет, " + "мир!"; // = "Привет, мир!"
75
76// и сравниваются при помощи < и >
77"a" < "b"; // = true
78
79// Проверка равенства с приведением типов осуществляется двойным символом равно
80"5" == 5; // = true
81null == undefined; // = true
82
83// ...если только не использовать ===
84"5" === 5; // = false
85null === undefined; // = false
86
87// ...приведение типов может привести к странному поведению...
8813 + !0; // 14
89"13" + !0; // '13true'
90
91// Вы можете получить доступ к любому символу строки, используя метод charAt
92"Это строка".charAt(0); // = 'Э'
93
94// ...или используйте метод substring, чтобы получить более крупные части
95"Привет, мир".substring(0, 6); // = "Привет"
96
97// length - это свойство, для его получения не нужно использовать ()
98"Привет".length; // = 6
99
100// Также есть null и undefined
101null; // Намеренное отсутствие значения
102undefined; // используется для обозначения переменных, не имеющих
103 // присвоенного значения (хотя непосредственно undefined
104 // является значением)
105
106// false, null, undefined, NaN, 0 и "" — это ложь; всё остальное - истина.
107// Следует отметить, что 0 — это ложь, а "0" — истина, несмотря на то, что
108// 0 == "0".
109
110///////////////////////////////////
111// 2. Переменные, Массивы и Объекты
112
113// Переменные объявляются при помощи ключевого слова var. JavaScript — язык с
114// динамической типизацией, поэтому не нужно явно указывать тип. Для присваивания
115// значения переменной используется символ =
116var someVar = 5;
117
118// если вы пропустите слово var, вы не получите сообщение об ошибке, ...
119someOtherVar = 10;
120
121// ...но ваша переменная будет создана в глобальном контексте, а не в текущем,
122// где вы ее объявили.
123
124// Переменным, объявленным без присвоения, устанавливается значение undefined.
125var someThirdVar; // = undefined
126
127// У математических операций есть сокращённые формы:
128someVar += 5; // как someVar = someVar + 5; someVar теперь имеет значение 10
129someVar *= 10; // теперь someVar имеет значение 100
130
131// Ещё более краткая запись увеличения и уменьшения на единицу:
132someVar++; // теперь someVar имеет значение 101
133someVar--; // вернулись к 100
134
135// Массивы — это нумерованные списки, содержащие значения любого типа.
136var myArray = ["Привет", 45, true];
137
138// Их элементы могут быть доступны при помощи синтаксиса с квадратными скобками.
139// Индексы массивов начинаются с нуля.
140myArray[1]; // = 45
141
142// Массивы можно изменять, как и их длину,
143myArray.push("Мир");
144myArray.length; // = 4
145
146// добавлять и редактировать определённый элемент
147myArray[3] = "Привет";
148
149// Объекты в JavaScript похожи на словари или ассоциативные массивы в других
150// языках: неупорядоченный набор пар ключ-значение.
151var myObj = {key1: "Привет", key2: "Мир"};
152
153// Ключи — это строки, но кавычки необязательны, если строка удовлетворяет
154// ограничениям для имён переменных. Значения могут быть любых типов.
155var myObj = {myKey: "myValue", "my other key": 4};
156
157// Атрибуты объектов можно также получить, используя квадратные скобки
158myObj["my other key"]; // = 4
159
160// или через точку, при условии, что ключ является допустимым идентификатором.
161myObj.myKey; // = "myValue"
162
163// Объекты изменяемы; можно изменять значения и добавлять новые ключи.
164myObj.myThirdKey = true;
165
166// Если вы попытаетесь получить доступ к несуществующему значению,
167// вы получите undefined.
168myObj.myFourthKey; // = undefined
169
170///////////////////////////////////
171// 3. Логика и управляющие конструкции.
172
173// Синтаксис для этого раздела почти такой же, как в Java.
174
175// Условная конструкция работает, как и следовало ожидать,
176var count = 1;
177if (count == 3) {
178 // выполняется, если count равен 3
179} else if (count == 4) {
180 // выполняется, если count равен 4
181} else {
182 // выполняется, если не 3 и не 4
183}
184
185// ...как и цикл while.
186while (true){
187 // Бесконечный цикл!
188}
189
190// Цикл do-while такой же, как while, но он всегда выполняется хотя бы раз.
191var input
192do {
193 input = getInput();
194} while (!isValid(input))
195
196// цикл for такой же, как в C и Java:
197// инициализация; условие; шаг.
198for (var i = 0; i < 5; i++) {
199 // выполнится 5 раз
200}
201
202// && — это логическое И, || — это логическое ИЛИ
203if (house.size == "big" && house.color == "blue") {
204 house.contains = "bear";
205}
206if (color == "red" || color == "blue") {
207 // цвет красный или синий
208}
209
210// && и || используют сокращённое вычисление, что полезно
211// для задания значений по умолчанию.
212var name = otherName || "default";
213
214// Оператор switch выполняет проверку на равенство при помощи ===
215// используйте break, чтобы прервать выполнение после каждого case,
216// или выполнение пойдёт далее даже после правильного варианта.
217grade = 4;
218switch (grade) {
219 case 5:
220 console.log("Отлично");
221 break;
222 case 4:
223 console.log("Хорошо");
224 break;
225 case 3:
226 console.log("Можете и лучше");
227 break;
228 default:
229 console.log("Ой-вей!");
230 break;
231}
232
233
234///////////////////////////////////
235// 4. Функции, Область видимости и Замыкания
236
237// Функции в JavaScript объявляются при помощи ключевого слова function.
238function myFunction(thing) {
239 return thing.toUpperCase();
240}
241myFunction("foo"); // = "FOO"
242
243// Обратите внимание, что значение, которое будет возвращено, должно начинаться
244// на той же строке, что и ключевое слово return, в противном случае вы будете
245// всегда возвращать undefined по причине автоматической вставки точки с запятой.
246// Следите за этим при использовании стиля форматирования Allman.
247function myFunction()
248{
249 return // <- здесь точка с запятой вставится автоматически
250 {
251 thisIsAn: 'object literal'
252 }
253}
254myFunction(); // = undefined
255
256// В JavaScript функции — это объекты первого класса, поэтому они могут быть
257// присвоены различным именам переменных и передаваться другим функциям
258// в качестве аргументов, например, когда назначается обработчик события:
259function myFunction() {
260 // этот код будет вызван через 5 секунд
261}
262setTimeout(myFunction, 5000);
263// Примечание: setTimeout не является частью языка, но реализован в браузерах и Node.js
264
265// Функции не обязательно должны иметь имя при объявлении — вы можете написать
266// анонимное определение функции непосредственно в аргументе другой функции.
267setTimeout(function() {
268 // этот код будет вызван через 5 секунд
269}, 5000);
270
271// В JavaScript есть область видимости; функции имеют свою область
272// видимости, а другие блоки — нет.
273if (true) {
274 var i = 5;
275}
276i; // = 5, а не undefined, как ожидалось бы в языках с блочной областью видимости
277
278// Это привело к общепринятому шаблону "самозапускающихся анонимных функций",
279// которые препятствуют проникновению переменных в глобальную область видимости
280(function() {
281 var temporary = 5;
282 // Мы можем получить доступ к глобальной области для записи в «глобальный объект»,
283 // который в веб-браузере всегда window. Глобальный объект может иметь другое
284 // имя в таких платформах, как Node.js
285 window.permanent = 10;
286})();
287temporary; // вызовет сообщение об ошибке с типом ReferenceError
288permanent; // = 10
289
290// Одной из самых мощных возможностей JavaScript являются замыкания. Если функция
291// определена внутри другой функции, то внутренняя функция имеет доступ к
292// переменным внешней функции даже после того, как контекст выполнения выйдет из
293// внешней функции.
294function sayHelloInFiveSeconds(name) {
295 var prompt = "Привет, " + name + "!";
296 // Внутренние функции по умолчанию помещаются в локальную область видимости,
297 // как если бы они были объявлены с помощью var.
298 function inner() {
299 alert(prompt);
300 }
301 setTimeout(inner, 5000);
302 // setTimeout асинхронна, поэтому функция sayHelloInFiveSeconds сразу выйдет,
303 // после чего setTimeout вызовет функцию inner. Однако поскольку функция inner
304 // «замкнута» вокруг sayHelloInFiveSeconds, она по-прежнему имеет доступ к переменной prompt
305 // на то время, когда она наконец будет вызвана.
306}
307sayHelloInFiveSeconds("Адам"); // Через 5 с откроется окно «Привет, Адам!»
308
309///////////////////////////////////
310// 5. Подробнее об объектах; Конструкторы и Прототипы
311
312// Объекты могут содержать в себе функции.
313var myObj = {
314 myFunc: function() {
315 return "Привет, мир!";
316 }
317};
318myObj.myFunc(); // = "Привет, мир!"
319
320// Когда вызываются функции, прикреплённые к объекту, они могут получить доступ
321// к этому объекту с помощью ключевого слова this.
322myObj = {
323 myString: "Привет, мир!",
324 myFunc: function() {
325 return this.myString;
326 }
327};
328myObj.myFunc(); // = "Привет, мир!"
329
330// Значение this зависит от того, как функция вызывается,
331// а не от того, где она определена. Таким образом, наша функция не работает,
332// если она вызывается не в контексте объекта.
333var myFunc = myObj.myFunc;
334myFunc(); // = undefined
335
336// И наоборот, функция может быть присвоена объекту и получать доступ к нему
337// через this, даже если она не была прикреплена к нему при объявлении.
338var myOtherFunc = function() {
339 return this.myString.toUpperCase();
340}
341myObj.myOtherFunc = myOtherFunc;
342myObj.myOtherFunc(); // = "ПРИВЕТ, МИР!"
343
344// Мы можем также указать контекст для выполнения функции при её вызове,
345// используя call или apply.
346var anotherFunc = function(s) {
347 return this.myString + s;
348}
349anotherFunc.call(myObj, " И привет, Луна!"); // = "Привет, мир! И привет, Луна!"
350
351// Функция apply почти такая же, но принимает в качестве списка аргументов массив.
352anotherFunc.apply(myObj, [" И привет, Солнце!"]); // = "Привет, мир! И привет, Солнце!"
353
354// Это полезно при работе с функцией, которая принимает последовательность
355// аргументов, а вы хотите передать массив.
356Math.min(42, 6, 27); // = 6
357Math.min([42, 6, 27]); // = NaN (Ой-ой!)
358Math.min.apply(Math, [42, 6, 27]); // = 6
359
360// Но call и apply — только временные. Когда мы хотим связать функцию с объектом,
361// мы можем использовать bind.
362var boundFunc = anotherFunc.bind(myObj);
363boundFunc(" И привет, Сатурн!"); // = "Привет, мир! И привет, Сатурн!"
364
365// Bind также может использоваться для частичного применения (каррирования) функции
366var product = function(a, b) { return a * b; }
367var doubler = product.bind(this, 2);
368doubler(8); // = 16
369
370// Когда вы вызываете функцию с помощью ключевого слова new, создается новый объект,
371// доступный функции при помощи this. Такие функции называют конструкторами.
372var MyConstructor = function() {
373 this.myNumber = 5;
374}
375myNewObj = new MyConstructor(); // = {myNumber: 5}
376myNewObj.myNumber; // = 5
377
378// У каждого объекта в JavaScript есть прототип. Когда вы хотите получить
379// доступ к свойству объекта, которое не существует в этом объекте, интерпретатор
380// будет искать это свойство в прототипе.
381
382// Некоторые реализации языка позволяют получить доступ к прототипу объекта
383// через «магическое» свойство __proto__. Несмотря на то, что это может быть полезно
384// для понимания прототипов, это не часть стандарта; мы увидим стандартные способы
385// использования прототипов позже.
386var myObj = {
387 myString: "Привет, мир!"
388};
389var myPrototype = {
390 meaningOfLife: 42,
391 myFunc: function() {
392 return this.myString.toLowerCase()
393 }
394};
395
396myObj.__proto__ = myPrototype;
397myObj.meaningOfLife; // = 42
398
399// Для функций это тоже работает.
400myObj.myFunc(); // = "привет, мир!"
401
402// Если интерпретатор не найдёт свойство в прототипе, то продожит поиск
403// в прототипе прототипа и так далее.
404myPrototype.__proto__ = {
405 myBoolean: true
406};
407myObj.myBoolean; // = true
408
409// Здесь не участвует копирование; каждый объект хранит ссылку на свой прототип.
410// Это означает, что мы можем изменить прототип, и наши изменения будут отражены везде.
411myPrototype.meaningOfLife = 43;
412myObj.meaningOfLife; // = 43
413
414// Мы упомянули, что свойство __proto__ нестандартно, и нет никакого стандартного
415// способа, чтобы изменить прототип существующего объекта. Однако есть два
416// способа создать новый объект с заданным прототипом.
417
418// Первый способ — это Object.create, который появился в JavaScript недавно,
419// а потому доступен ещё не во всех реализациях языка.
420var myObj = Object.create(myPrototype);
421myObj.meaningOfLife; // = 43
422
423// Второй способ, который работает везде, имеет дело с конструкторами.
424// У конструкторов есть свойство с именем prototype. Это *не* прототип
425// функции-конструктора; напротив, это прототип для новых объектов, которые
426// будут созданы с помощью этого конструктора и ключевого слова new.
427MyConstructor.prototype = {
428 myNumber: 5,
429 getMyNumber: function() {
430 return this.myNumber;
431 }
432};
433var myNewObj2 = new MyConstructor();
434myNewObj2.getMyNumber(); // = 5
435myNewObj2.myNumber = 6
436myNewObj2.getMyNumber(); // = 6
437
438// У встроенных типов, таких, как строки и числа, также есть конструкторы, которые
439// создают эквивалентные объекты-обёртки.
440var myNumber = 12;
441var myNumberObj = new Number(12);
442myNumber == myNumberObj; // = true
443
444// За исключением того, что они не в точности равны.
445typeof myNumber; // = 'number'
446typeof myNumberObj; // = 'object'
447myNumber === myNumberObj; // = false
448if (0) {
449 // Этот код не выполнится, потому что 0 - это ложь.
450}
451
452// Впрочем, объекты-обёртки и встроенные типы имеют общие прототипы,
453// поэтому вы можете расширить функциональность строк, например:
454String.prototype.firstCharacter = function() {
455 return this.charAt(0);
456}
457"abc".firstCharacter(); // = "a"
458
459// Это часто используется в т.н. полифилах, которые реализуют новые возможности
460// JavaScript в старой реализации языка, так что они могут быть использованы в
461// старых средах, таких, как устаревшие браузеры.
462
463// Например, мы упомянули, что Object.create доступен не во всех реализациях, но
464// мы сможем использовать его с помощью такого полифила:
465if (Object.create === undefined) { // не перезаписываем метод, если он существует
466 Object.create = function(proto) {
467 // создаём временный конструктор с правильным прототипом
468 var Constructor = function(){};
469 Constructor.prototype = proto;
470 // затем используем его для создания нового,
471 // правильно прототипированного объекта
472 return new Constructor();
473 }
474}
Что ещё почитать ¶
Современный учебник JavaScript (Илья Кантор) — качественный учебник по JavaScript на русском языке.
Mozilla Developer Network — предоставляет отличную документацию для JavaScript, как он используется в браузерах. Кроме того, это вики. Поэтому, если вы знаете больше, вы можете помочь другим, делясь своими знаниями.
JavaScript Garden — это подробное руководство по всем неинтуитивным особенностей языка.
Stack Overflow — можно найти ответ почти на любой ваш вопрос, а если его нет, то задать вопрос самому.