Javascript хэл ( 177 )

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

Танд амжилт хүсье

Элементүүдийн харагдацыг удирдах

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

Хэрэглэгч талын хуудасны динамик, интерактив байдлыг хангахад түүний элементүүдийн харагдацыг тодорхой нөхцлөөр удирдаж байх нь их чухал. Иймээс энэ хичээлээр VueJs -ээр хуудас дээрх элементүүдийн харагдацыг удирдах аргуудтай танилцая.

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
    </head>
    <body>
        <div id="app">
            <h2>isVisible = True</h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    isVisible: true
                }
            })
        </script>        
    </body>
</html>

Дээрх энгийн код хуудаст h2 гарчигаар isVisible = True текстийг л үзүүлнэ. Vue -гийн тохиргооны обьектын data талбарт зарлагдсан isVisible талбарыг ашиглааагүй байгаа.

import_contactsДэлгэрэнгүй
Динамик хэвүүд /стилүүд/

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

Интернетэд сууриласан буюу хөтөч дээр ажилладаг програмуудын хэрэглэгчийн дэлгэцийг бүрэн удирдах боломжийг олгодог нь Javascript хэлний нэг давуу тал. Хэрэглэгч талын дэлгэцийг css хэвүүд ашиглан хэвжүүлдэг ч тэдгээрийг динамикаар удирдах хэрэгцээ зайлшгүй гардаг. Хичээлээр хуудасны элементүүдийн хэвийг css классууд ашиглахгүйгээр элементийн бичлэгт динамикаар оруулахыг CSS классуудтай ажиллах хичээлийнхтэй төстэй

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
        <style>
            .circle {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                border: 1px solid black;
                display: inline-block;
                margin: 40px;
            }

            .red {background: red;}
            .blue {background: blue;}
            .green {background: green;}
        </style>
    </head>
    <body>
        <div id="app">
            <div class="circle" :style="{'background': color}"></div>
            <div class="circle"></div>
            <hr>
            <input type="text" v-model="color">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    isActive: false,
                    color: 'blue'
                }
            })
        </script>
    </body>
</html>

жишээн дээр авч үзье.

import_contactsДэлгэрэнгүй
CSS классуудтай ажиллах

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

Хэрэглэгч талын хуудасны динамик ажиллагааг үүсгэн удирдахад зориулагдсан javascript фреймворкууд интернет програмчлалд улам хүчтэй түрэн орж ирж байгаа тул технологийн хөгжлөөс хоцрохгүй байх үүднээс VueJs фреймворкийн хичээлүүдийг нийтэлж байгаа билээ. Энэ удаад VueJs -ийг ашиглан програмаа хэрхэн хэвжүүлэхийг доорх энгийн кодоор

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
        <style>
            .circle {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                border: 1px solid black;
                display: inline-block;
                margin: 40px;
            }

            .red {background: red;}
            .blue {background: blue;}
            .green {background: green;}
        </style>
    </head>
    <body>
        <div id="app">
            <div class="circle"></div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                }
            })
        </script>
    </body>
</html>

судлая. Кодын head хэсэгт style тэгд хэвүүдийг бичин өгөөд хэвийг ашиглах circle класстай нэг div -ийг тодорхойлсон. Хуудсыг хөтөч дээр нээвэл

import_contactsДэлгэрэнгүй
Формтой ажиллах модел

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

Хэрэглэгч програмын өгөгдөлтэй харьцах ажиллагаа бол ямарч програмыг хувьд чухал хэсэг байдаг. Үүнийг голдуу формоор дамжин хийдэг. Иймээс энэ удаа VueJs -ээр төрөл бүрийн input элементүүдтэй хэрхэн ажиллахыг

    <body>
        <div id="app">
            <input type="text">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {

                }
            })
        </script>
    </body>

кодоор авч үзье. Кодод хэрэглэгчээс өгөгдөл авах input элемент div id="app" элементэд Vue -гийн хувийн инициализац хийсэн байгаа. Хуудсыг нээвэл ердийн input талбар л үзэгдэнэ. Тэгвэл input элементэд ямар нэгэн зүйлийг оруулахад түүнийг хуудасны шаблонд шууд харуулах асуудлыг шийдье.

import_contactsДэлгэрэнгүй
Директивийн тэмдэглэгээ

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

VueJs фреймворкийн үндсэн ухагдхууныг танилцуулах ээлжит хичээлээр директивүүдийн тэмдэглэгээний талаар авч үзье. VueJs -ийн тодорхой директивүүдтэй илүү эвтэйхэн ажиллах боломжийг доорх код бүхий хуудас дээр харцгаая.

    <body>
        <div id="app">
            <h2>
                <a v-bind:href="url">E-surgalt</a>
            </h2>
            <h2>
                Тоолуур = {{ counter }}
            </h2>

            <button v-on:click="counter++">Нэмэгдүүлэх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    url: 'https://e-surgalt.com',
                    counter: 0
                }
            })
        </script>
    </body>
import_contactsДэлгэрэнгүй
Гарын үйл явцын модификаторууд

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

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

    <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 боловсруулагчтайгаар сонсохоор заасан.

import_contactsДэлгэрэнгүй
Үйл явцын модификаторууд /тохируулагч/

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

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

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

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

import_contactsДэлгэрэнгүй
Аргад параметрүүд дамжуулах

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

Хичээлээр үйл явцын талаар дэлгэрүүлэн авч үзье. Үүний тулд Үйл явдал нэмэх хичээлийн кодыг нэг тоолууртай түүнийг нэмэгдүүлэх нэг товчтой болгон

    <body>
        <div id="app">
            <h2>Тоолуур = {{ counter }}</h2>
            <button v-on:click="addCounter">Нэмэгдүүлэх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    counter: 0
                },
                methods: {
                    addCounter: function() {
                        this.counter++
                    }
                }
            })
        </script>
    </body>

өөрчилсөн. Хөтөч дээр хуудсаа нээгээд Нэмэгдүүлэх товчийг дарвал тоолуурын утга нэгээр нэмэгдэж байгаа эсэхийг шалган үзээрэй.

import_contactsДэлгэрэнгүй
Үйл явдал нэмэх

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

Хэрэглэгч талын хуудасны event буюу үйл явцын боловсруулалт динамик ажиллагааны чухал хэсэг байдаг. ИЙмээс VueJs -ээр үйл явцыг тодорхойлон тэдгээрийн боловсруулалтыг хэрхэн хийхийг

    <body>
        <div id="app">
            <h2>Тоолуур = {{ counter }}</h2>
            <button>Нэмэгдүүлэх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    counter: 0
                }
            })
        </script>
    </body>

кодтой хуудсаар судлая. Кодод h2 гарчигт Тоолуур = текстийн араас {{ counter }} гэж хувьсагчийг үзүүлнэ. counter -ийг Vue -гийн тохиргооны обьектын data талбарт 0 утгатайгаар зарласан.

import_contactsДэлгэрэнгүй
HTML код үзүүлэх

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

Сүүлийн жилүүдэд javascript фреймворкийн хөгжлийн дүнд хэрэглэгч талын хуудасны боловсруулалт эрчимтэй сайжран хөгжсөн. Хэрэглэгч талын хуудасыг боловсруулах сайн хэрэгслүүдийн нэгээр Vue фреймворк зүй ёсорр тооцогдоно. Сайтад Vue фреймворкийн хичээлүүдийг нийтэлж байгаа бөгөөд энэ удаад Vue -гээс хуудасны шаблонд Html кодыг үзүүлэх аргын авч үзье. Үүнийг интерполяц буюу давхар хаалт бүтцээр

import_contactsДэлгэрэнгүй
Статик гишүүд…

Класс ба структурт ердийн талбар, арга, шинжүүдээс гадна статик талбар, арга, шинжүүд байж болдог. Статик талбар, арга, шинжүүд…

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

 
useRef

Хичээлээр useState -тэй тун төстэй useRef хукийн талаар авч үзье. useRef хукийн онцлог ашиглалтыг компонент хэдэн удаа дахин…

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

 
Тоог ихэсгэх

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

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

 
Графикийн паттерн.…

Нийтлэлээр графикийн хэвүүдийн /GUI pattern/ түүхийг авч үзье. Боловсруулалтын графикийн хэвүүдийг 30 гаруй жилийн туршид боловсруулж байгаа бөгөөд…

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

 
Аргын хэт…

Хааяа өөр өөр параметрүүдийн багцтай нэг аргыг үүсгэх шаардлага гардаг. Ирсэн параметрүүдээс хамааран аргын тодорхой хэрэгжүүлэлтийг хэрэглэнэ. Ийм…

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

 
Vuex -ийг…

Ямарч програмын ажиллагааны чухал хэсэг бол төрөл бүрийн мэдээллийн боловсруулалт, тэдгээртэй ажиллахтай холбоотой байдаг. Иймээс энэ хичээлээс vuejs…

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

 
useEffect

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

…

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

 
Тоон болон…

Илэрхийлэл бол математикийн хэлний үндэс болсон суурь ойлголтуудын нэг. Математикийн илэрхийллийг тооцооны алгоритм, аксиом, теорем, бодлогын нөхцлүүд гээд…

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

 
Програмчлалын хэвүүд…

Програм зохиох бол нарийн төвөгтэй ажил. Ямар ч програмын хувьд өөрийн хийх ажлаа гүйцэтгэхийн чацуу цаашдаа хөгжих, ажлын…

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

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

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

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

 
Бодлого 14.036

хязгаарыг бодоорой.

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

 
Бодлого 8.073

Ангийн нийт сурагчдын 60% нь эмэгтэй сурагчид байдаг. Ангиас санамсаргүйгээр нэг сурагч сонгоход эрэгтэй сурагч байх магадлалыг ол.

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

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