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

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

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

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

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

Холбоотой материалууд
Төлөв үүсгэх

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

Өмнөх хичээлүүдэд React сан хэрхэн ажилладаг, create react app хэрэгсэл, хуудасны хэвийн бичлэгийн Jsx дүрмүүдтэй танилцан тэдгээрийн ажиллагааг жишээнд дээр судлан танилцсан бол одоо сангийн өөрийнх нь ажиллагаануудтай дэлгэрэнгүй танилцгаая. Эхлээд create react app хэрэгслээр үүсгэсэн төслийн үндсэн компонент болох App -аас өмнөх хичээлд судалсан зарим ойлголтуудын жишээ кодийг

class App extends Component {
  render() {
    const divStyle = {
      textAlign: 'center'
    }
    return (
      <div style={divStyle}>
        <h1>
          Hello world!
        </h1>
        <Car name={'Toyata Prius'} year={'2018'} />
        <Car name="Toyata Camry" year={'2019'} />
        <Car name={'Ford'} year={'2015'} />
      </div>
    )
  }
}

хасан цэвэрлэе.

DOM обьектын тухай

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

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> -ийн мөчир болно.

Тоон модификаторууд

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

Vue фреймворкийн ээлжит хичээлээр форм дээрх тоон утгын талбаруудад v-model директивийг яаж ашиглахыг үзье. Жишээ нь форм дээрээс хэрэглэгчийн насыг авах хэрэгтэй болсон гэе. Үүний тулд

<template>
  <div>
    <h2>Form inputs</h2> 
    <input type="text" v-model="age">
    <hr>
    <p>{{ age }}</p>
  </div>
</template>

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

код байхад болох мэт.

Классууд

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

Програмын бүтээгдхүүнүүд интернетэд суурилсан буюу хөтөч дээр ажиллах хандлага улам дэлгэрсээр байгаа нь  javascript хэлийг судлан эзэмших шаардлагыг улам нэмэгдүүлсээр байгаа. Хэлний боловсруулагчид javascript хэлний бичлэгийн дүрмийг өргөн тархсан програмчлалын хэлүүдтэй улам төстэй болгож байгааг ES6 -д классууд хэрхэн өөрчлөгдсөн дээр авч үзье. ES5 -д классыг хэрхэн үүсгэж байсанг

function Car(name) {
    this.name = name;
}

Car.prototype.logName = function () {
    console.log(this.name);
};

let car = new Car('Toyota');
car.logName();

жишээнээс харцгаая.

Үйл явдал…

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

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

 
Холбоосын параметрүүд

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

 
Хадгалагч (Memento)

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

 
Кодийн сайжруулалт

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

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

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

Хоёр тойрог гадна талаараа шүргэлцсэн. Нэг тойргийн шүргэгч нь нөгөө тойргийнхоо төвийг дайран гарсан. Шүргэлтийн цэгээс хоёрдахь тойргийн төв хүртэлх зай нь энэ тойргийн радиусаас 3 дахин урт. Нэгдүгээр тойргийн урт хоёрдугаар тойргийн уртаас хэд дахин их вэ?

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

 
Бодлого 3.058

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

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

 
Бодлого 2.140

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

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

 
© 2014 Зохиогчийн эрхээр хамгаалагдсан. Холбогдох - 96655195