Радио товч

Javascript хэлний үндсэн үүргийн нэг бол хэрэглэгч талын хуудаст динамик байдлыг үүсгэн програмтай харьцах ажиллагааг илүү уян хатан, хөнгөн, эвтэйхэн болгох юм. Html хуудас дээрх сонголтуудаас боломжит сонголтуудыг хийхдээ CheckBox элементийг ашигладаг бол сонголтуудаас боломжит нэгийг сонгохыг Радио товчоор хийдэг. Жишээ нь бүртгэлийн хуудаст хэрэглэгчийн хүйсийн сонголтыг хийх гэх мэт. Үүнийг VueJs -дээр checkbox -той төстэйгөөр хэрэгжүүлдэг тул CheckBox хичээлийн

<template>
  <div>
    <h2>Form inputs</h2>
    <label>
      <input type="radio"> instagram
    </label>
    <label>
      <input type="radio"> twitter
    </label>    
    <label>
      <input type="radio"> facebook
    </label>    

  </div>
</template>

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

жишээний input тегийн төрлийг radio болгоод програмыг ажлуулан хуудасны ажиллагааг шалгавал

Материалыг бүртгэлтэй хэрэглэгч үзнэ.

how_to_regБүртгүүлэх

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

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

React компонентод тулгуурладаг сан тул компонент гэж юу болохыг ойлгоцгооё. Үүний тулд машиний мэдээллийг үзүүлэх

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Lesson 01_02</title>
  <style>
    .car {
      display: inline-block;
      border: 2px solid #ccc;
      box-shadow: 2px 2px 1px #eee;
      padding: 10px;
      margin-right: 10px;
    }
  </style>
</head>

<body>
  <div class="car">
    <h3>Toyata Camry</h3>
    <p>Year: <strong>2019</strong></p>
  </div>
</body>
</html>

код бүхий html файлыг үүсгээд хөтөч дээр нээвэл

гэж харагдана.

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

Та сайт боловсруулж байсан бол хэрэглэгч талын хуудаст javascript -ийг ашиглахгүйгээр олигтой үр дүнд хүрэхгүй гэдгийг ойлгосон байх. Сүүлийн жилүүдэд интернетэд сууриласан програмууд хэрэглэгч талын хуудасны бие даан ажиллах боломжид ихээхэн анхаарах болсон. Учир нь програмуудын хийж гүйцэтгэх ажлууд их болох тусам бүгдийг сервер тал хариуцах нь нилээд төвөгтэй болон ирдэг. Үүний зэрэгцээ хэрэглэгч талын компьютерийн хүчин чадал ихээхэн дээшилсэн нь зарим нэгэн ажиллагаануудыг хэрэглэгч талд хийх нь илүү үр ашигтай болсон. Иймээс л javascript хэлийг програм зохиогчдын заавал эзэмшсэн байх хэлүүдэд оруулаад байгаа хэрэг. ES6 -д бий болсон Set төстэй бас нэгэн бүтэц бол Map обьект юм. Set бүтэц массивтай төстэй бол харин Map бүтэц обьект хэлбэрийн. Map бүтцийг

let map = new Map();

map.set('name', 'e-surgalt');
map.set('age', 20);

console.log(map);

жишээн дээр судлая. map -ийг Map обьектын хувь байдлаар үүсгээд түүний set аргаар name, age талбаруудыг үүсгэн утга олгоод map -ийг консолд үзүүлбэл

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

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

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

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

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

ES6 -д шинээр гарч ирсэн бүтцийн задаргаа (destructuring assignment) ойлголтын талаар хичээлд авч үзье. Хичээлийн сэдвийг ойлгохын тулд  

let obj = {
    name: 'e-surgalt.com',
    age: 20
};

let name = obj.name;
let age = obj.age;

console.log('name: ' + name, 'age: ' + age);

name, age талбаруудтай обьектыг үүсгэе. obj обьектын талбаруудыг тусдаа хувьсагчуудад авахын тулд өмнө нь дээрх кодод бичигдсэн аргыг ашигладаг байсан. Терминалаас webpack -ийг ажлуулаад хуудсаа хөтөч дээр нээн консолын цонхыг харвал

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

тэгшитгэлийн нэг язгуур нь эерэг, нөгөө язгуур нь сөрөг байх параметрийн бүх утгыг ол.
Тэнцэтгэл бишийн нэг шийд нь M -ээс бага нөгөө шийд нь M -ээс их байх гарцаагүй ба хүрэлцээтэй нөхцөлийг ашиглавал болох бөгөөд энэ тэнцэтгэл бишийг бодвол үед манай тэнцэтгэл бишийн шийдийн нэг нь эерэг нөгөө нь сөрөг байна.

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

 

функц [1;9] завсарын аль хэсэгт буурах вэ?

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

 

функцийн хамгийн бага утгыг ол.

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