JavaScriptти бардык тапшырмалар үчүн жалпы көрсөтмө
Маанилүү: JavaScript боюнча каалаган тапшырманы баштоодон мурун, бул кадамдарды бир жолу аткарыңыз:
- Sublime Textти иштетиңиз.
- Жогорудагы менюдан File → Open Folder (Файл → Папканы ачуу) тандаңыз.
- Менин сайттарым папкаңызды табыңыз жана тандаңыз. Ачуу баскычын басыңыз.
- → Сол жагындагы каптал панелинде сиз бардык файлдарыңызды көрөсүз.
- JavaScript үчүн жаңы файл түзүңүз:
- Ctrl + N (Windows/Linux) же Cmd + N (Mac) басыңыз
- Дароо сактаңыз: Ctrl + S (же Cmd + S)
- Сактоу терезесинде:
- Менин сайттарым папкасы тандалганына көзүңүз жеткиле
- Файлдын аты талаасына так жазыңыз:
script.js
- Сактоо баскычын басыңыз.
- → Эми сол жагында сиз
script.js файлын көрөсүз.
- JavaScriptти өзүңүздүн HTML-файлыңызга туташтырыңыз:
- Керектүү HTML-файлды ачыңыз (сол жагындагы файлды эки жолу чыкылдатыңыз)
</body> жабуу тегинин алдына так ушул сапты кошуңыз:
<script src="script.js"></script>
- HTML-файлды сактаңыз (Ctrl + S)
✓ Эми JavaScript иштөөгө даяр!
Төмөндөгү бардык тапшырмаларды script.js файлында аткарыңыз.
1
Тапшырма 1: Барак ачылганда саламдашуу
Эмне болот:
Барак ачылганда — саламдашуу менен терезе пайда болот.
Эмне кылуу керек:
script.js ачыңыз
- Бир сап жазыңыз:
alert("Салам! Кош келдиңиз!");
- Сактап, браузерде HTML ачыңыз
Өзүңүздү текшериңиз:
Төмөнкү баскычты басыңыз - саламдашуу пайда болушу керек
Даяр! Сиз JavaScriptти иштеттиңиз.
2
Тапшырма 2: Билдирүүсү бар баскыч
Эмне болот:
Баракта баскыч, басылганда билдирүү пайда болот.
Эмне кылуу керек:
- HTMLге баскыч кошуңуз:
<button>Мени басыңыз</button>
script.js файлына жазыңыз:
alert("Ура! Сиз баскычты бастыңыз!");
- Сактап, браузерде баскычты басыңыз
Өзүңүздү текшериңиз:
Төмөнкү баскычты басыңыз - билдирүү пайда болушу керек
Даяр! Баскыч иштейт.
3
Тапшырма 3: Эки баскыч — эки билдирүү
Эмне болот:
Эки баскыч, ар бири өзүнүн билдирүүсүн көрсөтөт.
Эмне кылуу керек:
- HTMLге эки баскыч кошуңуз:
<button>Баскыч 1</button>
<button>Баскыч 2</button>
script.js файлына эки сап жазыңыз:
alert("Бул биринчи баскычтын билдирүүсү 😊");
alert("Ал эми бул экинчи баскычтын билдирүүсү 🎉");
- Сактап, баскычтарды кезек менен басыңыз
Өзүңүздү текшериңиз:
Төмөнкү баскычтарды басыңыз - ар бири өзүнүн билдирүүсүн көрсөтөт
Даяр! Баскычтар ар түрдүү сөздөрдү айтат.
4
Тапшырма 4: Баскыч барактагы сөздү өзгөртөт
Эмне болот:
Баскыч барактагы текстти өзгөртөт.
Эмне кылуу керек:
- HTMLге текст жана баскыч кошуңуз:
<p>Эски сөз</p>
<button>Сөздү өзгөртүү</button>
script.js файлына жазыңыз:
document.querySelector("p").textContent = "Жаңы сөз!";
- Сактап, баскычты басыңыз — текст өзгөрөт
Өзүңүздү текшериңиз:
Баскычты басыңыз - төмөнкү текст өзгөрүшү керек
Эски сөз
📝 Маанилүү кеңештер:
- Файлдарды сактаңыз ар бир өзгөртүүдөн кийин (Ctrl + S)
- Баракты жаңыртыңыз браузерде сактагандан кийин (Ctrl + R)
- Эгер бир нерсе иштебесе, текшериңиз:
script.js файлы HTMLге туташтырылганбы
- Буйруктарды жазууда ката барбы
- Файлдарды туура сактадыңызбы
Баарын сактап, браузерде тыкшыра текшериңиз — баары иштеши керек!
Башкы бетке