1. Първи стъпки

Занятие 1упражнения: настройте инструментите и homework repositorydoc: примерният JSON документ

Днес ще се научите да:

• се ориентирате в курса: целта, занятията, материалите, курсовия проект;
• настроите инструментите: Node.js, VSCode, Git и акаунт в GitHub;
• работите във VSCode: Explorer, редакторът, терминалът, Command Palette, разширенията;
• пазите работата си с Git и да я споделяте в GitHub: git init, add, commit, status, log, .gitignore, remote, push, clone, pull;
• казвате какво е JavaScript, къде се изпълнява и откъде идва;
• изпълнявате JavaScript на три места: в браузъра, с Node.js в терминала и с бутоните Run на този сайт;
• обяснявате как се изпълнява една програма: машинен код, компилатор срещу интерпретатор, JavaScript engine;
• описвате структурата на една програма - statements, expressions, блокове - и какво е variable.

Накъде отива курсът - накрая ще четете и пишете с лекота правила за проверка като това. Днес трябва само да разпознаете частите:

const MODELS = ["XR-210", "XR-220"];           // data the rule needs

function rule(doc) {                           // the engine calls this for every report
    const model = doc.overview.model;          // read a value from the report
    if (!MODELS.includes(model)) return;       // not our model: stop

    emit(doc.status.device_alias, {            // create an alert
        "Model": model,
        "Version": doc.overview.version
    });
}

• doc е отчетът на едно устройство - JSON документ.
• rule(doc) е правило за проверка: функция, която разглежда отчета и решава.
• emit(...) създава alert, когато проверката открие проблем.

Всяка лекция добавя частите, които ви трябват, за да пишете повече от това.

1. За курса

Преподавателят

Ива Попова - LinkedIn

Преподавателски опит

• 5 години като асистент в Технически университет - София: "Програмни езици", "Дискретна математика", "Експертни системи и изкуствен интелект".
• 7+ години към водещи частни учебни центрове: "Databases (MySQL)", "Front-End Development", "Python", "Machine Learning".
• Повече от 650 успешно завършили курсисти.
• Специализирани корпоративни обучения за: A1 Bulgaria, Advanced Nutrients, Advent Group, BILLA Bulgaria, BORICA, CDS Bulgaria, Debt Collection Agency (DCA), DIGITALL, IBM Bulgaria, ICT Strypes, ISI Emerging Markets (EMIS), Javelin Group, KITT.bg, Национален осигурителен институт (НОИ), Software AG, TAL Engineering, UniCredit Bulbank, Vivacom, VMware.

Професионален опит

• 7+ години като софтуерен инженер (4 от които като старши инженер и ръководител на екип) в международни IT компании: Comptel (днес част от Nokia), Internet Securities, Datamax, Experian.
• 6+ години като изследовател и консултант в стартъп компания в областта на изкуствения интелект: анализ на настроения (sentiment analysis), онтологии, обработка на естествен език (NLP) и големи езикови модели (LLM).

Образование

• Средно образование: Национална професионална гимназия по компютърни технологии и системи (НПГ по КТС) - Правец.
• Магистър инженер по компютърни системи, Технически университет - София.
• Докторант по системи с изкуствен интелект, Технически университет - София.

Целта

Задълбочено и солидно познаване на основите на JavaScript. Не само какво да напишете, но и как и защо работи кодът - за да четете и пишете JavaScript с лекота и увереност, във всеки проект:

• ядрото на езика: стойности и типове, оператори, условия и loops, arrays, функции, обекти, strings, regular expressions, дати и числа, JSON, модули и грешки;
• какво се случва под капака: стойности и референции в паметта, scope и closures, call stack-ът;
• модерният JavaScript и по-старият стил, който срещате в съществуващия код - за да го четете с лекота и да го модернизирате;
• ежедневните инструменти: Node.js, VSCode, Git и GitHub, тестове, JSDoc типове, ESLint и Prettier.

Приложено към вашата работа: да четете и пишете уверено правила за проверка върху големи, дълбоко вложени JSON документи и да изградите, тествате и документирате малка библиотека с helper функции за JSON-а на един продукт. Фокусът е там, където работата ви има най-голяма нужда: функции, arrays, обекти, методи и properties.

Занятията

10 занятия по 4 учебни часа. Пълният план е на страницата Програма:

Занятие	Тема
1	Първи стъпки (днес)
2 - 3	Variables, типове, оператори; условия и loops
4	Arrays и списъци от записи
5	Функции и четене на по-стар код
6	Обекти: дълбоки пътища, dictionaries, форми на данните
7	Методи на arrays: трансформиране, групиране и индексиране на данни; старт на проекта
8	Strings, регулярни изрази, дати и числа
9	JSON, Node.js, модули и грешки; локално изпълнение на правила
10	Тестове, JSDoc типове и качество на кода; работа с Git; преглед на проекта

Всеки пример е показан върху данните, с които работите: JSON отчетът на едно устройство (doc) и правило за проверка. Отчетите в този курс са измислени - имената и стойностите са измислени, формите са реалистични.

Как работим

• Теория с много примери. Всяка страница с лекция има примери, които се изпълняват: натиснете Run под примера, променете го с Edit, изпълнете го отново (вижте Как да използвате тези страници).
• Упражнения във VSCode. Всяко занятие има задачи за упражнение, които се проверяват сами и отпечатват OK или FAIL, и кратко домашно. Домашното се преглежда в началото на следващото занятие.
• Въпроси по всяко време. Не чакайте края на занятието - прекъснете с въпрос, щом нещо не е ясно. Обратна връзка по мейл също е добре дошла по всяко време: какво помага, какво не, какво е трудно.
• Правенето е по-силно от слушането. Хората запомнят много повече от това, което упражняват и обясняват на другите, отколкото от това, което само чуват или четат. Затова повечето време отива за примери, задачи и code review.

Материалите

Какво	Къде
Лекциите (този сайт)	https://ivapopova-courses.github.io/JS-Basics-Practical-IBM-Slides/
Задачи за упражнение и домашни	https://github.com/ivapopova-courses/JS-Basics-Practical-IBM-Homework
Кодът, писан в час	https://github.com/ivapopova-courses/JS-Basics-Practical-IBM-Labs
Анимации стъпка по стъпка	Анимации
Курсовият проект	Курсов проект

Курсовият проект

Малка библиотека с helper функции за JSON-а на един продукт, която прави четенето на properties в правилата за проверка по-просто и по-безопасно. Тя расте по време на курса - първата функция идва в занятие 5 - и се представя в занятие 10. Започнете да мислите още сега: кой продукт, кои отчети, кои редове пишете отново и отново в правилата си?

2. Настройка на средата

Трябват ви четири неща. Инсталирайте ги преди занятие 2.

Инструмент	За какво	Откъде	Проверка
Node.js (версията LTS)	изпълнява JavaScript файлове на компютъра ви	https://nodejs.org	node -v
VSCode	редакторът, който използваме в курса	https://code.visualstudio.com	отворете го
Git	контрол на версиите: пази историята на файловете ви	https://git-scm.com/downloads	git -v
Акаунт в GitHub	пази вашите repositories онлайн	https://github.com	влезте в него

Проверете инсталациите в терминал (на Windows: PowerShell или Command Prompt; във VSCode: Terminal > New Terminal):

node -v      # v24.x.x (any current LTS version works)
npm -v       # npm comes with Node.js
git -v       # git version 2.x.x

Node.js LTS

Инсталирайте версията LTS ("long-term support", с дългосрочна поддръжка) на Node.js - тя е стабилната. Курсът е тестван с Node.js 24.

Папка за курса

Дръжте курса в една папка, например JS_Basics_Course/. В нея - repositories, които клонирате на това занятие (раздел 4), и папка за ваши собствени опити:

JS_Basics_Course/
|-- JS-Basics-Practical-IBM-Homework/   # practice tasks and homework (section 4)
|-- JS-Basics-Practical-IBM-Labs/       # the code written in class
`-- playground/                         # your own experiments

Имена на файлове и папки

Имена, които работят навсякъде, ви спестяват проблеми по-късно - на сървърите, в Git, в терминала:

• използвайте само латински букви, цифри, - и _;
• без интервали: разделяйте думите с -, _ или camelCase (versionCheck.js);
• помнете, че Linux (и повечето сървъри) третира Rule.js и rule.js като два различни файла - Windows не.

3. Писане на код: VSCode

Текстови редактори и IDE

Текстовият редактор редактира текстови файлове и оцветява синтаксиса. IDE (Integrated Development Environment, интегрирана среда за разработка) добавя инструменти: изпълнение и debugging, тестване, рефакториране, контрол на версиите, търсене и навигация в целия проект.

	Примери
Текстови редактори	Notepad++ (Windows), Sublime Text, Visual Studio Code
IDE	WebStorm, IntelliJ IDEA, Eclipse, NetBeans, Visual Studio

VSCode е по средата: лек редактор, който става IDE с разширения. Безплатен е и open-source, работи на Linux, Windows и macOS, има отлична поддръжка на JavaScript още при инсталация, вграден терминал, debugger и интеграция с Git, и огромен пазар с разширения. Използваме го в курса; най-важното е да овладеете добре своя редактор.

Частите на прозореца

1. Activity Bar (иконите вляво): Explorer, Search, Source Control (Git), Run and Debug, Extensions.
2. Explorer: файловете на отворената папка. Отворете папка с File > Open Folder - VSCode работи най-добре с цяла папка (workspace), а не с отделни файлове.
3. Editor: отворените файлове, в табове; разделете го с Ctrl+\.
4. Panel (долу): Terminal (Ctrl+`), Problems, Output.
5. Status Bar (най-долният ред): Git branch-ът, грешките и предупрежденията, езикът на файла.

Вижте User Interface в документацията на VSCode.

Command Palette

Ctrl+Shift+P (macOS: Cmd+Shift+P) отваря Command Palette: всяка команда на VSCode и неговите разширения, с търсене по произволна част от името. Ако не знаете клавишната комбинация за нещо, напишете името му там - "toggle terminal", "format document", "change language mode". Ctrl+P отваря файл по име.

Клавишни комбинации, които си струва да научите първо

Комбинация (Windows / Linux)	Прави
Ctrl+Shift+P	Command Palette
Ctrl+P	отваря файл по име
Ctrl+`	показва / скрива терминала
Ctrl+/	коментира / разкоментира реда
Alt+Up / Alt+Down	мести реда нагоре / надолу
Shift+Alt+Down	копира реда надолу
Ctrl+D	избира следващото съвпадение на избраната дума
F2	преименува variable навсякъде
Shift+Alt+F	форматира документа

На macOS използвайте Cmd вместо Ctrl и Option вместо Alt. Пълните списъци: keyboard reference sheets.

Разширения и теми

Изгледът Extensions (Ctrl+Shift+X) инсталира разширения от пазара. За първите занятия не е нужно нищо допълнително - поддръжката на JavaScript е вградена. От лекция 10 нататък помагат ESLint и Prettier; папката Homework ги препоръчва и VSCode предлага да ги инсталира, когато я отворите (вижте Разширения за VSCode). Сменете цветовата тема с File > Preferences > Theme > Color Theme или с "color theme" в Command Palette.

4. Git и GitHub

Какво са

• Git е система за контрол на версиите (VCS, version control system): записва промените във файловете ви във времето, така че да виждате историята, да сравнявате версии и да се връщате към всяка по-ранна.
• GitHub е уебсайт, който пази Git repositories онлайн и добавя инструменти за съвместна работа: pull requests, code review, issues. (GitLab и Bitbucket са подобни услуги.)

Git е инструментът; GitHub е едно място, където да пазите и споделяте това, което Git записва. Правилата, както всеки код, е най-добре да се пазят в Git: всяка промяна има история и причина.

Защо контрол на версиите

• История: всяко запазено състояние, с това кой какво е променил, кога и защо.
• Връщане назад: промяна е счупила нещо - върнете се към последната работеща версия.
• Съвместна работа: няколко души променят един и същ проект, без да презаписват работата си.
• Branches: изпробвайте нова функционалност отделно от основния код и я слейте, когато е готова (занятие 10).

Локални, централизирани и разпределени

Вид	Къде е историята	Пример
локални	само на вашия компютър	стари инструменти, рядко използвани днес
централизирани	на един сървър; всички работят с него	Subversion (SVN)
разпределени	всяко копие има цялата история; сървърите са за споделяне	Git

Основните идеи

• Работна директория (working directory) - файловете, които редактирате.
• Repository (repo) - файловете на проекта плюс цялата им история. Локалното ви repository е на компютъра ви; отдалеченото (remote) repository (например в GitHub) е споделено.
• Commit - запазена моментна снимка на промените ви, със съобщение, в локалното ви repository.
• Push - изпращане на вашите commits към отдалеченото repository.
• Pull - взимане на commits от отдалеченото repository във вашето.
• Clone - копиране на отдалечено repository на компютъра ви, с цялата му история.

Настройте Git веднъж

Кажете на Git името и имейла си - те се записват във всеки commit. Използвайте имейла на акаунта си в GitHub, за да показва GitHub commits като ваши:

git config --global user.name "Your Name"
git config --global user.email "you@example.com"

# check
git config user.name
git config user.email

# optional: use VSCode to write longer commit messages
git config --global core.editor "code --wait"

Без --global настройката важи само за repository, в което се намирате.

Ново repository: git init

cd playground
git init           # creates a hidden .git folder: Git now tracks this folder

Трите области и git add / git commit

Една промяна минава през три области:

1. Работна директория - редактирате файл. Git вижда, че се е променил.
2. Staging area (index) - git add слага промяната в следващия commit. Вие избирате какво влиза.
3. Repository - git commit запазва подготвените промени като моментна снимка.

git add hello.js          # stage one file
git add .                 # stage all changes in this folder and below
git add -A                # stage all changes in the repository, also deletions

git commit -m "Add the first script"

git restore --staged hello.js   # unstage (the change stays in the file)

По-старите версии на Git предлагат git reset HEAD -- <file>, за да махнат файл от staging - прави същото.

Добри съобщения на commits

• Кратки, конкретни, в повелително наклонение: кажете какво прави commit-ът.
• Една логическа промяна на commit.
• Погледнете промените, преди да направите commit (git status, git diff).

Добре	Не помага
Fix the version comparison for "4.10"	changes
Add the firmware check for XR-220	update rule

git status и git log

git status показва къде е всяка промяна: променена, но не в staging, в staging или untracked (нови файлове, които Git още не познава). Казва и какво да направите след това:

On branch main
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
        modified:   hello.js

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        notes.txt

git log показва историята, най-новото първо: id-то на commit-а (hash), автора, датата и съобщението. git log --oneline дава по един ред на commit.

.gitignore

Файл с име .gitignore в корена на repository изброява файловете, които Git не трябва да следи - генерирани файлове, логове, локални настройки, пароли и ключове:

# dependencies installed by npm
node_modules/
# all log files, except one
*.log
!important.log
# a local configuration with secrets
/config/local.json

GitHub пази готови шаблони за .gitignore за много езици; шаблонът Node.gitignore пасва на JavaScript проекти.

От компютъра ви към GitHub

1. В GitHub създайте ново празно repository (без README, лиценз или .gitignore - те биха влезли в конфликт с локалната ви история).
2. Свържете локалното си repository с него и направете push:

git remote add origin https://github.com/<your-user>/<your-repo>.git
git push -u origin main      # the first time: -u remembers where to push
git push                     # every time after that

Влизане. VSCode ви вписва в GitHub с акаунта ви, в браузъра. В командния ред GitHub не приема паролата ви: иска personal access token (GitHub > Settings > Developer settings > Personal access tokens) или използва SSH ключове. Пазете token-ите в тайна, като паролите.

От GitHub към компютъра ви: git clone

git clone https://github.com/ivapopova-courses/JS-Basics-Practical-IBM-Labs.git

Това създава папка с файловете и историята на repository. В клонирано repository git pull взима последните промени.

Git във VSCode

Изгледът Source Control (Ctrl+Shift+G) прави същото без команди: изброява променените файлове, слага ги в staging с +, прави commit с полето за съобщение и прави push / pull със Sync Changes. Publish Branch създава repository в GitHub и прави push с една стъпка. Използвайте което ви харесва - командите е добре да ги знаете, защото всеки tutorial и всяко съобщение за грешка ги използва.

Repositories на курса

• Labs - кодът, писан в час. Клонирайте го веднъж, после git pull преди всяко занятие. Само го четете.
• Homework - задачите за упражнение и домашните. Пазите собствено копие в GitHub и пак взимате новите задачи от repository на курса. README на Homework има точните стъпки; накратко:

git clone https://github.com/ivapopova-courses/JS-Basics-Practical-IBM-Homework.git
cd JS-Basics-Practical-IBM-Homework
git remote rename origin upstream          # the course repository: new tasks come from here
git remote add origin https://github.com/<your-user>/<your-repo>.git
git push -u origin main                    # your copy: your solutions go here

# before each session
git pull --no-rebase --no-edit upstream main

Branches, сливане (merge), конфликти и работата с pull requests идват в занятие 10.

5. Какво е JavaScript?

JavaScript е език за програмиране, който започва в уеб браузърите, а днес се изпълнява почти навсякъде.

В една уеб страница трите езика си поделят работата:

• HTML - структурата (заглавия, абзаци, форми);
• CSS - външният вид (цветове, подредба);
• JavaScript - поведението (реагира на кликове, променя страницата, говори със сървъри).

Някои характеристики:

• Създаден е така, че да се започва лесно, дори от начинаещи - а после се разраства огромно.
• Той е динамично типизиран: една variable може да съдържа стойност от всеки тип, а типът се проверява, докато програмата се изпълнява (лекция 2).
• Обикновено се нарича скриптов език: изходният код се изпълнява директно, без отделна стъпка за компилиране, която вие трябва да направите.

Java и JavaScript

Имената си приличат само заради маркетинга. Java и JavaScript са толкова свързани, колкото кола и колан.

Къде се изпълнява JavaScript

Къде	Примери
браузъри	всяка интерактивна уеб страница и уеб приложение
сървъри и инструменти	Node.js: уеб сървъри, инструменти за командния ред, инструменти за build
desktop приложения	приложения, направени с Electron (самият VSCode е такова)
мобилни приложения	React Native и подобни frameworks
в други програми	rule engines, бази данни, инструменти за автоматизация - програма-домакин изпълнява малки скриптове, написани от потребителите ѝ

Вашите правила за проверка са последният вид: rule engine изпълнява вашия JavaScript за всеки отчет. В браузъра JavaScript променя страници, реагира на потребителя, рисува графики, пуска медия, използва карти и много други API (Application Programming Interfaces). В този курс използваме само самия език и Node.js - без уеб страници.

Кратка история

Година	Какво се случва
1995	Брендън Айк (Brendan Eich) създава първата версия за 10 дни, за браузъра Netscape Navigator. Имената му: Mocha, LiveScript, после JavaScript.
1997	Езикът е стандартизиран от Ecma International като ECMAScript (стандарт ECMA-262). "ECMAScript" е стандартът на езика; "JavaScript" е името, с което всички го наричат.
началото на 2000-те	Дъглас Крокфорд (Douglas Crockford) популяризира JSON (JavaScript Object Notation) - форматът на данните на вашите отчети.
2005	"Ajax": страниците зареждат данни, без да се презареждат. Следват библиотеки като jQuery.
2008	Google пуска бързия engine V8 заедно с браузъра Chrome.
2009	Node.js (построен върху V8) пренася JavaScript на сървърите. ES5 подобрява езика.
2012	Microsoft пуска TypeScript: JavaScript с типове.
2015	ES6 / ES2015 - най-голямото обновление: let / const, arrow functions, класове, модули. Оттогава нова версия излиза всяка година: ES2016, ES2017, ...
днес	Комитетът TC39 развива езика публично (proposals в GitHub). Optional chaining ?. идва в ES2020; ново издание излиза всеки юни.

Защо това е важно за вас: вашият rule engine поддържа някоя версия на ECMAScript. Код, написан за по-нова версия, може да не работи там. Лекциите отбелязват възможностите, по-нови от ES2020, с кратка бележка, за да можете да ги проверите.

6. Изпълнение на JavaScript

В този сайт

Най-бързият начин: натиснете Run под който и да е пример. Кодът се изпълнява в браузъра ви, а това, което отпечатва console.log, се появява под примера.

console.log("Hello from JavaScript!");
console.log(2 + 3);
console.log("The model is " + doc.overview.model);

console.log("Hello from JavaScript!");
console.log(2 + 3);
console.log("The model is " + doc.overview.model);

Променете кода и го изпълнете отново

console.log(...) отпечатва стойността си - основният ни инструмент, за да видим какво прави една програма. doc е примерният JSON документ; той е готов във всеки пример на този сайт.

Целият документ, с карта на частите му, е на страницата Примерният JSON документ.

В браузъра

Всеки браузър има инструменти за разработчици с конзола: натиснете F12 (или Ctrl+Shift+I, macOS Cmd+Option+I) и отворете таба Console. Пишете JavaScript и натиснете Enter:

console.log(2 + 3)

Уеб страницата включва JavaScript с елемента <script> - самия код или файл чрез src:

<script>
    console.log("JS welcomes you!");
</script>

<script src="myFirstScript.js"></script>

• Със src кодът между таговете се пренебрегва.
• Една страница може да има много елементи <script>, в <head> или в <body>.
• Браузърът чете страницата отгоре надолу и спира при скрипт, докато той не се изпълни. Слагайте скриптовете в края на <body> или добавете defer към скрипт в <head> (<script src="app.js" defer></script>), за да се покаже страницата първо.

С Node.js в терминала

Така изпълнявате задачите за упражнение и така ще тествате правила локално (занятие 9). Създайте файл hello.js:

console.log("Hello from Node.js!");
console.log(process.version);    // the Node.js version

и го изпълнете от терминала, в папката на файла:

node hello.js

Преди курсора терминалът винаги показва промпт (prompt). Той завършва с текущата папка: командата работи с файловете на тази папка, затова node hello.js работи само в папката на hello.js. Поглеждайте промпта, преди да натиснете Enter - повечето грешки "file not found" идват от команда, написана в грешната папка.

Във VSCode: отворете папката, отворете терминала (Ctrl+`), напишете node hello.js. (Файл .vscode/tasks.json и Ctrl+Shift+B могат да направят същото - терминалът е по-прост.) VSCode може и да изпълни и debug-не файл с Run > Run Without Debugging (Ctrl+F5).

node без файл стартира интерактивна конзола (REPL): пишете JavaScript, виждате резултата; .exit или два пъти Ctrl+C за изход.

7. Как се изпълнява една програма

Машинен код, компилатори и интерпретатори

Процесорът разбира само машинен код - много прости инструкции в двоичен вид. Всяка програма на "човешки" език трябва първо да бъде преведена. Има два класически начина:

• Компилаторът превежда цялата програма на машинен код първо; после преведената програма се изпълнява. Като преводач, който първо прочита цялата книга, а после я превежда. (C, C++, Go)
• Интерпретаторът превежда една инструкция, изпълнява я и продължава със следващата. Като преводач, който превежда изречение по изречение. (JavaScript, Python, PHP, Ruby са замислени така.)

Модерните JavaScript engines съчетават двете: започват да изпълняват кода бързо, следят кои части се изпълняват често и компилират тези "горещи" части до бърз машинен код, докато програмата работи (just-in-time, JIT, компилация).

JavaScript engine-ът

Engine-ът е програмата, която изпълнява JavaScript: V8 (Chrome, Node.js и много други програми), SpiderMonkey (Firefox), JavaScriptCore (Safari). Грубо казано:

1. разделя текста на tokens (думи: let, x, =, 5);
2. изгражда дърво на структурата на програмата (AST, abstract syntax tree); синтактичната грешка се открива тук, преди нещо да се изпълни;
3. превръща дървото в bytecode и го изпълнява;
4. компилира "горещия" код до оптимизиран машинен код.

Engine-ът познава само езика. Всичко останало идва от средата (environment), която го приютява: браузърът дава document и alert, Node.js дава process и файловете, а вашият rule engine дава emit и doc на всеки отчет. console се дава от почти всяка среда.

Анимация

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

8. Структурата на една програма

Една JavaScript програма е поредица от statements - инструкции, изпълнявани една след друга, отгоре надолу. Условията, loops и функциите (занятия 3-5) променят този ред.

• Statement прави нещо: let answer = 42;, console.log(answer);.
• Expression дава стойност: 42, answer, 2 + 3, doc.overview.model. Expressions са частите, от които се изграждат statements.
• Statements завършват с ;.
• Група statements във { } е блок.
• // започва коментар: текст за хората, който JavaScript пренебрегва.

В сравнение с естествен език:

Език като българския	JavaScript
книга, разказ	програма, скрипт
абзац	блок { ... }
изречение	statement
дума	token

// this is a comment - JavaScript does not run it

// declares the variable answer
let answer;

// stores the number 42 in answer
answer = 42;

// prints the value of answer to the console
console.log(answer);

// a block: statements that belong together
{
    const model = doc.overview.model;
    console.log("The model is", model);
}

// this is a comment - JavaScript does not run it

// declares the variable answer
let answer;

// stores the number 42 in answer
answer = 42;

// prints the value of answer to the console
console.log(answer);

// a block: statements that belong together
{
    const model = doc.overview.model;
    console.log("The model is", model);
}

Променете кода и го изпълнете отново

Примерите за браузъра често използват alert("Welcome") и document.body.style.backgroundColor = "red" - те работят само в браузъра (alert и document идват от браузъра, а не от езика). В този сайт те биха показали прозорче със съобщение и биха оцветили страницата; в Node.js и в rule engine те не съществуват.

Анимация

Как се изчислява един израз: 6. Statement срещу expression (advanced)

9. Какво е variable?

Variable е като етикет на кутия: кутията съдържа стойност, а етикетът е името, с което я достигате. По-точно, variable е име на място в паметта (RAM), което пази стойност, нужна на програмата. Вие избирате името, като спазвате няколко правила (лекция 2). Щом variable-ата съществува, можете да записвате стойности в нея и да ги четете обратно.

let x = 1;
let y = 2;
let z;          // created, but no value stored yet

console.log(x, y, z);   // 1 2 undefined
x = x + y;              // read x and y, store the result in x
console.log(x);         // 3

let x = 1;
let y = 2;
let z;          // created, but no value stored yet

console.log(x, y, z);   // 1 2 undefined
x = x + y;              // read x and y, store the result in x
console.log(x);         // 3

Променете кода и го изпълнете отново

Анимация

Variables в паметта: 1. Деклариране и присвояване

В отчета - variables дават имена на стойностите, които правилото чете:

let model = doc.overview.model;
let version = doc.overview.version;
console.log(model, version);    // XR-220 4.2.1.7

let model = doc.overview.model;
let version = doc.overview.version;
console.log(model, version);    // XR-220 4.2.1.7

Променете кода и го изпълнете отново

Как се декларират variables (let, const), как се именуват и какви типове стойности съдържат е началото на лекция 2.

10. Упражнения

В час, стъпка по стъпка:

1. Проверете node -v и git -v в терминал; задайте user.name и user.email.
2. Създайте JS_Basics_Course/playground/, отворете я във VSCode, създайте hello.js с два реда console.log и я изпълнете с node hello.js.
3. Направете я repository: git init, git add ., git commit -m "Add hello.js". Погледнете git status и git log --oneline преди и след това.
4. Създайте празно repository в GitHub, свържете го с git remote add origin ... и направете git push -u origin main. Презаредете страницата в GitHub.
5. Променете hello.js, направете commit и push отново - веднъж с команди, веднъж с изгледа Source Control на VSCode.
6. Клонирайте Labs repository и настройте Homework repository, както е в раздел 4.

Обобщение

Тема	Запомнете
Курсът	Правила върху JSON отчети; 10 занятия; сайтът, Homework и Labs repositories; библиотека с helper функции като проект
Инструменти	Node.js LTS (node -v), VSCode, Git (git -v), акаунт в GitHub
VSCode	Отворете папка; Ctrl+Shift+P Command Palette; Ctrl+` терминал; изгледът Source Control
Git	Работна директория -> git add -> staging -> git commit -> repository; status, log, .gitignore
GitHub	git remote add origin URL, git push -u origin main; git clone; git pull
JavaScript	Езикът на уеба, също и в Node.js и в други програми (rule engines); стандарт: ECMAScript, нова версия всяка година
Изпълнение	Бутоните Run на този сайт; конзолата на браузъра (F12); node file.js в терминала
Как се изпълнява	Engine (V8): tokens -> AST -> bytecode -> горещ код; средата дава console, document, emit
Структура	Statements се изпълняват отгоре надолу и завършват с ;; expressions дават стойности; блокове { }; коментари //
Variable	Име на стойност в паметта; подробности в лекция 2

Домашно

1. Инсталирайте Node.js (LTS), VSCode и Git и си създайте акаунт в GitHub (ако нямате). Проверете версиите в терминал.
2. Направете стъпки 2-6 от упражненията, ако не сте ги довършили в час: hello.js във ваше собствено repository в GitHub, клониран Labs, Homework настроен с upstream и origin (вижте README на Homework).
3. Отделете 15 минути във VSCode: Command Palette, таблицата с клавишни комбинации от раздел 3, цветова тема, която ви харесва.
4. Помислете за курсовия проект: с отчетите на кой продукт бихте започнали?

Още за четене

• VSCode: документация, Basic editing, Using Git in VSCode, Extension Marketplace
• Git: книгата Pro Git (безплатна; глави 1-2 покриват днешното), Adding a local repository to GitHub, Authenticating with the command line
• JavaScript: MDN - What is JavaScript?, javascript.info - An introduction, Node.js - Introduction
• История: JavaScript в Wikipedia, Brendan Eich, ECMA-262
• Engine-ът: V8

Следващото занятие: variables, типове и оператори - let и const, числа и strings и превръщане на strings от отчета в числа.