Програмирай с JavaScript

Съдържание

Въведение………9

Добре дошли в JavaScript програмирането!………10
Защо JavaScript?………10
Какво са програмите?………11
Програма ли е уебсайтът?………11
HTML………11
CSS………12
JavaScript………12
Основите………12
Променливи………13
Типове данни………13
Структури данни………13
Условни изрази………13
Цикли………14
Термини, които трябва да знаете………14
Алгоритъм………14
Синтаксис………14
Абстракция………15
Псевдокод………15

JavaScript: Настройки………16
Писане на програми………16
Команден ред (Git Bash за Windows, Terminal за MacOS)………16
Текстов редактор (VS код)………16
JavaScript среда за изпълнение (Node.js)………17
Начини за изтегляне………17
Важни инструкции за изтеглянето………17
Настройки за Windows (PC) среда………17
Git Bash………18
VS Code………18
Node.js………18
Настройки за Mac среда………18
terminal………19
VS Code………19
Node.js………19
Използване на редактора за код………19
Редактор на код: автоматично форматиране………19
Редактор на код: червена вълнообразна линия………20
Настройка на терминала………20
Инструкции за VS Code терминала само за потребителите на Windows………20
Създайте JavaScript папка………21
Инсталиране на JavaScript пакети………22
Създаване на файл………23
Проверка………23
Писане на първия ви код………24
Console.log………24
Да напишем малко код на JavaScript!………24
Да стартираме малко JavaScript!………24
Бъгове………25
Бъговете действат обезсърчаващо………26

Променливи и типове данни………27
Структура на кода………27
Инструкции………27
Точка и запетая………27
Коментари………28
Отстояния………28
Променливи………28
Деклариране………29
Присвояване на стойност………29
Присвояване на стойност и деклариране в една инструкция………29
Присвояване на нова стойност………29
Изрази с променливи………30
Ключовите думи не могат да бъдат променливи………30
Конвенции за имената на променливите………30
Типове данни………31
Число………31
Оператор за нарастване………31
Бърз начин за математически операции на променлива със самата себе си………32
NAN: не е число………32
Низове………33
Конкатенация на низове………33
Бърз оператор за конкатенация на низ със самия себе си………33
Екраниращи символи………34
Числа и низове: разлика………34
Логически тип………35
null………35
undefined………35
Неявно превръщане на типа………36
Объркване, вследствие на неявното превръщане на типовете………36
Структури данни………37
Обекти………37
Масиви………38
Данни и променливи в действие………39
Да преговорим: потвърждение на местоположението на файла………40
Да преговорим: потвърдете местоположението в терминала………40
Потвърждение на интерактивността………41
Стартиране на кода………42
Добавяне на данни………42
Отпечатване на забавни низове………43
Стартирайте файла отново………43
(Де)Кодирай!………44
Дебъгинг………45
Чеклист на програмиста » Какво научихме досега?………46

Условни конструкции………47
Проверка на данните и валидация………47
Оператори за сравнение………47
Оператор за равенство………47
Стриктен оператор за равенство………48
Оператор за неравенство………48
Стриктен оператор за неравенство………48
Релационни оператори………49
Оператор по-малко………49
Оператор по-голямо………49
Логически оператори………50
Оператор ИЛИ………50
Оператор И………50
Оператор за отрицание………50

Комбиниране на логически оператори и оператори за сравнение………50
Валидиране на данни………51
Оператор TYPEOF ………51
Оператор INSTANCEOF ………52
Условни конструкции………53
Условни конструкции за разклонение………53
Изразът IF ………53
Изразът ELSE………53
Изразът ELSE IF………54
Условни конструкции в
действие………54
Различни начини за формулиране на условия………55
(Де)Кодирай!………57
Дебъгинг………57
Чеклист на програмиста » Какво научихме досега?………59

Цикли………60
За какво се използват циклите?………60
Цикъл While ………61
Спиране на цикъла………61
Логика на цикъла………61
Разбиране на всяка итерация………64
Цикъл For………65
Структура………65
Цикъл WHILE срещу цикъл FOR………65
Ключови думи за управление на цикъла………66
Continue………66
Break………68
Цикли в действие………69
Цикъл………69
(Де)Кодирай!………70
Дебъгинг………72
Чеклист на програмиста » Какво научихме досега?………73

Функции………74
За какво се използват функциите?………74
Повторно използване на код………74
Абстракция………74
Решаване на сложни задачи………75
Създаване на функция………75
Деклариране на функция………75
Функционален израз………75
Извикване на функция………76
Инструкция за резултата………76
Параметри на функцията………76
Преждевременно преустановяване с Return………77
Защита на функцията събиране от неявно преобразуване на типовете………77
Обхват………78
VAR: обхват на функцията………78
Лексикален обхват………79
Поведение на е-спортист………80
Взел ли е участие даден играч?………81
Структура данни в друга структура данни………83
Брой на изиграните турнири………83
Брой на спечелените турнири………84
Рейтинг на играч………86
Кой трябва да играе?………86
Обобщение………88
(Де)Кодирай!………89
Дебъгинг………89
Познай името на котката ми………91
Чеклист на програмиста » Какво научихме досега?………95

Обработка на данни………96
Числа………96
Parseint………96
ParseFloat………96
Низове………97
Достъп по индекс………97
toLowerCase и toUpperCase………97
Масиви………97
Вмъкване………98
Push………98
Pop………98
Shift………98
Unshift………99
Обекти………99
Добавяне и промяна………99
Изтриване………99
Модификация………100
Работа с данни в действие………101
Създаване на нов масив………101
Обновяване на обекти в масив………104
(Де)Кодирай!………106
Дебъгинг………108
Чеклист на програмиста » Какво научихме досега?………110

Обектно ориентирано програмиране………111
Обектите като същности………111
Кучетата са обекти от реалния свят………111
Кучетата като индивидуалности………111
Инстанция на JavaScript обект………112
Кучетата като JavaScript обекти………112
Свойство на обект………112
Метод на обект………112
Имплементиране на JavaScript обект………112
Функция конструктор………112
Свойство на обект………113
Методи на обекта………113
Инстанционни променливи………114
Модифициране на инстанционна променлива………114
Обектно ориентирано програмиране в действие………115
Свойства на кучето………115
Методи на кучето………116
(Де)Кодирай!………118
Дебъгинг………119
Чеклист на програмиста » Какво научихме досега?………121

JavaScript и уеб………122
Ниво на абстракция на мрежата………122
HTML: език за маркиране на хипертекст………122
HTML файл………123
HTML таг………123
HTML таговете, които
ще използваме………123
HTML атрибутите class и id………124
Web браузър………124
Инструменти за разработчика в уеббраузъра………125
Документ………128
HTML селектори………129
document.getElementsByClassName ………129
document.getElementById………130
Обработка на HTML………132
Достъп до текст с innerHTML………132
Инжектиране на нов текст в innerHTML………133
Обновяване на атрибута id………133
Обновяване на атрибута class………133
С каква цел се променя
HTML класът?………135
Създаване на HTML елементи………135
document.createElement ………135
Добавяне на HTML към страницата………136
Премахване на HTML от страницата………137
Стартиране на JavaScript в HTML………139
HTML script таг………139
Масово актуализиране на HTML………140
Импортиране на JavaScript код………142
JavaScript слушатели на събития (Event Listeners)………144
Скриване на елемент посредством CSS………147
Прилагане на CSS към HTML………147
Показване и скриване на елементи посредством CSS………149
Специфики на браузъра при изпълнението на JavaScript………150
Писане на страницата………150
(Де)Кодирай!………153
Дебъгинг………154
Чеклист на програмиста » Какво научихме досега?………155

Време е за игри………156
„Бесеница“ за браузър………156
„Бесеница“: терминал срещу браузър………156
Имплементиране на „Бесеница“………157
Графика на играта………158
HTML файл………158
Прогрес на обесения………160
Използваните букви………161
Тайната дума………161
Екранът за край на играта………161
CSS файл………162
CSS файлът на играта………164
Псевдокод на играта………165
Имплементиране на играта………166
Спомагателни функции………166
Инициализиране на обекта на човечето на бесилката………167
Добавяне на тайната дума в HTML………167
Слушател на събитието keydown ………168

Последна спирка: Надстройка на уебсайт………182
Непълен код за списък със задачи………182
Нито един от бутоните не работи………187
Спомагателни функции………187
destroyInnerContent………187
getParentDiv ………188
getHtmlElementHeight………188
getTodoText………188
Изтриване на запис от списъка ………188
Редактиране на запис в списъка………189
Създаване на редактируем текст………189
Обновяване на текста след редактиране………191
Отмяна на промените………192

Поздравления!………194

Отговори………195
Глава 3: Решения ………195
Глава 4: Решения………198
Глава 5: Решения………200
Глава 6: Решения………203
Глава 7: Решения………205
Глава 8: Решения ………208
Глава 9: Решения ………211

Речник на термините………213
Ресурси………217
Уебсайтове………217
Книги………217
Благодарности………218
За автора………218