beautify 1st part of the tutorial
This commit is contained in:
Ilya Kantor
parent
e3dd2cedc0
commit
6444024a9d
327 changed files with 2358 additions and 1986 deletions
|
|
@ -4,9 +4,11 @@
|
|||
<!--+ run -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script>
|
||||
|
|
@ -14,6 +16,7 @@
|
|||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -16,14 +16,15 @@
|
|||
<!--+ run height=100 -->
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<!-- Тег meta для указания кодировки -->
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Начало документа...</p>
|
||||
|
||||
*!*
|
||||
<script>
|
||||
alert( 'Привет, Мир!' );
|
||||
|
|
@ -33,6 +34,7 @@
|
|||
<p>...Конец документа</p>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
|
|
@ -88,6 +90,7 @@
|
|||
Выглядит это примерно так:
|
||||
|
||||
```html
|
||||
<!--+ no-beautify -->
|
||||
<script type="text/javascript"><!--
|
||||
...
|
||||
//--></script>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
Примеры представления чисел в двоичной системе:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
a = 0; // 00000000000000000000000000000000
|
||||
a = 1; // 00000000000000000000000000000001
|
||||
a = 2; // 00000000000000000000000000000010
|
||||
|
|
@ -167,6 +168,7 @@ alert(access2); // 11000
|
|||
Пример:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
9 (по осн. 10)
|
||||
= 00000000000000000000000000001001 (по осн. 2)
|
||||
14 (по осн. 10)
|
||||
|
|
@ -194,6 +196,7 @@ alert(access2); // 11000
|
|||
Пример:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
9 (по осн. 10)
|
||||
= 00000000000000000000000000001001 (по осн. 2)
|
||||
14 (по осн. 10)
|
||||
|
|
@ -225,6 +228,7 @@ alert(access2); // 11000
|
|||
Пример:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
9 (по осн. 10)
|
||||
= 00000000000000000000000000001001 (по осн. 2)
|
||||
14 (по осн. 10)
|
||||
|
|
@ -253,6 +257,7 @@ alert(access2); // 11000
|
|||
Например, пусть в `data` очередное число равно `9`, а ключ `key` равен `1220461917`.
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
Данные: 9 в двоичном виде
|
||||
00000000000000000000000000001001
|
||||
|
||||
|
|
@ -273,6 +278,7 @@ alert(access2); // 11000
|
|||
В нашем случае:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
Полученная шифровка в двоичной системе:
|
||||
9 ^ key = 1220461908
|
||||
01001000101111101100010101010100
|
||||
|
|
@ -305,6 +311,7 @@ alert(access2); // 11000
|
|||
Пример:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
9 (по осн. 10)
|
||||
= 00000000000000000000000000001001 (по осн. 2)
|
||||
--------------------------------
|
||||
|
|
@ -332,6 +339,7 @@ alert(~-1); // 0
|
|||
Например, `9 << 2` даст `36`:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
|
||||
9 (по осн.10)
|
||||
= 00000000000000000000000000001001 (по осн.2)
|
||||
|
|
@ -356,7 +364,7 @@ alert( 3 << 3 ); // 24, умножение на 2 три раза
|
|||
Конечно, следует иметь в виду, что побитовые операторы работают только с 32-битными числами, поэтому верхний порог такого "умножения" ограничен:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
*!*
|
||||
alert(10000000000 << 1); // -1474836480, отброшен крайний-левый бит
|
||||
*/!*
|
||||
|
|
@ -376,6 +384,7 @@ alert(10000000000 * 2); // 20000000000, обычное умножение
|
|||
Например, `9 >> 2` даст <code>2</code>:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
9 (по осн.10)
|
||||
= 00000000000000000000000000001001 (по осн.2)
|
||||
--------------------------------
|
||||
|
|
@ -389,6 +398,7 @@ alert(10000000000 * 2); // 20000000000, обычное умножение
|
|||
Аналогично, `-9 >> 2` даст `-3`:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
-9 (по осн.10)
|
||||
= 11111111111111111111111111110111 (по осн.2)
|
||||
--------------------------------
|
||||
|
|
@ -422,6 +432,7 @@ alert( 100 >> 3 ); // 12, деление на 2 три раза, целая ча
|
|||
Для отрицательных чисел -- результат работы разный. Например, `-9 >>> 2` даст `1073741821`, в отличие от `-9 >> 2` (дает `-3`):
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
-9 (по осн.10)
|
||||
= 11111111111111111111111111110111 (по осн.2)
|
||||
--------------------------------
|
||||
|
|
@ -559,6 +570,7 @@ alert( 100 >> 3 ); // 12, деление на 2 три раза, целая ча
|
|||
Как правило, доступы задаются в виде констант:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
var ACCESS_ADMIN = 1; // 00001
|
||||
var ACCESS_GOODS_EDIT = 2; // 00010
|
||||
var ACCESS_GOODS_VIEW = 4; // 00100
|
||||
|
|
|
|||
|
|
@ -11,9 +11,11 @@ alert(name);
|
|||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script>
|
||||
|
|
@ -22,6 +24,7 @@ alert(name);
|
|||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ alert("Привет");
|
|||
Функция prompt принимает два аргумента:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
result = prompt(title, default);
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ if (year < 2011) {
|
|||
Иногда нужно в зависимости от условия присвоить переменную. Например:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var access;
|
||||
var age = prompt('Сколько вам лет?', '');
|
||||
|
||||
|
|
@ -195,7 +195,7 @@ if (age < 3) {
|
|||
Иногда оператор вопросительный знак `'?'` используют как замену `if`:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var company = prompt('Какая компания создала JavaScript?', '');
|
||||
|
||||
*!*
|
||||
|
|
@ -215,7 +215,7 @@ var company = prompt('Какая компания создала JavaScript?', '
|
|||
Вот, для сравнения, то же самое с `if`:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var company = prompt('Какая компания создала JavaScript?', '');
|
||||
|
||||
*!*
|
||||
|
|
|
|||
|
|
@ -51,7 +51,8 @@ if (hour < 10 || hour > 18) {
|
|||
|
||||
```js
|
||||
//+ run
|
||||
var hour = 12, isWeekend = true;
|
||||
var hour = 12,
|
||||
isWeekend = true;
|
||||
|
||||
if (hour < 10 || hour > 18 || isWeekend) {
|
||||
alert( 'Офис до 10 или после 18 или в выходной закрыт' );
|
||||
|
|
@ -69,7 +70,7 @@ JavaScript вычисляет несколько ИЛИ слева направ
|
|||
При запуске примера ниже присвоение `x` не произойдёт:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var x;
|
||||
|
||||
*!*true*/!* || (x = 1);
|
||||
|
|
@ -80,7 +81,7 @@ alert(x); // undefined, x не присвоен
|
|||
...А в примере ниже первый аргумент -- `false`, так что ИЛИ попытается вычислить второй, запустив тем самым присваивание:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var x;
|
||||
|
||||
*!*false*/!* || (x = 1);
|
||||
|
|
@ -125,7 +126,6 @@ alert(result); // выведет "Привет!" - первое значение
|
|||
|
||||
```js
|
||||
//+ run
|
||||
|
||||
alert( undefined || '' || false || 0 ); // 0
|
||||
```
|
||||
|
||||
|
|
@ -156,7 +156,8 @@ alert( false && false); // false
|
|||
|
||||
```js
|
||||
//+ run
|
||||
var hour = 12, minute = 30;
|
||||
var hour = 12,
|
||||
minute = 30;
|
||||
|
||||
if (hour == 12 && minute == 30) {
|
||||
alert( 'Время 12:30' );
|
||||
|
|
|
|||
|
|
@ -4,14 +4,11 @@
|
|||
"" + 1 + 0 = "10" // (1)
|
||||
"" - 1 + 0 = -1 // (2)
|
||||
true + false = 1
|
||||
6 / "3" = 2
|
||||
"2" * "3" = 6
|
||||
6 / "3" = 2 "2" * "3" = 6
|
||||
4 + 5 + "px" = "9px"
|
||||
"$" + 4 + 5
= "$45"
|
||||
"4" - 2
= 2
|
||||
"4px" - 2
= NaN
|
||||
7 / 0
= Infinity
|
||||
" -9\n" + 5 = " -9\n5"
|
||||
"4" - 2
= 2 "4px" - 2
= NaN
|
||||
7 / 0
= Infinity " -9\n" + 5 = " -9\n5"
|
||||
" -9\n" - 5 = -14
|
||||
5 && 2
= 2
|
||||
2 && 5
= 5
|
||||
|
|
|
|||
|
|
@ -5,18 +5,13 @@
|
|||
Подумайте, какой результат будет у выражений ниже. Тут не только преобразования типов. Когда закончите -- сверьтесь с решением.
|
||||
|
||||
```js
|
||||
"" + 1 + 0
|
||||
"" - 1 + 0
|
||||
"" + 1 + 0 "" - 1 + 0
|
||||
true + false
|
||||
6 / "3"
|
||||
"2" * "3"
|
||||
4 + 5 + "px"
|
||||
"$" + 4 + 5
|
||||
"4" - 2
|
||||
"4px" - 2
|
||||
7 / 0
|
||||
" -9\n" + 5
|
||||
" -9\n" - 5
|
||||
"$" + 4 + 5
"4" - 2
"4px" - 2
|
||||
7 / 0
" -9\n" + 5 " -9\n" - 5
|
||||
5 && 2
|
||||
2 && 5
|
||||
5 || 0
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ for (i=0; i<3; i++) {
|
|||
В цикле также можно определить переменную:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
for (*!*var*/!* i=0; i<3; i++) {
|
||||
alert(i); // 0, 1, 2
|
||||
}
|
||||
|
|
@ -216,7 +216,7 @@ alert('Сумма: ' + sum);
|
|||
Например, цикл ниже использует `continue`, чтобы не выводить четные значения:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
for (var i = 0; i < 10; i++) {
|
||||
|
||||
*!*if (i % 2 == 0) continue;*/!*
|
||||
|
|
@ -274,6 +274,7 @@ if (условие) {
|
|||
Поэтому такой код приведёт к ошибке:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
(i > 5) ? alert(i) : *!*continue*/!*;
|
||||
```
|
||||
|
||||
|
|
@ -287,7 +288,7 @@ if (условие) {
|
|||
Например, внутри цикла по `i` находится цикл по `j`, и при выполнении некоторого условия мы бы хотели выйти из обоих циклов сразу:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
*!*outer:*/!* for (var i = 0; i < 3; i++) {
|
||||
|
||||
for (var j = 0; j < 3; j++) {
|
||||
|
|
@ -308,12 +309,14 @@ alert('Готово!');
|
|||
Метка имеет вид `"имя:"`, имя должно быть уникальным. Она ставится перед циклом, вот так:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
outer: for (var i = 0; i < 3; i++) { ... }
|
||||
```
|
||||
|
||||
Можно также выносить ее на отдельную строку:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
outer:
|
||||
for (var i = 0; i < 3; i++) { ... }
|
||||
```
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
В реальном случае, скорее всего, подойдёт обычное сравнение `'=='`.
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
if(browser == 'IE') {
|
||||
alert('О, да у вас IE!');
|
||||
} else if (browser == 'Chrome'
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
Выглядит она так:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
switch(x) {
|
||||
case 'value1': // if (x === 'value1')
|
||||
...
|
||||
|
|
@ -125,7 +126,7 @@ switch(a) {
|
|||
В примере ниже `case 3` и `case 5` выполняют один и тот же код:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var a = 2+2;
|
||||
|
||||
switch (a) {
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@ alert(message); // <-- будет ошибка, т.к. переменная ви
|
|||
Например:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
function count() {
|
||||
// переменные i,j не будут уничтожены по окончании цикла
|
||||
for (*!*var*/!* i=0; i<3; i++) {
|
||||
|
|
@ -100,7 +101,7 @@ function count() {
|
|||
Функция может обратиться ко внешней переменной, например:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var *!*userName*/!* = 'Вася';
|
||||
|
||||
function showMessage() {
|
||||
|
|
@ -177,7 +178,7 @@ alert(message); // Привет
|
|||
Например, этот код выводит два сообщения:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
function showMessage(*!*from, text*/!*) { // параметры from, text
|
||||
|
||||
from = "** " + from + " **"; // здесь может быть сложный код оформления
|
||||
|
|
@ -273,7 +274,7 @@ function showMessage(from, text) {
|
|||
Например, создадим функцию `calcD`, которая будет возвращать дискриминант квадратного уравнения по формуле <code>b<sup>2</sup> - 4ac</code>:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
function calcD(a, b, c) {
|
||||
*!*return*/!* b*b - 4*a*c;
|
||||
}
|
||||
|
|
@ -360,12 +361,14 @@ alert( doNothing() === undefined ); // true
|
|||
Функции, которые начинаются с `"show"` -- что-то показывают:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
showMessage(..) // префикс show, "показать" сообщение
|
||||
```
|
||||
|
||||
Функции, начинающиеся с `"get"` -- получают, и т.п.:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
getAge(..) // get, "получает" возраст
|
||||
calcD(..) // calc, "вычисляет" дискриминант
|
||||
createForm(..) // create, "создает" форму
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ alert( sayHi ); // выведет код функции
|
|||
**Функцию можно скопировать в другую переменную:**
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
function sayHi() { // (1)
|
||||
alert( "Привет" );
|
||||
}
|
||||
|
|
@ -140,9 +140,13 @@ var sayHi = function(name) {
|
|||
var age = +prompt("Сколько вам лет?", 20);
|
||||
|
||||
if (age >= 18) {
|
||||
function sayHi() { alert('Прошу вас!'); }
|
||||
function sayHi() {
|
||||
alert( 'Прошу вас!' );
|
||||
}
|
||||
} else {
|
||||
function sayHi() { alert('До 18 нельзя'); }
|
||||
function sayHi() {
|
||||
alert( 'До 18 нельзя' );
|
||||
}
|
||||
}
|
||||
|
||||
sayHi();
|
||||
|
|
@ -158,8 +162,13 @@ sayHi();
|
|||
<li>Дальше, во время выполнения, объявления Function Declaration игнорируются (они уже были обработаны). Это как если бы код был таким:
|
||||
|
||||
```js
|
||||
function sayHi() { alert('Прошу вас!'); }
|
||||
function sayHi() { alert('До 18 нельзя'); }
|
||||
function sayHi() {
|
||||
alert( 'Прошу вас!' );
|
||||
}
|
||||
|
||||
function sayHi() {
|
||||
alert( 'До 18 нельзя' );
|
||||
}
|
||||
|
||||
var age = 20;
|
||||
|
||||
|
|
@ -191,9 +200,13 @@ var age = prompt('Сколько вам лет?');
|
|||
var sayHi;
|
||||
|
||||
if (age >= 18) {
|
||||
sayHi = function() { alert('Прошу Вас!'); }
|
||||
sayHi = function() {
|
||||
alert( 'Прошу Вас!' );
|
||||
}
|
||||
} else {
|
||||
sayHi = function() { alert('До 18 нельзя'); }
|
||||
sayHi = function() {
|
||||
alert( 'До 18 нельзя' );
|
||||
}
|
||||
}
|
||||
|
||||
sayHi();
|
||||
|
|
@ -202,7 +215,7 @@ sayHi();
|
|||
Или даже так:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var age = prompt('Сколько вам лет?');
|
||||
|
||||
var sayHi = (age >= 18) ?
|
||||
|
|
@ -250,7 +263,7 @@ ask("Вы согласны?", showOk, showCancel);
|
|||
Здесь обратим внимание на то, что то же самое можно написать более коротко:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
function ask(question, yes, no) {
|
||||
if (confirm(question)) yes()
|
||||
else no();
|
||||
|
|
@ -340,6 +353,7 @@ alert(result); // 3
|
|||
Сравните по читаемости:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
// Function Expression
|
||||
var f = function() { ... }
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
Напишите функцию `sumTo(n)`, которая для данного `n` вычисляет сумму чисел от 1 до `n`, например:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
sumTo(1) = 1
|
||||
sumTo(2) = 2 + 1 = 3
|
||||
sumTo(3) = 3 + 2 + 1 = 6
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ alert( fib(7) ); // 13
|
|||
Это потому, что функция порождает обширное дерево вложенных вызовов. При этом ряд значений вычисляются много раз. Например, посмотрим на отрывок вычислений:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
...
|
||||
fib(5) = fib(4) + fib(3)
|
||||
fib(4) = fib(3) + fib(2)
|
||||
|
|
@ -35,6 +36,7 @@ fib(4) = fib(3) + fib(2)
|
|||
Будем идти по формуле слева-направо:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
var a = 1, b = 1; // начальные значения
|
||||
var c = a + b; // 2
|
||||
|
||||
|
|
@ -47,6 +49,7 @@ a b c
|
|||
Теперь следующий шаг, присвоим `a` и `b` текущие 2 числа и получим новое следующее в `c`:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
a = b, b = c;
|
||||
c = a + b;
|
||||
|
||||
|
|
@ -59,6 +62,7 @@ c = a + b;
|
|||
Следующий шаг даст нам еще одно число последовательности:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
a = b, b = c;
|
||||
c = a + b;
|
||||
|
||||
|
|
@ -77,7 +81,8 @@ P.S. Этот подход к вычислению называется [дин
|
|||
```js
|
||||
//+ run
|
||||
function fib(n) {
|
||||
var a = 1, b = 1;
|
||||
var a = 1,
|
||||
b = 1;
|
||||
for (var i = 3; i <= n; i++) {
|
||||
var c = a + b;
|
||||
a = b;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
Напишите функцию `fib(n)`, которая возвращает `n-е` число Фибоначчи. Пример работы:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
function fib(n) { /* ваш код */ }
|
||||
|
||||
alert( fib(3) ); // 2
|
||||
|
|
|
|||
|
|
@ -69,9 +69,11 @@
|
|||
<!--+ run height=100 -->
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Начинаем считать:</p>
|
||||
|
|
@ -87,6 +89,7 @@
|
|||
<p>Кролики посчитаны!</p>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
**Первый код выведет `function ...`, второй -- ошибку во всех браузерах, кроме IE8-.**
|
||||
|
||||
```js
|
||||
//+ run untrusted
|
||||
//+ run untrusted no-beautify
|
||||
// обычное объявление функции (Function Declaration)
|
||||
function g() { return 1; };
|
||||
|
||||
|
|
@ -11,7 +11,7 @@ alert(g); // функция
|
|||
Во втором коде скобки есть, значит функция внутри является не `Function Declaration`, а частью выражения, то есть `Named Function Expression`. Его имя видно только внутри, снаружи переменная `g` не определена.
|
||||
|
||||
```js
|
||||
//+ run untrusted
|
||||
//+ run untrusted no-beautify
|
||||
// Named Function Expression!
|
||||
(function g() { return 1; });
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
Каков будет результат выполнения кода?
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
function g() { return 1; }
|
||||
|
||||
alert(g);
|
||||
|
|
@ -13,6 +14,7 @@ alert(g);
|
|||
А такого? Будет ли разница, если да -- почему?
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
(function g() { return 1; });
|
||||
|
||||
alert(g);
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ var f = function (...) { /* тело функции */ };
|
|||
Именованное с именем `sayHi`:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
var f = function *!*sayHi*/!*(...) { /* тело функции */ };
|
||||
```
|
||||
|
||||
|
|
@ -91,7 +92,7 @@ alert( g(5) ); // запуск функции с новым именем - ош
|
|||
Для того, чтобы функция всегда надёжно работала, объявим её как Named Function Expression:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var f = function *!*factorial*/!*(n) {
|
||||
return n ? n**!*factorial*/!*(n-1) : 1;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,14 +13,14 @@
|
|||
Операторы разделяются точкой с запятой:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
alert('Привет'); alert('Мир');
|
||||
```
|
||||
|
||||
Как правило, перевод строки тоже подразумевает точку с запятой. Так тоже будет работать:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
alert('Привет')
|
||||
alert('Мир')
|
||||
```
|
||||
|
|
@ -28,7 +28,7 @@ alert('Мир')
|
|||
...Однако, иногда JavaScript не вставляет точку с запятой. Например:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var a = 2
|
||||
+3
|
||||
|
||||
|
|
@ -66,6 +66,7 @@ x = "Петя";
|
|||
<li>Есть 5 "примитивных" типов и объекты:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
x = 1; // число
|
||||
x = "Тест"; // строка, кавычки могут быть одинарные или двойные
|
||||
x = true; // булево значение true/false
|
||||
|
|
@ -188,7 +189,7 @@ alert( true > 0 ); // true
|
|||
Например, забавное следствие этих правил для `null`:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
alert( null > 0 ); // false, т.к. null преобразовано к 0
|
||||
alert( null >= 0 ); // true, т.к. null преобразовано к 0
|
||||
alert( null == 0 ); // false, в стандарте явно указано, что null равен лишь undefined
|
||||
|
|
@ -333,7 +334,7 @@ alert( sum(1, 2) ); // 3
|
|||
<li>Функция без `return` считается возвращающей `undefined`. Вызов `return` без значения также возвращает `undefined`:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
function f() { }
|
||||
alert( f() ); // undefined
|
||||
```
|
||||
|
|
|
|||
|
|
@ -11,14 +11,14 @@
|
|||
Например, вместо одного вызова `alert` сделаем два:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
alert('Привет'); alert('Мир');
|
||||
```
|
||||
|
||||
Как правило, каждая команда пишется на отдельной строке -- так код лучше читается:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
alert('Привет');
|
||||
alert('Мир');
|
||||
```
|
||||
|
|
@ -30,7 +30,7 @@ alert('Мир');
|
|||
Так тоже будет работать:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
alert('Привет')
|
||||
alert('Мир')
|
||||
```
|
||||
|
|
@ -42,7 +42,7 @@ alert('Мир')
|
|||
Например, запустите этот код:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
alert(3 +
|
||||
1
|
||||
+ 2);
|
||||
|
|
@ -69,7 +69,7 @@ alert(3 +
|
|||
Важно, что вот такой код уже работать не будет:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
alert("Сейчас будет ошибка")
|
||||
[1, 2].forEach(alert)
|
||||
```
|
||||
|
|
@ -130,7 +130,7 @@ alert('Мир');
|
|||
В этом коде будет ошибка:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
/*
|
||||
/* вложенный комментарий ?!? */
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ var message = 'Hello!';
|
|||
Можно даже объявить несколько переменных сразу:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
var user = 'John', age = 25, message = 'Hello';
|
||||
```
|
||||
|
||||
|
|
@ -123,6 +124,7 @@ alert($ + _); // 3
|
|||
А такие переменные были бы неправильными:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
var 1a; // начало не может быть цифрой
|
||||
|
||||
var my-name; // дефис '-' не является разрешенным символом
|
||||
|
|
@ -152,7 +154,7 @@ alert(имя); // "Вася"
|
|||
Например, такой пример выдаст синтаксическую ошибку:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var return = 5; // ошибка
|
||||
alert(return);
|
||||
```
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@
|
|||
|
||||
Что такое это "развитие"? Это когда я вчера написал код, а сегодня (или спустя неделю) прихожу и хочу его поменять. Например, вывести сообщение не так, а эдак... Обработать товары по-другому, добавить функционал.. А где у меня там сообщение хранится? А где товар?...
|
||||
|
||||
**Гораздо проще найти нужные данные, если они правильно помечены, то есть когда переменная названа *правильно*.**
|
||||
Гораздо проще найти нужные данные, если они правильно помечены, то есть когда переменная названа *правильно*.
|
||||
|
||||
## Правила именования
|
||||
|
||||
<ul>
|
||||
<li>**Правило 1.**
|
||||
|
|
@ -81,19 +83,19 @@ var border_left_width;
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
Позвольте поделиться одним небольшим секретом, который позволит улучшить ваши названия переменных и сэкономит вам время.
|
||||
Позвольте поделиться одним небольшим секретом, который очень прост, но позволит улучшить названия переменных и сэкономит время.
|
||||
|
||||
Бывает так, что вы написали код, через некоторое время к нему возвращаетесь, и вам надо что-то поправить. Например, изменить какую-то рамку `border`...
|
||||
Бывает так, что, написав код, мы через некоторое время к нему возвращаемся, надо что-то поправить. И мы примерно помним, что переменная, в которой хранится нужное вам значение, называется... Ну, скажем, `borderLeftWidth`. Мы ищем в её в коде, не находим, но, разобравшись, обнаруживаем, что на самом деле переменная называлась вот так: `leftBorderWidth`.
|
||||
|
||||
...И вы помните, что переменная, в которой хранится нужное вам значение, называется примерно так: `borderLeftWidth`. Вы ищете ее в коде, не находите, разбираетесь, и обнаруживаете, что на самом деле переменная называлась вот так: `leftBorderWidth`. После чего вносите нужные правки.
|
||||
**Если мы ищем переменную с одним именем, а находим -- с другим, то зачастую самый лучший ход -- это *переименовать* переменную, чтобы имя было тем, которое вы искали.**
|
||||
|
||||
**Если вы искали переменную с одним именем, а нашли -- с другим, то самый лучший ход -- это *переименовать* переменную, чтобы имя было тем, которое вы искали.**
|
||||
|
||||
То есть, у вас в коде `leftBorderWidth`, а вы ее переименовываете на `borderLeftWidth`.
|
||||
То есть, в коде `leftBorderWidth`, а мы её переименуем на ту, которую искали: `borderLeftWidth`.
|
||||
|
||||
Зачем? Дело в том, что в следующий раз, когда вы захотите что-то поправить, то вы будете искать по тому же самому имени. Соответственно, это сэкономит вам время.
|
||||
|
||||
Кроме того, поскольку именно это имя переменной пришло вам в голову -- скорее всего, оно больше соответствует хранимым там данным, чем то, которое вы придумали изначально. Исключения бывают, но в любом случае -- такое несовпадение -- это повод задуматься.
|
||||
Есть причина и поважнее. Поскольку именно это имя переменной пришло в голову -- скорее всего, оно больше соответствует хранимым там данным, чем то, которое было мы придумали изначально. Исключения бывают, но в любом случае -- такое несовпадение -- это повод задуматься.
|
||||
|
||||
Чтобы удобно переименовывать переменную, нужно использовать [хороший редактор JavaScript](/editors), тогда этот процесс будет очень простым и быстрым.
|
||||
|
||||
[smart header="Если коротко..."]
|
||||
Смысл имени переменной -- это "имя на коробке", по которому мы сможем максимально быстро находить нужные нам данные.
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@ str = 'Одинарные кавычки тоже подойдут';
|
|||
Как правило, такой тип используется для хранения значения типа да/нет, например:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
var checked = true; // поле формы помечено галочкой
|
||||
checked = false; // поле формы не содержит галочки
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# Разъяснения
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var a = 1, b = 1, c, d;
|
||||
|
||||
// префиксная форма сначала увеличивает a до 2, а потом возвращает
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
Посмотрите, понятно ли вам, почему код ниже работает именно так?
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var a = 1, b = 1, c, d;
|
||||
|
||||
c = ++a; alert(c); // 2
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ alert( x ); // -1, применили унарный минус
|
|||
<li>*Бинарным* называется оператор, который применяется к двум операндам. Тот же минус существует и в бинарной форме:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var x = 1, y = 3;
|
||||
alert( y - x ); // 2, бинарный минус
|
||||
```
|
||||
|
|
@ -223,7 +223,7 @@ alert(6 % 3); // 0, остаток от деления 6 на 3
|
|||
<li>**Инкремент** `++` увеличивает на 1:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var i = 2;
|
||||
i++; // более короткая запись для i = i + 1.
|
||||
alert(i); // 3
|
||||
|
|
@ -233,7 +233,7 @@ alert(i); // 3
|
|||
<li>**Декремент** `--` уменьшает на 1:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var i = 2;
|
||||
i--; // более короткая запись для i = i - 1.
|
||||
alert(i); // 1
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
Вы могли заметить следующие недостатки, сверху-вниз:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
function pow(x,n) // <- отсутствует пробел между аргументами
|
||||
{ // <- фигурная скобка на отдельной строке
|
||||
var result=1; // <- нет пробелов вокруг знака =
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
Какие недостатки вы видите в стиле этого примера?
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
function pow(x,n)
|
||||
{
|
||||
var result=1;
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ if (n < 0) {
|
|||
|
||||
<!--
|
||||
```js
|
||||
//+ no-beautify
|
||||
if (n < 0) {alert('Степень ' + n + ' не поддерживается');}
|
||||
|
||||
|
||||
|
|
@ -79,6 +80,7 @@ if (n < 0) {
|
|||
|
||||
Например, выровнять аргументы относительно открывающей скобки:
|
||||
```js
|
||||
//+ no-beautify
|
||||
show("Строки" +
|
||||
" выровнены" +
|
||||
" строго" +
|
||||
|
|
@ -99,7 +101,6 @@ function pow(x, n) {
|
|||
// <--
|
||||
return result;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Вставляйте дополнительный перевод строки туда, где это сделает код более читаемым. Не должно быть более 9 строк кода подряд без вертикального отступа.
|
||||
|
|
@ -209,8 +210,7 @@ function isEven(n) { // проверка чётности
|
|||
|
||||
```js
|
||||
function showPrimes(n) {
|
||||
nextPrime:
|
||||
for (var i=2; i<n; i++) {
|
||||
nextPrime: for (var i = 2; i < n; i++) {
|
||||
|
||||
for (var j = 2; j < i; j++) {
|
||||
if (i % j == 0) continue nextPrime;
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ describe("любое число, кроме нуля, в степени 0 рав
|
|||
И не забудем добавить отдельный тест для нуля:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
...
|
||||
it("ноль в нулевой степени даёт NaN", function() {
|
||||
assert( isNaN(pow(0,0), "0 в степени 0 не NaN");
|
||||
|
|
|
|||
|
|
@ -279,6 +279,7 @@ describe("pow", function() {
|
|||
Например:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
describe("Тест", function() {
|
||||
|
||||
before(function() { alert("Начало тестов"); });
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ alert( 12.34.toFixed(1) ); // 12.3
|
|||
...Но если число целое, то будет проблема:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
alert(12.toFixed(1)); // ошибка!
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
Например:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
function go(a,b) {
|
||||
alert("a="+a+", b="+b);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
Например:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
var date = new Date(2012,0,3); // 3 января 2012
|
||||
alert( getWeekDay(date) ); // Должно вывести 'вт'
|
||||
```
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
День нужно возвратить в европейской нумерации, т.е. понедельник имеет номер 1, вторник номер 2, ..., воскресенье - номер 7.
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
var date = new Date(2012, 0, 3); // 3 янв 2012
|
||||
alert( getLocalDay(date) ); // вторник, выведет 2
|
||||
```
|
||||
|
|
|
|||
|
|
@ -261,8 +261,13 @@ function walkLength(arr) {
|
|||
var arr = [];
|
||||
for (var i = 0; i < 1000; i++) arr[i] = 0;
|
||||
|
||||
function walkIn(arr) { for(var key in arr) arr[i]++; }
|
||||
function walkLength(arr) { for(var i=0; i<arr.length; i++) arr[i]++; }
|
||||
function walkIn(arr) {
|
||||
for (var key in arr) arr[i]++;
|
||||
}
|
||||
|
||||
function walkLength(arr) {
|
||||
for (var i = 0; i < arr.length; i++) arr[i]++;
|
||||
}
|
||||
|
||||
function bench(f) {
|
||||
var date = new Date();
|
||||
|
|
@ -283,8 +288,13 @@ alert('Время walkLength: ' + bench(walkLength) + 'мс');
|
|||
var arr = [];
|
||||
for (var i = 0; i < 1000; i++) arr[i] = 0;
|
||||
|
||||
function walkIn(arr) { for(var key in arr) arr[i]++; }
|
||||
function walkLength(arr) { for(var i=0; i<arr.length; i++) arr[i]++; }
|
||||
function walkIn(arr) {
|
||||
for (var key in arr) arr[i]++;
|
||||
}
|
||||
|
||||
function walkLength(arr) {
|
||||
for (var i = 0; i < arr.length; i++) arr[i]++;
|
||||
}
|
||||
|
||||
function bench(f) {
|
||||
var date = new Date();
|
||||
|
|
@ -294,7 +304,8 @@ function bench(f) {
|
|||
|
||||
*!*
|
||||
// bench для каждого теста запустим много раз, чередуя
|
||||
var timeIn = 0, timeLength = 0;
|
||||
var timeIn = 0,
|
||||
timeLength = 0;
|
||||
for (var i = 0; i < 100; i++) {
|
||||
timeIn += bench(walkIn);
|
||||
timeLength += bench(walkLength);
|
||||
|
|
@ -330,8 +341,13 @@ alert('Время walkLength: ' +timeLength + 'мс');
|
|||
var arr = [];
|
||||
for (var i = 0; i < 1000; i++) arr[i] = 0;
|
||||
|
||||
function walkIn(arr) { for(var key in arr) arr[i]++; }
|
||||
function walkLength(arr) { for(var i=0; i<arr.length; i++) arr[i]++; }
|
||||
function walkIn(arr) {
|
||||
for (var key in arr) arr[i]++;
|
||||
}
|
||||
|
||||
function walkLength(arr) {
|
||||
for (var i = 0; i < arr.length; i++) arr[i]++;
|
||||
}
|
||||
|
||||
function bench(f) {
|
||||
for (var i = 0; i < 10000; i++) f(arr);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<li>При операциях, когда необходимо получить окончательный результат -- округлять до 2го знака после запятой. Все, что дальше -- ошибка округления:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var price1 = 0.1, price2 = 0.2;
|
||||
alert( +(price1 + price2).toFixed(2) );
|
||||
```
|
||||
|
|
|
|||
|
|
@ -9,7 +9,9 @@ function fibBinet(n) {
|
|||
}
|
||||
|
||||
function fib(n) {
|
||||
var a=1, b=0, x;
|
||||
var a = 1,
|
||||
b = 0,
|
||||
x;
|
||||
for (i = 0; i < n; i++) {
|
||||
x = a + b;
|
||||
a = b
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@
|
|||
|
||||
```js
|
||||
function fib(n) {
|
||||
var a=1, b=0, x;
|
||||
var a = 1,
|
||||
b = 0,
|
||||
x;
|
||||
for (i = 0; i < n; i++) {
|
||||
x = a + b;
|
||||
a = b
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
|
||||
```js
|
||||
//+ run
|
||||
var min=5, max = 10;
|
||||
var min = 5,
|
||||
max = 10;
|
||||
|
||||
alert( min + Math.random() * (max - min) );
|
||||
```
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ alert( randomInteger(1, 3) );
|
|||
Это происходит из-за того, что `Math.round()` получает разнообразные случайные числа из интервала от `1` до `3`, но при округлении до ближайшего целого получится, что:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
значения из диапазона 1 ... 1.49999.. станут 1
|
||||
значения из диапазона 1.5 ... 2.49999.. станут 2
|
||||
значения из диапазона 2.5 ... 2.99999.. станут 3
|
||||
|
|
@ -55,6 +56,7 @@ alert( randomInteger(5, 10) );
|
|||
Тогда `Math.floor()` округлит их так:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
1 ... 1.999+ станет 1
|
||||
2 ... 2.999+ станет 2
|
||||
3 ... 3.999+ станет 3
|
||||
|
|
|
|||
|
|
@ -349,7 +349,7 @@ alert( n.toString(36) ); // kf12oi
|
|||
</dl>
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
alert( Math.floor(3.1) ); // 3
|
||||
alert( Math.ceil(3.1) ); // 4
|
||||
alert( Math.round(3.1) ); // 3
|
||||
|
|
|
|||
|
|
@ -106,7 +106,9 @@ alert(person.lalala); // undefined, нет свойства с ключом lala
|
|||
|
||||
```js
|
||||
//+ run
|
||||
var person = { name: "Василий" };
|
||||
var person = {
|
||||
name: "Василий"
|
||||
};
|
||||
|
||||
alert( person.lalala === undefined ); // true, свойства нет
|
||||
alert( person.name === undefined ); // false, свойство есть.
|
||||
|
|
@ -185,7 +187,9 @@ person.любимый стиль музыки = 'Джаз'; // ??? ошибка
|
|||
|
||||
```js
|
||||
//+ run
|
||||
var person = { age: 25 };
|
||||
var person = {
|
||||
age: 25
|
||||
};
|
||||
var key = 'age';
|
||||
|
||||
alert( person[key] ); // выведет person['age']
|
||||
|
|
@ -275,6 +279,7 @@ var user = {
|
|||
Например, есть много объектов с полями `name` и `age`:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
{name: "Вася", age: 25}
|
||||
{name: "Петя", age: 22}
|
||||
{name: "Маша", age: 19}
|
||||
|
|
@ -284,6 +289,7 @@ var user = {
|
|||
Для их эффективного хранения будет создана структура, которая описывает данный вид объектов. Выглядеть она будет примерно так: `<string name, number age>`. А сами объекты будут представлены в памяти только данными:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
<структура: string name, number age>
|
||||
Вася 25
|
||||
Петя 22
|
||||
|
|
|
|||
|
|
@ -26,7 +26,9 @@ var phrase = message;
|
|||
Вот как выглядит переменная, которой присвоен объект:
|
||||
|
||||
```js
|
||||
var user = { name: "Вася" };
|
||||
var user = {
|
||||
name: "Вася"
|
||||
};
|
||||
```
|
||||
|
||||
<img src="variable-contains-reference.svg">
|
||||
|
|
@ -38,6 +40,7 @@ var user = { name: "Вася" };
|
|||
Например:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
var user = { name: "Вася" }; // в переменной - ссылка
|
||||
|
||||
var admin = user; // скопировали ссылку
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
Например, для `[-1, 2, 3, -9, 11]`:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
// Начиная с -1:
|
||||
-1
|
||||
-1 + 2
|
||||
|
|
@ -76,7 +77,8 @@ alert( getMaxSubSum([100, -9, 2, -3, 5]) ); // 100
|
|||
```js
|
||||
//+ run
|
||||
function getMaxSubSum(arr) {
|
||||
var maxSum = 0, partialSum = 0;
|
||||
var maxSum = 0,
|
||||
partialSum = 0;
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
partialSum += arr[i];
|
||||
maxSum = Math.max(maxSum, partialSum);
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
Массив в результате каждого шага:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
Джаз, Блюз
|
||||
Джаз, Блюз, Рок-н-Ролл
|
||||
Джаз, Классика, Рок-н-Ролл
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ alert(fruits); // Яблоко,Апельсин,Груша
|
|||
В том числе, строки, числа, объекты, вот например:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
// микс значений
|
||||
var arr = [ 1, 'Имя', { name: 'Петя' }, true ];
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,9 @@ function addClass(obj, cls) {
|
|||
obj.className = classes.join(' '); // и обновить свойство
|
||||
}
|
||||
|
||||
var obj = { className: 'open menu' };
|
||||
var obj = {
|
||||
className: 'open menu'
|
||||
};
|
||||
|
||||
addClass(obj, 'new');
|
||||
addClass(obj, 'open');
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@ function unique(arr) {
|
|||
}
|
||||
|
||||
var strings = ["кришна", "кришна", "харе", "харе",
|
||||
"харе", "харе", "кришна", "кришна", "8-()"];
|
||||
"харе", "харе", "кришна", "кришна", "8-()"
|
||||
];
|
||||
|
||||
alert( unique(strings) ); // кришна, харе, 8-()
|
||||
```
|
||||
|
|
@ -73,7 +74,8 @@ function unique(arr) {
|
|||
}
|
||||
|
||||
var strings = ["кришна", "кришна", "харе", "харе",
|
||||
"харе", "харе", "кришна", "кришна", "8-()"];
|
||||
"харе", "харе", "кришна", "кришна", "8-()"
|
||||
];
|
||||
|
||||
alert( unique(strings) ); // кришна, харе, 8-()
|
||||
```
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@ function unique(arr) {
|
|||
}
|
||||
|
||||
var strings = ["кришна", "кришна", "харе", "харе",
|
||||
"харе", "харе", "кришна", "кришна", "8-()"];
|
||||
"харе", "харе", "кришна", "кришна", "8-()"
|
||||
];
|
||||
|
||||
alert( unique(strings) ); // кришна, харе, 8-()
|
||||
```
|
||||
|
|
|
|||
|
|
@ -17,7 +17,9 @@ function removeClass(obj, cls) {
|
|||
|
||||
}
|
||||
|
||||
var obj = { className: 'open menu menu' }
|
||||
var obj = {
|
||||
className: 'open menu menu'
|
||||
}
|
||||
|
||||
removeClass(obj, 'blabla');
|
||||
removeClass(obj, 'menu')
|
||||
|
|
|
|||
|
|
@ -20,7 +20,9 @@ removeClass(obj, 'blabla'); // без изменений (нет такого к
|
|||
P.S. Дополнительное усложнение. Функция должна корректно обрабатывать дублирование класса в строке:
|
||||
|
||||
```js
|
||||
obj = { className: 'my menu menu' };
|
||||
obj = {
|
||||
className: 'my menu menu'
|
||||
};
|
||||
removeClass(obj, 'menu');
|
||||
alert( obj.className ); // 'my'
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
Для сортировки объявим и передадим в `sort` анонимную функцию, которая сравнивает объекты по полю `age`:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
*!*
|
||||
// Наша функция сравнения
|
||||
function compareAge(personA, personB) {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
Например:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
var vasya = { name: "Вася", age: 23 };
|
||||
var masha = { name: "Маша", age: 18 };
|
||||
var vovochka = { name: "Вовочка", age: 6 };
|
||||
|
|
|
|||
|
|
@ -3,10 +3,14 @@
|
|||
```js
|
||||
//+ run
|
||||
var list = {
|
||||
value: 1, next: {
|
||||
value: 2, next: {
|
||||
value: 3, next: {
|
||||
value: 4, next: null
|
||||
value: 1,
|
||||
next: {
|
||||
value: 2,
|
||||
next: {
|
||||
value: 3,
|
||||
next: {
|
||||
value: 4,
|
||||
next: null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -49,10 +53,14 @@ function printList(list) {
|
|||
```js
|
||||
//+ run
|
||||
var list = {
|
||||
value: 1, next: {
|
||||
value: 2, next: {
|
||||
value: 3, next: {
|
||||
value: 4, next: null
|
||||
value: 1,
|
||||
next: {
|
||||
value: 2,
|
||||
next: {
|
||||
value: 3,
|
||||
next: {
|
||||
value: 4,
|
||||
next: null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -78,10 +86,14 @@ printList(list);
|
|||
```js
|
||||
//+ run
|
||||
var list = {
|
||||
value: 1, next: {
|
||||
value: 2, next: {
|
||||
value: 3, next: {
|
||||
value: 4, next: null
|
||||
value: 1,
|
||||
next: {
|
||||
value: 2,
|
||||
next: {
|
||||
value: 3,
|
||||
next: {
|
||||
value: 4,
|
||||
next: null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -104,10 +116,14 @@ printReverseList(list);
|
|||
```js
|
||||
//+ run
|
||||
var list = {
|
||||
value: 1, next: {
|
||||
value: 2, next: {
|
||||
value: 3, next: {
|
||||
value: 4, next: null
|
||||
value: 1,
|
||||
next: {
|
||||
value: 2,
|
||||
next: {
|
||||
value: 3,
|
||||
next: {
|
||||
value: 4,
|
||||
next: null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ var list = {
|
|||
Альтернативный способ создания:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
var list = { value: 1 };
|
||||
list.next = { value: 2 };
|
||||
list.next.next = { value: 3 };
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
То есть:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
для arr = [ 1, 2, 3, 4, 5 ]
|
||||
getSums( arr ) = [ 1, 1+2, 1+2+3, 1+2+3+4, 1+2+3+4+5 ] = [ 1, 3, 6, 10, 15 ]
|
||||
```
|
||||
|
|
|
|||
|
|
@ -132,7 +132,9 @@ var arr = [1, 2, 3, 4, 5]
|
|||
|
||||
// для каждого элемента массива запустить функцию,
|
||||
// промежуточный результат передавать первым аргументом далее
|
||||
var result = arr.reduce(function(sum, current) { return sum + current; }, 0);
|
||||
var result = arr.reduce(function(sum, current) {
|
||||
return sum + current;
|
||||
}, 0);
|
||||
|
||||
alert( result ); // 15
|
||||
```
|
||||
|
|
@ -203,7 +205,9 @@ alert(result); // 15
|
|||
var arr = [1, 2, 3, 4, 5]
|
||||
|
||||
// убрали 0 в конце
|
||||
var result = arr.reduce(function(sum, current) { return sum + current });
|
||||
var result = arr.reduce(function(sum, current) {
|
||||
return sum + current
|
||||
});
|
||||
|
||||
alert( result ); // 15
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
```js
|
||||
//+ run
|
||||
|
||||
*!*
|
||||
say('Вася'); // Что выведет? Не будет ли ошибки?
|
||||
*/!*
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
Что будет, если вызов `sayHi('Вася');` стоит в самом-самом начале, в первой строке кода?
|
||||
|
||||
```js
|
||||
|
||||
*!*
|
||||
say('Вася'); // Что выведет? Не будет ли ошибки?
|
||||
*/!*
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
Результат - **ошибка**. Попробуйте:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var a = 5
|
||||
|
||||
(function() {
|
||||
|
|
@ -14,7 +14,7 @@ var a = 5
|
|||
JavaScript воспринимает этот код как если бы перевода строки не было:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var a = 5(function() {
|
||||
alert(a)
|
||||
})()
|
||||
|
|
@ -25,7 +25,7 @@ var a = 5(function() {
|
|||
Если точку с запятой поставить, все будет хорошо:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var a = 5;
|
||||
|
||||
(function() {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
Каков будет результат выполнения кода? Почему?
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
var a = 5
|
||||
|
||||
(function() {
|
||||
|
|
|
|||
|
|
@ -95,6 +95,7 @@ function sayHi() {
|
|||
|
||||
В примере выше таким окружением является `window`, так что создаётся свойство:
|
||||
```js
|
||||
//+ no-beautify
|
||||
sayHi.[[Scope]] = window
|
||||
```
|
||||
|
||||
|
|
@ -122,7 +123,7 @@ sayHi.[[Scope]] = window
|
|||
Например, в коде ниже функция `sayHi` берёт `phrase` из внешней области:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
|
||||
var phrase = 'Привет';
|
||||
|
||||
|
|
@ -175,6 +176,7 @@ sayHiBye("Вася", "Пупкин"); // Привет, Вася Пупкин ;
|
|||
Вложенные функции получают `[[Scope]]` так же, как и глобальные. В нашем случае:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
getFullName.[[Scope]] = объект переменных текущего запуска sayHiBye
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ getFunc()(); // *!*2*/!*, из LexicalEnvironment функции getFunc
|
|||
Ну а если внутри функции, создаваемой через `new Function`, всё же нужно использовать какие-то данные -- без проблем, нужно всего лишь предусмотреть соответствующие параметры и передавать их явным образом, например так:
|
||||
|
||||
```js
|
||||
//+ run untrusted refresh
|
||||
//+ run untrusted refresh no-beautify
|
||||
*!*
|
||||
var sum = new Function('a, b', ' return a + b; ');
|
||||
*/!*
|
||||
|
|
|
|||
|
|
@ -22,7 +22,9 @@ buffer(' Нужно!');
|
|||
alert( buffer() ); // 'Замыкания Использовать Нужно!'
|
||||
|
||||
var buffer2 = makeBuffer();
|
||||
buffer2(0); buffer2(1); buffer2(0);
|
||||
buffer2(0);
|
||||
buffer2(1);
|
||||
buffer2(0);
|
||||
|
||||
alert( buffer2() ); // '010'
|
||||
```
|
||||
|
|
|
|||
|
|
@ -35,7 +35,9 @@ alert( buffer() ); // Замыкания Использовать Нужно!
|
|||
|
||||
```js
|
||||
var buffer = makeBuffer();
|
||||
buffer(0); buffer(1); buffer(0);
|
||||
buffer(0);
|
||||
buffer(1);
|
||||
buffer(0);
|
||||
|
||||
alert( buffer() ); // '010'
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,11 +2,19 @@
|
|||
|
||||
```js
|
||||
//+ run
|
||||
var users = [
|
||||
{ name: "Вася", surname: 'Иванов', age: 20 },
|
||||
{ name: "Петя", surname: 'Чапаев', age: 25 },
|
||||
{ name: "Маша", surname: 'Медведева', age: 18 }
|
||||
];
|
||||
var users = [{
|
||||
name: "Вася",
|
||||
surname: 'Иванов',
|
||||
age: 20
|
||||
}, {
|
||||
name: "Петя",
|
||||
surname: 'Чапаев',
|
||||
age: 25
|
||||
}, {
|
||||
name: "Маша",
|
||||
surname: 'Медведева',
|
||||
age: 18
|
||||
}];
|
||||
|
||||
*!*
|
||||
function byField(field) {
|
||||
|
|
@ -17,9 +25,13 @@ function byField(field) {
|
|||
*/!*
|
||||
|
||||
users.sort(byField('name'));
|
||||
users.forEach(function(user) { alert(user.name); });
|
||||
users.forEach(function(user) {
|
||||
alert( user.name );
|
||||
});
|
||||
|
||||
users.sort(byField('age'));
|
||||
users.forEach(function(user) { alert(user.name); });
|
||||
users.forEach(function(user) {
|
||||
alert( user.name );
|
||||
});
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,11 +5,19 @@
|
|||
У нас есть массив объектов:
|
||||
|
||||
```js
|
||||
var users = [
|
||||
{ name: "Вася", surname: 'Иванов', age: 20 },
|
||||
{ name: "Петя", surname: 'Чапаев', age: 25 },
|
||||
{ name: "Маша", surname: 'Медведева', age: 18 }
|
||||
];
|
||||
var users = [{
|
||||
name: "Вася",
|
||||
surname: 'Иванов',
|
||||
age: 20
|
||||
}, {
|
||||
name: "Петя",
|
||||
surname: 'Чапаев',
|
||||
age: 25
|
||||
}, {
|
||||
name: "Маша",
|
||||
surname: 'Медведева',
|
||||
age: 18
|
||||
}];
|
||||
```
|
||||
|
||||
Обычно сортировка по нужному полю происходит так:
|
||||
|
|
@ -30,10 +38,14 @@ users.sort(function(a, b) {
|
|||
|
||||
```js
|
||||
users.sort(byField('name'));
|
||||
users.forEach(function(user) { alert(user.name); }); // Вася, Маша, Петя
|
||||
users.forEach(function(user) {
|
||||
alert( user.name );
|
||||
}); // Вася, Маша, Петя
|
||||
|
||||
users.sort(byField('age'));
|
||||
users.forEach(function(user) { alert(user.name); }); // Маша, Вася, Петя
|
||||
users.forEach(function(user) {
|
||||
alert( user.name );
|
||||
}); // Маша, Вася, Петя
|
||||
```
|
||||
|
||||
То есть, вместо того, чтобы каждый раз писать в `sort` `function...` -- будем использовать `byField(...)`
|
||||
|
|
|
|||
|
|
@ -17,7 +17,9 @@ function filter(arr, func) {
|
|||
|
||||
var arr = [1, 2, 3, 4, 5, 6, 7];
|
||||
|
||||
alert( filter(arr, function(a) { return a % 2 == 0; }) ); // 2, 4, 6
|
||||
alert(filter(arr, function(a) {
|
||||
return a % 2 == 0;
|
||||
})); // 2, 4, 6
|
||||
```
|
||||
|
||||
# Фильтр inBetween
|
||||
|
|
|
|||
|
|
@ -18,7 +18,9 @@
|
|||
/* .. ваш код для filter, inBetween, inArray */
|
||||
var arr = [1, 2, 3, 4, 5, 6, 7];
|
||||
|
||||
alert( filter(arr, function(a) { return a % 2 == 0 }) ); // 2,4,6
|
||||
alert(filter(arr, function(a) {
|
||||
return a % 2 == 0
|
||||
})); // 2,4,6
|
||||
|
||||
alert( filter(arr, inBetween(3, 6)) ); // 3,4,5,6
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ var shooters = [];
|
|||
При этом каждый элемент массива -- это функция, так что в итоге после цикла массив будет таким:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
shooters = [
|
||||
function () { alert(i); },
|
||||
function () { alert(i); },
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@ function work() {
|
|||
Можно показать это другим способом, например поставив перед функцией оператор:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
+function() {
|
||||
alert('Вызов на месте');
|
||||
}();
|
||||
|
|
@ -178,10 +178,15 @@ function work() {
|
|||
|
||||
<p>Функция <code>_.defaults()</code> добавляет отсутствующие свойства.</p>
|
||||
<script>
|
||||
var user = { name: 'Вася' };
|
||||
var user = {
|
||||
name: 'Вася'
|
||||
};
|
||||
|
||||
*!*
|
||||
_.defaults(user, { name: 'Не указано', employer: 'Не указан' });
|
||||
_.defaults(user, {
|
||||
name: 'Не указано',
|
||||
employer: 'Не указан'
|
||||
});
|
||||
*/!*
|
||||
|
||||
alert( user.name ); // Вася
|
||||
|
|
@ -196,7 +201,7 @@ alert(_.size(user)); // 2
|
|||
Вот выдержка из исходного файла:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
;(function() {
|
||||
|
||||
*!*
|
||||
|
|
@ -255,6 +260,7 @@ var a = 5
|
|||
|
||||
Второй файл `lib.js`:
|
||||
```js
|
||||
//+ no-beautify
|
||||
(function() {
|
||||
// без точки с запятой в начале
|
||||
})()
|
||||
|
|
@ -263,7 +269,7 @@ var a = 5
|
|||
После объединения в один файл:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
*!*
|
||||
var a = 5
|
||||
*/!*
|
||||
|
|
@ -285,6 +291,7 @@ var a = 5
|
|||
Можно оформить модуль и чуть по-другому, например передать значение через `return`:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
var lodash = (function() {
|
||||
|
||||
var version;
|
||||
|
|
|
|||
|
|
@ -41,7 +41,9 @@
|
|||
Например, была создана ссылка в переменной, и эту переменную тут же перезаписали:
|
||||
|
||||
```js
|
||||
var user = { name: "Вася" };
|
||||
var user = {
|
||||
name: "Вася"
|
||||
};
|
||||
user = null;
|
||||
```
|
||||
|
||||
|
|
@ -87,7 +89,11 @@ function marry(man, woman) {
|
|||
}
|
||||
}
|
||||
|
||||
var family = marry({ name: "Василий" }, { name: "Мария"});
|
||||
var family = marry({
|
||||
name: "Василий"
|
||||
}, {
|
||||
name: "Мария"
|
||||
});
|
||||
```
|
||||
|
||||
Функция `marry` принимает два объекта, даёт им ссылки друг на друга и возвращает третий, содержащий ссылки на оба.
|
||||
|
|
|
|||
|
|
@ -4,10 +4,14 @@
|
|||
|
||||
```js
|
||||
//+ run
|
||||
function f() { alert(1) }
|
||||
function f() {
|
||||
alert(1)
|
||||
}
|
||||
|
||||
var obj = {
|
||||
f: function() { alert(2) }
|
||||
f: function() {
|
||||
alert(2)
|
||||
}
|
||||
};
|
||||
|
||||
with(obj) {
|
||||
|
|
|
|||
|
|
@ -5,10 +5,14 @@
|
|||
Какая из функций будет вызвана?
|
||||
|
||||
```js
|
||||
function f() { alert(1) }
|
||||
function f() {
|
||||
alert(1)
|
||||
}
|
||||
|
||||
var obj = {
|
||||
f: function() { alert(2) }
|
||||
f: function() {
|
||||
alert(2)
|
||||
}
|
||||
};
|
||||
|
||||
with(obj) {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@ var a = 1;
|
|||
var b;
|
||||
*/!*
|
||||
|
||||
var obj = { b: 2 }
|
||||
var obj = {
|
||||
b: 2
|
||||
}
|
||||
|
||||
with(obj) {
|
||||
alert( a + b );
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@
|
|||
```js
|
||||
var a = 1;
|
||||
|
||||
var obj = { b: 2 };
|
||||
var obj = {
|
||||
b: 2
|
||||
};
|
||||
|
||||
with(obj) {
|
||||
var b;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,9 @@ with(obj) {
|
|||
//+ run
|
||||
var a = 5;
|
||||
|
||||
var obj = { a : 10 };
|
||||
var obj = {
|
||||
a: 10
|
||||
};
|
||||
|
||||
*!*
|
||||
with(obj) {
|
||||
|
|
@ -38,7 +40,9 @@ with(obj) {
|
|||
//+ run
|
||||
var b = 1;
|
||||
|
||||
var obj = { a : 10 };
|
||||
var obj = {
|
||||
a: 10
|
||||
};
|
||||
|
||||
*!*
|
||||
with(obj) {
|
||||
|
|
@ -81,7 +85,9 @@ with(obj) {
|
|||
|
||||
```js
|
||||
//+ run
|
||||
var obj = { a : 10 }
|
||||
var obj = {
|
||||
a: 10
|
||||
}
|
||||
|
||||
*!*
|
||||
with(obj) {
|
||||
|
|
@ -104,7 +110,9 @@ alert(obj.a); // 20, переменная была изменена в объе
|
|||
|
||||
```js
|
||||
//+ run
|
||||
var obj = { weight: 10 };
|
||||
var obj = {
|
||||
weight: 10
|
||||
};
|
||||
|
||||
with(obj) {
|
||||
weight = 20; // (1)
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@
|
|||
//+ run
|
||||
var arr = ["a", "b"];
|
||||
|
||||
arr.push( function() { alert(this); } )
|
||||
arr.push(function() {
|
||||
alert( this );
|
||||
})
|
||||
|
||||
arr[2](); // "a","b",function
|
||||
```
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@
|
|||
```js
|
||||
var arr = ["a", "b"];
|
||||
|
||||
arr.push( function() { alert(this); } )
|
||||
arr.push(function() {
|
||||
alert( this );
|
||||
})
|
||||
|
||||
arr[2](); // ?
|
||||
```
|
||||
|
|
|
|||
|
|
@ -5,7 +5,9 @@
|
|||
```js
|
||||
//+ run
|
||||
var obj = {
|
||||
go: function() { alert(this) }
|
||||
go: function() {
|
||||
alert(this)
|
||||
}
|
||||
}
|
||||
|
||||
(obj.go)() // error!
|
||||
|
|
@ -18,6 +20,7 @@ var obj = {
|
|||
JavaScript игнорирует перевод строки перед скобкой `(obj.go)()` и читает этот код как:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
var obj = { go:... }(obj.go)()
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
Каков будет результат этого кода?
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
var obj = {
|
||||
go: function() { alert(this) }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<li>Здесь не просто вызов `obj.method()`, а более сложный вызов вида `(выражение).method()`. Такой вызов работает, как если бы он был разбит на две строки:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
f = obj.go; // сначала вычислить выражение
|
||||
f(); // потом вызвать то, что получилось
|
||||
```
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
Вызовы `(1)` и `(2)` в примере ниже работают не так, как `(3)` и `(4)`:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
"use strict"
|
||||
|
||||
var obj, f;
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ admin.sayHi(); // упс! внутри sayHi обращение по старо
|
|||
Через `this` метод может не только обратиться к любому свойству объекта, но и передать куда-то ссылку на сам объект целиком:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var user = {
|
||||
name: 'Василий',
|
||||
|
||||
|
|
@ -138,7 +138,7 @@ function sayHi() {
|
|||
**Если одну и ту же функцию запускать в контексте разных объектов, она будет получать разный `this`:**
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var user = { firstName: "Вася" };
|
||||
var admin = { firstName: "Админ" };
|
||||
|
||||
|
|
@ -199,7 +199,7 @@ func();
|
|||
Любой более хитрый вызов приведёт к потере контекста, например:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var user = {
|
||||
name: "Вася",
|
||||
hi: function() { alert(this.name); },
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
new Date(0) - 0 = 0 // (1)
|
||||
new Array(1)[0] + "" = "undefined" // (2)
|
||||
({})[0]
= undefined // (3)
|
||||
|
|
@ -24,6 +25,7 @@ new Array(1)[0] + "" = "undefined" // (2)
|
|||
Если это непонятно, то посмотрите на такой пример:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
alert( [1,[0],2][1] );
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
Подумайте, какой результат будет у выражений ниже. Когда закончите -- сверьтесь с решением.
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
new Date(0) - 0
|
||||
new Array(1)[0] + ""
|
||||
({})[0]
|
||||
|
|
|
|||
|
|
@ -21,7 +21,9 @@ function sum(a) {
|
|||
return f;
|
||||
}
|
||||
|
||||
f.toString = function() { return currentSum; };
|
||||
f.toString = function() {
|
||||
return currentSum;
|
||||
};
|
||||
|
||||
return f;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,7 +68,9 @@ alert( user ); // Пользователь Василий
|
|||
```js
|
||||
//+ run
|
||||
var obj = {
|
||||
toString: function() { return 123; }
|
||||
toString: function() {
|
||||
return 123;
|
||||
}
|
||||
};
|
||||
|
||||
alert( obj ); // 123
|
||||
|
|
@ -135,7 +137,9 @@ alert( +new Date() ); // valueOf: кол-во миллисекунд, проше
|
|||
```js
|
||||
//+ run
|
||||
var obj = {
|
||||
valueOf: function() { return 1; }
|
||||
valueOf: function() {
|
||||
return 1;
|
||||
}
|
||||
};
|
||||
|
||||
alert( obj == true ); // true
|
||||
|
|
@ -150,7 +154,9 @@ alert(obj == true); // true
|
|||
```js
|
||||
//+ run
|
||||
var obj = {
|
||||
valueOf: function() { return 1; }
|
||||
valueOf: function() {
|
||||
return 1;
|
||||
}
|
||||
};
|
||||
|
||||
alert( obj + "test" ); // 1test
|
||||
|
|
@ -161,10 +167,14 @@ alert(obj + "test"); // 1test
|
|||
```js
|
||||
//+ run
|
||||
var a = {
|
||||
valueOf: function() { return "1"; }
|
||||
valueOf: function() {
|
||||
return "1";
|
||||
}
|
||||
};
|
||||
var b = {
|
||||
valueOf: function() { return "2"; }
|
||||
valueOf: function() {
|
||||
return "2";
|
||||
}
|
||||
};
|
||||
|
||||
alert( a - b ); // "1" - "2" = -1
|
||||
|
|
@ -236,6 +246,7 @@ if ( value ) {
|
|||
|
||||
Заметим, для полноты картины, что некоторые тесты знаний в интернет предлагают вопросы типа:
|
||||
```js
|
||||
//+ no-beautify
|
||||
{}[0] // чему равно?
|
||||
{} + {} // а так?
|
||||
```
|
||||
|
|
@ -252,6 +263,7 @@ if ( value ) {
|
|||
|
||||
А если команду изъять, то будет пустой блок `{}`, который ничего не делает. Два примера выше как раз содержат пустой блок в начале, который ничего не делает. Иначе говоря:
|
||||
```js
|
||||
//+ no-beautify
|
||||
{}[0] // то же что и: [0]
|
||||
{} + {} // то же что и: + {}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
Например, они могут вернуть один и тот же объект `obj`, определённый снаружи:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var obj = {};
|
||||
|
||||
function A() { return obj; }
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
Возможны ли такие функции `A` и `B` в примере ниже, что соответствующие объекты `a,b` равны (см. код ниже)?
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
function A() { ... }
|
||||
function B() { ... }
|
||||
|
||||
|
|
|
|||
|
|
@ -23,9 +23,15 @@ alert(calc.calculate("3 + 7")); // 10
|
|||
|
||||
```js
|
||||
var powerCalc = new Calculator;
|
||||
powerCalc.addMethod("*", function(a, b) { return a * b; });
|
||||
powerCalc.addMethod("/", function(a, b) { return a / b; });
|
||||
powerCalc.addMethod("**", function(a, b) { return Math.pow(a, b); });
|
||||
powerCalc.addMethod("*", function(a, b) {
|
||||
return a * b;
|
||||
});
|
||||
powerCalc.addMethod("/", function(a, b) {
|
||||
return a / b;
|
||||
});
|
||||
powerCalc.addMethod("**", function(a, b) {
|
||||
return Math.pow(a, b);
|
||||
});
|
||||
|
||||
var result = powerCalc.calculate("2 ** 3");
|
||||
alert( result ); // 8
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ function Animal(name) {
|
|||
Например, возврат объекта:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
function BigAnimal() {
|
||||
|
||||
this.name = "Мышь";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
|
||||
```js
|
||||
//+ run
|
||||
|
||||
function User(fullName) {
|
||||
this.fullName = fullName;
|
||||
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ Object.defineProperty(obj, prop, descriptor)
|
|||
Два таких вызова работают одинаково:
|
||||
|
||||
```js
|
||||
//+ no-beautify
|
||||
var user = {};
|
||||
|
||||
// 1. простое присваивание
|
||||
|
|
@ -90,7 +91,7 @@ user.name = "Петя";
|
|||
К сожалению, свойство `toString`, объявленное обычным способом, будет видно в цикле `for..in`, например:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var user = {
|
||||
name: "Вася",
|
||||
toString: function() { return this.name; }
|
||||
|
|
@ -106,7 +107,7 @@ for(var key in user) alert(key); // name, toString
|
|||
`Object.defineProperty` может исключить `toString` из списка итерации, поставив ему флаг `enumerable: false`. По стандарту, у встроенного `toString` этот флаг уже стоит.
|
||||
|
||||
```js
|
||||
//+ run
|
||||
//+ run no-beautify
|
||||
var user = {
|
||||
name: "Вася",
|
||||
toString: function() { return this.name; }
|
||||
|
|
@ -335,7 +336,9 @@ var obj = {
|
|||
internal: 3
|
||||
};
|
||||
|
||||
Object.defineProperty(obj, "internal", {enumerable: false});
|
||||
Object.defineProperty(obj, "internal", {
|
||||
enumerable: false
|
||||
});
|
||||
|
||||
*!*
|
||||
alert( Object.keys(obj) ); // a,b
|
||||
|
|
@ -351,7 +354,9 @@ alert( Object.getOwnPropertyNames(obj) ); // a, internal, b
|
|||
|
||||
```js
|
||||
//+ run
|
||||
var obj = { test: 5 };
|
||||
var obj = {
|
||||
test: 5
|
||||
};
|
||||
*!*
|
||||
var descriptor = Object.getOwnPropertyDescriptor(obj, 'test');
|
||||
*/!*
|
||||
|
|
|
|||
|
|
@ -173,7 +173,9 @@ function User(userData) {
|
|||
this.name = 'Аноним';
|
||||
}
|
||||
|
||||
this.sayHi = function() { alert(this.name) };
|
||||
this.sayHi = function() {
|
||||
alert(this.name)
|
||||
};
|
||||
// ...
|
||||
}
|
||||
|
||||
|
|
@ -182,7 +184,10 @@ function User(userData) {
|
|||
var guest = new User();
|
||||
guest.sayHi(); // Аноним
|
||||
|
||||
var knownUser = new User({name: 'Вася', age: 25});
|
||||
var knownUser = new User({
|
||||
name: 'Вася',
|
||||
age: 25
|
||||
});
|
||||
knownUser.sayHi(); // Вася
|
||||
```
|
||||
|
||||
|
|
@ -193,7 +198,9 @@ knownUser.sayHi(); // Вася
|
|||
```js
|
||||
//+ run
|
||||
function User() {
|
||||
this.sayHi = function() { alert(this.name) };
|
||||
this.sayHi = function() {
|
||||
alert(this.name)
|
||||
};
|
||||
}
|
||||
|
||||
User.createAnonymous = function() {
|
||||
|
|
@ -215,7 +222,10 @@ User.createFromData = function(userData) {
|
|||
var guest = User.createAnonymous();
|
||||
guest.sayHi(); // Аноним
|
||||
|
||||
var knownUser = User.createFromData({name: 'Вася', age: 25});
|
||||
var knownUser = User.createFromData({
|
||||
name: 'Вася',
|
||||
age: 25
|
||||
});
|
||||
knownUser.sayHi(); // Вася
|
||||
*/!*
|
||||
```
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@
|
|||
```js
|
||||
//+ run
|
||||
function sum(arr) {
|
||||
return arr.reduce(function(a, b) { return a + b; });
|
||||
return arr.reduce(function(a, b) {
|
||||
return a + b;
|
||||
});
|
||||
}
|
||||
|
||||
alert( sum([1, 2, 3]) ); // 6 (=1+2+3)
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue