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

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

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

Холбоотой материалууд
Үйл явцын модификаторууд /тохируулагч/

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

VueJs -ийн хуудсанд үйл явц нэмэх ажиллагааны дараагийн боломж бол үйл явцын модификатор буюу тохируулагч юм. Орчуулга сайнгүй болсон байх талтай тул модификатор гэдгээр нь ойлговол зүгээр. Хичээлээр модификаторууд ямар хэрэгтэй, юу хийдэг талаар авч үзье. Жишээ нь E-surgalt сайтад шилжих холбоосыг агуулсан

    <body>
        <div id="app">
            <h2>
                <a href="https:" target="_blank">E-surgalt</a>
            </h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            ...
        </script>
    </body>

хуудас байлаа гэж бодъё. Хөтөч дээр хуудсыг нээгээд холбоос дээр дарвал E-surgalt сайтыг шинэ цонхонд нээнэ.

Redirect буюу өөр хуудаст шилжүүлэх

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

Сайтын чиглүүлэгчид байхгүй эсхүл хуудас олдоогүй гэх мэтийн тохиолдолд хэрэглэгчдийг тохирох хуудаст шилжүүлэх хэрэгтэй болдог. Үүнийг redirect буюу шилжүүлэлт гэдэг. Vuejs -ийн шилжүүлэлтийн механизм хэрхэн ажилладагийг энэ хичээлээр авч үзье. Үүний тулд програмийн чиглүүлэгчдийн тодорхойлолтод

...
export default new VueRouter({
  routes: [
    {
      path: '',  
      component: Home
    },
    ...
    {
      path: '/none',
      redirect: '/cars'
    }
  ],
  ...
})

none гэсэн чиглүүлэгчийг үүсгээд түүнд хандвал cars хуудаст шилжүүлнэ гэдгийг redirect: '/cars' гэж заан өгье.

Өөрчлөлтийн амьдралын цикл

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

Төслийн Car компонентийг Stateful буюу Component классаас удамшсан класс байдлаар тодорхойлсноор react компонентийн амьдралын циклүүдэд хандах боломжийг авсан. Car компонентод дээр компонентийн төлвийн өөрчлөлтүүдийн циклүүдийг харцгаая. Үүний тулд Car компонентийн кодийг

class Car extends React.Component {

  shouldComponentUpdate(nextProps, nextState) {
    console.log('Car shouldComponentUpdate', nextProps, nextState)
    return true
  }

  componentDidUpdate() {
    console.log('Car componentDidUpdate')
  }

  render() {
    console.log('Car render')
    const inputClasses = [styles.input]

    ...

    return (
      <div className={styles.Car} style={style}>
        <h3>Машиний нэр: {this.props.name}</h3>
        <p>Он: <strong>{this.props.year}</strong></p>
        <input
          type="text"
          onChange={this.props.onChangeName}
          value={this.props.name}
          className={inputClasses.join(' ')}
        />
        <button className={styles.btn} onClick={this.props.onDelete}>Устгах</button>
      </div>
    )
  }
}

export default Car

гэж өөрчилье.

RxJs санг суулгах

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

Сүүлийн жилүүдэд интернетэд сууриласан програмуудын хэрэглэгч талын хуудсыг javascript сангуудыг ашиглан боловсруулах хандлага эрчимтэй хөгжиж байна. Javascript хэлийг бүх хөтөчүүд дэмжин ажилладаг нь сервер талын ачааллаг бууруулах, програмыг ажиллагааг илүү динамик, интерактив болгох, сервертэй өгөгдөл солилцох ажиллагаа зэргийг илүү хөнгөн хялбар болгоход чухал хэрэгтэй зүйл. Одоо цагт хэрэглэгчдийн компьютеруудын хүчин чадал, өгөгдөл боловсруулах хурд гээд бүхий л нөөцүүүд хангалттай сайжирсан нь нэг хуудаст программ буюу SPA -г боловсруулан ашиглах таатай нөхцлийг бүрдүүлсэн. Javascript хэлний боломжийг бүрэн ашиглан төрөл бүрийн өгөгдлүүдтэй их эвтэйхэн ажиллах боломжиг RxJs сан олгодогийг та хичээлүүдээс мэдэх болно.

Хичээлд RxJs санг компьютертаа суулган, туршилтын төслийг үүсгэхийг авч үзэцгээе. Хичээлд WebStorm засварлагчийг ашиглах ч та өөрийн дуртай засварлагчийг ашигласан ч болно.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

функцийн тодорхойлогдох мужийг ол.

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

 
Бодлого 16.072

g(x)=2x-3x2 нь f(x)=x2-x3 -ийн уламжлал бол -ийг ол.

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

 
Бодлого 14.080

хязгаарыг ол.

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

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