Кодыг хуудсанд оруулах

Хичээлүүдийг үзэхэд таньд текст засварлагч Notepad ++ тэгээд интернет хөтөч байхад л хангалттай.  Хичээлийн бүх жишээг өөрөө бичин туршин үзээрэй.

JavaScript-ийн бичлэгийн дүрэм

JavaScript –ийг үзэж эхлэхийн өмнө түүнийг бичлэгийн үндсэн дүрмүүдийг мэдэх хэрэгтэй. JavaScript ба Java -гийн бичлэгийн дүрэм C болон C++ ийнхтай адилхан. Хэрвээ та C-гийн төрлийн ямар нэгэн хэлийг мэддэг бол Javascript -ийг сурахад их амархан.    
Үндсэн дүрмүүдээс дурдвал

  • Том жижиг үсгийг ялгана. Бүхий л түлхүүр үгнүүдийг жижиг үсгээр бичнэ. Хувьсагч болон функцуудын нэрийг тэдгээрийг тодорхойлохдоо яаж бичсэн яг тэр хэвээр нь бичнэ. жишээ нь Str ба str хувьсагчид ялгаатай хувьсагчид гэсэн үг.
  • Хоосон зай, таб, мөр шилжүүлэх тэмдэгтүүдийг JavaScript хасдаг тул тэдгээрийг программын кодыг уншихад эвтэйхэн болгох зорилгод дурын байдлаар ашиглаж болдог.
  • Цэг таслал (;) тэмдэгт. Бүх операторууд энэхүү тэмдэгтээр тусгаарлагдана. Хэрвээ операторыг мөр шилжүүлэх тэмдэгтээр дуусгасан бол цэг таслалыг бичихгүй байж болно. Гэхдээ энэ үедээ нэг операторын мөрийг таслаад шинэ мөр нь өөр бие даасан оператороор эхэлж болдоггүйг анхаарах хэрэгтэй.   
  • Тайлбар. /* болон */ тэмдэгтүүдийн хоорондох байрлах ямарч текстийг JavaScript хасдаг. Үүнээс гадна // тэмдэгтээр эхлээд мөрийн төгсгөл тэмдэгтээр дууссан текстийг бас хасдаг.
  • Хувьсагч, функц, тэмдэглэгээний нэрүүдийг дурын тооны ASCII үсгүүд, доогуур зураас (_) болон долларын тэмдэгтээр ($) үүсгэж болно. Харин JavaScript 1.0 хувилбарт нэрэнд ($) тэмдэгт ашиглахыг дэмжидгүй.
  • Нэрэнд break, case, continue, default, delete, do, else, export, false, for, function, if, import, in, new, null, return, switch, this, true, typeof, with гэх мэтээр түлхүүр үгнүүдийг ашиглаж болохгүй. 

Скриптийг HTML хуудаст шууд оруулах

JavaScript программыг HTML хуудасны аль ч хэсэгт бичиж болох бөгөөд HTML хуудаст оруулах үндсэн хоёр арга байдаг. JavaScript программын кодыг <script> </script> контейнерт байршуулдаг. Жишээ нь

<script language="javascript">
// Энд програмын текст бичигдэнэ.
</script>

Энэ бичлэгийн дүрэмийг ашиглаж болох хэдий ч одоо JavaScript програмын кодыг хуудаст оруулахдаа доорх дүрмийг голлон хэрэглэдэг болсон.

<script type="text/javascript">
// Энд програмын текст бичигдэнэ.
</script>

За программчлалын хэлийг сурахад уламжлал шахуу болсон Hello Word үгийг үзүүлэх кодыг бичье.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hello World</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <script type="text/javascript">
        document.write("Hello World");
        document.write("<br /><b>Hello World</b>");
    </script>
</body>
</html>

Дээрх жишээнд document обьектын write аргыг хэрэглэн Hello World үгийг үзүүлж байна. document обьект гэдгийг одоохондоо body элементэд хандаж байгаа гээд ойлгоход болно. Харин текстийг заавал хашилтанд авна гэдгийг санаарай. JavaScript програмын текст дотор хоосон зай болоод төрөл бүрийн тэмдэгтүүдийг ашиглаж болохоос гадна html тегүүдийг ашиглаж болдогийг кодын document.write("<br /><b>Hello World</b>"); мөрөөр үзүүллээ. Хуудсыг хөтөч дээр нээвэл Hello World үгийг хоёр мөрөөр үзүүлнэ.

Санамж

Та сайтын HTML хэлний тухай хичээлүүдийг үзэн хуудсыг хөтөч дээр нээх хэрхэн дахин ачааллах, html тегүүдийн талаар мэдлэгтэй болсон гэж үзээд хичээлүүдэд тегүүдийн талаар тайлбар оруулаагүй болно.

Хэдийгээр кодыг хуудасны хаана ч оруулан өгч болох ч бид JavaScript программын жишээнүүдийг HTML-ын толгой хэсэгт бичих болно. Энэ нь хэрэглэгч программыг ашиглаж эхлэхээс өмнө түүнийг ачааллах боломжийг нээдэг.

JavaScript файлыг хуудаст оруулах

<script> тегийн src атрибутыг ашиглан javascript-ийн файлыг хуудаст оруулан ирэх боломжтой. Жишээ нь

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hello World</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="myprog.js">
        document.write("Оруулах js файл байхгүй байна");
    </script>
</head>
<body>
    ...
</body>
</html>

Олон тооны хуудастай үед энэ атрибут функцуудыг салгахад маш ашигтай. Хэрвээ файлд алдаа байхгүй бол src атрибуттай <SCRIPT> тег нь хүчингүй болдог. Жишээ нь myprog.js файл олдохгүй эсхүл файлыг ачааллах үед ямар нэгэн алдаа гарсан тохиолдолд document.write("Оруулах js файл байхгүй байна") оператор биелэгдэнэ.  
src атрибутад шууд болон харьцангуй байдлаар дурын URL тодорхойлж болно. Жишээ нь

<script src="http://home.main.com/functions/jafunc.js">

JavaScript-ийн гадаад файл нь js гэсэн өргөтгөлтэй байна. Скриптын код том хэмжээтэй, олон тооны функцуудыг агуулж байхад энэ аргыг хэрэглэх нь тохиромжтой.

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

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

Html хэвийн элементүүдэд хэвжүүлэлтийн стилийг шууд буюу inline /элементийн тодорхойлолтын мөрөнд/ зааж болдог. Үүнийг React компонентийн хэвийн элементүүдэд хэрхэн өгөхийг App компонентийн

class App extends Component {
  render() {
    return (
      <div>
        <h1>
          Hello world!
        </h1>
      </div>
    )
  }
}

кодоор харцгаая.

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

Хичээлээр react -ийн хукуудаас их өргөн ашиглагддаг useEffect -ийн талаар авч үзье. useEffect -ийн ажиллагааг судлах хуудасны кодийг

import React, {useState} from 'react'

function App() {
  const [type, setType] = useState('users')
 
  return (
      <div className="container">
        <h1>Өгөгдлүүд: {type}</h1>
        
        <button onClick= {() => setType('users')} className="btn btn-primary mx-3">Хэрэглэгчид</button>
        <button onClick= {() => setType('todos')} className="btn btn-primary mx-3">Хийх ажлууд</button>
        <button onClick= {() => setType('posts')} className="btn btn-primary mx-3">Нийтлэлүүд</button>
        
      </div>
  );
}

export default App;

гэж үүсгэе.

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

React компонентод параметр дамжуулах бас нэгэн аргыг авч үзье. Компонентийн хэвд jsx гэж нэрлэгддэг html маягийн бичлэгийг ашиглаж байгаа. App компонентод Car компонентийг оруулан ирэхдээ

<Car name={'Toyata Prius'} year={'2018'} />

гэж компонентийн нэрийг өөрөө хаагдсан (/> -ийг ашиглана) html тег хэлбэрээр бичин өгч байгаа.

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

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

Тоон дээр мөрийг нэмэх гэвэл яах вэ

Дараах кодыг авч үзье.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

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

 

[-252; 299) завсарт орших 18 -д үлдэгдэлгүй хуваагдах тоонуудын нийлбэрийг ол.

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

 

тэгшитгэлийг бод.

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