beautify 1st part of the tutorial

This commit is contained in:
Ilya Kantor 2015-03-10 12:36:58 +03:00
parent e3dd2cedc0
commit 6444024a9d
327 changed files with 2358 additions and 1986 deletions

View file

@ -6,21 +6,23 @@
function addClass(obj, cls) {
var classes = obj.className ? obj.className.split(' ') : [];
for(var i=0; i<classes.length; i++) {
for (var i = 0; i < classes.length; i++) {
if (classes[i] == cls) return; // класс уже есть
}
classes.push(cls); // добавить
obj.className = classes.join(' '); // и обновить свойство
}
var obj = { className: 'open menu' };
var obj = {
className: 'open menu'
};
addClass(obj, 'new');
addClass(obj, 'open');
addClass(obj, 'me');
alert(obj.className) // open menu new me
alert(obj.className) // open menu new me
```
P.S. "Альтернативный" подход к проверке наличия класса вызовом `obj.className.indexOf(cls)` был бы неверным. В частности, он найдёт `cls = "menu"` в строке классов `obj.className = "open mymenu"`.

View file

@ -14,10 +14,10 @@ var obj = {
```js
addClass(obj, 'new'); // obj.className='open menu new'
addClass(obj, 'open'); // без изменений (класс уже существует)
addClass(obj, 'open'); // без изменений (класс уже существует)
addClass(obj, 'me'); // obj.className='open menu new me'
alert(obj.className); // "open menu new me"
alert( obj.className ); // "open menu new me"
```
P.S. Ваша функция не должна добавлять лишних пробелов.

View file

@ -20,7 +20,7 @@ function aclean(arr) {
// этот объект будем использовать для уникальности
var obj = {};
for(var i=0; i<arr.length; i++) {
for (var i = 0; i < arr.length; i++) {
// разбить строку на буквы, отсортировать и слить обратно
*!*
var sorted = arr[i].toLowerCase().split('').sort().join(''); // (*)
@ -32,7 +32,7 @@ function aclean(arr) {
var result = [];
// теперь в obj находится для каждого ключа ровно одно значение
for(var key in obj) result.push(obj[key]);
for (var key in obj) result.push(obj[key]);
return result;
}
@ -48,10 +48,10 @@ alert( aclean(arr) );
```js
var sorted = arr[i] // ЗОВ
.toLowerCase() // зов
.split('') // ['з','о','в']
.sort() // ['в','з','о']
.join(''); // взо
.toLowerCase() // зов
.split('') // ['з','о','в']
.sort() // ['в','з','о']
.join(''); // взо
```
Получится, что два разных слова `'ЗОВ'` и `'воз'` получат одинаковую отсортированную форму `'взо'`.

View file

@ -11,19 +11,20 @@ function unique(arr) {
var result = [];
nextInput:
for(var i=0; i<arr.length; i++) {
var str = arr[i]; // для каждого элемента
for(var j=0; j<result.length; j++) { // ищем, был ли он уже?
if (result[j] == str) continue nextInput; // если да, то следующий
for (var i = 0; i < arr.length; i++) {
var str = arr[i]; // для каждого элемента
for (var j = 0; j < result.length; j++) { // ищем, был ли он уже?
if (result[j] == str) continue nextInput; // если да, то следующий
}
result.push(str);
}
result.push(str);
}
return result;
}
var strings = ["кришна", "кришна", "харе", "харе",
"харе", "харе", "кришна", "кришна", "8-()"];
var strings = ["кришна", "кришна", "харе", "харе",
"харе", "харе", "кришна", "кришна", "8-()"
];
alert( unique(strings) ); // кришна, харе, 8-()
```
@ -62,18 +63,19 @@ alert( unique(strings) ); // кришна, харе, 8-()
function unique(arr) {
var obj = {};
for(var i=0; i<arr.length; i++) {
for (var i = 0; i < arr.length; i++) {
var str = arr[i];
*!*
obj[str] = true; // запомнить строку в виде свойства объекта
*/!*
}
return Object.keys(obj); // или собрать ключи перебором для IE8-
}
var strings = ["кришна", "кришна", "харе", "харе",
"харе", "харе", "кришна", "кришна", "8-()"];
var strings = ["кришна", "кришна", "харе", "харе",
"харе", "харе", "кришна", "кришна", "8-()"
];
alert( unique(strings) ); // кришна, харе, 8-()
```

View file

@ -13,8 +13,9 @@ function unique(arr) {
/* ваш код */
}
var strings = ["кришна", "кришна", "харе", "харе",
"харе", "харе", "кришна", "кришна", "8-()"];
var strings = ["кришна", "кришна", "харе", "харе",
"харе", "харе", "кришна", "кришна", "8-()"
];
alert( unique(strings) ); // кришна, харе, 8-()
```

View file

@ -11,7 +11,7 @@
function camelize(str) {
var arr = str.split('-');
for(var i=1; i<arr.length; i++) {
for (var i = 1; i < arr.length; i++) {
// преобразовать: первый символ с большой буквы
arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
}
@ -19,8 +19,8 @@ function camelize(str) {
return arr.join('');
}
alert( camelize("background-color")); // backgroundColor
alert( camelize("list-style-image") ); // listStyleImage
alert( camelize("background-color") ); // backgroundColor
alert( camelize("list-style-image") ); // listStyleImage
alert( camelize("-webkit-transition") ); // WebkitTransition
```

View file

@ -4,8 +4,8 @@
//+ run
function removeClass(obj, cls) {
var classes = obj.className.split(' ');
for(i=0; i<classes.length; i++) {
for (i = 0; i < classes.length; i++) {
if (classes[i] == cls) {
classes.splice(i, 1); // удалить класс
*!*
@ -14,14 +14,16 @@ function removeClass(obj, cls) {
}
}
obj.className = classes.join(' ');
}
var obj = { className: 'open menu menu' }
var obj = {
className: 'open menu menu'
}
removeClass(obj, 'blabla');
removeClass(obj, 'blabla');
removeClass(obj, 'menu')
alert(obj.className) // open
alert(obj.className) // open
```
В примере выше есть тонкий момент. Элементы массива проверяются один за другим. При вызове `splice` удаляется текущий, `i-й` элемент, и те элементы, которые идут дальше, сдвигаются на его место.

View file

@ -5,7 +5,7 @@
У объекта есть свойство `className`, которое хранит список "классов" - слов, разделенных пробелами:
```js
var obj = {
var obj = {
className: 'open menu'
};
```
@ -20,9 +20,11 @@ removeClass(obj, 'blabla'); // без изменений (нет такого к
P.S. Дополнительное усложнение. Функция должна корректно обрабатывать дублирование класса в строке:
```js
obj = { className: 'my menu menu' };
obj = {
className: 'my menu menu'
};
removeClass(obj, 'menu');
alert(obj.className); // 'my'
alert( obj.className ); // 'my'
```
Лишних пробелов после функции образовываться не должно.

View file

@ -4,18 +4,18 @@
//+ run
function filterRangeInPlace(arr, a, b) {
for(var i = 0; i<arr.length; i++) {
var val = arr[i];
if (val < a || val > b) {
arr.splice(i--, 1);
}
for (var i = 0; i < arr.length; i++) {
var val = arr[i];
if (val < a || val > b) {
arr.splice(i--, 1);
}
}
}
var arr = [5, 3, 8, 1];
filterRangeInPlace(arr, 1, 4);
alert(arr); // [3, 1]
alert( arr ); // [3, 1]
```

View file

@ -12,6 +12,6 @@ arr = [5, 3, 8, 1];
filterRangeInPlace(arr, 1, 4); // удалены числа вне диапазона 1..4
alert(arr); // массив изменился: остались [3, 1]
alert( arr ); // массив изменился: остались [3, 1]
```

View file

@ -2,7 +2,7 @@
```js
//+ run
var arr = [ 5, 2, 1, -10, 8];
var arr = [5, 2, 1, -10, 8];
function compareReversed(a, b) {
return b - a;
@ -10,6 +10,6 @@ function compareReversed(a, b) {
arr.sort(compareReversed);
alert(arr);
alert( arr );
```

View file

@ -5,10 +5,10 @@
Как отсортировать массив чисел в обратном порядке?
```js
var arr = [ 5, 2, 1, -10, 8];
var arr = [5, 2, 1, -10, 8];
// отсортируйте?
alert(arr); // 8, 5, 2, 1, -10
alert( arr ); // 8, 5, 2, 1, -10
```

View file

@ -2,13 +2,13 @@
```js
//+ run
var arr = [ "HTML", "JavaScript", "CSS" ];
var arr = ["HTML", "JavaScript", "CSS"];
*!*
var arrSorted = arr.slice().sort();
*/!*
alert(arrSorted);
alert(arr);
alert( arrSorted );
alert( arr );
```

View file

@ -7,12 +7,12 @@
Исходный массив не должен меняться.
```js
var arr = [ "HTML", "JavaScript", "CSS" ];
var arr = ["HTML", "JavaScript", "CSS"];
// ... ваш код ...
alert(arrSorted); // CSS, HTML, JavaScript
alert(arr); // HTML, JavaScript, CSS (без изменений)
alert( arrSorted ); // CSS, HTML, JavaScript
alert( arr ); // HTML, JavaScript, CSS (без изменений)
```
Постарайтесь сделать код как можно короче.

View file

@ -11,13 +11,13 @@
var arr = [1, 2, 3, 4, 5];
*!*
function compareRandom(a, b) {
function compareRandom(a, b) {
return Math.random() - 0.5;
}
arr.sort(compareRandom);
*/!*
alert(arr); // элементы в случайном порядке, например [3,5,1,2,4]
alert( arr ); // элементы в случайном порядке, например [3,5,1,2,4]
```

View file

@ -9,6 +9,6 @@ var arr = [1, 2, 3, 4, 5];
arr.sort(ваша функция);
alert(arr); // элементы в случайном порядке, например [3,5,1,2,4]
alert( arr ); // элементы в случайном порядке, например [3,5,1,2,4]
```

View file

@ -1,7 +1,7 @@
Для сортировки объявим и передадим в `sort` анонимную функцию, которая сравнивает объекты по полю `age`:
```js
//+ run
//+ run no-beautify
*!*
// Наша функция сравнения
function compareAge(personA, personB) {

View file

@ -7,6 +7,7 @@
Например:
```js
//+ no-beautify
var vasya = { name: "Вася", age: 23 };
var masha = { name: "Маша", age: 18 };
var vovochka = { name: "Вовочка", age: 6 };

View file

@ -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
}
}
}
@ -15,7 +19,7 @@ var list = {
function printList(list) {
var tmp = list;
while(tmp) {
while (tmp) {
alert( tmp.value );
tmp = tmp.next;
}
@ -49,23 +53,27 @@ 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
}
}
}
};
function printList(list) {
alert(list.value); // (1)
alert( list.value ); // (1)
if (list.next) {
printList(list.next); // (2)
}
}
printList(list);
@ -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
}
}
}
@ -93,7 +105,7 @@ function printReverseList(list) {
printReverseList(list.next);
}
alert(list.value);
alert( list.value );
}
printReverseList(list);
@ -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
}
}
}
@ -118,12 +134,12 @@ function printReverseList(list) {
var arr = [];
var tmp = list;
while(tmp) {
while (tmp) {
arr.push(tmp.value);
tmp = tmp.next;
}
for( var i = arr.length-1; i>=0; i-- ) {
for (var i = arr.length - 1; i >= 0; i--) {
alert( arr[i] );
}
}

View file

@ -28,6 +28,7 @@ var list = {
Альтернативный способ создания:
```js
//+ no-beautify
var list = { value: 1 };
list.next = { value: 2 };
list.next.next = { value: 3 };

View file

@ -15,8 +15,8 @@ var names = 'Маша, Петя, Марина, Василий';
var arr = names.split(', ');
for (var i=0; i<arr.length; i++) {
alert('Вам сообщение ' + arr[i]);
for (var i = 0; i < arr.length; i++) {
alert( 'Вам сообщение ' + arr[i] );
}
```
@ -54,7 +54,7 @@ var arr = ['Маша', 'Петя', 'Марина', 'Василий'];
var str = arr.join(';');
alert(str); // Маша;Петя;Марина;Василий
alert( str ); // Маша;Петя;Марина;Василий
```
[smart header="new Array + join = Повторение строки"]
@ -82,7 +82,7 @@ var arr = ["Я", "иду", "домой"];
delete arr[1]; // значение с индексом 1 удалено
// теперь arr = ["Я", undefined, "домой"];
alert(arr[1]); // undefined
alert( arr[1] ); // undefined
```
Да, элемент удален из массива, но не так, как нам этого хочется. Образовалась "дырка".
@ -109,10 +109,10 @@ alert(arr[1]); // undefined
var arr = ["Я", "изучаю", "JavaScript"];
*!*
arr.splice(1, 1); // начиная с позиции 1, удалить 1 элемент
arr.splice(1, 1); // начиная с позиции 1, удалить 1 элемент
*/!*
alert(arr); // осталось ["Я", "JavaScript"]
alert( arr ); // осталось ["Я", "JavaScript"]
```
Ниже продемонстрировано, как использовать `splice` для удаления одного элемента. Следующие за удаленным элементы сдвигаются, чтобы заполнить его место.
@ -122,7 +122,7 @@ alert(arr); // осталось ["Я", "JavaScript"]
var arr = ["Я", "изучаю", "JavaScript"];
*!*
arr.splice(0, 1); // удалить 1 элемент, начиная с позиции 0
arr.splice(0, 1); // удалить 1 элемент, начиная с позиции 0
*/!*
alert( arr[0] ); // "изучаю" стал первым элементом
@ -161,9 +161,9 @@ var arr = ["Я", "изучаю", "JavaScript"];
// с позиции 2
// удалить 0
// вставить "сложный", "язык"
arr.splice(2, 0, "сложный", "язык");
arr.splice(2, 0, "сложный", "язык");
alert(arr); // "Я", "изучаю", "сложный", "язык", "JavaScript"
alert( arr ); // "Я", "изучаю", "сложный", "язык", "JavaScript"
```
Допускается использование отрицательного номера позиции, которая в этом случае отсчитывается с конца:
@ -177,7 +177,7 @@ var arr = [1, 2, 5]
// затем вставить числа 3 и 4
arr.splice(-1, 0, 3, 4);
alert(arr); // результат: 1,2,3,4,5
alert( arr ); // результат: 1,2,3,4,5
```
## Метод slice
@ -190,9 +190,9 @@ alert(arr); // результат: 1,2,3,4,5
//+ run
var arr = ["Почему", "надо", "учить", "JavaScript"];
var arr2 = arr.slice(1,3); // элементы 1, 2 (не включая 3)
var arr2 = arr.slice(1, 3); // элементы 1, 2 (не включая 3)
alert(arr2); // надо, учить
alert( arr2 ); // надо, учить
```
Аргументы ведут себя так же, как и в строковом `slice`:
@ -301,7 +301,7 @@ arr.sort( compareNumeric*!*()*/!* ); // не сработает
```js
//+ run
[1, -2, 15, 2, 0, 8].sort(function(a, b) {
alert(a + " <> " + b);
alert( a + " <> " + b );
});
```
@ -326,10 +326,10 @@ function compareNumeric(a, b) {
```js
//+ run
var arr = [1,2,3];
var arr = [1, 2, 3];
arr.reverse();
alert(arr); // 3,2,1
alert( arr ); // 3,2,1
```
## concat
@ -340,12 +340,12 @@ alert(arr); // 3,2,1
```js
//+ run
var arr = [1,2];
var arr = [1, 2];
*!*
var newArr = arr.concat(3,4);
var newArr = arr.concat(3, 4);
*/!*
alert(newArr); // 1,2,3,4
alert( newArr ); // 1,2,3,4
```
У `concat` есть одна забавная особенность.
@ -356,13 +356,13 @@ alert(newArr); // 1,2,3,4
```js
//+ run
var arr = [1,2];
var arr = [1, 2];
*!*
var newArr = arr.concat( [3,4], 5);// то же самое, что arr.concat(3,4,5)
var newArr = arr.concat([3, 4], 5); // то же самое, что arr.concat(3,4,5)
*/!*
alert(newArr); // 1,2,3,4,5
alert( newArr ); // 1,2,3,4,5
```
## indexOf/lastIndexOf
@ -380,7 +380,7 @@ alert(newArr); // 1,2,3,4,5
```js
//+ run
var arr = [ 1, 0, false ];
var arr = [1, 0, false];
alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
@ -401,13 +401,13 @@ alert( arr.indexOf(null) ); // -1
Например, организуем такую проверку для коллекции строк `"div"`, `"a"` и `"form"`:
```js
var store = { }; // объект для коллекции
var store = {}; // объект для коллекции
var items = ["div", "a", "form"];
for(var i=0; i<items.length; i++) {
for (var i = 0; i < items.length; i++) {
var key = items[i]; // для каждого элемента создаём свойство
store[ key ] = true; // значение здесь не важно
store[key] = true; // значение здесь не важно
}
```
@ -434,7 +434,7 @@ var user = {
var keys = Object.keys(user);
alert(keys); // name, age
alert( keys ); // name, age
```
## Итого