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

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

Холбоотой материалууд
Тусгаарласан хэвүүд /стилүүд/

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

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

Vue -гийн компонентод хэвүүдийг /css style/ яаж ашиглах талаар үзье. Тухайлбал компонентийн style хэсгийг хэрхэн ашиглах тухай юм. Үүний тулд төслийн компонентуудийн кодыг доорх байдлаар хураангуйлая.
App.vue файл.

<template>
  <div>
    <app-counter></app-counter>
    <app-car></app-car>  
  </div>
</template>

<script>
import Car from './components/Car.vue'
import Counter from './components/Counter.vue'

export default {
  components: {
    appCar: Car,
    appCounter: Counter
  }
}
</script>

Жич: Сүүлийн жилүүдэд javascript фреймворкууд эрчимтэй хөгжин програмчлалын хэлүүдийн рейтенгд нилээд дээгүүр байранд орж ирэх болсон. Иймээс дэлхийн чиг хандлагаас хоцрохгүйн тулд хэлийг судлан суралцахад манай сайт таныг дэмжин ажиллана. Хичээлүүдийг бүгдийг Vue фреймворкийн үндсэн ойлголтууд багцаас үзээрэй.

Миксинийг ашиглах

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

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

Энэ удаад Миксин /Mixin/ гэж юу болох, ямар хэрэгтэй, түүнийг хэрхэн ашиглахыг авч үзнэ. Үүний тулд Жагсаалтыг шүүх хичээлийн жишээнд өөрчлөлтийг хийн өргөжүүлье. Төслийн components хавтаст List.vue нэрээр

<template>
  <h1>List</h1>
</template>

<script>
export default {
  
}
</script>

кодтой компонентийг үүсгээд програмын эхлэлийн цэг main.js файлд компонентийг app-list нэрээр глобал байдлаар

import Vue from 'vue'
import App from './App.vue'
import List from './components/List.vue'

Vue.filter('uppercase', value => value.toUpperCase())

Vue.component('app-list', List)

new Vue({
  el: '#app',
  render: h => h(App),
})

бүртгүүлье.

Хувьсагчид

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

ES6 хувилбарт бий болсон шинэ боломжуудыг судлах бэлтгэлийг Орчны тохиргоо хичээлээр үзсэн. Энэ хичээлээс ES6 хувилбарын шинэ боломжуудын талаар авч үзэж эхлэх ба хамгийн энгийн нь болох хувьсагчдад бий болсон шинэчлэлээс эхлэе.

const түлхүүр үг.

Javascript -ийн өмнөх хувилбаруудад хувьсагчийг var түлхүүр үгээр

var q = 1;
q = 2;
q = 'w';

үүсгээд цааш утгыг q = 2;, төрлийг q = 'w'; өөрчлөхөд ямар нэгэн асуудал үүсдэггүй. Гэвч Javascript -д утгыг нь солих боломжгүй тогтмол утга байдаггүй байсныг const түлхүүр үгээр зарлах боломжийг EcmaScript 6 -д бидэнд олгосон. Хэрвээ const түлхүүр үгээр

const MY_CONST = 1;
MY_CONST = 2;

MY_CONST тогтмолыг зарлаад дараа нь түүний утгыг өөрчлөх гэвэл webstorm тогтмолд утга олгох оролдлого хийлээ гэсэн алдааг заана. index.js файлын компиляцийг хийх гээд үзье.

template шинж

  Нээгдсэн тоо: 885 Нийтийн

VueJs програмыг арай өөрөөр инициализаци хийх аргыг авч үзье.

    <body>
        <div id="app">
            <h2 >{{ title }}</h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    title: 'Vue програм'
                }
            })
        </script>        
    </body>

кодод бид Vue -ийн хувийг app элементэд инициализац хийгээд app айдитай div -д title талбарт үзүүлж байгаа.

Үйл явдал…

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

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

 
Холбоосын параметрүүд

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

 
Хадгалагч (Memento)

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

 
Кодийн сайжруулалт

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

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

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

функцийн тодорхойлогдох мужийг ол.

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

 
Бодлого 16.072

g(x)=2x-3x2 нь f(x)=x2-x3 -ийн уламжлал бол -ийг ол.

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

 
Бодлого 14.080

хязгаарыг ол.

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

 
© 2014 Зохиогчийн эрхээр хамгаалагдсан. Холбогдох - 96655195