Google Play badge

javascript


JavaScript: Вэб хөгжүүлэх хөгжилтэй хэрэгсэл

JavaScript бол вэб хуудсыг хөгжилтэй, интерактив болгоход тусалдаг тусгай хэл юм. Үүнийг олон хүмүүс сонирхолтой вэбсайт үүсгэхэд ашигладаг. Вэб хөгжүүлэлтийн хувьд JavaScript нь вэбсайтуудыг амьдруулах шидэт хэрэгсэлтэй адил юм. Энэ нь текстийг өөрчлөх, зураг зөөх, тэр ч байтугай тантай ярих боломжтой!

1. JavaScript гэж юу вэ?

JavaScript бол компьютерийн хэл юм. Энэ нь вэб хуудсан дээрх энгийн бөгөөд хөгжилтэй зүйлсийг хэрхэн хийхийг компьютерт зааж өгдөг. Та товчлуур дээр дарах эсвэл вэбсайт дээрх хөдөлгөөнт дүрсийг харахад JavaScript хөшигний ард ажиллаж байна. Энэ нь вэб хөгжүүлэлтийн гол хэрэгслүүдийн нэг юм.

Та тоглоомон роботтой гэж төсөөлөөд үз дээ. Та роботод зааварчилгаа өгснөөр юу хийхийг нь хэлдэг. JavaScript нь компьютерт ийм заавар өгдөг.

2. Бид яагаад вэб сайт дээр JavaScript ашигладаг вэ?

Вэбсайтууд нь текст, зураг, өнгөөр ​​хийгдсэн байдаг. Гэхдээ тэд танд хариу үйлдэл үзүүлэхэд илүү хөгжилтэй байж чадна. JavaScript вэбсайтууд таныг сонсож, дараа нь юу хийхээ шийдэхэд тусалдаг. Жишээлбэл, энэ нь товчлуур дээр дарахад өнгийг нь өөрчилдөг, эсвэл холбоос дээр дарахад мессеж гарч ирдэг.

Энэ нь вэб сайтуудыг зүгээр л сайхан зураг биш, харин та харилцах боломжтой амьд газар болгодог. Таныг вэбсайт дээр тоглоом тоглох эсвэл интерактив түүхийг судлах бүрт JavaScript тэнд байдаг.

3. JavaScript дахь үндсэн санаанууд

JavaScript-д ойлгоход хялбар энгийн санаанууд байдаг. Эдгээр санааг барилгын материал гэж бодоорой. Тэдгээрийг нэгтгэснээр та вэб дээр гайхалтай зүйлсийг бүтээх боломжтой. Энд зарим үндсэн санаанууд байна:

Эдгээр санаа бүр нь танд илүү төвөгтэй, интерактив вэб хуудсыг бүтээхэд тусална.

4. Хувьсагч ба өгөгдлийн төрлүүд

Хувьсагч нь нэртэй тусгай хайрцагтай адил юм. Хайрцаг дотор янз бүрийн зүйл хийж болно. Заримдаа та дотор нь тоо, заримдаа үг оруулж болно. JavaScript дээр let эсвэл var гэх мэт үгсийг ашиглан хувьсагч үүсгэж болно.

Жишээлбэл, хэрэв та нэрээ хадгалахыг хүсвэл дараах кодыг бичиж болно.

 let myName = "Сэм";
  

Энэ код нь "myName" нэртэй хайрцаг үүсгэж, дотор нь "Сэм" гэсэн үгийг оруулна.

Та хадгалах боломжтой өөр өөр төрлийн өгөгдөл байдаг. Зарим нь:

Хувьсагч нь вэбсайт ажиллаж байх үед өөрчлөгдөж болох мэдээллийг хадгалахад тусалдаг.

5. Чиг үүрэг: Даалгавруудыг гүйцэтгэдэг жижиг машинууд

JavaScript дахь функц нь нэг ажил хийдэг жижиг машинтай адил юм. Та машинд нэр өгч, ямар ажлыг гүйцэтгэхийг хэлээрэй. Дараа нь энэ ажлыг хийх шаардлагатай үед та функцийг дууддаг.

Жишээлбэл, хэрэв та сайн уу гэж хэлэхийг хүсвэл дараах функцийг бичиж болно.

 функц sayHello() {
  alert("Сайн уу, найз минь!");
}
  

Та sayHello() функцийг дуудах үед "Сайн уу, найз минь!" гэсэн жижиг мессеж гарч ирнэ. Энэ нь товчлуур дарахад богино дуу тоглодог тоглоомтой төстэй юм.

6. Нөхцөл: Шийдвэр гаргах

Заримдаа компьютер дараа нь юу хийхээ сонгох хэрэгтэй болдог. Энд бол нөхцөлт мэдэгдлүүд орж ирдэг. Тэд ямар нэг зүйл үнэн эсэхийг шалгах замаар компьютерт шийдвэр гаргахад тусалдаг.

Энэ талаар бодоод үз: хэрэв бороо орж байвал шүхэр авахаар шийдэж магадгүй. Хэрэв бороо ороогүй бол шүхэр хэрэггүй. JavaScript дээр та ийм энгийн нөхцөлийг бичиж болно:

 хэрэв (температур > 30) {
  alert("Гадаа халуун байна!");
} өөр {
  alert("Энэ хэт халуун биш байна!");
}
  

Энэ код нь температур 30-аас их байгаа эсэхийг шалгадаг. Хэрэв байгаа бол халуун байна гэж мэдэгдэнэ. Үгүй бол хэт халуун биш гэж хэлдэг.

7. Гогцоонууд: Давтагдах үйлдлүүд

Гогцоонууд нь зааврыг олон удаа давтах боломжийг танд олгоно. Тэд эргэлдэж буй зугаа цэнгэлтэй адил юм. Нэг кодыг дахин дахин бичихийн оронд давталт нь үүнийг танд зориулж хийдэг.

Жишээлбэл, хэрэв та "Би кодлох дуртай!" таван удаа, та гогцоо ашиглаж болно:

 хувьд (i = 0; i < 5; i++) {
  console.log("Би кодлох дуртай!");
}
  

Энэ код нь компьютерээс өгүүлбэрийг таван удаа хэвлэхийг шаарддаг. Энэ нь тоглоомоо нэг нэгээр нь тоолж байгаатай адил юм.

8. Үйл явдал: Сонсох, хариу үйлдэл үзүүлэх

JavaScript-д үйл явдлууд нь компьютерт ямар нэгэн зүйл тохиолдсоныг хэлэх дохио юм. Эдгээр үйл явдлууд нь хулганы товшилт, товчлуур дарах, эсвэл цонхны хэмжээг өөрчлөх зэрэг байж болно. Компьютер эдгээр үйл явдлыг сонсож, дараа нь хариу өгдөг.

Жишээлбэл, та вэб хуудасны товчлуур дээр дарахад үйл явдал тохиолддог. JavaScript энэ товшилтыг илрүүлж, хариу үйлдэл үзүүлэх функцийг ажиллуулж чадна. Энд энгийн жишээ байна:

 let button = document.getElementById("myButton");
button.addEventListener("товшилт", функц() {
  дохио ("Та товчлуур дээр дарсан!");
});
  

Энэ код нь "myButton" ID-тай товчлуурыг олж, товшилтыг сонсдог. Товчлуур дээр дарахад "Та товчлуур дээр дарсан!"

9. Баримт бичгийн объектын загвар (DOM)

Баримт бичгийн объектын загвар буюу DOM нь вэб хуудасны бүх хэсгийг харж, харилцах арга юм. DOM-ийг мод гэж төсөөлөөд үз дээ. Мод нь олон мөчиртэй бөгөөд салбар бүр нь хуудасны догол мөр, зураг, товчлуур гэх мэт элементийг төлөөлдөг.

JavaScript нь эдгээр салбаруудыг өөрчлөх боломжтой. Энэ нь шинэ зүйл нэмэх, хуучин зүйлсийг устгах эсвэл өөрчлөх боломжтой. Жишээлбэл, та товчлуур дээр дарахад догол мөр доторх текстийг өөрчлөх боломжтой.

Энэ нь интерактив вэбсайт үүсгэхэд тусалдаг тул чухал юм. DOM-г ашигласнаар таны вэб хуудсыг дахин ачаалах шаардлагагүйгээр динамикаар өөрчлөх боломжтой.

10. Вэб хуудас дээрх энгийн JavaScript жишээ

Ажиллаж байгаа JavaScript-ийн энгийн жишээг харцгаая. Танд товчлуур бүхий вэб хуудас байна гэж төсөөлөөд үз дээ. Товчлуур дээр дарахад та үүнийг сайн уу гэж хэлэхийг хүсч байна. Та дараах байдлаар код бичиж болно.

 <!DOCTYPE html>
<html>
<толгой>
  <title>Энгийн JavaScript жишээ</title>
</head>
<бие>
  <button id="greetButton">Намайг дар!</button>
  <скрипт>
    greetUser() функц {
      alert("Сайн уу, найз минь!");
    }
    let button = document.getElementById("greetButton");
    button.addEventListener("товших", greetUser);
  </script>
</body>
</html>
  

Энэ код нь вэб хуудсан дээр товчлуур үүсгэдэг. Товчлуур дээр дарахад greetUser() функц ажиллаж, "Сайн уу, найз минь!" гэсэн мессеж бүхий цонх гарч ирнэ.

11. Энгийн тооцоололд JavaScript ашиглах

JavaScript нь энгийн математикийг ч хийж чадна. Энэ нь тоог нэмэх, хасах, үржүүлэх, хуваах боломжтой. Энэ функц нь жижиг програмууд эсвэл бүр тоглоом хийхэд маш их хэрэгтэй байдаг.

Жишээлбэл, хэрэв та хоёр тоо нэмэхийг хүсвэл дараахь зүйлийг бичиж болно.

 тоо1 = 5 байг;
тоо 2 = 3 байг;
нийлбэр = тоо1 + тоо2;
alert("Нийтлэл нь " + нийлбэр);
  

Энэ код нь 5 ба 3 гэсэн хоёр тоог авч, тэдгээрийг нэгтгэж, "нийлбэр нь 8" гэсэн мессежийг харуулна.

12. Өдөр тутмын вэб хөгжүүлэлт дэх JavaScript

Товчлуур, хөдөлгөөнт дүрс эсвэл тоглоом бүхий вэбсайт руу зочлох бүрт JavaScript ажиллах магадлалтай. Энэ нь вэбсайтуудыг динамик, тааламжтай болгодог. Жишээлбэл, та онлайнаар худалдан авалт хийх эсвэл видео үзэх үед JavaScript хөшигний ард чухал үүрэг гүйцэтгэдэг.

Энэ нь хуудасны зарим хэсгийг хурдан ачаалах, алдааг шалгах, хуудсыг дахин ачаалахгүйгээр шинэ мэдээллийг харуулахад тусалдаг. YouTube, Facebook болон бусад олон вэбсайтууд JavaScript-г ашиглан танд хялбар туршлагыг бий болгодог.

13. JavaScript сурах нь LEGO ашиглан бүтээхтэй адил юм

JavaScript сурах нь өнгөлөг LEGO блокоор тоглохтой адил юм. Блок бүр нь жижиг кодын хэсэг юм. Олон блокуудыг нийлүүлбэл гайхалтай зүйлийг бүтээж чадна. Эхлээд та энгийн байшин барихын тулд хэдхэн блок ашиглаж болно. Дараа нь та илүү олон блок ашиглаж, том цайз эсвэл бүр сансрын хөлөг барьж сурна!

JavaScript-ийг ойлгох хамгийн сайн арга бол жижиг хэсгүүдийг бүтээж, дараа нь бүтэн вэб хуудас үүсгэх явдал юм. Таны сурсан шинэ санаа бүр бол таны вэбсайтын төслүүдэд зориулсан өөр нэг LEGO блок юм.

14. JavaScript-н чухал хэрэгслүүд ба номын сангууд

Олон туслахууд JavaScript-г илүү хүчирхэг болгодог. Эдгээр туслахуудыг номын сан, фреймворк гэж нэрлэдэг. Эдгээр нь тусгай хэлбэртэй байдаг LEGO блокуудын нэмэлт багцтай адил юм. Зарим алдартай JavaScript туслахууд нь:

Эдгээр хэрэгслүүд нь олон хөгжүүлэгчдэд бүх кодыг өөрөө бичихийн оронд гайхалтай вэбсайт бүтээхэд тусалдаг. Тэд хөгжилтэй хэл ч гэсэн бодит ертөнцөд хүчирхэг хэрэгсэл болж чадна гэдгийг харуулж байна.

15. JavaScript болон вэб хөтөч

Вэб хөтөч нь вэб сайтад зочлоход ашигладаг програм юм. Алдартай хөтөч нь Chrome, Firefox, Safari, Edge юм. JavaScript нь эдгээр хөтөч дотор ажилладаг. Таныг вэб хуудсандаа JavaScript код бичих үед хөтөч үүнийг уншиж, таны хуудсыг интерактив болгодог.

Хөтөчийг тайз, JavaScript-ийг жүжигчин гэж төсөөлөөд үз дээ. Жүжигчин скриптийг (таны код) дагаж, үзүүлбэр үзүүлдэг. JavaScript-гүй бол тайз хоосон байх бөгөөд шоу тийм ч сонирхолтой биш байх байсан.

16. Алхам алхмаар: Хөтөч JavaScript-г хэрхэн ашигладаг

Таныг вэб хуудсыг нээх үед хөтөч дараахь зүйлийг хийдэг.

Энэ процесс нь вэб хуудасны харагдах байдал, мэдрэмжийг JavaScript хэрхэн гүйцээж байгааг харуулдаг.

17. JavaScript-ийн бодит хэрэглээ

JavaScript нь бидний өдөр тутмын амьдралд олон хөгжилтэй, хэрэгцээтэй байдлаар ашиглагддаг. Энд зарим жишээ байна:

Эдгээр жишээг харахад JavaScript нь зөвхөн дэлгэц дээрх код биш гэдгийг харуулж байна. Энэ бол бидний өдөр тутмын үйл ажиллагаатай технологийг холбосон гүүр юм.

18. Энгийн төслүүдээр JavaScript-г судлах

Та залуу ч гэсэн энгийн төслүүдийг бодож JavaScript-г сурч эхлэх боломжтой. Та товчлуур дээр дарахад дэвсгэр өнгө нь өөрчлөгддөг вэб хуудаснаас эхэлж болно. Эсвэл та өөр өөр хэсгүүд дээр дарахад өөрчлөгддөг жижиг түүх үүсгэж болно.

Жижиг гэлтгүй төсөл бүр вэбсайт хэрхэн ажилладаг талаар илүү ихийг заадаг. Бүтэн үг бичихийн өмнө цагаан толгой сурахтай адил алхам бүр таны өөртөө итгэх итгэлийг бий болгодог.

19. JavaScript ба бүтээлч байдал

JavaScript бол бүтээлч байх боломжийг олгодог хэрэгсэл юм. Энэ нь зөвхөн суралцах эсвэл ноцтой вэбсайт хийхэд ашиглагддаггүй; энэ нь бас бүтээлч байдлаа илэрхийлэх арга юм. Та JavaScript ашиглан тоглоом, интерактив түүх, тэр ч байтугай хөдөлгөөнт дүрсийг зохиож болно.

Та JavaScript-тэй ажиллахдаа өөрийгөө кодоор зурдаг зураач гэж төсөөлж болно. Функц бүр болон хувьсагч бүр нь вэб дээр үзэсгэлэнтэй зургийг бүтээхэд тусална.

JavaScript дахь бүтээлч байдал нь том цагаан цаасан дээр тод өнгийн харандаагаар зурахтай адил гэдгийг санаарай. Ямар ч хязгаарлалт байхгүй, таны төсөөлөл бол таны хөтөч юм.

20. Дүгнэлт ба гол санаанууд

JavaScript бол вэб хөгжүүлэлтэд хэрэглэгддэг компьютерийн хэл юм. Энэ нь вэбсайтуудыг интерактив, амьд болгоход тусалдаг. JavaScript-ийн тусламжтайгаар та текстийг өөрчлөх, товшилтоор хариу үйлдэл үзүүлэх, энгийн тооцоолол хийх зэрэг хөгжилтэй үйлдлүүдийг вэб хуудсанд нэмж болно.

JavaScript-ийн үндсэн блокууд нь:

JavaScript нь товшилт, товчлуур дарах зэрэг үйл явдлуудыг сонсдог. Энэ нь Баримт бичгийн объектын загвар (DOM)-тай хамтран ажиллаж, вэб хуудсан дээр харж буй зүйлээ дахин ачаалах шаардлагагүйгээр өөрчлөх боломжтой. Энэ нь вэбсайтуудыг динамик, хөгжилтэй болгодог.

Олон алдартай вэбсайтууд болон онлайн тоглоомууд JavaScript ашигладаг. Энэ нь хаа сайгүй байдаг! Мэндчилгээний товчлууртай энгийн вэбсайтуудаас эхлээд нарийн төвөгтэй онлайн програмууд хүртэл JavaScript нь бүхний гол цөм юм.

JavaScript сурах нь LEGO блокоор бүтээхтэй адил юм. Бага багаас эхэлж, нэг нэгээр нь сур, тэгвэл удахгүй та гайхалтай төслүүдийг бүтээх боломжтой болно. Шинэ санаа бүр таны бүтээлч хэрэгслийн хайрцагт байдаг өөр нэг хэрэгсэл юм.

Энэ хичээлээр бид вэб сайтуудыг амьд болгохын тулд JavaScript HTML болон CSS-тэй хэрхэн ажилладагийг харлаа. Бид хувьсагч, функц, нөхцөл, гогцоо, үйл явдал, DOM-ийн талаар олж мэдсэн. Эдгээр хэсгүүд хоорондоо хэрхэн нийцэж байгааг ойлгохын тулд бид энгийн жишээнүүдийг харлаа.

Санаж байх гол санаанууд:

JavaScript-ийн талаар үргэлжлүүлэн судалж, суралцаарай. Таны бичсэн шинэ код бүрээр та вэб хөгжүүлэлтийн бүтээлч боломжуудын ертөнцийг нээж өгдөг. Аяллаа сайхан өнгөрүүлээрэй, вэбсайтуудаа амилуулахад хөгжилтэй байгаарай!

Download Primer to continue