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

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

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

Холбоотой материалууд
Жагсаалттай ажиллах

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

Төслийн App компонентийн кодыг харвал

class App extends Component {

  state = {
    cars: [
      { name: 'Toyata Prius', year: '2018' },
      { name: 'Toyata Camry', year: '2019' },
      { name: 'Ford', year: '2015' }
    ],
    pageTitle: 'App компонент'
  }

  changeTitleHandler = (newTitle) => {
    this.setState({
      pageTitle: newTitle
    })
  }

  ChangeHandle = (event) => {
    this.setState({
      pageTitle: event.target.value
    })
  }

  render() {
    const divStyle = {
      textAlign: 'center'
    }

    const cars = this.state.cars

    return (
      <div style={divStyle}>
        <h1>
          {this.state.pageTitle}
        </h1>

        <input type="text" onChange={this.ChangeHandle} />

        <button onClick={this.changeTitleHandler.bind(this, 'App өөрчлөлт')}>Гарчиг өөрчлөх</button>
        <Car
          name={cars[0].name}
          year={cars[0].year}
          onChangeTitle={this.changeTitleHandler.bind(this, cars[0].name)}
        />
        <Car
          name={cars[1].name}
          year={cars[1].year}
          onChangeTitle={() => this.changeTitleHandler(cars[1].name)}
        />
        <Car
          name={cars[2].name}
          year={cars[2].year}
          onChangeTitle={() => this.changeTitleHandler(cars[2].name)}
        />
      </div>
    )
  }
}

болсон байгаа.

Getters -ийг ашиглах

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

Төслийн нэгдсэн хадгалагчид програмын төлвүүдийг state -д үүсгэн ашиглахыг сурсан тул vuex -ийн дараагийн боломжийг судалцгаая. Одоогоор төслийн Actions компонентод байрлах товчнууд дээр дарах үйл явцын боловсруулагч state -д тодорхойлогдсон counter талбарын утгыг өөрчилнө. Харин Counter компонент state -ээс counter талбарыг аван темлейтдээ үзүүлж байгаа. Төсөлд бас нэгэн компонентийг нэмээд түүн дээр vuex -ийн дараагийн боломжийг судлая. Үүний тулд төслийн components хавтаст Counter компоненттой ижилхэн

<template>
  <h2>Тоолуур 2: {{counter}}</h2>
</template>

<script>
export default {
  computed: {
    counter() {
      return this.$store.state.counter
    }
  }
}
</script>

кодтой SecondCounter.vue файлыг үүсгэе.

Компонент үүсгэх

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

Өмнөх хичээлүүдэд бид create-react-app хэрэгслээр үүсгэсэн төслийн суурь код дээр жишээнүүдийг судласан. Одоо react төсөлд өөр компонентууд үүсгэн тэдгээрийг өөр хооронд нь холбон ашиглахыг сурцгаая. react -ийн компонентийг голдуу тусд нь хавтас үүсгэн байршуулдаг тул бид төслийн src хавтаст Car нэртэй хавтасыг үүсгээд түүн дотор Car.js файлыг үүсгээрэй.

react -д компонентийг үүсгэх хоёр үндсэн арга байдаг талаар JSX хичээлд дурдсан.

Бүтцийн задаргаа

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

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/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

задаргааны хамгийн их нэмэгдхүүн бол a, b, c -г ол.

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

 
Бодлого 7.075

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

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

 
Бодлого 15.071

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

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

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