JavaScript кантип колдонуу керек?

JavaScript менен иштөөгө даярдоо

JavaScript менен иштөөнү баштоо үчүн сизге жалгыз эки курал керек:

Текст редактору

Код жазуу үчүн ар кандай программа:

VS Code (сунушталат) — акысыз, JavaScript дебагер менен
Sublime Text — тез жана жеңил редактор
Atom — GitHub тарабынан редактор
Notepad++ — Windows үчүн жөнөкөй вариант

Иштеп чыгуучу куралдары бар браузер

Кодду сыноо жана дебагдоо үчүн:

Google Chrome — DevTools (F12)
Mozilla Firefox — Firefox Developer Tools
Microsoft Edge — Chromium DevTools

Иштеп чыгуучу куралдарында JavaScript коду аткаруу үчүн Консоль (Console) бар.

💡 Кеңеш: VS Code'до Live Server кеңейтмесин орнотуңуз. Ал код сакталганда баракты автоматтык түрдө жаңыртат — иштеп чыгуу үчүн өтө ыңгайлуу!

JavaScriptти туташтыруунун үч жолу

Киргизилген JavaScript

Код туруктуу түрдө HTML-элементтин атрибутунда жазылат

                        <button onclick="alert('Салам!')">

                          Мени басыңыз

                        </button>

Чоң долбоорлор үчүн сунушталбайт

Ички JavaScript

Код HTML ичиндеги <script> тегинде жайгаштырылат

                        <script>

                          alert('Барак жүктөлдү!');

                        </script>

Кичинекей скрипттер үчүн ылайыктуу

Сырткы JavaScript

Код өзүнчө .js файлына жылдырылат

Сунушталуучу жол реалдуу долбоорлор үчүн

📌 Скриптерди туура жайгаштыруу: Сырткы скриптерди </body> жабуу тегинин алдына туташтырыңыз. Бул DOM JavaScript аткарылганына чейин толук жүктөлөөрүн камсыз кылат.

Сиздин биринчи JavaScript программаңыз

Файлдарды түзүңүз жана биринчи программаны жазыңыз

HTML файлын түзүңүз

Төмөнкү мазмун менен index.html файлын түзүңүз:

                                <!DOCTYPE html>

                                <html lang="ky">

                                <head>

                                  <meta charset="UTF-8">

                                  <title>Менин биринчи JS программам</title>

                                </head>

                                <body>

                                  <h1 id="greeting">Салам!</h1>

                                  <button id="changeButton">Текстти өзгөртүү</button>

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

                                </body>

                                </html>

JavaScript файлын түзүңүз

Ошол эле папкада script.js файлын түзүңүз:

                                // Барактагы элементтерди алуу

                                const greetingElement = document.getElementById('greeting');

                                const buttonElement = document.getElementById('changeButton');

                                // Текстти өзгөртүү үчүн функция

                                function changeGreeting() {

                                  greetingElement.textContent = 'JavaScript иштейт!';

                                  greetingElement.style.color = '#118AB2';

                                }

                                // Баскычка окуя иштетүүчүсүн кошуу

                                buttonElement.addEventListener('click', changeGreeting);

                                // Консолго билдирүү чыгаруу

                                console.log('Скрипт ийгиликтүү жүктөлдү!');

Браузерде ачыңыз

index.html файлын браузерде ачып:

"Текстти өзгөртүү" баскычын басыңыз
Текст "JavaScript иштейт!" болуп өзгөрөт
Тексттин түсү көк болот
Билдирүүнү көрүү үчүн Консолду ачыңыз (F12 → Console)

Башталгычтар үчүн JavaScriptтин негизги түшүнүктөрү

Түшүнүк	Сүрөттөмө	Мисал	Качан колдонуу керек
Өзгөрмөлөр	Маалыматтарды сактоочу сактоочу	`let name = "Айжигит";`	Кандайдыр бир маалыматты сактоо үчүн
Функциялар	Кайра колдонулчу код блогдору	`function greet() { ... }`	Бир аракетти көп жолу аткаруу керек болгондо
Шарттар	Коддо чечим кабыл алуу	`if (age >= 18) { ... }`	Шартты текшерүү керек болгондо
Циклдер	Аракеттерди кайталоо	`for (let i = 0; i < 10; i++)`	Бир нерсени көп жолу кайталоо керек болгондо
Окуялар	Колдонуучунун аракеттерине реакция	`button.addEventListener('click', ...)`	Интерактивдүү элементтер үчүн
DOM-манипуляция	HTML барактын өзгөртүү	`element.textContent = "Жаңы текст"`	Контентту динамикалык өзгөртүү үчүн

JavaScript кодунун дебагдоосу

Браузердин консолу

F12 → Console басыңыз. Бул жерде сиз:

JavaScript коду аткара аласыз
Каталарды жана эскертүүлөрдү көрө аласыз
Дебагдоо үчүн console.log() колдона аласыз

Токтотуу чекиттери (Breakpoints)

Иштеп чыгуучу куралдарында:

Sources/Debugger вкладкасын ачыңыз
JavaScript файлыңызды табыңыз
Токтотуу чекитин орнотуу үчүн сап номерин чыкылдатыңыз
Баракты жаңыртыңыз - аткаруу бул сапта токтолот

Пайдалуу console методдору

                            console.log('Жөнөкөй билдирүү');

                            console.warn('Эскертүү');

                            console.error('Ката');

                            console.table(['Алма', 'Банан', 'Апельсин']);

                            console.time('Таймер');

                            // ... сиздин код ...

                            console.timeEnd('Таймер');

⚠️ Башталгычтардын көп кездешкен каталары:

Өзгөрмө жана функция аттарындагы опечаткалар
Тырмакчаларды же кашааларды жабууну унутту
Элементтерди жүктөлгөнгө чейин колдонуу (скрипти body аягына жайгаштырыңыз)
Унуттугу чекиттуу үтүрлөр (бирок JS аларды "кечирет")

Куттуктайбыз! Сабак аяктады 🎉

Сонун иш!

Сиз жаңы эле JavaScript үйрөнүүдө маанилүү кадам жасадыңыз:

Скриптерди үч жол менен туура туташтырууну үйрөндүңүз
Өзүңүздүн биринчи интерактивдүү программаңызды жаздыңыз жана иштеттиңиз
Негизги иштеп чыгуучу куралдары менен тааныштыңыз
Браузердин консолунда кодду кантип дебагдоону билдиңиз

Эми эмне кылуу керек:

Материалды бекемдеңиз — бул сабак боюнча тесттен өтүү зарыл
Практикаланыңыз — программаңыздагы текстти, түстү өзүңүз өзгөртүүгө же дагы бир баскыч кошууга аракет кылыңыз
Мини-долбоор түзүңүз — мисалы, чыкылдатууларды эсептегич же колдонуучунун аты менен жөнөкөй саламдашуу

💡 Эстеп калыңыз: Программалоодо негизги нерсе — практика! Канчалык көп код жаза берсеңиз, ал ошончолук түшүнүктүү жана табигый болуп калат.

Сабак 2: JavaScript кантип колдонуу керек?