Анимации

Анимации стъпка по стъпка, които показват какво прави JavaScript "под капака": как engine-ът чете кода, къде живеят стойностите в паметта, как се изчислява един израз, как се изпълнява loop или извикване на функция.

Всяка анимация има няколко сценария (табовете горе). Линковете по-долу отварят един сценарий в нов таб.

• Следваща стъпка: стрелка надясно или Space. Назад: стрелка наляво. Начало: Home. Автоматично: P.
• file.html#3 отваря сценарий 3, file.html#3.5 отваря сценарий 3 на стъпка 5.
• Сценариите, отбелязани с (advanced), навлизат по-дълбоко.

На английски и на български

Всяка анимация има английска и българска версия. Бутонът EN / BG горе в анимацията сменя езика и запазва текущата стъпка.

Всички анимации на една страница - на български

Занятие 1 - Първи стъпки

Как JavaScript изпълнява кода ви - от текста във файла до резултата: tokens, синтактичното дърво (AST), bytecode и "горещ" код във V8. 1. Преводачи, 2. Tokens, 3. AST, 4. Двете фази, 5. Engine и среда, 6. Bytecode (advanced), 7. Горещ код (advanced)

Занятие 2 - Variables, типове и оператори

Variables в паметта - деклариране, присвояване и копиране на стойности. 1. Деклариране и присвояване, 2. Копиране на стойност, 3. x = x ** 2, 4. Типове стойности, 5. const, 6. Обекти и референции (advanced)

Числата в паметта - битове, защо 0.1 + 0.2 не е 0.3, големи цели числа, NaN и Infinity. 1. Битове и цели числа, 2. Дроби и 0.1, 3. 64 бита (advanced), 4. 0.1 + 0.2, 5. Големи цели числа (advanced), 6. NaN и Infinity, 7. Лаборатория

Как се изчислява един израз - приоритет, асоциативност, i++ и ++i, нарисувани като дърво. 1. Приоритет, 2. Асоциативност, 3. Присвояването е израз, 4. i++ и ++i, 5. Ред на изчисляване (advanced), 6. Statement срещу expression (advanced)

Типове, сравнения и логика - сценарии 1 и 2 (занятие 3 използва останалите). 1. Операторът +, 2. От string към number

Scope на variables - само сценарий 4 (занятие 5 използва останалите). 4. Без деклариране и "use strict"

Занятие 3 - Сравнения, логика, условия и loops

Типове, сравнения и логика - как JavaScript преобразува типовете при сравнение и как работят && / ||. 3. == и ===, 4. Сравняване на strings, 5. Truthy и falsy, 6. Short-circuit: && и ||, 7. Тернарен оператор (advanced)

Loops стъпка по стъпка - блок-схема с движещ се маркер за if, for, while, do...while, break, continue и switch. 1. if / else if, 2. Loop-ът for, 3. while и безкрайният loop, 4. do...while, 5. break и continue, 6. Вложени loops (advanced), 7. switch без break (advanced)

Още: Числата в паметта - 4. 0.1 + 0.2 и 6. NaN и Infinity; Как се изчислява един израз - 6. Statement срещу expression.

Занятие 4 - Arrays и списъци от записи

Arrays в паметта - индекси, length, добавяне и премахване на елементи, референции, arrays от arrays. 1. Индекси, 2. Извън границите, 3. Array-ят е обект, 4. push / pop / unshift / shift, 5. Референции, 6. Двумерен array (advanced), 7. Общ ред (advanced)

Алгоритми с arrays - обхождане на array, сума, максимум, филтриране, търсене, заедно с честите бъгове. 1. Обхождане с for, 2. Обратен ред, 3. Сума на елементите, 4. Най-голям елемент, 5. Филтриране в нови arrays, 6. Търсене с break (advanced), 7. Двумерен array (advanced)

Методи на arrays - копиране и изрязване на arrays, търсене, разделяне на strings, стойности, пакетирани в един string, и списък от записи. 1. slice и at, 2. splice, 3. indexOf и includes, 4. split и join, 5. Пакетирани стойности, 6. Списък от записи, 7. splice в loop (advanced)

Занятие 5 - Функции и четене на по-стар код

Стекът на извикванията (call stack) - какво става, когато една функция бъде извикана и когато върне резултат. 1. Извикване на функция, 2. Аргументи, 3. return, 4. Вложени извиквания, 5. Стойности по подразбиране, 6. Рекурсия (advanced), 7. Препълване на стека (advanced)

Scope на variables - къде се търси едно име: локално, във външния scope, глобално; let срещу var в блок. 1. Глобален и локален, 2. Веригата от scopes (scope chain), 3. Засенчване (shadowing), 4. Без деклариране, 5. Block scope: let и var, 6. IIFE (advanced), 7. Лексикален scope (advanced)

Hoisting: двете фази на изпълнение - защо един var е undefined преди своя ред и какво е TDZ на let / const. 1. var и undefined, 2. Function declaration, 3. Function expression, 4. let / const и TDZ, 5. Hoisting във функция, 6. let в блок (advanced), 7. TDZ: време, не място (advanced)

Функциите са стойности - функция редом с число и array; функции във variables, arrays и обекти; callbacks; arrow functions; closures. 1. Като 5 и [1, 2, 3], 2. Функцията е стойност, 3. В arrays и обекти, 4. Callbacks, 5. Функция, която връща функция, 6. Arrow functions, 7. Closure (advanced)

Функциите и данните - какво получава функцията: копие на число или string, референция към array или обект; чисти функции, callbacks, helper функции в rule. 1. Копие на стойността, 2. Същият array, 3. Промяна или замяна, 4. Промяна на отчета, 5. Callback, извикване по извикване, 6. Helper функция в rule, 7. Плитко копие (advanced)

Занятие 6 - Обекти

Обектите в паметта - точка и скоби, дълбоки пътища, ?. и ??, dictionaries, helper за пътища, копия, this в метод. 1. Точка или скоби, 2. Дълъг път, 3. Безопасен достъп: ?. и ??, 4. Dictionary, 5. Helper за пътища: get, 6. Копия, 7. this в метод (advanced)

Също: Variables в паметта - 6. Обекти и референции и Arrays в паметта - 5. Референции: две variables могат да сочат към един и същ обект.