JavaScript – ын тухай

JavaScript –ийн зориулалт

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

Одоо интернетэд цэвэр статик хуудас бараг байхгүй болсон гэхэд хилсдэхгүй. Веб хуудасны статик байдал нь муу цаасан дээр жижиг шрифтээр хэвлэсэн сонин шиг л хэрэглэгчдэд хайхрамжгүй хандаж байгаагийн илрэл. Веб бүтээгдхүүнийг хэрэглэгч ашиглахад амархан, эвтэйхэн байлгахын тулд түүнийг үүсгэхдээ сүүлийн үеийн веб технологийг ашиглах хэрэгтэй. Веб технологиуд нь хэрэглэгч болон сервер талд ажиллах боломжоороо янз бүрийн хязгаарлалттай байдаг. JavaScript нь дээрх хоёр салангид технологийг нийлүүлэн маш үр дүнтэй харилцан холбоо бүхий ажиллагааг хангаж өгдөг онцгой чанартай.
Хэлийг үзэхийн өмнө энэ хэл юунд зориулагдан үүссэн, хэлийг хамгийн үр ашигтайгаар ямар зорилгод ашиглах боломжтойн талаар мэдэх хэрэгтэй.  
JavaScript нь HTML хуудсыг бүрдүүлэхэд ашигладаг програм бичдэг хэл юм. JavaScript нь статик веб хуудсанд функционал элементүүдийг нэмэхээс гадна клиент серверийн хооронд өгөгдлийг солилцох шинэ боломжуудыг нээж өгдөг.
Netscape ба Sun компаниуд JavaScript-ийг Netscape броузерт клиент талд ашиглах зорилгоор анх төлөвлөсөн боловч одоо хэлний боломж анхны төлөвлөсөн стандартын хязгаарыг аль хэдийн давсан болно. Одоогоор ихэнх өргөн дэлгэрсэн бүх броузерууд JavaScript-ийг дэмждэг.
JavaScript-ийг ашигласнаар статик HTML хуудсууд өндөр чанартай хөдөлгөөнт бүрдүүлэлт, өгөгдлийн оролт гаралтын интерактив диалог, өгөгдлийг серверт дамжуулахаас өмнө урьдчилан шалгах боломжуудаар хангагдана. JavaScript нь цорын ганц веб технологи биш. Гэхдээ түүний бусад CGI (Common Gateway Interface), Java апелит, ActiveX удирдлагын элементүүд гэх мэт веб технологуудтай зөрчилддөггүй нь түүнд илүү их хүчийг олгодог. Харин ч JavaScript програмаар эдгээр технологуудыг илүү үр ашигтай хэрэглэж болдог. JavaScript-ыг программ зохиогчид түүний клиент талын боломжоор илүү мэддэг хэдий ч хэл сервер талд CGI, Java, API програмуудтай эн тэнцүү ажиллах чадвартай.

Хэл зохиогдсон түүхээс

HTML хуудсыг интерактив горимд ажиллуулах шаардлгын үүднээс Netscape компани хуудсны дотор байрлан хөрвөгдөх хэлийг зохиох ажлыг эхлүүлсэн. Шинэ хэлэнд тавигдаж байсан үндсэн шаардлага нь HTML хэлний боломжийг өргөжүүлж ажлын дэлгэцэнд мэдээллийн оролт гаралтыг интерактив горимд хийдэг олон тооны CGI програмуудтай ижил үйлдлийг хийх явдал байлаа. Энэ хэлний анхны хувилбар нь LiveScript гэсэн нэртэй гарчээ. Sun компаниас Java хэлийг гаргасны дараа Netscape компани Sun - тай хамтрахаар шийдсэн бөгөөд Java хэлний бичлэг болон логикийг үндэслэн LiveScript -д хийгдсэн шийдлүүдийг ашиглан Netscape броузерт ашиглагдах програмын хэлийг боловсруулахаар болсон. Эдгээр компаниудын хамтын ажиллагааны дүнд JavaScript-ийг бүтээсэн. JavaScript нь компиляц (машины кодод хөрвүүлэгддэггүй) хийгддэггүй зөвхөн броузероор хөрвүүлэлт хийгддэг бөгөөд JavaScript-ийн яг ижил кодыг броузерууд янз бүрээр хөрвүүлдэг. 1995 оны 12-р сард JavaScript-ийн анхны хувилбар гарсан. Хэлний гол онцлог нь өгөгдөлтэй ажиллах ажиллагаанд клиент талд илүү бололцоог олгосон явдал байлаа.

Хэлний боломжууд. JavaScript ба Java

JavaScript нь нэг талаас HTML хэлний хөгжлийн үргэлжлэл мэт боловч нөгөө талаас JavaScript-ийг хангалттай хүнд бодлогыг шийдэх чадалтай бүрэн хэмжээний програмчлалын хэл гэж үзэж болно. Хэл нь өөрийн бичлэгийн дүрэм ба логиктойгоос гадна хангалттай өргөн боломжтой. Гэхдээ өөрийн компилятор гэж байхгүй бөгөөд HTML хуудасны код дотор бичигдэн броузероор хөрвүүлэгдэнэ. Броузер HTML кодыг бүрэн ачаалсны дараа JavaScript-ийн код броузероос шууд хамаарна. Хэрвээ броузер JavaScript-ийг дэмждэггүй бол код шууд дэлгэцэнд текст байдлаар гарч ирдэг. Гэхдээ интернетийн ихэнх хэрэглэгчид JavaScript-ийг дэмждэг броузеруудыг ашигладаг.
JavaScript-ийн кодыг бичихдээ энгийн текст едитороор (Notepad г.м) эсвэл JavaScript-ийн кодыг бичих тусгай зориулалтын (ScriptBuilder, HomeSite г.м) програмуудыг ашиглаж болно. Хэл бүх веб програмуудын ажиллагааг үр дүнтэй нэгтгэж чаддагаараа бусад хэлнүүдээс давуу бөгөөд үйл явцыг (event) боловсруулагч нь түүнд онцгой чанарыг бий болгосон. Үүний үр дүнд веб хуудастай харьцаж байгаа хэрэглэгчийн ажиллагааг улам илүү динамик уян хатан болгох боломжийг нээж өгдөг.
JavaScript ба Java эдгээр нь хоёр өөр төрлийн програмчлалын хэлүүд.
Java бол компилятор болон туслах файлуудын тусламжтайгаар ажилладаг обьект хандалттай програмчлалын хэл. Java-гаар зохиогдсон программууд нь бүрэн хэмжээний систем эсвэл вебийн апелит байдлаар ажилладаг. Хэдийгээр апелит HTML кодод орох боловч клиентийн машинд тусдаа файл байдлаар хадгалагдаж байдаг. Харин JavaScript –ийн программ тусдаа файл байдлаар байдаггүй HTML код дотор байрлана. JavaScript –ийн програм броузераас ажиллуусан мэт харагдана. JavaScript ба Java хэлүүдийг ялгааг хүснэгтээр үзүүлбэл

JavaScript ба Java хэлүүдийг ялгаанууд

JavaScript Java
Машины код руу хөрвүүлэлт хийгдэхгүй Ажлуулахын өмнө машины код руу хөрвүүлнэ
Обьектын хэл Обьект хандалттай хэл
HTML кодод скрипт байдлаар орно HTML кодоос тусдаа жижиг програм
Хувьсагч өгөгдлийн төрлүүдийг тодорхойлдоггүй Хувьсагч өгөгдлийн төрлүүдийг заавал тодорхойлно
Динамик холболттой. Ажиллах явцдаа обьектын холбоосыг шалгадаг Статик холболттой. Компиляц хийх үед обьектын холбоосыг шалгадаг

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

  Нээгдсэн тоо: 355 Төлбөртэй

react 16 хувилбараас бий болсон програмийн компонентуудийн шатлалыг багахан хураангуйлах боломжийн талаар авч үзье. Тухайлбал компонент хооронд ашиглаж боломжтой глобал төлвүүдийг үүсгэдэг context гэсэн ухагдхуун юм. Үүнийг дараах энгийн жишээгээр харцгаая. Төсөлд

import React from "react";

const Counter2 = (props) => {
  return (
    <div
      style={{
        border: "1px solid #ccc",
        width: 250,
        margin: "0 auto",
      }}
    >
      <h3>Counter 2</h3>
      <p>Clicked</p>
    </div>
  );
};

export default Counter2;

код бүхий Counter2 шинэ компонентийг нэмье.

  Нээгдсэн тоо: 979 Төлбөртэй

Програмчлалын хэлүүдийг хамгийн сайн, хүчирхэг гэх мэтээр рейтенг гарган сургалтад ашиглах гээд байх шиг харагддаг. Эрэлт өндөртэй хэлүүдийг сургалтын суурь болгон ашиглах ёстой. Гэхдээ юунаас эхлэх, ямар програмаар яван хир бэлтгэгдсэн мэрэгжилтэн гаргах төлөвлөгөөтэй байхгүй бусдын жишгээр эсхүл моод хөөцөлдвөл ямарч чадваргүй мэргэжилтэнээр л дүүрэх байх. Гол анхаарах зүйл бол ямар хэлийг эзэмшсэн мэрэгжилтэн өндөр эрэлттэй, цалин хөлс сайтай, ирээдүйтэй вэ гэдгийг л сайн ажиглаж байх хэрэгтэй. Сүүлийн жилүүдэд програм зохиох технологид олон зүйлүүд шинээр орон ирснээр frontend програм зохиогчидын эрэлт тасралтгүй нэмэгдсээр байгаа. Энэ бол та javascript хэлийг судлах ёстойг зааж буй чиг. Иймээс сайтын javascript хэлний хичээлүүдийг үзэхийг санал болгоё.

Хуудас дээрх формоос хэрэглэгч жагсаалтаас сонголт хийн ажиллах тохиолдол олон. Иймээс энэ хичээлээр формын бас нэгэн чухал элемент болох сонголтын select тегийг

<template>
  <div>
    <h2>Form inputs</h2>
    <select>
      <option v-for="s in socialsList"> {{ s }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data () {
    return {
      socialsList: ['instagram', 'twitter', 'facebook']
    }
  }
}
</script>

жишээгээр авч үзье.

  Нээгдсэн тоо: 590 Бүртгүүлэх

React компонентоос хэд хэдэн элементүүдийг буцаах нь ердийн үзэгдэл ч тэдгээрийг заавал нэг суурь элементэд багцалсан байх дүрэмтэй. Энэ дүрэм нь зарим тохиолдолд DOM -д илүү зангилаа /элемент/ үүсгэдэг асуудлыг React 16 хувилбараас фрагментээр солин шийдвэрлэсэн. Фрагмент гэдгийг ойлгохын тулд төслийн кодод багахан өөрчлөлтийг хийе. ErrorBoundary классийн ажиллагааг шалгах зорилгоор Car компонентод нэмэн өгсөн

     if (this.props.name === 'Toyata Prius') {
       throw new Error('Алдаа гарлаа !!!')
     }

кодийг хасвал програм TOGGLE CAR товч дээр дарахад алдаа хаялгүй хэвийн ажиллана.

  Нээгдсэн тоо: 1044 Төлбөртэй

Формын өгөгдөлд шалгалт буюу validation хийх ажиллагаа ямарч програмын хувьд чухал хэсэг байдаг тул материалыг анхааралтай судлан ойлгон автлаа үзээрэй. Формын шалгалтуудад ашиглах төслийг Формын шалгалтын бэлтгэл хичээлд үүсгэн Vuelidate пакетийг суулган цахим шуудангийн хаягийг авах талбарыг нэмсэн. Одоо формын шалгалтад Vuelidate пакетийг хэрхэн ашиглахыг сурцгааж эхлэе.

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

Нээгдсэн тоо : 109

 

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

Нээгдсэн тоо : 171

 

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

Нээгдсэн тоо : 140

 

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 261

 

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 294

 

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

Нээгдсэн тоо : 304

 

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 360

 

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 351

 

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 431

 
Энэ долоо хоногт

тэгшитгэлийг бод.

Нээгдсэн тоо : 568

 

тэнцэтгэл бишийг бод.

Нээгдсэн тоо : 1020

 

Хоёр тамирчин тойрог замаар нэгэн зэрэг гарч 3,2 км замыг туулан барианд оржээ. Тойргийг нэг тамирчин нөгөөгөөсөө 10 секундээр хурдан тойрдог. Ялагч барианд орж байхад нөгөө нь бүтэн тойрог гүйх үлдсэн байлаа. Ялагч замыг 9 мин 20 секундэд туулсан бол тойрог замын уртыг ол. Тамирчдын хурдыг тогтмол гэж үзнэ.

Нээгдсэн тоо : 520