Орчны тохиргоо

Хичээлээр ES6 -гийн кодыг ES5 кодоор компиляц хийх талаар авч үзье. Юуны түрүүнд үүнийг ямар учраас хийх хэрэгтэй вэ? гэдгийг тайлбарлая. ES бол EcmaScript -ийн хураангуйлсан бичлэг бөгөөд 6 нь Javascript -ийн хувилбарын дугаар. ES6 гараад удаагүй байгаа ч түүнийг олон хөтөчүүд дэмжин ажилладаг болоод байгаа. Жишээ нь Chrome хөтөч ES6 дээр бичигдсэн кодыг шууд ажиллуулна. Гэвч олон хэрэглэгчид ES6 -г шууд дэмждэггүй хуучин хөтөчүүдийг жишээ нь Internet Explorer, Firefox -ийн хуучин хувилбарыг хэрэглэсээр байгаа. Харин эдгээр хуучин хөтөчүүд ES5 -ийг бүрэн дэмжин ажилладаг тул програмыг бүх хэрэглэгчид ямар нэгэн асуудалгүйгээр ашиглах боломжийг бүрдүүлэх зорилгоор ES6 -гийн кодыг ES5 кодоор компиляц хийх хэрэгцээ бий.

Энэ ажлыг гүйцэтгэх хамгийн энгийн болоод ихээр ашигладаг нэг арга бол ES6 -гийн кодыг Webpack -аар ES5 кодод хөрвүүлэх бөгөөд хичээлд бид Webpack -ийн тохиргоог шууд хийгээд явна. Хэрвээ та Webpack -ийг мэдэхгүй бол холбогдох хичээлүүдийг үзээрэй. Ингээд WebStorm

шинэ төсөл нээе. Та өөрийн дуртай код засварлагчийг ашиглаж болно. Webpack -ийг ашиглахын тулд эхлээд түүнийг компьютертаа суулгах хэрэгтэй. Хэрэгслийг суулгахын өмнө таны компьютерт node.js сан болон пакетын менежер npm суусан байх ёстойг сануулъя. Node.js -ийг суулгах хичээлийг эргэн харахыг зөвлөе. Webpack -ийг компьютертаа глобал хэлбэрээр суулгах хэрэгтэй. Үүний тулд npm i -g webpack командыг WebStorm -ийн терминалаас эхсүл командын консолоос өгнө. Дараа нь хэрэгцээт бүх хамааралууд зөв бичигдэн төслийн ажиллагааг хэвийн хангахын тулд package.json файлын инициализацийг хийх хэрэгтэй. Иймээс WebStorm -ийн терминалыг нээгээд npm init өгөхөд пакетын менежер npm төслийн package.json тохиргооны файлын мэдээллийг оруулахыг хүсэх ба

name талбарт өөр пакетуудын нэртэй давхцахгүйгээр нэрийг жишээ нь es6-theory-course өгөөд бусадыг анхдагч утгаар нь үлдээвэл төслийн бүх хамааарлуудыг бичин өгөх төсөлд package.json нэртэй файл үүснэ. Webpack -ийг төсөлд цаашид локал байдлаар ашиглахын тулд WebStorm -ийн терминалыг нээгээд npm i --save-dev webpack@3.8.1 командыг өгнө. Командыг өгөхдөө өөрийн компьютерт глобал байдлаар суугдсан webpack -ийн хувилбарыг локалаар суулган өгөөрэй. Миний компьютерт webpack -ийн 3.8.1 хувилбар глобалаар суугдсан байгаа.
Webpack -ийн тохиргоог хийхээс өмнө төсөлтэй ажиллахад илүү эвтэйхэн болгох бас нэгэн пакетыг суулгая. Үүний тулд WebStorm -ийн терминалыг нээгээд npm i -D html-webpack-plugin командыг өгнө. -D параметр нь --save-dev -ийн адил пакетыг боловсруулалтын хамаарал гэдгийг заана. html-webpack-plugin төсөлд html файлын автомат генерацийг хийн өгдөг. Одоо төслийн package.json файлыг нээн харвал

{
  "name": "es6-theory-course",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^3.8.1"
  },
}

болсон байх ёстой. devDependencies талбарт бидний суулгасан html-webpack-plugin, webpack пакетууд бичигдсэн байгаа. Төслийн файлуудын нэгтгэлийг node.js дээр хийхийн тулд webpack -ийн тохиргооны webpack.config.js файлд дараах агуулгыг

var webpack = require('webpack');
var path = require('path');
var HtmlPlugin = require('html-webpack-plugin');

module.exports = {

    entry: './index.js',

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },

    plugins: [
        new HtmlPlugin()
    ]
};

оруулан өгье. Эхлээд бид require командаар төсөлд шаардлагатай webpack, path, html-webpack-plugin пакетуудын импортыг хийнэ. path нь node.js -ийн өөрийнх үндсэн модул тул түүнийг суулгах шаардлагагүй шууд импортолж болно. webpack, html-webpack-plugin пакетуудыг бид төсөлдөө локал байдлаар суулган өгсөн. webpack.config.js файлаас webpack -ийн тохирогоог module.exports -оор обьект байдлаар хийдэг. Оролтын цэгийг entry талбарт index.js гэж заасан. Төсөлд index.js одоохондоо байхгүй байгаа ч бид удахгүй түүнийг үүсгэн өгнө. output талбарт гаралтын файлын зам, нэрийг обьектоор заан өгдөг. plugins талбарын массивт төсөлд ашиглах плагинуудыг заана. Эцэст нь ES6 -гийн кодыг ES5 код руу хөрвүүлэх тусгай loader -ыг заан өгөх хэрэгтэй. Үүний тулд Babel -д зориулагдсан Webpack плагиныг github -ийн https://github.com/babel/babel-loader/tree/master хаягаас суулгана. Төсөлд webpack -ийг суулгасан болохоор Babel Loader -ийг npm -ээр суулгах командаас webpack -ийг хасаад

npm install -D babel-loader@7 babel-core babel-preset-env командыг терминалаас өгөн пакетуудыг суулгаад package.json файлыг нээн харвал

{
  "name": "es6-theory-course",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-loader": "^8.0.4",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^3.8.1"
  }
}

агуулгатай болсон байна. Одоо Babel Loader -ийг ашиглах хэсэгт тодорхойлсон module талбарыг

хуулан аваад webpack.config.js файлын plugins талбарын ард тавин өгвөл файл

var webpack = require('webpack');
var path = require('path');
var HtmlPlugin = require('html-webpack-plugin');

module.exports = {

    entry: './index.js',

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },

    plugins: [
        new HtmlPlugin()
    ],

    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};

агуулгатай болно. Төсөлд хэрэгтэй пакетуудыг суулган webpack -ийн тохиргоог хийн өгсөн тул компиляторын боломжийг шалгах зорилгоор index.js файлыг үүсгээд түүнд ES6 гийн const түлхүүр үгийг ашиглан

const APP = 1;

энгийн кодыг оруулан өгье. webpack бидэнд ES6 гийн const түлхүүр үгийг ES5 -ын var -аар солин компиляц хийхийг харахын тулд терминалыг нээгээд webpack командыг өгөхөд төсөлд

bundle.js файлыг агуулсан dist хавтас үүснэ. bundle.js файлыг нээн харвал const түлхүүр үг var -аар солигдсон нь харагдана. Үүнээс гадна html-webpack-plugin төслийн гаралтын хавтаст index.html файлыг үүсгэсэн байгаа. Иймээс компиляторын тохиргоо бүгд зөв хийгдэн ажиллаж байгаа нь батлагдлаа.

Хөтөч дээр ES6 гийн бичлэгийг шалгах      

Chrome хөтөчийг нээгээд F12 товч дээр дарахад консолийн цонх нээгдэх бөгөөд сүүлийн хувилбаруудад энд ES6 гийн дүрмээр командуудыг бичиж болдог. Жишээ нь

const APP = () => 1+1; гэж бичээд APP -ийг дуудахад функц ажиллана. Chrome хөтөчийн сүүлийн хувилбарууд ийм бичилтийг шууд дэмжинэ. Хэрвээ та Chrome -ийн арай хуучин хувилбарыг ашиглаж байвал Scratch JS гэдэг сонирхолтой плагин бий. Плагиныг хөтөчийн хаягийн мөрөнд https://chrome.google.com/webstore/category/extensions?hl=en-US хаягийг бичэх эсхүл

гэж ороод дараа нь

Open Chrome Web Store сонголтоор ороод Scratch JS нэрээр хайлт хийн олоод суулгавал DevTools хэсэгт Scratch JS таб нэмэгдэнэ. Одоо Scratch JS табыг нээгээд

Toggle output товчийг дараад

зүүн цонхонд ES6 -гийн дүрмээр код бичихэд кодыг баруун цонхонд шууд ES5 дүрмээр хөрвүүлнэ.

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

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

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

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

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

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

html хуудас бүхэлдээ DOM /document object model/ буюу хуудасны обьектын моделоос бүрддэг. Хуудас дээрх элементүүдэд хандан тэдгээрийг удирдах асуудал хэрэглэгч талын хуудастай ажиллах ажиллагаанд чухал байр суурийг эзэлдэг. Иймээс VueJs -ээр html хуудасны элементүүдэд хэрхэн хандахыг авч үзье. Html элементүүдэд хандах ref буюу reference гэдэг бүтэц бий. Хичээлд

    <body>
        <div id="app">
            <h2>{{ title }}</h2>
            <button @click="updateFirstTitle">Гарчиг өөрчлөх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    title: 'Vue -гийн хувь'
                },
                methods: {
                    updateFirstTitle(){
                        this.title = "Шинэ гарчиг"
                    }
                }
            })
        </script>        
    </body>

h2 гарчиг түүний утгыг солих Гарчиг өөрчлөх товч бүхий хуудсыг ашиглана. Гарчиг өөрчлөх товчийг дарахад title хувьсагчийн утгыг Шинэ гарчиг болгон өөрчлөх updateFirstTitle функц дуудагдана. Хуудасны ажиллагааг шалган үзээрэй.

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

Javascript хэлийг ашиглахгүйгээр сайт зохионо гэдэг бүтэхгүй зүйл гэдэг нь ойлгомжтой. Сайтын хэрэглэгч талын хуудаст олон төрлийн javascript санг ашигладаг байсан бол одоо сайтыг бүгдийг javascript фреймворк ашиглан хийдэг SPA /single page application/ технологийг улам ихээр хэрэглэх болсон. Эдгээрийн нэг болох Vuejs сангийн хичээлүүдийг сайтад нийтэлж байгаа бөгөөд энэ удаад Vue -гийн хувийн тохиргооны обьектод data талбарт обьект тодорхойлж болж байхад яагаад компонентын хувийн тохиргооны обьектод data талбарт функц тодорхойлох ёстойг авч үзье. Компонентууд ямар хэрэгтэй вэ? хичээлийн жишээг

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

Програмчлалын хэлүүдэд хэрэглэгчийн зүгээс үүсгэх үйл явц, түүний боловсруулалт чухал байр эзэлдэг. Үйл явцын боловсруулалтад модификаторийг ашиглан кодыг хэрхэн хураангуй болгохыг Үйл явцын модификаторууд хичээлээс мэдсэн Энэ удаад үйл явцын модификаторын бас нэг боломжийг

    <body>
        <div id="app">
            <input type="text" v-on:keyup="alertValue">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                methods: {
                    alertValue: function() {
                        if (event.keyCode === 13)
                            alert(event.target.value)
                    }
                }
            })
        </script>
    </body>

код дээр харцгаая. Хуудаст хэрэглэгчээс өгөгдөл авах input элемент байрлан түүнд товч дарагдах үйл явцыг v-on:keyup атрибут alertValue боловсруулагчтайгаар сонсохоор заасан.

Стратег (Strategy) нь тус тусдаа хайрцаглагдан тэдгээрийн бие биеэ орлолтыг хангасан алгоритмын багцыг тодорхойлох загварчлалын хэвийг илэрхийлнэ. Нөхцөл…

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

 

Универсал параметрүүд ашиглан ерөнхийлөгдсөн классийг дурын төрлөөр төрөлжүүлж болно. Хааяа төрлийг тодорхой болгох шаардлага үүсдэг. Жишээ нь бидэнд…

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

 

Тооны хуваагдах шинж гэдэг нь хуваах үйлдлийг хийхгүйгээр тоо хуваагчид үлдэгдэлгүй хуваагдах эсэхийг тогтоох аргачлал буюу тооны өөрийн…

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

 

Өмнөх Хулганы товч даралтын боловсруулалт хичээлд асуулт, түүний хариултуудын хувилбарууд, зөв хариултын…

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

 

Нийлбэрт нэмэх үйлдлийн үр дүн мэдэгдэхгүй байхад нийлбэрийг хэрхэн олох аргыг судлан сураад байгаа. Тэгвэл нийлбэрийн нэг бүрдүүлэгч…

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

 

.NET фреймворк ердийн төрлүүдээс гадна ерөнхийлөгдсөн (generics) төрлүүд болон ерөнхийлөгдсөн аргуудын үүсгэлтийг дэмждэг. Энэхүү боломжийн онцлогийг судлахын өмнө…

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

 

Тоонуудын нэмэх үйлдэл ашигладаг аргачлалуудын талаар авч үзье.

Нэг оронтой тоонуудыг нэмэх

Нэг оронтой…

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

 

Бүтээгч (Builder) хэв нь обьект үүсгэх ажиллагааг төрөл бүрийн шатуудад хуваах боломжийг олгосноор түүний үүсгэлтийг хайрцагладаг.

Хэвийг хаана…

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

 

Нийлбэр дэх бүрдүүлэгчдийг нэгтгэн нэмэх дүрэм -ийг үндэслэн дараах хоёр дүрэм гарч ирдэгийг…

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

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

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

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

 

AB, CD суурьтай ABCD трапецын талууд AB=30, BC=20, CD=5 ба DA=15 байг.

  1. Трапецын дундаж шугамын урт
  2. Трапецын өндөр
  3. Трапецын талбай

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

 

бол .

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