Mana bu kursda keltirilgan bo'limlar

Mana bu kursda keltirilgan bo'limlar:

• 
  Kirish
  
• 
  Moslash
  
• 
  Navbar
  
• 
  Mahsulot Kartalari
  
• 
  Oshirish Funktsiyasi
  
• 
  Kamaytirish Funktsiyasi
  
• 
  Yangilash Vazifalari
  
• 
  Hisoblash
  
• 
  mahalliy saqlash
  
• 
  Savat Sahifasi
  
• 
  elementni olib tashlash
  
• 
  Jami Hisob
  
• 
  Aravani Tozalash
  
• 
  Ko'proq mahsulot qo'shilmoqda
  

Quyidagi to'liq kursni tomosha qiling yoki ustida freeCodeCamp.org YouTube kanali (3 soatlik tomosha).
Transkript
(avtogeneratsiyalangan)
Ushbu kursda siz JavaScript-da hech qanday ramkasiz xarid qilish savatini yaratish orqali JavaScript ko'nikmalaringizni yaxshilaysiz, Joy ushbu kursni o'rgatadi, Joy freeCodeCamp-da ishlaydi va u yangi boshlanuvchilar uchun tushunchalarni buzishda juda yaxshi, bu kursda o'rgangan narsangiz bilan sharh qoldiring.
Salom bolalar, bu erda quvonch.
Bugun biz vanilla JavaScript yordamida xarid qilish savatini qanday qilishni o'rganamiz.
Shunday qilib, bolalar, bu biz bugun qiladigan loyihamiz.
Ko'rib turganingizdek, bu kiyim do'koni.
Va bizda sotiladigan 12 ta mahsulot bor.
Har bir mahsulot kartasida rasm, sarlavha, qo'g'irchoq tavsifi, narxi va ushbu variantlar bo'ladi.
Xo'sh, bu qanday variantlar? Ushbu variantlar sizga aniqlashga yordam beradi qancha miqdor ushbu maxsus mahsulotni xohlaysiz, aytaylik, siz ushbu mahsulotning 15 qismini xohlaysiz.
Shunday qilib, siz bu erda miqdorni ko'paytirasiz, men buni 15 qilaman.
Yoki aytaylik, men miqdorni kamaytirmoqchiman, bu erda miqdorni kamaytirishim mumkin.
Xo'sh, bolalar, siz tanlagan har qanday mahsulot, siz har doim bu erda yangilanayotgan raqamlarni ko'rishingiz mumkin.
Sizga namuna ko'rsataman.
Xo'sh, aytaylik, men ushbu futbolka miqdorini oltitaga oshirmoqchiman.
Yaxshi, va men kostyum miqdorini ettitaga oshirmoqchiman, shunda siz bu raqam avtomatik ravishda yangilanayotganini ko'rishingiz mumkin.
Va bu raqamlarni bu erda ko'rasizmi? 4567? Bu nima? Bu sizning tanlovingiz, bu sizning ma'lumotlaringiz.
Sahifani yangilasangiz ham, bu ma'lumotlar o'chirilmaydi.
Qanday qilib bu mumkin? JavaScript-da mahalliy saqlash deb nomlangan xususiyat mavjud, bu xususiyatni tashlang, barcha ma'lumotlaringizni brauzer ichida saqlashingiz mumkin.
Bu bilan siz sahifani yangilasangiz ham, ma'lumotlar hech qachon o'chirilmaydi.
Shunday qilib, biz loyihamizda mahalliy xotirani qanday amalga oshirishni o'rganamiz.
Va bolalar bunga qarashadi, agar men bu savatni bossam, do'kon sahifasidan tanlagan barcha tanlangan mahsulotlaringizni ko'rishingiz mumkin.
Shunday qilib, biz tanlagan mahsulotning eskizini olamiz, bu erda miqdor tugmachasini olishimiz mumkin, birlik narxi bu erda.
Shu bilan birga bizda bu raqam bor.
Xo'sh, bu aslida nima, shuning uchun bu qanday hisoblanadi, bu birlik narxini umumiy miqdorga ko'paytirish orqali hisoblanadi, bu besh marta 100-500.
Faqat bu kabi, barcha kartochkalar uning hisob-kitoblar, barcha qilamiz.
Va bularning barchasi amalga oshirilgandan so'ng, siz bu erda umumiy hisobni ko'rishingiz mumkin, aytaylik, siz ofis ko'ylagini 10 ga oshirmoqchisiz, uni shu erda oshirishingiz mumkin.
Va bu raqam o'zini yangilaganini ko'rishingiz mumkin.
Va bu vosita ham buni o'zi yangilaydi, siz ham shunday kamaytirishingiz mumkin, biz boramiz.
Aytaylik, siz bu narsani butunlay xohlamaysiz.
Shunday qilib, siz nima qila olasiz, shunchaki ushbu xochni bosishingiz mumkin va u o'zini avtomatik ravishda shunday olib tashlaydi.
Shunday qilib, bu xuddi shunday ishlaydi.
Bugungi loyihaning manba kodi mening GitHub omborim havolasi quyida keltirilgan tavsifda taqdim etiladi.
Shunday qilib, havolani kiritganingizdan so'ng, bizda jami uchta filial borligini ko'rishingiz mumkin.
Yaxshi, agar men bossam bu erda, keyin bizda asosiy filial mahsulot rasmlari va boshlang'ich fayllari borligini ko'rishingiz mumkin.
Shunday qilib, biz boshlang'ich fayllarni yuklab olib, loyihamizni boshlaymiz.
Yakuniy loyiha bu erda asosiy va bu mahsulot rasmlari nima bo'ladi? Sizga ko'rsataman.
Men bu erda bosing bo'lsa, keyin barcha topishingiz mumkin 12 bu yerda tasvirlar.
Sizga ko'rsataman.
Buni bu erda ko'rasizmi? Bizda bu erda barcha mahsulot tasvirlari mavjud.
Va men ma'lumotlar Jas qaytib borsangiz.
Xo'sh, bu ma'lumotlar nima? Ha, u bizning mahsulot kartalarimizning barcha ma'lumotlarini olib yuradi.
Sizga namuna ko'rsataman.
Yaxshi.
Shunday qilib, do'konga qaytib borsam, bu ma'lumotlarni bu erda ko'rasizmi? Ha, bu ma'lumotlarning barchasi aslida ushbu ma'lumotlar ichida saqlanadi.
Ha, bolalar, xavotir olmang, chunki video davomida men sizga ushbu resurslardan qanday foydalanishni o'rgataman.
Shunday qilib, asosiy darsligimizni boshlaylik.
Yaxshi bolalar, o'quv qo'llanmasini boshlashdan oldin, birinchi navbatda, biz o'z muhitimizni o'rnatishimiz kerak.
Buning uchun siz o'ng tugmasini bosing, yangi papka yarating, yaxshi.
Va keyin siz xohlagan narsani nomlashingiz mumkin, ammo ushbu o'quv qo'llanma uchun men uni nomlayman xarid qilish savati, yaxshi, xarid qilish minus savat, shunga o'xshash narsa, yaxshi, va keyin biz o'ng tugmasini bosamiz VS kodi bilan oching, yaxshi, agar sizda bunday imkoniyat bo'lmasa, donxavotir olmang, shunchaki qidiruv satriga o'ting.
Va keyin siz VS kodini qo'lda urasiz.
Shunday qilib, u ochilgandan so'ng, siz shunday papkani ochish uchun kelasiz, yaxshi, keyin ish stolingizga o'ting va keyin o'zingiz yaratgan papkani qidiring, bu bitta xarid qilish vositasi ochiq.
Xop, va keyin siz loyiha papkani ko'rish mumkin, biz vs kodi ochiq qolibsan.
Ushbu loyihaning manba kodi mening GitHub omborimda, men ushbu omborning havolasini quyidagi tavsifda taqdim etaman.
Shunday qilib, havolani bosganingizdan so'ng, siz bu erga kelasiz va barcha fayl va papkalarni topasiz.
Bu qarash kabi.
Bizda rasmlar papkasi bor, siz buni qilganimizni ko'rasiz.
Buning uchun siz faqat kodi bosing, keyin yuklab zip gonna bir zip formatida yuklab olish bo'ladi.
Keyin siz zip-ni shu tarzda ochasiz, keyin ish stolingizga o'ting va keyin faylni shu ko'rinishda chiqarib oling.
Yaxshi, keyin biz ushbu papkani va vs rasmlarini bu erda ochamiz.
Biz uni tashqariga sudrab chiqamiz.
Xo'sh, keyingi o'rinda, keling, buni yopamiz va keyin biz manba papkamizdagi rasmlarni shu kabi olamiz.
Aytgancha, bolalar, bu papka barcha echimlarni olib yuradi, mayli, menga kerak emas.
Lekin siz bu erda uni nazorat bo'lsangiz, uni ushlab qolish bo'lsangiz, hech qanday muammo.
Shunday qilib, men buni yo'q qilaman.
Yaxshi bolalar, keling, bu erda VS kodimizga qaytaylik va siz ko'rgan ushbu rasmlar papkasini ko'rasiz, men buni ochaman.
Dastlab, siz to'rtta rasmni olasiz.
Xavotir olmang bolalar, men ushbu papkaga ko'proq rasm qo'shaman.
Ammo hozircha biz to'rtta rasm bilan ishlaymiz.
Ning bu okay ochib beraylik? Va keyin siz ko'ylaklar, futbolkalar, rasmiy ko'ylaklar va boshqalarning rasmlarini topasiz.
Xo'sh, bu erda sizga kostyum ham keladi.
Aytgancha, bolalar, sizda shunday savol tug'ilishi mumkin: men bu tasvirlarni qayerdan oldim? Okay, men ikki veb-saytlari uni bor.
Birinchisi unsplash.com.
Va yana biri deyiladi pixels.com.
Yaxshi, shuning uchun siz har qanday veb-saytga kirishingiz mumkin, keyin siz shu erda ko'ylak, yaxshi, kiring, keyin siz ko'ylak, rasmiy ko'ylak, kundalik ko'ylak, shim, poyabzal va boshqalarning rasmlarini topasiz.
Agar siz pastga aylantirsangiz, bu rasmni bu erda ko'rasizmi? Uni qaerdan oldim unsplash.com.
Shunday qilib, xuddi shu rasmni papkada topishingiz mumkin, ko'rasiz.
Shunday qilib, men ushbu rasmlarni qanday olganimni tushundingiz deb umid qilaman va siz o'zingizning shaxsiy loyihalaringizni amalga oshirish uchun xuddi shu manbalardan foydalanishingiz mumkin.
Yaxshi.
Mayli, bolalar, VS kodiga qaytib kelaylik.
Va endi biz uchta fayl yaratamiz.
Yaxshi.
Shunday qilib, birinchi bir indeks html, okay, indeks nuqta HTML, CSS keyin uslubi bo'ladi.
Va nihoyat, asosiy.oyna.
Yaxshi.
U erda biz boramiz.
Hammasi joyida.
Okay, guys, uning bizning indeks html qaytib keladi va siz undov belgisini bosing fiz buni qozonxona kodni qilaylik, keyin siz bu variantni topish uchun harakat qilyapmiz.
Agar variantni topmasangiz, buni bajaring.
Siz bilan birga nazorat oraliq bosing, va keyin bu yerda Emmet topish uchun harakat qilyapmiz.
Shunday qilib, agar siz buni bossangiz, qozon kodi avtomatik ravishda hosil bo'ladi, bu deyiladi Emmet plagini va boshqalar.
Kodi.
Yaxshi.
Va sarlavha bo'yicha biz bu erda kiyim-kechak do'koni, yaxshi, chunki bu kiyim do'konining veb-sayti, yaxshi, shunga o'xshash narsa.
U erda biz boramiz.
Bir soniya.
Yaxshi, mukammal.
Endi css uslubini ko'rasizmi? Men bu kabi bu erda bog'langan uchun ketyapman? Qarang, Li N K.
Eshiting, agar siz ushbu variantni topmasangiz, buni bajaring.
Yaxshi, siz bu kabi nazorat maydonini birgalikda urasiz.
Va keyin siz Emmet qisqartmasini topasiz, shunchaki uni bosasiz.
U erda biz kod avtomatik ravishda yozilganligini ko'rishimiz mumkin.
Shunday qilib, href-da uslub css-ni qo'lda yozishingiz shart emas.
Bu bolalar, albatta, siz faqat birga Ctrl oraliq bosing? Bu yo'lni bu erda ko'ra olasizmi? Ularning barchasi avtomatik ravishda bu erda ko'rsatiladi.
Siz faqat uslubi css bosing, u erda siz borib.
Vaqtingizni saqlab qoldim.
Okay, Emmet foydalanish.
Shunday qilib, endi siz bu erga kelmoqchisiz, bu ikki tegni bu erda tugayotgan teglarni ko'rasizmi, shunchaki bu erga kelib, SC yozasiz.
Shunga qaramay, agar siz bunday variantni topmasangiz, u erga borish uchun boshqaruv maydonini bosasiz.
Va keyin siz ushbu parametrni tanlaysiz.
Yaxshi? Va manbada siz bu erga kelib, keyin boshqaruv maydonini yozasiz.
OK, va keyin bu birini tanlang.
Agar bu asosiy ko'ryapsizmi? Ha.
Bu kabi ustiga bosing.
U erda biz boramiz.
Uni saqlang.
Keyin tanaga keling va keling, namunaviy matn yozamiz.
Xo'sh, keling, salom, dunyo, shunga o'xshash narsani yozamiz.
U erda biz boramiz.
Yaxshi, bolalar, endi biz jonli server deb nomlangan vilkadan foydalanamiz.
Agar sizda yo'q bo'lsa, bu erga keling.
Va keyin bu erda, jonli server, shunga o'xshash narsa.
Meni yaqinlashtirish ruxsat.
Xo'sh, buni bu erda ko'ryapsizmi, jonli server mening uyimni Ritvik qildi.
Ular bu erga kelib, narsani o'rnatadilar.
Agar jonli server o'rnatish marta, keyin siz HTML qaytib kelish uchun harakat qilyapmiz, okay? Va keyin siz bu yerni o'ng tugmasini bosasiz va keyin jonli server bilan ochish deb nomlangan variantni topasiz.
Yaxshi.
Aytgancha, alternativa ham mavjud.
Buni bu erda ko'ra olasizmi? Ushbu lentada, bu ko'k rangli lenta, siz bu erda variantni ham olasiz jonli boring.
Agar siz buni bosgan bo'lsangiz, unda ushbu loyiha veb-brauzeringizda shunga o'xshash narsani ochadi.
Agar bu yerda, bu Salom dunyoni ko'ryapsizmi.
Meni yaqinlashtirish ruxsat.
Kattalashtirish uchun siz shunchaki Ctrl tugmachasini bosasiz.
Va keyin siz sichqoncha g'ildiragini shunday aylantirasiz.
Buni ko'ra olasizmi? Siz shunchaki kattalashtirishingiz va kichraytirishingiz mumkin.
U erda biz boramiz.
Xo'sh, bolalar, bu bo'shliqni bu erda ko'ra olasizmi? Xo'sh, siz hech qachon brauzeringizning standart uslublarini bajarasizmi, shuning uchun biz brauzerning standart uslublarini olib tashlashimiz kerakmi? Buning uchun.
CSS - ga qaytaylik.
OK, shuning uchun siz yulduz, jingalak qavs, OK, m nol yorlig'ini yozasiz.
U erda biz boramiz.
Bu erda nima faqat Emmet ekan.
Keyin siz p nol yorlig'ini urasiz.
U erda biz boramiz.
Siz qarang.
Agar chegara qutisini o'lchamlarini bir qutiga yozish uchun harakat qilyapmiz keyingi safar, bu kabi bir narsa.
Uni saqlang.
Natijada qaraylik.
Agar bo'shliqlar ketdi, deb ko'rish mumkin.
Yaxshi.
Va bu shriftni bu erda ko'ryapsizmi, biz shrift oilasidan mamnunmiz.
Shrift oilasini almashtirish uchun bu erga, keyin esa to'g'ri tanaga keling.
Yaxshi, jingalak qavs.
Endi FF yorlig'i.
Endi siz ushbu saqlashni olib tashlaysiz va S s ni yozasiz.
Agar variantni ko'rmasangiz, buni bajaring.
Siz nazorat kosmik sans saqlash bosing fiz, kiriting.
Qilingan.
OK, uni saqlang.
Keling, natijani ko'rib chiqaylik.
Agar bizning shriftlar shrift oila o'zgardi deb ko'rish mumkin.
Yaxshi yigitlar, hozirgacha juda yaxshi.
Biz VS Code loyihasi papkasini o'rnatishni tugatdik.
Endi biz kodlashni boshlaymiz.
Shunday qilib, biz qurmoqchi bo'lgan birinchi narsa bu navbar bu navbarni bu erda ko'rasizmi, keling, birinchi navbatda uni quraylik, buni amalga oshirish uchun, keling, bu erda VS kodimizga qaytaylik.
Okay guys indeks html ustidan kelib, keyin bu erda tana bo'limga pastga aylantiring.
Salom dunyoni olib tashlaylik, bizga kerak emas.
Biz ham HTML formatlash tez men bilan birga kuzatib yozish uchun bu erda Emmet foydalanish uchun harakat qilyapmiz, xop, biz gonna urish dot nav bar yorlig'ini odamsiz.
Agar variantni topa olmasangiz, shu yechim, faqat birga nazorat oraliq bosing, keyin variantni topish uchun harakat qilyapmiz.
Xop, keyin bosing yorliq.
U erda biz boramiz.
Shunday qilib, biz plaginlar nomi Emmet deb ataladigan plagin yordamida vaqtni tejaymiz.
Xop, Agar Emmet avtomatik ravishda sinf nomi navbar bilan menga div yozgan ko'rish mumkin.
Ajoyib.
Mayli, yigitlar, nav barning ichiga kiraylik.
Va endi biz H2 ga teging urish uchun harakat qilyapmiz.
U erda biz boramiz.
Shunday qilib, bu bizning brend logotipimiz nomini oladi.
Siz xohlagan narsani yozishingiz mumkin, lekin men bu erda yozaman kiyim do'koni.
Yaxshi.
Kiyim Do'koni.
U erda biz boramiz.
Qilingan.
Shunday qilib, bu natija.
Hozircha bizda faqat brend logotipi nomi bor.
Mayli, bolalar, keling, Finalize loyihasiga qaytaylik.
Ushbu xarid qilish vositasi belgisini bu erda ko'rasizmi, biz buni bir vaqtning o'zida qilamiz.
Ushbu quyuq fon rangini ko'ryapsizmi, biz ushbu quyuq fon rangini nav barimizga ham qo'llaymiz.
Keling, bu erda VS kodimizga qaytaylik.
Yaxshi.
Va h2 yorlig'i ostida biz sinf nomi kartasi bilan boshqa div qilamiz.
Ushbu nuqta kartasiga qarang, ga teging.
U erda biz boramiz.
Endi bu erda bizda belgi bo'ladi va belgidan keyin biz sinf nomi kartasi miqdori bilan boshqa divga ega bo'lamiz.
Bu nuqta karta qara.
Mo.
Okay, bu kabi bir narsa.
U erda biz boramiz.
Va endi bu erda biz nolni yozamiz.
Xo'sh, nega ular nolni yozdilar? Aslida sizga ko'rsataman.
Shunday qilib, agar siz faylni loyiha sifatida taqqoslasangiz, buni bu erda ko'rasizmi? Bu erda bizda raqam bor.
Bu 47.
Dastlab, nol bo'ladi.
Shuning uchun nolni yozdim.
Va belgi uchun belgini qayerdan olaman? Icons dot get nomli veb-saytdan foydalanaman bootstrap.com.
Xo'sh, agar siz bu erga kelsangiz, yuqoriga o'girsangiz, bu erda bir tonna piktogramma topasiz.
Shunday qilib, bizning loyihamiz uchun biz bu yerga boramiz savat bu kabi.
Va endi siz pastga aylantirsangiz, juda ko'p variantlarni topasiz.
Buni bu erda ko'rasizmi? Bizda juda ko'p variantlar mavjud.
Keling, ulardan birini tanlaylik.
Ammo ulardan birini tanlashdan oldin, pastga aylantiring.
Va siz CDN-ni topasiz.
Men bu erda CDN ko'rish mumkin,faqat CDN nusxa.
Xo'sh, endi bizning indeksimizga qaytaylik html, va keyin siz uni faqat ichiga joylashtirasiz fara bu buni saqlang.
Endi biz piktogramma uchun CDN-dan bemalol foydalanishimiz mumkin, keling yuqoriga o'tamiz.
Shunday qilib, men bilmayman foydalanish uchun ketyapman,lekin meni faqat bu bir terishga ruxsat.
Yoki buni tanlaylik.
Yaxshi.
Endi siz pastga aylantirasiz va ushbu belgi shriftini topasiz.
Faqat narsani nusxalash.
VS kodimizga qaytaylik.
Va endi siz buni ko'ryapsizmi? Arava miqdoridan oldin? Bu, mayli, shunchaki narsani bu erga qo'ying.
Uni saqlang.
Natijada qaraylik.
Xop, bas, siz meni faqat bir oz kattalashtirish qilaylik qilgan.
Buni bu erda ko'rasizmi?
Bu brend logotipi nomi.
Bu bizning xarid qilish savatimiz belgisi.
Va bu bizning nolimiz.
Yaxshi, shuning uchun endi biz bu narsaga uslub beramiz.
Va rang uchun, fon rangi uchun bolalar.
Ushbu quyuq fon rangini ko'rasizmi? Ular rangni qayerdan olishdi? Sizga ko'rsataman.
Uni oldim coolers.co.
Bu erda bitta coolers.co.
Bu yerdan oldim.
Xo'sh, bu kabi trend palitralarini o'rganish uchun kelgan narsangizdan qanday foydalanasiz.
Xop, up keyingi, men faqat siz qo'ng'iroq qilish istayman va keyin men faqat bu kabi qora oldi.
Agar siz pastga aylantirsangiz, men ushbu rangdan foydalanadigan tonna rang palitralarini topasiz, buni bu erda birdan beshdan to'qqizgacha ko'raman.
Shunday qilib, men buni nusxa ko'chiraman.
Va keyin VS kodimizga qaytaylik.
Bolalar, biz navbar komponentimiz uchun HTML belgisini yozishni tugatdik.
Xop, bas, faqat sinf nomini yuqoriga nusxa.
Va keling, uslubimizga qaytaylik css va bu erda pastki qismida siz shunchaki yozasiz dot jingalak rec bilan duch keldi.
Xo'sh, nega u nuqta yozdi? Agar HTML-ga qaytib kelsangiz, buni bu erda ko'rasizmi? Bu sinf, maylimi? Agar narsa sinf bo'lsa, unda siz borasiz nuqta yozing.
Lekin bu misol sifatida ID ekan, meni faqat ID yozish qilaylik.
Xop, nav bar.
Shunday qilib, agar narsa shunga o'xshash identifikator bo'lsa, unda siz hashtag hashtag nav barini, keyin jingalak qavsni yozib, narsani tanlashingiz kerak.
Shunday qilib, CSS-dagi ID va sinfni tanlash o'rtasidagi farqni tushundingiz deb umid qilaman.
Mayli, buni olib tashlaymiz.
O'zimizga qaytib kelaylik.
CSS bu bir olib tashlash.
Shunday qilib, biz nuqta navbarini saqlaymiz.
Yaxshi, keyingi safar biz fon rangini yozamiz.
Yaxshi, ushbu BGC yorlig'ini osongina yozing.
U erda biz boramiz.
Agar bu heshteg FFF ko'ryapsizmi.
Keling, uni olib tashlaymiz va nusxa ko'chirgan rangni joylashtiramiz.
Shunday qilib, men buni 212 qilaman.
OK, 529529 uni saqlang.
Natijada qaraylik.
Shunday qilib, agar biz bu erga qaytsak, hamma narsa qorong'i ekanligini ko'rasiz, biz hech narsani ko'ra olmaymiz.
Shunday qilib, biror narsani ko'rish uchun bu erga qaytib, shrift rangini o'zgartiraylik.
OK, shuning uchun buni qilish uchun siz shu erda rang, kechirasiz, rang, bu kabi.
Va keyin bu erda, oq.
Qilingan.
Keling, natijalarni ko'rib chiqaylik.
Ko'ryapsizmi, bizda hozirgacha natijalar bor.
Mayli, taxmin qilaylik, bu erga qaytib, to'ldirishni qo'llaymiz.
Yaxshi? Shunday qilib, p yorlig'i, shuning uchun siz bu erda 25 piksel va keyin 60 piksel.
Xo'sh, nima uchun ular bu erda ikkita qiymat berishadi? 25 pikselni tushuntirib beray, ko'ryapsizmi, bu yuqori va pastki uchun qiymat.
Va 60 piksel chap va o'ng uchun qiymatdir.
Shunday qilib, yuqori va pastki to'ldirish qancha bo'ladi 25 piksel va chap va o'ng to'ldirish bo'ladi 60 piksel.
Mayli, natijani sizga ko'rsataman.
Agar siz bu qiymatni ko'rish uchun bu erga qaytib kelsangiz, bu erda 60 piksel qancha, bu erda 25 piksel, bu erda 25 piksel va bu erda ham 60 piksel bo'ladi.
Shunday qilib, to'ldirishni qanday qo'llaganimni tushundingiz deb umid qilaman.
Yaxshi? Yaxshi, bolalar, bizning xarid qilish savatchasi belgisi bu kabi ko'rinadi.
Lekin biz bu kabi qarash istayman.
Buni bu erda ko'ra olasizmi? Shunday qilib, keling va bu narsani uslub qilaylik.
Xo'sh, shuning uchun VS kodimizga qaytaylik, aytmoqchi, bolalar, shuningdek, sharhlar yozish uchun juda yaxshi narsa.
Shunday qilib, bizning kodimizga yaxshi sharhlar yozish uchun sizga yangi narsani ko'rsataman.
OK, siz faqat kengaytmalarga kelasiz.
Va bu erda yaxshi fikr.
Xop, yaxshi fikr, bu kabi.
Va endi siz buni topasiz Kanji bu erda Aaron Boone tomonidan yozilgan yaxshiroq sharh.
Buni bosing va keyin narsani o'rnating.
Shunday qilib, ushbu kengaytma yordamida sizga ajoyib xususiyatni ko'rsatishga ijozat bering.
Yaxshi.
Shunday qilib, siz shunchaki chiroyli, rang-barang sharhlar yozishingiz mumkin, sizga ko'rsataman.
Shunday qilib, agar siz to'g'ri, yulduz yulduzini kesib oling, kiring, yaxshi, yulduz va keyin yulduz yulduzini kesib oling, agar siz bu erga kelsangiz va agar siz shu erda undov belgisi bo'lsa, unda sizning sharhingiz endi qizil rang ekanligini ko'rishingiz mumkin.
Buni ko'ryapsizmi? Shunday qilib, men faqat gonna plaginini foydalanish qilyapman.
Men ham sizga bir xil plagin foydalanish tavsiya, Aaron ponte tomonidan yozilgan sahifalar comment deb ataladi qaysi.
Yaxshi.
Shunday qilib, biror narsani o'rnatganingizdan so'ng, siz bu erga kelib, uni sizga ko'rsatishga ruxsat berasiz.
Shunga qaramay, siz shunchaki shu erda ko'rasiz, yulduz yulduzini kesib tashlang, yaxshi, yulduzga kiring va keyin yana yulduz yulduzini kesib oling.
Yaxshi? Shunday qilib, agar siz undov belgisini ursangiz, bu qizil rangda bo'ladi.
Va agar siz bu kabi savol belgisini ursangiz, u ko'k rangda bo'ladi.
Buni ko'ra olasizmi? Shunday qilib, sizda juda ko'p variantlar mavjud.
Shunday qilib, men qizil rangdan foydalanaman, yaxshi, shunga o'xshash narsa.
Va keyin bu erda men brauzerning o'zgaruvchan standart uslublarini yozaman, maylimi? Bu kabi bir narsa.
Hammasi joyida.
Va endi men ushbu bo'limda pastga aylanaman, yana bir fikr bildiraman.
Shunday qilib, meni faqat nusxa qilaylik, u erdan bu narsa nusxa va keyin bu erda uni qo'yish.
Va keyin bu erda, men nav bar uslubi yozish uchun ketyapman, ser bu yerda, nav bar uslublar shu yerdamisiz, bu kabi bir narsa.
U erda biz boramiz.
Yaxshi.
Yaxshi, bolalar, bizning vazifamiz hozir xarid qilish vositasi belgisini raqam ko'rsatkichi bilan qilishdir.
Yaxshi, lekin natijalarimizga qarang.
Hozirgacha.
Bizda bu erda belgi va raqam bor, biz bu narsa juda o'ng tomonda bo'lishini xohlaymiz, buni qanday qilamiz? Biz Flexbox deb nomlangan mulkni foydalanib buni.
Xop, bas, uning bizning HTML qaytib boramiz, qaysi aslida bu erda Okay, shuning uchun bu erda qoida ekan, Flexbox yordamida juda birinchi qoida siz ota-selektor ichida Flexbox foydalanish kerak bo'ladi.
Bizning holatlarimizda bunga qarang.
Buni bu erda ko'ra olasizmi? Bu asosiy ota-ona, mayli.
Va bu bolalar bo'ladi.
Bu ham boshqa bolalar.
Xo'sh, sizda qancha bola bor? Siz bu ota-ona ichida ikki farzandi bor? Xo'sh, keling, buni CSS ichida maqsad qilaylik.
Bu erda allaqachon maqsadli.
Shunday qilib, faqat bu erga kelib D f yozish, tab.
Xop, Flex ko'rsatish.
Keyingi yuqoriga.
Agar siz uni saqlasangiz, natijani ko'rishingiz mumkin.
Bunga qarang.
Buni bu erda ko'ra olasizmi? Ilgari, bu narsa bu erda edi, yaxshi, endi u o'ng tomonda.
Buning sababi shundaki, siz displey flex-ni yoqsangiz, Flex direction deb nomlangan standart xususiyat mavjud.
Yaxshi, shuning uchun ushbu xususiyatning standart qiymati satr deb ataladi.
Shuning uchun siz buni ko'rdingiz.
Yaxshi.
Buni ko'ra olasizmi? Lekin siz bu erga kelib, keyin siz bir ustun yozish bo'lsa, bu kabi, u hozir bu avvalgi xatti ekanligini ko'rish mumkin natijasida qarash saqlab, lekin biz u bo'lishi istayman, agar ketma-ket bir shaklda, okay? Bu hozirgacha natija.
Mayli, bolalar, men uni shu erda saqlayman.
Va men gonna kodi quyida emasman.
Yaxshi, justify content deb nomlangan yana bir xususiyat mavjud.
Yaxshi.
Shunday qilib, bu narsani va bu narsani bir-biridan ajratish uchun biz ushbu tarkibni oqlash xususiyatidan foydalanamiz.
Men bilan birga qiling, JC JC mazmunini oqlash uchun turadi.
SB yorliq orasidagi bo'shliqni anglatadi.
OK, uni saqlang.
U erda biz boramiz.
Buni ko'ra olasizmi.
Endi bu erda va bizning belgimiz o'ng tomonda.
Hozirgacha juda yaxshi.
Yaxshi.
Endi biz bu erda ikonka uslubini yaratamiz.
Shunday qilib, boshlaylik.
Avvalo, uning tuzilishini tekshirish uchun, Okay bizning HTML boramiz.
Bunga qarang.
Mayli, bolalar, bu bizning aravamiz.
Va bu aravaning ichida ikkita farzandimiz bor.
Yaxshi, bu belgi va bu savat miqdori, bu sizning savatingizda qancha narsa borligini ko'rsatadi.
Ayni paytda u nolga teng.
Yaxshi, shuning uchun biz buni uslub qilamiz.
Keling, buni nusxa ko'chiraylik.
Uslubi css va bu erda pastki qismidagi ustidan kel, nuqta pasta jingalak qavs.
Xo'sh, endi biz ushbu elementni uslub qilamiz.
Avvalo, fon rangini oq rangga o'rnatamiz.
Yaxshi, Vgc ga teging qilingan.
OK, va keyin biz rangni qora rangga o'rnatamiz.
Bu kabi bir narsa aslida qora emas nazar, agar biz sovutish bu rang foydalanish esingizda edi.
Dotco.
Biz bu rangdan foydalanamiz.
Xop, qilingan.
Xop, qilingan.
Endi bu narsani saqlaylik va keyin natijalarni ko'rib chiqaylik.
Xop, bas, bolalar, shuning uchun uzoq, bu natijalar qarash, meni bir oz kattalashtirish qilaylik, xop, agar yaxshi ko'rishingiz mumkin, shunday qilib,.
U erda biz boramiz.
Endi tinglang, bolalar, biz qiladigan keyingi narsa-shrift hajmini kattalashtiramiz, shunda u kattaroq ko'rinadi, hatto bunday kattalashtirmasdan ham.
Va keyin biz to'ldirish va chegara radiusini qo'llaymiz.
Boraylik.
Shunday qilib, keling, VS kodimizga qaytaylik, mayli, keyin besh pikselli plomba beraylik, mayli, v besh piksel, teging, bajarildi.
Xop, va keyin shrift hajmini oshirish 30 piksel, shrift minus hajmi, qancha 30 piksel amalga.
Natijada qaraylik.
Mayli, biz boramiz.
Bu katta bo'ldi.
Meni faqat bu kabi kichraytirish bo'lsin.
100% gacha.
U erda biz boramiz.
Bu ancha yaxshi ko'rinadi.
Xo'sh, endi biz bu burchaklarni suvli qilishimiz uchun chegara radiusini ham qo'llaymiz.
Biz bu burchaklarni yumaloq qilishni xohlaymiz.
Xop, ning ha ba'zi chegara amal qilaylik.
Bu kabi.
Qarang.
Chegara radiusi, chegara minus radiusi.
Xo'sh, piksel uchun qancha? U erda biz boramiz.
Uni saqlang.
Natijada qaraylik.
Ha, biz boramiz.
Bizda hozirgacha bu natija bor.
Yaxshi, bolalar, bu nolni bu erda ko'ryapsizmi? Men bu erda bu osilib istayman.
Xuddi bizning finalchilar loyihamiz kabi.
Bunga qarang.
Agar bu ko'rish mumkin 47 bu yerda, bu aslida yuqori o'ng burchagida osilib etiladi.
Yaxshi, biz ushbu elementda ham xuddi shu uslublarni qilamiz.
OK, shuning uchun boshlaylik.
Shunday qilib, birinchi navbatda, bizning indeksimizga qaytaylik html.
Yaxshi.
Va keyin biz bu elementni maqsad qilishimiz kerak.
Ushbu arava miqdorini bu erda ko'rasizmi? Xo'sh, bu nima, bu sinf.
Shunday qilib, biz bu narsani nusxa ko'chiramiz, chunki bu sinf.
Shunday qilib, siz pastga siljiysiz va keyin bu erga borasiz nuqta pastasi, yaxshi, jingalak qavs, oh, kechirasiz, jingalak qavs.
Va biz qiladigan birinchi narsa-shrift hajmini, yaxshi, shrift minus hajmini oshiramiz.
Yana bir bor, shrift hajmi, biz uni qancha 16 pikselga o'rnatamiz.
Siz shu kabi har qanday qiymatini foydalanishingiz mumkin, lekin men uni qo'yish uchun ketyapman 16 piksel.
Keyin fon rangini qizil, yaxshi, BGC, tabga qo'ying, keyin siz shu yerdasiz, qizil, yaxshi va keyin rangni shu oq kabi oq rangga o'rnating.
Bu erda u okay bo'ladi, uni saqlab.
Keling, hozirgacha natijalarni ko'rib chiqaylik.
Mayli, biz boramiz.
Ko'ryapsizmi, bizda bu erda nol bor.
Biz faqat oq rangga egamiz va u qizil rangga ega.
Yaxshi, endi biz buni yuqori o'ng burchakka osib qo'yishimiz kerak.
Buning uchun biz buni amalga oshirish uchun position absolute deb nomlangan xususiyatdan foydalanamiz.
Shunday qilib, men bu erga kelib ketyapman va keyin men OK bizga abs emasman.
Yaxshi, yorliq.
Shunday qilib, pozitsiya mutlaq.
Natijada qaraylik.
Shunday qilib, biz bu natijalarni hozirgacha ko'ramiz.
Endi biz buni yuqori o'ng burchakka osib qo'yishimiz kerak.
Buning uchun, bu qarash.
Siz faqat o'ng yuqori, keyin bu erga qaytib kelib, okay, nol.
Va keyin siz shu yerdasiz, to'g'rimi? Oh, kechirasiz, meros shuningdek nol bo'ladi vaznsiz logo natija aytish emas.
Okay, endi siz g'alati narsa farq mumkin, agar bu yerda, bu nol ko'rish mumkin juda yuqori o'ng burchagida emas.
Buning asosiy sababi, bu pozitsiyani mutlaq Hmm qo'llasangiz.
Odatiy bo'lib, sukut bo'yicha, bu organ mulkka ega bo'ladi qo'ng'iroq ushbu pozitsiyaga qarash nisbiy, shunga o'xshash narsa.
Bu kabi muomala nima uchun o'sha.
Lekin biz bu narsa o'zini shunday tutishini xohlamaymiz.
Biz nol aynan shu erda bo'lishini xohlagan joyda bo'lishini xohlaymiz.
Mayli, xuddi bizning bu loyihamiz kabi, xuddi yakunlangan loyiha kabi.
Bu hal qilish maqsadida, bu qarash, agar faqat mulk joy nisbiy versus bir VS kodi qaytib kelib,agar faqat uni kesib.
Yaxshi.
Endi pastga aylantiring.
Ushbu kartani bu erda ko'rasizmi? Siz uni shunchaki bu ko'rinishga joylashtirasiz.
OK, endi uni saqlang.
Natijada qaraylik.
Bu erda u? U erda biz boramiz.
Ko'ryapsizmi, endi u juda yaxshi ishlaydi.
Shunday qilib, bolalar, umid qilamanki, siz pozitsiya nisbiy va pozitsiyaning mutlaq xususiyatlari qanday ishlashini tushundingiz.
Agar siz buni qabul qilmasangiz, tashvishlanmang, menda butun videoni ko'rishingiz mumkin bu erda.
Misollar bilan CSS joy mulkni bilish, siz faqat u faqat deyarli 60 daqiqa uzoq, bu videoni ko'rishingiz mumkin.
Yaxshi? Yaxshi bolalar, endi bu komponentga qarang.
Yaxshi, bu nol aslida ichkarida.
Biz bir vaqtning o'zida biroz tashqarida bo'lishini xohlaymiz, biz chegara radiusi va to'ldirishni ham qo'llaymiz.
Shunday qilib, boshlaylik.
Mayli, mayli, yigitlar.
Keling, VS kodimizga qaytaylik va men uni biroz kichikroq qilaman.
Yaxshi.
Va keyin men uni bu erda saqlayman.
Men bu erda barcha uslublarni aravada qilaman, MO.
Yaxshi.
Xo'sh, bolalar, men nima istayman, men nolni biroz yuqoriga, keyin esa o'ng tomonda bo'lishini xohlayman, buning uchun men bu erga yuqori mulkka kelaman, nolni olib tashlayman va keyin to'g'ri minus 15 piksel, shunga o'xshash, uni saqlang, keyin siz nol bir oz yuqoriga ketadi ko'rish mumkin.
Yaxshi? Xuddi shu tarzda, agar siz bu kabi ijobiy qiymatni qo'ysangiz, uni saqlang, keyin men nol pastga tushishini ko'raman.
OK, shuning uchun men bu narsa salbiy tasdiqlanganligini istayman, uni saqlang.
Endi siz bir vaqtning o'zida nol paydo bo'lishini ko'rishingiz mumkin.
Bu to'g'ri.
Yaxshi, men buni minus 10 pikselga moslashtiraman.
Keling, uni o'sha erda saqlaylik.
Natijaga qarang.
U erda biz boramiz.
Buni ko'ra olasizmi? Endi u o'ng tomonga siljiydi.
Keyingi yigitlar.
Keling, chegara radiusi va to'ldirishni ham qo'llaylik.
Shunday qilib, p uch px ga teging.
Ok.
Endi bolalar, nol komponenti bir vaqtning o'zida biroz kattalashganini ko'rishingiz mumkin.
Ha, chegarani qo'llayman.
Yaxshi.
Chegara kechirasiz, chegara radiusi, qancha uch piksel.
OK, uni saqlang.
U erda biz boramiz, natijalarimiz bor.
Hozircha, bolalar, keling, buni yakunlangan loyihamiz bilan solishtiraylik.
Bu qara, okay u butunlay bir xil ekanligini ko'rish mumkin.
Yaxshi bolalar, biz navbar komponentimizni muvaffaqiyatli qurdik.
Endi biz qurmoqchi bo'lgan keyingi narsa bu kartalar.
Ushbu kartalarni bu erda ko'ra olasizmi, biz ushbu kartalarni rasmimiz, sarlavhamiz, tavsifimiz, narximiz va ushbu tugmachalarni saqlash uchun quramiz, bu bizga miqdorni oshirishga va miqdorni kamaytirishga yordam beradi.
Shunday qilib, boshlaylik.
Okay, bolalar, agar kabi bir savol bo'lishi mumkin, men bu erda bu karta tartibi qilish qanday juda oddiy.
Men CSS Grid mulkni foydalanish, keyin men bir xil narsa ko'paytirish uchun, okay, bu erda to'rt ustunlar qildi.
Biz hozir nima qilamiz, biz div qilamiz va keyin barcha kartalarni u erga joylashtiramiz.
Sizga bu ishni qanday qilganimni ko'rsataman.
Shunday qilib, siz HTML ichidagi VS kodingizga qaytasiz, yaxshi.
Agar bu nav satrini ko'ryapsizmi, u to'liq bo'ldi, biz yo'l qanday uni yo'l gonna odamsiz, bu erda sichqoncha qo'yish.
Yaxshi, keyin siz bu erda kichik Chevronni ko'rasiz, shunchaki ustiga bosing.
Va u erda siz kodi buklangan, deb ko'rish mumkin.
Mukammal.
Endi tinglang, biz shunday sinf nomi do'koni bilan div qilamiz loop.sh Opie bir vaqtning o'zida biz uning identifikatorini ham beramiz.
Hashtag shop tab.
Sinfni ham, identifikatorni ham qo'yishning asosiy sababi shundaki, biz buni CSS ichida maqsad qilib qo'yamiz va biz ushbu identifikatorni JavaScript ichida maqsad qilib qo'yamiz.
OK, hozirgacha.
Shunday qilib, hozirgacha juda yaxshi yigitlar.
Narsani saqlang.
Endi tinglang, bu erda.
Bir soniya.
Keling, faqat yaxshi, kamroq loyihani ko'rib chiqaylik.
Yaxshi.
Bu erda qayerda.
Xo'sh, bolalar, bu erda qancha kartani ko'rishingiz mumkin? 1234.
O'ng.
Endi bu qarash.
Keling, bu erga qaytib kelaylik.
Va keyin sinf nomlari bilan to'rtta div qilaylik.
Element.
Bu nuqta element qara, tab uchun yulduz.
U erda biz boramiz.
Xo'sh, endi u erga qaytib boraylik.
Va ko'raylik, bizda nima bor? Avvalo, bizda tasvir bor.
Va keyin siz ushbu kartadagi barcha ma'lumotlarni ko'rasizmi, biz faqat bitta div qilamiz va biz barcha yangi ma'lumotlarni u erga joylashtiramiz.
Shunday qilib, men ushbu rasmni nomlayman va bu tafsilotlar deb nomlanadi.
Xo'sh, sizga bu ishni qanday qilishni ko'rsataman.
Hozircha men bu uchtasiga tegmayman, faqat shu bilan ishlayman.
Mayli, birinchi navbatda, faqat bitta divni mukammal qilaylik.
Yaxshi, va keyin siz shunchaki narsalarni yopishtirish orqali boshqa narsalarni mukammal qilishingiz mumkin.
Bu bilan nimani nazarda tutayotganimni sizga ko'rsataman.
Okay, guys, bu erda ichida, men img yorlig'ini yozish uchun ketyapman.
Xop, bu mening tasvirni o'tkazadi.
Yo'q, to'g'ri, yaxshi, shunchaki kursorni manba ichiga qo'ying va keyin boshqaruv maydonini bosing, siz ushbu rasmlarni ko'rasiz, kiriting.
Va keyin biz birinchi raqamli rasmni tanlaymiz, mayli, narsani saqlang.
Natijada qaraylik.
Yaxshi? Mayli, bolalar, agar natijaga qarasangiz, tasvir juda katta ekanligini ko'rishingiz mumkin.
Yaxshi, biz bu rasm bilan ishlay olmaymiz.
U kichik qilish uchun, faqat men bilan birga kuzatib, xop, faqat indeks html bu yerda ustidan kelib, xop, bu erda bu tasvir, faqat bu erda Okay bilan, double iqtibos teng, faqat qo'yish 200 Okay, bu kabi.
Piksellarni qo'ymang, faqat 200, chunki u yaxshi, u hali ham piksel kabi ishlaydi.
Xavotir olmang, faqat bir narsani ayting.
Natijada qaraylik.
Ko'ryapsizmi, tasvir kichikroq bo'ladi.
Mukammal.
Keyin biz tafsilotlarni tortib olamiz.
Agar bu ma'lumotlarni ko'rishingiz mumkin bu yerga.
Keling, HTML-ga va rasm ostiga kelib, ushbu tafsilotlarni qo'yamiz.
Biz sinf nomi dot batafsil bilan yana bir div qilish uchun harakat qilyapmiz.
Ushbu nuqta tafsilotlariga qarang.
Tab.
U erda biz boramiz.
Ko'ryapsizmi, mayli, bolalar, bu tafsilotlar ichida bizda sarlavha yorlig'i, tavsifi bo'ladi, sizga nima bo'lishini ko'rsataman.
Avvalo, biz sarlavha yorlig'i, tavsif, narx va tugmachalarga ega bo'lamiz.
Mayli, keling, bu narsalarni qilaylik.
Keling, bu erga va bu erga kelamiz.
Bu erda siz h3 Tap yozasiz.
Mayli, biz bu kabi tasodifiy ko'ylakni uramiz.
U erda biz boramiz.
Endi buning ostida biz p yorlig'i, yaxshi, P yorlig'ini yaratamiz, keyin siz Lorem, seven deb yozasiz yoki shunchaki o'zingiz yoqtirgan so'zni belgilashingiz mumkin.
OK, keyin siz bu kabi yorliqni urasiz.
U erda biz boramiz.
Xo'sh, endi, bolalar, buning ostida biz ikkita narsani birlashtiramiz.
Mayli, sizga bir narsani, bir soniyani ko'rsataman.
Shunday qilib, bu narx va tugmalar, bizda bitta div bo'ladi va bu div ichida biz narx va tugmachalarga ega bo'lamiz.
Bu bilan nimani nazarda tutayotganimni sizga ko'rsataman.
Yaxshi, shuning uchun siz shunchaki bu erga va p yorlig'i ostiga kelasiz, bunga qarang.
Biz bu erga boramiz, nuqta narxi minus miqdori, maylimi? Bu kabi bir narsa.
U erda biz boramiz.
Endi, bu erda, ushbu h2 yorlig'iga qarang.
Bu erda, biz narx Okay bor fiz, dollar belgisi.
45.
OK, uni saqlang.
Natijada qaraylik.
Shunday qilib, siz bu erda $45 ni ko'rasiz, endi tugmalarni tinglayapsizmi? Shunday qilib, tugmachalarni yaratish uchun bunga qarang, narxdan pastda, bolalar, siz tugmalar klasteri bilan shartnoma tuzasiz.
[e-mail] tt o NS ga teging.
Xo'sh, endi bolalar, bu erda biz Bootstrap piktogrammalaridan foydalanamiz.
Bootstrap piktogrammalaridan foydalanish uchun.
Siz shunchaki bu erga kelasiz va keyin siz shu erda bo'lasiz belgilar nuqta oling bootstrap.com OK, bu veb-sayt, shuning uchun bolalar, biz ushbu veb-saytdan piktogrammalardan foydalanamiz.
Xo'sh, endi biz pastga aylantiramiz, siz bu erda kichik qidiruv satrini ko'rasiz.
Faqat bu erga keling va keyin to'g'ri ortiqcha, mayli, endi biz pastga aylantirsak, unda siz buni ko'rasiz va siz ko'radigan yana bir narsa ortiqcha LG, bu katta o'lchamdir.
Xop, agar CDN linkni o'z ichiga bermadi, agar bolalar eb, faqat bu linkni nusxa, xop, keyin bosh Teg ichida HTML ustidan kelib, xop, faqat bu erga kelib.
Va agar siz uni ilgari yopishtirmagan bo'lsangiz, shunchaki shunga o'xshash narsani joylashtiring.
Okay, va keyin u amalga saqlab.
Endi biz loyihamizda Bootstrap piktogrammalaridan bemalol foydalanishimiz mumkin.
Xo'sh, keling, bu erga qaytib kelaylik va katta bilan, siz buni bu erda ko'rasiz, men uni yangi yorliqda ochaman, keyin esa bu narsani nusxalayman.
Xo'sh, keling, VS kodimizga qaytaylik, pastga aylantiring va bu erda tugmalar, bu erda.
Men bu kabi bir narsa to'lash uchun ketyapman, uni saqlab.
Mayli, orqaga qaytaylik.
Va endi men minus okay olish uchun ketyapman, bu M i N u s kabi, okay, endi siz gonna ikki dash kichik bir ko'rish qilyapmiz, men standart birida emasman, va bu katta biridir.
Yaxshi? Shunday qilib, men bu kabi bir olish uchun ketyapman.
Mayli, keling, narsani nusxa ko'chiraylik.
Orqaga qaytaylik.
U erda biz boramiz.
Endi, ortiqcha oldin men minus Okay qo'yish ketyapman, u erda biz borib.
Qilingan.
Endi, bolalar, bu ikki piktogramma orasida siz sinf nomi va miqdori bilan divga ega bo'lasiz.
Sizga nuqta u, n, t i t, y yorlig'ini ko'rsatishga ijozat bering.
Xo'sh, endi siz bu erda nol o'ynaysiz, yaxshi, bu ikki piktogramma orasiga nol qo'yish uchun sabab bo'lganmi? Asosiy sabab-bu qarash.
Bu ortiqcha belgi, to'g'rimi? Har safar plyusni bosganingizda, bu raqam bir vaqtning o'zida ko'payadi, agar siz foydalansangiz, demak, minusni bossangiz, bu raqam kamayadi.
Va sizga yakunlangan loyihadan namunani ko'rsatishga ijozat bering.
Mayli, bunga qarang.
Buni ko'ryapsizmi, bu ortiqcha belgisi bu erda miqdor va bu minus har safar bosganingizda, miqdor ortadi va u bu erda ko'rinadi.
Har safar buni bosganingizda, miqdor kamayadi va bu erda natijani ko'rsatadi.
Shunday qilib, bolalar, men nima uchun bu satrlarni yozganimni tushunganingizga umid qilaman.
Yaxshi.
Bu bilan Alright guys, bizning formatlash yakunlandi.
Keling, narsani saqlaylik va natijani ko'rib chiqaylik.
Yaxshi, endi bu natija.
Hozircha bu kabi ko'rinadi.
Lekin tashvishlanmang, bolalar, biz shunday ko'rinishi uchun uslub qo'shamiz.
OK, men foydalanmoqchi bo'lgan birinchi narsa-bu displey panjarasi.
Va keyin biz to'rtta ustun qilamiz.
Bu erda qancha ustunlar bor, men bilan hisoblang? 1234.
Mayli, keling va to'rtta ustun qilaylik.
Shunday qilib, buni amalga oshirish uchun, Agar siz Flexbox-dan foydalanmoqchi bo'lsangiz, bizning Flexbox-ni eslasangiz, buni ota-onaga qo'llashingiz kerak.
Bizning holatda, qarang, ota-ona kim, agar men buni shunday katlasam, bunga qarang.
Xop, barcha unsurlar ota-ona kim? Do'kon hozirda barcha narsalarning ota-onasi bo'lib, men do'kon ichidagi displey panjarasini qo'llayman, mayli, bu erda sinf, shunchaki narsani nusxalash.
Salom, keyin uslubingizga o'ting css, keyin pastga aylantiring.
Aytgancha, bolalar, men kichik xato qildim.
Buni bu erda ko'rasizmi? Shrift hajmini ikki marta yozdim.
Yaxshi.
Faqat bu yerdan birini olib tashlang.
Uni saqlash kabi.
Xop, endi men gonna pastga o'ting va bir fikr qilish qilyapman.
Yaxshi bolalar, kodlashdan oldin, birinchi navbatda bu erda sharh tinglash.
Yaxshi? Aytmoqchimanki, ba'zi ranglar bilan yaxshiroq sharh.
Okay, u faqat o'ng slash yulduz yulduz qilish uchun, kiriting.
Boshlash, yaxshi.
qizil rang uchun undov belgisi.
Yoki ko'k rang uchun savol belgisidan foydalanishingiz mumkin.
Men qizil rangdan foydalanaman.
Yaxshi.
undov belgisi keyin yulduz yulduz slash amalga.
Shunday qilib, bu erda siz fikr shop ma'lumotlar yozish gonna odamsiz.
Uslublar bu erda.
Xop, do'kon.
Mahsulot.
Uslublar bu erda.
U erda biz borib, John.
Yaxshi.
Endi men nuqta pasta urish uchun ketyapman, jingalak qavs.
Endi bu erda men birinchi qatorni ekran panjarasidan foydalanaman.
Bunga qarang.
BG ga teging.
OK, uni saqlang.
Qaraylik.
Natijada qaraylik.
Siz gonna ning ko'raylik har qanday o'zgarishlarni ko'rish yo'q, siz ko'rib, biz har qanday o'zgarishlar yo'q.
Endi biz bu o'zgarishlarni ko'rishimiz uchun unga ko'proq chiziqlar qo'shamiz.
Shunday qilib, bolalar bu erga va keyin o'ng GTC yorlig'iga kelishadi.
Mayli, endi bolalar, bir soniya.
Yakuniy mahsulotga qaytaylik.
Xo'sh, bu erda qancha ustunni to'g'ri ko'rishingiz mumkin? Va men ushbu ustunlarning har biri uchun 202 va uch piksel kenglikni belgilayman.
Aytmoqchimanki, ushbu kartalarning har biri.
Biz ham xuddi shunday qilamiz.
Bunga qarang.
Shunday qilib, siz bu erga kelasiz va keyin siz panjara shablonlari ustunlarini oldingiz.
Takrorlash.
Xo'sh, siz uchun qancha ustun kerak, to'rtta, vergul.
Shunday qilib, ushbu ustunlarning har biri kartada 223 piksel bo'lishi kerak.
Shunday qilib, siz uni ikki-uch marta yozasiz.
PX, qilingan.
Yaxshi? Narsani saqlang.
Va endi natijani ko'rib chiqaylik.
Xo'sh, agar siz bu erga kelsangiz, bu matnni ko'ra olasizmi? Biz hozir faqat tashqarida bu ichki odamsiz, okay? Bu erda ko'rinmas devor kabi.
Mayli, sizga bir soniya jonli ko'rsatay.
Shuning uchun men uni bu erda saqlayman.
Va endi bunga qarang.
Men bu kabi bir fikr qilish uchun ketyapman.
Men uni saqlab qolaman.
Hozir.
Ushbu matnni aslida tashqarida ko'ra olasizmi? Endi agar siz uni bu erga qo'ysangiz, hozir saqlang.
U erda biz boramiz.
Endi ko'rinmas devor bordek tuyuladi.
Aslida, bu makon bo'linadi.
Yaxshi.
Yaxshi bolalar, hozirgacha juda yaxshi.
Keyingi qadam biz nima qilmoqchimiz bu chegaradan foydalaning bu erda qora rang chegarasi.
Biz mashinamizdagi qora rang chegarasidan foydalanamiz.
Xop, bas, uning borib, bu Okay qilaylik, bas, endi uning indeks html qaytib kelsin.
Shunday qilib, biz do'konni sozlashni tugatdik.
Endi bu element bu erda faqat elementni nusxalash xop, shunga o'xshash.
Sizning uslubingizga qaytaylik css pastga va pastga o'ting do'kon Okay, nuqta pastasi.
Endi aniq yozib oling, siz bu erda chegara yozasiz.
px-ga chegara bir soniya px-ga qattiq.
Siz hashtagingizni yozasiz.
Sovutgichlardan foydalanadigan rangni eslaysizmi? Dotco.
Ushbu rangdan foydalaning.
Mayli, narsani saqlang.
Natijada qaraylik.
Hozir.
Bu narsani ko'ra olasizmi? Bu erda to'rtta kartamiz bor, yaxshi, karta raqami 1234.
Okay, ular ma'lumotlarni yo'q bo'lsa-da,, lekin hali ham ular bu erda ko'rsatib-ku.
Buning asosiy sababi, agar siz HTML-da bu erga kelsangiz, bu erda necha kun borligini ko'ryapsizmi? To'rt kun.
Shuning uchun bu erda to'rtta karta paydo bo'ldi.
Yaxshi, shuning uchun agar siz bu erdan biror narsani olib tashlasangiz, narsani saqlang.
Endi bunga qarang.
Ko'ryapsizmi, kartalar ketdi.
Lekin xavotir olmang, bolalar, biz ko'proq kartalar ishlab chiqaramiz.
Mayli, birinchi navbatda, faqat bitta kartani mukammal qilaylik.
Va keyin, biz faqat boshqa kartalari joylashtirish nusxa ko'chirish mumkin.
Xavotir olmang, bolalar.
Yaxshi, bolalar.
Agar tasvirni ko'rish mumkin, bu arava chegarasiga nisbatan kichik ko'rinadi.
Xo'sh, buni tuzataylik.
Buni tuzatish uchun faqat indeks html-ga o'ting.
Va keyin siz elementni ochasiz.
Bu kenglikni bu erda ko'rasizmi? Faqat kam bo'lsa 220 bu kabi pixel,uni saqlab.
Endi natijani ko'rib chiqamiz.
U erda biz boramiz.
Bu mukammal ko'rinadi.
Endi kinases qirralarning, u o'tkir ko'rinadi.
Biz chegara radiusi qilish uchun harakat qilyapmiz.
Yaxshi.
Shunday qilib, sizning uslubingiz css-ga qaytib keladigan marshrutimizda va biz bu erga boramiz, chegara radiusi to'rt piksel.
OK, chegara buni qiladi okay chegara Ha, to'rt piksel.
Narsani saqlang.
Natijada qaraylik.
U erda biz boramiz.
Ko'ryapsizmi, endi u yumaloq.
Bizning mehmonlar bu qarash.
Agar bu nav satrini va bu mashina ko'rish mumkin? Ularda yo'q ular orasida bo'shliq yo'q.
Ning ba'zi bo'shliqni qo'yish qilaylik.
Yaxshi.
Ning sizning uslubi css qaytib kelsin va bu nav bar emas, faqat shu erda.
MB ga teging va keyin 30 pikselli oyoqlar.
Mayli, narsani saqlang.
U erda biz boramiz.
Qilingan.
Yaxshi.
Endi, bolalar, biz yana uchta kartani ishlab chiqaramiz, shunda u shunday ko'rinadi.
Yaxshi, shuning uchun indeksingizga qaytaylik html bu yerga.
Endi chevronni shunday yoping, narsani nusxa oling va keyin uni shu erga qo'ying, keyin Chevronni yopasiz, keyin yana ikki marta xuddi shunday qiling, mayli, shunday.
Yaxshi, keyin narsani saqlang.
Natijani yuklaymiz.
Yaxshi.
Endi bu yigitlarga qarang, tafsilotlar mukammal ko'rinmaydi, lekin tashvishlanmang, biz ularga uslub beramiz.
Yaxshi.
Hozir, qancha kartalari? Biz to'rt karta bormi, ular orasida hech qanday farq bor.
Va bu markazda emas, xuddi shu kabi.
Bu narsalarni qilish uchun.
Nima, biz, albatta, harakat qilyapmiz, biz do'konga bizning uslubi css qaytib borish uchun harakat qilyapmiz emas.
Do'kon qayerda? Bu erda? Bu okay emasmi? Bu qisqa, biz bo'shliqni yozamiz 30 piksel oyoqlari qarang, ha, 30 piksel, bir narsani ayting, u erda biz barcha kartalar orasida bo'shliq borligini ko'rishimiz mumkin.
Shu bilan birga, biz ularni aniq markazda bo'lishini xohlaymiz.
Tartibda.
Buni amalga oshirish uchun bu erga qaytib keling va shunchaki yozing, u erda justify content, JC deb nomlangan xususiyat mavjud va biz bu narsa to'g'ri yuborilishini xohlaymiz.
Shunday qilib, to'g'ri JCC, ga teging bajarildi.
Uni saqlang.
U erda biz boramiz.
Shunday qilib, biz aniq markazida barcha kartalari bor.
Ajoyib.
Mayli, yigitlar.
Endi bu narsani yakuniy loyihamiz bilan taqqoslaylik.
Bunga qarang.
Buni bu erda ko'ra olasizmi? Bizda bu erda bir oz to'ldirish bor.
Buni bu erda ko'ra olasizmi? Lekin bizning loyihamizda plomba yo'q.
Xo'sh, shu bilan birga, bu bo'shliqni bu erda ko'ryapsizmi? Ha, ularda bo'shliq bor.
Ammo bizda sarlavha yorlig'i va paragraf yorlig'i o'rtasida bir vaqtning o'zida bo'shliq yo'q, bu narx ham.
Keling, bu o'zgarishlarni qilaylik.
Shunday qilib, o'zgarishlarni amalga oshirish uchun uslubingizga qayting css, va keyin faqat bizning indeksimizga qayting html.
Yaxshi.
Ulardan birini oching.
Birinchisini ochaman.
Yaxshi.
Endi bu tafsilotlarni bu erda ko'rasizmi? Tafsilotlarni nusxalash.
Hmm.
Pastki qismida uslubingiz css-ga qayting.
Yaxshi.
Dot pasta yozish, jingalak qavs.
Yaxshi, biz qiladigan birinchi narsa-biz flex yorlig'ini to'g'ri namoyish qilamiz.
U erda biz boramiz.
Narsani ayting.
Endi buni bu erda ko'ra olasizmi? Bu g'alati ko'rinadi.
Bu qatorga bir shaklda kabi ko'rinadi.
Buni ko'ra olasizmi? Lekin biz buni xohlamaymiz.
Chunki yakunlangan loyihaga qarang.
Bu ustun shaklida bo'ladi.
Buni ko'ra olasizmi? Lekin u aslida satr.
Xo'sh, buni tuzatish uchun, aytmoqchimanki, nima uchun bu sodir bo'ladi? Buning sababi shundaki, Flex direction deb nomlangan xususiyat mavjud.
Yana bir bor, flex minus yo'nalishi, okay, bu bir standart qiymati satr, siz bu refleks yozish har safar, bu narsa avtomatik ravishda tetiklenir oladi.
Yaxshi? Buni to'xtatish uchun displey, flex yo'nalishini yozing va keyin uni shunday ustunga o'rnating.
Mayli, narsani saqlang.
U erda biz boramiz.
Mukammal.
Endi, bolalar, keyingi safar, keling, to'ldirishni qo'llaylik.
Mayli, 10 piksel bo'ling, bajarildi ga teging.
U erda biz boramiz.
Ko'ryapsizmi, bu avvalgidan ancha yaxshi ko'rinadi.
Va endi siz bu Teg tavsifi va narxi foydalanadi ko'rish mumkin.
Ularning orasidagi bo'shliqni qo'yish uchun ularning orasiga bo'shliqni qo'yamiz.
Faqat bu erga kelib, keyin o'ng siyosiy farq mulk bor.
Xop, gap 10.
Pixel xavfsiz.
U erda biz boramiz.
Ko'ryapsizmi, endi bizda bo'shliq bor.
Yaxshi yigitlar.
Endi bu narsani yakuniy loyihamiz bilan taqqoslaylik.
U erda biz boramiz.
Ko'ryapsizmi, narx bu erda.
Va barcha tugmalar bu erda.
Lekin bizning birimizga qarang.
Bu mukammal emas, huh? Keling, buni tuzataylik.
Buni tuzatish uchun.
HTML-ga qaytaylik.
Yaxshi.
Endi narx va tugmalar qayerda? Bunga qarang.
Bu erda mening Tugmalarim.
Va bu mening narxim.
Ota-ona kim? Xop, bu yerda siz uchun bir savol.
Ushbu narx yorlig'i va bu tugmachalarning ota-onasi kim.
Bu juda oson bolalar.
Bu narx miqdorini ko'rish mumkin.
Bu ikkala tegning ota-onasi.
Okay, bas, endi, men, albatta, ketyapman, nima, men bu kabi bu narsa nusxa uchun ketyapman, deb bizga pastki qismidagi bizning uslubi css qaytib kelsin, okay, nuqta pasta, jingalak qavs.
Yaxshi.
Yaxshi bolalar, bu erda amalga oshirilgandan so'ng, biz ushbu DF yorlig'iga qarashni yozamiz.
Yaxshi? Agar siz hozir narsani saqlasangiz, tugma aslida shu erda edi, endi u qator formati kabi ishlaydi.
Xo'sh, nima uchun bu sodir bo'ldi? Agar eslasangiz, men Flex direction deb nomlangan xususiyat borligini aytaman.
Va siz bu bir yozish har safar, standart mulk bu ko'rinish kabi flex yo'nalishi satr narsa bo'ladi, flex bir ikkinchi flex yo'nalishi satr, okay, bu allaqachon standart xususiyat, chunki siz hech qanday o'zgarishlar ko'rasiz kerak bo'ladi narsani aytish.
Agar bu kabi faqat o'ng ustunini o'zgartirish bo'lsangiz lekin, uni saqlab, agar gonna turli natijalarini ko'rish qilyapmiz.
Xo'sh, shuning uchun ushbu qo'llanma uchun men ishlataman qator bu kabi biz boradigan narsani ayting.
Xop, bolalar, up keyingi, men ularni bir-biridan bo'lish istayman.
Okay, buning uchun, faqat bu erga kelib, keyin o'ng JC SB ga teging, okay, o'rtasida kontent oraliq oqlash, narsani aytish.
U erda biz boramiz.
Bizda hozirgacha natijalar bor.
Hammasi joyida.
Endi, bolalar, biz bu piktogrammalarni uslublaymiz.
Buning uchun.
HTML-ga qaytib kelaylik.
Xo'sh, ushbu tugmalarni bu erda ko'ra olasizmi? Ha, bu hozir asosiy ota-ona.
Va bularning barchasi bolalar yaxshimi? Qancha bolalar bu tugmachaning uchta farzandi bor.
Xo'sh, endi buni nusxalaymiz.
Bu erga qaytib kelaylik.
Va endi pastga aylantiring.
Nuqta pastasi.
Yaxshi, jingalak qavs.
Endi bolalar, agar men displey flex-dan foydalanishni taxmin qilsangiz, siz haqsiz.
Displey flex-dan foydalanaman.
Endi bu qarash.
Qaysi formatda u ustun formatida? Xop, biz ularni faqat bu kabi bir qatorga bo'lish istayman.
Bunga qarang.
Bu qator formati.
Yaxshi? Buni amalga oshirish uchun bu erga qaytib, keyin yozing df yorlig'i.
Xo'sh, bu erda flex yo'nalishining standart xususiyati nima? Qator? Mayli, narsani saqlang.
U erda biz boramiz.
Siz qarang.
Endi siz Ekranni yozmasangiz ham, kechirasiz, bu erda flex yo'nalishi.
Muammo yo'q.
Yaxshi.
Agar xohlasangiz, bu erda hech qanday muammo bo'lmaydi.
Yaxshi.
Shunday qilib, to'g'ri, bu erda, bu kabi flex yo'nalishi qilaylik.
Uni qatorga qo'ying.
Mayli, biz boramiz.
Qilingan.
Hozir, bolalar,biz bu erda faqat gap ba'zi bo'shliqni qo'yish maqsadida teshikka bir oz kerak.
sakkiz piksel.
Mayli, narsani saqlang.
U erda biz boramiz.
Biz ba'zi bo'shliqni bor.
Yaxshi.
Endi, agar siz shrift hajmini ixtiyoriy ravishda o'rnatmoqchi bo'lsangiz, buni ham qilishingiz mumkin.
Shunday qilib, bu kabi shrift hajmi aytaylik, ning 16 piksel aytaylik.
Mayli, u erda biz narsani saqlab qolamiz.
OK, siz hech qanday o'zgarishlarni ko'rmaysiz, chunki bolalar, bu allaqachon allaqachon standart.
Yaxshi? Agar siz bu erda aytaylik, bu kabi 26 piksel, bu narsa kattaroq bo'ladi, ko'rasiz, lekin bu qo'llanma uchun men uni kattaroq qilishni istasangiz, oltita katta 16 piksel ko'rinishini saqlayman.
Omad eng yaxshi.
Xo'sh, endi bolalar, bu ortiqcha va minusni ko'ra olasizmi? Agar siz Finalize loyihasi ichida bu narsani sezsangiz, bu yashil rang ekanligini ko'rishingiz mumkin.
Va bu qizil rang.
OK, shuning uchun xuddi shu narsani qilish uchun indeksingizga o'ting html, okay.
Agar bu b dash minus LG ko'ryapsizmi? Bu minus, yaxshi, bu narsani nusxalash.
Uslubingizga keling css va pastki qismida faqat nuqta qo'ying.
OK, bu erda minus to'g'ri jingalak qavs, keyin bu erda rang.
Yoki kechirasiz? Rang.
Keyin qizil rangingizni yozishingiz mumkin.
Xo'sh, narsaga qarang? U erda biz boramiz.
Endi sizning minus belgingiz endi qizil rangga ega.
Keling, uni yashil qilaylik.
Okay, narsa qilish uchun, bir xil jarayon, faqat HTML qaytib kelib, bu narsa nusxa.
Yaxshi.
Keling, uslubingizga qaytaylik css va pastki o'ng nuqta pastasi.
Yaxshi, jingalak qavs.
Endi siz rangingizni yozasiz.
Rang nima edi? Yashil? Yashil.
U erda biz boramiz.
Qilingan.
Mayli, natijani ko'rib chiqaylik.
Ajoyib.
Mayli, bolalar, xayoliy chiziq chizamiz.
Xo'sh, bu erda x o'qida, yaxshi, agar siz bu erda aniq markazda xayoliy chiziq chizsangiz, bunga qarang, shunda siz bu erda pastki ekanligini tushunishingiz va bu narxdan foydalanishingiz mumkin.
Ular aniq markazga mos kelmaydi.
Mayli, sizga namuna ko'rsataman.
Xo'sh, agar siz ushbu qatorni bu erda, narx miqdori selektori ichida ko'rsangiz, shunchaki bir narsani izohlang.
Mayli, narsani saqlang.
Hozir.
U erda biz boramiz.
Bu narsani bu erda ko'ra olasizmi? Ular aniq markazga mos kelmaydi.
Endi bu narsani hal qilish uchun tejash uchun.
Faqat bu erga kelib, keyin o'ng AIC ga teging.
Xop, align mahsulot markazi.
Bu narsa x o'qida, bu esa Y o'qida ishlaydi.
Mayli, narsani saqlang.
U erda biz boramiz.
Muammo hal qilindi.
Yaxshi.
Endi siz ushbu kodni shu kabi qaytarib olasiz.
Mayli, narsani saqlang.
U erda siz borib.
Mukammal.
Okay, guys, ning faylga qaytib kelsin va uning loyiha qilaylik va keyin o'ng okay, tekshiring bosing.
Agar siz narsalarni kichraytirsangiz, sizga ko'rsataman, agar siz bu narsani kichraytirsangiz, to'rtta nechta ustunni ko'rishingiz mumkin, to'g'rimi? Agar biz bu kabi kichik qilsak, u erga boramiz.
Endi u ikkita ustunga aylanadi.
Mayli, agar biz buni yanada rivojlantirsak, u shunday ustunga aylanadi.
U erda biz boramiz.
Endi bu sezgir veb-sayt deb ataladi.
Yaxshi.
Xuddi shu natijani takrorlash uchun biz nima qilmoqchi bo'lsak, uslubingizga qaytasiz css, yaxshi, bir soniya.
Do'kon qayerda? Okay, bu erda do'kon quyida bu do'kon, biz ikki media so'rovlarni qilish uchun harakat qilyapmiz.
Okay, bu qarash, qizil media qo'shing.
Va keyin siz bu erda maksimal minus vaznga ega bo'ldingiz, yaxshi.
Shunday qilib, biz bu erda birinchi chiqish nuqtasi 1000 piksel bo'ladi.
Yaxshi.
Keyin sizda qora rang bor.
Gadjetingizni o'tkir, jingalak raketka bilan oling, mayli, bu erda, shunchaki narsani nusxa ko'chiring.
Yaxshi? Bu erda narsani joylashtiring, maylimi? Endi nima istayman? On, ekran 1000 piksel xitlar on, men narsa qancha ustunlar, faqat ikki ustunlar, okay bo'lishini istayman? Faqat bu erda belgilash, tayyor.
Narsani saqlang.
Xop, endi bizning natijasida bu erga qaytib kelsin, o'ng tekshirish bosing, xop, endi bu kabi kichik qilaylik.
U erda biz boramiz.
Ayni paytda siz hozir kenglik nima? 1040.
Xop, on siz quyida urdi 1000 bu qarash.
Endi u to'rtta ustundan ikkita ustunga aylanadi.
Okay, endi biz media so'rovini belgilash bermadi, chunki u ham kichik ish qilmoqchi emas qilaylik.
Buni ham qilaylik.
Faqat butun narsani nusxa.
Yaxshi? Uni bu erga va bu erga joylashtiring, shunga o'xshash 500 pikselni ko'rsating.
Yaxshi? Va endi bu erda siz yozasiz.
Endi bolalar, narsani saqlang.
Natijada qaraylik.
Xop, quyida uni qilish 500 piksel, okay? Aytmoqchimanki, bu erga qarash orqali, mayli, shunga o'xshash narsa.
Mana, biz boramiz.
Bu juda yaxshi ishlaydi.
Yaxshi.
Yaxshi, bolalar.
Hozirgacha juda yaxshi.
Biz HTML va CSS-ni muvaffaqiyatli yakunladik, hozircha JavaScript qismini boshlaymiz.
Yaxshi.
Ammo bundan oldin, bolalar, bunga qarang.
Ushbu kartalarni bu erda ko'ra olasizmi? Ushbu kartalar turli xil ma'lumotlarga ega, rasmga qarang.
Yaxshi, ular boshqacha, garchi soliq boshqacha bo'lsa-da, narx ham boshqacha.
Xo'sh, bu kartalarni qanday qildim? Men buni qildim.
Bunga qarang.
Xo'sh, buni qanday qildik? Sinf nomi do'koni bilan bu div ichida, bu qara, biz faqat bir karta mukammal, va keyin, biz nusxa va keyin narsani joylashtirish.
Endi, agar siz ma'lumotlarni almashtirmoqchi bo'lsangiz, aytaylik, siz rasmni almashtirmoqchisiz, keyin bu tegni almashtirishingiz kerak.
Sizga namuna ko'rsataman.
Yaxshi.
Xo'sh, qanday qilib bu ko'rinishga o'xshash narsani almashtirasiz? Shunday qilib, birinchi navbatda, siz rasmni bu erdan olib tashlaysiz, so'ngra Ctrl bo'sh joy, siz ikkinchi rasmni tanlaysiz, keyin uni nima bilan almashtirasiz rasmiy ofis ko'ylagi.
Narsani saqlang.
Natijada qaraylik.
Va bir soniya kuting.
Meni faqat, shuningdek, bu bir aniq bo'lsin va o'ng ishlatish 100.
Mayli, narsani saqlang.
Natijaga qaraylik, yigitlar.
U erda biz boramiz.
Buni ko'ra olasizmi? Endi ma'lumotlar o'zgardi.
Endi sizda qancha karta bor? Agar bor? Qancha kartalari? Keling, kartalar uchun.
Aytaylik, bizda 100 ta karta bor? Bu siz hamma narsani qo'lda bajarishingizni anglatadimi? Yo'q, yigitlar, aniq yo'q, buni qilmang.
Shu bilan birga, bunga qarang.
Bu erda ma'lumotlar eng, formatlash eng faqat nusxa pasta bor, qaysi narsani eng o'ng, yana va yana va yana yana va yana o'zini takrorlab va yana va yana degan ma'noni anglatadi? Bu ishni qilmang, bolalar.
Bu erda narsalarni nusxa ko'chirmang va joylashtirmang.
Ushbu muammoni hal qilish uchun biz JavaScript-dan foydalanamiz.
Okay, Shuning uchun uning JavaScript yarataylik.
Yigitlar, siz ushbu satrni pastki qismida yozganingizga ishonch hosil qiling, mayli, aks holda JavaScript ishlamaydi.
Xo'sh, biz qiladigan birinchi narsa-bu identifikatorni nusxalashimiz bu erda ko'rasizmi? Shunday qilib, mening asosiy maqsad men bu ichki uslubi css maqsad emasman edi, va keyin men gonna bu ichki ID maqsad emasman.
Kechirasiz, JavaScript ichida.
Yaxshi.
Keling, buni nusxalaymiz.
Keling, barcha asosiy GS-ga qaytaylik.
Va aslida asosiy oyna ichidagi identifikatorni qanday yo'naltirasiz? Bunga qarang.
Avvalo, siz o'zgaruvchini yozasiz, maylimi? Bu erda biror narsa yozishingiz mumkin.
Shunday qilib, men gonna bu erda yozish qilyapman, bu kabi xarid qilaylik.
Qara, ning siz faqat hujjatni yozish uchun qo'ng'iroq xarid qilaylik.
Kechirasiz, hujjat.
Xo'sh, unda bu nima, bunga qarang, bu ID, to'g'rimi? Shunday qilib, siz bu erda yozasiz, identifikator bo'yicha nuqta oling, keyin siz qavsingizni, bitta taklif yoki ikkita taklifingizni yozasiz, yaxshi, keyin siz buni ko'rib chiqish uchun pul to'laysiz.
U erda biz boramiz.
Shunday qilib, endi biz do'konimizni muvaffaqiyatli nishonga oldik.
Va biz buni o'zgaruvchining ichida saqladik.
Yaxshi? Endi, agar siz narsani sinab ko'rmoqchi bo'lsangiz, narsa aslida qanday ishlaydi, shunchaki saqlang, mayli.
Va keyin pastki qismida, biz bu erda bor, konsol log, xop, konsol nuqta log, va keyin siz faqat do'kon yozish, kabi narsani saqlash.
Natijada qaraylik.
Xo'sh, endi bu natija, siz f 12-ni urdingiz yoki o'ng tugmasini bosing, tekshirish-ni bosing, yaxshi, endi siz ushbu konsolga borasiz, bu erda, buni ko'rasiz.
Shunday qilib, bu butun HTML elementi konsol ichiga kirdi.
Agar siz buni u erda ochsangiz, biz buni bu erda ko'rishimiz mumkin.
Endi, agar siz buni tanlasangiz, bu narsa ta'kidlanganligini ko'rishingiz mumkin.
Agar buni bu erda ko'rsangiz, narsa ta'kidlanadi.
Xo'sh, biz nima qildik, biz konsol ichidagi butun belgini oldik.
Mayli, biz buni qilishni xohlamadik.
Xo'sh, mening asosiy e'tiborim shundaki, men bu erda funktsiya qilaman, maylimi? Va keyin men u avtomatik ravishda menga barcha kartalari mudroq tarzda vazifasini qilish uchun ketyapman.
Yaxshi, buning uchun bu yigitga qarang.
Bu yigitga qarang.
Shunday qilib, men, albatta, ketyapman, nima, men, bu kabi bir vazifani qilish Shop okay ishlab do'kon ishlab ruxsat ketyapman emas.
OK, bu ESX xato funktsiyasi bo'ladi.
Shunday qilib, siz bu erda imzo qo'yishga teng bo'lasiz, bu sizning burchakli qavsga, jingalak qavsga teng qavsingiz bo'ladi, bu es oltita o'q funktsiyasi deb ataladi.
Va endi bolalar, sizga muntazam funktsiyani ko'rsataman.
Muntazam vazifalari, bu funktsiya kabi ko'rinadi, xop.
ABCD qavs jingalak qavs.
Bunga muntazam funktsiya deyiladi.
Bu es olti o'q funktsiyasi deb ataladi.
Mayli, biz bundan foydalanamiz.
Yaxshi bolalar, endi men bu narsani olib tashlayman.
Xo'sh, endi, bolalar, shuning uchun takrorlashni qanday to'xtatamiz? Aslida, avvalo men bilan birga ergashing siz bu narsalarni ko'ryapsizmi? Bu erda qancha narsa bor, to'rtta narsa bu erda, to'g'rimi? Keling, ulardan uchtasini bu kabi olib tashlaylik.
Keling, faqat bitta bo'lakni saqlaylik, mayli, keling, bu erga qaytib, ushbu funktsiyadan foydalanamiz.
Keling, funktsiyani ishga tushiramiz, masalan, narsani nusxalash va keyin uni shu erga joylashtiring.
Yaxshi, shuning uchun biz bu erda funktsiyani aniqlaymiz va keyin uni shu erda chaqiramiz.
OK, va bu erda bu konsol mavjud.
Bizga konsol kerak emas.
Mayli, narsani saqlang.
Endi bolalar bir narsani qilishadi.
Bu erda siz qaytish bayonotini yozasiz.
Yaxshi? Bu kabi qaytish.
Hozir, bolalar uzr jang, men bir xato qildi, Ray burilish.
U erda biz boramiz.
Endi bolalar, biz shablonni so'zma-so'z ishlatamiz.
Bu yigitlarga qarang.
Bu ikki taklif deyiladi.
Bu satrlarni yozish uchun ishlatiladi, biz bu oddiy yigitlardan foydalanmaymiz, biz orqa tayoqlardan foydalanamiz.
Bunga backticks deyiladi.
Shunday qilib, bu shablon literallarini tayyorlash uchun ishlatiladi.
Agar topmasangiz, ushbu kalitni chiqish tugmasi ostida topasiz.
Shunday qilib, klaviaturangizga qarang, Escape key deb nomlangan narsa bor, men chiqish tugmachasiman, mayli, ushbu chiqish tugmachasi ostida siz orqaga qaytishni topasiz.
Shunday qilib, siz uni bir marta bosasiz, keyin siz backtickni ko'rasiz.
Yaxshi, shuning uchun biz bu narsani ishlatmaymiz, orqa tayoqlardan foydalanamiz.
Xo'sh, endi yigitlar buni qilishadi.
Bu erda.
Bir soniya, siz shunchaki html indeksiga o'tasiz, shunchaki bu kabi narsani kesib tashlaysiz boshqaruv x, narsani saqlang.
Yaxshi.
Keling, bu erga qaytib kelaylik.
Endi nima qilmoqchisiz, aytmoqchi, bolalar, bir soniya, shunchaki natijaga qarang.
Bizda hech narsa bo'lmaydi, mayli.
Endi biron bir natijani ko'rish uchun buni bajaring.
Faqat bu kabi narsani joylashtiring.
Mayli, narsani saqlang.
Mayli, bolalar, endi natijani ko'rib chiqaylik.
Okay, biz hali hech narsa ko'rish uchun harakat qilyapmiz.
Nima uchun bu? Buning sababi shundaki, siz bu narsalar qaerda chop etilishi kerakligini aniqlamadingiz.
Yaxshi, siz bu narsani aniqlamadingiz.
Endi biz narsani aniqlaymiz.
Shunday qilib, narsani aniqlash uchun, masalan, qaerdan olishni xohlaysiz, bu narsa qaerga bosilishini xohlaysiz, biz bu narsa do'kon ichida bosilishini xohlaymiz.
Biz bunday uslub css sinf tarzini belgilangan, chunki, bu qarash, biz allaqachon belgilangan panjara, okay bor? Bu shuni anglatadiki, biz mashina bu erda ishlab chiqarilishini xohlaymiz.
Shuning uchun do'konni tanladim.
Xop, endi, ning men bilan birga amal qilaylik faqat bu kabi do'kon nusxa.
Mayli, endi, bu erga keling.
Keyin siz ichki HTML dot yozish uchun harakat qilyapmiz, va keyin amalga sayt teng urish uchun harakat qilyapmiz, narsani saqlab.
Mayli, endi natijani ko'rib chiqaylik.
U erda biz boramiz.
Bolalar.
Bu kartani bu erda ko'ra olasizmi? Biz kartani nima yordamida muvaffaqiyatli yaratdik? JavaScript foydalanish.
Xo'sh, endi bolalar, biz nima qilamiz, bunga qarang, bu qadriyatlarni bu erda ko'ra olasizmi? Bu qattiq kodlangan qadriyatlar deyiladi, okay? Bu shuni anglatadiki, biz faqat narsani yozish uchun qo'lingizdan foydalanamiz.
Endi biz narsani avtomatlashtiramiz.
Agar narsa avtomatlashtirish qanday, bu qarash, birinchidan, agar bu erda bir qator qilish uchun harakat qilyapmiz, bu qarash, biz Okay ruxsat fiz, o'tkir mahsulot, o'tkir mahsulot, teng o'tkir mahsulot ma'lumotlar, okay, agar bu kabi bu erda bir qator qilish uchun harakat qilyapmiz teng.
Yaxshi.
Endi, bolalar, aytaylik, bizda qancha ma'lumot bor, aslida tekshiramiz, bizda 1234, to'rtta ma'lumot bor, to'g'rimi? Shunday qilib, bu erda ichida ma'lumotlarni yozish uchun, bu qarash, biz gonna foydalanish jingalak qavs odamsiz, bu biz qator ichida moslamalarni saqlash, degan ma'noni anglatadi ob'ekt, deyiladi.
Agar biz bitta jingalak qavsni yozsak, demak, agar biz bitta ob'ektni yozsak, demak, bizning do'konimizda bizda faqat bitta narsa bor, lekin agar siz vergul jingalak qavsni ursangiz va keyin buni to'rt marta shunday qilsangiz, demak, bizda qancha mahsulot sotilishi kerak sotish uchun narsalar uchun, maylimi? Shunday qilib, bu bizning ob'ektlarimiz ichida aniqlanadi.
Endi ushbu ro'yxatga qarang, birinchi navbatda, birinchi ob'ektni yarating, shuning uchun qanday qilib bu narsani qilmoqchisiz? Avvalo, siz bu bilan ID tsiklini o'rnatasiz.
Id ichak, ikki quote, okay? Siz xohlagan narsani yozishingiz mumkin, muammo yo'q.
Men faqat yozish narsa istayman.
Yaxshi? Uni bo'sh qoldirmang.
Keyin siz vergul yozasiz.
Yaxshi, keyin siz bu erga ism qo'yasiz.
Aytgancha, bolalar, yana bir narsa, bu Id siz bu narsani ko'ryapsizmi? Bu noyob bo'lishi kerak.
Yaxshi.
Va endi ismga ko'ra, biz tasodifiy ko'ylak yozamiz.
Mayli, tasodifiy ko'ylak.
U erda biz boramiz.
Endi siz vergulni urasiz, narxni belgilaysiz.
Yaxshi, shuning uchun men nima qilyapman, mening asosiy maqsadim-bu erda barcha ma'lumotlarni shu kabi ko'rasizmi? Bu, bu? Men ularni bu erda saqlayapman.
Xo'sh, keling, narsani yakunlaylik.
Shunday qilib, narx 45 bo'ladi.
OK, keyin koma D S, C, uning tavsifi.
Siz gonna bu ikki ikki tirnoq qarash tavsifi yuborish qilyapmiz.
Lorem etti yoki sakkizta, teging.
U erda biz boramiz.
Yaxshi.
Endi bu bir quyida, agar gonna image img ichak olish qilyapmiz, ikki quote, xop, tasvirlar slash, men g minus bir nuqta jpg m.
OK, shuning uchun xato xato qilmaslik uchun pastga aylantiring.
Bu narsani bu erda ko'ryapsizmi? Bu qayerda? Eh, bu erda bu rasm, bu erda allaqachon manbalar, faqat narsani nusxalash.
Ha.
Va keyin bu erga qo'ying.
Siz shunday qilib, imlo xatolariga yo'l qo'ymaysiz.
Yaxshi? Xo'sh, bunga qarang, biz do'konimiz ichida bitta narsani muvaffaqiyatli aniqladik, maylimi? Xuddi shu tarzda, bu yigitlarga qarang, men bu narsani nusxa ko'chiraman, maylimi? Va keyin men uni bu erga shunday joylashtiraman, mayli, bunga qarang, demak bizda qancha narsa bor? Biz bir vaqtning o'zida bizning do'konda to'rt mahsulot bor, o'sha to'rt mahsulot bu ma'lumotlarni ega.
Yaxshi? Endi, bolalar, sizga aytganimdek, ID noyob bo'lishi kerak.
Keling, uni noyob qilaylik.
Kabi, ning okay, hech narsa harakat qilaylik? Shu bilan birga, bu erga keling, undan biror narsa? Muammo yo'q.
Bu erga kel.
Va keyin men sizga bu kabi tasodifiy qiymatni beraman.
U erda biz boramiz.
Qilingan.
Endi ikkinchisi rasmiy bo'ladi, uning ko'ylagini uramiz.
Narxi haqida siz 100-ga aytasiz.
Okay, va tasvir, faqat bu kabi ikki birini almashtiring.
U erda biz boramiz.
Endi keyingisi bizning futbolkamiz bo'ladi.
Uchun narx belgilash 25.
Bu tasvir qaysi biri bo'ladi kabi, uch? OK, pastga aylantiring, siz rasmni to'rtga o'rnatasiz, narx 300 bo'ladi, chunki bu erkaklar kostyumi.
Mayli, erkaklar.
Keling, bu narsani olib tashlaymiz va keyin to'g'ri kostyum.
U erda biz boramiz.
Qilingan.
Narsani saqlang.
Yaxshi.
Endi, agar siz natijalar ekraniga qaytsangiz, siz gonna emassiz, siz hech qanday o'zgarishlarni ko'rmaysiz.
Nima uchun bu? Buning sababi shundaki, siz xarita funktsiyasidan foydalanib, narsani aniqlashingiz kerak.
Xo'sh, sizga xarita funktsiyasi aslida qanday ishlashini ko'rsatib beray.
Shunday qilib, siz birinchi navbatda nima qilmoqchi bo'lsangiz, bu backtickni bu erda ko'rasizmi, shunchaki uni bu erda tanlang, buni bu erda ko'rasizmi? Okay, bu nuqtaga qadar.
Endi narsani kesib oling.
Yaxshi.
Endi siz nima qilasiz-bu erda bir soniya.
Bu narsani ko'ryapsizmi? Shop mahsulot ma'lumotlar, pastga aylantiring.
Va siz gonna bu erda do'kon mahsulot ma'lumotlarni yozish odamsiz, bu kabi okay, o'tkir mahsulot ma'lumotlar bor xarid.
Endi biz xarita funksiyasidan foydalanamiz.
Ushbu nuqta xaritasiga qarang.
OK, bu erda.
Endi yigitlar bunga qarashadi.
Bu ichida.
Biz gonna o'ng qavs odamsiz.
Yaxshi? Endi sichqonchani ushbu qavs ichiga qo'ying, biz ESX o'q funktsiyasini qilamiz.
Bunga qarang.
Qavslar, okay, burchagi apparati teng, va keyin jingalak qavs.
U erda biz boramiz.
Qilingan.
Endi, bolalar, biz bu erda janjal qilamiz, mayli, siz xohlagan narsani yozishingiz mumkin, muammo yo'q.
Xo'sh, nima uchun? Ushbu qo'llanma uchun men buni juda sodda qilaman.
Men gonna bir x yozish qilyapman.
Xo'sh, nima uchun ular bu erda x ni yozdilar? Buning asosiy sababi shundaki, bu erda matematik funktsiya, xarita aslida barcha ma'lumotlarni birma-bir nishonga oladi.
Yaxshi? Demak, bu erda qancha mahsulot bor? Okay, bu xarita okay, to'rt marta ishlaydi, degan ma'noni anglatadi, bu erda, to'rt mahsulot, to'rt ob'ektlar ichida qancha mahsulot menga ayt? Lekin siz bor bo'lsa, 100 ma'lumotlar bu yerda joylashtiring, qaysi xaritasi ishlaydi, degan ma'noni anglatadi 100 marta.
Yaxshi? Va bu x ni yozish orqali, biz barcha narsalarni birma-bir maqsad qilib qo'yganimizni anglatadi.
Xavotir olmasligingizni ko'rsataman.
Yaxshi.
Shunday qilib, bu erda biz yana bir qaytish bayonotini yozamiz.
Bunga qarang.
O'qish.
Kechirasiz,bu kabi qaytib.
Okay, endi siz kesib qilgan baribir, agar faqat bu kabi narsa to'lash.
Mayli, biz boramiz.
Narsani saqlang.
Mayli, endi natijani ko'rib chiqaylik.
Bolalar.
Bunga qarang.
U erda biz boramiz.
Buni bu erda ko'ra olasizmi? Ammo yigitlar, yigitlar, yana bir bor g'alati ko'rinadi.
Mayli, bunga qarang.
Buni ko'ra olasizmi? Va buni bu erda ko'ra olasizmi? Bu g'alati ko'rinadi.
Buning sababi shundaki, bu ko'rinmas komani bu erda ko'rishingiz mumkinmi? Bu erda allaqachon ko'rishim mumkin.
Ushbu komani ko'rishim mumkinmi? Ha, keladi.
Yaxshi, shuning uchun biz bu komani olib tashlashimiz kerak, shundan keyingina komani olib tashlash uchun aniq natijani ko'rishimiz mumkin.
Yaxshi, bolalar, asosiy js-ga qaytib keling va keyin siz okay-ga o'tasiz.
Agar bu bir oldin bu oxirgi jingalak qavs ko'ryapsizmi? Yaxshi.
Buni bu erda ko'rasizmi? Faqat bu bir oldin, o'ng, nuqta qo'shilish.
Xop, qavs, keyin ikki quote.
Xop, qilingan.
Narsani saqlang.
Ha, natijaga qarang.
U erda biz borib, vergul ketdi.
Lekin bolalar bu qarash, ma'lumotlar o'zgardi etmaymiz.
Okay, lekin biz ularni avtomatik ravishda o'zgarib olish istayman, biz narsa avtomatik ravishda o'zgarib olish istayman deb o'ylayman istayman qanday.
Buning uchun.
Bu juda oddiy.
Yigitlar bunga qarashadi.
Men yozgan x ni eslaysizmi? Ko'ryapsizmi, bu biz ularning barchasini birma-bir, birma-bir nishonga olayotganimizni anglatadi.
Shunday qilib, xarita necha marta ishlaydi.
Birinchidan, bizda qancha ma'lumot borligini ayting.
Bizda to'rtta ma'lumot bor.
Shunday qilib, xarita birma-bir ishlaydi.
Aytmoqchimanki, kechirasiz, xarita to'rt marta ishlaydi va ularning barchasi birma-bir ishlaydi.
Endi bu qarash, bu erda bu x foydalanish.
Keling, bu erga kelib, bu tasodifiy ko'ylakdan foydalanaylik.
Sizda oddiy ko'ylak oyoqlari bor, yaxshi, endi siz dollar belgisini, jingalak qavsni urasiz, keyin siz x nuqtaga borasiz.
Nima uchun nuqta yozdingiz, chunki u aslida ob'ekt.
Xo'sh, bu erda nimani ko'rsatdingiz? Bu ob'ekt hisoblanadi, huh? Bu nima x ob'ekt.
Endi bu qarash.
Bu erda nom.
Faqat nomini nusxa.
OK, pastga aylantiring.
Va bu erda ko'ryapsizmi? Faqat bu kabi narsani to'lash.
U erda biz boramiz.
Qilingan.
Narsani saqlang.
Endi natijani ko'rib chiqamiz.
Yaxshi? Agar siz ushbu nomni ko'rsangiz, unda teglar o'zgartirilganligini ko'rasiz.
Bu tasodifiy ko'ylakka qarang yoki uning ko'ylagidan tashqarida.
Bu T shirt emas.
Bu erkaklar kostyumi.
Yaxshi, lekin rasm o'zgarmadi.
Bunga qarang.
Biz ham xuddi shunday qilamiz.
Narx uchun.
Unga qarang.
Bu juda oddiy qarang, Fortify-ni olib tashlang, lekin bu dollar belgisini olib tashlamang, maylimi? Endi bo'sh joyni bosing o'ng dollar belgisi jingalak qavs x nuqta, bu narx nima edi, to'g'rimi? p r i, agar ishonch hosil bo'lmasa, nima sehr.
Agar siz imlo haqida ishonchingiz komil bo'lmasa, bu erga keling.
Xop, imlo scroller nusxa va bu kabi bu erda narsa joylashtirish, keyin narsani saqlab.
Yaxshi.
Endi natijani ko'rib chiqamiz.
Ko'ryapsizmi, bu narx ham o'zgardi.
Buni ko'rasizmi? Ajoyib.
Endi bolalar, bunga qarang.
Agar bu ko'rish mumkin? Har safar X foydalanish kerak, agar kerak yozish x nuqta x nuqta x nuqta.
Bu zerikarli ekan, huh? Shunday qilib, buning oldini olish uchun biz Destruction deb nomlangan narsadan foydalanamiz.
Yaxshi, foydalanish juda qiziqarli.
Bunga qarang.
Shunday qilib, qarang, bunga qarang.
Bizda tezkor narsalar qancha? Bizda rasm bor, bizda ism, narx, tavsif tasviri bor.
Xo'sh, endi ularning barchasini yuklash uchun men bu narsani yo'q qilaman, Shuning uchun bu erga keling, keyin siz bu erda oyog'ingiz, yaxshi yoki yo'q.
Kechirasiz, bolalar.
Mening yomon.
Bu aslida bu erda bo'lishi kerak.
Bu erda xaritasi.
Bu xarita ichida bo'lishi kerak.
Xop, bas, siz Rossiya x teng qaytib jingalak qilaylik bor.
Xo'sh, endi bu narsalarni bu erda ko'ryapsizmi, ularni birma-bir nusxa ko'chiring.
Mayli, ularni nusxa oling, bu erga qo'ying.
Va keyin siz urasiz, vergul.
Yaxshi, endi ismni olaylik.
Bu erda narsani joylashtiring, narxni oling.
Va shuningdek, vergul qo'yganingizga ishonch hosil qiling, narsani to'lang.
Keyin, nihoyat, biz tasvirning tavsifiga egamiz.
Shunday qilib, buyruq D, Sc, vergul, IMG, narsani saqlang.
U erda biz boramiz.
Endi, bolalar, endi x nuqtani yozishingiz shart emas.
Xo'sh, keling, bu kabi narsani olib tashlaylik.
Xo'sh, keling, bu erdan ham narsani olib tashlaymiz.
U erda biz boramiz.
Natijada qaraylik.
Shunday qilib, biz aynan bir xil natijaga erishdik, yaxshi, ushbu kod satrini yozish va shu o'zgarishlarni amalga oshirish orqali, aytmoqchi, bolalar, nega biz x nuqta x nuqta x nuqta yozamiz? Mana bir savol.
Sizda savol bo'lishi mumkin, to'g'rimi? Xo'sh, bu ob'ekt nima? O'ng? Shunday qilib, ob'ektga kirish uchun biz uni shu ko'rinishda yozamiz.
abc.yoki Kechirasiz.
Kechirasiz, narsaning nomi nima edi? Shop mahsulot ma'lumotlar, o'ng? Keling, narsani nusxalaylik.
Shunday qilib, bu narsa ob'ekt, maylimi? Agar xohlasangiz, narxga kirishni istasangiz, shunchaki ob'ekt nomini yozasiz va keyin nuqta narxini shunday yozishingiz kerak.
Yaxshi? Shuning uchun bolalar, biz x nuqta nomini yozishimiz kerak edi, chunki narsa ob'ekt.
Yaxshi, chunki biz bu erda narsani ob'ekt sifatida belgilaymiz.
Yaxshi.
Umid qilamanki, siz bu nuqtaga va hamma narsani tushundingiz.
Yaxshi? Endi, bolalar, men bu narsani olib tashlayman, keyin uni saqlayman.
Yaxshi.
Endi bolalar, buni ko'ryapsizmi? Rasm qayerda? Mana rasm, to'g'rimi? Narsani nusxalash.
Uni bu yerdan olib tashlang.
Okay, dollar belgisi jingalak apparati teng manba, amalga narsa joylashtirish.
Uni saqlang.
Natijada qaraylik.
U erda biz boramiz.
Buni ko'ra olasizmi? Endi bizda turli xil tasvirlar mavjud.
Bizning yakunlangan loyihamiz buni ko'rishi mumkin.
Ajoyib yigitlar.
Bu yerda keyingi abducens tavsifi.
Ha, biz tavsifni o'zgartiramiz.
Buning uchun.
Biz bu erga qaytib kelamiz va biz buni olib tashlaymiz.
Xop, yuqoriga keyingi, o'ng dollar belgisi, jingalak qavs.
Oh, kechirasiz, jingalak qavs.
Va keyin siz SC ham o'ng bosh tavsifi bor.
Qilingan.
Natijada qaraylik.
U erda biz boramiz, bolalar.
Mayli, biz bu nuqtaga va hamma narsaga qadar muvaffaqiyat qozonamiz.
Yaxshi? Yaxshi, bolalar.
Agar diqqat bilan farq bo'lsangiz, keyin biz tasvir tavsifi narx va nomini ishlatish ko'rishingiz mumkin, lekin biz ID foydalanish bermadi.
Okay, biz ota-ona ichida ID foydalanish uchun harakat qilyapmiz.
Xo'sh, biz nima qilamiz, biz ID yozamiz, shuning uchun biz bu erda ID yozamiz, yaxshi, teng, biz bu erda mahsulot yozamiz.
Okay, minus id minus dollar belgisi jingalak qavs, Id narsa saqlab.
Endi natijani ko'rib chiqamiz.
Yaxshi? Bas, siz bu erga kelib fiz, va keyin o'ng tekshirish bosing fiz.
Xo'sh, endi siz o'zingizning elementlaringizga borasiz va keyin do'konni ochasiz.
Mana do'kon.
Xo'sh, endi bizda 41234 qancha karta bor.
Endi siz bu kartalar barcha o'zi ID bor, deb e'tibor mumkin, qaysi aslida noyob hisoblanadi.
Buni bu erda ko'ra olasizmi? Bu noyob identifikator, noyob identifikator noyob identifikator va boshqalar.
Umid qilamanki, siz bu nuqtaga va hamma narsani tushundingiz.
Yaxshi? Shu bilan birga, yigitlar, bu erga qaytib kelaylik.
Va siz bu yerdan identifikatorni nusxalaysiz, pastga aylantiring.
Bu miqdorni bu erda ko'rasizmi? Ha, biz dollar belgisi jingalak qavs paisa narsa teng ID, shuningdek, bu erda bir ID qo'yish uchun harakat qilyapmiz.
Yaxshi.
Bu narsani bu erga qo'yishning asosiy sababi shundaki, bolalar, bu erda nol.
Ha.
Har safar biz narsani oshirganimizda, biz identifikatorni nishonga olamiz va keyin raqamni bir vaqtning o'zida ko'paytiramiz, har safar siz narsani kamaytirganingizda.
Biz buni maqsad qilib qo'yamiz, keyin esa bu narsani kamaytiramiz yigitlarni xavotirga solmang, biz bu funktsiyani hoziroq amalga oshiramiz, shunda siz bu narsa aslida qanday ishlashini amaliy his qilishingiz mumkin.
Yaxshi.
Yaxshi, bolalar.
Hozirgacha juda yaxshi.
Endi biz oshirish va kamaytirish funktsiyasi uchun ikkita funktsiyani amalga oshiramiz va mening asosiy maqsadim shundaki, har safar ortiqcha ustiga bosganingizda raqam ko'payadi.
Yaxshi? Shu bilan birga, har safar buni bosganingizda, kamayish, raqam ham o'zgaradi.
Shunday qilib, biz ikki vazifalarni qilish uchun harakat qilyapmiz, bu oshirish bo'ladi, bu kamaytirish bo'ladi.
Xo'sh, va siz buni bu erda ko'ryapsizmi, biz yangilanish deb ataladigan boshqa funktsiyani yaratamiz, bu raqamni yangilash uchun faqat bitta funktsiyaga ega.
Yaxshi? Shunday qilib, boshlaylik.
Mayli, keling, yaxshi yigitlarimizga qaytib kelaylik.
Asosiy oyna ichidagi VS kodimizga qaytaylik.
Okay, agar bu ma'lumotlarni ko'ryapsizmi bu erda katta, huh? Biz buni katlay olamiz buni qanday katlaysiz? Faqat bu erga keling, sochingizni mashinasini bosing.
Xop, qilingan.
Endi uni boshqarish mumkin.
Yaxshi.
Endi ushbu funktsiya ostida biz yozmoqchi bo'lgan narsa ikkita funktsiya.
Yaxshi? Biz ikki vazifalarni qilish uchun harakat qilyapmiz, oshirish kamaytirish.
Okay, biz qilish uchun harakat qilyapmiz yana bir vazifasi deb ataladi yangilash, men bilan birga, bu amal qarash, bo'lsin ESX xato funktsiyasi bo'ladi, okay? o'sish, mayli, bu erda bitta o'q funktsiyasi mavjud.
U erda biz boramiz.
Qilingan.
Endi, bu qaerda sonini oshirish uchun mas'ul bo'lgan? Bu bir, okay.
Va biz diksiya deb ataydigan yana bir funktsiyani yaratamiz, mayli, nusxa ko'chirish pastasi, farmon degani, biz boramiz.
Yaxshi.
Yana biri chaqiriladi yangilash bu ko'rinishga o'xshash narsa.
U erda biz boramiz.
Qilingan.
Yaxshi.
Endi tushuntirib beray.
Shunga qaramay, o'sish sonni kamaytirish uchun javobgardir, bu raqamni kamaytirish uchun javobgardir va yangilanish bu raqamni yangilash uchun javobgardir.
Yaxshi, hozirgacha juda yaxshi, bolalar.
Shunday qilib, bolalar, men nima uchun uchta funktsiyani yozganimni tushunganingizga umid qilaman.
Mayli, vazifalarimizga qaytaylik.
Hammasi joyida.
Endi bolalar, bu belgini bu erda ko'rasizmi? Ha, va bu bu erda belgi.
Shunday qilib, siz bu erga kelasiz va keyin siz to'g'ri yo'lda bo'lasiz, yaxshi.
Hammasi kichik harflar bilan bo'ladi.
Xop, ustiga bosing C L IC K, xop.
Ikki taklifga teng.
Yaxshi.
Endi bu qarash.
Bu minus to'g'ri? Har safar minusni urganingizda, qaysi biri bu shifrni boshlashi kerak, faqat hmm narsani nusxalash kerak.
Va keyin bu erga qaytib kelib, keyin okay kabi narsani to'lash, endi qavs.
U erda biz boramiz.
Qilingan.
Shu bilan bir vaqtda siz bosing OK o'ng bu erga borish bu erda oshirish foydalanadi, ikki iqtibos teng bosing.
Xo'sh, endi pastga aylantiring.
Va bu erda o'sish tufayli, narsani nusxa ko'chiring, yuqoriga o'ting va endi bu qavs kabi bu erga qo'ying.
Endi, bu narsa aslida ishlayaptimi yoki yo'qligini qanday tekshirasiz? Sizga ko'rsataman.
Faqat bu erga keling.
Va keyin siz bu erga borasiz, konsol nuqta jurnali.
Okay, siz gonna oshirish odamsiz.
U erda biz boramiz.
Va endi bu erga qaytib, keyin yozaylik konsol jurnali.
Okay, hech log kamaytirish, siz bu kamaytirish mumkin.
U erda biz boramiz.
Endi narsani sinab ko'raylik.
Okay, ning natijalari ekranda bu erda qaytib kelsin, va keyin, biz o'ng bosing tekshiring bosing fiz.
Yaxshi.
Endi konsolingizga kelaylik.
Va endi bu kabi plyusni bosamiz.
U erda siz bu erda ko'rishingiz mumkin, bu o'sish emas.
Yaxshi.
Endi pasayish bo'lgan minusni bosamiz.
U erda biz boramiz.
Yaxshi, shuning uchun barcha tugmalar ishlaydi.
Keling, ularning barchasini sinab ko'raylik.
Mayli, biz boramiz.
Okay, kamaytirish oshirish, bas, u mukammal yaxshi ish bo'lyapdi.
Mayli, bolalar, bu erda savol.
Siz tanlagan kartani qanday aniq bilasiz? Xop, men, deb aytish mumkin, salom, bu rasmiy ko'ylak biridir, men bu birini tanlash qilyapman.
Buni vizual ko'rishingiz mumkin.
Lekin JavaScript JavaScript har qanday ko'zlari yo'q.
Buni aniq tanlayotganingizni qanday bilasiz? To'g'ri, bu erda savol.
Xo'sh, buni qanday hal qilasiz? Bu juda oddiy.
Bunga qarang.
Faqat bu erga keling.
Va bu erda ushbu identifikatorni eslaysizmi? Ha, bu noyob, bu nima? Bu uni emas.
Ushbu identifikatordan foydalanish JavaScript qaysi do'kon elementini aniq tanlashingiz mumkin? Yaxshi? Shuning uchun men bu erga yozdim ID va JavaScript-ni qaysi elementni tanlayotganimizni aniqlashi uchun unga barcha narsalar uchun noyob identifikatorni berdim.
Yaxshi? Endi bu erda bir xil narsani qilish uchun, bunga qarang.
Bu o'sish va pasayish.
Biz bu erda bir dalillar o'tishi uchun harakat qilyapmiz.
Qanday qilib bu odamga bu erda argumentni ko'rib chiqasiz, dollar belgisi jingalak qavs, ID, yaxshi? Shu tarzda, agar faqat bu erga kelib, o'ng dollar belgisi jingalak qavs, Id amalga.
Yaxshi? Endi tinglang, bolalar, bu erga o'ting.
Va bu erda sizning o'sishingiz o'rniga ID Okay, narsani saqlang.
Sinov qilaylik.
Bu erga qaytib kelaylik.
F 12.
Xop, Dev vositalari ochish va plus bosing.
Endi bolalar, siz xato identifikatori aniqlanmaganini ko'rasiz.
Buning sababi shundaki, har safar bu erda argumentlarni o'tkazganingizda, bu erda ham buni aniqlab olishingiz kerak.
Bu kabi bir narsa.
Mana, bu bizning argumentimiz.
Yaxshi? Narsani saqlang.
Endi natijani qilaylik.
Xo'sh, endi u ishlaydimi? U erda biz boramiz.
OK, ustiga bosing ortiqcha juda yaxshi ishlaydi.
Endi buni bu erda ko'ra olasizmi? Bu bizga nima berdi? Bu bizga aslida nol bo'lgan miqdorni qaytarib berdi.
Va endi bolalar, bu erda ID foydalanadi qarash.
Ha, bu noyob.
Keling, shunga o'xshash boshqa narsani bosamiz.
Agar bu ID noyob ko'ryapsizmi.
Ushbu identifikatordan foydalanib, JavaScript-ga salom, biz ushbu kartani tanlaymiz.
Faqat bu erda raqamni kamaytiring yoki bu erda raqamni ko'paytiring, faqat bu erda boshqa kartalarga tegmang.
so'zlar, sizda hech qanday nuqta yo'q.
Okay, bolalar, biz faqat ID boshqa hech narsa istayman.
Shunday qilib, buni amalga oshirish uchun, faqat bu erga kelib, endi meni ning bir o'zgarmaydigan yozish qilaylik, okay, tanlangan ob'ektni qilaylik, okay? Tanlangan element, yaxshi, keyin siz identifikatorni shu erda o'tkazasiz.
U erda biz boramiz.
Endi narsani nusxa ko'chiring, bu erga qo'ying, mayli, narsani saqlang.
Natijada qaraylik.
Xo'sh, yigitlar, endi natijani ko'rib chiqaylik.
Agar bu yerda bosing bo'lsa, keyin siz emasmiz fiz, agar gonna har qanday o'zgarishlarni ko'rish yo'q.
Shunday qilib, mahalliy o'zgarishlarni ko'rish uchun, keling, bu erga va tanlangan elementga qaytib kelaylik here.id okay.id narsani saqlang.
Endi siz bu erga qaytib kelsangiz, agar siz shu kabi plyusni tanlasangiz, u erga boramiz, siz faqat noyob identifikatorni ko'rasiz bu erda bosing noyob identifikator, maylimi? Bu yerni bosing, noyob ID bu yerni bosing, noyob ID amalga.
Xuddi shu tarzda, bolalar, bu erga qaytib kelaylik.
Ha, biz bu erda ID o'tishi uchun harakat qilyapmiz.
Xo'sh, biz xuddi shu narsani qilamiz, shunchaki bu ikki satrning ikkalasini ham shu yerga ko'chiramiz va keyin uni shu yerga joylashtiramiz.
U erda biz boramiz.
Qilingan.
Narsani saqlang.
Endi bu qarash, har safar, agar bosing baribir, u plus bo'lsin, yoki minus maxsus JavaScript uchun belgilaydi ketadi qaysi element aniq tanlash qilyapmiz, deb.
Mayli, hozirgacha juda yaxshi, yigitlar.
Endi tinglang, biz qurmoqchi bo'lgan keyingi narsa-biz kichik savat tayyorlaymiz.
Xo'sh, bu bilan men bu erga kelaman va keyin men ketaman.
Qo'rg'oshin, mayli, savat.
OK, teng, bu kabi bir qator bo'ladi.
Endi savatni tayyorlashning sababi nima? Savatni tayyorlashning asosiy sababi shundaki, bitta narsa, menga bu kodni bukishga ruxsat bering, mayli, shunga o'xshash.
Savatni bu erda yozishning asosiy sababi shundaki, har safar biron bir kartani tanlaganingizda, Xo'sh, nima qilish kerak, bu bizning savatimiz ichidagi ma'lumotlarni maxsus o'g'irlash uchun saqlaydi, biz qaysi narsalarni tanladik? Xop, agar mening nuqtasini bor.
Endi sizga bir misol ko'rsataman.
Aytaylik, biz ushbu kartani tanladik, yaxshi.
Shunday qilib, agar siz plyusni tanlasangiz, nima bo'ladi, bunga qarang.
Bu yerda, bir ob'ekt, uni qayta qiladi, okay, bu ob'ekt ichida, biz bu qarash saqlangan ikki mahsulot bor fiz, biz bu erda fiz, Id ichak, bu noyob ID Okay bo'ladi, va keyin vergul, biz bu erda bir narsani bor fiz, qaerda soni faqat bitta bo'ladi, ya'ni bizda bu narsa savat ichida bor va uning miqdori faqat bitta bo'lak.
Yaxshi? Har safar bu ko'rinishga o'xshash ortiqcha narsani bosganingizda, har safar men shunga o'xshash plyusni bosganimda, shuning uchun nima bo'ladi 18-raqamni qayta ishlatadi, 18-raqam.
Bu erda bir vaqtning o'zida 18 raqami qo'shiladi.
Shunday qilib, siz bu narsani tanlaganingiz uchun, shuning uchun bu narsa ID-ni shu erda saqlash orqali savatingizda mavjud bo'ladi.
Sizga jonli demoni ko'rsatay.
Bunga qarang.
Avvalo, men narsani olib tashlayman, mayli, men uni shunday bo'sh saqlayman.
Bu yigitlarga qarang.
Endi men bu erda, o'sish ichida pastga aylanaman.
Okay, hozir guys, ortib ichida hozir guys, foydalanuvchi oshirish bosganda har vaqt, Hi, bu funktsiya bu erda bu qarash degan ma'noni anglatadi, ishlaydi, men o'ng Savatga, okay, savat, nuqta surish uchun ketyapman.
Shunday qilib, biz bu erda ichida surish olaman nima, bu qarash.
Mayli, qavs, jingalak qavs.
Biz birinchi navbatda ikkita narsani qo'yamiz Id yaxshi, shuning uchun siz ushbu identifikatorni bu erda ko'rasiz tanlangan item.id.
Narsani nusxalash.
Bu yerga qo'ying.
Xo'sh, endi biz bu erga vergul qo'yamiz.
Endi biz qo'yadigan keyingi narsa-bu yaxshi, salqin.
Endi biz bu erda bu kabi bir qo'yish uchun harakat qilyapmiz.
U erda biz boramiz.
Narsani saqlang.
Endi tinglang.
Biz, albatta, fiz keyingi narsa o'rniga ID tizimga konsol emas, biz savatni tasalli fiz.
Bu BS Katie qarang.
Mayli, narsani saqlang, yigitlar.
Endi bu yerdan bu kabi narsalarni kesib tashlang.
CTRL X endi bu kabi surish keyin qo'ydi.
Mayli, narsani saqlang.
Bu erga qaytib kelaylik.
Bolalar.
Konsolni oching.
Bir soniya.
Keling, bu erga kelib, konsolni ochamiz.
Xo'sh, har safar plyusni bosganingizda qarang, bunga qarang, savatingizda bitta narsa bo'ladi.
Bu savat bolalar.
Bunga qarang.
Sizda qancha mahsulot bor? Sizda faqat bittasi bor.
Xo'sh, endi siz buni ochsangiz, men buni ko'rishingiz mumkin ID saqlanganligini ko'rishingiz mumkin.
Va keyin element bir parcha.
Endi yigitlar bunga qarashadi.
Har safar plyusni bosganingizda, savatning ko'payishini ko'rishingiz mumkin.
Agar siz buni ochsangiz, bunga qarang, xuddi shu element qayta-qayta qo'shiladi.
Va yana.
Bu hech qanday ma'noga ega emas, bu ishni qilish o'rniga, biz nima qilamiz, biz bu erda mahsulot sonini ko'paytiramiz.
Agar siz bu yerni uch marta bossangiz, u uchga o'zgartiriladi.
Yaxshi, bu bizning yondashuvimiz, bu yondashuv emas.
Okay, bu har qanday mantiqiy emas.
Bu erda bizning makonimizni behuda sarflamoqda.
Mayli, bu narsaga qarash uchun.
Keling, faqat asosiy GSGA qaytaylik, yaxshi bolalar, bu erda biz qidiruv funktsiyasini qilamiz.
Yaxshi.
Qidiruv funktsiyasining asosiy maqsadi shu narsa aslida savatda mavjudmi yoki yo'qligini qidiradi.
Sizga ko'rsataman.
Yaxshi, shuning uchun bunga qarang, bolalar.
Bu erda qancha narsalarni ko'rishingiz mumkin? 123.
Bizda uchta bir xil narsa bor.
Bu har qanday mantiqiy emas? Shunday qilib, qidiruv funktsiyasi qidiradi.
Aytaylik, siz buni tanlaysiz, qidiruv funktsiyasi bu narsa aslida savatda mavjud bo'lgan joyni qidiradi yoki yo'q.
Agar u mavjud bo'lsa, faqat element ko'payadi, mayli, element 12345 kabi oshadi va hokazo, maylimi? Ammo agar u mavjud bo'lmasa, unda nima bo'ladi, bu shunday bu erga suring savatimiz ichidagi yangi ob'ektni itarmoqchi va keyin biz variantni ko'rishimiz mumkin.
Yaxshi? Umid qilamanki, siz mening nuqtai nazarimni tushundingiz, mayli, keling, narsani qilaylik, mayli.
Endi buni ko'rib chiqing, siz bu erga kelasiz va keyin siz etakchi qidiruvni amalga oshirasiz, maylimi? Keyin siz shu yerga teng keldingiz, siz savatni shunday tanlaysiz, xuddi savat nuqta jarimasi kabi.
Yaxshi, bir soniya.
Shunday qilib, ushbu topilmadan foydalanib, biz ob'ekt haqiqatan ham mavjudmi yoki yo'qmi degan narsani qidiramiz.
OK, endi, o'rniga, biz bu erda gonna odamsiz, qavs.
Buning o'rniga, bu erda, siz gonna es olti o'q vazifasini odamsiz, bu kabi bir narsa.
Mayli, bolalar, endi, bunga qarang.
Biz bu erda bo'lamiz, x, siz xohlagan narsani qilasiz.
Muammo yo'q, bolalar.
Shunday qilib, ushbu qo'llanma uchun men x-ni argument sifatida o'tkazaman.
Yaxshi? Pass muvaffaqiyatsiz asosiy sababi.
Ushbu dalilni o'tkazishning asosiy sababi shu barcha ob'ektlarni birma-bir tekshiradi.
Xop, men bu x yozgan nima uchun o'sha.
Endi, bu erda, men nima qilmoqchi bo'lsam, bu erda bu identifikator, bu noyobdir.
OK, shuning uchun men faqat identifikatorlarni qidiraman, shunga o'xshash narsa.
Mana, siz bu erga kelasiz va keyin chiqish identifikatoringizni yozasiz.
Yaxshi? Siz uch baravar teng belgini urasiz.
Keyingi qadam.
Buni ko'ryapsizmi? Tanlangan? ID? Ha.
Tanlangan.
item.id.
Narsani nusxalash.
Bu yerga qo'ying.
Xo'sh, bu bilan nima demoqchiman? Bu faqat bitta narsani qidirmoqda, bitta va yagona narsa.
Siz tanlagan elementni qidirmoqda.
Va keyin biz faqat tezkor qidiruvni amalga oshirmoqdamiz.
Bu narsa aslida mavjudmi yoki yo'qmi? Keyin, bolalar, bunga qarang.
Agar boshqa bo'lsa, bu qavsni ko'rib chiqing va keyin qidiruvingizni oldingiz.
Agar qidiruv aniqlanmagan bo'lsa, ushbu uchlik teng belgisiga qarang va keyin siz shu erga borasiz bu kabi aniqlang.
Xo'sh, bolalar, bu bilan nima demoqchiman? Aytmoqchimanki, agar biz qidirmoqchi bo'lgan narsani topmasak, shundagina biz ob'ektni savat ichiga suramiz.
Shunday qilib, men bu narsani kesib, keyin bu erga qo'yaman.
Yaxshi.
Boshqa kabi, boshqa nima demoqchiman? Agar biror narsani topsak, mayli, biz bu ko'rinishni boshqa qilamiz.
jingalak qavs, agar gonna izlash yozish qilyapmiz.
Bu qo'ng'iroq qiladi.
Bu yerda jarrohlik bemorni nusxa va keyin bu erda borish.
Plus, kechirasiz, bolalar, biz, shuningdek, element nuqta ob'ektni harakat qildik, okay? Plus bu erda amaldagi teng.
Biri hozir bajarildi.
Endi bolalar, natijani ko'rib chiqaylik.
Bu erga qaytib kelaylik.
Va endi bunga qarang.
Men Plus ni tanlasangiz,, bu qarash, biz gonna faqat bitta ob'ektni ko'rish odamsiz.
Mayli, men bilan chidang, yigitlar.
Endi, bolalar, ning mantiq qator qaraylik.
Bunga qarang.
Agar narsa mavjud bo'lmasa, shundan keyingina narsani torting.
Agar u allaqachon mavjud bo'lsa, shunchaki miqdorini oshiring.
Xo'sh, bu erda nima bo'ladi? Bizning holda, men bu kabi plus tanlang, agar, nima bo'ladi, deb? Menga ayting bolalar, biz allaqachon ID bor, chunki faqat element ortadi.
Xo'sh, narsani qidirish uchun qaysi funktsiya javobgardir? Qidiruv narsani topish uchun javobgardir.
Mayli, bu erga qaytib kelaylik.
Va endi plyusni bosing.
Bunga qarang.
Keling, buni ochaylik.
U erda biz boramiz, bolalar.
Biz ID va element ortishi bor.
Keling, bu kabi yana oshiraylik.
U erda biz boramiz.
Keling, buni ochaylik.
U erda biz boramiz.
Siz element endi uch qarang.
Ajoyib yigitlar.
Endi buni bosamiz.
Endi, bolalar, bir soniya.
Qancha? Ushbu massiv ichida nechta ob'ektni ko'rishingiz mumkin? Faqat bitta? Endi bolalar menga aytadilar, bu narsa savat ichida bormi? Ha yoki yo'q? Bu yo'q.
Shunday qilib, siz buni bosasiz, endi buni bosasiz, bizda ikkita ob'ekt borligini ko'rishingiz mumkin, birinchisi ikkinchisi.
Va element faqat bitta bo'lak.
Bunga bu kabi hamma narsa kiradi.
Buni bosing.
U erda biz boramiz.
Element endi oshdi.
Shunday qilib, yigitlar, men haqiqatan ham mantiq aslida qanday ishlashini tushunganingizga umid qilaman.
Yaxshi.
Xuddi shu tarzda, bolalar, biz kamaytirish funktsiyasini qilamiz.
Buni bu erda ko'ra olasizmi, biz kamaytirish funktsiyasini bajaramiz.
Shunday qilib, boshlaylik.
Shunday qilib, bolalar, kamaytirish funktsiyasi o'sish funktsiyasiga ko'proq yoki kamroq o'xshaydi.
Shunday qilib, men bilan birga bolalar.
Faqat bu kabi butun narsani nusxa.
Yaxshi, bu bir soniya kabi.
Bu nusxa va endi bu erga kelib, bu narsani o'chirish.
Yaxshi.
Uni bo'sh qilib qo'ying va narsani bu erga qo'ying.
Hammasi joyida.
Endi bolalar bu erda bu plyusdan foydalanadilar.
Mana, biz bu ko'rinish kabi minus qo'yamiz.
Xop, qilingan.
Mayli, yigitlar, minusni bu erga qo'ygandan so'ng, natijani ko'rib chiqaylik.
OK, shuning uchun siz natijani darhol ko'rasiz.
Endi bu qarash.
Men bu erda besh marta tanlash uchun ketyapman, okay.
12345.
Xo'sh, endi buni ochamiz.
Siz element besh ko'rish mumkin.
Keling, bu kabi narsalarni kamaytiraylik 123 endi element qancha ikki bo'lishi kerak.
U erda biz boramiz.
Bu juda yaxshi ishlaydi, bolalar.
Endi bu qarash.
Men uni ko'proq marta tanlayman.
Bunga qarang.
Men faqat gonna narsa bosing qilyapman.
Mayli, endi natijaga qarang.
Agar men uni oxirgi marta ochsam.
Bunga qarang.
Endi element minus 10.
Bu har qanday mantiqiy emas, huh? Shunday qilib, biz nima qilmoqchimiz, bu narsa bizning yaxshi ishimizda noldan pastga tushishini to'xtatishimiz kerak.
Meni bolalar bilan kuzatib.
Faqat bu erga keling va bu erda bayonot bo'lsa.
Ha, undefined o'rniga biz uning nolini yozamiz.
Xo'sh, endi bu erda u nuqta belgisini qidiradi, ya'ni bir soniya bolalar bir soniya.
Faqat narsalarni bekor qilishga ijozat bering.
Xo'sh, bitta narsa ular qidiruv nuqta elementini qaerdan olishdi? Sizda savol bo'lishi mumkin, to'g'rimi? Shunday qilib, biz buni bu erdan oldik.
Buni bu erda ko'ra olasizmi? ID va keyin bizda element deb nomlangan narsa bor.
Shunday qilib, narsa nolga tushgan payt, mayli, men bilan chidang, bolalar.
Narsa nolga tushganda, biz jarayonni to'xtatamiz.
Shuning uchun men yozdim qidiruv nuqta elementi nolga teng.
Ushbu qidiruv nuqta elementiga qarang.
Ha, undefined joylashtiring nol bo'ladi, bu kabi.
U erda biz boramiz.
Va jarayonni qanday to'xtatasiz? Bu qara, agar bu yerda bularni ko'ryapsizmi, faqat bu kabi jingalak qo'llab-joyiga olib tashlash, xop.
Va hozir faqat shu erda, qaytish butunlay bu kabi jarayonini to'xtatish uchun ketadi, sizning kodi bu kabi bir narsa qarash kerak.
Endi, bolalar, natijani sinab ko'raylik.
Xo'sh, natijalar ekranida bu erga qaytib kelaylik va bunga qaraylik, men ushbu 123 ni tanlayman.
Natijada qaraylik.
U erda biz boramiz.
Element endi uchta.
Keling, bir, ikkitasini kamaytiraylik, natijani ko'rib chiqaylik.
U erda biz element biri bor, on siz uni yana bosing, bu qarash nol bo'ladi, o'ng? Bu shuni anglatadiki, agar siz uni yana bossangiz, bu erga qarang.
Agar siz bossangiz ham narsani bosishda davom eting, bunga qarang, u ishlamayapti.
100 marta bossam ham ishlamayapti.
Nima uchun bu? Buning sababi, men jarayonni butunlay to'xtatdim.
Okay, bu bayonot yozib, deb qaytish bayonot faqat narsani to'xtatish, degan ma'noni anglatadi.
Hech narsa qilmang.
Yaxshi? Bu kabi.
Shunday qilib, yigitlar, men haqiqatan ham, haqiqatan ham, haqiqatan ham, siz shu nuqtaga va hamma narsani tushunganingizga umid qilaman, maylimi? Shunday qilib, siz bu erda har qanday kartani tanlashingiz mumkin, shunchaki narsani bosing va keyin u shunday o'sib bormoqda.
Va agar siz kamaytirmoqchi bo'lsangiz, shunchaki bosing kamaytirishda davom eting nolga tushgan payt, bunga qarang, nolga tushgan payt endi hech narsa qilmaydi.
Ammo agar siz aytmoqchi bo'lsangiz, ayblashni aytaylik.
Agar siz plyusni bossangiz, endi ishlaydi.
Bunga qarang.
Narsani bosing.
Endi biz boramiz.
Siz hozir bir parcha qarang.
Yaxshi? Endi bolalar, biz qiladigan keyingi narsa - yangilanish funktsiyasini eslaysizmi? Mana yangilash funktsiyasi, biz hozir yangilash funktsiyasini aniqlaymiz.
Shunday qilib, u bizga 0123456 va boshqalarni beradi.
Xuddi yakunlangan loyiha kabi, siz buni ko'rasizmi? Bosishni davom eting, natijani jonli ko'rishingiz mumkin.
Xo'sh, keling, xuddi shu narsani qilaylik.
Bizning Google narsamizda.
Kodni aylantiruvchi yangilanishdan foydalanadi, biz bu narsani aniqlaymiz.
Xo'sh, bolalar, birinchi navbatda, yangilash funktsiyasi qachon ishlashini xohlaysiz? Biz bu narsa har safar bir soniyada ishlashini xohlaymiz.
Biz har safar ortiqcha yoki minusni bosganimizda narsaning ishlashini xohlaymiz.
Bas, meni faqat sizga bir namunasi ko'rsataman.
Bu bilan nima demoqchiman? Xo'sh, shuning uchun bu erga keling, keyin biz konsol jurnali konsolini, nuqta jurnalini olamiz, yaxshi, biz bu erda yozamiz, yangilash funktsiyasi ishlamoqda.
Yaxshi.
Endi, men sizga aytganimdan beri, har safar ortiqcha yoki minusni bosganimizda, yangilanish ishlashini xohlaymiz, shuning uchun biz buni qilamiz.
Xop, faqat yangilash nusxa.
Endi oshirish funksiyangizga o'ting.
Avvalo, okay, agar bu erda bu bir ko'ryapsizmi, konsol, bu bir oldin savat kirish, faqat bu kabi narsa to'lash.
Yaxshi? So'ngra qavs amalga.
Endi pastga aylantiring.
Bu konsoldan so'ng, log bazasi, biror narsa braketi amalga oshirilgandan so'ng, bu erda kamaytirish.
Endi natijaga qarang, bolalar.
Bu erga qaytib kelaylik, konsolni yana oching.
Endi, har safar ortiqcha ustiga bosganingizda, yangilash funktsiyasi ishlayotgan bo'lsa, juda yaxshi ishlaydi.
Bunga qarang, nima bossangiz ham, lekin siz bosgan narsa ishlaydi.
Yaxshi.
Yaxshi, bolalar, konsol jurnalini chop etish o'rniga, biz bu erda raqamlarni chop etmoqchimiz.
Yaxshi? Buning uchun, birinchi navbatda, VS kodimizga qaytaylik.
Va endi birinchi navbatda, o'sishni aniqlaylik, maylimi? O'sish ichida.
Noyob identifikatorni eslaysizmi, noyob identifikator qayerda, bu erda noyob identifikator, maylimi? Faqat noyob ID yigitlarni nusxa.
Pastga aylantiring, ushbu yangilanishni bajaring, uni shu erga qo'ying, maylimi? Tanlangan element, keyin faqat tanlangan bu ko'chadan kabi ID o'tishi.
item.id.
Mayli, narsani saqlang.
Endi bu erga kiraylik.
Va keyin bu erda identifikatorni yozing.
Mayli, narsani saqlang.
Endi, faqat ishni qilish o'rniga, bu narsani olib tashlang va keyin yozing.
Mayli, narsani saqlang.
Endi, dastlab, natijani yuklaymiz.
Yaxshi? Shunday qilib, o'rniga yangilash vazifasini olish ishlayotgan, siz gonna noyob ID biz gonna noyob ID olish qilyapmiz, deb ko'rish mumkin ko'rasiz-ku.
Yaxshi? Endi, bolalar, qaerda, bu noyob bo'ladi? Id meni sizga noyob ID bu erda ilovasi bor ko'rsatishga ruxsat bizni olib.
Agar siz umumiy do'kon ochsangiz, ushbu noyob identifikatorni bu erda ko'rishingiz mumkinmi? Ha, bu erda to'g'ridan-to'g'ri biriktirma mavjud, ya'ni biz raqamni to'g'ridan-to'g'ri almashtirish uchun ID tomonidan document dot get elementidan foydalanishimiz mumkin.
Bunga qarang.
Men listing tushib ketyapman, bizning yangilash funktsiyasi uchun pastga aylantiring.
Buni bu erda ko'rasizmi? Barcha bolalar birinchi, biz tez qo'ng'iroq qilish uchun harakat qilyapmiz.
Agar element faqat mavjud bo'lsa, unda raqam ko'payadi.
Okay guys, biz kodi kabilar qaytib odamsiz.
Endi bu qarash.
Biz okay, qidirish qilaylik, okay bir qidirish vazifasini qilish uchun harakat qilyapmiz? Bu Savatga qarash teng, okay nuqta topish, keyin bu erda borish, qavs, insert, bu erda siz borish, o'ng? Ha, bu xato funktsiyasi, okay, shunga o'xshash jarayon men shunga o'xshash jarayon qanday yo'l, bolalar men izlash qanday yo'l? Men buni xuddi shu jarayonda qilaman.
Xo'sh, endi X ni bu erga qanday qo'yganimni ko'ryapsizmi? Men bu erda X ni ham qo'yaman.
Xop, hozir, men qarshi nima qidiraman? Men bu Id qarashi qarshi izlab qilyapman.
Men yozish uchun ketyapman x.id.
Okay, men bu ID mos harakat qilaman.
Agar u mos kelsa, yaxshi, keyin biz natijaga erishamiz.
Bunga qarang.
Xo'sh, ushbu funktsiyani yozgandan so'ng, bunga qarang.
Faqat qidiruvni nusxalash.
Yaxshi, keyin siz buni bu erga qo'yasiz.
U erda biz boramiz.
Va bu erda savat.
Savatni izohlang.
Xop, men konsoli emasman, konsol izoh.
Bu erda kirish.
Va bu erda ham konsol jurnalini sharhlang.
Endi Oh, kechirasiz, bu emas.
Mening yomon.
Bu bo'lishi kerak.
Xo'sh, bu narsani sharhlaysizmi? Uni saqlang.
Natijada qaraylik.
Mayli, bolalar, VS kodiga qaytaylik.
Va endi siz Plus bosing har safar, agar gonna konsoli bir ob'ektni ko'rish qilyapmiz.
Xo'sh, bu qayerdan keladi? Bunga qarang.
U yangilanish funktsiyasidan keladi, bu konsol jurnali u erdan keladi.
Yaxshi.
Endi, agar siz ko'paytirishni, ko'paytirishni bossangiz, narsa elementni qayta-qayta va qayta ko'payishini ko'ra olasizmi, to'g'rimi? Shunday qilib, biz faqat raqamni xohlaymiz.
Biz ID istamayman.
Xop, bas, biz faqat bizning faqat maqsad ID maqsad qanday, Id faqat bu erga kelib, keyin cert dot ob'ektni yozish.
Bajarildi, uni saqlang.
Natijada qaraylik.
Buni olish uchun har safar plyusni bosganingizda, faqat raqam ko'payadi.
Yaxshi? Endi biz bu narsa bu erda bo'lishini xohlamaymiz.
Biz bu erda nol ichida bo'lishini xohlaymiz.
Buni qanday qilasiz? Buni qarang, bu erga qaytib keling.
Va keyin siz shunchaki hujjat yozasiz.
Yaxshi? ID tomonidan dot get element.
Va bu identifikatorni eslaysizmi? Ha, bu narsani nusxa ko'chiring va keyin bu erga qo'ying.
Xop, keyin siz nuqta ob'ektni qidirish uchun teng dot innerHTML bosing kerak, qaysi aslida bu biridir.
Bu raqam.
Aytmoqchimanki, bu konsol, jurnal, u 12345 raqamini bosib chiqaradi va hokazo.
Faqat narsani nusxa va bu amalga kabi bu erda uni qo'yish.
Bolalar.
Bunga qarang.
Bu erga qaytib kelaylik.
Har safar plyusni bosganingizda, bunga qarang, raqamni ko'ra olasizmi? Bu jonli? Bu juda yaxshi ishlaydi.
Bu raqamga qarang.
Bu erda qancha mahsulot bor? Sakkiz.
Bu erda qancha narsa bor, bu erda va bu erda? 000.
Ushbu o'sish bitta.
U erda biz boramiz.
O'ng? Bu juda yaxshi ishlaydi.
Shu bilan birga, yigitlar, keling, narsani shifrlashga harakat qilaylik.
Agar bossangiz bu erda, bunga qarang.
Bu ishlamayapti.
Yaxshi? Decriminalisation ish, lekin oshirish ishlari.
Yaxshi.
Nima uchun bu? Buning sababi shundaki, biz bu erda ham narsani aniqlashimiz kerak.
Bu yangilanish bor, bu aslida pasayishda.
Bu aniqlanmagan, biz uni o'sishda qanday belgilasak, xuddi shunday aniqlaymiz.
Bu juda oddiy, bolalar.
Faqat bu erda narsani nusxa, va keyin bu erda uni qo'yish va keyin kabi bu erda bir nuqta qo'yish this.id.
Narsani ayting.
Natijada qaraylik.
U erda biz boramiz.
Mayli, bu 1123456 ni oshiraylik.
Keling, biz boramiz, yigitlar.
Bu juda yaxshi ishlaydi.
Ko'ryapsizmi, biz boramiz.
O'ng.
Ajoyib.
Xo'sh, endi men xohlagan keyingi narsa nima, bolalar, har safar biror narsani oshirganingizda, yaxshi, nima bo'ladi, bu erda bu raqamlar, uch, sakkiz va etti.
Shunday qilib, nima bo'ladi, biz barcha raqamlarni birlashtiramiz va keyin uni bu erda ko'rsatamiz.
Shunday qilib, hozirda u nolga teng, shuning uchun biz barcha raqamlarni qo'shamiz va keyin uni xuddi shunday joylashtiramiz va bunga qaraymiz.
Yaxshi? Shunday qilib, agar biz barcha raqamlarni qo'shsangiz, bu erda hech narsa ishlamasa, ko'rasiz.
bu ko'rinish kabi qo'shimcha narsa, bu erda ham ishlaydi.
Keling, bu vazifani bolalar qilaylik.
Shunday qilib, biz bu erga qaytib kelib, keraksiz sharhlardan foydalanamiz, uni o'chirib tashlashingiz mumkin yoki shunchaki muammo tug'dirmasligingiz mumkin.
Yaxshi? Shunday qilib, juda pastki qismida, siz bir vazifani qilish uchun harakat qilyapmiz, siz gonna, funktsiya hisob nom bu qarash qilaylik yoki uzr, hisob qilaylik-ku.
Bu ESX xato funktsiyasi bo'ladi, yaxshi, shunga o'xshash narsa.
U erda biz boramiz.
Xo'sh, bolalar, biz bu funktsiyada nima qilamiz? Biz barcha raqamlarni qo'shamiz bu raqamlarni bu erda ko'rasizmi? Biz barcha raqamlarni qo'shamiz va biz uni shu erda ko'rsatadigan joyda ko'rsatamiz.
Yaxshi.
Xo'sh, bolalar, bu erda hisoblash funktsiyasi qachon va qanday ishlashi kerak? Agar diqqat bilan bolalar farq bo'lsangiz, bas, siz nima qilayotganingizni, agar Plus yoki minus yangilash vazifasi har safar o'ng ishlaydi yo'qmi.
Shunday qilib, men aytmoqchi bo'lgan narsani xohlayman, hisoblash funktsiyasi faqat yangilanish funktsiyasi ishga tushganda ishlashini xohlayman.
Yaxshi? Shunday qilib, bu narsani qilish uchun, faqat Okay narsani nusxa, va keyin bu kabi bu erda narsani boshlashi.
U erda biz boramiz.
Qilingan.
Shunday qilib tinglang.
Xo'sh, nima bo'ladi, faqat sizga namunani ko'rsataman, Shuning uchun men shu yerdaman konsol jurnali.
Yaxshi.
Konsol.
Jurnal va bu erda biz shu yerdamiz, hisoblash kel korrelyatsiya funktsiyasi ishlamoqda.
Xo'sh, endi narsani saqlang.
Endi tinglang, har safar yangilash funktsiyasi ishga tushganda, hisoblash funktsiyasi ham ishga tushadi bu ko'rinishga o'xshash narsa, birinchi navbatda buni qilish konsol jurnali, uni olib tashlang yoki izoh bering.
Mayli, narsani saqlang.
Endi bolalar, natijani ko'rib chiqaylik.
Mayli, bu erga qaytib kelaylik, konsolni oching, o'ng tugmasini bosing tekshiring, xop.
Endi har safar plyusni bosganingizda, birinchi navbatda, konsolga boramiz.
Xop, agar ortiqcha yoki bu kimyo minus ko'z bosing, har safar, bu erda, bu bir, soni bir modernizatsiya bormoqda va keyin, biz bu hisoblash funktsiyasi ishlayotgan qolibsan.
Biz ushbu sharhni hisoblash funktsiyasidan olgan joydan olamiz, bu qaysi biri, maylimi? Bu shuni anglatadiki, bu narsa juda yaxshi ishlaydi.
Xo'sh, endi, bolalar, biz bu narsani tanlashimiz kerak.
Agar ko'ryapsizmi 01? Ikkinchi? Bu erda nolni ko'rasizmi? Biz nolga maqsad kerak.
Xo'sh, buni qanday maqsad qilaman? Bunga qarang.
Mayli, bolalar, bu erda html indeksimizga qaytaylik va keyin nav satrini ochaylik.
Xo'sh, buni bu erda ko'ryapsizmi? Bizda ozgina arava miqdori bor, yaxshi, bu sinf, biz uni JavaScript ichida osongina nishonga olishimiz uchun ID bo'lishini xohlaymiz.
Xuddi shu narsani nusxalash.
Ha.
Va keyin ikki iqtibos uchun ID teng qo'yish.
Xo'sh, endi bajarilgan narsani joylashtiring.
Mayli, bolalar, endi, yana narsani nusxa ko'chiring.
Ning bizning asosiy J S qaytib kelaylik.
Yaxshi.
Endi hisoblash ichida, bu qarash, men bu erda gonna emasman, ruxsat qo'rg'oshin arava icon, savat icon, biz gonna yozish hujjat yoki kechirasiz odamsiz teng, hujjat nuqta ID apparati tomonidan element olish, double quote, amalga duch.
Shunday qilib, biz nima qilyapmiz, biz bu erda belgini tanlaymiz va keyin tanlovni o'zgaruvchining ichida saqlaymiz.
Hozircha juda yaxshi, yigitlar.
Endi, buning o'rniga, bunga qarang, men nima qilaman, men o'ng tugmasini bosaman savat belgisi, nuqta innerHTML Amerika 100 ga teng.
Misol tariqasida, bolalar, bunga qarang.
Okay, bas, endi men ochib, agar natijalar, bu ko'ring.
Bu qanchalik nolga teng.
Bu dalil qara, ortiqcha bosing endi 100.
Lekin men yana bosing, agar, bu gonna ish emas.
Xo'sh, uni qanday ishlashim mumkin? Shunday qilib, bu qarash.
Buni xohlamayman.
Bunga qattiq kodlangan qiymat deyiladi.
Men bu bolalar istamayman.
Yo'q, yo'q, buni xohlamayman.
Bunga qarang.
Men bu erga kelaman va keyin konsolni uraman.
Yaxshi? Konsol.
nuqta jurnali.
Yaxshi.
Endi bu erda, men haqman.
kalit, B, s,k va boshq.
Narsani saqlang.
Keling, bu erga qaytib, konsolni shunday ochamiz.
Yaxshi? Endi bu qarash.
Keling, buni tanlaymiz, buni tanlang, xop, qarang, shunga o'xshash narsalarni tanlang va tinglang - ni tanlang.
Endi, agar men bu savatni ochsam, bunga qarang.
Bu erda qancha narsalarim bor? Menda 1234 bor.
Mening savatimda to'rtta narsa bor.
Agar ob'ektni ko'ryapsizmi? Bolalar? Bu 2434 ga qarang.
Nima istaysiz? Men barcha raqamlarni kiritish istayman.
Xo'sh, shuning uchun barcha raqamlarni qo'shish uchun men hozir nima qilaman, faqat elementni tanlaganimda, nima qilyapman, men faqat elementni nishonga olaman, emas menga ID kerak emas, men faqat elementni qaytaraman.
Buni qanday qilaman, bu ishni ko'rib chiqing, bu erga qaytib keling.
Va biz xarita funktsiyasidan foydalanamiz, bu Savatga qarang, to'g'ri, nuqta xaritasi, qavs, siz ESX xato funktsiyasini eshitasiz.
Endi biz x argumentini o'tkazamiz, ya'ni barcha ob'ektlarni birma-bir nishonga oladi.
Bu erda bizda nechta ob'ekt bor? 12344 ob'ektlar, huh? X ularning barchasini birma-bir nishonga oladi va faqat elementni oladi.
Bunga qarang.
Shunday qilib, faqat elementni belgilash uchun siz faqat chiqish elementini urasiz.
Xop, element.
Qilingan, bolalar.
Uni saqlang.
Endi natijani bir soniya qilaylik.
Ustiga bosing bu erda.
Xop, bosing bu erda bu kabi.
Buni oling.
Buni oling.
Endi bolalar, buni ko'ra olasizmi? Biz faqat raqamni boshqa hech narsa olmaymiz.
Mayli, biz faqat raqamni olamiz.
Bu erda uchta.
Uchtasi bu erda.
Bu to'rtta to'rt bu erda.
Bu besh, besh bu erda va uch bu erda.
Endi bolalar, biz barcha raqamlarni qo'shish uchun qisqartirilgan funktsiyadan foydalanamiz.
Bu erga qaytib keling.
Va endi bundan keyin biz bu erga boramiz nuqta radiusi.
Bu r e d foydalanish e kamaytirish qara.
Xop, endi o'ng qavs.
Shunday qilib, siz bu erda boshqa ESX xato funktsiyasini yozmoqchisiz, ha? Va endi bolalar, siz bu erda ikkita dalilni o'tkazasiz.
1X va boshqasini biz y deb ataymiz.
Xo'sh, nega men x va y yozdim? X va y yozishning asosiy sababi x va y, ulardan biri oldingi raqam.
Ikkinchisi esa keyingi raqam,ya'ni bir soniya.
Xo'sh, hisoblash qanday ishlaydi? Bunga qarang.
Avvalo, ning x okay sifatida uch ko'rib chiqaylik? Shunday qilib, uchtasi nima qiladi, uchtasini to'rt bilan qo'shadi.
Shunday qilib, uch plus to'rt etti Okay bo'ladi qancha, shuning uchun bu etti keyin keyingi soni uch etti plus uch, qancha 10 nima, avvalgi soni bo'ladi.
Okay, bas, nima keyingi soni besh.
Shunday qilib, 10 plus besh qancha 15 deb ayting.
Bu narsa qanday ishlaydi.
Xo'sh, umid qilamanki, qisqartirilgan funktsiya aslida qanday ishlashi kerakligini tushundingiz.
Endi bu qarash, biz x plus y urish uchun harakat qilyapmiz.
Endi, ixtiyoriy ravishda, siz bu erga qo'yasiz vergul, va keyin 00 bu standart raqam ekanligini anglatadi, ya'ni biz hisoblashni noldan boshlashni xohlaymiz.
Mayli, narsani saqlang.
Endi, bolalar, natijani ko'rib chiqaylik.
Endi bu erga qaytib, keyin 12345 ni yozamiz.
Bu besh yilni ko'ra olasizmi? Bizda beshta narsa bor.
Endi bu erga kelaylik, keyin biz uchta narsani qo'shamiz.
1233.
U erda siz borib.
Bu sakkizni bu erda ko'ra olasizmi? Besh ortiqcha uch, qancha? Sakkiz.
Hisoblash juda yaxshi ishlaydi.
Bu ko'proq narsalarni qo'shing.
U erda biz boramiz.
Keling, biror narsani kamaytiraylik.
U erda biz juda yaxshi ishlaymiz, bolalar.
Lekin bolalar, biz narsa konsolda bo'lishini xohlamaymiz.
Biz bu erda bo'lishini istaymiz, xuddi bizning finalize loyihamiz kabi.
Mayli, raqamni bu erga qo'yish uchun juda oddiy, yigitlar.
Bu erga qaytib keling.
Bu erda arava belgisi mavjud.
Ha.
Narsani nusxalash.
Bu erga qaytib keling.
Narsani to'lang.
Yaxshi.
Keyin sizda bu konsoldan foydalanishga teng bo'lgan nuqta innerHTML bor edi.
Ha, narsa bor.
Yaxshi.
Uni bu erga qo'ying va konsolni bu erdan olib tashlang.
U erda biz boramiz.
Yigitlar qilingan.
Uni saqlang.
Natijada qaraylik.
Keling, buni yopaylik.
Keling, narsani oshiraylik.
Mayli, biz boramiz.
Siz bu yerda yetti mahsulot ko'rish, bu yerda yetti mahsulot.
Keling, buni uchtaga oshiraylik.
10 bu erda mahsulot.
Ning mikrosxemalar kabi decriminalising harakat qilaylik.
U erda biz boramiz.
Ko'ryapsizmi, bu juda yaxshi ishlaydi, bolalar.
Yaxshi, shuning uchun biz bu nuqtaga va hamma narsaga muvaffaqiyat qozonamiz.
Lekin bolalar, bu erda narsa.
Bu ettinchi raqam bitta, bittasi to'qqiz.
Agar narsa rephrase on, barcha ma'lumotlar ketdi.
Buni ko'ra olasizmi? Ammo yakuniy loyihaga qarasangiz, bunga qarang.
Sahifani yangilasangiz ham, u ketmaydi.
Xo'sh, buni bu erda ko'rasizmi? Men bu narsani yana va yana tetiklashtiraman.
Va yana, u ketmaydi? Qanday qilib bu mumkin? Men mahalliy saqlash deb nomlangan narsadan foydalanmoqdaman.
Agar biz mahalliy xotiradan foydalansak, bu ma'lumotlarni saqlashimiz mumkin.
Bunga qarang.
Men f urdi agar 12.
Va agar men bunga borsam, bu erda dastur deb nomlangan narsa bor.
Yaxshi.
Endi, yana bir bor, bolalar, kattalashtirishga ruxsat bering, bu mahalliy xotira bor, saqlash deb ataladigan narsa bor, yaxshi, bu sizning chrome brauzeringizning o'rnatilgan xotirasi.
Agar mahalliy saqlash saqlash buyurtma berish mumkin bo'lsa, agar bu birini bosing.
Va endi bunga qarang.
Barcha ma'lumotlar bu erda saqlanadi qolibdi.
Yaxshi? Agar biz yangilansak ham, hech narsa bo'lmaydi.
Bunga qarang.
Agar bu bir nolga ega ko'rish mumkin? ID bu bitta, element beshta.
Keling, buni topaylik, bu aslida bu.
Buni bu erda ko'ra olasizmi? Qancha? Qancha mahsulot bu erda besh mahsulot bor siz minus bu qarash bo'lsa, agar soni bu yerda o'zgarib, deb ko'rish mumkin, bu ko'z qoralovchi, element u shuningdek bu erda saqlanadi cho'mish bir vaqtning o'zida yangilangan bormoqda.
Biroq, siz narsaga murojaat qilishni yoqtirasiz, u hali ham mavjud, u hech qachon ketmaydi, chunki bu narsa mahalliy xotirada saqlanadi.
Shunday qilib, bolalar, biz hozir loyihamizda bir xil funktsiyalarni amalga oshirmoqchimiz.
Shunday qilib, boshlaylik.
Mayli, bolalar, uni tetiklashtirgandan so'ng, siz ushbu ilovaning yangi namunasini ko'rishingiz mumkin.
Yaxshi.
Har safar bunday plyusni bosganingizda, mayli, bunga qarang.
Endi mahalliy xotirada nimani saqlamoqchiman? Bunga qarang.
Okay, biz bu erda ma'lumotlar, bir poda bor, huh? Men maxsus istayman, men mahalliy saqlash ichida savat qo'yish istayman, okay, bas, brauzer, men faqat bu kabi oldi qaysi element eslaydi, deb, ko'ryapsizmi.
Xo'sh, bu narsalarni bu erda ko'rasizmi? Ha, bu narsalar aslida savat ichida edi.
Yaxshi.
Mahalliy xotiradan foydalanganimda, savat u erda saqlanib qoldi.
Biz hozir aynan shu printsipdan foydalanamiz.
Xo'sh, qachon mahalliy qidiruvni boshlashni xohlaymiz? Eshiting, har safar ortiqcha yoki minusni bosganingizda, biz mahalliy xotirani ishga tushiramiz, shunga o'xshash narsa.
Mana, bu erga qaytib kelaylik.
Ha, endi pastga aylantiring.
Menga bir soniya bering.
O'sish qayerda? Shunday qilib, bolalar, siz bu erga oshirish funktsiyasiga kelasiz, yaxshi, bu erda.
Yangilanishdan oldin siz mahalliy qidiruvni yozasiz, uning mahalliy xotirasiga qarang.agar.
Siz nick nuqta bosing, men vazifalari ko'p qarang.
Bu erda siz ko'rasiz, elementni o'rnating, elementni olib tashlang.
Okay, biz gonna foydalanish majmui ob'ektni odamsiz, u mahalliy saqlash ichida ob'ektni o'rnatish uchun ishlatiladi, men mahalliy qidiruv ma'lumotlarni kiritish qilaman.
Va get elementi mahalliy qidiruvdan ma'lumotlarni olish uchun ishlatiladi, yaxshi va clear hamma narsani o'chirish uchun ishlatiladi.
noziklik.
Endi o'rnatilgan element ichida buni ko'rib chiqing, bizda ikkita narsa bo'ladi.
Bunga qarang.
Birinchidan, biz ikki taklif bor fiz.
Bu yerga qo'shish siz xohlagan nomni berishingiz mumkin, muammo yo'q, lekin keling, buni sodda qilaylik.
OK, men uni nomlayman ma'lumotlar.
Yaxshi, shuning uchun bu sizning mahalliy xotirangizda saqlanadigan nom.
Sizga ko'rsataman.
Shunday qilib, agar biz finalchi loyiha ro'yxatiga qarasak F 12.
Va keyin ilovaga o'ting ko'ryapsizmi, bu erda kalit ma'lumotlar.
Buning sababi, men unga ma'lumot nomini berdim.
Bu kalit.
Agar yozsangiz, o'z ismingizni aytaylik, aytaylik, men shu yerdaman, quvonch, maylimi? Agar shunday qilsam, nima bo'ladi, kalit quvonch deb nomlanadi va keyin barcha qadriyatlar bu erda saqlanadi.
Yaxshi? Shunday qilib, bolalar, umid qilamanki, nima uchun bu erda ism yozganimni tushundingiz.
OK, bu kalit.
Shunday qilib, men faqat emasman, men faqat gonna oddiy tutish qilyapman.
Men gonna bu kabi ma'lumotlarni yozish qilyapman.
U erda biz boramiz.
Endi siz gonna bu yerda vergul qo'yish qilyapmiz, va keyin savat chiziqlar gonna SKD qilinadi o'tishi uchun harakat qilyapmiz.
Savat, narsani saqlang.
Keling, natijaga qaraylik, bu erga qaytib keling.
Va keyin bu bizning loyihamiz.
Okay, f 12 dev vositalari ochish uchun.
Va endi dasturga o'ting.
Agar uni topa olmasangiz, shunchaki bosing bu erda va keyin siz biron bir dasturni topasiz.
Yaxshi? Endi biz mahalliy Qidiruvdagi xotiraga kelamiz, buni ochamiz, mayli, shunday.
U erda siz buni bu erda ko'rishingiz mumkin, bolalar, ma'lumotlar kalit, maylimi? Agar siz ismni o'zgartirsangiz, buni shunday qiling.
Mana, siz bu erda ismni o'zgartirasiz, chunki bu kalit.
Va bu saqlanadigan ob'ekt.
Yaxshi? Bunga qarang, ma'lumotlar bu erda.
Aytmoqchimanki, kalit bu erda va qiymat bu erda.
Endi, agar siz buni bosgan bo'lsangiz, unda barcha tafsilotlarni bu erda ko'rishingiz mumkin.
Hozirda mulk yo'q.
Endi unga qarang.
Agar siz plyusni bossangiz, bunga qarang, bolalar, saqlangan narsa bu erda saqlanadi.
Biz uni o'qiy olmaymiz.
Shunday qilib, bolalar, agar biz bu narsani o'qishni istasak, bu erda aynan nima yozilgan, xuddi shu kabi, xuddi shu kabi.
Shunday qilib, siz bolalar nima qilishingiz kerak, bunga qarang, men bilan birga ergashing, JSON dot Stringify degan narsa bor.
Okay, faqat narsa bor.
Bor.
Sizda JSON, nuqta Stringify bor edi.
Okay, endi qavs bu kabi bir narsa to'laydi.
U erda siz borib.
Narsani saqlang.
Endi natijani ko'rib chiqamiz.
Keling, bu erga kelib, narsani yangilaymiz.
Xop, bas, endi bu, bu erda bosing, va keyin narsani o'chirish.
Xop, endi bu kabi plus bosing.
U erda biz boramiz.
Xop, biz bu erda bir narsa bor, faqat bu birini bosing.
U erda biz boramiz.
Siz bu erda saqlangan ma'lumotlarni ko'rasiz.
Endi bu qarash, biz bor 1-234-567-8910.
Shunday qilib, sizda bu erda 10 bor, 10 ham shu erda.
Keling, narsani kamaytirishga harakat qilaylik.
Agar siz biror narsani kamaytirsangiz, qiymat yangilanmayotganini ko'rishingiz mumkin.
Nima uchun bu? Buning sababi shundaki, bolalar, mahalliy stress faqat o'sishda emas, balki kamayishda mavjud, shunchaki narsani nusxalash.
Ha, bu erga kelib, yangilanishdan oldin yozgan.
Yaxshi.
Bu yerga qo'ying.
U erda siz borib.
Xuddi shu narsa.
Keling, orqaga qaytaylik va endi buni ko'rib chiqaylik.
Mahalliy saqlash hozirda Avstraliyada 10 huquqini dekriminallashtirish qanchalik ko'p.
Okay guys, endi, ning natijasidir aytaylik.
Yaxshi? Avvalo, sizga bu narsa kerak bo'ladi, maylimi? Bu kabi.
Endi bir narsani amalga oshirishga harakat qilaylik.
U erda biz boramiz.
Sizda ma'lumot borligini ko'rasiz, buni bosing.
Va keyin siz buni topasiz.
Xop, endi qiymati bu qarash oshirish uchun harakat qilaylik.
Bosing, bosing, bosing va keyin element ko'paytirilishini ko'rishingiz mumkin.
Biror narsani qayta yaratmoqchimisiz? Albatta, nima uchun? Keling, bu kabi jinoiy ish qilaylik.
U erda biz boramiz.
Bu mukammal yaxshi ishlamoqda.
Ko'ryapsizmi, keling, bu kabi narsalarni qo'shamiz.
Keling, bu kabi narsalarni ham qo'shamiz.
Yaxshi.
Agar siz bossangiz bu erda, keyin u erda barcha tafsilotlarni ko'rishingiz mumkin.
Mayli, yigitlar, bu nuqtaga va hamma narsaga qadar muvaffaqiyatli bo'lishdi.
Endi, bolalar, siz bir soniya, bunga qarang, bu uchtasini bu erda ko'rasizmi, sakkiztasi bu erda, siz yangilanganingizda, hamma narsa ketadi.
Ammo baribir, Salom, bolalar, bunga qarang, ma'lumotlar hali ham shu erda saqlanadi.
Shunday qilib, bizning asosiy vazifamiz hozirda mahalliy do'konlardan ma'lumotlarni bizning ilovamizga olishimiz kerak.
OK, buni qilish uchun juda oddiy.
Faqat bu erga keling.
Shunday qilib, bolalar ma'lumotlarni olish uchun, shuning uchun biz bu erda nima qilyapmiz, biz faqat mahalliy xotira ichidagi elementni o'rnatmoqdamiz.
Endi biz faqat juda yuqori kelgan ma'lumotlarni olish uchun ma'lumotlarni olish uchun harakat qilyapmiz.
Xo'sh, bu savatni bu erda ko'rasizmi? Ha, biz narsani olib tashlaymiz.
Endi mahalliy saqlash narsa olish uchun, siz JSON dot imloviy yozish kerak.
Yaxshi.
Bu kabi JSON nuqta imloviy.
Endi biz aslida bir qo'llab-joyiga bor.
Endi qavs ichida bu erda mahalliy saqlash mumkin, mahalliy saqlash nuqta olish elementi.
Ilgari u element etildi.
Endi bu narsa endi bolalar, siz qavsni urasiz.
Endi bolalar, siz menga kalitlarning nomini bergan kalitning nomi nima ekanligini aytasiz, to'g'rimi? Siz bu kabi ma'lumotlarni olasiz.
Mana, siz shu erda bo'lasiz, ikkita iqtibos.
Okay, ha, ma'lumotlarni bosing.
Endi ma'lumotlar olinadi.
Va keyin bolalar, biz bu erda yoki bayonot yozamiz, yaxshi.
Yoki, keyin biz bu erga boramiz, bu kabi bo'sh xato.
Xo'sh, nima uchun to'g'ri, bu buning sababi edi.
Mayli, bu yigitlarga qarang.
Shunday qilib, bizning mahalliy xotiramizda ma'lumotlar mavjud.
Bizda nima bor? Bizda allaqachon ma'lumotlar bor, lekin bizda hech qanday ma'lumot bo'lmasa nima bo'ladi? Agar bizda xato bo'ladigan biron bir ma'lumot bo'lmasa, demak, bu bizning dasturimizni buzadi, chunki biz to'g'ri bo'lgan narsa, biz barcha bayonotlarni beramiz va keyin biz sizga ilgari bu erda bo'lgan bo'sh massivni beramiz.
Bu qanday boshqarilganini eslaysizmi? savat bo'sh qator teng.
Yaxshi? Shunday qilib, agar bizda mahalliy ma'lumotlar mavjud bo'lsa, uni olish uchun ketadi, agar bizda yo'q bo'lsa, u faqat bo'sh qator bo'ladi.
Shunday qilib, umid qilamanki, siz shu paytgacha va hamma narsani tushundingiz.
Yaxshi? Keling, narsani saqlaylik.
Endi bolalar, natijalar ekraniga qaytib, buni ko'rib chiqaylik.
Bu erda nol.
Va bu Google qidiruv huquqi uchunmi? Ayni paytda siz faqat bir marta urdi hozir besh bo'ladi.
Yaxshi, bu besh yil va bu besh yil, agar siz uni yangilasangiz, yana noldan boshlanadi.
Agar bu yerni bosing, agar, bir marta olti bo'ladi.
Bu biz istamaydigan xatti-harakatlar.
OK, buni oldini olish uchun.
Va barcha narsalarni butunlay yangilash uchun siz nima qilmoqchi bo'lsangiz, shablonga o'tasiz, shablonni eslaysizmi? Shablon qayerda? Mana shablon.
Okay, faqat bu bir ochish.
Hozir, bu biri quyida bu odamlar qarash, biz tez qo'ng'iroq qilish uchun harakat qilyapmiz.
Xop, biz ruxsat aytish uchun harakat qilyapmiz, xop, qidiruv.
Xop, men bu erda bir qidirish vazifasini qilish qilyapman nega meni aslida bu izlash yozish edi va nima uchun bayon qilaylik.
OK, shuning uchun narsani saqlaganingizdan so'ng, natijalar ekraniga qaraylik.
Mayli, bunga qarang.
Xo'sh, nima istayman? Mana, bu erda aslida qancha ob'ekt bor? Ikki ob'ekt, maylimi? Birinchisi oltita.
Va ikkinchisi aslida uchta, ikkinchisi esa aslida nolga teng.
Xo'sh, shuning uchun biz identifikator va elementni maxsus qidiramiz, Agar identifikator mahalliy do'konlarda allaqachon mavjud bo'lsa, oltitasini oling va oltitasini bu erga qo'ying.
Agar u mavjud bo'lmasa, unda hech narsa qilmang.
Yaxshi, shuning uchun men bu erda qidiruv funktsiyasini yozdim.
Yaxshi.
Endi narsani aniqlaylik.
Xo'sh, shuning uchun siz teng yozasiz, keyin savat yozasiz, maylimi? Savat, nuqta toping, qavs, va keyin siz o'q funktsiyasini eshitasiz, siz bu erdan o'tasiz, x, maylimi? Bunga qarang.
x.id.
Shunday qilib, biz qarshi taalukli qilyapmiz nima, biz ID qarshi taalukli qilyapmiz.
Shunday qilib, siz imzo bilan uch baravar teng yozasiz.
Va keyin bu erda ushbu identifikatorni eslaysizmi? Ha, faqat bu erda ID o'tishi.
Shunday qilib, barcha identifikatorlarni birma-bir tekshiradi.
Xo'sh, bolalar, endi biz bu erda yoki bayonot yozamiz, bunga qarang yoki bo'sh qator.
Xo'sh, bu bilan nima demoqchiman? Men bu bilan degani, biz bir narsa topish mumkin, agar, deb, keyin bu erda uni saqlash.
Yaxshi? Agar biz hech narsa topmasak, bo'sh qatorni qaytaring.
Mayli, hozirgacha juda yaxshi, yigitlar.
OK, bolalar, bu qidiruv nusxa, pastga aylantiring.
Va bu erda nol, nolni olib tashlang.
Va keyin bu erda yozish uchun harakat qilyapmiz, bizning dollar belgisi jingalak qavs.
Okay, bu erda qidiruv qo'yish.
Xop, bas, men qo'ng'iroq qilish istaysiz nima menga aytadi, men element uchun qo'ng'iroq qilish istayman faqat.
ID istamayman.
Xo'sh, men nima qilmoqchiman, bunga qarang.
U erga qaytib boray.
Va endi men bu erda nuqta elementini qidiraman, maylimi? Bu kabi, mayli, agar ushbu elementni qidirish undefinedga teng bo'lsa, demak, agar biz uni topmasak, biz faqat nolni qaytaramiz.
Biz uni topish bo'lsa, bas, biz qidiruv dot ob'ektni qaytib fiz, bu kabi bir narsa, u erda biz borib.
Qilingan.
Natijani olish uchun qalinligini saqlang.
Shunga qaramay, bu natija.
Bu qara, avtomatik ravishda, biz bor 603.
Agar biz biror narsani yangilasak ham, bunga qarang, u hali ham ishlaydi.
Oltita bu erda, uchtasi bu erda, bu erda 512345 ni qo'yaylik, shunga o'xshash narsa, narsani yangilang.
U erda biz boramiz.
Bu beshlik hali ham mavjud.
Lekin hech narsa yo'q va endi hech narsa o'chirilmaydi.
Bu biz aniq bir natijasidir.
Va endi yigitlar bunga qarashadi.
Sahifani yangilasak ham, hech narsa ketmaydi.
Siz faqat bu kabi bir narsani oshirish.
Va keyin siz bu kabi narsani e'lon qilasiz, u erda biz hech narsa ketmaydi.
Yagona muammo bu bilan bog'liq, bunga qarang.
Bu qancha? 12, o'ng, bu kabi narsani yangilash, u nolga orqali ketadi bo'lyapdi.
Ammo agar siz biror narsani oshirsangiz, bu uchtaga qarang, to'g'rimi? Bu kabi uni emasmi, bo'ladi 13? Ko'ryapsizmi, biz hal qilishimiz kerak bo'lgan yagona muammo bor.
Juda oddiy, bolalar, yechim faqat pastga o'ting qaytib asosiy kelish juda oddiy.
Va keyin siz buni bu erda ko'rasizmi, shunchaki uni nusxa ko'chiring va keyin bir marta shunday qiling.
Xo'sh, bu bilan nimani nazarda tutyapman, shuni aytmoqchimanki, dastur har safar yuklanganda, bu ishlaydi, ya'ni u tezkor hisob-kitob qiladi va keyin bu erda ma'lumotlarni chop etadi.
Shunday qilib, men sahifani yangilash bo'lsa ham, bu qarash, u faqat gap qarash 13 hali u erda qoladi.
Ning bu raqam ko'z oshirish uchun harakat qilaylik 17 ular bu kabi narsa kamaytirish boshladi, yoki, ehtimol, bu oshirish ham yanada hisoblanadi 24 hozir sahifani yangilash.
U erda biz qildik.
Hozirgacha.
Shunday qilib, yaxshi bolalar, biz mahalliy saqlash xususiyatini ilovamizga muvaffaqiyatli kiritdik.
Yaxshi bolalar, oldinga siljishdan oldin, bizning kodimizda ba'zi muammolar bor, biz ularni tuzatishimiz kerak.
Misol uchun, bu qarash.
Men bu erda mening sichqoncha qo'yish bo'lsa, kursor Finalize loyihasi nisbatan markerni o'zgarmaydi.
Bunga qarang.
Men bu erda mening sichqoncha qo'yish bo'lsa, okay, pointer uchun kursor o'zgarish o'zgarishlar.
Ushbu muammoni hal qilish uchun o'zingizning uslubingizga qayting css eng yuqori qismida, yaxshi, tananing ostida, siz buni eshitasiz.
Yaxshi.
Shunday qilib, nima qilayapman, men barcha belgisini nishonga qilyapman, HTML elementlar, okay, va keyin men bola yoki qiz bolani oldini olish uchun mulkni belgilash sozlamalari qilyapman, tab, kursor pointer, narsani saqlash.
Endi natijani ko'rib chiqamiz.
Yaxshi.
Shunday qilib, har safar sichqonchani bu erga qo'yganingizda, kursor ko'rsatgichga o'zgaradi.
Ajoyib.
Mayli, bolalar, keyingi muammo aslida minus tugmachasida.
Yaxshi? Shunday qilib, muammo shundaki, minus tugmasi konsolda xatolikni ko'rsatadi.
Har safar mahalliy xotira bo'sh.
Bu bilan nimani nazarda tutayotganimni sizga ko'rsataman.
Okay, bas, bolalar, siz gonna o'ng tugmasini bosing odamsiz, Agar gonna tekshirish bosing odamsiz, okay, mahalliy qo'llash orqali kelib, bu kabi mahalliy saqlash.
Endi, buni qiling bolalar, ustiga bosing bu erda, hamma narsani o'chirib tashlang.
Endi sahifani yangilang, konsolga qayting.
Va endi minusni bosing, bu yigitlarni ko'ra olasizmi? Bizda xato bor.
Xo'sh, bolalar, nega bu sodir bo'lmoqda? Sizga ko'rsataman.
Shunday qilib, siz shifrni ochish funktsiyasida asosiy js-ga o'tasiz, maylimi? Xato aslida bu erdan keladi.
Nima uchun xato keladi? Sizga aytsam, bolalar, mahalliy xotira bo'sh, demak, savat ham bo'sh.
Agar savat bo'sh bo'lsa, siz hech narsa topa olmaysiz, ya'ni oxir-oqibat qidiruv aniqlanmagan bo'ladi.
Va undefined band qilish uchun, biz har qanday FL bayonot yo'q.
O'ng? Shunday qilib, bu erda xato keladi.
Xatoni to'xtatish uchun siz bu erda boshqa if bayonotini yozasiz, yaxshi, keyin siz undefined ga teng qidiruvni bosasiz.
OK, keyin siz faqat narsani qaytarasiz.
Shunday qilib, men bu chiziq bilan nima demoqchisiz, men bu chiziq bilan degani qidiruv undefined bo'lsa, har bir vaqt, keyin hech narsa, deb.
Yaxshi, endi bu chiziq jarayonni to'xtatadi.
Va bolalar, siz ikkinchi qatorni ko'ryapsizmi? Siz bu erda boshqa yozasizmi? Okay bo'lsa, bu kabi bir narsa, boshqa, agar, va keyin amalga narsa saqlab.
Endi xatoni ko'rib chiqamiz.
Yaxshi? Shunday qilib, birinchi navbatda, mahalliy xotirangiz bo'sh ekanligiga ishonch hosil qiling.
Yaxshi.
Endi konsolga qaytaylik.
Endi minusni bosing.
U erda biz boramiz, bolalar.
Hozir hech qanday xato yo'q.
Ajoyib.
Endi, bolalar, uchinchi muammoga o'tamiz.
Shunday qilib, uchinchi muammoni namoyish qilish uchun, birinchi navbatda, Savatingizga biror narsa qo'shing.
Yaxshi? Bu kabi bir narsa qo'shish.
Mayli, biz boramiz.
Endi bolalar buni, sizning tekshiring borish va keyin bu kabi mahalliy saqlash qaytib borish.
Xo'sh, endi bu menga nima demoqda? Bu nima? Bu bizning savatimiz.
Xo'sh, shuning uchun biz tanlagan ma'lum miqdor bilan birga qaysi mahsulotlarni tanlaganimizni ko'rsatamiz, maylimi? Bu bu miqdor.
Yaxshi.
Shunday qilib, misol tariqasida aytaylik, men bu erdan hech narsa xohlamayman, ko'ylakni xohlamayman, nol miqdori, keling, uni nolga aylantiraylik.
Shunday qilib, men uni nolga aylantirdim, ya'ni savatimdan narsani olib tashladim.
Siz nolni ko'rsangiz ham, bu erda saqlanadigan ba'zi ma'lumotlarni ko'rishingiz mumkin.
Xo'sh, bolalar, savatda nol miqdori bo'lgan biror narsani saqlashning ma'nosi yo'q, bu hech qanday ma'noga ega emas.
Shunday qilib, biz bu qatorni olib tashlashimiz kerak.
Xo'sh, bu nolni qaysi qatorda olib tashlashimiz kerak.
Shunday qilib, bolalar, buning uchun, faqat kamaytirish funktsiyasi haqida VS kodi qaytib keladi.
Okay, bolalar, kamaytirish funktsiyasi haqida asosiy Jas qaytib kelib.
Xop, men bolalar bilan birga amal.
Men nima qilayotganimni ko'rib chiqing, men bu erda savatni yozaman.
OK, men savatni yana yozaman.
Va keyin men filtr funktsiyasidan foydalanaman.
Bunga qarang.
Men bu erga boraman nuqta filtri, mayli, shunga o'xshash narsa.
Endi siz qavsni ko'rasiz.
Bu erda siz ESX xato funktsiyasini yozasiz, maylimi? Va argument ichida siz xohlagan narsani o'tkazishingiz mumkin, muammo yo'q.
Ammo ushbu qo'llanma uchun uni soddalashtiraylik.
Men gonna uni x o'tib qilyapman.
Yaxshi.
Endi biz nimaga qarshi filtrlaymiz? Bu qara, biz element qarshi filtrlash etiladi, huh? Endi biz bu kabi qo'shimcha elementni tanlaymiz.
Xavotir olmang, bolalar, buni tushuntirib berishga ijozat bering.
Avvalo, butun bayonotni yozamiz.
Yaxshi.
Shunday qilib, x nuqta element, okay, nolga teng emas.
Mayli, bolalar, endi bayonotning ma'nosini tushuntirib beray.
Bu savatni bu erda ko'rasizmi? Bu nima? Va u aslida nimani olib yuradi? Keling, uni mahalliy do'konlarimiz va vs kodimiz bilan yonma-yon saqlaylik, yaxshi, mahalliy ko'ylakdagi savat aslida array.
Yaxshi, bu maydon ichida biz do'kondan tanlagan barcha mahsulotlarni olib yuradi.
O'ng? Va keyin biz bu erda filtr funktsiyasini qo'lladik.
Xo'sh, filtr funktsiyasining ushbu x deganda nimani nazarda tutaman? Siz shu bu ko'ryapsizmi, biz to'rt moslamalarni bor bu erda qancha ob'ektlar bor 1234.
Shunday qilib, filtri funktsiyasi X otish, men bu maqsad birma-bir, birma-bir bu ob'ektlar barcha degani.
Yaxshi.
Keyin, biz tekshirayotgan narsa bu narsaga qarshi.
Shunday qilib, bu individual ob'ektga qarang.
Bu erda qancha narsalarni ko'rishingiz mumkin? Biz ikki narsani bor, ID va element.
Bizga identifikator kerak emas, faqat elementni tekshirishimiz kerak.
Yaxshi.
Shuning uchun men ushbu qo'shimcha elementni yozdim.
Va men bu butun chiziq qo'shimcha element nolga teng emas degani nima, men, biz element ustida nol yo'q bo'lgan barcha moslamalarni tanlash uchun harakat qilyapmiz, degani, bu otish.
Xo'sh, bolalar, siz menga ayting-chi, bizda element nolga teng bo'lgan qancha ob'ekt bor? Nol elementiga ega bo'lgan faqat bitta ob'ekt, ya'ni bu filtr ushbu ob'ektni olib tashlaydi va keyin boshqa narsalarni qaytaradi.
Shunday qilib, bolalar filtr funksiyasi filtrlangan ma'lumotlarni qaytargandan so'ng, biz keyingi nima qilyapmiz, biz ma'lumotlarni Savatga qaytarib yuborayotganimizni aytamiz.
Xo'sh, bolalar, bu qatorni bu erda ko'ryapsizmi? Biz bu narsani kesib tashlaymiz, keyin uni pastki qismga qo'yamiz.
Xo'sh, nega ular bunday qilishdi? Buning sababi JavaScript mexanikasini bilasizmi? JavaScript bu kabi yuqoridan pastgacha ishlaydi? Yaxshi.
Endi, bolalar, bizning kodimizni tahlil qilaylik.
Bu satrlarda nima qilyapmiz? Bu satrlarni foydalanish? Biz manipulyatsiya qilmoqdamiz, demak, biz tanlagan barcha mahsulotlarni o'z ichiga olgan savatimiz ma'lumotlarini tahrir qilamiz.
Va biz mahalliy saqlash majmui element bilan nima qilyapsan.
Ushbu satrda biz nima qilyapmiz, biz savatning ma'lumotlarini mahalliy saqlash joyida saqlaymiz.
Shunday qilib, bu narsalarni tepaga qo'yishning asosiy sababi va bu pastki qismdan biri shundaki, biz JavaScript-ni ushbu kod satrlarini, birinchi navbatda, bizning ma'lumotlarimizda kerakli tahrir va o'zgarishlarga ega bo'lishimiz uchun ishlatishini xohlaymiz. savat.
Shunday qilib, bu amalga oshirilgandan so'ng, biz JavaScript-ni keyingi qilishni xohlaymiz, biz uning barcha ma'lumotlarni saqlashini xohlaymiz, demoqchimanki, yangilangan barcha ma'lumotlarni shu kabi mahalliy xotiraga saqlang.
Shunday qilib, agar men bu erdan narsani kesib tashlasam, keyin uni shunday tepaga qo'ysam, bu bolalar, bu hech qanday ma'noga ega emas.
Bu nimani anglatadi? Shunday qilib, JavaScript, u nima qiladi, sizda mavjud bo'lgan savat ma'lumotlari, JavaScript faqat birinchi navbatda narsani saqlaydi va keyin barcha tahrirlarni bajaradi, ya'ni bolalar, siz mahalliy xotiradagi yangilanishlarni ko'ra olmaysiz.
Shuning uchun bolalar, siz mahalliy xotirani shu kabi pastki qismga qo'ydingiz.
Xo'sh, yigitlar, umid qilamanki, nima uchun buni pastki qismida yozganimni tushundingiz.
Xuddi shu tarzda, siz bu erda oshirish funktsiyasini ochasiz.
Va keyin bu erda mahalliy qidiruv, siz bu erdan bu kabi narsalarni oldingiz va keyin uni pastki qismga qo'ydingiz.
Mayli, narsani saqlang.
U erda biz boramiz.
Qilingan.
Endi, bolalar, bizning kodimizni tekshiramiz.
Mayli, keling, avval uni katlaylik, endi, yigitlar, narsani saqlang.
Kodni tekshiring.
Yaxshi.
Shunday qilib, endi bizda nol bor, to'g'rimi? Keling, narsani yangilaymiz.
Keling, u ishlaydimi yoki yo'qmi.
Shunday qilib, birinchi navbatda, ma'lumotlarni yo'q qilaylik.
Xop, yana narsani qarang.
Va keyin men bu erda biror narsani tanlayman.
Yaxshi? Bu erda biror narsani tanlang.
U erda biz boramiz.
Bu birini tanlang, bu erda ma'lumotlarni ko'rishingiz mumkin.
Yaxshi bolalar, endi natijani sinab ko'raylik, bu to'rtta bu erda aslida bu erda, maylimi? Har safar plyusni bosganingizda, u ishlaydi, maylimi? Agar siz minusni bossangiz, minus ham ishlaydi.
Keling, borib, uni nolga aylantiraylik.
Yaxshi? 321, u nol bo'lishi kerak, huh? Bu ishlamaydi, lekin buning o'rniga bizga xato beradi.
Nima uchun bu aslida sodir bo'ladi? Bu yigitlarga seriyali qarash tufayli.
Buni bu erda ko'rasizmi? Serial, shuning uchun biz yangilash birinchi ishlatish uchun kerakli, va keyin, biz bu chiziq ishlatish uchun kerakli, chunki o'sha.
OK, shuning uchun u teskari yo'nalishda bo'lgani uchun, shuning uchun biz o'zgarishlarni ko'ra olmaymiz.
Shunday qilib, buni tuzatish uchun, bolalar, bu erdan narsani kesib tashlang.
CTRL X, bu kabi bu erda qo'yish.
Mayli, biz boramiz.
Endi bolalar, narsani saqlang.
Va keyin natijani ko'rib chiqaylik.
Yaxshi.
Endi bu erga kelaylik va keyin narsani yangilang.
Endi bu erda qancha narsalarni ko'rishingiz mumkin? Faqat bitta parcha.
Xop, bosing bu erda.
Qilingan.
Endi u bir vaqtning o'zida nolga teng, u bizning savatimizdan ob'ektni olib tashladi.
Ajoyib.
Keling, bu erda sinab ko'raylik.
3210.
Ketdi? Buni ko'ra olasizmi? Keling, buni ham sinab ko'raylik.
43210.
U erda biz boramiz.
Bolalar,biz bu nuqtaga qadar muvaffaqiyatli.
Yaxshi, bolalar.
Hozirgacha juda yaxshi.
Endi biz savat sahifasini yaratamiz.
Okay, shuning uchun yakuniy sinov loyihasi qaraylik, savat sahifa bu kabi bir narsa qarash kerak, agar bu ko'rishingiz mumkin.
Shunday qilib, sizga kichik demo berishga ijozat bering, bu umumiy hisob-kitob bo'ladi, keyin bizda ikkita variant bo'ladi, yoki to'lov opsiyasi yoki aniq savat.
Shunday qilib, bu nima qiladi, bu yerdan hamma narsani o'chirib tashlaydi.
Bu yerda, bu kichik karta yuqoriga keyingi.
Bu biz do'kon sahifasidan tanlagan barcha narsalarni aks ettiradi.
Yaxshi, va endi bunga qarang, bu birlik narxi, yaxshi, bitta bo'lakning narxi, bu miqdor va bu umumiy narx.
Va bu umumiy narx aslida bu 45 ni ikkiga ko'paytirish orqali hisoblanadi.
Shunday qilib, Agar siz plyusni bossangiz, bu erda narx bir vaqtning o'zida oshganini ko'rishingiz mumkin, bu erda umumiy hisob bu erda oshadi.
Keling, yana shunday qilaylik, bunga qarang.
Xo'sh, siz ham shunday kamaytirishingiz mumkin, biz boramiz.
Aytaylik, siz bu narsani xohlamaysiz.
Shunday qilib, siz shunchaki xochni bosishingiz mumkin va bu kabi narsalarni butunlay olib tashlaydi.
U erda biz boramiz.
Okay, bu kabi bir narsa.
Bunga qarang.
Endi aytaylik, siz hech narsani xohlamaysiz siz hech narsa sotib olishni xohlamaysiz, shunchaki ustiga bosasiz aniq savat hamma narsani olib tashlaydi va bu sizga nomlangan variantni ko'rsatadi savat bo'sh arava bo'sh, siz uyga qaytishingiz mumkin, shunga o'xshash narsa.
U erda biz boramiz.
Siz qarang.
Endi arava sahifasini qurishni boshlaylik.
Mayli, bolalar, savat sahifasini yaratish uchun, keling, VS kodimizga qaytaylik, yaxshi va papka tuzilishida, uni yaxshiroq ko'rishingiz uchun biroz kattalashtirishga ruxsat bering.
Bu erda.
Biz yangi fayl yaratamiz.
Biz uni nomlaymiz avtomobil nuqta HTML, mayli, avtomobil nuqta HTML, shunga o'xshash narsa.
Xo'sh, endi bolalar men bilan birga ergashadilar, biz rasm manbasiga boradigan papkani yaratamiz.
Shunday qilib, ushbu papkani yaratishning asosiy maqsadi shundaki, biz papka tuzilishini toza va toza tarzda boshqarishimiz uchun barcha uslublar jadvalimiz va JavaScript fayllarimizni shu erda saqlaymiz.
Yaxshi, shuning uchun yigitlar men bilan birga ergashadilar.
Okay, faqat ha asosiy harakatlantiring, bu erda va bu kabi bu erda uslubi css.
Yaxshi.
Shunday qilib, bolalar beri, biz bu erda papka tuzilishini o'zgartirish, biz okay, indeks html qaytib borish kerak.
Va siz bu erda, bu erda va bu erda havolalarni ko'ryapsizmi, biz buni yangilashimiz kerak.
Aks holda, biz bu kabi bir narsa ko'rish mumkin.
Buni bu erda ko'ra olasizmi?
Shunday qilib, bizning loyihamizda JavaScript va uslublar jadvali qo'llanilmadi, chunki biz bu erda papka tuzilishini yangilaymiz.
Shunday qilib, biz bu yangilanishlarni bu erda ham qilishimiz kerak.
Shunday qilib, bu erga kelib, keyin manba slash narsani saqlash yozish.
Bu erda skriptga pastga aylantiring.
Siz gonna sizning manba asosiy chiziq yozish qilyapmiz, narsani saqlab.
Endi natijani ko'rib chiqamiz.
Agar hamma narsa ketsa, siz shunga o'xshash narsani ko'rishingiz kerak, ko'rasiz.
Yaxshi, yigitlar, mukammal.
Keling, bu erda papka tuzilishiga qaytaylik.
Agar bu indeks html ko'ryapsizmi? Ushbu sahifa uchun bizda ushbu asosiy js fayli mavjud.
Va cart HTML uchun bizda boshqa fayl bo'ladi, biz uni nomlaymiz, arava, nuqta stul, shunga o'xshash narsa.
Yaxshi.
Endi, bolalar, bu erda savatimizga HTML - ga qaytaylik, biz qozon kodini qo'shamiz, mayli, shunga o'xshash narsa.
undov belgisi, bajarildi ga teging.
Endi, bolalar, biz noldan hech narsa yozishimiz shart emas, biz faqat HTML indeksidan joylashtirish satrlarini nusxalaymiz.
Yaxshi.
Shunday qilib, indeks html qaytib kelib, yuqoriga o'ting.
Bu uchta satrni bu erda ko'rasizmi? Bu bootstrap belgisi.
Bu uslub uchun havola css, va bu sarlavha yorlig'i, yaxshi, faqat uchta qatorni nusxa ko'chiring, shunga o'xshash narsa.
Yaxshi.
Narsani nusxalash.
Keling, savatimizga qaytaylik HTML va keyin narsani shu bilan almashtiring.
Mayli, biz boramiz.
Qilingan.
Endi, bolalar, bu erda siz skript manbasini boshqarish maydonini yozasiz, manbangizga o'tasiz va keyin joriy jasni tanlaysiz.
Mayli, narsani saqlang, yigitlar.
Mayli, bolalar, bu tayyor loyiha.
Ushbu nav satrini bu erda ko'ra olasizmi, bu joriy sahifa, agar siz bosh sahifaga qaytsangiz, xuddi shu nav satrini bu erda ko'rishingiz mumkin, ya'ni biz noldan hech narsa qurishimiz shart emas, biz shunchaki nusxa ko'chirishimiz mumkin.
Lekin bolalar bu qarash.
Agar bu yerda bu ko'rishingiz mumkin, men bu erda bosing, agar, bu savat sahifaga ketadi.
Agar bossam bu erda, u uy sahifasiga qaytadi.
Bu navigatsiya va biz langar teglaridan foydalanishni rejalashtirmoqdamiz.
Keling, bu narsalarni loyihamizda amalga oshiraylik.
Shunday qilib, bolalar, siz indeksingizga borasiz, birinchi navbatda HTML.
Yaxshi.
Endi navigatsiya qismini qilish uchun, siz bu erda bir yorlig'ini bosing fiz, okay, nazorat kosmik, u uy sahifasiga qaytib bizni olib kerak.
Xop, bu erda bu H2 Teg bor.
Va keyin biz uni bu erga joylashtiramiz.
Yaxshi, endi yana bir langar yorlig'ini yarataylik, bu bizni arava sahifasiga olib boradi.
Okay, bu kabi bir narsa.
U erda biz boramiz.
Endi, bu erda, biz nima qilamiz, bu erda bu DIVdan foydalaning, shunchaki hamma narsani nusxa ko'chiring.
Aytmoqchimanki, hamma narsani kesib oling, keyin bu erga qo'ying, narsalarni saqlang, bolalar.
Endi buni.
Siz faqat bu kabi bu erda nav satrini yopish, to'liq nusxa, savat HTML qaytib borish.
Endi tana yorlig'i ichida, butun xamirni butun narsani joylashtiring, maylimi? Keyin siz uni shunday katlay olasiz.
Narsani saqlang.
Mayli, endi yigitlar, natijani ko'rib chiqaylik.
Yaxshi? Agar hamma narsa ketsa, yaxshi, bu kabi bir narsa ko'rinishi kerak.
Buni bu erda ko'ra olasizmi? Bu g'alati ko'rinadi.
Ilgari nima uchun rangda edi, lekin nima uchun bu? Buning sababi shundaki, langar yorlig'i aslida ba'zi standart uslublarga ega, biz ularni olib tashlashimiz kerak.
Shunday qilib, bizning uslubimizga qayting css bu erda eng yuqori qismida.
Xo'sh, ID yorlig'i ostida biz jingalak qavs yozamiz, yaxshi, td teging, matn bezagi, yo'q.
Va keyin biz rangni oq rangga o'rnatamiz.
Okay, bu kabi bir narsa.
U erda biz boramiz, bolalar.
Endi natijani ko'rib chiqamiz.
Bas, u bu kabi bir narsa qarash kerak.
Okay, endi bolalar, bu qarash, biz bu kabi savat sahifa o'rtasida harakat mumkin.
Bundan tashqari, bosh sahifaga qaytishimiz mumkin.
U erda biz boramiz.
O'ng.
Hozirgacha juda yaxshi.
Lekin bolalar, bir oz muammo bor.
Agar bu raqamni ko'rish mumkin bu yerda 15, bir, besh.
Ammo agar siz savat sahifasiga kirsangiz, bu nolga teng.
Nima uchun bu aslida sodir bo'ladi? Sizga aytib beray.
Asosiy sababi, bu karta J kosmik to'liq bo'sh, deb hisoblanadi.
Unda hech qanday ma'lumot yo'q.
Shuning uchun biz bu erda nolni ko'rmoqdamiz.
Shunday qilib, bolalar, bu narsani tuzatish uchun, biz nima qilamiz, biz bu yigitga qaraymiz, bu erda bizning mahalliy xotiramizni eslaysizmi, sizga ko'rsataman.
Bizda barcha ma'lumotlar bu erda saqlangan.
Biz nima qilamiz, biz bu ma'lumotlarni savatimizga tortamiz.
Ha.
Xo'sh, bolalar, biz noldan hech narsa yozishimiz shart emas.
Keling, faqat asosiy Jasga qaytaylik.
Yaxshi.
Endi bu qatorni bu erda ko'rasizmi? Baskin bunga teng bo'lsin.
Shunday qilib, allaqachon mahalliy saqlash ma'lumotlarni tortib bir ish qiladi.
Xo'sh, bu nima? Bu ma'lumotlarni mahalliy xotiradan tortib olishga harakat qilmoqda.
Agar bizda hech narsa bo'lmasa, faqat u bizga bo'sh qatorni qaytaradi.
Mayli, yigitlar, keling, shunchaki narsani nusxa ko'chiraylik.
Va endi arava sahifasiga qaytaylik, bajarilgan ishni joylashtiramiz.
Endi, bu narsa aslida ishlayaptimi yoki yo'qmi, faqat konsol jurnali Okay, okay, konsol nuqta jurnali.
Mayli, biz buni savat oldik, shunga o'xshash narsa, narsalarni saqlang, yigitlar.
Endi natijani ko'rib chiqamiz.
Yaxshi? Shunday qilib, agar siz bu erda konsolga kirsangiz, mahalliy xotiradan qaytib keladigan ma'lumotlarni ko'rishingiz kerak, shunga o'xshash narsa.
Lekin bolalar, 15, 15 raqami bu erda emas.
Agar uy sahifasiga qaytadigan bo'lsak, 15-chi bu erda, lekin aslida bu erda emas.
Shunday qilib, bu masalani hal qilish uchun, bolalar, siz, biz asosiy oyna ichida bir vazifani tashkil eslaysizmi nomidagi edi hisoblash.
Buni eslaysizmi? Xo'sh, bu hisoblashning ishi nima? Ayting-chi, bolalar, hisoblash funktsiyasining asosiy ishi bu ma'lumotlar kartamiz sahifasiga qaytaylik.
Xo'sh, endi bu ma'lumotlarni ochamiz.
Hisoblash funktsiyasining asosiy vazifasi shundaki, bu bu erda elementlar, u ba'zi raqamlarni oldi, yaxshi, shuning uchun hisoblash funktsiyasi nima qiladi, bu barcha raqamlarni qo'shadi, yaxshi, keyin u bu erda ko'rsatadi.
Shunday qilib, bolalar, bu masalani hal qilish uchun, keling, asosiy Jasimizga qaytaylik.
Xo'sh, bu erda, keling, ushbu bayonot bilan birga butun hisoblash funktsiyasini nusxalaymiz.
Xop, faqat narsani nusxa.
Keling, mashinamiz js-ga qaytib, keyin bu erga joylashtiramiz.
Endi, bolalar, bizga bu kerak emas.
Keling, narsani olib tashlaylik.
Narsalarni saqlang, bolalar.
Endi, bolalar, natijani ko'rib chiqaylik.
Agar hamma narsa yaxshi bo'lsa, unda siz bu erda 15 ni ko'rishingiz mumkin, agar orqaga qaytsangiz, bu erda 15 bor, mayli, boshqa narsani tanlaymiz.
Aytaylik, biz bu narsalarni tanlaymiz aytaylik 15.
OK, endi siz ilgari 50 ekanligini ko'rishingiz mumkin.
Hozir 30.
Bu 30.
Hozir, agar siz bossangiz bu erda, keyin bu narsa ham ota-sahifa bilan birga yangilanganligini ko'rishingiz mumkin.
Up keyingi, guys asosiy Gs VS kodi qaytib borish, va keyin siz juda yuqori o'ting fiz, siz bu erda bu o'zgarmaydigan ko'ryapsizmi, bu o'zgaruvchan nomi shop mahsulot ma'lumotlar, bu aslida nima, bu mahsulot barcha ma'lumotlarni oshiradi, bir qator, deb. shop sahifasida keltirilgan, biz, shuningdek, bu ulkan ma'lumotlar uchun alohida fayl yaratishingiz mumkin.
Buni amalga oshirish uchun siz foster papkasini yaratasiz, yaxshi, keyin bu yerdan narsani kesib oling, yaxshi, endi papka tuzilishida, manba ichida buni ko'rib chiqing, bu yerni bosing, keyin siz yangi fayl yaratmoqchisiz, siz yangi faylni yaratasiz. bu ma'lumotlar, nuqta stul, shunga o'xshash narsa, keyin siz o'zingiz olgan o'zgaruvchini kiriting, siz uni shu yerga joylashtirasiz.
Xop, meni bir oz kichraytirish qilaylik.
Men bu yerdan foydalanib yuqoriga ko'taraman, bu erda bor, narsalarni saqlang, bolalar.
Agar natijalar ekranda najotni endi, siz butun narsa bu kabi bir narsa buzib, deb ko'rish mumkin, siz, do'kon ma'lumotlar, ma'lumotlar belgilangan emas qarang.
Shunday qilib, asosiy oyna qaytib, bu ma'lumotlar oyna o'z ichiga uchun, siz gonna nima odamsiz nima bilasizmi? Siz indeks html borish gonna qilyapmiz, va bu qatorni foydalanish.
Bundan oldin siz uni ushbu ko'rinish, skript manbai, yaxshi, bir soniya skript manbasini boshqarish maydoni kabi qo'shasiz, siz manbangizga o'tasiz, keyin siz Gita GS-ni tanlaysiz, yaxshi, narsani saqlang.
Endi natijani qilaylik, bolalar.
Endi bolalar, biz hech xatolar bor, deb qarash.
Shunday qilib, bolalar, men katta faylni ikki xil kichik faylga qanday ajratganimni tushunganingizga umid qilaman.
Yaxshi? Xuddi shu tarzda, biz nima qilamiz, siz HTML Savatingizga borasiz, maylimi? Va bu satrdan oldin siz bir xil skriptni, shu ko'rinish, skript manbai, boshqaruv maydoni kabi narsalarni kiritasiz, manbangizga, keyin ASP-ga o'ting.
Net ma'lumotlar, Jas, narsa aytish, okay.
Yaxshi, bolalar.
Endi biz tanamiz yorlig'i ichida HTML belgisini yozishni boshlaymiz.
Yaxshi.
Shunday qilib, ushbu nav satrining ostida biz ID yorlig'i bilan div yaratamiz bu ko'rinish, hashtag yorlig'i kabi narsa, yaxshi, bir vaqtning o'zida sinf nomiga ega bo'ladi matn markazi nuqta matni, minus markaz, teging, biz boramiz.
Bizning asosiy maqsadimiz JavaScript ichida bu maqsad va uslubi css ichida bu bir maqsad iborat.
Yaxshi.
Ushbu satr ostida biz sinf nomi bilan boshqa div yaratamiz xarid qilish savati.
Bu nuqta xarid qara.
Minus arava.
Mayli, shu bilan birga, biz unga bir xil nomdagi identifikatorni beramiz bu ko'rinish, hashtag xarid qilish kabi narsa.
Mayli, minus arava.
Tab.
U erda biz boramiz.
Biz JavaScript bu maqsad mumkin.
Bu uslub css ichida maqsadli bo'ladi.
Endi bolalar, siz menga shunday savol berishingiz mumkin: buni yaratishning asosiy sababi nima? Va buni yaratishning asosiy sabablari? Sizga yigitlarni ko'rsatay.
Agar faylga qaytsak, bu erda loyiha qilaylik.
Mayli, arava sahifasiga boraylik.
Endi siz ushbu komponentni bu erda ko'rasizmi, umumiy hisob-kitob va to'lovni tozalash kartasi, ushbu komponent aslida bu erda quriladi.
Va buni ko'ryapsizmi bu erda, ichida bu erda, biz nima qilamiz, biz ushbu kartalarni shu erda quramiz.
Shunday qilib, bolalar, umid qilamanki, nima uchun bu ikki o'g'rini yaratganimni tushundingiz.
Biz bu ikki kun ichida hech narsa yozmaymiz.
Ushbu ikkita komponentni JavaScript yordamida yaratamiz.
Shunday qilib, birinchi navbatda, bu bolalar birinchi navbatda Id bu erda biz JavaScript ichida ikkalasini ham tanlaymiz, maylimi? Avvalo, yorliqni maqsad qilib qo'ying.
Mayli, kartamizga qaytaylik, GS.
Va yuqori qismida, siz nima qilasiz, siz shu erda bo'lasiz, ruxsat bering yorliq yaxshi, chunki bu ID, siz hujjatingizni yozasiz.
Yaxshi, hujjat.
ID tomonidan dot get element.
Siz gonna yozish qavs odamsiz, yagona quote, ikki quote.
Okay narsa Face, tayyor.
Keyingi qadam.
Siz uni bor.
Hujjat dot teng xarid qilish savatni okay xarid qilish savatni bo'lsin ID okay qavs tomonidan element bu kabi yagona iqtibos double iqtibos olish.
Keling, HTML savatimizga qaytaylik, keyin siz buni nusxalaysiz va bu erda ushbu identifikatordan foydalanasiz.
Ha, narsa nusxa.
Keling, bu erga qaytib, bu kabi narsalarni joylashtiramiz.
U erda biz boramiz.
Qilingan.
Mayli, yigitlar, hozirgacha juda yaxshi.
Endi bolalar, buni bu erda ko'rasizmi, juda kam loyihada, bizda bu erda barcha kartalar mavjud.
Xo'sh, biz maqsadga erishamiz, birinchi navbatda buni quramiz, keyin esa keyinroq quramiz.
Yaxshi.
Shunday qilib, bu avtomobillar barcha qurish uchun, biz bir vazifani yaratish uchun harakat qilyapmiz, funktsiya nomi savat mahsulot meni bolalar bilan birga kuzatib ishlab bo'ladi.
Hisoblash quyida biz bu erda olish, qo'rg'oshin, ishlab, karta ma'lumotlar ishlab, okay? Bu oltita o'q funktsiyasi bo'ladi, shunga o'xshash narsa.
OK, keyin biz jingalak qavsni yozamiz.
Mayli, bolalar, bu funksiya ichida meni diqqat bilan tinglang, bizda ikkita holat bo'ladi.
Birinchi holat, bizda savat haqida ma'lumotlar bo'ladi.
Va ikkinchi holat, bizda savat haqida ma'lumot bo'lmaydi.
Bu bilan nimani nazarda tutayotganimni sizga ko'rsataman? Birinchidan, narsani saqlang.
Mayli, yakuniy mahsulotga qaytaylik.
Mayli, bu yigitlarga qarash uchun, bu mahalliy saqlash bo'yicha ba'zi ma'lumotlar mavjud bo'lganda birinchi holat.
Aytaylik, bizda hech qanday ma'lumot yo'q.
Shunday qilib, agar bizda mahalliy saqlash haqida ma'lumot bo'lsa, unda narsa shunga o'xshash ko'rinadi.
Ammo agar bizda mahalliy saqlash haqida ma'lumot bo'lmasa, unda nima bo'ladi keyin u nimaga o'xshaydi? Bu ko'rinish kabi bir narsa qarash qiladi, men kartani tozalash bo'lsa, bu kabi qarash bor ketadi.
Xop, arava umid qaytib bo'sh bo'ladi.
Shunday qilib, ushbu ikkala komponentni birgalikda yaratish uchun biz if else bayonotidan foydalanamiz.
Xo'sh, buni amalga oshirish uchun jas kartasiga qaytaylik va bu erda biz if else bayonotini yozamiz.
Bu bolalar qara men bilan birga kuzatib.
Xo'sh, bolalar, biz bu erda if else bayonotini yozamiz, mayli, agar qavs jingalak qavs bo'lsa, mayli, keyingi satrda biz boshqa jingalak qavs yozamiz, maylimi? Xo'sh, bu qavs ichida siz savatning nuqta uzunligini yozasiz, maylimi? nolga teng emas.
Xo'sh, bu bilan nima demoqchiman, agar boshqa bayonot bo'lsa, demak, savat uzunligi nolga teng bo'lmasa, siz yozasiz, siz ushbu kodni ishga tushirasiz yoki boshqa kodni ishga tushirasiz, maylimi? Shunday qilib, natijani sinab ko'raylik.
Yaxshi, shuning uchun biz konsol ustiga konsol yozamiz, nuqta jurnali.
Okay, biz uni bor, bir savat bo'sh emas.
Yaxshi? Va endi bu L bayonotida biz konsolni, log konsolini qo'shamiz.
Jurnal, biz bu erga boramiz savat butunlay bo'sh.
Yaxshi.
Endi natijani saqlaganingizdan so'ng, bu narsani nusxalash kifoya.
Va keyin biz bu erda funktsiyani chaqiramiz.
Xo'sh, endi, qavs, narsani saqlang.
Natijada qaraylik.
Yaxshi.
Shunday qilib, bu natija ekran bu erda, siz arava HTML sahifasiga o'tmoqchisiz, yaxshi, shunga o'xshash.
Buni ko'ra olasizmi? Bu erda? Bu yozilgan savat bo'sh emas.
Lekin bolalar, dasturga boraylik.
Mahalliy Saqlash.
Mayli, keling, hamma narsani tozalaylik.
Endi narsani yangilaylik.
Konsolga qaytib boring.
Xop, agar savat butunlay bo'sh ekanligini ko'rish mumkin.
Shunday qilib, bolalar, umid qilamanki, bu if else bayonoti qanday ishlashini tushundingiz.
Yaxshi.
Shunday qilib, bolalar, keling, konsolni bu erdan olib tashlaymiz.
Yaxshi.
Va if bayonotini yozishdan oldin, else bayonotini tugatamiz.
Avvalo, yaxshi, shuning uchun siz nima qilasiz, bu xarid qilish savatini bu yerga aylantirasiz.
Ha.
Bu nima qiladi? Bu HTML element ID nishonga etiladi.
OK, shuning uchun narsani nusxa ko'chiring va keyin sahifani pastga aylantiring, bu erda narsa va keyin siz shu erda oldingiz, nuqta innerHTML backsticks-ga teng.
Okay, biz bu kabi faqat bo'sh qilish uchun harakat qilyapmiz.
Va keyingi satrda siz nima qilmoqchi bo'lsangiz, bu erda HTML elementidan keladigan ushbu yorliq bilan xona qiling.
Okay, faqat, bu erda pastga aylantiring, okay, bu kabi narsa joylashtirish, keyin siz gonna yozish nafrat dot innerHTML odamsiz.
teng, biz bu erda yozish uchun harakat qilyapmiz, nima, bu qarash emas, avvalo, biz sizga qaytib bor, okay? Keyin siz H2 urish uchun harakat qilyapmiz, tab.
Va bolalar, biz boramiz.
O'ng karta bo'sh.
Okay, bu kabi bir narsa.
Bo'sh.
Va keyingi birida, siz gonna bu erda yozish qilyapmiz, a tab.
Xo'sh, bu bizni ushbu langar yorlig'iga nima olib keladi, bu bizni bosh sahifa bo'lgan html indeksiga olib keladi, maylimi? Indeks nuqta HTML.
Xo'sh, shuning uchun biz bu erda yozmoqchi bo'lgan narsa-biz tugma yaratamiz, bunga qarang, bu TT o n nuqta, biz uy tugmachalari sinfining nomini yoki shunga o'xshash narsalarni biriktiramiz, keyin siz yorliqni urasiz.
U erda biz boramiz.
Endi siz buni bu erda ko'rishingiz mumkin talabalar sinfining nomi.
Buni qilmang, bolalar.
Aks holda, u ishlamaydi.
Bas, u faqat bir sinf emas sinf nomi bo'lishi kerak.
Endi bu erga joylashtiring, biz uyga qaytamiz, shunga o'xshash narsa.
Qilgan juda yomon, narsani saqlang.
Endi natija bolalar qaraylik.
Endi bolalar, agar natijalar ekraniga qarasak, shunga o'xshash narsa ko'rinadi.
Arava bo'sh.
Va uy sahifasiga qaytish.
Biz bu komponentni bu erda ko'rmoqdamiz.
Endi biz nima qilamiz, buni amalga oshirish uchun uni aniq markazga qo'yamiz, bu erda uslubingiz css-ga qaytib keling, yaxshi va eng pastki qismida bu erda eng pastki qismga keling.
Va biz birinchi navbatda sharh yozamiz.
OK, shuning uchun biz bu kabi sharh yozamiz.
Yaxshi, undov belgisini boshlang bu erda biz yorliq uchun uslub qoidalari uchun uslub qoidalarini yozamiz va ba'zi tugmachalarni qo'shamiz.
Yaxshi? Bu kabi bir narsa.
Narsani saqlang.
Endi bu quyida biz matn markazini yozamiz.
Agar bu bolalar bir soniya eslaysizmi.
Savat HTML to'g'risida, agar biz matn markazi bir sinf bor, deb ko'ryapsizmi, faqat bu yerdan nusxa.
Xop, bu erga kelib, bu kabi uni joylashtirish, xop, nuqta pasta, jingalak qavs.
Bu erda siz t, yorliq, keyin markazni yozasiz.
Okay, keyin chet pastki kiritish uchun harakat qilyapmiz, 20, pixel, okay, MB, tab, 20.
Pixel, narsa saqlash.
Endi natijani qilaylik, bolalar.
Natijada bu kabi bir narsa qarash kerak ko'rinadi.
Va guys, chet pastki 20 piksel qo'yib uchun asosiy sababi siz bu erda margin loyihasi najotni, keyin siz bu bo'shliqni ko'rish mumkin, deb, bu farq aslida 20 chet pastki hisoblanadi.
Piksel.
Siz bu erda ko'ra olmaysiz.
Buning sababi shundaki, bizda bu kartalar bu erda yaratilmaydi.
OK, bu uyga qaytish tugmasi.
Biz hozir uni uslub qilamiz.
Keling, uslubimizga qaytaylik css bu erda.
Biz gonna o'ng uy tugmasini bir soniya odamsiz, bolalar.
Avvalo, kartaga qaytib keling.
HTML.
Yaxshi.
Bu erda emas.
Kechirasiz, bolalar karta GS.
Va bu erda sinf nomi, uy tugmasi, narsani nusxalash.
Uslubingizga qayting css va keyin siz nuqta pastasini urasiz.
Mayli, u erda siz borasiz.
Bu erda jingalak qavs.
Shunday qilib, siz fon rangini o'rnatasiz BGC teging, bu narsani olib tashlang va keyin siz nazorat maydonini bosasiz.
Bu rangni bu erda ko'rasizmi? 212529.
Buni oling.
Okay, keyingi safar, siz ham rang oq bo'lishi mumkin.
Yaxshi.
Keyin biz chegarani olib tashlaymiz, mayli, chegara yo'q.
Yaxshi, keyin biz har tomondan olti pikselli to'ldirishni qo'llaymiz.
Yaxshi.
Keyin chegara radiusini uchta pikselga, chegara radiusiga, uchta pikselga qo'shamiz.
Okay, guys, up keyingi, biz ham kursor ko'rsatgichlari bir oz kerak.
Mayli, qiz, bola, teging, narsa yaxshi natijaga olib keladi.
Okay, bu kabi bir narsa ko'rinadi.
Lekin bolalar bu kartani bo'sh va uyga qaytish tugmachasini ko'rishlari mumkin.
Orasida hech qanday farq yo'q.
Ning ba'zi bo'shliqni amal qilaylik.
Bu bo'shliqni qo'llash uchun.
Faqat bu erga kelib, keyin o'ng bo'sh.
10 piksel, ga teging.
U erda biz margin top 10 pikselga boramiz.
Natijada qaraylik.
Buni bu erda ko'ra olasizmi? Biz bu erda Nizomning bir oz bor bir oz bor.
Hozirgacha.
Juda yaxshi, bolalar.
Endi narsani sinab ko'raylik.
Agar siz uyga qaytish-ni bossangiz, u sizni bosh sahifaga qaytarishi kerak.
Bu yigitlarni ko'ra olasizmi? Mukammal.
Keling, bu erga qaytib boraylik.
U erda biz boramiz.
Shunday qilib, bolalar, bu juda yaxshi ishlaydi.
Lekin bu erda aslida savol, nima uchun biz bu komponentni ko'ryapmiz? Ushbu komponentni ko'rishning asosiy sababi sizga yigitlarni ko'rsatishga ijozat bering.
Bas, siz karta GS bu erda bu vazifani eslaysizmi, biz Okay bor, savat ma'lumotlar ishlab, biz bu erda bir if else bayonot bor.
Shunday qilib, if bayonoti faqat mahalliy stress bo'sh bo'lmaganda ishlaydi.
Mahalliy saqlash bo'sh bo'lsa va boshqa ishlaydi.
Bu bolalarga qarang.
Bizda savatda hech narsa yo'q, umuman nol, to'g'rimi? Bu erda bosh sahifaga qaytaylik.
Ning okay narsa tanlang bo'lsin, men bu erda bu narsa tanladingiz.
Shunday qilib, endi mahalliy saqlash bo'sh emas, bizning savatimiz bo'sh emas.
Agar savat sahifasiga borsangiz.
Endi bu qarash.
Ushbu komponent yana ko'rsatilmaydi.
Nima uchun endi LC bayonot aslida ishlayotgan bo'lsa yugurib emas, chunki bolalar bor, deb, lekin u belgilangan emas butunlay bo'sh bo'ladi.
Shuning uchun biz bu erda hech narsani ko'ra olmaymiz.
Bu erda bosh sahifaga qaytaylik.
Bunga qarang.
Endi bu kabi narsani olib tashlaymiz.
Mayli, uni nolga aylantiraylik.
Bu erga qaytib kelaylik.
Bunga qarang, biz yana komponentni ko'rishimiz mumkin, chunki bu safar else ishlaydi.
Endi bolalar, keling, bu erda if bayonotini aniqlaylik.
Yaxshi.
Shunday qilib, bolalar men bilan birga ergashadilar.
Shunday qilib, if bayonotida biz bu erda evaziga yozishimiz mumkin.
Xo'sh, nima qaytib keladi? Bunga qarang.
Biz bu xarid qilish savatni bu erda bor juda yuqori o'ting uchun harakat qilyapmiz.
Ha, narsani nusxa ko'chiring, bu erga pastga aylantiring va keyin biz bu narsani to'laymiz.
Xo'sh, endi biz dot innerHTML-ni savatni nishonga olishimizga teng uramiz.
Savatni eslaysizmi? Savat qayerda? Savat aslida bu erda.
Va bu nima? Bu bizning tanlangan mahsulotlar barcha oshiradi, bir qator.
Xo'sh, savat ichida biz shunday xarita tuzamiz.
Yaxshi? Keyin qavs, biz bu kabi ESX o'q funktsiyasini yozamiz.
Keyingi qadam, siz bu erda x ga borasiz.
Exe-ni ishga tushirishning asosiy sababi shundaki, sizga bir soniya yigitlarni ko'rsatishga ijozat bering.
Keling, bu erda bosh sahifaga qaytaylik.
Keling, biror narsani tanlaymiz.
Yaxshi.
Keling, shunga o'xshash narsani tanlaymiz.
Keling, bu erda mahalliy omborimizga boramiz.
Bu qayerda? Bu erga kelaylik.
Bu erda.
Application mahalliy saqlash.
Mayli, bolalar, bu mahalliy saqlash ma'lumotlari.
Ushbu exe yozishning asosiy sababi shundaki bu ob'ektlarning barchasini birma-bir, birma-bir nishonga oladi.
Xo'sh, bolalar, shuning uchun men bu xni bu erda yozdim.
OK, siz xohlagan narsani o'qishingiz mumkin.
Muammo yo'q.
Xop, men faqat gonna bu erda x saqlab qilyapman.
Endi bu erda, men jingalak qavs yozaman.
Xop, kiriting.
Keyingi qadam, bolalar.
Yana bir narsani qaytaraylik.
Okay, biz bu erda qaytib fiz, bir Andoza so'zma-so'z.
Shunday qilib, biz haqiqatan ham qo'llab-quvvatlaymiz, endi bu erda biz cart item nomli sinf bilan div yaratamiz.
Bu nuqta arava minus element qara.
Yaxshi.
Ha.
Va bu erda sinf nomi, bu faqat sinf bo'lishi kerak.
Aks holda u ishlamaydi.
Yaxshi? Narsani saqlang.
Keling, bu erda bir narsa yozaylik.
Mayli, salom, bu kabi.
Narsani saqlang.
Natijada qaraylik.
U erda biz boramiz.
Biz qaytib savat sahifaga borsangiz, siz bu erda bir necha Salom ko'rish mumkin, bir ikkinchi guys salom, salom, salom, deydi mumkin.
Nima uchun u to'rt marta takrorlanadi? Xo'sh, sizda shunday savol bo'lishi mumkin, nega u takrorlanadi? Agar eslasangiz, sizga nima dedim? X bolalar, bu x mahalliy Qidiruvdagi barcha ma'lumotlarni birma-bir maqsad qilib qo'yadi va keyin bu funktsiyani shu erda ishga tushiradi, buni bu erda ko'rish mumkin, ularning barchasini birma-bir maqsad qilib qo'yadi, keyin esa yorliq qo'yadi va keyinbu funksiyani ishga tushiramiz.
Shuning uchun biz salomni to'rt marta oldik.
Ammo aytaylik, bir soniya yigitlar, bizda qancha ma'lumot bor? 41234.
Aytaylik, men nolga teng narsa qilaman.
Yaxshi, men bu erda hech narsa xohlamadim.
Agar savat sahifasiga o'tsak, hozir siz uchta salomni ko'rishingiz mumkin.
Nima uchun bu? Buning sababi shundaki, savatimiz ichida faqat uchta narsa tanlangan.
Endi bu erda g'alati bir narsa bor, bu kichik belgi davom ettirishni taklif qildi.
Agar bu ajoyib ko'ryapsizmi, bu erda vergul, biz vergul kerak emas.
Ushbu vergulni olib tashlash uchun bu erga qaytib keling va bu erda.
Faqat keling siz shunchaki bu erga keling va keyin yozishingiz mumkin dot qo'shiling.
Yaxshi, qavslar, bitta tirnoq yoki shunga o'xshash ikkita iqtibos, narsani saqlang.
Endi bolalar, natijani ko'rib chiqaylik.
OK, siz g'alati vergul Xudo ekanligini ko'rishingiz mumkin.
Ajoyib.
Meni faqat bu kabi bu erdan chiqib o'ting bo'lsin.
Va bu biz yigitlarni istamaydigan narsa.
Biz bu kabi bir narsa qarash istayman.
Okay, biz bu erda yaxshi kod yozish kerak narsani qilish uchun.
OK, shuning uchun boshlaylik.
Salomni bu yerdan boshqaraylik.
Va keyin biz enterni uramiz.
Xo'sh, bu erda biz birinchi navbatda rasmni kiritamiz.
Tasvir yigitlarini eslaysizmi? Shunday qilib, men aslida img yorlig'ini olaman.
Okay, manba aslida ma'lumotlardan keladi tasvir manbai bo'ladi.
Jas, buni bu erda ko'ra olasizmi? Ma'lumotlar Jas.
Ha, bizda bu erda barcha ma'lumotlar mavjud.
Yaxshi.
Shunday qilib, bu bolalarga qarang.
Buni aravaga kiritdikmi? HTML yoki yo'qmi? Ha va yo'q, keling, faqat narsani tekshiraylik.
Xop, ning bizning savat HTML borib, bu qaraylik.
Xo'sh, shuning uchun cart GS-dan oldin bizda ma'lumotlar mavjud Jas bu shuni anglatadiki, biz ushbu o'zgaruvchini mashinamiz ichida erkin ishlatishimiz mumkin, shunchaki sizga nusxa ko'chirishni ko'rsataman mashinaga qaytib keling birinchi navbatda, to'liq saqlang xop, endi agar siz bu erda shunday konsolo, qarang bunda.
Men bu erda gonna emasman kichik konsol emas, okay, konsol, log qavs Okay narsani to'laydi, shop mahsulot ma'lumotlar, qaysi ma'lumotlar jas Okay qaerdan keladi, endi bu qarash, men gonna butun narsani saqlab emasman.
Keling, natijani ko'rib chiqaylik.
Xop, agar gonna f urdi odamsiz 12.
Konsolga o'ting, siz ma'lumotlar qatorini ko'rishingiz mumkin va u tanlangan mahsulotlarning barcha ma'lumotlarini olib yuradi.
Men shop sahifasida keltirilgan ma'lumotlar emasman.
Bunga qarang.
U tavsifni oldi, identifikator, rasm, ism, narx va boshqalarni oldi.
Hozircha juda yaxshi, yigitlar.
Endi bolalar, keling, asosiy js-dagi VS kodimizga qaytaylik, shuning uchun asosiy emas, kechirasiz, Karges.
Keling, bu yerdan narsani olib tashlaymiz.
Va endi biz nima qilmoqchimiz, bu erda if bayonotimizga kelamiz, yaxshi.
Endi bolalar, bu x ga qarang, bu x ni bu erda ko'rishingiz mumkin.
Xo'sh, u nimani olib yuradi? Bu x nima? Bu x aslida ob'ekt.
Bunga qarang.
Sizga ko'rsataman.
Shunday qilib, biz konsolni uramiz.
Okay, log, biz gonna x aytish odamsiz, narsa saqlab.
Shunday qilib, nima bo'ladi, bu x to'rt marta ishlaydi.
Nima uchun bu? Buning sababi, yigitlar to'rt marta emas, shuning uchun u uch marta ishlaydi.
Buning sababi, bolalar dasturga, mahalliy xotiraga qarashadi.
Savatda qancha narsa bor? Uch narsa.
Yaxshi.
Bu x uch marta ishlaydi nima.
Endi konsolga qarang, buni bu erda ko'rishingiz mumkin.
Biz ID va ob'ektni bor.
Endi bolalar, bu identifikatorni bu erda ko'ra olasizmi? oh, nima uchun biror narsa? Oh, nima uchun? IDga muvofiq I o Y birinchi uchta harfiga qarang.
Xop, bu ID ko'ra, ning bizning ma'lumotlar bazasi ichida qidiruv qilaylik.
Bunga qarang.
Ning ma'lumotlar Jas bu erda qaytib kelsin, va qaerda, men bu erda o Y emas? Bu okay emasmi? Buni bu erda ko'ra olamanmi? Bu bizning I o Y.
ID.
Endi bu yigitlarga qarang.
Ushbu ob'ekt nimani olib yuradi ushbu ob'ekt ko'taradi yoki tasvir, u narxni ko'taradi va u ham nomni olib yuradi.
Xo'sh, nima qilishimni bilasizmi? Bu ID foydalanish, men bu X ID yordamida qilyapman.
Men data GS dan ma'lumotlarni qatnashdi uchun ketyapman va keyin men bu tasvirni maqsad uchun ketyapman.
Ushbu rasmni bu erda ko'rasizmi? Men ushbu rasmni nishonga olaman, keyin uni manba ichida olaman.
Sizga bu ishni qanday qilishimni ko'rsataman.
Shunday qilib, men nima qilmoqchiman, birinchi navbatda, men x yoki Y ni x tumaniga yo'q qilaman, chunki bunga qarang.
Buni bu erda ko'rasizmi? Bizda ID va element mavjud.
Biz faqat okay ob'ektni kerak hozir ob'ektni kerak emas? Shunday qilib, biz faqat bu kabi narsani destructor ID maqsad uchun, bu qo'rg'oshin jingalak apparati okay, Id vergul qarash, keyin biz qaysi bir element Okay, teng bu erda gonna yozish odamsiz x amalga.
Endi biz ushbu X dan keladigan identifikatordan erkin foydalanishimiz mumkin yaxshi, keyingi qadam, bolalar.
Biz qidiruv funktsiyasini ko'rib chiqamiz.
Qidiruv qilaylik.
Shunday qilib, biz izlab nima teng qidiruv? Biz aslida ushbu o'zgaruvchidan qidirmoqdamiz.
Bu o'zgaruvchini bu yerda ko'ra olasizmi? Ha, men faqat ma'lumotlar Gs dan o'zgaruvchilar nusxa, xop, bu erga qaytib kelib, keyin biz bu kabi bu erda qo'yish uchun harakat qilyapmiz.
Yaxshi? Shunday qilib, qidiruv do'kon elementlari ma'lumotlariga teng, keyin biz bu erda jarima yozamiz, maylimi? Nuqta topish qavs, okay? Endi bu erda biz es six o'q funktsiyasini shunga o'xshash narsaga aylantiramiz.
Yaxshi? Endi siz xohlagan narsani qo'shishingiz mumkin, muammo yo'q, lekin keling, buni oddiy yigitlar qilaylik.
Keling, nima uchun bu erda yozaylik.
Okay, agar gonna hech narsa qilyapmiz? Muammo yo'q, bolalar.
Keling, nima uchun yozaylik.
Xo'sh, endi biz nimaga qarshi izlayapmiz? Biz qarshi nima qidiryapsizlar? Ko'raylik.
Shunday qilib, bu erda ushbu identifikatorga qarang, bolalar.
Bu qayerdan keladi? Bu aslida savatdan keladi.
Yaxshi? Va bu sim qayerdan keladi? Bu ma'lumotlar Gs dan keladi.
Xop, bas, men nima istaysiz, men bu ID bu ID mos istayman, qaysi biz Savatga bor baribir ID, biz bazasi ID bilan mos istayman, degan ma'noni anglatadi, bu kabi bir narsa.
Sizga ko'rsataman.
Xo'sh, shuning uchun biz bu erga kelamiz va keyin bu erda nima uchun bu identifikator IDga uch baravar teng ekanligini yozamiz, bu identifikator bu erdan keladi, bu savatdan va bu ma'lumotlar bazasidan keladi, bu ma'lumotlar bazasidan, Xo'sh? Va keyin biz buni yozmoqchi bo'lgan narsamiz, siz ham meni bu erga olib borasiz yoki uni shunday bo'sh qilasiz.
Xo'sh, bu bilan nima demoqchiman? Aytmoqchimanki, agar biror narsa topsangiz, uni qaytaring.
Agar siz hech narsa topa olmasangiz, bu kabi bo'sh qatorni qaytaring.
Mayli, hozirgacha juda yaxshi, yigitlar, narsani tejang.
Endi, bolalar, biz ma'lumotlar bazasidagi rasmdan bemalol foydalanishimiz mumkin.
Xo'sh, buni qanday qilaman, bunga qarang, avtomobil oynasiga qaytib, bu yerdan foydalaning.
Biz bu erga kelamiz va keyin narsani olib tashlaymiz.
Biz gonna dollar belgisi jingalak qavs aytish qilyapmiz, qidiruv nuqta IMG, narsani saqlab.
Natijada qaraylik.
Yaxshi, tasvir juda katta.
Siz, biz barcha tasvirlar bor, deb ko'rish mumkin, u kichik qilish uchun.
Bu erga qaytib kelaylik.
Va keyin biz bu erda kenglikni ko'ramiz, mayli, shunga teng, keyin biz shu erga boramiz.
Ikki iqtibos 100.
Bu kabi.
Mayli, narsani saqlang.
Natijada qaraylik.
Mayli, biz boramiz.
Bizning rasmlarimiz kichrayib qoldi.
Buni bu erda ko'ra olasizmi? Xo'sh, nega bizda bu erda faqat uchta rasm bor? Uchta rasmga ega bo'lishning asosiy sabablari shundaki, sizning arizangiz logotipiga qarang, savatdan qancha narsani tanladingiz? Savatda qancha narsa bor? Bu siz do'kon sahifasidan tanlagan mahsulotlar, sizda faqat uchtasi bor.
Demak, sizda uchtasi bor, qaysi biri etishmayapti? Bu tasodifiy ko'ylak etishmayapti.
Xop, ning bosh sahifasiga qaytib boramiz.
Mana tasodifiy ko'ylak.
Yaxshi, shuning uchun agar siz bu erdan biror narsani tanlasangiz, natijani ko'rib chiqamiz.
Endi sizda to'rtta rasm bor, mayli, agar bu erga qaytsangiz, aytaylik, siz futbolkalarni xohlamaysiz.
Bu erdan futbolkani olib tashlang.
Bu erga qaytib boraylik.
U erda biz boramiz.
Biz bu erda har qanday tasodifiy ko'ylak yo'q.
Mayli, hozirgacha juda yaxshi, yigitlar.
Endi biz ba'zi uslublarni qo'llashimiz va bu erda ma'lumotlarni olishimiz kerak, shunda u xuddi shunday chiroyli ko'rinadi.
Yaxshi, shuning uchun bu narsalarni qilish uchun VS kodingizga qayting.
Va rasm ostida biz sinf nomi tafsilotlari bilan boshqa div yaratamiz.
Ushbu nuqta tafsilotlariga qarang.
Yaxshi.
Ha, va bu erda sinf nomi.
Kechirasiz, bolalar, siz buni bu erdan olib tashlashingiz kerak.
Bu faqat tafsilotlarga teng sinf bo'lishi kerak.
Yaxshi.
Endi bolalar, bu tafsilotlar ichida bizda ikki kun va bitta h3 yorlig'i bo'ladi.
Bu bilan nimani nazarda tutayotganimni sizga ko'rsataman.
Yaxshi, shuning uchun biz bu erga boramiz nuqta sarlavhasi minus narx minus x, bu ko'rinish kabi narsa, sarlavha.
Xop, minus narx minus X qadam.
Bundan tashqari, bu kabi bu erda bir indent berish.
Yaxshi.
Endi keyingi qatorga o'tamiz.
Va biz bu ko'rinish kabi karta shisha nomidagi qilinadi boshqa div yaratish uchun harakat qilyapmiz, nuqta karta, minus bu TT o n s ga teging.
Keyingi satrda siz H3 teglarini yozasiz.
Okay, bu kabi bir narsa.
Endi, bolalar, bu uchta HTML elementini yaratishning asosiy sababi edi.
Sizga yigitlarni ko'rsatay.
Ushbu sarlavhani ko'rasizmi? Narx va X.
Xo'sh, agar men buni yakuniy mahsulot bilan taqqoslasam, bunga qarang.
Buni bu erda ko'rasizmi? Bizda tasodifiy ko'ylak deb nomlangan narsa bor.
Bizda narx bor va bizda xoch belgisi bor.
Yaxshi.
Shunday qilib, bu Deyvdan foydalanib, bu erda Deyv.
Ha.
Bu Deyv emasmi? Biz bu uch narsani birgalikda yaratamiz.
Yaxshi.
Keyinchalik, bizda karta tugmalari deb nomlangan narsa bor.
Buni bu erda ko'ra olasizmi? Shunday qilib, buni engillashtirsak, biz bu tugmani bu erda ortiqcha minus va miqdor bilan birga yaratamiz.
Ha, shuning uchun bolalar, bundan foydalanib, biz ushbu komponentni bu erda quramiz.
Yaxshi.
Va bu erda narx.
Biz H3 yorlig'i ichidagi narxni namoyish qilamiz.
Yaxshi.
Shunday qilib, men nima uchun bu narsani yozganimni tushunganingizga umid qilaman.
Xo'sh, bolalar, endi ularning orasiga bir oz bo'shliq qo'yaylik, shunda u chiroyli va tushunarli ko'rinadi.
Endi birinchi o'rniga ichida, biz bu erda yozish uchun harakat qilyapmiz, nima birinchi kuni, men bolalar bilan quyidagi qarash.
Keling, bu erda bir oz chuqurlik beraylik.
Bizda ikkita narsa bo'ladi.
Birinchisi, h4 yorlig'i, yaxshi, yorliq.
Keyingi yuqoriga, biz siz belgisi bo'ylab o'qib belgisini ega bo'ladi-ku.
Shunday qilib, belgini olish uchun piktogrammalaringizga o'ting yoki oling bootstrap.com.
Va bu erda biz bu erda yozamiz, faqat x.
Endi pastki qismga o'ting.
X aslida bu erda.
Bu qayerda? Bu erda? Bu okay x minus LG emasmi.
Buni bosing, keyin havolani nusxalash.
Xop, ning bizning arava Jas qaytib boramiz.
Yaxshi.
Endi bu kabi narsalarni joylashtiring.
Narsani saqlang.
Endi ushbu h4 ichida biz p tegini yozamiz.
Xo'sh, birinchi navbatda, unga ushbu p yorlig'i kabi bir oz chuqurlik beraylik.
Endi bu erda siz dollar belgisi jingalak qavsini yozasiz search.net.
Xo'sh, bu nom qayerdan keladi? Bu nom aslida ma'lumotlardan keladi.
Jas, bu erda tasodifiy ko'ylak, keyin bizda rasmiy va boshqalar bor.
Yaxshi.
Umid qilamanki, siz bu ishni qanday qilayotganimni tushundingiz.
Mayli, narsani saqlang.
Endi natijani qilaylik.
Yaxshi.
Agar natijaga qarasak, u shunday ko'rinadi.
Buni ko'ra olamanmi? Bu erda? Biz ofis ko'ylak bor.
Va keyin bizda x ham bor.
Lekin tashvishlanmang, bolalar.
Yomon ko'rinishga ega bo'lsa ham, biz narsalarni chiroyli qilish uchun uslublardan foydalanamiz.
Xop,faqat men qilayapman, nima men bilan birga kuzatib.
Orqaga qaytaylik.
Aytgancha, bolalar bu xni bu erda ko'rishlari mumkin.
Biz uni qizil rangga aylantiramiz.
Keling, buni hozir qilaylik.
Xo'sh, bu qo'lni ko'ryapsizmi? Bu qayerda? Bu b minus x minus LG nusxa ko'chirish narsa.
Endi sizning asosiy qaytib boramiz.
Qaerda boshlanadi? Ha.
Shunday qilib, bolalar, siz o'zingizning uslubingizga qaytasiz css eng pastki qismida, yaxshi, bu erda, siz bu erda yozasiz nuqta pastasi.
Mayli, keyin jingalak qavs.
BGC emas, balki BGC.
Kechirasiz, bu rang bo'ladi.
Siz o'qiysiz uni qizil rangga o'rnating, maylimi? Va keyin biz ixtiyoriy ravishda shriftning vaznini berishimiz mumkin.
Yaxshi, shrift vazni, biz uni qalin qilib o'rnatishimiz mumkin.
Mayli, hozir xuddi shu narsani qiling bolalar, natijani ko'rib chiqaylik.
Yaxshi? Endi siz e'tiborsizlik x aslida qizil rangga ega ekanligini ko'rishingiz mumkin.
Ajoyib yigitlar.
Endi kattalashtirgandan so'ng VS kodimizga qaytaylik.
Avtomobil ta'qibida bu erda qayerda, yaxshi, ushbu p yorlig'i ostida siz bitta miqdor birligining narxini ko'rsatadigan boshqa P tegini yaratasiz.
Xop, bas, faqat shu erda, dollar belgisi kosmik, dollar belgisi jingalak qavs AG, bu dollar belgisi valyuta bo'ladi va bu bir o'zgaruvchan bo'ladi.
Yaxshi.
Shunday qilib, biz boramiz.
O'ng qidiruv nuqta narxi.
Yaxshi, bu narx, shuningdek, bu erda joylashgan data GS-dan kelgan joydan keladi.
Buni bu erda ko'ra olasizmi? Ha, bu erga qaytib boraylik.
Va endi natijani ko'rib chiqaylik.
Okay, bu saraton kabi bir narsa bu erda bir qarash kerak.
Bizda bu erda ofis ko'ylagi bor, bu erda narx va keyin bizda o'chirish tugmasi ham bor.
Hozircha juda yaxshi, bolalar.
Endi biz uni chiroyli ko'rinadigan tarzda bezatamiz.
Yaxshi, uni chiroyli qilish uchun.
Avvalo, uslubimizga qaytaylik css bu erda uslublar emas.
Kechirasiz.
HTML bor.
Va bolalar, bu erda buni eslaysizmi? Xarid Qilish Savatni.
Bu narsa nusxa, okay.
Bu kabi.
Endi bizning uslubimizga qaytaylik css va pastki qismida bu erda.
Keling, sharh yarataylik.
Birinchidan, okay, bu kabi izoh.
Biz undov belgisini yozamiz va keyin uslubni eshitamiz.
Xop, Savatga savatni qoidalari yana narsani pullik, qilingan.
Endi bu erda siz nuqta pastasi jingalak qavsini eshitasiz.
Xo'sh, bolalar, ular qanday qilib yakunlangan loyihani amalga oshiradilar? Xo'sh, buni qanday qildingiz? Men aslida ko'rsatish panjara deb nomlangan bir narsa foydalanish.
OK, bu bitta ustun.
Yaxshi.
Shunday qilib, bu ham javob beradi.
Bunga qarang.
Agar f ni f ga ursam, bunga qarang, agar mobil ekranga o'tsam, u shunday javob beradi.
Okay, bas, ular narsani qanday, men aslida bitta ustun foydalanish, va bu karta har kengligi 320 piksel bo'lgan.
Shunday qilib, bolalar, keling, loyihamiz bilan ham xuddi shunday qilaylik.
Xop, bas, siz gonna bu erda uslubi css qaytib kelib-ku, agar gonna yozish ko'rsatish grid odamsiz, tg-ga teging.
Keyingi satrda sizda igtc bor, teging, OK, takrorlashda men bitta vergul yozaman y bitta.
Yaxshi.
Birini qo'yishning asosiy sababi shundaki, biz faqat bitta ustunni xohlaymiz, mayli, men bu erga qo'ygan narsam, bittasi, keyin siz bu erga yozasiz 320 piksel, mayli, pikselni davolash orqali, men kenglik bo'lishi kerak degani ustunning kengligi 320 piksel bo'lishi kerak.
Bu narsani ayting bolalar.
Endi natijani ko'rib chiqamiz.
Xo'sh, biz ushbu mashinalar atrofida biron bir chegarani ko'rmasak, aslida hech qanday o'zgarishlarni ko'ra olmaymiz, mayli, ushbu kartalar atrofidagi chegarani yaxshiroq ko'rishimiz uchun.
Meni bolalar bilan birga kuzatib qilmang.
Faqat bu yerdan izoh nusxa va bu erda uni qo'yish.
Xop, bas, u savat element uchun uslubi qoidalari bo'ladi.
Arava elementini qayerdan olaman? Men aslida arava elementini bu yerdan olaman, bu erda ko'rasizmi? Shunday qilib, bu yerdan narsani nusxa ko'chiring.
Ning emas, balki bu erda, uzr emas, bizning savat HTML qaytib boramiz.
uslub css, mayli, bu erga keling va keyin siz nuqta pastasini urasiz Okay, jingalak qavs bu erda bu erda chegara.
Xo'sh, chegara chegarasi qayerda Px qattiq qizil, Versal qora emas, yoki siz ushbu hashtagdan ham foydalanishingiz mumkin, bu rangni shu erda ham ishlatishingiz mumkin, ayting.
Endi bolalar, keling, natijaga qaraylik, bu shunday ko'rinadi.
Keyingi qadam bolalar.
Biz bu narsani aniq markazga qo'yamiz, biz ular orasida bir oz gapping qilamiz va bu nuqta bu burchak bu erda biz uni yaxlitlashtiramiz, bu o'zgarishlarni amalga oshirish uchun faqat birinchi navbatda xarid qilish Savatingizga qaytib keling va keyin biz buni amalga oshiramiz. bu erda bir soniya bolalar.
Biz bu erda JC yorlig'ini ko'rib chiqamiz, kontent markazini oqlaymiz.
Yaxshi, agar natijaga qarasak, u aniq markazga o'tdi.
Mayli, keyingi yigitlar.
Biz bu mashinalar orasidagi bo'shliqni beramiz.
Buni bu erda ko'ra olamanmi? Bizda bo'shliqlar yo'q.
Yaxshi, shuning uchun biz bu erda bo'lamiz.
15 piksel okay gap.
15 piksel, boshqa narsani ayting, natijani ko'rib chiqaylik.
Yaxshi? U erda biz boramiz, olishimiz kerak, keling, buni yumaloq qilaylik.
Keling, bu nuqtani qilaylik burchaklar yumaloq.
Xo'sh, bu narsani qilish uchun, bu erda aravangizga qaytib keling, maylimi? Keyin chegara radiusi besh pikselga teng bo'ladi.
Yaxshi? Besh, px, narsani saqlang.
Natijada qaraylik.
U erda biz boramiz.
Bu kabi bir narsa ko'rinadi.
Yaxshi bolalar, endi bizning rasmimizga va bu erdagi tarkibga qarang.
Qanday qilib u ustunga o'xshaydi.
Lekin biz bu kabi rulon kabi o'zini tutishini xohlamaymiz.
Xo'sh, muammoni hal qilish uchun nima qilishimizni bilasizmi? Siz qaysi birini maqsad qilasiz, bu erga qaytib kelaylik.
Yoki biz joriy htmlni nishonga olamiz va keyin displey flex, DF, tap yozamiz.
Narsalarni saqlang, bolalar.
Endi natijaga qarang.
Bu bizning yakuniy loyihamizga o'xshaydi, bu erda siz ajoyib yigitlarni ko'rasiz, lekin bu yigitlarga qarang.
Bu rasmiy $100 va X.
Bu ustun kabi harakat qilmaydi.
Buni ko'ra olasizmi? Lekin biz istaymiz, lekin biz uni bir qatorga kabi muomala istayman, bu kabi bir narsa.
Xo'sh, bu narsani qilish uchun biz birinchi navbatda asosiy GS-ga qaytamiz kechirasiz, asosiy emas, shunchaki Karges yaxshi, bu erda faqat ba'zi xatolarga yo'l qo'ying.
Shunday qilib, bolalar, js kartangizga qaytib, bu erda foydalaning.
Bu sinf nomi, bolalar bu erda ushlaydilar.
Kichik xato qildim.
Mening uzr, bolalar.
Men u sinf nomi emas.
Bu faqat sinf bo'lishi kerak.
Endi buni ham tuzatamiz.
Va har safar bir narsa sinf nomini ko'rish, nomini olib tashlash, bu faqat sinf bo'lishi kerak, aks holda, bu ish qilmoqchi emas.
Xop, ning bu narsa bolalar uslubi minus narx minus x nusxa qilaylik.
Xo'sh, narsani nusxalashdan so'ng, uslubingizga qayting css, aytmoqchi, yigitlar buni bu erda ko'rishlari mumkin.
Men xato bilan bir xil nomdagi ikkita sharh yozdim.
Shunday qilib, bu erda xarid qilish vositasi.
Ha, bu biriga mos kelishi kerak.
Va bu arava elementi bu erda, bu erda mos kelishi kerak.
Shunday qilib, keling, buni olib tashlaymiz va arava minus elementlari uchun uslub qoidalarini yozamiz.
Qilingan, bolalar.
Endi bu erda eng pastki qismga o'tamiz, biz nuqta pastasini qo'shamiz.
Yaxshi, keyin biz uramiz jingalak qavs.
Xo'sh, bu erda biz haqmiz, Flex qadamini ko'rsating, narsani saqlang.
Endi bolalar, natijani ko'rib chiqaylik.
Bu kabi bir narsa qarash kerak.
Ammo bolalar buni bu erda ko'rishlari mumkin, bu x va bu narsalar aniq markazga mos kelmaydi.
Yaxshi.
Shunday qilib, bu muammoni hal qilish uchun, bu qarash.
Men faqat gonna mening barcha VS kodi qaytib kelib qilyapman.
Meni faqat bu kabi bu erda saqlasin.
OK, siz bu erda ko'zingizni saqlaysiz.
Okay, va keyin men gonna bu erda kodni yozish emasman, bu qarash, men gonna foydalanish AIC tab emasman, on men saqlash bosing, bu qarash.
Endi ular aniq markazga to'g'ri keladimi? Va keyingi yigitlar buni qilishadi x bu erda.
Men uni bu erda burchakka qo'yaman.
Buning uchun, biz gonna yozish odamsiz JC SVLK endi uning natijasida qaraylik shu narsa o'rtasida kontent oraliq oqlash.
Buni ko'ra olasizmi? Bu ishlamadi? Nega bu ishlamadi? Bolalar? Sizga hiyla-nayrangni ko'rsataman.
Shunday qilib, nima uchun ma'lum bir element ishlamayotganligini tushunish uchun har doim ushbu chegarani qo'shing.
Px qattiq uchun Okay, huh? Keyin bu erda butun elementni ko'rishingiz mumkin.
Buni bu erda ko'ra olasizmi? Bu butun element.
X ning bu erda maqsadga kelmasligining asosiy sababi shundaki, bu tarkib bu erda tuzatilgan.
U qulflangan.
Yaxshi? U o'zini kengaytira olmaydi.
Shunday qilib, uni kengaytirish uchun biz nima qilamiz, biz sizga yo'l beramiz, bunga qarang.
Biz uning vaznini 195 piksel qilib belgilaymiz.
Yaxshi? Narsani ayting.
Natijani qilaylik.
U erda biz boramiz.
Endi bu x ni bu erda kengaytirayotganini ko'ra olasizmi? Ajoyib, yigitlar.
Hozirgacha juda yaxshi.
Endi bizga chegara kerak emas.
Siz uni ushlab qolish mumkin yoki siz faqat fikr oyoqlarini qilish mumkin.
Mayli, narsani saqlang.
U erda biz boramiz.
Bu yaxshi ko'rinadi.
Lekin bolalar, bunga qarang.
Bu $300.
Keyin, biz bor $100.
Bu erda.
Biz bu erda buni xohlamaymiz.
Biz bu erda bo'lishini istaymiz, xuddi bu erda buni ko'rish mumkin.
Ha.
Keling, kerakli o'zgarishlarni qilaylik.
Okay, bu kabi ko'rinadi, shunday qilib,.
Shunday qilib, kartangizga qaytaylik.
Ha.
Avvalo, narsani kengaytiraylik.
Yaxshi.
Ushbu h4 yorlig'ini ko'rasizmi? Ha, biz bu erda yana bir sinfni joylashtiramiz.
Yaxshi, birinchi sinf ikkinchi sinf.
ikki taklif bo'ladi teng nomi, biz sizning nom minus narxini yozish uchun harakat qilyapmiz.
Bas, nima uchun men nom daqiqa narxi, ham qo'yish edi? Buning sababi shundaki, bu Teg aslida men aytmoqchi bo'lgan nomni ham, sarlavhani ham, narxni ham o'z ichiga oladi.
Shuning uchun uni nomlayman.
Men buni shunday nomladim.
Shunday qilib, bolalar, men faqat gonna narsani nusxa qilyapman.
Ning bizning uslubi css qaytib boramiz, va pastki qismidagi, men gonna yozish dot pasta jingalak qavs emasman.
Shunday qilib, bu erda men to'g'ri ekran flex, okay.
Aiic yorlig'i Align mahsulot markazi uchun.
Mayli, va endi aytaylik, natijani ko'rib chiqaylik.
Bu kabi bir narsa qarash kerak.
Lekin bolalar, biz ular orasida hech qanday bo'shliqni yo'q.
Buni ko'ra olasizmi? Shunday qilib, ba'zi bo'shliqni qo'yish uchun, uning bu erda nom minus narxi ichida 10 piksel bo'shliqni qo'yish qilaylik u okay bo'ladi? Shunday qilib, biz aslida 10 pikselli qancha bo'shliqni topamiz, endi bu odamlarga qarang.
Bizda bu erda 10 pikselli bo'shliq bor, mayli, bu narx bu erda, biz uni xuddi shu kabi chiroyli ko'rinadigan tarzda bezashni xohlaymiz.
Yaxshi.
Shunday qilib, men bilan birga bolalar.
Xo'sh, bu aslida qayerda joylashgan? Avvalo bo'lsin, agar gonna avtomobil Chas borish qilyapmiz, deb topish.
Yaxshi.
Hozir, qaerda u? Bu erda aslida keldi.
Buni bu erda ko'rishingiz mumkin.
search.com P Teg ustida ko'zlar.
Ha.
Shunday qilib, biz bu erda sinfni biriktiramiz.
Mayli, bunga qarang.
Biz sinf yozamiz.
Xop, ikki iqtibos teng savat element narxi bo'ladi.
Yaxshi? Savat minus element minus narx.
Xo'sh, endi bu narsani bu erdan nusxa ko'chiring.
Keling, avval boshingizga qaytaylik va narsani saqlaylik.
Mayli, nusxa oling.
Narsani nusxalashdan so'ng, uslubingizga qayting css, yaxshi, va pastki qismida, yaxshi, nuqta pastasi, yaxshi, jingalak qavs.
Bu erda siz borasiz, to'g'ri, birinchi navbatda, BGC Loganning BGC-ga teging, mayli, siz uni sotasiz, bo'sh joyni boshqarish uchun biz ko'rsatgan rangni tanlang, mayli, agar siz bu kabi narsani unutgan bo'lsangiz, biz besh-to'qqizni xohlaymiz, keyin biz rangni oq rangga o'rnatamiz, shunga o'xshash narsa.
Yaxshi.
U erda biz boramiz.
Endi, agar tejash natijasini ko'rib chiqsak, u shunday ko'rinishi kerak, to'g'rimi? Chiroyli ko'rinishi uchun biz bir oz plomba va chegara maydonini qo'llaymiz.
Yaxshi.
Shunday qilib, bu narsalarni qilish uchun bu erga keling, keyin siz to'rt pikselli chegara radiusini yozasiz, shunga o'xshash narsa.
Yaxshi? Keyin biz yuqori va pastki qismida uchta piksel va chap va o'ngda oltita pikselli to'ldirishni qo'llaymiz, shunga o'xshash narsa.
Keling, saqlashdan keyin natija yigitlarini ko'rib chiqaylik.
Endi bunga qarang.
Bu yaxshi ko'rinadi.
Mayli, kichraytiraylik.
Yaxshi.
Keyingi qadam, bolalar.
Bu erda tugmalar.
Ha.
Sizningcha, bu juda tanish ko'rinadimi? Ha, bu tanish ko'rinadi.
Agar siz bosh sahifaga kirsangiz, biz ushbu komponentni cart sahifamizga import qildik.
Yaxshi.
Bu o'xshash ko'rinadi nima uchun o'sha.
Shuning uchun u bir xil ko'rinadi.
Shunday qilib, biz uni yozmaymiz.
Biz faqat bizning asosiy Jas ba'zi satrlarni joylashtirish nusxa fiz.
Xo'sh, siz nima qilasiz, asosiy js-ga borasiz, u qayerda? Ha Degan Ma'noni Anglatadi.
Yaxshi, keyin siz umumiy do'kon funktsiyasini ochasiz.
Yaxshi.
Endi sinf nomi tugmalari bilan div qayerda.
Mana, buni bu erda ko'rish mumkin.
Shunday qilib, faqat bosing bu yerga, va keyin bu erda bu mavzu bor.
Ha.
Shunday qilib, ushbu mavzudan so'ng, siz bu erdan hamma narsani nusxalaysiz.
Yaxshi.
Hamma narsani nusxalashdan so'ng, Savatingizga qaytib keling.
Ha.
Yaxshi.
Keyingi bu erda bu erda siz osongina narsani olib tashlashingiz mumkin, chunki biz bir xil narsani nusxa ko'chirdik, to'g'rimi? Keyin siz uni yopishtirasiz, keling, bir narsani aytaylik va bu erda bir oz chuqurlik bering.
Yaxshi? Shunday qilib, bir oz chuqurlik berish uchun buni qiling, yaxshi, shuning uchun siz div ichidagi hamma narsani tanlaysiz, keyin siz urasiz yorliq bu kabi.
Yaxshi? Bu erga keling va siz kesilgan yorliqni ko'rasiz, u shunday ko'rinishi kerak, maylimi? Yoki bu erda yana bir chuqurlik berishingiz mumkin.
U erda biz boramiz.
Narsani saqlang.
Endi natijani ko'rib chiqaylik.
Yaxshi? Bu erda qayerda? Bu okay emasmi? U erda biz boramiz.
Bu yerda, bu bir ko'rish mumkin, biz Plus bosing, agar, shuningdek, bu erda soni ko'rsatkich bilan birga, ortiqcha va minus belgilarini bor, yoki minus bosing, agar ish qilmoqchi emas.
Nima uchun bu? Buning sababi, ushbu kartani ta'qib qilishga qarang.
Yaxshi, agar men buni yopsam, bizda o'sish va kamaytirish funktsiyasi yo'q.
Shuning uchun u ishlamaydi.
Ammo agar siz buni ochsangiz, pastga aylantirsak, buni bu erda ko'ra olasizmi? Men minus tugmasini bosing, huh? Bu erda pasayish bor va bu erda.
Bu qayerda? Bu ortiqcha, bu erda o'sishni oldi, garchi ular bu erda bo'lsa ham.
Bu hali ishlamaydi.
Buning sababi, bolalar, biz bu funktsiyalarni pastki qismida aniqlamadik.
Biz hozir buni qilamiz.
Ammo bundan oldin, siz buni bu erda ko'rasizmi? Ha, bizga bu kerak emas.
Xo'sh, siz nima qilasiz, bu narsani bu erdan olib tashlaysiz, yaxshi.
Va bir soniya, bolalar, meni bu kabi bir yaxshi qilsin.
Menga bir soniya bering.
U erda biz boramiz.
Okay, bu kabi bir narsa qarash kerak.
Endi, bir soniya yuqoriga aylantirsangiz, bu erda ushbu elementni eslaysizmi? Ha, siz aslida bu x qayerdan kelgan elementni nusxalashingiz mumkin, bu x qayerdan keladi? Bu x savatdan keladi.
Xop, faqat bu yerdan ob'ektni nusxa, bu erda miqdori uchun pastga aylantiring.
OK, bu erda, dollar belgisi jingalak qavs paisa narsa amalga, uni saqlab.
Endi natijani ko'rib chiqamiz.
Endi siz bu erda ko'rsatilgan raqamni jonli ravishda ko'rishingiz mumkin.
Shunday qilib, bolalar, bu raqam siz tanlagan element miqdorini anglatadi.
Yaxshi? Lekin hali ham siz ortiqcha bosing va minus okay, ish qilmoqchi emas, agar? Ishni bajarish uchun.
Bu bolalarga qarang.
Men tom ma'noda asosiy Jasga boraman.
Yaxshi, bir soniya.
Bu narsani yopay.
Bir oz kichraytiring.
Ushbu o'sishni kamaytirishni ko'ryapsizmi, men bu yerdan nusxa ko'chiraman.
Xo'sh, narsani nusxalashdan so'ng, kartangizga qayting.
Ha, pastki qismida, mayli, hamma narsani shunday joylashtiring, saqlang.
Avvalo buni.
Siz uni shunday yopasiz.
Xop, yuqoriga o'ting, va keyin bu kabi uni yopish.
Yaxshi.
Bundan tashqari, bu bolalar bilan birga, biz ham aks holda biz men faqat yangilash vazifasini nusxa natijalar ekranda degani HTML o'zgarishlarni ko'rish mumkin emas yangilash olish kerak.
Bu erga qaytib keling va keyin bu kabi narsalarni joylashtiring.
Men siz ham bu kabi yo'l mumkin narsani saqlab gonna emasman.
Va biz boramiz.
Keling, natijani ko'rib chiqaylik okay hamma narsani kartada saqlaganingizdan so'ng JS Okay, shuning uchun agar siz ortiqcha bossangiz, hamma narsa yaxshi bo'lsa, u juda yaxshi ishlaydi.
Faqat bu bolalar emas, siz buni ko'rishingiz mumkin, bu erda buni ko'rishimiz mumkin, biz ham bunga juda yaxshi qaraymiz.
O'ng tugmasini bosing keling, u ishlayotgan ortiqcha ustiga bosing keling, u erda minusni bosing.
Bu juda yaxshi ishlaydi.
Yaxshi.
Barcha o'ng guys.
Bizning kodimiz bilan bog'liq muammo bu erda tugmalardir.
Ha, ortiqcha belgisi haqiqatan ham hech qanday muammo bilan kurashish uchun ishlaydi, ammo muammo minusda, har safar borib nolga urganimda, bu karta o'zini avtomatik ravishda olib tashlamaydi.
Ammo biz bu narsaning o'zini avtomatik ravishda olib tashlashini xohlaymiz, masalan, bu erda to'rttasi bor, deylik, maylimi? Yoki aytaylik, men bu narsani olib tashlamoqchiman.
Ushbu 3210 ga qarang.
Siz u bizning loyihaga shu tizimini amalga oshirish uchun, yechim bolalar juda, juda, juda oddiy, avtomatik ravishda o'zini olib, qarang.
Men bilan birga kuzatib boring, bolalar, bu erda pasayish funktsiyasi tufayli.
Ha, birinchi navbatda, siz narsani ochasiz.
Yaxshi? Va bu erda arava buyumlarini yaratadimi? Ha, faqat narsani nusxalash.
Va endi, bu sharhni bu erda ko'rasizmi? Men fikr olib tashlash gonna emasman, va keyin, men bu kabi narsani joylashtirish uchun ketyapman.
Yaxshi.
Endi bu qarash.
Men narsani saqlab qolaman, mistik natija.
Xop, bu, bu loyiha natijalari bor.
Shunday qilib, 03210 ga boramiz.
U erda biz boramiz.
U avtomatik ravishda ketdi.
Bu aslida qanday sodir bo'lmoqda? Bolalar? Tushuntirib beray.
Xo'sh, yigitlar bu qatorni bu erda eslaydilarmi? Ha.
Aslida nima qilyapti? Uning asosiy vazifasi nolga teng bo'lgan barcha ob'ektlarni filtrlashdir.
Shunday qilib, ushbu ma'lumotlarni filtrlashni tugatgandan so'ng, ushbu funktsiyadan foydalangan holda kartalarimizni qayta ko'rib chiqasizmi, buni bu erda ko'rasizmi? Bu aslida bizning kartalari to'lov qayta uchun ishlatiladi.
Shunday qilib, agar men yuqoriga o'girsam, bu aslida qayerdan keladi? Bu tetik bizni qayerga olib boradi? Bu bizni funktsiyaga olib boradi karta elementlarini yaratish, bu aslida ushbu kartalarni yaratishga yordam beradi.
Buni bu erda ko'rishingiz mumkin.
Ha.
Shunday qilib, mexanika aslida ishlaydi.
Okay, avvalo, o'sha keraksiz ma'lumotlarni olib tashlash uchun ketadi, ma'lumotlar, qaysi nol ob'ektni ega, va keyin vazifasini ishlatish uchun ketadi, qaysi barcha kartalari rerender bizga yordam beradi.
Sizga jonli demoni ko'rsatay.
Yaxshi.
Xo'sh, bu besh qancha? 04321 ga borishga harakat qilaylik.
Keyingi safar bu erda minusni urganimda nolga aylanadi.
U nolga aylangandan so'ng, qaysi qatorda ishlashini bilasizmi? U nolga teng bo'lgan paytda, bu chiziq ishlaydi va keyin mashinalarni o'qish uchun bu narsa emas.
Yaxshi? Mexanik aslida shunday ishlaydi.
Bunga qarang.
Agar biz buni bossak, u erga boramiz, ma'lumotlar markazda yo'qoladi, karta ham yo'qoladi.
Shunday qilib, yigitlar, men haqiqatan ham mexanika aslida qanday ishlashini tushunganingizga umid qilaman.
Mayli, bosh sahifaga qaytaylik.
Va ba'zi mahsulotlarni tanlaymiz.
OK, shuning uchun men bu mahsulotlarni bu erda tanlayman.
U erda biz boramiz.
Mayli, arava sahifasiga qaytaylik.
Va endi bolalar, keling, buni finalize loyihamiz bilan taqqoslaylik.
Mayli, bunga qarang.
Shunday qilib, bizda Kennedining narxi bor.
Ha, bu siz tanlagan mahsulotning umumiy narxi va miqdori.
Xop, bas, siz bu kabi plus bosing, agar, bu qarash, miqdori, shuningdek oshdi narxi bilan birga oshdi.
Xo'sh, qanday qilib bunday komponentni yaratasiz? Juda oddiy, juda oson, bolalar.
Men bilan birga qiling.
Yaxshi.
Shunday qilib, biz birinchi navbatda, bu erda karta stullarimizga qaytib boradigan narsani qilamiz.
Agar bu vazifani ko'ryapsizmi, qaysi umumiy arava mahsulot hisoblanadi? Ha, bu bir, okay.
Shunday qilib, biz sekin pastga aylantiramiz.
Yaxshi.
Tugmalardan keyin ushbu h3 yorlig'ini eslaysizmi? Ha, biz bu erda narsalarni yozamiz.
Yaxshi.
Shunday qilib, bolalar, men bilan birga ergashinglar.
Bir oz kattalashtirishga ruxsat bering.
Yaxshi.
Shunday qilib, men birinchi navbatda valyutani ifodalash uchun $1 belgisini yozaman.
Yaxshi.
Keyin biz $ 1 belgisini jingalak Rec yozamiz.
Bu erda.
Agar element bilan element bolalar eslaysizmi? Bu erda element hisoblanadi.
Yaxshi? Buni ko'ra olasizmi? Avvalo, narsani nusxalash.
OK, keyin pastga aylantiring bu yerga.
Yaxshi.
Elementni bu erga joylashtiring.
Xo'sh, element nimani anglatadi? Biror narsani saqlaganingizdan keyin sizga aytaman, natijani ko'rib chiqaylik.
Buni bu erda ko'ra olasizmi? Ha, 14, bu erda bu raqam, bu miqdor, bu miqdor aslida bu erda ifodalanadi.
Bu miqdor bu erda chop etilmoqda.
Lekin biz xohlaymiz biz nimani xohlaymiz, biz bu songa ko'paytirilishini xohlaymiz bu erda bu erda kafolat bering.
Bu birlik narxi.
Bu bir birlikning narxi, biz buni mahsulot miqdori bilan ko'paytirmoqchimiz.
Va keyin biz bu erda yakuniy natijani olamiz.
Shunday qilib, bu kabi bir narsa qilish uchun, meni qanday narsani sizga ko'rsataman.
Okay, siz gonna bir yulduz urdi-ku, keyin amalga narsa joylashtirish, element ustiga pastga aylantiring, narsa nusxa, Xudo narx qidiruv, bu erda bu bir yuqoriga o'ting.
Narsani saqlang.
Endi, bolalar, natijani ko'rib chiqaylik.
U erda biz boramiz.
Guys bu erda bu bir ko'rishingiz mumkin? Ha, bu birlik narxi.
Va bu miqdor, u ko'paytirildi va bu erda bizga natija berdi.
Bu biz kutgan narsa.
Lekin bu erda biz kutmagan bir narsa.
Har safar bu kabi plyusni bosganingizda.
Biz matbuot yangilanishini olish istayman, lekin u yangilash emas, o'ng.
Bu juda yaxshi ishlamayapti.
Ammo har safar minusni urganingizda hamma narsani ko'rishingiz mumkinmi? Minus aslida ishlaydi, lekin ortiqcha ishlamaydi.
Nega bu bolalar? Bu juda g'alati ko'rinadi.
Muammoni hal qilish uchun.
Avvalo, shifrni ochish funktsiyasini bir soniya ko'rib chiqaylik.
Keling, buni shunday yopaylik.
Ning parol hal funktsiyasi bolalar qaraylik.
Nima qilyapmiz? Har safar minusni bosganimizda, parol hal qilish funktsiyasi ishlaydi, natijada bu ishlab chiqarish savati elementi ham ishlaydi.
Xo'sh, nima uchun bu muhim? Bu aslida nima qiladi? Bu ilova yangilangan ma'lumotlar bilan aravalarimizni qayta yo'naltirishga yordam beradi.
Shuning uchun bolalar, shuning uchun faqat minus ishlaydi, lekin ortiqcha emas.
Muammoni hal qilish uchun bu juda sodda, juda oson.
Faqat narsani nusxalash, maylimi? folio kamaytirish, oshirish ochish.
Mayli, endi yigitlar ustiga o'ting.
Ushbu konsolni bu erda ko'rasizmi? Ha, men narsa olib tashlash uchun ketyapman, bu kabi joylashtirish, narsa hal qilish uchun ketadi yoki bizning masalani hal qilish uchun ketadi saqlab.
Keling, natijaga qaraylik bolalar.
Har safar plyusni bosganingizda, biz boramiz.
Bunga qarang.
Bu juda yaxshi ishlaydi.
Ko'ryapsizmi, keling, u erda minusni bosishga harakat qilaylik.
U ishlaydi.
Ajoyib.
Yaxshi.
Yaxshi, bolalar.
Shunday qilib, birinchi server keyingi, bu erda o'chirish tugmasi.
Ha, biz nomlangan funktsiyani yaratamiz elementni olib tashlang shuning uchun har safar uni bosganimizda bu erda butun kartani olib tashlaymiz.
Okay, bas, uning borib, bu qurish qilaylik.
Shunday qilib, buni yaratish uchun kartangizga qayting GS va yangilanish ostida, biz nima yozamiz, biz funktsiyani yozamiz, yaxshi, u erda, elementni olib tashlang, yaxshi, elementni olib tashlash es bo'ladi olti o'q funktsiyasi bu kabi.
Okay, endi bu erda ichida, biz gonna ID o'tishi qilyapmiz.
Bas, nima uchun men ID o'tishi edi? Sizga aytib beray.
Okay, bas, narsa, qanday qiladi? JavaScript siz tanlagan kartani qanday aniq bilib oladi? OK, bu avtomobillar barcha bu ID barcha okay, noyob ID ega? Ushbu noyob identifikatordan foydalanib, biz narsani o'chirib tashlaymiz.
Xop, men bu parametr ID kiritilgan nima uchun o'sha.
Keyin, bolalar, biz buni nusxalashimiz va X belgisi aslida joylashgan joyda chaqirishimiz kerak tanlang joylashgan.
Yaxshi.
Buni bu erda ko'rasizmi? Ha, sarlavha narxi minus x.
Bu erda sizda bu erda belgi bor, yaxshi.
Shunday qilib, siz uradigan belgida OK tugmasini bosing.
Ikki tirnoq teng bosing, xop.
To'lov bu erda chaqirilgan narsa.
Keyingi yuqoriga, bolalar, yuqoriga o'ting.
Siz shu bu ID ko'ryapsizmi, pastga ID o'ting nusxa, siz gonna dollar belgisini bu yerda yozish odamsiz, jingalak qavs Id amalga.
Endi, bu narsa haqiqatan ham ishlaydimi yoki yo'qligini tekshirish uchun.
Siz shu pastga o'ting fiz, bu qarash.
Yaxshi? Keyin siz aslida kechirasiz, tanlangan elementni tanlashga ruxsat berasiz.
ID teng Item.
Xo'sh, bolalar, keyingi navbatda, biz konsolni, konsol jurnalini tekshiramiz, biz xuddi shu narsa kabi tanlangan elementni oldik.
Natijani qilaylik.
Yaxshi.
Shunday qilib, f 12 ni uramiz.
Yana konsolga boraylik.
Har safar bosganingizda, aytaylik x bu valyuta kabi bu erda yo'q, biz bu erda butun HTML elementini oldik, biz buni xohlamaymiz.
Biz bu erda faqat Id faqat noyob raqamni istayman.
Buni bu erda ko'ra olamanmi? Ha.
Shunday qilib, faqat buni yollash uchun biz tanlangan manzilga murojaat qilamiz item.id faqat narsani saqlang, faqat natijaga qarang.
Mayli, biz boramiz.
Har safar X Kasetsart bosing.
Bu erda biz faqat ushbu kartalarning har biri uchun joylashgan noyob identifikatorni olishimiz mumkin, shunga o'xshash narsa.
Ko'ryapsizmi, hozirgacha.
Juda yaxshi, bolalar.
Aytgancha, ushbu konsolni bu erda ko'ra olasizmi? Aytmoqchimanki, bu ma'lumotlar bu erda, ular konsoldan keladi.
Keling, bu narsani olib tashlaylik.
Yaxshi.
Shunday qilib, bu narsalarni olib tashlash uchun umumiy karta elementlariga qayting.
Yaxshi, bu erda konsol.
Keling, bu erdan narsani olib tashlaymiz, yaxshi, chunki u g'alati ko'rinadi.
Yaxshi.
Bu amalga oshirilgandan so'ng, bolalar, keling, bu erda pastga tushaylik.
Bu qayerda? Mana konsol.
Xop, ning bu erda bir fikr qilish qilaylik.
Endi, bolalar, natijani ko'rib chiqaylik.
Yaxshi? Har safar, har safar bu xochni bosganimda, nima bo'lishini bilasizmi? Har safar xochni bosganimda ushbu ob'ektni mahalliy xotiradan olib tashlaymanmi? Sizga ko'rsataman.
Shunday qilib, agar men bu erda mahalliy xotiraga qaytsam, 19 elementi qayerda.
OK, bu 90 miqdori bu erda 19, to'g'rimi? Har safar X tugmachasini bosganimda, ushbu ob'ektni bu erdan olib tashlamoqchiman.
Yaxshi, buning uchun biz filtr funksiyasi deb ataladigan narsadan foydalanamiz.
Keling, xuddi shu narsani qilaylik.
Yaxshi.
Shunday qilib, biz bu erda bo'lamiz savat, yaxshi, savat nuqta filtriga teng savat.
Yaxshi.
Keyingi qadam, men bu kabi bu erda bir es olti o'q vazifasini foydalanish uchun ketyapman.
Xo'sh, endi biz yozamiz, siz hech narsa yozishingiz mumkin, argumentlarda muammo bo'lmaydi, lekin keling, buni sodda qilaylik.
Ning sizning X yozish bo'lsin.
Yaxshi? Shunday qilib, X ichida biz maqsad qiladigan narsa-bu identifikatorga qarshi maqsadimizdir, chunki bu erda faqat noyob narsa bor, shuning uchun biz maqsadga erishamiz x.id.
Shunday qilib, men nima qilyapman, bu filtr funktsiyasining x-da men ushbu ob'ektlarning barchasini birma-bir nishonga olaman.
Va men bu erda ID maqsadli beri, nima qilayapman, men nishonga va barcha ID qarshi taalukli qilyapman emas.
Xo'sh, endi, keling, bu erga qaytib kelaylik, keyin men Tanlanganga teng emas, to'g'ri uraman item.id, bu qaysi biri, maylimi? Bu narsani nusxa oling va bu yerga qo'ying.
Yaxshi? Shunday qilib, bu nima qiladi, siz xochni bosgan narsangiz, nima qilmoqchi bo'lsa, bu narsani olib tashlaydi.
Bu narsani aravadan olib tashlaydi va keyin savatimizni yangilaydi.
Yaxshi, shuning uchun yangilanish faqat Savatga keladi, lekin biz ham yangilanishni mahalliy xotiramizga o'tishini xohlaymiz.
Shunday qilib, buni amalga oshirish uchun ulardan birini oching o'sish yoki kamaytirish shunday bo'ling.
Endi pastga aylantiring, sizda mahalliy saqlash nuqta to'plami elementi deb nomlangan chiziq mavjud.
Yozishingiz shart bo'lmagan narsadan nusxa oling.
Yaxshi? Faqat narsani nusxalash, pastga aylantiring.
Buni ko'rasizmi elementni olib tashlang bu erda funktsiya bosqichida, shunga o'xshash narsa, yaxshi, bajarildi.
Uni saqlang.
Endi, bolalar, keling va natijaga qaraylik.
Xop, agar bu erga qaytib kelsa, ning X bosing qilaylik.
Xo'sh, bu erda sakkizta usul aslida bu erda qanday raqam bor.
Har safar X ni bosganingizda, raqam va ob'ekt aslida yo'qoladi.
Lekin ob'ektning o'zi, demak, kartaning o'zi ketmaydi.
Ammo har safar sahifani yangilaganingizda u yo'qoladi, lekin biz bu xatti-harakatni xohlamaymiz, biz uning avtomatik ravishda yangilanishini xohlaymiz.
Shunday qilib, buni amalga oshirish uchun biz buni ko'rib chiqamiz, bu juda oddiy, bolalar, biz komponentlarimizni qayta beramiz, yaxshi, biz har safar o'zaro faoliyat tugmani tanlaganimizda barcha kartalarimizni qayta beramiz, maylimi? Xo'sh, buni amalga oshirish uchun bu narsani nusxa ko'chiring, maylimi? Narsadan nusxa oling, pastga aylantiring va keyin uni shu yerga joylashtiring.
Mayli, narsani saqlang.
Endi, bolalar, natijani ko'rib chiqaylik.
Yaxshi? Shunday qilib, har safar tasodifiy ko'ylakni aytaylik, menga oddiy ko'ylak kerak emas.
Shunday qilib, men bu kabi X ni uraman.
U erda biz boramiz.
Bu erda olib tashlanadi va bir vaqtning o'zida bu erda olib tashlanadi.
Keling, buni shunday tanlaymiz.
U erda biz hamma narsani olib tashlaymiz va u juda yaxshi ishlaydi.
Lekin bolalar, bu nomzodga qarang bu erda, arava bo'sh.
Nima uchun bu? Buning sababi shundaki, bizda bu erda hech qanday ma'lumot yo'q.
Mayli, orqaga qaytaylik.
Va keyin biror narsani tanlaymiz, maylimi? Bu kabi bir narsa.
Va endi bu kabi savat sahifasiga o'tamiz.
U erda biz boramiz.
Mayli, yana sinab ko'raylik.
Keling, bosing bu erda bu erda.
Va bu erda ham o'zini olib tashlamoqda.
Hozircha juda yaxshi, yigitlar.
Endi, bolalar, bu erda joylashgan file s loyihamizga qaraylik.
Ushbu komponentni bu erda ko'ra olasizmi? Ha, umumiy hisob-kitob va to'lov aniq kesilgan, biz ushbu tugmani qilamiz.
Aytmoqchimanki, biz ushbu komponentni hoziroq ishlab chiqaramiz, shunga o'xshash narsalarni men bilan birga kuzatib borish uchun, bolalar, biz funktsiya yaratamiz va biz uni hisoblashimiz uchun uning umumiy miqdorini nomlaymiz.bizning hisob-kitobimizning umumiy miqdori.
OK, shuning uchun biz ESX xato funktsiyasini yaratamiz, umumiy miqdorga ruxsat beramiz, yaxshi, teng bu kabi ESX xato funktsiyasi bo'ladi, shunga o'xshash narsa.
U erda biz boramiz.
Xo'sh, endi bu erda bizda ikkita holat bo'ladi.
Birinchi holat-mahalliy xotirada qachon ma'lumotlar bor? Va mahalliy saqlash haqida ma'lumotimiz bo'lmagan boshqa holatlar? Okay, faqat bu kabi.
Sizga ko'rsataman.
Faqat umumiy savat ob'ektlar kabi, biz bu erda qancha holatlar bor? Ikki holat.
Shunday qilib, birinchi holat, bizda mahalliy saqlash haqida ma'lumotlar mavjud bo'lganda.
Va ikkinchi holat - mahalliy xotirada hech qanday ma'lumot yo'q, maylimi? Xuddi shu tarzda, biz buning o'rniga ikkita holatga ega bo'lamiz, umumiy miqdor, yaxshi, shuning uchun bunga qarang, agar yaxshi, savat, nuqta uzunligi nolga teng bo'lmasa, ushbu kodni ishga tushiring, aks holda biz shunchaki narsani qaytaramiz.
Bas, nima uchun yana qaytib, biz hech narsa yo'q, degani, faqat jarayonini to'xtatish.
Yaxshi.
Keyin, bolalar, bu jingalak qavs ichida biz yozamiz.
Yaxshi? miqdor teng, biz savatni nishonga olamiz va biz bu narsani xaritaga tushiramiz.
Mayli, bunga qarang.
Biz savat nuqta xaritasini yozamiz.
Yaxshi.
Bas, nima uchun men aslida narsa xaritalash qilaman? Endi, bolalar, sizga bu narsani xaritalashning asosiy sabablarini aytib beray.
Xo'sh, bu narsani xaritalashning asosiy sababi? Men degani, xaritalash savat bu qarash emas.
Shunday qilib, agar men bu erda mahalliy xotiraga qaytsam, ha, bunga qarang.
Siz buni bu erda ko'rasizmi va bu erda elementdan foydalanasizmi? Biz allaqachon ob'ektni bor.
Yaxshi, bizda allaqachon mahsulot bor, lekin bizda narx yo'q.
Shunday qilib, ushbu identifikatordan foydalanib, buni bu erda ko'ra olasizmi? Bu nima? Men ya qarzdorman, huh? Ushbu identifikatordan foydalanib, biz boramiz va ma'lumotlarimiz ichida qidiramiz.
Gs bizning ma'lumotlarimiz qayerda? Ha, bizning ma'lumotlar js bu erda, bu ID emas, bu i o y kaliti va bu erda bitta.
Ushbu identifikatordan foydalanib, biz Jas ma'lumotlarini qidiramiz va keyin u erdan narxni olamiz.
Bir marta biz narxni ushladik.
U erdan biz umumiy narxni olishimiz uchun uni elementsiz ko'paytiramiz.
Men bu bilan nimani nazarda tutayotganimni tushunganingizga umid qilaman.
Endi men sizga jonli namunani ko'rsataman.
Yaxshi.
Shunday qilib, Gs mashinasida, bunga qarang, men bu erga kelaman va keyin men shu erdaman qavs, mayli.
Men gonna hech narsa yozish qilyapman, hech qanday muammo, lekin uning oddiy qilaylik.
Biz bu erda oltita xato funktsiyasini yozamiz va keyin x-ni o'tkazamiz.
Endi jingalak qavs.
Endi siz Xni yo'q qilishingiz mumkin.
X ni qanday yo'q qilasiz va bu qanday sodir bo'ladi? Bunga qarang.
Bu ID va element, siz bu kabi narsalarni ajratishingiz mumkin, biz bu erga kelamiz va keyin bu erda yozamiz, mayli? Jingalak qavs x ga teng bo'lsin, endi bu erga keling va keyin uni yozing m vergul identifikatori.
Yaxshi? Narsani saqlang.
Endi keyingi qatorda yigitlar.
Biz nima qilmoqchimiz-bu identifikatordan foydalanish, biz ma'lumotlar bazamizda qidiramiz.
Shunday qilib, bolalar, agar eslasangiz, biz hech narsa yozishimiz shart emas, agar siz bir soniya yigitlarga borsangiz, Agar siz savatni yaratish elementlariga o'tsangiz, funktsiyani osongina olishingiz mumkin bu erda ushbu qidiruv funktsiyasidan foydalaning bu erda.
Ha, shunchaki narsani nusxa ko'chiring, chunki u allaqachon mavjud, biz uni qayta yozishimiz, qidiruv funktsiyasini nusxalashimiz shart emas, keyin siz u erdagi narsani yopasiz, umumiy miqdor funktsiyangizga o'ting, maylimi? Bu erda bu kabi narsalarni joylashtiring.
Okay, bas, u aslida nima qiladi? Bu ma'lumotlar bazasi qarshi Mac ID foydalanadi.
Mayli, misol uchun, bunga qarang, mayli, bir soniya.
Misol uchun.
Uning o y narsalariga qarang, maylimi? Bu aslida ichida saqlanadi cho'mish, qaerda u? Aslida bu identifikator ichida saqlanadi.
Yaxshi? Shunday qilib, bu qidiruv, u nima qiladi, mahalliy g'oyasi qarshi bu ID qo'ng'iroq qilish uchun ketadi, men emasman, men bazasida emasman, okay? Bu erda aslida.
Yaxshi.
Men, albatta,, albatta, siz men bu chiziq bilan nima demoqchisiz tushundim, deb umid qilaman? Xo'sh, keyingi navbatda, biz nima qilamiz, biz qaytib kelamiz bunga qarang, siz elementni qaytarasiz.
Yaxshi? Aytgancha, sizga bu narsa nimani anglatishini ko'rsataman.
Yaxshi.
Shunday qilib, agar siz bu erda mahalliy xotiraga qaytsangiz, bu element bu erda ikki-uch, ha, bu element.
Va keyin bizda qidiruv nuqta narxi deb nomlangan narsa bor.
Bunga qarang.
Shunday qilib, siz shunchaki shunga o'xshash narsani ko'paytirasiz, mayli, qidiruv nuqta narxini ko'paytiring.
Bu narx aslida bu erdan keladi.
Siz bu yerda, bu bir qarang? Xo'sh, endi bu yigitlarga qarang.
Men konsolni ko'rib chiqmoqchiman, shunda siz uni yaxshiroq ko'rishingiz mumkin.
Yaxshi? Shunday qilib, konsolni kiritish uchun, narsa, bunga qarang, men bu erda konsolman.
Okay, nuqta log.
Kechirasiz, bolalar, bu erda emas.
Bu yerdan narsani kesib oling.
Va bu bu erda else bayonotidan oldin L bayonoti.
Xop, narsa joylashtirish, qavs.
Va keyin bu miqdordan foydalaning.
Ha, miqdorini nusxa, bu yerda uni qo'yish.
Ular narsani saqlab qolish kabi.
Endi, bolalar, natijani qilaylik.
Yaxshi.
Aytgancha, bolalar, bu aslida ishlamaydi, chunki siz uni chaqirishingiz kerak.
Shunday qilib, narsani nusxa oling, pastga aylantiring va bu erga qo'ying.
Mayli, qavs.
Qilingan.
Narsani saqlang.
Natijaga qaraylik, yigitlar.
Endi konsolga boramiz.
Buni bu erda ko'ra olasizmi? 200 607 75.
Xo'sh, bu qanday keladi? Bu aslida qopqoq x.
Bu aslida bu hisob-kitobni bu erda ko'rish mumkin.
600 bu erda.
600 bu erda.
7575 200 200.
Xop, bas, biz barcha umumiy narxlar bu yerda, bu qator ichida individual kartalari bor bor.
Keyin nima qilishimni bilasizmi? Men bilan birga, barcha raqamlarni kiritish uchun ketyapman.
Buni amalga oshirish uchun biz bu erda ishlatamiz, ha, nuqta-vergulni olib tashlang va nuqta qo'ying xop, biz kamaytirish funktsiyasidan foydalanamiz, mayli, salbiy qavsni kamaytiring, siz es six o'q funktsiyasini urasiz, mayli, shunga o'xshash narsa.
Keyin siz gonna yozish hit x vergul y odamsiz.
Yaxshi.
Keyin, bolalar, siz x va y qo'shasiz, X va Y nimani anglatadi, sizga aytay, x bu X bolalar oldingi raqam, y esa keyingi raqam.
Shunday qilib, x&y bilan nima qilyapti, men bu ikki raqamni qo'shib, keyin keyingisini olishni nazarda tutyapman.
Shuning uchun men bu erda yozdim, x vergul y va keyin x plus y yozishim kerak, keyin vergul, men bu narsani noldan boshlashni xohlayman.
Shuning uchun men bu erda nolni beraman.
Yaxshi? Narsaga qarang.
Endi bolalar, natijani ko'rib chiqaylik.
U erda biz boramiz.
Buni bu erda ko'ra olasizmi, bu bizga hisob-kitob, biz izlayotgan umumiy hisob-kitobni berdi.
Shunday qilib, bolalar, bizning vazifamiz tugadi.
Endi biz bu kabi bir narsa ko'rinadi, shunday qilib, bu amalga oshirish uchun harakat qilyapmiz.
Yaxshi? Shunga o'xshash narsalarni qilish uchun VS kodimizga qaytaylik.
Keling, bolalar, buni bu erda ko'rasizmi? Yoki fikr bildiring yoki narsani olib tashlang.
Xop, men gonna bir narsani izoh qilyapman.
Va keyin men bu erda eng yuqori qismga o'taman, bu yorliq bu erda.
Ha, u erda narsani nusxa, bu erda bu sharhingiz quyida sizning umumiy miqdori funktsiyasi uchun pastga aylantiring, narsa joylashtirish, okay, keyin siz to'g'ri borish nuqta innerHTML teng bosing, biz bir Andoza so'zma-so'z foydalanish uchun harakat qilyapmiz.
Shunday qilib, siz backtick-ni urasiz.
Va bu erda siz yozishingiz mumkin, keyin bu erda H2 yorlig'ini yozishingiz mumkin.
Okay, keyin bolalar, agar gonna umumiy bor-ku, okay, Bill coloane.
Sizda valyuta uchun dollar belgisi bo'ladi va keyin siz dollar belgisini, jingalak qavs miqdorini yozasiz, maylimi? Bu miqdor aslida bu erdan keladi.
Siz bu yerda, bu bir qarang? Yigitlar endi yigitlar, keling, natijani qilaylik.
Mayli, biz boramiz.
Bizda bor.
Bizda bu erda umumiy hisob bor.
Buni bu erda ko'ra olasizmi? Ajoyib yigitlar.
Keyingi qadam, biz nima qilamiz, bizda ikkita tugma bo'ladi.
Bir soniya bolalar to'lov va aniq savat tugmasi.
Ha, biz bu ikki tugmachani bu erda quramiz.
Keling, bu narsalarni qilaylik.
Shunday qilib, siz nima qilasiz H2 yorlig'i ostida, siz tugmani yaratasiz xop, ushbu videoga qarang TT o n.
A sinf nomli checkout bilan Okay tugmasi.
Bu nuqta C qara, H, E C K, o ut checkout cap.
Guys Guys sinf nomi emas, balki sinf bo'ladi.
Shunday qilib, ismni bu erdan olib tashlang.
Faqat okay sinfini saqlab.
Endi bu erda biz yozmoqchimiz c h E CK-ni tekshiring yoki har yili tekshiring bu narsani saqlang.
Va ushbu tugma ostida bizda sinf nomi bilan boshqa tugma bo'ladi hammasini olib tashlang bunga qarang.
Bu TT o n nuqta olib tashlash.
Oh, okay tab.
Endi yana bolalar sinf nomi emas, balki sinf bo'ladi.
Ismni bu yerdan olib tashlang narsani saqlang.
Bundan tashqari, biz bu erda aniq kartani bu kabi narsalarni saqlashimiz kerak.
Keling, o'z ishini ko'rib chiqaylik, bu kabi bir narsa ko'rinishi kerak.
Bu uslub emas.
Keling, narsani boshlaylik.
Yaxshi.
Barcha bolalar birinchi, bu yerdan chiqish nusxa.
Endi bolalar, siz o'zingizning uslubingiz css-ga o'tasiz.
Va endi bolalar, siz tanlagan ma'lum bir selektorni tanlaysiz.
Va biz buni allaqachon quramiz.
Okay, bas, meni faqat narsa izlanglar qilaylik.
Bu aslida topshiriq guys bu erda bu bir ko'rishingiz mumkin ekan.
Ha.
Shunday qilib, men bilan birga muhokama qilish uchun barcha uslublarni yozishingiz shart emas.
Faqat bu erda vergul qo'ying.
Xop, va keyin nuqta pasta amalga.
Endi, bolalar, natijani ko'rib chiqaylik.
Bu kabi bir narsa qarash kerak.
Buni ko'ra olasizmi? Ha, xuddi shu tarzda, biz kartani tozalash tugmachasini ham bezatamiz.
Meni bolalar bilan birga qiling.
Kartangizda bu erga qaytib keling, GS, nusxa ko'chiring barcha uslubingizga qaytib keling, CSS, vergul, okay, va keyin nuqta pastasi bajarildi, narsani saqlang.
Natijada qaraylik.
U erda biz boramiz.
Siz ancha yaxshi ko'rasiz.
Lekin bolalar, men bu narsa xuddi shu kabi yashil rangda bo'lishini xohlayman.
Va men bu narsa qizil rang bo'lishini xohlayman.
Shunday qilib, bu narsalarni qilish uchun men bilan birga kuzatib boring, kassadan nusxa oling.
Xop, pastga o'ting va bu nuqta pastasi kabi bu erga qo'yish, to'ldirilgan rekord, siz bu erda mumkin.
VGC yorlig'i qaysi rangni yashil rangga aylantiradi, xuddi ular bu narsani aytishadi va yaxshi narsalarni olib tashlashadi, bu narsani nusxalashadi.
Pastga aylantiring, yoki nuqta pasta jingalak qavs, rang yoki uzr, BGC.
Tab qizil bo'ladi.
U erda biz narsani saqlab boramiz.
Endi natijani ko'rib chiqamiz.
Mayli, biz boramiz.
Bolalar.
Bu erda bizning finalize mahsulotimiz kabi ko'rinadi.
Buni bu erda ko'ra olamanmi? Bu butunlay bir xil ko'rinadi.
Keyingi, yigitlar.
Bolalar, bu yaxshi ko'rinadi.
Lekin bu qarash.
Bu erda bir muammo.
Har safar plyusni bosganingizda, bunga qarang, bu raqam men bu miqdorni nazarda tutyapman va narx aslida oshadi.
Lekin buni bu erda ko'ra olasizmi? Bu o'zini yangilash emas.
Shunday qilib, bolalar, bu narsani yangilash uchun, men bu bir juda oddiy hal juda oddiy, degani.
Bolalar, bu erga va kassangizga keling.
Ha.
Umumiy miqdorni eslaysizmi? Bu narsa nusxa? Yaxshi.
Va keyin bolalar, sizning yangilash funktsiyangiz qayerda? Bir narsa, meni faqat bu kabi narsa yo'l bo'lsin, qaerda yangilash vazifasi bu erda aslida ekan.
Buni bu erda ko'ra olamanmi? Faqat narsani oching.
Va keyin hisoblash funktsiyasidan pastda, siz shunchaki bu kabi narsani chaqirasiz.
U erda biz boramiz.
Qilingan.
Yaxshi.
Endi, bolalar, natijani ko'rib chiqaylik.
Mayli, har safar.
Bu natija sahifasi, yaxshi, har safar bunday plyusni bosganingizda, bunga qarang.
U o'zini jonli ravishda yangilaydi.
Bu mukammal yaxshi ishlamoqda.
Yaxshi, ajoyib.
Endi, bolalar, bu erda aslida yana bir masala.
Ushbu biznesga qarang.
29.
Bu erda.
Ha, 2900.
Aslida, bu 100 har safar bu kabi xochni bosganimda, bu ketadi.
Lekin bu aslida o'zini yangilamaydi.
U erda 100 dollar bor edi.
Ammo endi bu 2800 bo'lishi kerak.
Ammo bu kabi yangilanishni har safar bosganingizda avtomatik ravishda yangilanmaydi, shundan keyingina u yangilanadi.
Aytmoqchimanki, shundan keyingina u yangilanishlarni o'zi yangilaydi, buni tuzatish uchun biz istamaydigan xatti-harakatlar mavjud.
Bu elementni olib tashlaydigan funksiya qayerda? Aslida uni olib tashlaysizmi? Shunday qilib, bu nusxa, men butun narsani nusxa qiladi.
Buni oching.
Va siz buni ko'ryapsizmi? Bu bir quyida umumiy arava mahsulot, bu kabi uni duo, narsani saqlab.
Natijada qaraylik.
Yaxshi? Shunday qilib, bunga qarang, bu 1500 Okay, 2800 qancha.
Har safar xochni bosganingizda, u bir vaqtning o'zida yo'qoladi, bu erda ham narsani yangilaydi.
Shunday qilib, bolalar juda yaxshi ishlaydi.
Endi bolalar, bosh sahifaga qaytaylik.
Ba'zi ma'lumotlarni tanlaymiz.
Xo'sh, aytmoqchimanki, bu erdan ba'zi mahsulotlarni tanlaymiz.
Bu erda arava sahifasiga qaytaylik.
Men qurmoqchi bo'lgan keyingi xususiyat - bu aniq savat xususiyati.
Xo'sh, har safar biz buni bosganimizda, birinchi navbatda, bir vaqtning o'zida hamma narsani olib tashlaymiz.
Ushbu mahalliy xotirani bir soniya ko'rasizmi?
Mahalliy xotirada biz ham hamma narsani olib tashlashni xohlaymiz.
Shunday qilib, men bilan birga kuzatib borish uchun bolalar, mashinangizga qaytib keling oyna Okay, va o'chirish elementi ostida yoki istalgan joyda okay, funktsiyani xohlagan joyingizga yozishingiz mumkin.
Biz bu erga boramiz aniq mashina, mayli, olib boring aniq mashina, mayli, bu kabi ES oltita o'q funktsiyasi bo'ladi.
Okay, yuqoriga keyingi bolalar bu qarash, biz aslida teng Savatga fiz biz u biz Savatga bor baribir ma'lumotlar, narsani olib tashlash, degan ma'noni anglatadi bo'sh qator qilish fiz.
Xop, bas, bolalar, biz Savatga barcha ma'lumotlar olishdan amalga oshiriladi bir marta, biz, shuningdek, ekran to'lov qayta uchun kartalari to'lov qayta kerak.
Bu erda umumiy karta elementlari, narsalarni pastga aylantiring va bu yerga qo'ying.
Xop, qilingan.
Keyingi qadam bolalar.
Bundan tashqari, mahalliy xotirani yangilashimiz kerak.
Shunday qilib, mahalliy xotirani yangilash uchun shunchaki qisqartirish yoki o'sish chiroqlarini oching, buni bu erda ko'rasizmi? Ha, faqat bu yerdan nusxa oling.
Okay aniq avtomobil pastga narsa o'ting yaqin bor, bu kabi bu erda narsani joylashtirish va narsani saqlab.
Endi bolalar, biz aniq savatni chaqirishimiz kerak, shuningdek, bu narsani pastga aylantiring.
Uni oching xop, shuning uchun bu erda hamma narsani olib tashlang, bu erda ko'rishingiz mumkin, bu aniq savat tugmasi.
Shunday qilib, bolalar, biz nima qilamiz, biz bu erda OK tugmasini bosing, ikki barobar kotirovkaga teng bosing.
Keyin biz biz bu erda aniq kesilgan funktsiyani chaqiramiz.
U erda biz narsalarni saqlab qolamiz, bolalar.
Endi, bolalar, keling va natijamizni sinab ko'raylik.
Bu natija ekran, siz bir soniya bosing, har safar, meni ham bu kabi bu erda bir mahalliy saqlash ochib qilaylik.
Shunday qilib, biz mahalliy saqlash haqida ba'zi ma'lumotlar bor, biz bu erda bir necha bino bor, va biz bu erda bir necha kartalari bor.
Okay, biz ochiq-oydin karta bosing har safar hamma narsani olib tashlash uchun ketadi, ma'lumotlar ketdi, deb qarash.
Va arava, demoqchimanki, arava sahifasi yo'qoldi.
Narx va tugmalar bilan bir qatorda bizda faqat bitta, lekin uyga qaytish tugmasi mavjud.
Buning yordamida biz orqaga qaytishimiz va shunga o'xshash ba'zi mahsulotlarni tanlashimiz mumkin.
U erda biz boramiz.
Keling, bu erda ba'zi mahsulotlarni tanlaymiz.
Arava sahifamizga qaytaylik.
Va endi boramiz va buni shunday tanlaymiz, qarang, u juda yaxshi ishlaydi.
Okay, bu narsa olib tashlash kabi ning xoch jarima bosing qilaylik.
Bir vaqtning o'zida.
Agar siz aniq kesishni bossangiz, u hamma narsani ajoyib tarzda olib tashlaydi.
Juda kam loyiha ustida, biz jami ega ekanligini ko'rish mumkin 12 mahsulot kartalari.
Shunday qilib, biz boshqa rasmlarni va ma'lumotlarni bu erda loyihamizga qo'shmoqchimiz.
Ammo buni amalga oshirishdan oldin, biz bu erda kodimiz bilan bog'liq ba'zi muammolarga duch kelamiz, ularni tuzatishimiz kerak.
Birinchi muammo nav satrida, u Y o'qida to'g'ri hizalanmagan.
Bu bilan nimani nazarda tutayotganimni sizga ko'rsataman.
Xop, bas, men faqat gonna uslubi css kodi qaytib borish qilyapman, va keyin men gonna emasman, nima bu navbar bu erda foydalanish hisoblanadi, men faqat bu kodni izoh uchun ketyapman.
Xop, men gonna uni saqlab qilyapman.
Endi natijani ko'rib chiqamiz.
Okay, agar kiyim do'kon va belgi, ular markazida y o'qi tekislang emas ko'rishingiz mumkin.
Shunday qilib, agar siz buni tuzatmoqchi bo'lsangiz, bu erga kelasiz va keyin siz haqsiz, AIC yorlig'i.
Mayli, narsani saqlang.
Endi natijani ko'rib chiqamiz.
Hamshiraning to'g'ri hizalanganini ko'ryapsizmi, yaxshi, shuning uchun men ushbu kodni qaytarib olib kelaman, saqlayman, u erga boramiz.
Ikkinchi muammo savat sahifasida.
Ammo u erga borishdan oldin, birinchi navbatda, bu erda ba'zi mahsulotlar tanlanganligiga ishonch hosil qiling.
Va keyin siz arava sahifasiga o'tasiz.
Yaxshi.
Endi bu raqam bu erda.
Savatda nechta miqdor bor? Bizda 24 bor.
Va endi buni qilaylik.
OK, shuning uchun men buni olib tashlayman.
Yaxshi.
Xo'sh, ushbu karta ichida qancha miqdor bor? Bu faqat besh bor.
Xop, bas, u 24.
Agar minus besh bo'lsam, 24 yoshdaman.
Qancha bo'ladi 19.
Keling, narsani olib tashlaylik.
Yaxshi, har safar uni olib tashlaganimda, u 19 bo'lishi kerak edi.
Lekin bu ayirish men bu kabi sahifani yangilash har doim ayirish qilish ketadi qilib emas.
U erda biz boramiz.
Lekin bu biz istamaydigan xatti-harakatlar.
Shunday qilib, agar siz buni tuzatmoqchi bo'lsangiz, bu muammo qayerda joylashgan? Avval buni topaylik.
Yaxshi.
Muammo element olib tashlash nomli funktsiyasi bilan, u qaerda meni sizga ko'rsataman.
Shunday qilib, siz VS kodiga o'tasiz va keyin Gs kartasiga o'tasiz.
Keyin sizning vazifangiz elementni olib tashlang, siz buni ochasiz.
Va keyin siz yuqoriga siljiysiz, bu erda hisoblash funktsiyasi mavjud.
Faqat narsani nusxa oling va keyin bu erga qo'ying.
Mayli, narsani saqlang.
Endi natijani ko'rib chiqamiz.
Xo'sh, endi biz nima qilamiz, biz buni olib tashlaymiz, yaxshi, bu erda qancha miqdor besh.
Xo'sh, bu erda qancha? 19.
Shunday qilib, 19 minus besh, u 14 bo'lishi kerak.
Keling, buni bosing.
Natijani ko'rib chiqaylik.
OK, u erda biz juda yaxshi ishlaymiz.
Shunday qilib, bizning muammomiz hal qilindi.
Uchinchi muammoni ko'rib chiqaylik.
Bu aniq kartada erda.
Har safar buni bosganimda, nima istayman? Men savat nolga olish istayman.
Bu sodir bo'lmaydi.
Bu bilan nimani nazarda tutayotganimni sizga ko'rsataman.
OK, shuning uchun aniq kartani bosaman.
Endi bunga qarang.
Bu hali 14, lekin u nol bo'lishi kerak.
Bir qayta narsa bo'lsa, faqat keyin nol bo'ladi.
Shunday qilib, bolalar, muammo clear cart nomli funktsiyada joylashgan.
Keling, uni topib, buni tuzataylik.
OK, shuning uchun men VS kodiga qaytib boraman va bu erda aniq savat deb ataladi.
Buni eslaysizmi hisoblash, shunchaki narsani nusxa ko'chiring va bu erga qo'ying.
OK, uni saqlang.
Endi natijani ko'rib chiqamiz.
Yaxshi.
Shunday qilib, natijaga qarash uchun biz uyga qaytishimiz kerak, keyin esa ba'zi narsalarni tanlashimiz kerak.
Okay, faqat bu kabi.
Endi orqaga qaytaylik.
Bu erda qancha narsalarni ko'rishingiz mumkin? Bu gap bir, ning aniq bosing qilaylik.
U erda biz boramiz.
Endi nolga qaytdi.
Mukammal.
Muammo hal qilindi.
Yaxshi, bolalar.
Endi VS kodimizga qaytaylik va keyin tepaga o'ting.
Ushbu funktsiyani bu erda eslaysizmi, umumiy karta elementlari, buni oching.
Va keyin siz ushbu qidiruv nuqta tasvirini qidirish nuqta nomi va qidirish nuqta narxini ko'rasizmi? Men tushundimki, siz bu narsani tuzishingiz va uni qisqartirishingiz mumkin.
Bu bilan nimani nazarda tutayotganimni sizga ko'rsataman.
OK, shuning uchun men bu erga kelaman va keyin men bu erda bo'laman yuqori tasvirni, vergulni, ismni, vergulni aniq yozib oling va oxirgi narsa narx nima edi.
Shunday qilib, men bu erda narxni qidiruvga tenglashtiraman, mayli, nusxa ko'chiring, bu erga shunday qo'ying.
U erda biz boramiz.
Endi bizda to'g'ri qidiruv nuqta tasviri yo'q.
Xo'sh, biz bu qismni bu erdan olib tashlashimiz mumkin.
Mayli, biz boramiz.
Qilingan.
Narsani saqlang.
Endi natijani ko'rib chiqamiz.
Biz bir xil natijaga erishamiz.
OK, natijani ko'rish uchun bu yerdan ba'zi mahsulotlarni bosishimga ruxsat bering.
Va keyin arava sahifasiga shunday boramiz.
U erda biz boramiz.
Ko'ryapsizmi, biz boramiz.
Ko'ryapsizmi, biz bir xil natijalarga erishdik.
Aytgancha, bolalar, bu nima deyiladi? Qidiruv bir ob'ekt o'ng? Shunday qilib, bu destructuring deb ataladi, va ob'ekt.
Yaxshi, bolalar.
Endi bizning loyihamizga boshqa mahsulot kartalarini qo'shish vaqti keldi.
Hech narsa qilishdan oldin, birinchi navbatda, biz kerak mahalliy saqlash uchun, mayli, faqat o'ng tugmasini bosing tekshiring, keyin siz arizangizga borasiz, bir soniya kuting, buni ochishimga ruxsat bering, biz boramiz ilovaga, mahalliy xotiraga, yaxshi, shuning uchun endi biz uni o'chirish kerak.
Shunday qilib, siz bosasiz bu yerga, va keyin siz ishni qilasiz.
Okay, yuqoriga keyingi, men gonna mening GitHub borish emasman, men pastga quyida ta'rifi bu GitHub jihozi linkni ta'minlash uchun ketyapman.
Xo'sh, agar siz bu erga kelsangiz, uning uchta filiali borligini tushunishingiz mumkin.
Biz asosiy filialda asosiy filialdamiz, bizda butun manba kodi bor, biz boshlang'ich fayllardan boshladik va bu erda mahsulot rasmlari.
Men bu erda ushbu filialni bosaman.
Va keyin bu filial nimani olib yuradi? Meni tasvirlar ichida sizga ko'rsataman, u boshqa barcha bor 12 rasmlar.
Yaxshi.
Shunday qilib, men bu erga kelib, agar, biz, shuningdek, bir narsa deb nomlangan ma'lumotlar bor.
Jas, agar men buni ochsam, u bizning mahsulot kartalarimizning barcha ma'lumotlarini olib yuradi.
Xo'sh, bu ma'lumotlarni bu erda ko'rasizmi? Ha, barcha ma'lumotlar aslida bu ma'lumotlar ichida.
Oyna.
Shunday qilib, biz hozir nima qilamiz, biz bu narsani yuklab olamiz.
Yaxshi? Shunday qilib, kodni bosing, zip-ni yuklab oling.
Yaxshi.
Shunday qilib, bolalar, u yuklab olingandan so'ng, narsani oching va keyin siz Dexter-ga qaytasiz, yaxshi, keyin nima qilmoqchi bo'lsangiz, uni shunday tashqariga chiqarib olasiz.
Xop, up keyingi, bu erda ichida borish.
Xo'sh, u erda bizda nima bor? Bizda faqat papka va dlgs deb nomlangan fayl mavjud.
Yaxshi, shuning uchun biz nima qilamiz, biz uni tashqariga chiqarib tashlaymiz.
Mayli, biz boramiz.
Mayli, yigitlar.
Shunday qilib, endi biz loyiha papkasidagi rasmlarni ham, ma'lumotlarni ham shunday chiqaramiz, bunga qarang.
Xo'sh, bolalar, siz bunday xabarni topasiz, bu millatdagi fayllarni almashtirasiz, shuning uchun siz OK tugmasini bosasiz.
Shunday qilib, nima qilish kerak, bu bizning loyihamizdan ikki nusxadagi fayllarni olib tashlaydi.
Endi biz bu bir o'chirishingiz mumkin, hech qanday muammo.
Keling, VS kodimizga qaytaylik, yaxshi, endi bizda rasmlar borligini, bu erda qancha rasm borligini, 12 ta rasm borligini tushunishingiz mumkin.
Va keyin bizda Data GS deb nomlangan fayl ham bor.
Shunday qilib, bu erga kelib, va siz nima qilmoqchisiz, bu qarash, agar bu erda bu ma'lumotlarni ko'ryapsizmi, ma'lumotlar bu erda bir qator ichida, agar bu bir qator qarang, shuning uchun bu erga kelib, va keyin siz bu kabi uni yopish uchun harakat qilyapmiz, butun narsani nusxa.
Endi siz nima qilasiz-bu sizning manbangiz ichida joylashgan data, GS-ga o'tasiz, yaxshi, bu erga keling va tepaga o'ting, bu erdan eng pastgacha tanlang va keyin fayldan nusxa ko'chirgan kodni joylashtiring.
Xop, bas, endi bu qarash, biz ma'lumotlar barcha bu o'zgaruvchilar ichida saqlangan bo'lishi.
Endi bir narsani ayting.
Va endi bu erga keling, va siz nima qilasiz, siz o'ng tugmasini bosib, uni o'chirib tashlaysiz.
Yaxshi? Bu Githubdan keladi.
Yaxshi? Endi, bolalar, kodni saqlagandan so'ng, natijani ko'rib chiqaylik.
Okay, bizning natija bu kabi bir narsa qarash qiladi.
Biz jami qancha kartalari bor, deb qara, biz bor 12 jami mahsulot kartalari.
Ammo bolalar, bizning kartalarimiz bilan bog'liq ba'zi dizayn muammolari mavjud.
Keling, buni ko'rib chiqaylik.
Bu erda chegara.
Va bu erda ular bir-biri bilan to'qnashgan tasvirni ko'ryapsizmi? Agar u g'alati ko'rinadi, deb ko'rish mumkin, biz buni tuzatish uchun harakat qilyapmiz.
Bir vaqtning o'zida.
Bu yigitlarga qarang, bizda pastki qismida hech qanday bo'shliq yo'q, xuddi finalchi loyihasi kabi, bunga qarang, bizda bu erda bo'shliq bor.
Keling, bu narsalarni amalga oshiraylik.
Keling, uslub bo'yicha VS kodimizga qaytaylik css, keyin siz ushbu selektorni sinf nomi bilan topasiz do'kon.
Xo'sh, siz nima qilasiz, bu erda pixel yorlig'i orasida bo'lasiz, u erda biz narsalarni saqlab qolamiz.
Endi natijani ko'rib chiqaylik, bu bizning yakuniy loyihamizda shunday ko'rinadi.
Ammo bolalar, agar siz bo'shliqni sozlashni istasangiz, buni ham qilishingiz mumkin.
Keling, bu erga qaytib kelaylik.
Va siz bu erda 50 pikselni qo'yishingiz mumkin, bu narsani saqlang.
Natijada qaraylik.
Endi qarang, bu erda bizda katta bo'shliq bor.
Keyin, chegara va tasvirlarni tuzatishga boramiz.
Buni qanday qilasiz? Juda oddiy, juda oson.
VS kodingizga qayting.
Shunday qilib, endi siz dot item deb nomlangan selektorni topasiz, aslida bu erda, buni ko'ra olasizmi? Bizda selektor ichida rasm bor.
Xo'sh, ushbu selektordan rasmni qanday tanlash juda oddiy.
Bunga qarang.
Siz bu erda nuqta elementiga borasiz, yaxshi, keyin men jingalak qavsni bajaraman.
Endi bu erda biz yozmoqchi bo'lgan narsa 100% bilan aytamiz.
OK, 100% bilan.
Keling, u erda bir narsani aytaylik.
Natijada qaraylik.
U erda biz boramiz.
Endi chegara va tasvir bir-biriga mos kelmasligini ko'rasizmi?
Lekin bolalar, yana bir muammo bor.
Agar men bunday kattalashtirsam, bunga qarang.
Buni ko'ra olasizmi? Bu burchakni bu erda ko'ryapsizmi? Ha, bu o'tkir burchak.
Ammo aslida bizning chegaramiz yumaloq.
Shunday qilib, buni sozlash uchun biz bu erga qaytib boramiz va chegara radiusini joylashtiramiz, maylimi? Chegara Radiusi.
Okay, radius, lekin har qanday qiymatini qo'yib oldin, bolalar, meni sizga bir narsa ko'rsataman.
Yaxshi.
Shunday qilib, biz bu narsani bu erda aylantirmoqchimiz.
Va bu erda.
Biz bu erda narsa yumaloq bo'lishini xohlamaymiz.
Va bu erda.
Xo'sh, buni qanday qilasiz? Sizga yigitlarni ko'rsatay.
Shunday qilib, biz nima qilamiz, biz bu erga qaytib kelamiz va avval pixelga yana pixelga, keyin 00 ga qo'yamiz.
Xo'sh, bu bilan nima demoqchiman, bu yuqori chap burchak.
Bu yuqori o'ng burchak, bu pastki chap va pastki o'ng burchak qiymatlari, narsani saqlang.
AQSh natijasida qaraylik.
Endi bolalar, siz bu narsa yumaloq va bu bir shuningdek emas, balki pastki chap va pastki o'ng bor, deb ko'rish mumkin, mukammal.
Shu bilan bizning loyihamiz yakunlandi.
Men, albatta,, albatta, siz bu yozuvning ko'p narsa o'rgandim, deb umid qilaman.
Agar videoni yoqdi bo'lsa, bir do'stim bilan bir kabi share bering va keyin g'amxo'rlik qadar obuna uchun bepul his va men keyingi video sizni ko'rasiz.

Original
So if the thing is an id like this, then you have to select the thing by writing a hashtag hashtag nav bar, then curly bracket.