>> Rendben.
Tehát, JavaScript.
Szinte mindenki ebben a teremben valószínűleg van bizonyos fokú
A kényelmet hoz arról, hogy volt vissza, amikor SC50
vagy ez már személyes webes projektek, vagy akár
ha nem egy kicsit azt az elmúlt PHP alap projekt
de a legtöbb része, sokan,
akkor is, ha van néhány kényelmes
JavaScript talán nem vették
magától értetődőnek, hogy a nyelv működik, és mi megy
az a motorháztető alatt és a mit fogunk próbálni
kell tennie ma húzza vissza néhány technikai rétegek
A mi JavaScript, hogyan különbözik a nyelv
mint a PHP, hogyan lehet nem csak a kliens oldali
hanem szerver oldali és majd összpontosítani nagyon konkrétan
Ezen keretek, észre sem JS amely lényegében egy futási idő,
egy programot, amellyel lehet JavaScript kódot hajthat végre,
szerver oldali és ez egyre egyre népszerűbb sort
Az ugyanazon a termet ezen nap talán Ruby és PHP
és a Python és látni fogod
hogy van néhány szép nagy teljesítményű funkciók útján bizonyos
A beépített nyelvi konstrukciók.
De először néhány egyszerű cucc csak hogy emlékeztessem önöket
Az, hogy ezen a nyelven működik, és ha baj találok
Ezen, csak kiabálni , és mi fogja igazítani.
Szóval, az egyik, mint a PHP-ben van fogalma sem a fő funkciója,
csak elkezd kódot írni
és akkor ehhez értelmezik fentről lefelé.
Keretében böngésző
vagy valami szerver oldali fogunk látni néhány példát
egy kicsit.
Feltételek, szintaktikailag egyenértékű PHP, valamint a C,
C + + és más nyelvek Szóval, csak hogy érzékeltessem
, hogy hogyan lehet felépíteni azt,
ott csak egy kanonikus állapotban.
Logikai kifejezések, pontosan ugyanaz a szintaktikailag ahogy láttam
az ugyanezen más nyelven, mind a fejekhez
és véget dolgokat együtt.
JavaScript kapcsolók, ugyanúgy, mint a PHP és a másik do
és te nem csak, mint a C-ben a szerves primitívek
mint a karakter és ints is valójában do más típusú értékeket.
Loops. Szóval, ez pontosan ugyanaz
és valószínűleg egy tucat nyelven, while, do while
majd ezt a trükköt itt.
Szóval, ez a fajta az úgynevezett gyors felsorolás
és ez egy nagyon okos módon A mint a PHP csinál
Minden FU mint bar akkor hasonlóan,
egy JavaScript objektum, ahol az objektum neve
A változó van, mondjuk, var i a tárgy és az egyes iterációk
erre a ciklusra, i lesz az egyik
A kulcsok az objektum.
Tehát, ha van egy objektum a diák, és egy diák van egy ID
és egy nevet és egy házat, iteratív elviszlek
értékének azonosító nevét és házat, és akkor azért index
a tárgy, mintha ez A tömbben szögletes zárójel
jelölés, hogy az érték A legfontosabb azonosító vagy név
vagy a ház, és így tovább.
És ellentétben a közös feltételezés, JavaScript objektumok,
tulajdonságok nem feltétlenül garantáltan
ugyanabban a sorrendben, ez is igaz, a PHP, így nem vállalunk
hogy a dolgok marad ugyanabban a sorrendben
, hogy amit tesz az olyan alapvető érték párok tárggyá.
Hogy a tömbök?
Van egy pár módon hogy írja meg szintaktikailag
de ez talán a leginkább közös már csak szögletes
konzol jelöléssel.
Szóval, ez a változó hívja számokat tartalmazó tömb
hat egész ott, itt egy egyszerű string
és vegyük észre, mi hiányzik ezekből a példákból,
mi JavaScript látszólag hiányzik.
Igen. Tehát, nincs fogalma gépelés, biztosan nem
ebben az összefüggésben, de ez valóban egy string.
Tehát, JavaScript van típusai és ez valóban egy tömb
amely maga is egy olyan típusú és az egyes elemek
abban a tömb voltak típusú szám a JavaScript nevezi őket.
Szóval, ez a gyengén típusos nyelvi és majd meglátjuk
hogy JavaScript, mint a PHP van egy identitás operátor
és egyéb mechanizmusok valóban ellenőrzi, milyen típusú
néhány változó Mindkét hibaellenőrzéshez
és más alkalmazásokat.
És itt van egy példa tárgy , amiben csak egy azonosító és egy nevet.
És most, észre, hogy mi vagyunk a zárójel jelölést,
A behúzás és a fehér hely a fajta értelmetlen
és ez kijelenti a változó, amelynek neve Rob
azonosító és amelynek értéke 1, és a dátum típus van a szám
és a szöveg volt.
És akkor ez valami kicsit más
ha valaha is csinált semmit, Ajax ezekben a napokban?
Valószínűleg használt egy tárgy, mint ez
de mit érdemes megjegyezni itt?
Mi szintaktikailag mindig annyira más, csak egy pár
a dolgok között, ez a példa ami kétségkívül kisebb
és ez a nagyobb példa.
Tehát először a laikus kifejezés, mi ez?
Mi az a fajta személyzet mondanál?
OK, ez egy tömb, ez egy sor, mi?
>> Objektumok.
>> OK, ez egy sor tárgyakat.
És most, a hangsúly a csak egy - bármelyik ezeket a tárgyakat,
mi más között, illetve ez?
>> A kulcsok szálakat.
>> Igen. Tehát, a kulcsok húrok,
és a gombok valójában húrok mindkét esetben
és ez a fajta idióta
véleményem szerint történelmi elemekkel döntés, amikor te a
JSON, JavaScript Object Notation,
amely lényegében egy szállítási formátum
adatok küldése általában a hálózaton keresztül
a kliens és a szerver meg kell emlékezni
hogy ez valójában nem JSON érvényes, és ez az egyik
ezek FYIs, ha valaha üsse a fejét a falba
néhány percig nem jó ok, ez nem érvényes JSON
mivel a gombok valójában nem idézte.
JSON hülyén megköveteli, hogy a a kulcsokat nem csak idézni,
hanem az, hogy kétszeresen is idézett, egyszeres idézőjelek nem elegendőek.
Tehát, hülye kis dolog és még egy vicces tény
a mai célokra, de ez a is lenne érvényes JavaScript
ez csak nem - a fordítottja nem igaz.
Rendben van.
Így fogjuk látni sok többet, hogy.
Rendben van.
Szóval, ez a JavaScriptet szintaktikai valószínűleg elég
ismerős, valakinek, aki soha nem használt JavaScript előtt
ez nem egy hatalmas ugrás a PHP vagy a legtöbb olyan eljárási nyelv
hogy lehet, hogy használt.
Szóval, ma fogunk összpontosítani érdekes szempontok
A JavaScript különösen keretében nincs JS
de nem kizárólag azért, mert eddig akkor már valószínűleg,
ha használják Javascript, használta belsejében egy böngésző.
Szóval, nem JS olyan környezet, majd egy kicsit megy
lehetővé teszi számunkra, hogy hozzáférést JavaScript kódot az ügyfél -
szerver oldalon, de az első, vessünk egy pillantást
valami, ami a kicsit több kliens oldalon.
Szóval, már elment, és ez kapcsolódik a tanfolyamokon honlapján,
ha azt szeretné, hogy játszanak együtt, két alkönyvtárak
a mai Zip hívott forrás csapok zip a honlapon
és ezek csak egy Néhány példa emléke
dolog, amit lehet, hogy láttam előtt, és azt a fajta építette őket
fel a legegyszerűbb, hogy kissé bonyolultabb kötekedik
néhány jellemzője A JavaScript.
Nos, menjünk előre, és hogy egy pillantást például ezt.
Így sajnos a blink tag volt megölték néhány évvel ezelőtt
mint ahogy megvan szebb és szebb,
a blink tag volt, a szó szoros értelmében nyitó zárójel villogni záró zárójel
és ez a fajta nem tovább velünk.
De mi is feltámad ezt az ötletet a tag által csak egyfajta
gondolkodás is logikusan, hogyan megy
, hogy valami hasonló ez villog ösztönösen?
Feltételezve, hogy tudod, egy kicsit kicsit a JavaScript és a CSS vagy
ezen a ponton, ez OK, ha nem.
>> Állítsa be az időpontot, és elrejteni Ezt követően, miután én el címkével
, és mutasd meg újra.
>> Igen, tökéletes.
Ez a fajta programozási 101,
hogyan kíván elérni a vizuális hatást, mint ez?
Nos, valahogy meg kell mutatni valamit
majd elrejteni valamit, show valamit, elrejteni valamit
és Jonathan javasolja használ valamilyen időt,
valamilyen menetrend, amit tehetünk ezt többször is anélkül
hogy egy hurok vagy valami ilyesmi.
Nos, hadd menjen blink-0.html
és hadd csökken A font egy kicsit
hogy több ez illik.
És vessünk egy pillantást , hogy mi folyik itt.
Tehát, először is, észre, hogy a szervezet
Az oldal szuper egyszerű, a test belsejében
Az oldal csak egy div.
Én önkényesen adott azonosító köszönés
és hogy bármi lehet mindaddig, amíg ez az egyedülálló
és aztán csak egy kis egyszerű szöveges, hello world.
Tehát, ha most felfelé, észre néhány bolyhos stílus.
Tehát azt mondom, éles köszönés, amely mint tudod
CSS csak azt jelenti, egyedülálló meghatározza az elem
egy ötlet a köszönés,
betűméret megy önkényesen legyen ez, margin és a szöveg igazítása.
Tehát, érdektelen esztétikai részletek
nagyjából középre a szöveget.
Tehát az érdekes rész A script tag itt
amit történetesen betenni a fej az oldal.
Tehát, we'll - meg tudod csinálni ez tetszőleges számú módon
és majd meglátjuk, néhány ismétléseket ez ugyanaz a program
de kezdjük a tetején.
Szóval, már kijelentette, nevű függvényt blink
és úgy tűnik, hogy ezt használja beépített DOM módszer az úgynevezett
getElementById ami talán az egyik az erősebb módszereket
hogy kapsz a dobozból JavaScript keres
"Üdvözlő" nem kell dupla idézőjelek, mint volt
a HTML-ben sem rendben van, amíg
mint te, stilárisan következetes ezekben a napokban merem mondani
sokan használják a Java, aposztrófot JavaScript,
idézőjelek HTML, de ez nem igazán számít
amíg te következetes.
Szóval, itt, ha nem ismeri, akkor valóban elérheti
JavaScript CSS ingatlan a elemek.
Tehát észre, hogy én már kijelentette, a változó nevű div
és a tárolt , hogy a változó,
utalás, hogy bármilyen hogy a DOM elem.
Tehát, ha úgy gondolja, vissza CS50 vagy minden olyan osztály, amely úgy gondolta,
a fa szerkezetek és DOM, Document Object Model,
ez csak egy utalás a csomópont egy fa,
képviseli ezt az oldalt
és ha div.style.visibility vagyon egyenlő, egyenlő, egyenlő,
rejtett, akkor csak szeretnék egy váltás az
Jonathan javasolt egyébként szeretnék
válthat át a rejtett.
Most, mint az oldalsó, hogy miért A hármas egyenlő ott?
Vagy mi az, hogy szemben a dupla egyenlőségjel?
>> Szigorú egyenértékű.
>> Sajnálom.
>> Szigorú egyenértékű.
Szóval, ez az identitás szolgáltatók
ahol az éppen ellenőrzés nem csak az érték a változó
egyenrangú, egyenlő értelemben hanem azt, hogy milyen típusú.
Így, bár mi nem meghatározott idáig semmilyen adatot
típusok minden változó ez vagy a diák,
van egy társított típusú azzal a húr rejtett
ezzel az értékkel, rejtett és Ez persze húr.
Tehát, ebben az esetben ez nem igazán számít
mert nincs úgy, hogy fogunk összemosni a húr
A "rejtett" a más érték
de ez gyakran egy jó szokás azt mondani, hogy
be az egyenlő, egyenlő,
egyenlőségjel általában egy jó dolog.
Ez teszi a kódot erőteljesebb mind a PHP, de
és JavaScript mert akkor futni
a néha sarokba esetben ahol az érték lehet nulla
hogy te ellenőrzése és nulla lehet összetévesztette a hamis
vagy lehet nem, és, mint a PHP,
Javascript is lehet több hamisan értékeket, ahol a nulla
és a hamis és null és meghatározatlan mind megoldani implicit
hamis.
De ha tényleg akar hogy ellenőrizze az adott érték
mint a nulla, a szám, vagy hamis logikai akkor
használja ezt az identitást operátor.
Így megtörténhet, hogy be egyébként még akkor is itt,
ez a fajta értelmetlen mert tudjuk, hogy leellenőrizzük
egy string értéket, és ez Nem lesz semmi mást.
Szóval, itt van a varázslat, akkor, ha görgess le ezt a sort itt,
Úgy tűnik, épített az ablak objektumot
és ez a tulajdonsága a böngésző hozzáfér
hogy ez a szuper globális objektum neve ablak,
belsejében, ami Egyes funkciók,
ha a darab, amely van beállítva intervallum
és tart nyilván milyen érveket?
Igen.
>> Függvényhívás és egy időben.
>> Jó. Szóval, egy funkció hívás és egy időben
és így különösen a hivatkozás egy funkciót,
a mutató arra a funkcióra abban az értelemben,
és ez a funkció hogy megy
, hogy végre minden száma milliszekundum és ebben az esetben,
ez minden 500 milliszekundum.
Szóval, ez egy módja indukáló hatékonyan és végtelen ciklusba
nélkül iteráció, de ehelyett azt mondta JavaScript
a motor belsejében a böngésző
hogy ezt minden 500 milliszekundum vagy közel
500 milliszekundum, amennyire csak tud,
kiderül, hogy a motorháztető alatt,
ott van az úgynevezett esemény loop és mi visszatérünk erre
keretében a csomópont JS hogy csak állandóan ilyen
Az ott ült, fonás, várja a munkát el kell végezni
és amint azt észre,
500 milliszekundum telt el blink lesz ismét meghívásra
és újra és újra mellett egyéb munkák
hogy kell, hogy kész.
Szóval, mit javíthatnánk itt?
Nos, hadd nyissa up blink-1.html
és igazolja a blink-1.html
mint esztétikailag tökéletesen azonos.
Szóval, mit tudnánk javítani itt?
Nos, észre, hogy kedves volt haszontalan
meghatározni egy függvény neve Blink mert hány
hány helyen tettem A funkciót villog?
>> Csak egyszer.
>> Szóval, az egyik.
Szóval, nem volt rossz, a Valójában ez valószínűleg elég
egyenesen előre.
Én definiált függvény pislogás, azt hívja a függvényt pislogás útján
Ennek a paraméternek, de technikailag,
nem volt oka azt, és egy közös paradigma
JavaScript, hogy valóban használja a lambda függvények
mint te is emlékszel a 51 vagy névtelen függvények
ahol, ha nem kell a név egy funkció,
ha csak hívja meg minden bizonnyal egy helyen,
minek túlzsúfoltság a kódot, túlzsúfoltság a programozók elme
és a neved tér Tényleg szimbólumokkal
, hogy nem igazán kell törődnünk.
És így, ebben a verzióban van,
észre, hogy hívom window.SetInterval közvetlenül
a legtetején én script tag akkor én halad
egy névtelen függvény hogy nincsenek argumentumai
és ez tökéletesen rendben van, és akkor a test
Az, hogy a funkció úgy tűnik, az azonos azzal, amit korábban volt
és az egyetlen szintaktikai különbség most az,
itt közvetlenül a 500-at.
Én záró test A funkció
majd azt mondom, végre, hogy a korábbi kódot,
minden 500 milliszekundum.
Tehát nagyon marginális változás
hanem egy lépés, mi talán elegánsabb
végrehajtásában.
Szóval, most, hogy ezt lépéssel tovább, ha most megy
a blink két, akkor hogy egy közös könyvtár,
amelynek hatása lesz
hogy teljesen lényegtelen esztétikus, de ha megyünk
a két verzió van, értesítést hogy a fejem tetején,
Én már bele a legújabb verziója JQuery.
És akkor, itt lenn, Én csak tisztítani
fel a kódot egy kicsit, ez Nem lesz jó világ
továbbra is a natív DOM funkciók
és az a fajta nyers JavaScript.
Sőt, JQuery, mivel lehet tudják lett annyira népszerű
hogy a legtöbb ember csak a konfliktus jQuery JavaScript
de tényleg csak egy vacsora hasznos könyvtári írásos
egy ember nevű John Resig és mivel mások
amelyek csak teszi a sok unalmas dolgot
JavaScript könnyebb és tömörebb.
Tehát, ebben az esetben itt mi folyik itt?
Szóval, van ez a megjelenése egy dollár jelet, erről bővebben
csak egy pillanatra, majd ez egy CSS választó.
Szóval, ez nagyon hasonló szellem, amit tettem korábban,
de ez alkalommal, én vagyok szó szerint a hash tag
hogy jelezze egy egyedi azonosító hívott üdvözlő
majd látszólag . Css egy módszer épül
az, hogy bármilyen tárgy az, hogy én csak teremtett
és én ellenőrzése az érték A láthatóság gombot.
És ha az érték az, hogy a legfontosabb egyenlő, egyenlő, egyenlő, titkos,
akkor fogok váltani, és Fogom váltani ezúttal
segítségével ugyanazt a módszert amely nyilvánvalóan túl van terhelve
abban az értelemben, hogy rendelkezik két különböző aláírások,
az egyik egy érvelést, és egy két érv,
amelyek közül a második a szetter,
az előbbi amelynek a getter hogy úgy mondjam.
Ha kíváncsi, és ha azt soha nem nézett ez,
Ha megyünk jquery.css remélhetőleg A felső hit valóban ez a
és láthatjuk egy a hivatalos magyarázat
hogy csak használja ezt, . Css ingatlan megnevezése
majd a szetter dot CSS
a tulajdonság nevet és egy értéket.
Tehát, kis mértékben tisztább, de észre, az a fajta minta van
minden egyes lépésben ezt a kódot,
mi a fajta teszi szorosabb és szorosabb és szorosabb
és még azt mondják, jobb terveket
mivel mi használ valaki más kód, ami megszűnt
néhány, a komplexitás.
Szóval, most nézzük, hogy ez még egyszerűbb.
És valóban, ha távolítsa el az összes idézetek fogod látni, hogy a
comment meglátod azt, hogy egyszerű ez ütött.
Az egyetlen különbség, Itt természetesen
, hogy én vagyok egy váltás módszer is jön épített
az a jQuery, és ez csak
azért, mert valaki más írta a kódot
hogy valóban bekapcsolja A láthatósági beállítását
minden DOM elem , hogy küldje el.
Tehát, jobb és jobb.
És igen, ez a minta,
annak ellenére, hogy ez a vacsora egyszerű példát és rendezés
hülye nettó hatás, amely egy villogó kis szöveggel,
ez a fajta gondolkodás folyamat, meg kell gondolni -
gondolkodni nem feltétlenül a legelső
passzív írásban valamit A következő projekt
de természetesen, ahogy iterációkhoz a tanácsadó vagy velem
és a csapat találkozók vagy csak felül a csapattársak kód
a szigorítás a dolgokat, nem igaz?
Elvégre ők kevésbé -
a kevesebb sornyi kódot akkor végül is
elvileg a kevesebb hibával meg valószínűleg meghívó
mert ott egyszerűen kevesebb kód rendetlenség fel.
Rendben van.
Szóval, egy pár elvitelre.
Lambda funkciók, anonim függvényekkel,
amelyek közül sok nem látott
és akkor is csak a szigorítás dolgokat a könyvtár
mint jQuery ebben adott esetben.
Rendben van.
Bármilyen kérdése?
Csináljuk egy másik kliens oldali szempont itt,
formában nulla van ez a nettó hatás.
Super egyszerű forma és látszólag ha megpróbálom kattintson regisztráljon itt,
először azt mondja nekem, hogy regisztrált, nos, nem igazán.
Nos, miért van ez?
Nos, itt form-0.html nagyon kevés kódot,
nincs JavaScript nélkül és ez teljesen hamis sort
a forma, mert az intézkedés érték registered.html
ami azt jelenti, nem számít, milyen Azt írja a ebben a formában,
hol van ez fog kell küldeni a szerveren?
Igen. Tehát, hogy registered.html ami nyilvánvalóan egy HTML fájlt
amely tehát statikus fájlt, amely nem rendelkezik eszközökkel
A vevő felhasználói feltételezve nincs JavaScript kódot
ágyazott meg, hogy ez keresi az URL-ben
így ez teljesen a NOOP és hogy semmi sem fog történni
a benyújtott adatokat, de láthatjuk a szerkezet
Egy viszonylag egyszerű HTML5 formában
hogy van egy pár jelszót, Néhány bemeneti típusok.
Szóval, most már tényleg adjunk hozzá néhány hibaellenőrzés
és nézd meg, hogyan lehet javítani.
Szóval, itt van valami rossz ember módon végrehajtja ezt
és ez egyfajta csúnya darab kódot.
Tehát először nézzük scroll aljára
, hogy mi ugyanazt a és mi más.
Az egyetlen dolog, ami más Most között ez
és az előző verzió , hogy én adtam a forma és azonosító
A "regisztráció" lehetne van már, amit csak akarok
de azt jelentette, hogy egyedülállóan azonosítható még ez nem
feltétlenül szükséges, mert ha a oldal csak az egyik formája biztosan én
találtam, hogy az egyik jQuery választó módszereket.
De így csak azért ez több determinisztikus.
Tehát, ha megyek fel most, hogy a script tag, a következőket észleli,
window.onload egyenlő egy névtelen függvényt.
Szóval, mi is ez csinál?
Szóval, lehet, emlékeztetni arra, hogy a kliens-oldali programozás -
JavaScript meglehetősen HTML oldalak különböző rendezvények jár
elemekkel, kattintással és benyújtása és fókuszálás
és elmosódás és más hasonló események, ami történhet
mint a felhasználó jellemzően kölcsönhatásban van az oldalon,
window.onload mit mond.
Az ablakok teljes terhelés
így ha az összes kép volt letöltött, ha az összes fájl
már letöltött és ha Az oldal betöltése,
hajtsa végre a következő kódot, és észre, ha váltani az alján
ennek a módszernek, hogy észre nincsenek zárójel
miután a zárójel ami azt
hogy nem vagyok végrehajtása Ezt a funkciót itt most,
a böngésző fog végrehajtani ez nekem, amikor megállapította,
, hogy az oldal betöltése.
Nos, nézzük meg, mit tettünk,
document.getElementById bejegyzés
úgy, hogy csak ad nekem hivatkozni kell a csomópont
A fa, ami a már azonosító a regisztráció.
És most fogok regisztrálj egy eseménykezelő
ezzel form.onsubmit lesz ez a névtelen függvény
ami azt jelenti, az alábbi kódot kell végrehajtani, amikor
hogy az űrlap elküldése.
Nos, a legtöbb ez csak egyfajta unalmas logika.
Tehát, ha az érték a email mező formájában is
"Semmi", akkor meg kell adja meg e-mail címét,
Ön kiabálni a felhasználó egy figyelmezteti majd vissza hamis.
És akkor van egy csomó egyéb ellenőrzések
az ellenőrzések a jelszót,
ellenőrzi, hogy az a jelszavak azonosak,
az ellenőrzi, hogy a megállapodás jelölőnégyzet be van jelölve, vagy sem
és én csak kiabálni a felhasználót, ha bármilyen
a vizsgálatok valóban nem.
És igen, itt egy példa is bár ez egy kicsit kitalált
Itt az a tény, hogy én vagyok a egyenlő, egyenlő, egyenlő,
azt jelenti, hogy a felhasználó nem próbálja átverni
beírja, hogy milyen értéket.
Vagy inkább én vagyok igazán jelenlétének ellenőrzése
Az üres string, a felhasználó még nem írt semmit.
Ha a felhasználó beírt szó szerint nulla,
"Nulla" potenciálisan lehetne tévesztendő össze az üres string.
És én azt mondom, hogy ez a fajta értelmetlen itt
mert nyilvánvalóan még nulla nem e-mail címet.
De ha ez egy általános területen, mint a szöveges mező
vagy a nevet vagy leírást, vagy valami, amit szeretne értéket a
és ez nem feltétlenül szintaktikai van
, hogy egy e-mail cím, a felhasználó is írja valami, mint a nulla
és újra sarok esetben, de ez Ezért általában ellenőrzés típusok
hasznos dolog.
Te tényleg ellenőrzése a felhasználó miután beírt semmit
be ezen a területen.
Szóval, mi történik, ha nincs a vizsgálatok nem, nos,
visszatérő true' Egy eseménykezelő
mint onSubmit csak azt jelenti, let az eredeti viselkedés valójában
terjednek, és ezért a formában lesz benyújtani.
És ezért, amikor végre megnyomtad a küldés gombot, mielőtt odaértem
egészen a register.html és ha tudom, hogy most, értesítés,
Kapok kiabáltam ha nem ad egy e-mail cím
és én is írja be malan@harvard.edu,
Crimson [fonetikus] Crimson, jelölőnégyzetet,
és most regisztrálni és azt mondja nekem, megint,
Regisztrált vagy nem igazán.
Rendben van.
Szóval, most tiszta ez akár csak egy kicsit, majd átmeneti
az új újabb szerver oldali cucc.
Tehát, ha elmegyek a form-2.html, észre néhány dolgot.
Szóval, az egyik, hoztam jQuery vissza a mix
így ismét ez a dollár jel
és most a Néhány jQuery módszerek.
Szóval, először, mi ez a a dollár jel, hogy ez
olyan különleges itt?
Mi a dollár jel fűzős szerte a legtöbb olyan jQuery kódot?
Igen.
[Hallható Megjegyzés]
OK. Így a dollár jel funkció megy át a DOM keres
valamit ezzel különösen CSS választó.
Így igaz, de szinte túl pontos.
Ez történik ha át egy karakterlánc
mint ebben az esetben, de nem mindig át kell adni a szövegben.
Valójában esetben, a nagyon első sorban itt ez nem egy
CSS szelektor, én halad egy lambda funkciót.
Tehát általában - tehát, jó válasz de túl precíz.
Általánosabban, mi dollár jel képvisel?
>> Csak jQuery.
>> Igen. Szóval, csak jQuery vagy ez csak egy függvény
hogy néhány srác évvel ezelőtt írta és más emberek
mivel a fokozott, hogy a szó szoros értelmében alapértelmezés szerint nevezik -
hoppá, nevezzük jQuery.
Csak - kiderül ki, ellentétben sok
A nyelvek dollár jel egy tökéletesen érvényes szimbólum használata
a változó nevét, míg
PHP dollárjel nyilvánvalóan speciális jelentése
de JavaScript, mint néhány nyelven, dollárjel
és aláhúzás és más hasonló különleges karakterek teljesen legális
használni a saját szimbólum nevek változó.
Tehát, hogy valaki csak úgy döntött, , tudod mit?
Ez lesz elég unalmas
hogy az egész világ írja jQuery minden alkalommal,
hadd egyfajta ültess tét a földre, és azt mondják,
"Ez a könyvtár használni dollár jel. "
És valóban, ez a ez növeli a kockázatot
hogy valaki más elbizakodottságból fogja használni a dollár jel
A saját könyvtár, de van módja, hogy a fajta biztosítást
hogy ha a dollár aláírja térképek a jQuery
mert ki lehet próbálni, ha ez már hozzá van rendelve
valami másra lényegében.
Rendben van.
Szóval, ez minden, ami van, nincs varázslat.
Ez csak egy szexi keres darab szintaxis hogy szép
gyors és könnyű gépelni.
Tehát, mi történik, ha típusú dollárjel nyitott paren
, majd egy névtelen függvényt.
Nos, kiderült, hogy ez a valójában rövidített jelölés
A dokumentum dot kész nyitott paren.
Szóval, ahogy Cynthia észrevette korábban már találtam egyet
sarok eset.
Ha csak át a A lambda funkció
a hatás a dollár jel egy kicsit más.
Sőt, mi történik valójában az, hogy ez az egyenértékűek ezen,
halad utalás a globális dokumentum objektum
hogy a globális, mint az ablak objektum
hogy ad néhány speciális funkciók
amely befolyásolja az egész oldal vagy a böngésző, és kiderül
arra, hogy a dokumentum, amikor burkoljuk, jQuery,
jQuery lényegében megvalósítja, ó, ez a referencia
az, hogy a különleges dokumentum objektum,
Engedjék meg, hogy regisztrálj egy eseménykezelő úgynevezett ready
amely nem natív JavaScript és DOM kapcsolatos.
Ready jQuery dolog, hogy azt mondja:
ha az oldal betöltődött minden a HTML elemek
betöltve, de nem feltétlenül, minden a CSS és képek
és JavaScript fájlokat és Flash-fájlok és a szeret.
Szóval, ez egy lépés előtt terhelés akkor megy előre
és hajtsa végre a következőket.
És a fejjel használatának a kész azt jelenti, hogy akkor, tudod,
hogy az összes elem a DOM,
az összes egyedileg azonosított dolgokat azonosítók, léteznek még
Ha az oldal, annak tartalma még mindig tölt és rakodási
és van néhány törött ikonok egy pillanatra
vagy fehér lapon a háttérben.
Igen.
>> Mi történne ha a [érthetetlen]?
>> Tökéletes példa, tökéletes kérdés.
Nos, lássuk, ha tudjuk szimulálni ezt most.
Nos, hadd menjen előre, és törölje ez a két sor itt, majd a
nem törődve, hogy rögzítse a behúzás, hadd menjen előre
és törölje ezt itt lent - hoppá, ez itt lent.
És most, hadd menjen át a oldal, menj a form-2.html és típusa
Regisztráció, nem úgy tűnt, hogy történik meg, mondjuk, hogy miért volt az,
menjünk előre, és nyissa meg akár Chrome ellenőr,
nyissa meg a konzolt, csak hogy látni ha bármi történik itt, most,
regisztrálj, még mindig semmi.
Tehát a kód szintaktikai finom
úgyhogy nem találok piros hibaüzenetek,
de mi egyértelműen nem történik meg?
Egyik a kód helyes, ez nem működik, így nincs
én kódok úgy tűnik, hogy végrehajtása, miért van ez?
Nos, JavaScript és a böngészők általában végre a
tartalmát egy weboldal, teteje lefelé, balról jobbra.
És a probléma hogy azért, mert a felső
ezt az oldalt HTML majd a fejét majd a script, akkor egy másik forgatókönyvet,
ez lesz, hogy végre előtt, ami még kész,
vagy akár létezik a fán megjelenítéshez.
Az űrlap is, még csak nem is az testület létezik ezen a ponton.
Tehát, jQuery elég okos ahhoz, vele hiba ellenőrzése
hogy ha nincs olyan eleme, amelynek Az egyedi azonosító a regisztráció,
ez nem fog kisegíteni rád
és csak kiváltó néhány konzol hiba és megtöri az egész oldal,
meg fog csendben figyelmen kívül hagyja , de az oka, hogy nincs
ezt a kódot mindig végrehajtja a
mert ha van regisztrált ezt be handler,
nem volt elem hogy csatolja.
Szóval, ez egyfajta nem op ott.
Tehát megadásával helyette, várjon, amíg a korszak betöltött
ha nem a window.onload dolog, ami egyfajta
A régi iskola módja az , vagy a szexisebb jQuery út
mint ez, tudjuk mondani, hogy várjon, amíg az összes
azoknak a HTML tagek lefutottak így még a
Ha a képek nem betöltve, Legalábbis ez csomópont a fában,
akkor JQuery lehet biztosítani hogy minden ott van.
Igen.
[Hallható Megjegyzés]
Igen, jó, igen, abszolút.
Tehát, a másik megoldás, hogy ezt, ha nem használja ezt a
, vagy nem emlékszik hogy ez létezik,
akkor feltétlenül mozogni mindezt az aljára
a weboldal, belül a test még, de gyengébb formában
és ez is megoldja ezt a problémát.
Ez csak általában tekinthető rossz gyakorlat.
Ez egy kicsit rendetlen és hanyag speciálisan
ha folyamatosan elakad mindent a lap alján,
különösen akkor, ha Én vezetése a dolgok egyszerűen azáltal, hogy minden
A kódomat belül a HTML-oldal
ha persze lehet biztos, hogy a szokás
A faktoring ki külön fájlba
ekkor ez csak jó
központosítani a fájlokat a fejét.
Kivéve van egy ár, amit fizetni
azáltal, JavaScript Egy másik eszköz, mint a CSS fájlok
a fejét az oldal, mi az a kockázat, hogy fut?
>> Lassabb oldal betöltése.
>> Lassabb oldal betöltése, miért?
>> Mert próbálunk betölteni a könyvtárak
előtt [hallható].
>> Pontosan azért, mert a böngészők olvasd el a kódot, fentről lefelé,
balról jobbra, ha a Google elemzés lassú
vagy a jQuery CDN lassú vagy a Facebook API lassú
és hogy a fájl csak lóg potenciálisan függően
hogyan adagolják a fájlt, az egész oldal is úgy tűnik, hogy lógni.
És ha látja ezt a nagyon őszintén
weboldalak nagyon sok rossz minőségű hirdetések
őket, mi csak egy lassú, vagy lezuhant honlapján is akasztani oldalt
néhány határozatlan másodpercek száma
míg végül a böngésző remélhetőleg alkalommal ki, hogy
majd megmutatja a többi oldal.
Szóval, ha valaha is használt, mint a A Facebook, mint a gomb,
az a weboldal, hadd hátha találok ezt
anélkül, hogy jelentkezzen be itt.
Tehát, ha megy a Facebook like button
majd kattintson a get kódot, a fenébe is,
lássuk, ha tudjuk megtalálják a példában
biztosan valaki írt ezt.
[Szünet]
Adok fel egy pár másodperc, ha nem látjuk ezt.
Facebook Aszinkron - OK.
Szóval, ez az a kód, és ha ők már megváltozott a közelmúltban
hogy a Facebook valójában azt javasolja, hogy
betölteni a könyvtár és valóban javaslatot
hogy, hogy ezt a a szervezetben az oldal.
Tehát, Facebook tanácsolja, létrehoz egyfajta ostoba DIV
hogy csak egyedülálló ID, mint a ezt, akkor van egy script tag
és minden ez a komplexitás lényegében a következőket
és nem használja a JQuery mert nem akar
vállalni minden más függőségek,
hadd mozgatni ezt vége, csak egy kicsit.
Tehát észre, hogy van egy névtelen funkciót is,
inkább az, hogy csak egy pillanatra,
ők majd document.createElement,
ők létre egy DOM elemet, ez olyan, mint a malloc úgymond
ahol a címke típusú script, ez majd megadja
hogy az aszinkron attribútum , hogy a tag megy
, hogy igaz legyen, akkor megy előre és rájönni, hogy mi az URL-
Facebook JavaScript kell lennie
és ez még csak a képzelet módja
Az ellenőrzés kellene Legyen HGP vagy HDPS.
És végül, akkor észre, hogy mit csinál a Facebook,
kapnak a DOM csomópontot, van egy azonosítója Facebook gyökér
ami mit mondtak meg, hogy a lap
és akkor fűzze hozzá a gyermek így a hatása ez az egész
az a fajta dinamikusan adja új script tag a lapra
mint egy gyerek a DIV, amit beillesztésre van olyan, hogy a többi
Az oldal betöltődik boldogan
majd ez a kód valójában lesz töltve aszinkron.
Tehát lényegében után tény és halasztott említést
A névtelen függvény,
mi ez a funky szintaxis utalva itt
amikor nem csak a funkció nyissa paren, közel paren
majd kapcsos zárójelek, Ezért a nyitott paren itt
majd a nyitott szoros, Paren van, mit csinál?
>> [Hallható] meghatározó majd a végrehajtó?
>> Pontosan, ez meghatározó funkció, amely névtelen
hanem csak meghatározza a funkciót,
Természetesen nem hajtja végre funkciót, amíg nem hívják
név szerint, de persze ez egy névtelen függvény
így nem lehet nevezni név szerint de akkor
JavaScript végrehajt egy névtelen funkció csak
a külvilágtól az egész zárójelben ahogy megtettem
ezzel paren és ez Paren ide, majd a rögzítő
hogy a végén a függvény nyitott paren, közel paren,
Ha nem akarod, hogy adja át olyan érveket.
De ez úgy tűnik, ilyen hülye,
mint, hogy miért ez a kiegészítő szintaktikai komplexitás
hogy a legtöbb ember nem úgy tűnik, felismerni, mi az érték
A csomagolás azon három sornyi kódot
egy névtelen függvény ezen a módon.
Igen.
>> Elkerülése érdekében felülírja a értékes a [hallható].
>> Pontosan, hogy ne felülírja a változó
a jelenlegi oldalon, igaz?
Facebook valamivel elbizakodottságból úgy döntött,
fognak használni a E változó, elég valószínű,
hogy Ön vagy bárki a A Facebook like gomb
vagy bármilyen más társadalmi csatlakozó
ben van egy változó valahol az úgynevezett E. Tehát,
a külvilágtól minden a kód belsejében
Ennek névtelen függvény, akkor alapvetően a saját körét
ez nem kockáztatni felülírja meglévő változókat.
Szóval, ez is valójában nagyon gyakori paradigma,
különösen, ha írásban könyvtár kód
vagy ha te magad nem szeretné, hogy rendetlenséget a névtér
más változók szeretné, hogy az értéket élni
és meghal, mihelyt kilépünk hogy a blokk kód,
ez egy jó technika, JavaScript.
Rendben van.
Tehát, majd vissza, hogy ez a példa Itt minden tettünk a végén
ezzel példa csak kitakarította a kódot.
Tehát, még mindig van egy egész csomó kapcsoló, egy csomó
A körülmények itt, de észre egy kis szintaxis,
ez éri el a DOM csomópont Az egyedi azonosító regisztrációs,
a tér eszközt meg most leszármazottja, hogy a csomópont,
találni, ha ez a fajta bemeneti és akkor még
Ha még nem látta ezt a előtt, lehet, hogy tudja,
hogy ez csak azt jelenti, meg ez a bemeneti címke,
A bemeneti elemek, hogy van egy attribútum név, amelynek értéke
e-mail, majd hagyja, me hullám kezem néhány
A többi nem minden ösztönző
de tényleg csak jQuery szintaxis ugyanazon műveleteket.
Rendben van.
De mi nem annyira fontos, itt van a böngésző oldalon dolgok
hanem az a tény, hogy mi volt, tisztább és tisztább módon
A valóban így hogy a kód működik.
Rendben van.
Bármilyen kérdése?
[Hallható Megjegyzés]
OK. Most a móka része.
Tehát, node.js Miért?
Kit érdekel?
Mit tudsz róla ma?
Node.js, miért?
Henry [feltételezett helyesírás].
[Hallható Megjegyzés]
Akkumulátor reset?
Mi - ez egy tökéletes szikla fogas
a második felében a mai.
Miért nem megyünk, és hogy 5 perc szünet van,
van egy fél cukorka a gép ott, ha lenne
mint valami cukorkát nélkül amivel egy negyed hüvelyk