Как да ползвате тези страници

Изпълнение на примерите

Под повечето примери с код има лента с бутони:

• Run изпълнява кода в браузъра и показва какво извежда console.log.
• Edit превръща примера в редактор. Променете кода и натиснете Run отново (или Ctrl+Enter).
• Reset връща оригиналния код.

Опитайте:

const course = "Practical JavaScript Basics";
console.log("Welcome to", course);

const course = "Practical JavaScript Basics";
console.log("Welcome to", course);

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

Във всеки пример, който може да се изпълни, variable doc съдържа примерния JSON документ - същия doc, който получава едно правило за проверка:

console.log(doc.overview.model);
console.log(doc.inventory.details.firmware_level);

console.log(doc.overview.model);
console.log(doc.inventory.details.firmware_level);

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

Примерният JSON документ е измислен

Всички имена и стойности в него са измислени; само структурата е типична за JSON-а, който изпраща едно устройство.

Целият документ, с карта на частите му и съвети как да го отпечатате: Примерният JSON документ. Там щракване върху името на файл го отваря в преглед: като дърво, като списък от всички пътища и стойности или като таблици. Щракване върху стойност показва пътя до нея така, както го чете вашият код.

Упражнения и домашни във VSCode

Задачите за упражнение и домашните са в Homework repository: https://github.com/ivapopova-courses/JS-Basics-Practical-IBM-Homework

Там всяка лекция има своя папка (02-variables-and-types/, ...) с два вида задачи:

• Задачи за упражнение (practice/task1-....js, ...): кратки упражнения, по една тема, в реда на лекцията. Започваме ги в час. Довършете останалите вкъщи, ако можете - следващите задачи и курсовият проект ги използват.
• Домашно (homework.js): една по-голяма задача, която събира темите на лекцията, върху данни с формата на истински доклади. Направете го преди следващото занятие - разглеждаме го заедно в началото.

Еднократна настройка

Това се прави само веднъж, в началото на курса, и отнема около 15 минути. Ако вече сте го направили в занятие 1, отидете на стъпка 6 и проверете, че всичко е наред.

Идеята. Repository (или repo) е папка на проект, чиято история пази Git. В този курс работите с три копия на Homework repository:

• upstream е repository-то на курса. Всеки може да го чете, но само преподавателят може да го променя. Вие само изтегляте (pull) от него - така получавате новите задачи.
• origin е вашето собствено repository. Вие качвате (push) решенията си в него, така че те са запазени онлайн и можете да ги отворите от всеки компютър.

upstream и origin са само кратки имена на двата уеб адреса (Git ги нарича remotes), за да не пишете всеки път пълния адрес.

1. Проверете инструментите

Трябват ви акаунт в GitHub (https://github.com/signup) и инсталирани Git, Node.js и VSCode (вижте лекция 1, раздел 2). Отворете VSCode, после Terminal > New Terminal, и напишете:

git -v       # git version 2.x.x
node -v      # v24.x.x

Ако някоя от тях отговори command not found или is not recognized, инсталирайте съответния инструмент, после затворете и отворете отново VSCode.

2. Кажете на Git кои сте

Git записва името и имейла ви във всеки commit (всяка запазена версия). Пропуснете тази стъпка, ако сте я направили в занятие 1: тогава git config user.name отпечатва името ви.

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

Използвайте същия имейл като в акаунта си в GitHub.

3. Създайте свое repository в GitHub

1. Влезте в https://github.com.

2. Натиснете + (горе вдясно), после New repository.

3. Repository name: например JS-Basics-Practical-Homework.

4. Изберете Private (само вие го виждате) или Public.

5. Оставете всичко останало както е: без README, без .gitignore, без лиценз. Repository-то трябва да е празно - иначе стъпка 5 няма да успее.

6. Натиснете Create repository.

7. GitHub показва страница с уеб адрес като https://github.com/your-user/JS-Basics-Practical-Homework.git. Копирайте го (бутонът за копиране до него). Трябва ви в стъпка 4.

   

4. Изтеглете repository-то на курса и свържете своето

Във VSCode отворете папката, в която държите курса (File > Open Folder, например JS_Basics_Course), после отворете терминал (Terminal > New Terminal). Пишете командите по-долу една по една и натискайте Enter след всяка.

Изтеглете repository-то на курса (това създава папката JS-Basics-Practical-IBM-Homework):

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

Влезте в новата папка - всички следващи команди трябва да се изпълнят там:

cd JS-Basics-Practical-IBM-Homework

След clone Git нарича repository-то, от което сте клонирали, origin. Преименувайте го на upstream, защото това е repository-то на курса, а не вашето:

git remote rename origin upstream

Добавете своето repository като origin. Поставете вашия адрес от стъпка 3 вместо примерния:

git remote add origin https://github.com/your-user/JS-Basics-Practical-Homework.git

Поставяне в терминала

В терминала на VSCode поставяте с Ctrl+V (или десен бутон). В други терминали под Linux използвайте Ctrl+Shift+V.

5. Изпратете всичко в своето repository (първият push)

git push -u origin main

Това копира файловете във вашето repository в GitHub. -u origin main кара Git да запомни мястото: оттук нататък стига обикновено git push.

Първия път GitHub ви моли да влезете:

• Във VSCode или под Windows се отваря прозорец: изберете вход през браузъра и разрешете достъпа.
• Ако терминалът поиска Username и Password, напишете потребителското си име в GitHub, а за парола - personal access token: GitHub не приема обичайната ви парола тук. Създайте token-а в GitHub: снимката ви (горе вдясно) > Settings > Developer settings > Personal access tokens > Tokens (classic) > Generate new token (classic), отметнете repo, натиснете Generate token и го копирайте. Терминалът не показва нищо, докато поставяте token-а - това е нормално, натиснете Enter. Пазете token-а в тайна, като парола.

6. Проверете резултата

Все още в папката JS-Basics-Practical-IBM-Homework:

git remote -v

Трябва да видите четири реда като тези - origin с вашия адрес, upstream с адреса на курса:

origin    https://github.com/your-user/JS-Basics-Practical-Homework.git (fetch)
origin    https://github.com/your-user/JS-Basics-Practical-Homework.git (push)
upstream  https://github.com/ivapopova-courses/JS-Basics-Practical-IBM-Homework.git (fetch)
upstream  https://github.com/ivapopova-courses/JS-Basics-Practical-IBM-Homework.git (push)

Отворете и своето repository в GitHub (опреснете страницата): трябва да видите папките на лекциите там.

7. Отворете папката във VSCode

File > Open Folder и изберете JS-Basics-Practical-IBM-Homework (самата папка, не папката над нея). Винаги отваряйте тази папка, когато работите по задачите: тогава терминалът започва на правилното място. Ако VSCode предложи да инсталира препоръчаните разширения (долу вдясно), натиснете Install - вижте Разширения за VSCode.

Нещо не стана? Намерете съобщението в Ако нещо не стане.

Разширения за VSCode

Поддръжката на JavaScript е вградена във VSCode: за първите занятия не е нужно нищо друго. От лекция 10 нататък помагат две разширения:

Разширение	От	За какво	Нужно
ESLint	Microsoft	показва проблемите, които linter-ът намира, докато пишете	лекция 10
Prettier - Code formatter	Prettier	форматира файла по един и същи начин всеки път	лекция 10

Инсталирайте ги наведнъж. Папката Homework съдържа списъка с препоръчани разширения в .vscode/extensions.json: когато отворите папката, VSCode пита Do you want to install the recommended extensions...? - натиснете Install. Пропуснахте въпроса? Отворете изгледа Extensions (Ctrl+Shift+X) и напишете @recommended в полето за търсене. Под Workspace Recommendations задръжте мишката върху заглавието и натиснете иконата с облак (Install Workspace Recommended Extensions).

За друга папка: изтеглете списъка, extensions.json, и го сложете в папка .vscode в тази папка (файлът трябва да е .vscode/extensions.json). Или създайте файла сами с това съдържание:

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

На служебен лаптоп

Някои компании блокират Marketplace за разширения или позволяват само одобрени разширения. Ако Install не работи, поискайте от вашия IT отдел разширенията от таблицата.

Работа по задача

1. Отворете папката Homework във VSCode (File > Open Recent) и терминал (Ctrl+`). Терминалът започва в основната папка на repository-то.

2. В Explorer отворете файла на задачата, например 05-functions/practice/task2-versions.js.

3. Четете файла отгоре надолу. От занятие 5 нататък задачата е разделена на части. Всяка част започва с линия // =====... и заглавие (// == Part 1: ... ==), след тях са описанието, редовете // ---- your code ... ---- и веднага след тях своите проверки. Пишете кода си между // ---- your code ... ---- и // ---- end of your code ---- и не променяйте нищо друго във файла.

4. Запазете файла (Ctrl+S) и го пуснете от основната папка на repository-то:

   node 05-functions/practice/task2-versions.js

   Не е нужно да пишете пътя: десен бутон върху файла в Explorer > Copy Relative Path, после напишете node в терминала (с интервал) и поставете.

   Или оставете Node да пуска файла отново всеки път, когато го запазите. Дръжте този терминал отворен до редактора и го спрете с Ctrl+C, когато минете на друг файл:

   node --watch 05-functions/practice/task2-versions.js

   Докато някои проверки не са OK, Node добавя реда Failed running ... Waiting for file changes. Това е нормално: значи само "още не всички проверки минават".

5. Прочетете резултата. Ред -- Part N: ... --- започва проверките на всяка част. Всяка проверка показва OK (зелено), FAIL (червено) или TODO (жълто: още не сте написали код в тази част). Под ред с FAIL виждате какво е дал вашият код (got:) и какво очаква проверката (expected:). Накрая виждате по един ред за всяка част и ред като 5 of 18 checks passed. Поправете кода и пуснете файла отново.

6. После продължете със следващата част: тя започва точно след проверките на тази.

Задачи за предвиждане

В задача за предвиждане (task1-predict.js) не пишете код. Заменяте всяко TODO с това, което според вас дава изразът, например "local", 3 или undefined. Файлът показва OK, WRONG или TODO (още без отговор) за всяко предвиждане, но никога истинския резултат, затова го пускайте колкото пъти искате. Накрая всяка част, която още не е изцяло OK, показва връзки към разделите от лекцията, които я обясняват. При WRONG прочетете раздела отново и променете предвиждането си. Пак е WRONG? Пишете на преподавателя и ще го обсъдим в час.

Запазване на работата

Запазвайте решенията си във вашето repository в края на всеки работен ден и винаги преди занятие. Три команди, в терминала на папката Homework:

git add .
git commit -m "Session 5 practice"
git push

git add . избира всички променени файлове (обърнете внимание на точката), git commit запазва версия на вашия компютър с кратко съобщение, git push я изпраща във вашето repository в GitHub. Ако git commit каже nothing to commit, working tree clean, няма нищо ново за запазване: запазихте ли файла (Ctrl+S)?

Как да получите новите задачи

Преподавателят добавя папката на всяка лекция сутринта в деня на занятието. За да я вземете:

1. Първо запазете работата си: трите команди от Запазване на работата.

2. Вземете новите задачи от repository-то на курса:

   git pull --no-rebase --no-edit upstream main

3. Изпратете ги и във вашето repository:

   git push

Виждате: след pull ред като Merge made by the 'ort' strategy. (или Fast-forward) и списък на новите файлове. Новата папка на лекцията се появява в Explorer. Вашите файлове не се променят: публикуваните файлове на задачите никога не се променят, затова няма конфликти.

Частите на командата pull: upstream main - от repository-то на курса; --no-rebase - съединява новите задачи с вашите commits; --no-edit - не пита за съобщение. Без тях Git спира с грешка или отваря редактор.

Ако нещо не стане

Прочетете последните редове в терминала: грешката обикновено е там. Намерете я по-долу. Пак не става? Пишете на преподавателя: стъпката, командата и снимка на екрана с терминала.

• ... is not recognized as an internal or external command или command not found (git, node) - инструментът не е инсталиран или VSCode е бил отворен, докато сте го инсталирали. Инсталирайте го (вижте лекция 1, раздел 2), след това затворете VSCode напълно и го стартирайте отново.
• npm : File ... npm.ps1 cannot be loaded because running scripts is disabled on this system - терминалът е PowerShell и настройките на компанията блокират скриптовете му. Пишете npm.cmd вместо npm или сменете терминала с Command Prompt: Ctrl+Shift+P, Terminal: Select Default Profile, Command Prompt, след това отворете нов терминал.
• Error: Cannot find module '...task2-versions.js' - пътят до файла е грешен за папката, в която е терминалът. Изпълнете командата в основната папка на repository-то (промптът завършва с JS-Basics-Practical-IBM-Homework) или копирайте пътя с Copy Relative Path.
• fatal: destination path 'JS-Basics-Practical-IBM-Homework' already exists - вече сте го клонирали. Изпълнете cd JS-Basics-Practical-IBM-Homework и продължете с git remote -v (стъпка 6), за да видите какво още липсва.
• fatal: not a git repository - терминалът не е в папката на repository-то. Изпълнете cd JS-Basics-Practical-IBM-Homework или отворете тази папка във VSCode (стъпка 7) и отворете нов терминал.
• error: remote origin already exists - вече сте добавили origin. Ако адресът му е грешен (проверете с git remote -v), поправете го: git remote set-url origin https://github.com/your-user/your-repo.git
• error: remote upstream already exists или No such remote 'origin' след git remote rename - преименуването вече е направено. Продължете със следващата команда.
• ! [rejected] ... (fetch first) при първия push - вашето repository в GitHub не е празно (създадено е с README). Най-лесната поправка: изтрийте това repository в GitHub (Settings, най-долу: Delete this repository), създайте го отново без README (стъпка 3) и изпълнете пак git push -u origin main.
• remote: Repository not found. - адресът има грешка (проверете го с git remote -v) или Git е влязъл с друг акаунт в GitHub. На Windows отворете Credential Manager от менюто Start > Windows Credentials, премахнете записа git:https://github.com и изпълнете командата отново: Git ще ви поиска да влезете.
• Password authentication is not supported - написали сте паролата си за GitHub. Използвайте вместо нея personal access token (стъпка 5).
• Author identity unknown (commit) - Git не знае кои сте. Направете стъпка 2, след това изпълнете commit отново.
• fatal: Need to specify how to reconcile divergent branches. (pull) - липсват двете опции. Използвайте цялата команда от Как да получите новите задачи.
• Your local changes to the following files would be overwritten by merge (pull) - някои промени още не са запазени във версия. Изпълнете трите команди от Запазване на работата, след това pull отново.
• CONFLICT (pull) - рядко: един и същ файл е променен и в двете repositories. Изпълнете git merge --abort (всичко е както преди pull) и пишете на преподавателя.
• Странен редактор запълва терминала (редове, които започват с ~, или -- INSERT -- най-долу) - Git иска съобщение в редактора Vim. Натиснете Esc, напишете :wq и натиснете Enter. Следващия път използвайте командите точно както са на тази страница (git commit -m "...", git pull --no-rebase --no-edit ...).

Кодът от занятията

Кодът, писан по време на занятията, е в Labs repository: https://github.com/ivapopova-courses/JS-Basics-Practical-IBM-Labs

Клонирайте го веднъж и след всяко занятие пускайте git pull в него, за да получите новия код. Не пишете свой код там - за това е Homework repository.

git clone https://github.com/ivapopova-courses/JS-Basics-Practical-IBM-Labs.git
cd JS-Basics-Practical-IBM-Labs
git pull          # after each lesson

Анимации

Някои раздели имат кутия Анимация с линкове. Всеки линк отваря в нов таб анимация стъпка по стъпка: тя показва какво прави JavaScript "под капака" (паметта, реда на изчисляване, пътя през един loop). Със стрелките надясно / наляво вървите напред и назад. Всички анимации, подредени по занятия: Анимации.

Как да намерите нещо

• Полето за търсене (горе вляво или Ctrl+K) търси във всички лекции.
• Календарът показва датите и часовете на всички занятия; можете да го добавите и към своя календар.
• Списъкът вдясно на всяка лекция ("На тази страница") води директно до избран раздел.
• Превключвателят луна / слънце горе сменя тъмния и светлия режим.
• Бутонът EN / BG до него отваря същата страница на английски или на български.
• Навигацията вляво и колоната "На тази страница" вдясно могат да се стесняват и разширяват на произволна стъпка: плъзнете вътрешния им ръб (под мишката той става син) или щракнете върху ръба и използвайте стрелките наляво / надясно (16 px на стъпка, с Shift - 64 px). При 0 панелът се скрива и на ръба на прозореца остава малко езиче - щракнете го, за да се покаже панелът отново. Двоен клик върху ръба връща ширината по подразбиране.