Учебник JavaScript для новичков от Трепачёва Дмитрия

Учебник JavaScript для новичков от Трепачёва Дмитрия

На данной странице размещается начало учебника JavaScript для новичков. Для его освоения вам необходимо иметь хотя бы минимальные знания HTML и CSS. Обратитесь к учебнику HTML и CSS для новичков для их получения (для изучения JavaScript вам нужно пройти хотя бы 3-4 урока минимум).

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

Итак, давайте без лишних слов приступим к изучению этого, бесспорно, полезного языка.

 

Оглавление

Учебник JavaScript для новичков от Трепачёва Дмитрия. 5

Урок 1. Как запустить JavaScript. 6

Поиск ошибок в коде. 6

Урок 2. Основы работы с JavaScript. 7

Строки и числа. 7

Переменные. 7

Операция присваивания. 7

Комментарии. 7

Функция alert. 7

Математические операции. 8

Получение определенного символа строки. 8

Сложности с операцией присваивания. 8

Операции инкремента и декремента. 8

Операции +=, -=, *=, /=. 9

Специальные значения. 9

Значения undefined и null 9

Значения true и false. 9

Значение NaN.. 9

Значения Infinity и -Infinity. 10

Функция prompt. 10

Функция confirm.. 10

Типизация переменных. 10

Урок 3. Основы работы с массивами и объектами в JavaScript. 12

Как вывести отдельный элемент массива. 12

Ассоциативные массивы (объекты). 12

Свойства объекта. 13

Как еще можно создать массив или объект. 13

Заполнение массива. 14

Многомерный массив. 14

Урок 4. Работа с конструкциями if-else, switch-case в JavaScript. 15

Конструкция if-else. 15

Сокращенный синтаксис. 15

Равенство по значению и типу. 16

Не равно. 16

Все операции сравнения. 17

Несколько условий сразу. 17

Работа с логическими переменными. 18

Вложенные if. 19

Конструкция else if. 19

Несколько if. 19

Конструкция switch-case. 20

Урок 5. Работа с циклами for и while в JavaScript. 21

Цикл while. 21

Цикл for. 21

Цикл без тела. 22

Несколько команд в цикле for. 22

Цикл for для массивов. 22

Цикл for-in. 23

Инструкция break. 23

Инструкция continue. 24

Урок 6. Работа с математическими функциями в JavaScript. 24

Функция Math.abs. 24

Функция Math.round. 24

Функция Math.ceil 25

Функция Math.floor. 25

Функция Math.min. 25

Функция Math.max. 26

Функция Math.sqrt. 26

Функция Math.pow.. 26

Функция Math.random.. 27

Функция isNaN.. 27

Функция isFinite. 28

Функция parseInt. 29

Функция parseFloat. 29

Метод toFixed. 30

Урок 7. Работа со строковыми функциями в JavaScript. 32

Свойство length. 32

Метод toUpperCase. 32

Метод toLowerCase. 32

Метод substr. 33

Метод substring. 33

Метод slice. 34

Метод indexOf. 35

Метод replace. 35

Метод split. 36

Урок 8. Работа с функциями для массивов в JavaScript. 39

Метод reverse. 39

Метод push. 39

Метод unshift. 40

Метод shift. 40

Метод pop. 41

Метод slice. 42

Метод splice. 43

Метод sort. 44

Функция Object.keys. 44

Метод reverse. 44

Урок 9. Практика на комбинации стандартных функций JavaScript. 46

Урок 10.Работа с пользовательскими функциями в JavaScript. 47

Зачем нужны пользовательские функции?. 47

Синтаксис функций пользователя. 47

Как вызвать функцию в коде?. 48

Подробнее о параметрах. 48

Инструкция return. 49

Частая ошибка с return. 50

Приемы работы с return. 51

Урок 11. Приемы работы с флагами на JavaScript. 52

Флаги. 52

Флаги в функции. 54

Урок 12. Приемы работы с логическими значениями. 56

Логические операции без ифов. 56

Логическое ИЛИ.. 56

Урок 13. Приемы работы с циклами на JavaScript. 57

Цикл в цикле. 57

Пирамидки. 57

Пирамидка с иксами. 57

Строка '123456789' 58

Пирамидка с цифрами. 58

Пирамидка с цифрами. 58

While без заданного количества итераций. 59

Урок 14.Приемы работы с массивами на JavaScript. 60

Заполнение массивов. 60

Переворот массива. 60

Переворот объекта. 61

Подсчет количества элементов. 61

Перебор многомерных массивов. 62

Урок 15.Правильное использование пользовательских функций. 63

Урок 16. Практика на работу с пользовательскими функциями. 67

Функция inArray. 67

Простые числа. 67

Делители. 68

Пересечение массивов. 68

НОД.. 69

Урок 17. Продвинутая работа с пользовательскими функциями. 69

Значения по умолчанию.. 69

Область видимости переменных. 70

Строгий режим.. 72

Глобальные переменные через window.. 72

Рекурсия. 73

Урок 18. Практика на отработку циклов и функций JavaScript. 75

Урок 19.Основы работы с DOM в JavaScript. 76

Основы работы с событиями. 76

Таблица атрибутов для событий. 77

Работа с getElementById. 77

Основы работы с атрибутами HTML через JavaScript. 77

Исключения: атрибуты class и for. 79

Работа с this. 80

Основы работы с CSS. 81

Урок 20.Работа с элементами страницы в JavaScript. 82

Работа с innerHTML, outerHTML. 82

Работа с getElementsByTagName. 83

Обращение к свойствам через свойства document. 85

Работа с формами. 85

Обращение к свойствам форм.. 87

Продвинутая работа с атрибутами. 89

Получение свойств по их классу. 90

Получение свойств селектором CSS. 91

Атрибуты data-. 92

Разница между способами получения атрибутов. 93

Урок 21.Работа с датами в JavaScript. 94

Объект Date. 94

Работа с getDay. 94

Задаем определенный момент времени. 95

Работа с getTime. 95

Работа с Date.parse. 96

Разница между датами. 96

Урок 22. Работа с таймерами в JavaScript. 97

Метод setInterval 97

Остановка таймера. 97

Метод setTimeout. 99

Глобальные переменные и остановка таймера. 99

Метод setTimeout и рекурсия. 99

Урок 23. Продвинутая работа с событиями в JavaScript. 101

События через атрибуты.. 101

События через работу с атрибутами. 101

Достоинства и недостатки такого способа. 102

Достоинства. 102

Использование this. 103

Недостатки. 104

Работа с addEventListener. 105

Работа с this для addEventListener. 106

Удаление привязки через removeEventListener. 107

Урок 24.Продвинутая работа с DOM на JavaScript. 109

Работа с classList. 109

Работа с cssText. 109

Свойство tagName. 109

Вставка элементов. 109

Потомки. 109

Соседи. 109

Родители. 109

Удаление и клонирование. 109

Продвинутое получение. 109

 

Урок 1. Как запустить JavaScript

Написать и запустить JavaScript можно двумя способами: первый заключается в том, что мы пишем код прямо на HTML странице внутри тега < script>:

<! DOCTYPE html>

< html>

    < head>

            < meta charset=" utf-8" >

            < title> Это заголовок тайтл< /title>

            < script>

                     var name = 'Дима';

                     alert('Привет, ' + name);

            < /script>

    < /head>

    < body>

            Это основное содержимое страницы.

    < /body>

< /html>

Тег < script> можно располагать в любом месте страницы - как в < head>, так и в < body>.

Второй вариант заключается в том, что JavaScript код хранится в отдельном файле (наподобие CSS) и подключается тоже с помощью тега < script> с атрибутом src, в котором указывается путь к файлу со скриптом:

<! DOCTYPE html>

< html>

    < head>

                                    < meta charset=" utf-8" >

            < title> Это заголовок тайтл< /title>

            < script src=" путь к файлу со скриптом" > < /script>

    < /head>

    < body>

            Это основное содержимое страницы.

    < /body>

< /html>

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

Поиск ошибок в коде

Посмотрите следующее видео, в котором показано, как работать с отладчиком, который показывает ошибки JavaScript, и консолью:

https: //youtu.be/KP7Aroyrwco

 

Урок 2. Основы работы с JavaScript

В этом уроке мы разберем работу с данными на языке JavaScript.

Данные - это объекты, которыми может оперировать JavaScript, к примеру, имя пользователя - это строка, а его возраст - это число. Данные могут быть разных типов.

Строки и числа

Самыми простыми типами данных в JavaScript являются строки и числа.

Числа обозначают сами себя: 1, 12, 145, а вот строки требуется брать в кавычки (одинарные или двойные - без разницы):

 

'строка', " строка"; //это примеры строк

Переменные

Одним из самых главных и распространенных объектов в программировании является переменная.

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

Имя переменной должно состоять из английских букв: больших или маленьких, а также цифр и знака_подчеркивания.

В JavaScript при объявлении переменной обязательно должно быть написано ключевое слово var:

 

var a; //тут мы объявили переменную

var a, a1, isVar, is_var; //тут мы объявили группу переменных

Операция присваивания

Очень важным элементом программирования является операция присваивания. Пример присваивания:

var a = 4; //мы присвоили переменной a значение 4

Комментарии

В коде JavaScript, так же, как и в HTML и CSS, можно оставлять комментарии. Они могут быть многострочными и однострочными:

 

var a = 4; //это пример однострочного комментария.

/*

    Это пример

    многострочного комментария.

*/

 

var a = 4;

 

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

Функция alert

В JavaScript существует специальная функция alert, которая позволяет вывести какой-либо текст в окно браузера в виде диалогового окошка.

Следующий код выводит на экран заданный текст:

 

alert('Привет, мир! '); //выведет на экран фразу 'Привет, мир! '

 

А в следующим коде переменной text присваивается фраза, а затем содержимое этой переменной выводится на экран:

 

var text = 'Привет, мир! ';

alert(text); //выведет на экран фразу 'Привет, мир! '

Математические операции

В JavaScript между числами можно совершать различные математические операции:

alert(2 + 3); //выведет 5

alert(5 - 1); //выведет 4

alert(2 * 3); //выведет 6

alert(6 / 2); //выведет 3

Специальные значения

В JavaScript, как и в других языках программирования, существуют ключевые слова для некоторых специальных значений. Вот они: undefined, null, true, false, NaN, Infinity, -Infinity.

Значения undefined и null

Значение undefined обозначает неопределенность. К примеру, если мы попробуем обратиться к переменной, которой мы еще не задали значение - то ее значение и будет undefined.

 

var a;

alert(a); //выведет undefined

 

Значение null обозначает 'ничего'. К примеру, мы можем присвоить переменной значение null в знак того, что там ничего не лежит.

Это значение очень похоже на undefined, отличие в том, что undefined - это не определенное значение, а null - определенное - ничего.

Значения true и false

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

К примеру, на вопрос 'вам уже есть 18 лет? ' в можете ответить да, то есть true, или нет, то есть false.

Значение NaN

Значение NaN (Not-A-Number) обозначает не число. Оно может получится, к примеру, в таком случае - когда вы умножаете строку с буквами на число:

 

alert('abc' * 3); //выведет NaN

Функция prompt

Кроме функции alert, которая выдает диалоговое окошко, существует функция prompt, которая не только выдает окошко с текстом, но и позволяет получить от пользователя какой-либо текст.

Этот текст можно записать в переменную и затем выполнить над ним какие-либо операции.

В следующем примере мы спросим имя пользователя, запишем его в переменную name и с помощью функции alert выведем на экран:

 

var name = prompt('Ваше имя? ');

alert('Ваше имя: ' + name);

 

Функция confirm

Если вам нужно просто спросить у пользователя 'Да' или 'Нет', не давая ему возможность ввести иной текст - используйте функцию confirm.

Эта функция вызывает окошко с вопросом, на который нужно ответить пользователю, и двумя кнопками для ответа: с кнопкой 'ОК' и с кнопкой 'Отмена'.

Если пользователь нажмет 'ОК' - то функция вернет true, а если 'Отмена' - то вернет false.

В следующем примере функция confirm выведет диалоговое окно с вопросом 'Вам уже есть 18 лет? '.

Если вы нажмете 'Ок', то в переменную ok запишется true и выведется на экран функцией alert, а если нажмете 'Отмена' - то false:

 

var ok = confirm('Вам уже есть 18 лет? ');

alert(ok);

 

Типизация переменных

Что будет, если попробовать перемножить, к примеру, число и строку, вот так: 3 * '3'? В результате вы получите число 9. Это значит, что JavaScript автоматически осуществляет преобразование типов при необходимости, вам не нужно за это переживать.

Однако, есть нюанс: если мы попытаемся сложить строку и число, то JavaScript сложит их как строки, а не как числа, вот так: '3' + 3 получится строка '33', а не число 6.

В случае, например, с умножением JavaScript понимал, что нельзя перемножить строки, поэтому строки переводил в числа и перемножал их. А случай со сложением можно трактовать двояко: складывать как строки или как числа (плюс-то используется как для сложения строк, так и чисел).

Бороться с этим можно следующем способом: нужно сделать недопустимую для строк операцию, например, так: +'3' + 3 - поставим плюс перед строкой и она преобразуется к числу.

Второй вариант такой: можно сказать яваскрипту, что мы хотим явно преобразовать строку к числу. Это делается с помощью функции Number, вот так: Number('3') + 3. В результате получится 6, а не '33'.

К числам могут преобразовываться не только строки, но и любые другие типы данных, например true тоже можно преобразовать к числу таким образом: Number(true).

Можно преобразовывать и к другим типам с помощью функций Boolean, String и других подобных.

 

Свойства объекта

Существует и другой способ обратиться к элементу объекта - используя обращение не через квадратные скобки, а через точку: не obj['key'], а obj.key.

В этом случае говорят, что мы обращаемся к свойству объекта.

Смотрите пример:

 

var obj = {key1: 200, key2: 300, key2: 400};

alert(obj.key1); //выведет 200

 

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

Если у вас есть такой ключ - используйте обращение через квадратные скобки.

 

Заполнение массива

Массив можно заполнять не на этапе его создания, а потом. В следующем примере я вначале объявил, что переменная arr - массив, а потом заполнил его данными:

 

var arr = []

arr[0] = 1;

arr[1] = 2;

arr[2] = 3;

alert(arr) //с помощью alert выводим содержимое массива

 

Также можно поступать и с объектами:

 

var obj = {};

obj['Коля'] = 100;

obj['Вася'] = 200;

obj['Петя'] = 300;

Многомерный массив

Элементы массива могут быть не только строками и числами, но и массивами. То есть у нас получится массив массивов или многомерный массив.

Давайте сделаем массив студентов students, который будет содержать два подмассива: студенты мужского пола и женского:

 

//Многомерный массив студентов:

var students = {

    'boys': ['Коля', 'Вася', 'Петя'],

    'girls': ['Даша', 'Маша', 'Лена'],

};

 

Чтобы вывести какой-либо элемент из многомерного массива следует писать уже не одну пару [ ], а две: students['boys'][0] – так мы выведем 'Коля'.

 

 

Конструкция if-else

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

То есть нам нужно иметь возможность спросить у JavaScript 'Если'.

Например так: если эта переменная меньше нуля, то вывести 'отрицательно', иначе (то есть если она больше нуля) вывести 'положительно'.

В JavaScript для таких вопросов предназначена конструкция if, которая позволяет выполнять определенный код при выполнении какого-либо условия:

 

if (логическое выражение) {

    Этот код выполниться,

    если логическое выражение верно (то есть равно true)

} else {

    Этот код выполнится,

    если логическое выражение неверно (то есть равно false)

}

 

Обратите внимание на то, что блок else не обязателен.

Логическое выражение представляет собой тот самый вопрос, который мы хотим задать JavaScript. Например, чтобы спросить 'переменная a больше нуля' мы напишем так: a > 0.

Примеры работы:

 

var a = 3;

 

/*

    Если переменная a больше нуля, то выведи 'верно',

    иначе (если меньше или равна нулю) выведи 'неверно'

*/

if (a > 0) {alert('Верно! '); } else {alert('Неверно! '); } //выведет 'Верно! '

var a = - 3;

 

/*

    Если переменная a больше или равна нулю, то выведи 'верно',

    иначе (если меньше нуля) выведи 'неверно'

*/

if (a > = 0) {alert('Верно! '); } else {alert('Неверно! '); } //выведет 'Неверно! '

Сокращенный синтаксис

В случае, если в фигурных скобках if или else будет только одно выражение, можно эти фигурные скобки не писать:

 

//Полный вариант:

if (a == 0) {alert('Верно! '); } else {alert('Неверно! '); }

 

//Уберем скобки после if:

if (a == 0) alert('Верно! '); else {alert('Неверно! '); }

 

//Уберем скобки после else:

if (a == 0) {alert('Верно! '); } else alert('Неверно! ');

 

/*

    Уберем скобки и после if, и после else

    (обратите внимание на точку с запятой - она осталась):

*/

if (a == 0) alert('Верно! '); else alert('Неверно! ');

Не равно

Для того, чтобы спросить 'не равно', существует операторы! = и! ==. Первый игнорирует различие в типах, а второй - нет.

 

var a = 0;

 

/*

    Если переменная a НЕ равна нулю, то выведи 'верно',

    иначе (если равна нулю) выведи 'неверно'

*/

if (a! = 0) alert('Верно! '); else alert('Неверно! '); //выведет 'Неверно! ', так как a равна 0

a = 1;

 

/*

    Если переменная a НЕ равна нулю, то выведи 'верно',

    иначе (если равна нулю) выведи 'неверно'

*/

if (a! = 0) alert('Верно! '); else alert('Неверно! '); //выведет 'Верно! ', так как a равна 1

var a = '0';

 

/*

    Если переменная a НЕ равна нулю, то выведи 'верно',

    иначе (если равна нулю) выведи 'неверно'

*/

if (a! = 0) alert('Верно! '); else alert('Неверно! ');

 

/*

    Выведет 'Неверно! ', так как a равно '0',

    а различие в типах игнорируется.

*/

var a = '0';

 

/*

    Если переменная a НЕ равна нулю, то выведи 'верно',

    иначе (если равна нулю) выведи 'неверно'

*/

if (a! == 0) alert('Верно! '); else alert('Неверно! ');

 

/*

    Выведет 'Верно! ', так как a равно '0',

    а это не равно 0 при сравнении по типу.

*/

Все операции сравнения

Возможные операции сравнения, которые можно использовать внутри if:

a == b	a равно b
a === b	a равно b и они одинаковы по типу
a! = b	a не равно b
a! == b	a не равно b или a равно b, но ни разные по типу
a < b	a меньше b
a > b	a больше b
a < = b	a меньше или равно b
a > = b	a больше или равно b

Несколько условий сразу

Иногда может быть нужно составить какое-то сложное условие, например, пользователь вводит месяц своего рождения и вам нужно проверить, что введенное число больше или равно 1 и меньше либо равно 12 (так как в году 12 месяцев).

Для этого существуют операторы & & (логическое И) и || (логическое ИЛИ).

 

var a = 3;

var b = - 3;

//Если a больше нуля и b одновременно меньше нуля то...

if (a > 0 & & b < 0) alert('Верно! '); else alert('Неверно! '); //выведет 'Верно! '

 

var a = 3;

//Если a больше или равно 1 и меньше или равно 12 то...

if (a > = 1 & & a < = 12) alert('Верно! '); else alert('Неверно! '); //выведет 'Верно! '

 

var a = - 3;

var b = - 3;

/*

    Если a больше нуля ИЛИ b меньше нуля - хотя бы один из них, то...

    выведет 'Верно! ', так как хотя a и не больше нуля,

    но одно из условий - b < 0 - выполнится!

*/

if (a > 0 || b < 0) alert('Верно! '); else alert('Неверно! ');

Вложенные if

Предположим, нам необходимо спросить у JavaScript такую вещь: если переменная a не определена, то вывести 'Введите a', если определена, то проверить - больше нуля a или нет. Если больше нуля - то вывести 'Больше нуля! ', если меньше - вывести 'Меньше нуля'.

Одной конструкцией if здесь не обойтись, нужно использовать две таким образом, чтобы одна была внутри другой:

 

if (a === undefined) { //если переменная a не определена

    alert('Введите a! ');

} else { //если переменная a НЕ пуста

    if (a > 0) { //спрашиваем, больше ли нуля переменная a

            alert('Больше нуля! ');

    } else {

            alert('Меньше нуля! ');

    }

}

Конструкция else if

Недостатком конструкции предыдущего примера является большое количество фигурных скобок.

Чтобы избавиться от них, можно пользоваться специальной конструкцией else if, которая представляет собой одновременно и else, и начало вложенного if:

 

//Решение предыдущей задачи через конструкцию else if:

if (a === undefined) {

    alert('Введите a! ');

} else if (a > 0) {

    alert('Больше нуля! ');

 } else {

    alert('Меньше нуля! ');

}

 

Можно использовать несколько else if, но злоупотреблять этим не стоит (лучше будет воспользоваться конструкцией switch-case, о которой ниже).

Несколько if

Пусть у нас есть такая задача: сайт поддерживает 3 языка - русский, английский, немецкий. Переменная lang может принимать 3 значения - 'ru', 'en' и 'de'. В зависимости от значения переменной lang следует вывести фразу на одном из языков.

Решение: можно было бы воспользоваться вложенными ифами или else if. Выглядело бы это примерно так:

 

//Решение задачи через else if – не самое удачное:

if (lang == 'ru') { //фраза на русском

    alert('Русский текст');

} else if (lang == 'en') { //фраза на английском

    alert('Английский текст');

} else if (lang == 'de') { //фраза на немецком

    alert('Немецкий текст');

}

 

Такое решение не слишком красивое - блок else здесь не нужен! Проще всего будет написать не один длинный if с несколькими else, а несколько if вообще без else:

 

//Решение задачи через несколько if – оно намного лучше:

if (lang == 'ru') { //фраза на русском

    alert('Русский текст');

}

if (lang == 'en') { //фраза на английском

    alert('Английский текст');

}

if (lang == 'de') { //фраза на немецком

    alert('Немецкий текст');

}

 

/*

    В данном коде сработает только один из ифов,

    так как переменная lang может иметь только одно из значений

*/

 

Однако это решение тоже не слишком удобно. Представьте, что у вас будет не три языка, а 10 - вам придется написать 10 конструкций if.

Для таких случаев существует конструкция switch-case.

Конструкция switch-case

Данная конструкция представляет собой альтернативу if-else, ее рекомендуется использовать в случае множественного выбора (например, 10 различных языков, как в нашей задаче).

Изучите ее синтаксис:

 

switch (переменная) {

    case 'значение1':

            здесь код, который выполнится в случае, если переменная имеет значение1;

    break;

    case 'значение2':

            здесь код, который выполнится в случае, если переменная имеет значение2;

    break;

    case 'значение3':

            здесь код, который выполнится в случае, если переменная имеет значение3;

    break;

    default:

            этот код выполнится в случае, если переменная не совпала ни с одним значением;

    break;

}

 

Решим нашу задачу с тремя языками с помощью данной конструкции:

switch (lang) {

    case 'ru':

            alert('Русский текст');

    break;

    case 'en':

            alert('Английский текст');

    break;

    case 'de':

            alert('Немецкий текст');

    break;

    default:

            alert('Данный язык не поддерживается');

    break;

}

Цикл while

Цикл while будет выполняться до тех пор, пока верно (истинно) выражение, переданное ему параметром. Смотрите синтаксис:

 

while ( пока выражение истинно ) {

    выполняем этот код циклически;

    в начале каждого цикла проверяем выражение в круглых скобках

}

/*

    Цикл закончится, когда выражение перестанет быть истинным.

    Если оно было ложным изначально - то он не выполнится ни разу!

*/

 

В принципе, цикл while может выполняться бесконечно (но это приведет к зависанию скрипта! ), достаточно передать ему выражение, которое никогда не станет ложным. Например, так:

 

var test = true;

while (test === true) {

    /*

            Написанный здесь код будет выполняться 'вечно'

            (пока скрипт не будет остановлен принудительно).

            Не стоит это повторять - это приведет к зависанию сервера!

    */

}

 

Давайте последовательно выведем с помощью цикла while числа от одного до пяти:

 

var i = 0; //счетчик цикла

while (i < 5) {

    /*

            С помощью оператора ++ увеличиваем i на единицу

            при каждом проходе цикла.

    */

    i ++;

    alert(i);

}

 

Обратите внимание на переменную i – она является так называемым счетчиком цикла. Счетчики используются для того, чтобы подсчитывать, сколько раз выполнился цикл. Кроме того, они выполняют вспомогательную роль - в нашей задаче мы использовали счетчик, чтобы вывести цифры от 1 до 5.

Для счетчиков принято использовать буквы i, j и k.

Цикл for

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

 

for ( начальные команды; условие окончания цикла; команды после прохода цикла ) {

    тело цикла

}

 

Начальные команды - это то, что выполнится перед стартом цикла. Они выполнятся только один раз. Обычно там размещают начальные значения счетчиков, пример: i = 0.

Условие окончания цикла - пока оно истинное, цикл будет работать, пример: i < 10.

Команды после прохода цикла - это команды, которые будут выполнятся каждый раз при окончании прохода цикла. Обычно там увеличивают счетчики, например: i++.

Давайте с помощью цикла for выведем последовательно числа от 0 до 9:

 

/*

    В начале цикла i будет равно нулю,

    цикл будет выполнятся пока i < 10,

    после каждого прохода к i прибавляется единица:

*/

for (var i = 0; i < 10; i ++ ) {

    alert(i); //выведет 0, 1, 2... 9

}

Цикл без тела

Фигурные скобки в циклах можно не указывать - в этом случае цикл выполнит только одну строку под ним (не рекомендую так делать, часто приводит к ошибкам):

 

for (var i = 0; i < 10; i ++ ) //< --- точки с запятой нет

    alert(i); //выведет 0, 1, 2... 9

 

А вот если после ) поставить точку с запятой - цикл закроется и следующая строка в него не попадет, получится так называемый цикл без тела, который в нашем случае просто прокрутится и в результате изменит значение переменной i:

 

for (var i = 0; i < 10; i ++ ); //< --- точка с запятой есть

    alert(i); //выведет 9

 

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

Цикл for для массивов

С помощью цикла for можно последовательно перебрать элементы массива. Делается это следующим образом:

var arr = [1, 2, 3, 4, 5];

for (var i = 0; i < = arr.length-1; i ++ ) {

    alert(arr[i]); //выведет 1, 2, 3, 4, 5

}

 

Ключевым моментом является то, что мы делаем перебор от нуля до длины массива минус 1 (так как номер последнего элемента массива на единицу меньше его длины).

Можно не отнимать единицу, а место < = сделать <:

 

var arr = [1, 2, 3, 4, 5];

for (var i = 0; i < arr.length; i ++ ) {

    alert(arr[i]); //выведет 1, 2, 3, 4, 5

}

Цикл for-in

Для перебора объекта используется так называемый цикл for-in. Давайте посмотрим, как он работает.

 

Пусть у нас дан такой объект:

 

var obj = {Коля: 200, Вася: 300, Петя: 400};

 

Давайте выведем его ключи. Для этого используем такую конструкцию: for (key in obj), где obj - это объект, который мы перебираем, а key - это переменная, в которую последовательно будут ложится ключи объекта (ее название может быть любым, какое придумаете - такое и будет).

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

 

Итак, вот так мы выведем все ключи объекта (по очереди):

 

var obj = {Коля: 200, Вася: 300, Петя: 400};

for (key in obj) {

    alert(key); //выведет 'Коля', 'Вася', 'Петя'

}

 

Если нам нужны не ключи, а значения, нужно обратиться к нашему объекту по ключу, вот так: obj[key].

 

Как это работает: в переменной key сначала будет 'Коля', то есть obj[key] в данном случае все равно, что obj['Коля'], при следующем проходе цикла в переменной key будет 'Вася' и так далее.

 

Итак, выведем все элементы объекта:

 

var obj = {Коля: 200, Вася: 300, Петя: 400};

for (key in obj) {

    alert(obj[key]); //выведет 200, 300, 400

}

Инструкция break

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

Зачем такое может понадобится? Например, перед нами стоит задача выводить элементы массива до тех пор, пока не встретится число 3. Как только встретится - цикл должен завершить свою работу.

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

Давайте решим приведенную выше задачу - оборвем цикл, как только нам встретится число 3:

 

var arr = [1, 2, 3, 4, 5];

for (var i = 0; i < arr.length; i ++ ) {

    if (arr[i] === 3) {

            break; //выходим из цикла

    } else {

            alert(arr[i]);

    }

}

Инструкция continue

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

Массив. reverse ();

Давайте перевернем массив:

var arr = ['a', 'b', 'c'];

arr.reverse();

console.log(arr);

Результат выполнения кода:

['c', 'b', 'a']

В переменную newArr также запишется перевернутый массив:

var arr = ['a', 'b', 'c'];

var newArr = arr.reverse();

console.log(newArr);

Результат выполнения кода:

['c', 'b', 'a']

Давайте перевернем символы строки в обратном порядке. Для этого разобьем строку в массив с помощью split по разделителю '' (этот разделитель положит каждый символ строки в отдельный элемент массива), перевернем этот массив с помощью reverse и затем сольем перевернутый массив обратно с помощью join:

var str = '123456789';

var arr = str.split('');

var arr = arr.reverse();

var result = arr.join('');

document.write(result);

Результат выполнения кода:

987654321

Упростим решение предыдущей задачи - сольем все команды в цепочку:

var str = '123456789';

var result = str.split('').reverse().join('');

document.write(result);

Результат выполнения кода:

987654321

 

Метод push добавляет неограниченное количество элементов в конец массива. Элементы передаются параметром метода.

Метод изменяет исходный массив. Возвращает новую длину массива.

См. также метод unshift, который добавляет элементы в начало массива.

См. также методы shift и pop, которые удаляют элементы из массива.

массив. push (элемент, элемент, элемент...);

В данном примере в исходный массив добавлено 2 новых элемента и выведено содержимое нового массива:

var arr = ['a', 'b', 'c'];

arr.push('d', 'e');

console.log(arr);

Результат выполнения кода:

['a', 'b', 'c', 'd', 'e']

В данном примере в исходный массив добавлено 2 новых элемента и выведена новая длина массива:

var arr = ['a', 'b', 'c'];

var length = arr.push('d', 'e');

document.write(length);

Результат выполнения кода:

5

Заполним массив числами от 1 до 10:

var arr = [];

 

for (var i = 1; i < = 10; i ++ ) {

    arr.push(i)

}

 

console.log(arr);

Результат выполнения кода:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

 

Метод unshift добавляет любое количество новых элементов в начало массива.

Метод изменяет исходный массив. Возвращает новую длину массива.

См. также метод push, который добавляет элементы в конец массива.

См. также методы shift и pop, которые удаляют элементы из массива.

массив. unshift (элемент, элемент, элемент...);

В данном примере в начало исходного массива было добавлено еще 2 новых элемента и выведен уже новый, измененный массив:

var arr = ['a', 'b', 'c'];

arr.unshift('d', 'e');

console.log(arr);

Результат выполнения кода:

['a', 'b', 'c', 'd', 'e']

В данном примере в начало исходного массива было добавлено еще 2 новых элемента и выведена новая длина массива:

var arr = ['a', 'b', 'c'];

var length = arr.unshift('d', 'e');

document.write(length);

Результат выполнения кода:

5

 

Метод shift удаляет первый элемент массива.

12345678910Следующая ⇒

Поделиться: