16-блог: JavaScript қалай үйренемиз? 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те қалай кодинг (коудинг) қыламыз?

JavaScript кодын HTMLге қосыў

Биринши усылы, 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" деген жазыў пайда болады.

Ол төмендегидей көринеди.

Еслетпе: document.write() бул түсинип үйрениў ушын қолай әпиўайы мысал. Ҳәзирги заман вебсайтларында текст қосыў ушын көбинесе басқа усыллардан пайдаланады.

Көпшилик девелоперлер ең биринши программасын "Hello World" деп жазып баслаған.

Негизи, булай бирме-бир түсиниўге ҳәрекет етсек, қайта басымыз аўырыўы мүмкин.

Бағдарламаны үйрениў бул қурақ қурағанға қусайды. Басында бир-бирине байланысы жоқтай сезилген бөлеклерди үйренип, түсинбей жүргенде бирден ҳәммеси өз орнын таўып, бағдарлама деген үлкен "қурақ көрпешениң" бир бөлегине айланады.

Соның ушын ҳәзир мен айтқан нәрсениң не екени ҳаққында түсине алмасаңыз, өзиңизди көп қыйнамаң. Бир рет оқып, өтип кетиўге ҳәрекет етиң.

Көпшилик жағдайда JavaScript узыннан-узын кодлардан ибарат болады. Сол ўақытта оның ҳәммесин HTML документтиң ишинде жазыў қыйын.

Биринши бөлимде айтқанымдай JavaScript жазылған файлды бөлек етип сақлаймыз.

Өз алдына файл .js деген "расширение" (кеңейтпе) менен таўсылатуғын файлды жаратамыз.

Ҳәм усы жаратқан бөлек файлды HTML документ ишинде "шақырыўымыз" керек.

HTML документке мына жердеги JavaScript файлды да оқыўың керек деп айтыўымыз керек.

Буны төмендегидей әмелге асырамыз.

<!DOCTYPE html>
<html lang="en">
  <body>
    <script src="greetings.js"></script>
  </body>
</html>

Көрип турғаныңыздай <script> тегтен пайдаланамыз. Бирақ, бул рет <script> тегтиң ишинде src деген қәсийетинен (attribute) пайдаланып, сол жерге greetings.js деген файлдың жайласқан мәнзилин жазамыз. Ҳәзирше, олар бир папканың ишинде турғаны ушын тек атын жазамыз.

Енди және жазған кодымызды "иске қосып" көремиз.

Төмендеги блогқа кирип, HTML/CSS ҳәм JS пенен екинши проектимизди жаратып, бирге кодинг (коудинг) қылып көрсеңиз болады.

JavaScript ҳаққында үйрениўди төмендеги блогларда даўам етиң.

• 21-блог: JavaScript даўамы: If/else дегенимиз не? 4-бөлим