Тайлбар болон түлхүүр үгс

Сайн тайлбартай программын код бичих бол программ зохиох соёлоос гадна кодыг ойлгомжтой болгох үндсэн арга. Иймд та программчлалын хэлийг үзэж эхлэх үеэсээ тайлбарыг ашиглаж сурахыг хичээгээрэй. Эхлэн суралцаж байхад том хэмжээний код бараг бичдэггүй болохоор тайлбарыг нэг их анзаардаггүйгээс болоод кодод тайлбар хийхгүй бичээд сурах гээд байх муу талтай. Энэ бол маш буруу барил гэдгийг танд сануулъя. Та том хэмжээний ажил гүйцэтгэх үедээ голдуу багаар ажиллах тул таны кодыг бусад хамтран ажиллагсад ойлгох шаардлага гарч болохыг санах хэрэгтэй. Том хэмжээний кодод тайлбар хийхгүй бол хэсэг хугацааны дараа та өөрөө ч ойлгохгүй байдал үүсч болохыг сануулъя. За ингээд хичээлээ эхлэе.

Скрипт доторх тайлбар

Ямарч программыг бичихдээ түүний кодод сайн тайлбар оруулж өгч сурах нь программчлалын зөв хэв жаяг гэдгийг хэлсэн. JavaScript тайлбарт давхар налуу зураас (//), налуу зураас од (/*) гэсэн хоёр төрлийн тэмдэглэгээг ашиглана. Давхар налуу зураас (үүнийг Java маягын тайлбар ч гэдэг) нь броузерт /хөтөч/ энэ тэмдэгтээс хойш байрлах бүх тэмдэгтийг тухайн мөрийг дуустал хасна гэдгийг заана. Энэ бүтэц нь нь ямар нэгэн мөрийн ард тайлбар оруулах боломжийг бүрдүүлнэ. Жишээ нь

document.write("Оруулах js файл байхгүй байна"); // файл байхгүй бол мэдээлэл өгнө.

Налуу зураас од тэмдэглэгээ нь хөтөчид энэ тэмдэгтээс хойш тайлбарын дуусгаварыг заах од налуу зураас (*/) тэмдэгт хооронд байрлах бүгдийг хэрэгсгэхгүй гэснийг заана. (/*) хос тэмдэгтээр эхэлсэн тайлбар бүр нь (*/) хос тэмдэгтээр хаагдаж байх ёстой. Энэ бүтэц нь олон мөрөөс бүрдсэн тайлбар болон программын кодын блок үүсгэхэд хэрэгтэй. Жишээ нь

<script type="text/javascript">
Програмын код
/*
Тайлбар болгосон кодын блок
*/
Програмын үргэлжлэл
</script>

JavaScript дэмждэггүй броузерууд

JavaScript-ийг дамждэггүй броузерт JavaScript кодыг хэрэгсэхгүй болгохын тулд <script> тегт HTML-ын тайлбарыг хэрхэн ашиглахыг доорх жишээгээр үзүүлж байна.

<script>
<!--Эндээс хуучин броузеруудаас нуух JavaScript операторууд
байрлана.
Энд тайлбарын төгсгөл //-->
</script>

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

<script>
Энд JavaScript операторууд байна
 <noscript>
<H1>Уучлаарай таны броузер JavaScript хэлийг дэмжихгүй байна !</H1>
</noscript>
</script>

Хуучин броузерууд <SCRIPT> , <NOSCRIPT> тегүүдийг хэргэсэхгүй тул <NOSCRIPT> хос тегийн хоорондох хэсгийг үзүүлнэ. Харин JavaScript хэлийг дэмжих хөтөчүүд операторуудыг биелүүлээд харин <NOSCRIPT>  хос тегийн хоорондох хэсгийг хасдаг. Одоо ихэнх хэрэглэгчид JavaScript хэлийг дэмждэг хөтөч хэрэглэдэг болсон тул асуудал бараг үүсэхгүй.

JavaScript-ийн түлхүүр үгсүүд

Түлхүүр үг – энэ тусгай зориулалтаар ашиглахаар хадгалсан нэрүүд юм. Түлхүүр үгнүүдийг хувьсагч болон функцын нэрэнд ашиглаж болдоггүй. JavaScript-д дараах түлхүүр үгнүүдийг ашигладаг. Эдгээрийн зарим хэсэг нь Java-гийн үгнүүд боловч JavaScript тохирох боломжийг дээшлүүлэх үүднээс эдгээрийг түлхүүр үг болгон хадгалдаг.

JavaScript –ын түлхүүр үгнүүд

abstract boolean break byte case
catch char class const continue
debugger default delete do double
else enum export extends false
final finally float for function
goto if implements import in
instanceof int interface long native
new null package private protected
public return short static super
switch synchronized this throw transient
true try typeof var void
volatile while with

Үүнээс гадна дараах үгнүүдийг хувьсагч болон функцын нэрэнд ашиглахыг зөвшөөрдөггүй.


JavaScript –ын хувьсагч функцын нэрэнд ашиглаж болохгүй үгнүүүд

alert anchor area array assign
blur button Checkbox clearTimeout clientInformation
close closed confirm crypto date
defaultStatus Document element escape eval
event fileUpload focus form frame
frames frameRate Function GetClass hidden
history image isNaN java JavaArray
JavaClass JavaObject JavaPackage innerHeight innerWidth
lenght link location Math MimeType
name navigate navigator netscape number
object offscreenbuffering onblur onerror onfocus
onload onupload open opener option
outerHeight outerWidth package pageXoffset pageYoffset
parent parseFloat parseInt password pkcsll
plugin prompt prototype radio ref
reset screenX screenY scroll secure
select self setTimeout status string
submit sun taint text textarea
top toString unescape untaint Valueof
Window

Санамж:

  • Программын кодыг аль болохоор өөрөө бичихийг хичээгээрэй. Ингэснээр та бичлэгийн дүрмийг сайн сурах боломжтой.
  • Цаашдаа шаардлагагүй тохиолдолд html кодыг бичихгүйгээр зөвхөн javascript кодыг үзүүлнэ. Харин жишээгээ туршихдаа кодоо хуудас дотроо бичээрэй. Жишээнүүдийг туршихын тулд эхлээд доорх бүтэц бүхий index.html гэсэн файл бэлдээд авах хэрэгтэй.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Жишээнүүд</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
        Энд кодоо бичнэ
    </script>
</head>
<body>
    ...
</body>
</html>

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

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

RxJs санг ашиглан стримээс тараах өгөгдлүүдээс сонголтыг маш эвтэйхэн зохион байгуулах аргын талаар энэ хичээлээр үзнэ. Үүний тулд of аргаар энгийн Observable /ажиглагч/ -ийг

Rx.Observable.of(1, 5, 'Hello', 'World')
    .first()
    .subscribe(createSubscribe('first'));

index.js файлд үүсгэн өгье. Код RxJs сангийн Observable классын of аргаар Observable /ажиглагч/ -ийг үүсгээд түүнд subscribe аргаар бүртгүүлсэн. Аргад өөрсдийн зохиосон туслах createSubscribe функцийг дамжуулна.

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

Сүүлийн үед веб програмчлалд хүчтэй орж ирж буй javascript фреймворкуудын нэг бол яах аргагүй VueJs сан. Javascript -ийг ашиглахгүйгээр вебэд суурилсан програмыг динамик болгох аргагүй тул хөтөчийн хэлийг үзэн судлах зайлшгүй шаардлагатай гэж үзэн Vue фреймворкийн хичээлүүдийг цувралаар нийтэлж байгаа билээ. Хичээлүүдийг Vue фреймворкийн үндсэн ойлголтууд багц хичээлээс бүгдийг үзээрэй. Vue CLI -ийг суулган түүгээр шинэ төслийн генераци хийхэд төслийн нэрээр хавтас үүсгэдэг гэдгийг CLI суулган төсөл үүсгэх хичээлд үзсэн. Vue CLI -ийн үүсгэсэн хавтасыг код засварлагч дээр нээвэл

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

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

VueJs фреймворкийн шүүлтүүр ойлголтын тухай авч үзье. Хэрвээ та Angular фреймворкийг судалж байсан бол Pipe гэдэг ухагдхууныг мэдэх байх. VueJs фреймворкийн шүүлтүүр бол Pipe -тай ижил бөгөөд ямар нэгэн мөр эсхүл компонентийн хэв /шаблон/ дэх элементүүдийн харагдах байдлыг өөрчлөн үзүүлэх тусгай хувиргагч юм. Үүнийг дараах жишээн дээр авч

<template>
  <div>
      <h2>{{ title }}</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue!"
    }
  }  
}
</script>

үзье.

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

DOM (Document Object Model) буюу хуудасны обьектын модел гэдгийг хуудсыг тегүүдийн мод хэлбэрээр зохион байгуулах гэж ойлгоход болно. DOM модельд хуудастай хэрхэн ажиллахыг ойлгох явдал бол Javascript программчлалын үндсэн суурь байдаг. Javascript хэлний ихэнх үйлдлүүд HTML хуудастай голлон ажилладаг. Иймд Javascript -ын программ веб хуудастай ажиллана гэдгийг DOM той ажиллах гэж л ойлгоорой. Хуудастай ажиллах ямарч үйлдэл DOM -ын тохирох аргыг л дуудах юм.
DOM-моделоор хуудсыг үелэл гэж ойлгоно. HTML тэг болгон тусдаа зангилаа буюу мөчир элементийг үүсгэдэг. Үүнийг жишээн дээр авч үзвэл ойлгомжтой.

Энгийн DOM

Эхлээд доорх хуудасны DOM -ыг авч үзье.

<html>
    <head>
        <title>Гарчиг</title>
    </head>
    <body>
        Хуудасны бие
    </body>
</html>

Хамгийн гадна талын тег бол <html> тул түүнээс мод ургаж эхэлнэ. <html> -ийн дотор <head>, <body> гэсэн хоёр зангилаа байгаа тул эдгээр нь дараагийн зангилаа буюу <html> -ийн мөчир болно.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

интеграл бод

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

 

хязгаарыг бод.

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

 

утгыг ол.

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