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

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

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

Ямарч программыг бичихдээ түүний кодод сайн тайлбар оруулж өгч сурах нь программчлалын зөв хэв жаяг гэдгийг хэлсэн. 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>

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

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

JavaScript –д массивыг обьект байдлаар үүсгэж болдог. Энэ аргаар массив үүсгэхэд конструкторт зөвхөн ганцхан тоон төрлийн параметр (массивын элементийн тоо) хэрэгтэй болно. Хэрвээ нэгээс илүү болон тоон бус төрлийн нэг параметр дамжуулбал эдгээрийг массивын элемент гэж үзэх бөгөөд хооронд нь таслалаар зааглана. Мөн түүнчлэн нэг ч параметр дамжуулахгүй байж болно. Тэгвэл хоосон массив үүснэ. Энэ обьектыг стандарт аргаар үүсгэнэ.

<массивын_нэр> = new Array(<элементийн тоо>);
<массивын_нэр> = new Array(<массивын элементүүд>);

Массив үүсгэх жишээнүүд

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

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

<template>
  <div>
    <h1>Тоолуур: {{ counter }}</h1>
  </div>  
</template>

<script>
export default {
  props: ['counter']    
}
</script>

кодтой Counter.vue компонентийг үүсгэе. Counter компонент өөртөө ирэх параметрийн утгыг h1 тегд тоолуурын утгаар л үзүүлнэ.

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

Програмийн кодчлолийг тусгайлан заалгаж сурдаг зүйл биш. Ямарч зүйлийг өөрөө бие даан сурах боломжтой. Энэ талаар Бие даан сурах нийтлэлийг үзээд эрэгцүүлэн бодоорой. Энэ удаад Input талбарын боловсруулалтын талаар судлая.

Өмнөх хичээлүүдэд хуудасны элементүүдэд үйл явцын сонсогчийг тавин, түүнд параметр дамжуулан хүлээн авах аргуудыг сурсан. Энэ хичээлээр Input талбарт үүссэн үйл явцыг хэрхэн боловсруулахыг судлая. Үүний тулд App компонентийн h1 гарчигийн доор input талбарыг

      <div style={divStyle}>
        <h1>
          {this.state.pageTitle}
        </h1>
        <input type="text"/>
        <button onClick={this.changeTitleHandler.bind(this, 'App өөрчлөлт')}>Гарчиг өөрчлөх</button>

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

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

Хичээлээр сорилгын үр дүнгийн хэсгийн боловсруулалтыг хийцгээе. Одоогоор сорилгын асуултууд дуусахад бид консолд Finished текстийг үзүүлж байгааг өөрчлөхийн тулд Quiz компонентод false анхдагч утгатай isFinished төлвийг

const [isFinished, setIsFinished] = useState(false)

нэмэн өгөөд onAnswerClickHandler аргаас сорилго дуусанг шалгах isQuizFinished функцээс true утга буцаавал Finished текстийг үзүүлж байсныг

        if (isQuizFinished()) {
          setIsFinished(true)
        } else {
          ...
        }

гэж өөрчилье. Өөрөөр хэлбэл сорилго дуусан isQuizFinished функцээс true утга буцаавал setIsFinished функцээр isFinished төлвийг true утгатай болгоно.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

Тэмцээнд 16 шатарчин оролцсон. Нэгийн давааны хуваарийн хичнээн хувилбар байж болох вэ? / Хуьаарьт дор хаяж нэг өрөгт тоглох хүмүүс нь ялгаатай бол хувилбар гэж тооцно. Тоглох өнгө, ширээний дугаарыг тооцохгүй/

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

 

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

 

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

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