Оғози курс ва танзими муҳити корӣ

01 JavaScript дар браузер чӣ тавр кор мекунад

Саҳифа аз се забон иборат аст ва ҳар кадом вазифаи худро дорад. Шумо аллакай ду тоаш медонед:

Браузер ҳангоми кушодани саҳифа чӣ мекунад

Дар дохили ҳар браузер «муҳаррик» ҳаст, ки JavaScript-ро мефаҳмад: дар Chrome ва Edge он V8, дар Firefox — SpiderMonkey, дар Safari — JavaScriptCore ном дорад. Барои кор кардани JavaScript чизеро насб кардан лозим нест: он аллакай дар браузери шумо ҳаст. Маҳз барои ҳамин мо аз браузер оғоз мекунем, Node.js-ро — барномаеро барои иҷрои JS берун аз браузер — баъдтар, дар дарси 17 пайваст мекунем.

JavaScript кодро чӣ тавр мехонад

• Аз боло ба поён, сатр ба сатр. Мисли хондани дастури пухтан: аввал қадами якум, баъд дуюм.
• Як фармон — як амал. Фармонҳоро (онҳоро «дастур» меноманд) одатан бо нуқтаву вергул ; анҷом медиҳанд.
• Регистр муҳим аст. console ва Console барои JavaScript ду калимаи гуногунанд.
• Агар дар ягон сатр хато рӯй диҳад, коди поёнтар иҷро намешавад. Браузер қатъ мешавад ва дар консол паём менависад.

Аввалин фармоне, ки меомӯзед — console.log аст. Он қимати додашударо дар консол «чоп мекунад». Кӯшиш кунед: «Иҷро кардан»-ро пахш кунед, баъд матнро тағйир диҳед ва аз нав иҷро намоед.

console.log("Салом, JavaScript!");
console.log("Я учусь программировать в MakeFirstStep");

Дар амал санҷед, ки тартиб муҳим аст. Сатрҳо аз боло ба поён иҷро мешаванд ва натиҷа дар консол бо ҳамон тартиб меояд:

console.log("Первый шаг");
console.log("Второй шаг");
console.log("Третий шаг");

Акнун бубинед, ки агар дар миёнаи барнома хато бошад, чӣ мешавад. Фармони сеюм ба калимаи вуҷуднадошта муроҷиат мекунад ва чорум дигар иҷро намешавад:

console.log("Шаг 1: всё хорошо");
console.log("Шаг 2: всё хорошо");
console.log(шаг3);
console.log("Шаг 4: сюда мы не дойдём");

Бештар хонед: learn.javascript.ru — Салом, ҷаҳон! · MDN — JavaScript чист

// фармони console.log-ро бо матн дар нохунакҳо нависед

Салом, Душанбе!

console.log("3. Подать плов с салатом");
console.log("1. Обжарить мясо и морковь");
console.log("2. Добавить рис и воду");

1. Обжарить мясо и морковь
2. Добавить рис и воду
3. Подать плов с салатом

02 Скриптро пайваст мекунем: inline, файли беруна, defer

Барои он ки браузер JavaScript-ро иҷро кунад, кодро бо ёрии теги <script> ба саҳифа «гузоштан» лозим аст. Ду роҳ ҳаст.

Роҳи 1. Код бевосита дар HTML (inline)

<body>
  <h1>Моя страница</h1>

  <script>
    console.log("Салом из inline-скрипта!");
  </script>
</body>

Барои санҷиши кӯтоҳ қулай аст, вале дар лоиҳаҳои воқеӣ ин тавр намекунанд: HTML ба омехтаи бесарусомон табдил меёбад, коди онро бошад, дар саҳифаи дигар истифода бурдан мумкин нест.

Роҳи 2. Файли алоҳида (скрипти беруна)

Ин роҳи асосӣ аст. Код дар файли script.js дар паҳлӯи index.html ҷойгир аст, дар HTML бошад, шумо танҳо тавассути атрибути src ба он ишора мекунед — айнан мисли он ки <link href="style.css"> CSS-ро пайваст мекунад.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Первый скрипт</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Салом, JavaScript!</h1>
</body>
</html>

console.log("Салом из script.js!");

src

Нишонии файли дорои скрипт. script.js — дар паҳлӯи HTML, js/script.js — дар ҷузвдони дохилии js, ../script.js — як зина боло.

Теги пӯшанда

Ҳамеша лозим аст: <script src="..."></script>. Онро ҳамчун <script src="..." /> навиштан мумкин нест — саҳифа вайрон мешавад.

defer

Атрибути «интизор шав». Браузер файлро баробари хондани саҳифа боргирӣ мекунад, вале онро танҳо пас аз хондани тамоми HTML иҷро мекунад.

Теги script-ро дар куҷо нигоҳ доштан лозим аст

Нақшаи бахши гузаштаро ба ёд оред: браузер HTML-ро аз боло ба поён мехонад. Агар скрипт аз унсуре, ки ба он муроҷиат мекунад, боло истода бошад, дар лаҳзаи оғози кор чунин унсур ҳанӯз вуҷуд надорад. Дар мисоли зинда бубинед. Дар се ҷой мо аз саҳифа сарлавҳаи h1-ро металабем (ин чӣ тавр кор мекунад, дар дарси 8 шарҳ медиҳем — ҳоло фақат калимаи null — «чизе нест» муҳим аст).

<script>
  console.log("скрипт ВЫШЕ заголовка:", document.getElementById("title"));
</script>

<h1 id="title">Салом, MakeFirstStep!</h1>

<script>
  console.log("скрипт НИЖЕ заголовка:", document.getElementById("title"));
</script>

// файли script.js дар ин қуттии рег пас аз тамоми саҳифа иҷро мешавад, мисли defer
console.log("script.js (как defer):", document.getElementById("title"));

Скрипти аввал null-ро дид: сарлавҳа дар саҳифа ҳанӯз набуд. Дуюм ва сеюм — <h1#title>-ро ёфтанд. Аз ин ҷо се қоидаи корӣ мебарояд:

Боз атрибути async ҳаст: он скриптро баробари боргирӣ фавран иҷро мекунад, саҳифа ва скриптҳои дигарро интизор намешавад. Ҳисобкунакҳои аналитикаро ҳамин тавр пайваст мекунанд. Барои барномаҳои мо он мувофиқ нест: тартиби оғоз кафолат дода намешавад. Аммо type="module" (дарсҳои 17–18) худкор мисли defer рафтор мекунад.

Бештар хонед: learn.javascript.ru — Сохтори код · MDN — унсури <script>

Console.log("Урок 1 начался");
console.Log("Скрипт работает");

Урок 1 начался
Скрипт работает

<h1>Мой первый сайт</h1>
<p>Если скрипт подключён, смотрите консоль.</p>

console.log("Скрипт подключён"

Скрипт подключён

<script>
  console.log(document.getElementById("title"));
</script>

<h1 id="title">Салом, MakeFirstStep!</h1>

<h1#title>

03 Консол: log, warn, error, table

Консол — ин равзанаи «чат» байни шумо ва браузер аст. Дар он ҷо барнома паёмҳо менависад, шумо бошед мехонед. Барномасозони JavaScript нисфи вақти корро дар консол мегузаронанд: қиматҳоро месанҷанд, хатоҳоро меҷӯянд, фармонҳоро месанҷанд.

console.log — қимат чоп мекунем

Дар қавсҳо матн, рақамҳо ва ҳатто ҳисобҳо навиштан мумкин аст. Матн ҳамеша дар нохунак гирифта мешавад: дукарата "..." ё яккарата '...' — фарқ надорад, муҳим он аст, ки кушода ва пӯшанда яксон бошанд.

console.log("Это текст");          // сатр — дар нохунакҳо
console.log('Одинарные тоже можно');
console.log(2026);                 // рақам — бе нохунакҳо
console.log(7 * 8);                // JavaScript худаш ҳисоб мекунад: 56
console.log(100 - 35);             // 65

"5" аз 5 чӣ фарқ дорад? Дар нохунакҳо — матн (сатр), бе нохунакҳо — рақам. Барои одам яксон аст, барои барнома не. Муфассал дар дарси оянда шарҳ медиҳем, ҳоло дар хотир доштан кифоя аст: нохунакҳо = матн.

Арифметика: JavaScript чӣ кор карда метавонад

Тартиби амалҳо мисли риёзии мактабӣ аст: аввал зарб ва тақсим, баъд ҷамъ ва тарҳ, қавсҳо бошанд тартибро тағйир медиҳанд. Қисми касрӣ дар JavaScript бо нуқта навишта мешавад: 2.5, на 2,5.

console.log(10 + 5 * 2);     // зарб аввал: 10 + 10
console.log((10 + 5) * 2);   // қавсҳо аввал: 15 * 2
console.log(10 / 4);         // 2.5
console.log(17 % 5);         // бақия: 17 = 3 * 5 + 2

Якчанд қимат дар як log

Бо вергул дар console.log ҳар қадар қимат додан мумкин аст: консол онҳоро дар як сатр бо фосила мебарорад. Ин хеле қулай аст: тавзеҳ дар чап, қимат дар рост.

console.log("Курутоб:", 35, "сомони");
console.log("Два чайника по 12 сомони:", 2 * 12);
console.log("Хуш омадед", "в", "MakeFirstStep");

Матнро бо аломати + низ часпондан мумкин аст. Вале эҳтиёт шавед: фосилаҳои байни калимаҳоро худатон бояд гузоред — дар дохили нохунакҳо.

console.log("Урок " + 1 + ": старт курса");
console.log("MakeFirstStep" + " " + "2026");
console.log("MakeFirstStep" + "2026");     // бе фосила — ба ҳам часпид

warn, error, info, table

Консол «овозҳои» гуногун дорад. Дар консоли воқеии браузер онҳо гуногун менамоянд: warn — сатри зард, error — сурх, info — оддӣ бо нишона, table бошад ҷадвал мекашад.

console.log("Обычное сообщение");
console.info("Информация: курс начался");
console.warn("Предупреждение: осталось мало риса");
console.error("Ошибка: казан сломан");
console.table(["самбуса", "курутоб", "чой"]);

Консол ҳамчун ҳисобкунак

Дар DevTools консолро бевосита низ истифода бурдан мумкин аст: ифодаро чоп кардед, Enter-ро пахш кардед — натиҷа гирифтед, бе console.log. Тири ↑ фармони қаблиро меорад, Shift + Enter сатрро бе иҷрои фармон мегузаронад. Санҷидани чизҳои хурд қулай аст: 2 ** 10, 17 % 5, "a" + "b".

Паёми хаторо мехонем

Сатри сурх ҳукм нест, балки ишорат аст. Дар он ҳамеша се қисм ҳаст:

1. Навъи хато — SyntaxError (қоидаҳои навишт вайрон шудаанд: қавс ё нохунак намерасад), ReferenceError (калимаеро истифода мебаред, ки JavaScript намешиносад).
2. Тавсиф — масалан, Console is not defined («Console муайян нашудааст») ё missing ) after argument list («пас аз аргументҳо ) намерасад»).
3. Ҷой — номи файл ва рақами сатр, масалан script.js:3. Дар консоли воқеӣ ин истинод аст: пахш кардан маҳз ҳамин сатрро мекушояд.

Хондани ин се қисмро ёд гиред — ва нисфи хатоҳо дар як дақиқа ҳал мешаванд. Равзанаи иҷрои ин саҳифа низ ишора медиҳад: дар зери сатри сурх сатри шарҳдиҳанда бо забони русӣ пайдо мешавад.

console.log("Открываем чойхону");
console.log("Добавьте закрывающую кавычку);
console.log("Закрываем чойхону");

Бештар хонед: MDN — console · learn.javascript.ru — Консоли таҳиягар

// се сатр: ном, шаҳр, курс

Имя: Мадина
Город: Душанбе
Курс: Frontend + AI

// 3 самбуса ба 5 сомонӣ + 2 чой ба 3 сомонӣ

21

// Курутоб: 35 сомони
// Самбуса: 5 сомони

Курутоб: 35 сомони
Самбуса: 5 сомони

// сатри 1: "Урок " + 1 + ": старт курса"
// сатри 2: MakeFirstStep ва 2026 бо фосила

Урок 1: старт курса
MakeFirstStep 2026

// 17 нон барои 4 меҳмон

4.25
1
1024

console.log("Салом!");
consol.log("Как дела?");
console.lgo("Всё хорошо");
Console.log("Хайр!");

Салом!
Как дела?
Всё хорошо
Хайр!

console.log("Первая строка);
console.log("Вторая строка"
console.log('Третья строка");
console.log "Четвёртая строка";

Первая строка
Вторая строка
Третья строка
Четвёртая строка

// console.warn(...)

Внимание: в казане осталось мало риса

// Чек
// Самбуса x 3 = 15
// Чой x 2 = 6
// Итого: 21 сомони

Чек
Самбуса x 3 = 15
Чой x 2 = 6
Итого: 21 сомони

console.log(10 + 5 * 2);
console.log((10 + 5) * 2);
console.log("10" + 5);
console.log("10" - 5);
console.log("Скидка:", 100 / 4, "%");

console.log("???");
console.log("???");
console.log("???");
console.log("???");
console.log("???");

20
30
105
5
Скидка: 25 %

console.log("2" + "2");
console.log(2 + 2 + "2");
console.log("2" + 2 + 2);
console.log("5" * "4");
console.log("три" * 2);

console.log("???");
console.log("???");
console.log("???");
console.log("???");
console.log("???");

22
42
222
20
NaN

04 DevTools: абзорҳои таҳиягар

Консол — яке аз ҷадвалҳои панели калони DevTools (Developer Tools, «абзорҳои таҳиягар») аст. Он дар ҳар браузер дарунсохт ва ройгон аст. Фронтендерҳои касбӣ онро ҳар рӯз мекушоянд: сохти саҳифаро мебинанд, хатоҳоро меҷӯянд, суръат ва дархостҳои шабакаро месанҷанд. Имрӯз мо бо се ҷадвал шинос мешавем: Elements, Console, Sources.

Чӣ тавр кушодан

Панелро дар поён, рост ҷойгир кардан ё ба равзанаи алоҳида баровардан мумкин аст: тугмаи бо се нуқта ⋮ дар кунҷи болоии рости DevTools → «Dock side». Барои кор бо код ҷойгир кардан дар рост ё поён қулай аст.

Ҷадвали Elements: саҳифаи зинда

Шумо онро ҳангоми омӯхтани CSS дида будед. Дар чап — дарахти HTML, дар рост — услубҳои унсури интихобшуда. Аммо акнун он маънои нав пайдо мекунад: ин он чизест, ки воқеан дар лаҳзаи ҳозира дар саҳифа ҳаст, на он чи дар файл буд. Вақте ки JavaScript саҳифаро тағйир медиҳад, тағйиротро маҳз дар ин ҷо мебинед.

• Пахши дукарата болои матн — онро бевосита дар саҳифа тағйир медиҳед. Пахши дукарата болои атрибут ё қимати услуб низ ҳамин тавр.
• Аломатҳои галочка дар паҳлӯи услубҳо хосиятҳоро фаъол ва хомӯш мекунанд — барои ёфтани он ки кадом қоида тарҳро вайрон мекунад, қулай аст.
• Тағйирот то аз нав боркунӣ мемонад. Файл дар диск тағйир намеёбад — ин «машқ» дар нусхаи саҳифа аст.

Ҷадвали Console: паёмҳо ва фармонҳо

Ҳар он чи тавассути console.log мебароред ва ҳамаи хатоҳои сурх дар ин ҷо пайдо мешаванд. Дар паҳлӯи ҳар паём дар рост — номи файл ва рақами сатр: пахши истинод ҳамин сатрро дар ҷадвали Sources мекушояд. Нишонаи 🚫 дар чап консолро тоза мекунад, рӯйхати афтанда «Default levels» бошад паёмҳоро филтр мекунад: масалан, танҳо хатоҳоро нишон додан мумкин аст.

Ҷадвали Sources: файлҳо ва нуқтаҳои таваққуф

Дар чап дарахти файлҳои сайт: index.html, style.css, script.js. script.js-ро кушоед — дар миён коди худро мебинед. Ҷустуҷӯи файл аз рӯи ном: Ctrl/Cmd + P.

Хусусияти асосии ҷадвал — нуқтаи таваққуф (breakpoint). Болои рақами сатр пахш кунед — аломати кабуд пайдо мешавад. Саҳифаро аз нав бор кунед: браузер ба ин сатр мерасад ва иҷроро дар ҳолати таваққуф мегузорад. Акнун дидан мумкин аст, ки чӣ аллакай рух додааст ва бо як фармон ба пеш рафтан мумкин аст.

Ҷадвалҳои дигар (донед, ки ҳастанд)

• Network — ҳамаи дархостҳои саҳифа: файлҳо, расмҳо, маълумот. Дар ин ҷо мо дар дарсҳои 14–16 боргирии API-ро мебинем, имрӯз бошад барои санҷидани он ки script.js воқеан боргирӣ шудааст (ҳолати 200, на 404) муфид аст.
• Application — localStorage дар ин ҷо зиндагӣ мекунад (дарси 11).
• Lighthouse — арзёбии худкори суръат ва дастрасии саҳифа.

Бештар хонед: learn.javascript.ru — Консоли таҳиягар · Chrome DevTools — ҳуҷҷатнигорӣ

console.log("Начало");
console.log(Привет);
console.log("Конец");

Начало
Привет
Конец

05 Равзанаҳо: alert, prompt, confirm

Консолро танҳо таҳиягар мебинад. Аммо баъзан лозим меояд, ки бо корбар сӯҳбат кард: паём нишон дод, ном пурсид, ҷавоби «ҳа» ё «не» гирифт. Браузер барои ин се равзанаи дарунсохт дорад. Онҳо «модалӣ» мебошанд: то даме ки равзана кушода аст, саҳифа яхбастааст ва чизи дигар пахш кардан мумкин нест.

alert — паём нишон медиҳем

alert("Салом, MakeFirstStep!");

Равзана бо матн ва як тугмаи «OK». Чизе бозпас намегардонад: танҳо нишон медиҳад ва интизор мешавад.

prompt — аз корбар мепурсем

prompt("Как вас зовут?");                // равзана бо майдони воридкунӣ
prompt("В каком вы городе?", "Душанбе"); // аргументи дуюм — қимати пешфарз

Равзанаро бо майдони воридкунӣ ва тугмаҳои «OK» ва «Отмена» (Бекор кардан) нишон медиҳад. prompt чиро бозпас мегардонад:

• агар OK пахш шуда бошад — он чизе, ки ворид шуд, ҳамеша ҳамчун сатр (ҳатто агар рақам чоп карда бошед);
• агар «Отмена» ё Esc пахш шуда бошад — қимати махсуси null («ҳеҷ чиз»).

confirm — мепурсем «ҳа ё не»

confirm("Вы точно хотите удалить заказ?");

Равзана бо савол ва тугмаҳои «OK» ва «Отмена». Агар OK пахш шавад, true («ҳа»), агар «Отмена» бошад, false («не») бозпас мегардонад. Бо ин ҷавоб чӣ кор кардан — вақте интихоб мекунем, ки шартҳоро биомӯзем (дарси 3).

Ҷавобро фавран, бе тағйирёбанда истифода мебарем

Тағйирёбандаҳоро ҳоло намедонем (ин дарси 2 аст), аммо ҷавоби prompt-ро аллакай истифода бурдан мумкин аст — як даъватро ба дохили дигаре гузошта. Аввал JavaScript он чиро иҷро мекунад, ки дар дохили қавсҳо аст, баъд натиҷаро истифода мебарад.

alert("Салом, " + prompt("Как вас зовут?") + "!");

1. Даъвати дохилӣ иҷро мешавад: равзанаи «Как вас зовут?» (Номатон чист?) кушода мешавад, шумо «Мадина»-ро ворид мекунед.
2. prompt сатри "Мадина"-ро бозпас мегардонад.
3. "Салом, " + "Мадина" + "!" часпонида мешавад.
4. alert-и беруна Салом, Мадина!-ро нишон медиҳад.

Дом: prompt сатр бозпас мегардонад

Агар аз корбар ду рақам пурсида, ҷавобҳоро бо аломати + ҷамъ кунед, часпонидан ҳосил мешавад, на маблағ: "7" + "5" натиҷаи "75" медиҳад. Барои табдил додани сатр ба рақам функсияи Number(...)-ро истифода баред. Ин «дом»-ро ҳатто дар ин ҷо, бе равзанаҳо санҷидан мумкин аст — ба ҷои ҷавобҳои корбар сатрҳои тайёрро мегузорем:

console.log("7" + "5");                    // часпонидани сатрҳо
console.log(Number("7") + Number("5"));    // ба рақамҳо табдил додем ва ҷамъ кардем

alert(Number(prompt("Первое число")) + Number(prompt("Второе число")));

Бештар хонед: learn.javascript.ru — alert, prompt, confirm

console.log("7" + "5");

12

// нарх "200", тахфиф "15" — ҳар дуи онҳо сатр
// нарх - нарх * тахфиф / 100

170

06 Танзими муҳит: VS Code, васеъшавиҳо, Live Server, Copilot

Код навиштан дар дафтарчаи оддӣ ҳам мумкин аст, вале касбиҳо муҳаррири код-ро истифода мебаранд: он синтаксисро ранг мекунад, фармонҳоро ишора медиҳад ва хатоҳои имлоиро фавран нишон медиҳад. Дар курс мо дар Visual Studio Code (VS Code) кор мекунем — ин муҳаррири ройгон аст, ки имрӯз аксари фронтендерҳои ҷаҳон дар он менависанд.

Қадами 1. Насб кардани VS Code

Барои он ки интерфейс бо забони русӣ бошад, Ctrl/Cmd + Shift + X-ро кушоед, «Russian Language Pack for Visual Studio Code»-ро ёбед ва насб кунед. Аммо ҳуҷҷатнигорӣ ва ишораҳо асосан бо забони англисӣ мебошанд, бинобар ин бисёриҳо интерфейси англисиро нигоҳ медоранд.

Қадами 2. Ҷузвдони корӣ

1. Дар диск барои курс ҷузвдон созед, масалан mfs-js. Дар Windows беҳтар аст роҳ бе ҳарфҳои кириллӣ ва фосила бошад: C:\dev\mfs-js. Дар Mac — дар ҷузвдони хонагӣ: ~/dev/mfs-js.
2. Дар дохили он ҷузвдони lesson-01-ро созед.
3. Дар VS Code: File → Open Folder… ва ҷузвдони mfs-js-ро интихоб кунед. Ба саволи «Do you trust the authors?» ҷавоб диҳед «Yes, I trust the authors».
4. Дар чап дар панели Explorer ҷузвдон пайдо мешавад. Акнун файлҳо сохтан мумкин аст: мушро ба номи ҷузвдон наздик кунед, нишонаи «New File»-ро пахш намоед.

Қадами 3. Васеъшавиҳо

Васеъшавиҳо дар панели чапи Extensions (нишона аз чор мукааб) насб мешаванд — Ctrl/Cmd + Shift + X. Ном ворид кунед, васеъшавиро аз муаллифи лозимӣ интихоб намоед, Install-ро пахш кунед.

Қадами 4. Танзимоте, ки вақтро сарфа мекунанд

Танзимотро кушоед: Ctrl + , (Windows) ё Cmd + , (Mac). Дар сатри ҷустуҷӯ инҳоро ёбед ва фаъол кунед:

• Files: Auto Save → afterDelay: файл худаш захира мешавад ва шумо ҳаргиз пахш кардани Ctrl/Cmd + S-ро фаромӯш намекунед (саволи «чаро чизе тағйир наёфт» хеле камтар пайдо мешавад).
• Editor: Format On Save → фаъол кунед, дар Editor: Default Formatter бошад Prettier-ро интихоб намоед: код ҳангоми ҳар захира кардан ба тартиб меояд.
• Editor: Font Size → 16–18: дар проектор ва барои чашм қулайтар аст.
• Editor: Word Wrap → on: сатрҳои дароз гузаронида мешаванд.

Мобайнкуниҳои муфиди клавиатура

Ва боз дар файли холии HTML !-ро чоп кунед ва Tab-ро пахш намоед — VS Code худаш тамоми қолаби саҳифаро менависад. Ин ёрдамчии дарунсохти Emmet аст.

Қадами 5. GitHub Copilot

GitHub Copilot — ёрдамчии ЗС бевосита дар муҳаррир. Он идомаи кодро пешниҳод мекунад ва ба саволҳо дар чат ҷавоб медиҳад. Барои оғоз чӣ лозим аст:

1. Ҳисоби GitHub. Он аллакай доред — бо Git кор карда будед. Агар не — дар github.com сабти ном кунед.
2. Тариф. Барои курс тарифи ройгони Copilot Free кифоя аст (маҳдудиятҳои моҳона барои ишораҳо ва паёмҳои чат ҳаст). Донишомӯзон ва донишҷӯён метавонанд GitHub Student Developer Pack-ро расмӣ кунанд ва Copilot-и васеъшударо дар давраи таҳсил ройгон гиранд. Дархост дар education.github.com/pack дода мешавад: мақоми тасдиқшудаи донишҷӯ (почтаи таълимӣ ё ҳуҷҷат) лозим аст. Онро аз чанд рӯз то чанд ҳафта баррасӣ мекунанд, бинобар ин дархостро имрӯз диҳед, то он вақт бошад бо тарифи ройгон кор кунед. Шарт ва маҳдудиятҳо давра ба давра тағйир меёбанд — навҳояшро дар сайт бинед.
3. Ворид шудан аз VS Code. Васеъшавии GitHub Copilot-ро насб кунед, нишонаи ҳисобро дар поёни чап (ё нишонаи Copilot-ро дар сатри ҳолати поён) пахш кунед → Sign in with GitHub → браузер тасдиқи вурудро талаб мекунад.
4. Санҷиш. Дар файли нави script.js шарҳи // выведи в консоль приветствие-ро нависед ва Enter-ро пахш кунед. Бо матни хокистарӣ ишора пайдо мешавад: Tab онро мепазирад, Esc рад мекунад.

Қадами 6. Аввалин скрипт ва Live Server

Акнун ҳама чиз тайёр аст. Дар ҷузвдони lesson-01 ду файл созед.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Мой первый скрипт</title>
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Салом, JavaScript!</h1>
  <p>Откройте консоль: F12 или Cmd+Option+I</p>
</body>
</html>

console.log("Салом, JavaScript!");
console.log("Мой первый скрипт работает");

1. Ҳар ду файлро захира кунед (агар Auto Save фаъол бошад — ин худ аз худ мешавад).
2. Бо тугмаи рости муш болои index.html дар Explorer пахш кунед → Open with Live Server. Ё тугмаи Go Live-ро дар кунҷи поёнии рости VS Code пахш кунед.
3. Дар браузер нишонии намуди http://127.0.0.1:5500/lesson-01/index.html кушода мешавад.
4. DevTools-ро кушоед (F12 ё Cmd + Option + I) → ҷадвали Console. Дар он ҷо бояд ду сатри шумо бошад, дар рост — script.js:1 ва script.js:2.
5. Матнро дар script.js тағйир диҳед, захира кунед — саҳифа худаш нав мешавад. Ин аст Live Server.
6. Барои қатъ кардани сервер тугмаи Port: 5500-ро дар сатри поён пахш кунед.

Агар дар консол холӣ ё хатои сурх бошад — ба рӯйхати «Хатоҳои маъмул ҳангоми пайваст кардан» дар бахши 2 баргардед. Дар 9 аз 10 ҳолат сабаб дар он аст.

Git: аввалин коммит (ихтиёрӣ)

Шумо аллакай бо Git шиносед — одатро ба таъхир наандозед: ҳар дарс дар ҷузвдони алоҳидаи як репозиторий хоҳад буд.

git init
git add .
git commit -m "add lesson 01: first script"

Бештар хонед: learn.javascript.ru — Муҳаррирҳои код · VS Code — боргирӣ · Live Server

07 Блоки ЗС: харитаи абзорҳо ва қоидаҳои курс

Се навъи абзорҳои ЗС

Дар JavaScript ЗС аксар вақт дар куҷо хато мекунад

• Фармонҳоро меандешад. Усул ё функсияеро пешниҳод мекунад, ки дар JavaScript нест (масалан, console.print), — боварибахш садо медиҳад, дар консол бошад хатои сурх.
• Забонҳоро омехта мекунад. Сохторҳоро аз Python ё забони дигар меорад, зеро «монанд аст».
• Баромадро нодуруст пешбинӣ мекунад. Бо боварӣ менависад «ин код 4-ро мебарорад», ҳол он ки 22 мебарорад. ЗС коди шуморо иҷро намекунад — тахмин мекунад.
• Вазифаи нодурустро ҳал мекунад. Шумо як чизро хоста будед, ӯ монандашро ҳал кард, боз чизи зиёдатӣ илова кард.
• Усулҳои кӯҳна ё ҳалҳои хеле мураккабро истифода мебарад, ки шарҳ дода наметавонед.

Худатон санҷед: ёрдамчии ЗС метавонист бигӯяд «"2" + 2 4 медиҳад». Иҷро кунед ва бовар кунед, ки кӣ дуруст аст — консол ё ЗС:

console.log("2" + 2);   // ЗС метавонист бо боварӣ ҷавоб диҳад: 4
console.log(2 + 2);     // ва ин аллакай ҳақиқатан 4 аст

Хулоса: консол — мақоми охирин. Ҳар ҷавоби ЗС дар бораи код бо иҷро санҷида мешавад.

Қоидаҳои кор бо ЗС дар курс

1. Аввал 15 дақиқа худат кӯшиш мекунӣ — танҳо баъд аз ЗС мепурсӣ.
2. Коде, ки шарҳ дода наметавонӣ, намегузорӣ — сатр ба сатр.
3. Ҳангоми санҷиши вазифаи хонагӣ муаллим метавонад хоҳиш кунад, ки ҳар сатрро шарҳ диҳӣ.
4. Промпт ҳамеша дорои инҳост: контекст, вазифа, маҳдудиятҳо ва формати ҷавоби лозимӣ.
5. ЗС лоиҳа менависад — ту мантиқ, номҳо ва ҳолатҳои канориро месанҷӣ.
6. Copilot-ро дар амалия фаъол мекунем ва дар вазифаҳои назоратӣ хомӯш мекунем.
7. Кори назоратӣ дар дарсҳои 6 ва 18 пурра бе ЗС иҷро мешавад.

Формулаи промпт

Аз китобхонаи промптҳои курс барои дарсҳои аввал қолаби «Намефаҳмам, чаро код аҷоиб рафтор мекунад» муфид аст: «Ин код: [код]. Сатр ба сатр шарҳ деҳ, ки чӣ рӯй медиҳад ва чаро натиҷа чунин аст. Кодро аз нав нанавис — танҳо шарҳ деҳ.». Ҳамеша санҷед: оё шарҳ бо он чи консол воқеан мебарорад, мувофиқат мекунад.

console.log("3 x 1 =", 3 * 1);
console.log("3 x 2 =", 3 + 2);
console.log("3 x 3 =", 3 * 3);

3 x 1 = 3
3 x 2 = 6
3 x 3 = 9

console.log("Чай:", 3 * 4);
console.log("Самбуса:", 2 + 5);
console.log("Итого:" 12 + 10);
consol.warn("Спасибо за заказ!");

Чай: 12
Самбуса: 10
Итого: 22
Спасибо за заказ!

08 Амалия дар дарс: муҳит ва аввалин скрипт

Ин дили дарс аст: шумо бо дасти худ ҷои корро муҷаҳҳаз мекунед ва аввалин барномаро иҷро менамоед. Қадам ба қадам равед, ҷаҳида нагузаред. Агар чизе нашавад — даст бардоред ё дар чати гурӯҳ нависед: якҷоя ислоҳ мекунем.

Қадам ба қадам

1. VS Code ва васеъшавиҳоро аз бахши 6 насб кунед. Санҷед: Live Server ва Prettier дар рӯйхати насбшудаҳо намоёнанд.
2. Ҷузвдони mfs-js/lesson-01-ро созед ва mfs-js-ро дар VS Code кушоед.
3. index.html-ро созед: дар файли холӣ !-ро чоп кунед ва Tab-ро пахш намоед. lang-ро ба ru, title-ро ба «Мой первый скрипт» ислоҳ кунед.
4. script.js-ро созед ва онро дар <head> пайваст кунед: <script src="script.js" defer></script>.
5. Дар script.js нависед коди мисоли зеринро.
6. Live Server-ро оғоз кунед ва консоли браузерро кушоед. Ҳамаи шаш паёмро ёбед, рангҳоро муқоиса кунед.
7. Нуқтаи таваққуфро гузоред дар сатри console.warn дар ҷадвали Sources, саҳифаро нав кунед, бо клавишаи F10 пеш равед.
8. Кодро қасдан вайрон кунед: нохунаки пӯшандаро дар як сатр нест кунед. Хатои сурхро дар консол ва нишондиҳии онро дар VS Code (агар Error Lens насб бошад) ёбед. Ба ҳолати пештара баргардонед.
9. Copilot-ро санҷед: дар сатри нав шарҳи // выведи в консоль название любимого блюда-ро нависед ва ишораро бинед. Пеш аз пазируфтан онро бихонед. Оё ҳар қисм фаҳмо аст?
10. Аввалин коммитро иҷро кунед (ихтиёрӣ), то одат мустаҳкам шавад.

console.log("Имя: Мадина");
console.log("Город: Душанбе");
console.log("Курс: Frontend + AI");
console.warn("Предупреждение: это учебный проект");
console.error("Ошибка: просто проба красного цвета");
console.table(["HTML", "CSS", "JavaScript"]);

Саҳифаи хурд барои озмоишҳо

То даме ки муҳитро дар компютери худ танзим накардаед, ё барои зуд санҷидани ғоя — аз ин саҳифаи хурд истифода баред: дар чап коди index.html ва script.js, дар поён пешнамоиш ва консол. Ин ҳамон принсип аст, ки дар VS Code бо Live Server.

<h1>Салом, JavaScript!</h1>
<p>Откройте консоль: там уже есть сообщения.</p>

console.log("Страница загружена");
console.warn("Это предупреждение");
console.log("Мне", 2026 - 2005, "лет");

<h1>Мой первый сайт</h1>
<p>Результат смотрите в консоли.</p>

// ду console.log нависед

Привет из script.js
Урок 1 пройден

// Имя: Мадина
// Год рождения: 2005
// Возраст: 21
// Курс: Frontend + AI

Имя: Мадина
Год рождения: 2005
Возраст: 21
Курс: Frontend + AI

// 15 меҳмон, 100 г барои меҳмон, халта 2 кг

Гостей: 15
Риса нужно, г: 1500
Риса нужно, кг: 1.5
Останется из мешка 2 кг: 0.5

★ Вазифаи хонагӣ: муҳит ва 5 вазифа

Танзими муҳитро анҷом диҳед, тасдиқро фиристед ва панҷ вазифаи хурдро бо console.log, alert ва prompt ҳал кунед. Ҳама чизро дар ҷузвдони lesson-01 дар компютери худ иҷро намоед, барои вазифаҳо бошад — файли алоҳидаи tasks.js, ки пас аз script.js ба index.html пайваст шудааст. Тағйирёбандаҳо лозим нестанд: танҳо қиматҳоеро истифода баред, ки бевосита дар код навишта шудаанд.

Қисми 1. Муҳити корӣ (скриншотҳо)

• ☐ VS Code насб шудааст, ҷузвдони mfs-js кушода аст, lesson-01/index.html ва script.js намоёнанд.
• ☐ Live Server, Prettier ва GitHub Copilot насб шудаанд, Auto Save ва Format On Save фаъоланд.
• ☐ Вуруд ба GitHub аз VS Code анҷом дода шудааст, Copilot ишораҳо нишон медиҳад.
• ☐ Live Server саҳифаро мекушояд, дар ҷадвали Console паёмҳои шумо намоёнанд.
• ☐ Дархост ба GitHub Student Pack фиристода шудааст (скриншоти мактуб ё саҳифаи ҳолат) — ё шумо шарҳ додаед, ки чаро мувофиқ нестед.

Як скриншот бояд ҳама чизро якбора нишон диҳад: равзанаи VS Code бо script.js-и кушода ва панели паҳлӯӣ, дар паҳлӯяш — браузер бо саҳифа ва консоли кушода бо паёмҳои шумо. Беҳтар аст ду скриншот бошад: алоҳида VS Code (бо нишонаи Copilot) ва алоҳида браузер.

Қисми 2. Панҷ вазифа

1. Корти зиёратӣ (console.log). Панҷ сатр бароред: ном, шаҳр, соли таваллуд, курс, хӯроки дӯстдошта. Дар сатри синну сол синну солро бо ифода ҳисоб кунед: 2026 - соли_таваллуди_шумо (рақамро худатон гузоред).
2. Ҳисоб дар мағоза (console.log бо якчанд қимат). Се мол бо нарх ва миқдор. Дар ҳар сатр: ном, миқдор, аломати = ва маблағи бо ифода ҳисобшуда. Дар охир — натиҷа, он низ ҳисобшуда. Як сатр — як console.log бо якчанд қимат бо вергул.
3. Салом (alert). alert-ро бо салом ба гурӯҳ нишон диҳед, баъд alert-и дуюмро бо матни ду сатр (гузаштан ба сатри нав — аломати \n дар дохили матн).
4. Шиносоӣ (prompt + alert). Ном ва шаҳрро бо ду prompt бипурсед ва бо як alert нишон диҳед: Салом, Ном аз Шаҳр!. Ишора: ду prompt-ро дар як часпонидани сатрҳо гузоштан мумкин аст.
5. Масоҳат (prompt + Number + confirm). Дарозӣ ва бари росткунҷаро бо ду prompt бипурсед, ҷавобҳоро тавассути Number ба рақам табдил диҳед ва масоҳатро тавассути alert нишон диҳед. Баъд confirm("Показать периметр?")-ро бипурсед ва ҷавобро (true ё false) тавассути console.log бароред. Периметрро нишон додан лозим нест, шартҳоро ҳанӯз наомӯхтаем.

Бонус (ихтиёрӣ, бе балл): ягон сатрро бо се роҳ бароред — console.log, console.warn, console.error — ва скриншоти намуди онҳоро дар консоли воқеӣ гиред. Ва боз кӯшиш кунед console.table(["самбуса", "курутоб", "чой"])-ро бароред.

Чӣ супоридан лозим аст

1. Скриншот(ҳо)-и муҳити корӣ (қисми 1).
2. Истиноди репозиторийи GitHub (ҷузвдони lesson-01 бо index.html, script.js, tasks.js) ё бойгонии ҷузвдон ба гурӯҳи Telegram.
3. Агар ЗС-ро истифода бурда бошед: дар файли README.md се сатр — чиро хостед, чиро гирифтед, чиро бо даст ислоҳ кардед. Ҳангоми санҷиш муаллим метавонад хоҳиш кунад, ки ҳар сатрро шарҳ диҳед.

Чӣ тавр баҳо медиҳем (0–10)