Цикл

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

Циклийн боломжийг дараах

const array = [1, 2, 3, 4, 5];

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

for (let i=0; i < array.length; i++) {
    console.log(array[i]);
}

ашиглах юм. Терминалаас webpack -ийг ажлуулаад index.html хуудсаа хөтөч дээр нээн консолын цонхыг харвал

гэж харагдана. Үүнээс илүү эвтэйхэн арга бол foreach аргыг

const array = [1, 2, 3, 4, 5];

array.forEach(function (item) {
    console.log(item);
});

ашиглах. forEach нь array обьектын арга учраас түүнийг цэгээр дамжуулан дуудаж болно. Аргад эргэн дуудалтын функцийг өгөх хэрэгтэй бөгөөд энд бид ES5-ийн дүрмээр функцийг тодорхойлон өгсөн. forEach арга array обьектод итераци хийн алхам бүрдээ массивын элементийг авах бөгөөд түүнийг аргад дамжуулсан функц консолд үзүүлэх юм. Хуудсаа шинэчлээд консолын цонхыг харвал өмнөхтэй яг ижил үр дүнг авна.
ES6 - д дээрх ажиллагааг хийх илүү эвтэйхэн арга бий болсон.   

const array = [1, 2, 3, 4, 5];

for (let item of array) {
    console.log('Item : ', item);
}

Кодод өмнөхийн адилаар for циклийг ашигласан ч циклийн тодорхойлолтод let түлхүүр үгээр item хувьсагчийг үүсгэн өгөөд ES6 - д бий болсон of түлхүүр үгийг бичээд араас нь массивын нэрийг өгсөн. Тодорхойлолтыг тайлбарлая. for циклийн алхам бүрд array массивын элементээр item хувьсагчийг үүсгэнэ гэсэн үг. Циклийн бие хэсэгт item хувьсагчийг консолд үзүүлнэ. ES5 - ийн for цикл массивын элементэд хандахдаа түүний индексээр хандаж байсан бол ES6 - д of түлхүүр үгээр массивын элементэд хандаад түүнийг тусдаа хувьсагчид авч байгаа ялгааг сайн ойлгоорой. Өөрчлөлтөө хадгалаад консолын цонхыг харвал

дээрх үр дүнг харуулна. Webpack дээрх кодыг ES5-руу хэрхэн хөрвүүлсэнг харвал

эхлээд бичсэнтэй ижил кодыг гаргасан байгаа.
of түлхүүр үгийн боломжийг

for (let item of 'ABCDEFG') {
    console.log('Item : ', item);
}

кодоос харцгаая. of түлхүүр үгтэй итераци хийгдэх боломжтой бүх обьектыг ашиглах боломжтой. Дээрх кодод of 'ABCDEFG' гэж өгснөөр циклийн алхам бүрд мөрийн хэсэг бүрийг item хувьсагчид олгох болно. Хуудсаа харвал

мөрийн тэмдэгт бүрийг салган үзүүлнэ.

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

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

react програмд css препроцессорийг /CSS preprocessor/ хэрхэн ашиглах талаар авч үзье. css препроцессор /CSS preprocessor/ гэдэг нь тусгай бичлэгийн дүрмээр бичигдсэн кодоос ердийн css кодийн генераци хийдэг програмууд юм. Sass, Less, PostCss гээд олон тооны препроцессорууд байдаг ба эдгээрийн ихэнх нь css -ийн боломжуудыг нэмэгдүүлэн кодийн удирдагыг сайжруулдаг. react-scripts -ийн 2 -оос дээшхи хувилбарт css препроцессорийг оруулан ирэх ажиллагааг амархан болгон өгсөн. react програмд css препроцессорийг ашиглахын тулд эхлээд препроцессорийг суулгах хэрэгтэй.

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

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

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

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

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

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

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

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

Програмд нэвтрэхэд хэрэглэгчийн нууц үгийг авах талбар ихэнхдээ байдаг. Ийм төрлийн талбарт шалгалтыг хэрхэн хийхийг сурцгаая. Үүний тулд Шалгалтын алдааг үзүүлэх хичээлийн App компонентийн шаблоны кодыг доорх байдлаар өргөжүүлье.

<template>
  <div class="container">
    <form action="" class="pt-4">
      <div class="form-group">
    ...
      </div>

      <div class="form-group">
        <label for="password">Password</label>
        <input
          type="password"
          id="password"
          class="form-control"
          :class="{'is-invalid': $v.password.$error}"
          @blur="$v.password.$touch()"
          v-model="password"
        >

      </div>      
    </form>
  </div>
</template>

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

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

 

Тэгш хэм гэдэг нь тухайн обьект эсхүл түүний хэсэг тэгш хэмийн төв гэж нэрлэдэг тодорхой цэг, тэнхлэг, хавтгайтай…

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

 

Хэрвээ системийн өөрийн дотоод онцгой нөхцлийн төрлүүд тохиромжгүй бол бид өөрсдөө төрлүүд үүсгэж болно. Бүх онцгой нөхцлийн суурь…

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

 

Цэсийг нээх хаах ажиллагааг хариуцах компонентийг боловсруулсан тул энэ хичээлээр програмийн удирдах цэсийг…

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

 

Математикийн үйлдлүүдэд нэг ба тэг тоонууд онцгой шинжүүдтэй. Үржих үйлдэлд нэг ба тэг

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

 

Давталт (Iterator) паттерн нийлмэл обьектын бүх элементүүдэд тэдгээрийн дотоод бүтцийг задлахгүйгээр хандах абстракт интерфейсийг тодорхойлдог. C# хэл дээр…

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

 

Тодорхой нөхцөлд жишээ нь тоог тэгд хуваах гэх мэт тохиолдолд систем өөрөө онцгой нөхцлийн генерацийг хийдэг. Гэхдээ C#

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

 

Програмийг удирдах цэсийг нээх болон хаах ажиллагааг хариуцах компонентийг боловсруулъя. Үүний тулд төслийн components хавтаст Navigation хавтасыг үүсгээд…

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

 

Арифметикийн үндсэн 4 үйлдлийн нэг бол үржих. Нэмэх , хасах үйлдлийн талаар…

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

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

бол b, c, d -г ол.

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

 

|5x+4|=10 тэгшитгэлийг бод.

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

 

илэрхийллийн утгыг ол.

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