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 кодоос тусдаа жижиг програм
Хувьсагч өгөгдлийн төрлүүдийг тодорхойлдоггүй Хувьсагч өгөгдлийн төрлүүдийг заавал тодорхойлно
Динамик холболттой. Ажиллах явцдаа обьектын холбоосыг шалгадаг Статик холболттой. Компиляц хийх үед обьектын холбоосыг шалгадаг

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

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

Сайтын чиглүүлэгчид байхгүй эсхүл хуудас олдоогүй гэх мэтийн тохиолдолд хэрэглэгчдийг тохирох хуудаст шилжүүлэх хэрэгтэй болдог. Үүнийг redirect буюу шилжүүлэлт гэдэг. Vuejs -ийн шилжүүлэлтийн механизм хэрхэн ажилладагийг энэ хичээлээр авч үзье. Үүний тулд програмийн чиглүүлэгчдийн тодорхойлолтод

...
export default new VueRouter({
  routes: [
    {
      path: '',  
      component: Home
    },
    ...
    {
      path: '/none',
      redirect: '/cars'
    }
  ],
  ...
})

none гэсэн чиглүүлэгчийг үүсгээд түүнд хандвал cars хуудаст шилжүүлнэ гэдгийг redirect: '/cars' гэж заан өгье.

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

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

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

Навигацийг /чиглүүлэгч/ үүсгэх хичээлээр үүсгэсэн цэснүүдээс шилжилт хийхэд сүүлд сонгогдсон цэс аль нь болохыг мэдэхэд хүндрэлтэй байгаа. Иймээс хуудасны идэвхитэй холбоосыг тэмдэглэх классыг хэрхэн оруулан ирэхийг авч үзье. Bootstrap -д сонгогодсон цэсийг тэмдэглэх active гэсэн класс байдгийг цэснүүдийн аль нэгэнд

        <ul class="navbar-nav">
          <li class="nav-item">
            <router-link class="nav-link" to="/">Home</router-link>
          </li>
          <li class="nav-item active">
            <router-link class="nav-link" :to="'/cars'">Cars</router-link>
          </li>
        </ul>

тавин өгөөд хуудсаа хөтөч дээр нээвэл

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

Хэрэглэгчтэй харьцах үндсэн элемент бол форм. Хөтөч дээр ажиллах програм зохиоход хэрэглэгч талын дэлгэцийг уян хатан, динамик ажиллагаатай болгоход javascript -гүйгээр төсөөлөхөд бэрх. Энэ хичээлээс html5 -ын хэрэглэгчтэй харилцах формын элементүүдтэй VueJs -ээр хэрхэн харьцахыг суралцаж эхлэнэ. Формд хамгийн ихээр хэрэглэдэг input элементийн ажиллагааг

<template>
  <div>
      <h2>Form inputs</h2>
      <input type="text">
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: ''
    }
  }
}
</script>

жишээгээр авч үзье. Vue фреймворкийн үндсэн ойлголтууд багцын хичээлүүдийг эхнээс үзсэн бол дээрх кодыг төвөггүй ойлгоно. Аливаа зүйлийг энгийнээс эхлэн зөв ойлговол сурахад дөхөм байдаг тул багц хичээлүүдийг үзэхийг зөвлөе. Зарим хичээл төлбөртэй тул та тусгай эхртэй хэрэглэгч байх ёстойг анхаарна уу.

Жич: Үнэ төлөөд үзэх эсэх нь таны сонголт. Гэхдээ дараа болъё, үнэгүй хичээл олдоно гэх мэтээр хойшлуулах нь эргээд алдагдсан боломж болдог. Цаг хугацаа таныг хүлээхгүй. Хичээлүүдийг бэлтгэх явцад Vue фреймворкийн шинэ хувилбарууд гарч ирсэн хэдий ч ерөнхий зүйл хэвээрээ. Шинэ хувилбарт орсон өөрчлөлтийг хичээлийн материалд туршин шалгаад явах нь бүр ч илүү үр дүнтэйг сануулъя.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

илэрхийллийг хялбарчил.

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

 

тэгшитгэлийн завсар дахь шийдийг ол.

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

 

-ийн x4 -ийн коэффициентийг ол.

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