16-блог: JavaScript қaлай үйренемиз? 1-бөлим / JavaScriptti qalay úyrenemiz? 1- bólim
Мени сүйдиретуғын ҳəм күйдиретуғын бағдарлама тили бул JavaScript.
Бул блогты оқымасыңыздан алдын, биринши ҳəм екинши блогларымды оқып шығыўыңызды мəслаҳат берер едим.
JavaScript бул Java деп аталатуғын бағдарлама тилдиң "ағайни" емес. Бир-бирине қарым-қатнасы жоқ.
Керисинше, Java бул OOP (Object-Oriented Programming) түрдеги программалаў тили. Ал, JavaScript - скриптинг программалаў тили.
"Не деп кеттиң?" деп ҳайран қалыўыңыз мүмкин. Келиң, биринши JavaScript ҳаққында түсинигимизди кеңейтсек.
JavaScript бул вебсайт жаратыў ушын қолланылатуғын тил.
JavaScriptти браўзер жақсы түсинеди. JavaScript браўзер тəрепинен "иске қосылады/ жүритип көриледи" (executed).
Браўзердеги арнаўлы "двигатель" JavaScript коудын бирме-бир оқып, түсинип, əмелге асырады.
JavaScript бул вебсайтларға "жан ендиретуғын" тил.
Текғана HTML/CSS пенен жазылған вебсайтқа қуры қарап отырыўға болады. Ол интерактив емес. Түймелерин басып, бир нəрселерди қыла алмайсыз.
Ал, JavaScript пенен жазылған вебсайтты ҳəм оқып, ҳəм тамашалап, ҳəм комментлериңизди де жазып кете аласыз.
Демек, JavaScriptте қалай коудинг қыламыз?
Биринши усылы, JavaScriptти HTML деген документтиң ишинде белгилеп жазыўымыз мүмкин.
HTMLди үйрениў деген блогта түсиндирип өткенимдей, HTML деген маркап тилди теглер жардеминде жазамыз. Тап сондай, HTML ишинде JavaScript коудын жазсақ, тег пенен белгилеймиз.
<script> деген тег пенен JavaScript коудын белгилеп аламыз.
HTML документтиң қай жерине <script> тегти қоссақ болады екен.
Төмендегидей етип, еки усылда жазсақ болады:
1. <head> деген тегтиң ишинде келиўи мүмкин.
<!DOCTYPE html>
<html lang="en">
<head>
<script></script>
</head>
<body></body>
</html>2. Яки, <body> деген тегтиң ишинде келиўи мүмкин.
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<script></script>
</body>
</html>Қайсы усылдан пайдаланыў бул жаратып атырған программаңызға байланыслы. Мен өз алдына JavaScript файлын жаратқанды мақул көремен. HTML файлды бөлек, CSS файлды бөлек, ҳәм JavaScript файлды бөлек жазып, сақлағанды ыңғай көремен. Бул ҳаққында кейинги блогларымда кеңлеў етип түсиндиремен.
Браўзердиң ишинде JavaScriptти оқып түсинетүғын "двигатель" болады. Chrome деген браўзердиң "двигатели" V8 деп аталады. Мен пайдаланып атырған FireFox браўзердиң JavaScript "двигатели" SpiderMonkey деп аталады.
Енди, көп сөзди қойып, JavaScript жәрдеминде биринши программамызды жазып көрейик.
<!DOCTYPE html>
<html lang="en">
<body>
<script>
document.write('Hello World!');
</script>
</body>
</html>Егер жоқарыдағы коудты "жүритип көрсеңиз", төмендеги бетти көремиз.
HTMLди иске қосыў/жүритип көриў ҳаққында төмендеги блогта көрсетип едим.
Демек, биринши JavaScript программаңызды иске қосып көрдиңиз. Бәрекелле!
Енди, сораў туўылады. "Не қылдық өзи?"
Бирме-бир түсиндириўге ҳәрекет етемен.
Биринши, document.write('Hello World!'); деген коудты түсинип алсақ.
document бул объект. Программалаўда объект деген түсиникке көп дус келесиз.
Келиң, биринши ол не екени ҳаққында түсинип алайық.
Объект бул өз қəсийетине ҳəм ҳəрекетине ийе зат. JavaScript (яки басқа тил) тилиндеги объектти реал дүньядағы объект деп қабыл етиўиңиз мүмкин.
Мысал ушын, кондиционерди реал өмирдеги объект/ буйым деп алсақ болады. Ол өзиниң реңи, салмағы, өлшеми, ислеў қуўат дəрежеси, ислеп шығарыўшы, модель номери сияқлы белгили бир қəсийетлерге/характеристикасина ийе.
Буннан тысқары, кондиционердиң қылатуғын "жумысы" да болыўы мүмкин. Кондиционерге қарата қылатуғын ҳəрекетлер, яки кондиционер тəрепинен əмелге асырылатуғын ҳəрекетлер бар.
Мəселен, бизлер кондиционерди иске қосыўымыз яки өшириўимиз мүмкин. Ол бөлмени суўытып береди. Бөлмени белгили бир дəрежеге шекем суўытқаннан кейин, мəлим бир ўақыттан кейин өзинен-өзи өшиўи де мүмкин.
Усы ҳəрекетлерди кондиционердиң методлары деп алыўымыз мүмкин.
JavaScriptтеги объектлер де тап усы режимде ислейди.
Анығырақ айтқанда, "document" бул усы биз үстинде ислеп атқан HTML документти билдиретүғын объект есапланады. Ол да өзиниң қасийетлерине ҳәм методларына ийе.
Демек, биз жазып баслаған HTML документти де бир объект сыпатында есаплап, оны "document" деп атаймыз. Ҳәр бир объекттиң аты бар.
JavaScriptте объекттиң қасийетлери ҳәм методларынан пайдаланыў ушын объект атынан кейин точка (.) белгисинен пайдаланамыз.
Соның ушын, жоқарыда document деген сөздиң ақырына точка қойып, HTML деп аталатуғын объекттиң методларынан, яғный жазыў методын арнаўлы сайлап алдық.
Бул дегени тап усы HTML документке бир нәрсе жазып көрсетиў мақсетинде жазыў деген методты .write() сайладық.
"Hello World" деп қаўсырманың ишине жаздық.
Демек бизлердиң HTML документимизде енди "Hello World" деген жазыў пайда болады.
Ол төмендегидей көринеди.
Көпшилик девелоперлер ең биринши программасын "Hello World" деп жазып баслаған.
Негизи, булай бирме-бир түсиниўге ҳәрекет етсек, қайта басымыз ауырыўы мүмкин.
Бағдарламаны үйрениў бул қурақ қурағанға қусайди. Басында бир-бирине байланысы жоқтай сезилген бөлеклерди үйренип, түсинбей жүргенде бирден ҳәммеси өз орнын таўып, бағдарлама деген үлкен "қурақ көрпешениң'" бир бөлегине айланады.
Соның ушын ҳәзир мен айтқан нәрсениң не екени ҳаққында түсине алмасаңыз, өзиңизди көп қыйнамаң. Бир рет оқып, өтип кетиўге ҳәрекет етиң.
Көпшилик жағдайда JavaScript узыннан-узын коудлардан ибәрaт болады. Сол ўақытта оның ҳәммесин HTML документтиң ишинде жазыў қыйын.
Биринши бөлимде айтқанымдай JavaScript жазылған файлды бөлек етип сақлаймыз.
Өз алдына файл ".js" деген 'расширение' (кенейтпе) менен таўсылатуғын файлды жаратамыз.
Ҳәм усы жаратқан бөлек файлды HTML документ ишинде "шақырыўымыз " керек.
HTML документке мына жердеги JavaScript файлды да оқыўың керек деп айтыўымыз керек.
Буны төмендегидей әмелге асырамыз.
<!DOCTYPE html>
<html lang="en">
<body>
<script src="greetings.js"></script>
</body>қ
</html>Көрип турғаныңыздай <script> тегтен пайдаланамыз. Бирақ, бул рет <script> тегтиң ишине src деген қасийетинен (attribute) пайдаланып, сол жерге script.js деген файлдың жайласқан мәңзилин жазамыз. Ҳәзирше, олар бир папканың ишинде турғаны ушын тек атын жазамыз.
Енди және жазған коудымызды "иске қосып" көремиз.
Төмендеги блогқа кирип, HTML/CSS ҳәм JS пенен екинши проектимизди жаратып, бирге кoудинг қылып көрсеңиз болады.
JavaScript ҳаққында үйрениўди төмендеги блогта даўам етиң.
