>> V redu.
Torej, JavaScript.
Skoraj vsi v tej sobi Verjetno ima neko stopnjo
udobja z njim, ali je bilo poti nazaj, ko v SC50
ali je bilo osebno spletni projekti ali celo
če si malo od tega s Preteklo PHP osnova projekta,
Toda za večino del, mnogi od vas,
tudi če imate nekaj udobja
z JavaScript morda niso bili sprejeti
samoumevnega, kako jezik deluje in kaj gre
na pod pokrovom motorja in kaj bomo poskušali
storiti danes lupine nazaj nekateri tehnični plasti
kaj JavaScript je, kako se razlikuje od jezika
kot so PHP, kako lahko uporabiti ne le na strani odjemalca
ampak tudi strani strežnika in nato osredotočil zelo specifično
v tem okviru opazili nobenega JS ki je v bistvu čas, rok,
Program, s katerim lahko izvajanje kode JavaScript,
strežniški strani in postaja vedno bolj priljubljena vrsta
iz istega postave to dni verjetno Ruby in PHP
in Python in boste videli
da ima nekaj precej zmogljive funkcije s pomočjo nekaterih
z vgrajenim jeziku konstrukti.
Najprej pa nekaj enostavno stvari, samo da vas spomnim
kako ta jezik deluje in če imate težave videnje koli
to, samo krik ven in se bomo prilagodili.
Torej, kot tista v PHP tam št pojem glavno funkcijo,
ste pravkar začeli pisati kodo
in lahko zanje razlagati zgoraj navzdol.
V okviru brskalnika
ali nekaj strani strežnika bomo videli nekaj primerov
v bit.
Pogoji, skladenjsko enakovredna PHP kot tudi C,
C + + in nekaterih drugih jezikih tako, samo da vam občutek
o tem, kako bi jih lahko strukturirati,
tam je samo kanonično stanje.
Boolove izraze, popolnoma enak skladenjsko kot ste videli
V teh istih drugih jezikov, tako za ORingom
in za končanje stvari skupaj.
JavaScript mora stikala, podobno kot PHP in druge Naredimo
in ti niso omejene, kot so V C do celovitih gradnikov
kot znakov in ints lahko dejansko storijo druge vrste vrednosti.
Loops. To je torej popolnoma enaka
in verjetno ducat jezikov, medtem ko zanke, storiti, medtem ko zanke
in potem ta trik tukaj.
Torej je to nekako znan kot hiter štetja
in to je zelo pameten način o, tako kot pri PHP tem
za vsako FU bar lahko podobno,
v JavaScript predmeta, kjer je predmet ime
od variabilnega tukaj, recimo, var i v objekt in na vsaki ponovitvi
te zanke, i bo ena
od ključev iz tega predmeta.
Torej, če imate objekt za študent in študent ima ID
ter ime in hišo, ponavljajočim i bo
vrednosti ID in ime ter Hiša in lahko zanje indeks
v objekt, kot da je array uporabo oglati oklepaj
Zapis, da se vrednost ključnega ID ali ime
ali hišo, in tako naprej.
In v nasprotju s skupnim Predpostavka, JavaScript predmeti,
Niso nujno zagotovljeno, da je
v istem vrstnem redu, to je tudi Res PHP zato ne prevzemajo
da se bodo stvari ostanejo v istem vrstnem redu
da si dal tiste ključne parov vrednost v objekt.
Kako približno nizi?
Obstaja nekaj načinov, da jo napišite skladenjsko
ampak to je verjetno najbolj Skupno zdaj samo z uporabo square
Nosilec zapis.
Torej, to je spremenljivka klicnih številk, ki vsebujejo niz
šest celih tam, tukaj je preprost niz
in opazili, kaj je odsoten iz teh primerov
kaj je JavaScript očitno primanjkuje.
Ja. Torej, ni pojem tipkanja, zagotovo ne
V zvezi s tem tukaj, ampak to je res niz.
Torej, JavaScript mora vrst in da je dejansko niz
ki je sama vrsta in vsak element
v tej matriki so tipa številko, kot jih zahteva JavaScript.
Torej, to je ohlapno vnesli jezik in bomo videli
da je JavaScript kot so PHP ima upravljavec identitete
in drugih mehanizmov za dejansko preverjanje, kaj na vrsto
nekaterih spremenljivka tako za preverjanje napak
in za druge aplikacije.
In tukaj je vzorec objekt vsebuje le ime in ime.
In zdaj, opazili, da smo uporabo kodrasti nosilec zapisa,
zareza in bela Prostor je nekako nesmiselna
in to izjavlja spremenljivka, katere ime je Rob
in katerih ID je 1 in Tip datum je tu naša
in niz oz.
In potem je to nekaj, kar je nekoliko drugačen
če ste kdaj kaj naredil z Ajax v teh dneh?
Verjetno ste se uporablja objekt, kot je ta
ampak kaj je vredno omeniti tukaj?
Kaj je skladenjsko kdaj tako različni, samo par
stvari, med tem primeru ki je sicer manjši
in ta večja primer.
Torej, najprej na poljuden Izraz, kaj je to?
Kaj je vrsta Osebje bi rekel?
OK, to je matrika, to je niz kaj?
>> Predmeti.
>> OK, to je niz predmetov.
In zdaj osredotočiti na samo eno - koli od teh objektov,
Kaj je drugače med to in ono?
>> Tipke so strune.
>> Ja. Torej, Tipke so strune,
in tipke so dejansko strune v obeh primerih
in to je nekako idiotsko
v mojem mnenju zgodovinski zasnovi odločitev, ko ste s pomočjo
JSON, JavaScript Object Notation,
, ki je v bistvu format prevoz
za pošiljanje podatkov tipično preko omrežja
med odjemalcem in strežnikom, morate zapomniti
da to dejansko ni veljavna JSON in to je eden
od teh FYIs, če ste kdaj bang glavo ob zid
za nekaj minut brez pravega Razlog, da ni veljaven JSON
ker so tipke dejansko ne kotirajo.
JSON idiotically zahteva, da tipke kotirati ne samo,
ampak da jih je dvakrat citiral, single quotes ne zadostujejo.
Torej, neumna stvar in bolj zabavno dejstvo,
za današnje namene, vendar to Tudi bi veljala JavaScript
to je samo ne - Obratno ni res.
Vse je v redu.
Torej, bomo videli veliko Več o tem.
Vse je v redu.
Tako, da je JavaScript skladenjsko verjetno precej
znano, kdo od vas, ki imajo nikoli ne uporablja JavaScript pred
to ni velik preskok iz PHP ali skoraj vsa procesna jezik
ki ste morda uporabljajo.
Torej, danes se bomo osredotočili na zanimive vidike
JavaScript zlasti v okviru no js
vendar ne izključno zaradi do zdaj ste verjetno,
Če ste uporabili Javascript, ga uporablja znotraj brskalnika.
Torej, ne JS je okolje nato pa v malo se dogaja
kar nam omogoča dostop do JavaScript kodo odjemalca -
strežniški strani, ampak najprej, dajmo si oglejte
na nekaj, kar je Malo več strani odjemalca.
Torej, sem šla na to pa je vezana na spletni strani tečaji,
če želite, da igrajo skupaj, obstajata dve podmapi
V današnjem Zip od imenovanih Vir klinov zip na spletni strani
in to so le Nekaj ​​primerov reminiscing
stvari, ki ste morda videli pred in nekako sem jih zgradili
največ od najenostavnejših do rahlo bolj zapletena, da draži
izvajajo nekatere funkcije JavaScript.
Torej, gremo naprej in da poglej na primer za to.
Torej, žal blink tag je ubili pred nekaj leti
saj so tako dobili lepša in lepša
in mežikanja tag je dobesedno oklepaj blink zaklepaj
in to nekako ni več z nami.
Ampak, še vedno lahko obudila Ta ideja trakec, ki ga nekako
razmišljanja o tem logično, kako si šel
o izdelavi nekaj podobnega to blink intuitivno?
Ob predpostavki, da veste, malo bit JavaScript in ali CSS
Na tej točki, je OK, če ne boš.
>> Nastavite čas ven in se skril potem ko ga bom označil
ven in ga spet pokazati.
>> Ja, odlično.
To je neke vrste programiranja 101,
Kako bi dosegli vizualni učinek, kot je ta?
No, nekako moral nekaj pokazati
in potem kaj skriti, kažejo Nekaj, nekaj skriti
in kot predlaga Jonathan Uporablja nekakšno time out,
neke vrste urnik lahko storite to večkrat brez potrebe
uporabiti zanke ali nekaj takega.
Torej, naj gredo v blink-0.html
in mi psihiater pisava malo
tako da več to ustreza.
In dajmo si oglejte kaj se tukaj dogaja.
Torej, najprej opazili, da telo
te strani je super Enostavno, znotraj telesa
strani je samo div.
Sem samovoljno dal ID pozdrava
in da bi bilo karkoli tako dolgo, kot je to edinstvena
in potem sem samo še nekaj enostavno besedilo, zdravo svet.
Torej, če sem zdaj lahko premikate navzgor, opazili nekaj puhasto styling.
Torej, sem rekel, ostra pozdrav, ki je, kot veste,
v CSS samo pomeni enolično prepoznajo element
z idejo pozdrav,
Velikost pisave se dogaja samovoljno je to, marža in besedilo uskladiti.
Torej, nezanimivo estetske podrobnosti
grobo centriranje besedila.
Torej, zanimiv del je V script tag tu gor
ki sem se zgodi, da dajo noter glave strani.
Torej, bova - lahko storite To na noben več načinov
in bomo videli nekaj ponovitve tega istega programa
ampak začnimo od začetka.
Torej, sem razglasila Funkcija se imenuje blink
in očitno uporablja ta vgrajen DOM metodo, imenovano
getElementById, ki je morda eden od močnejših metod
da boste dobili iz škatle z JavaScript išče
"Pozdrava« ni treba biti dvojne narekovaje, kot je bilo
HTML je bodisi je v redu, dokler
kot ste slogovno skladna te dni sem upal reči
veliko ljudi uporablja Java, single quotes v JavaScriptu,
dvojne narekovaje v HTML, temveč to sploh ni pomembno
tako dolgo, kot ste dosledni.
Torej, tukaj je, če niste seznanjeni, lahko dejansko dostop
z JavaScript CSS lastnosti o elementih.
Torej, opazil, da sem razglasi spremenljivka imenovan div
in shranjenih znotraj te spremenljivke,
sklicevanje na karkoli ki DOM element.
Torej, če mislite, da nazaj na CS50 ali v katerikoli kategoriji, v kateri ste mislili
o drevesnih struktur in DOM, Document Object Model,
to je samo reference na vozlišče v drevesu
, ki predstavlja to stran
in če div.style.visibility nepremičnine enaka, enaka, enaka,
skrito, potem sem želijo preklop it
kot je predlagano Jonathan drugače želim
da ga Toggle prenesejo skrite.
Zdaj, kot je na strani, zakaj triple enak tam?
Ali kaj je to v primerjavi s dvoposteljna Enako?
>> Strict enakovredni.
>> Žal mi je.
>> Strict enakovredni.
Torej, to je operaterjem identitete
kje ga boš preverjanje ne le vrednost spremenljivke
kot enakopravni, enako smislu ampak tudi vrsta njej.
Torej, čeprav nismo to sedaj določeno vsi podatki
Vrste za katere koli spremenljivke v ta ali kateri koli strani,
obstaja vrsta povezana s tem niz skrita
s to vrednostjo, skriti in To je seveda niza.
Torej, v tem primeru sploh ni pomembno
saj ni načina, da bomo enačijo niz
v "skrite" z kakšno drugo vrednost
vendar je to pogosto dobro navada, bi rekel, da bi dobili
v uporabi enaka, enaki,
enačaj je na splošno dobra stvar.
To bo vaš kodo bolj robusten, tako v PHP, vendar
in v JavaScript saj boste zašli
v primerih, občasno kotiček kjer bi vrednost je enaka nič
da si iskal in nič se lahko združevali z lažno
ali bi biti in kot v PHP,
Javascript preveč, imajo lahko več Lažno vrednosti, če se z ničlo
in lažni in null in undefined lahko vsi rešili implicitno
na false.
Ampak, če si res želijo Za preverjanje za posamezno vrednost
kot nič, številko ali false Boolean, potem imate
Za uporabo te identitete operaterja.
Torej, bi se lahko zgodilo, da bi dobili v vsakem primeru, čeprav tukaj
to je nekako nesmiselna ker vemo, da smo preverjanje
za godalni vrednost in je ne bo kaj drugega.
Torej, tukaj je magija potem, če sem pomaknite navzdol, da te vrstice tukaj,
očitno, zgrajena v okno predmeta
in to je značilnost Brskalnik, ki ga lahko dostopate
to super globalna objekt imenovan Window,
notranjost, ki je nekatere funkcije,
če kos, ki nastavljen interval
in to se očitno kakšne argumente?
Ja.
>> Funkcija klica in čas.
>> Dobro. Torej, funkcija pokličete in čas
in zato zlasti sklicevanje na funkcijo,
kazalec na funkcijo v nekem smislu
in da je funkcija da se dogaja
da se izvrši vsako številko milisekund in v tem primeru
to je vsakih 500 milisekund.
Torej, to je način spodbuditve učinkovito in neskončna zanka
brez uporabe ponovitev vendar namesto da bi povedali JavaScript
motorja v notranjosti brskalnika
da to stori vsak 500 milisekund ali je blizu
500 milisekund, kot je mogoče,
Izkazalo se je, da Pod pokrovom motorja,
tam je, kar se imenuje dogodek zanke in se bomo vrnili k temu
v okviru vozlišča JS da samo nenehno vrste
od tam sedel, predenje, čakanja na delo je treba storiti
in takoj, ko se zavedaš,
500 milisekund je minilo blink se bo znova pozval
in spet je poleg katerega koli drugega dela
, ki jo je dobil storiti.
Torej, kaj lahko izboljšamo tukaj?
No, naj odprejo up blink-1.html
in dokazati pomežiki-1.html
kot estetsko popolnoma identična.
Torej, kaj bi lahko izboljšali tukaj?
No, opazil, da je je nekako neuporabna
opredeliti funkcijo imenovano Blink ker koliko
V koliko krajev nisem pokličite funkcijo blink?
>> Samo enkrat.
>> Torej, en.
Torej, to ni bil slab, v Dejstvo, da je verjetno precej
naravnost naprej.
Opredeljeno sem funkcijo blink, sem pokličite funkcijo blink preko
tega parametra ampak tehnično,
ni bila razlog za to in skupna paradigma
v JavaScript je dejansko izkoristiti lambda funkcij
kot ste morda spomnite iz 51 ali anonimni funkcije
kjer, če jih ne potrebujete ime za funkcijo
če ste samo kliče zagotovo na enem mestu,
zakaj se trudim nered svojo kodo, nered programerji um
tvoje ime prostora Res s simboli
da ne boste res morali skrbeti.
In tako, v tej različici tukaj,
opazili, da kličem window.SetInterval neposredno
na samem vrhu mojega script tag potem sem mimo
v neimenovanem funkcijo ki traja nobenih argumentov
in to je popolnoma redu in nato telo
te funkcije se zdi, je identični, kar je bilo prej
in samo sintaktična Razlika je zdaj
tukaj zraven 500.
Bom zaprl telo funkcije
in potem sem rekel izvršitev tega predhodnega kodo,
vsakih 500 milisekund.
Torej, zelo obroben spremembe
ampak korak v smeri, kaj je Verjetno bolj elegantno
Izvajanje tega.
Torej, vzemimo tole nadaljnji korak, če bi zdaj šel
v trenutku dva, boste glej skupno knjižnico,
Učinek, ki se dogaja
da je popolnoma nepomembna estetsko, ampak če gremo
v različici dva tukaj, obvestilo da je na vrhu glave,
Sem vključen Najnovejša različica JQuery.
In potem sem dol, Pravkar sem očistiti
do kode malo, to je Ne bo zabavno svet
Za nadaljnjo uporabo avtohtone DOM funkcije
in neke vrste surovega JavaScript.
V bistvu, JQuery, kot si lahko vem, je postala tako priljubljena
da večina ljudi preprosto konflikt z jQuery JavaScript
ampak res samo večerja uporabna knjižnica napisana
s kolegi z imenom John Resig in od drugih
da imajo samo naredi Veliko dolgočasne stvari
v JavaScript lažje in bolj jedrnat.
Torej, v tem primeru tukaj, kaj se dogaja?
Torej, imam vtis znak za dolar, več o tem
čez nekaj trenutkov, nato pa to je selektor CSS.
Torej, to je zelo podobna Duh na to, kar sem prej,
ampak tokrat sem dobesedno z uporabo hash tag
, ki označuje edinstveno identifikator imenovano pozdrav
in nato očitno . CSS je metoda zgrajena
Za karkoli objekt je, da sem ustvaril
in sem preverja vrednost ključa vidljivosti.
In če je vrednost tega ključa enaka, enaka, enaka, skrito,
potem pa grem, da ga čepa Jaz bom to Toggle tokrat
z uporabo iste metode ki je očitno preobremenjen
v tem smislu, da ima dve različni znaki,
eno z enim argumentom in ena z dvema argumentov,
pri čemer se drugi je podajalca,
prejšnji katerih je Človek, ki ustvarja tako rekoč.
In če radovedni in če bi Nikoli nisem pogledal na to,
če gremo na upajmo jquery.css top hit je res to
in si lahko ogledate več Formalna razlaga
da smo šele raba to, . Css z imenom nepremičnin
in nato podajalec je pika CSS
z imenom nepremičnin in vrednost.
Torej, nekoliko čistejši, vendar Opazili neke vrste vzorec tukaj
pri vsaki ponovitvi tega kodeksa,
smo nekako tako da je strožji in bolj in bolj
in tam reči boljše modelov
saj smo z nekom drug kodo, ki je izločen
nekatere od kompleksnosti.
Torej, zdaj naredimo to še enostavnejše.
In v resnici, če bi odstranili vse citati boste videli vsi
comment boste videli, kako preprosto je to dobila.
Ena razlika Tu seveda je
da sem z uporabo preklop metoda, ki prihaja tudi vgrajeno
Za jQuery in da je samo
ker je nekdo napisal kodo
ki dejansko preklaplja nastavitev Vidnost
v nobeni element DOM da ga pošljete.
Torej, bolje in bolje.
Tako, to je vzorec,
čeprav je to večerja Preprost primer in razvrščanje
butasto neto učinka, ki je utripajoč kos besedila,
to je, da nekako misli proces, ki bi morali razmišljati -
ne razmišljam o nujno zelo prvi
pasivno pisanje nekaj za prihodnji projekt
vsekakor pa, kot ste Ponovil s svojim svetovalcem ali se z mano
in vaša ekipa sestanki ali pa samo pregledati svoje sotekmovalce kodo
O zaostrovanje stvari, kajne?
Konec koncev, oni manj -
a manj vrstic kode boste na koncu imeli
V teoriji ste manj hroščev verjetno, da bodo povabili
ker so preprosto manj kodo, da nered s.
Vse je v redu.
Torej, nekaj takeaways.
Lambda funkcije, anonimne funkcije,
mnogi, ki ste ni videl
in nato tudi samo zatezanje Stvari gor s knjižnico
kot jQuery v tem Poseben primer.
Vse je v redu.
Vsa vprašanja?
Naredimo nekaj drugega Stranka stranski vidik tukaj,
v obliki nič smo Ta neto učinek.
Super enostavna oblika in videz če skušam kliknite tukaj registrirati,
najprej se mi je povedala, da so registrirane, no, ne ravno.
Torej, zakaj je to?
No, tukaj je oblika-0.html zelo malo kode,
no JavaScript whatsoever in to je popolnoma ponaredek neke
v obliki, ker temelji učinek vrednost je registered.html
kar pomeni, da ni važno, kaj Sem tip v tej obliki,
kjer se bo treba poslati na strežniku?
Ja. Torej, da registered.html ki je očitno HTML datoteka
ki je torej statična datoteka, ki nima sredstev
jemanja vnos uporabnika predpostavki ni JavaScript kodo
vgrajeni v to, da je videti v URL
tako da je to povsem noop in da se nič ne bo zgodilo
mu je predloženih podatkov, vendar lahko vidite strukturo
z dokaj preprosti obliki HTML5
da ima nekaj gesla, nekaj vrst vhod.
Torej, kaj je pravzaprav zdaj dodati nekaj preverjati napake
in videli, kako bomo morda to izboljšali.
Torej, tukaj je nekako slaba človek je način izvajanja tega
in to je nekako grdo kos kode.
Torej, najprej je pustil pomikanje na dno
da vidim, kaj je enako in kaj je drugače.
Edina stvar drugačna zdaj med to
in prejšnja različica da sem dobil obliko in ID
v "registracija" bi lahko so bili za karkoli hočem
vendar naj bi bilo enolično prepoznavna tudi to ni
nujno potrebno, ker če Stran ima samo eno obliko zagotovo I
lahko ga našli z enim od Metode za izbiro jQuery je.
Ampak ta način samo naredi bolj deterministična.
Torej, če grem do sedaj moj scenarij tag, opazili naslednje,
window.onload Enako anonimni funkcija.
Torej, kaj to počne?
Torej, se morda spomniš, da je v client-side programiranje -
JavaScript namesto HTML strani so različni dogodki povezani
z elementi, s klikom in predložitev in se osredotočajo
in zabrisane in druge take dogodkov, ki bi se lahko zgodilo
kot uporabnik tipično sodeluje s strani
window.onload ne, kaj piše.
Na okna celotno nakladanja
tako da, ko vse slike bilo prenesli, ko bodo vse datoteke, ki so
je bilo prenesenih in enkrat Stran je bila naložena,
naredite naslednje kodo, in opazila, da sem preklopil na dnu
te metode, opazili, da ne obstajajo oklepaj
po kodrasti oklepaja kar pomeni
da ne bom izvršitve ta funkcija tukaj zdaj,
Brskalnik bo za izvedbo to je za mene, ko je ugotovil,
da je stran naložen.
Torej, da vidimo, kaj smo naredili,
document.getElementById registracija
tako da samo mi daje sklicevanje na vozlišču
v drevo, ki je od ima ID registracije.
In zdaj, grem na registrirajte drugo obravnavo dogodkov
s tem form.onsubmit dobi ta anonimna funkcija
ki pomenijo naslednje Koda je treba izvesti, kadar koli
ta obrazec je predloženi.
Zdaj, večina je to le nekako dolgočasno logiko.
Torej, če vrednost email polje v obrazcu je
"Nič", potem morate svoj e-poštni naslov,
kričiš na uporabnika s opozori in se nato vrne false.
In potem imam kup drugih kontrol,
pregledi za geslo,
preverjanja, če gesla so enaki,
preverjanja, če sporazum polje se preverja, ali ne
in sem vpij uporabnik morebitne
teh testov dejansko uspe.
In tako, tukaj je primer še čeprav je malo izmišljene
tukaj je dejstvo, da sem z enaka, enaka, enaka,
pomeni, da uporabnik ne more poskusi me pretentati
ki jih vnesete v kakšni vrednosti.
Oziroma sem resnično preverjanja prisotnosti
praznega niza, uporabnik še niso vnesli ničesar.
Če je uporabnik vnesel V dobesedno nič,
"Nič", lahko bi bilo zamenjevati s praznim nizom.
In sem rekel, da je nekako od nesmiselna tukaj
ker očitno še nič ni e-poštni naslov.
Ampak, če je bilo to več generično polje kot polje z besedilom
ali ime ali opis ali nekaj, kar želite, da vrednost za
in to ni nujno skladenjsko imajo
da bo e-poštni naslov, uporabnik lahko vnesete nekaj podobnega nič
in spet kotiček primer, ampak to je Zato običajno preverjanje vrste se
uporabna stvar.
Ste resnično preverjanje Uporabnik, ki je tipkal nič
na tem področju.
Torej, kaj se zgodi, če noben teh testov ne, no,
vračanje res notri za obravnavo dogodkov
kot onsubmit pomeni le ponovitev Prvotni vedenje dejansko
širi in zato Obrazec bo dobil predloženi.
In to je, zakaj, ko sem končno kliknili predloži preden sem
vse do register.html in če sem to storil zdaj, obvestilo,
Dobil sem vpil na, če ne bom e-poštni naslov
in sem lahko vnesete v malan@harvard.edu,
crimson [fonetično] škrlatna, potrdite polje,
in zdaj se registrirali in pa mi pravi, še enkrat,
ste registrirani ali ni res.
Vse je v redu.
Torej, kaj je čist to gor samo malo in nato prehod
za novo novejših strani strežnika stvari.
Torej, če sem šel v obliko-2.html, opazil nekaj stvari.
Torej, ena, sem prinesel jQuery nazaj v mešanici
tako da je spet je to znak za dolar
in zdaj sem s pomočjo nekatere metode jQuery.
Torej, najprej, kaj je o Dolar znak, da je
tako posebnega tukaj?
Kaj je znak za dolar šivajo v večini katero koli oznako jQuery?
Ja.
[Neslišno Opomba]
OK. Torej, funkcija znak za dolar gre skozi DOM išče
kaj s tem predvsem selektor CSS.
Torej, res, ampak skoraj preveč natančna.
To je tisto, kar se zgodi ko se boste peljali v nizu
kot v tem primeru, vendar pa ne Vedno je treba iti v nizu.
V resnici zgodilo v točki, zelo Prva vrstica tukaj to ne
Selektor CSS, sem mimo v odvisnosti lambda.
Torej, bolj na splošno - tako, Dober odgovor, ampak preveč natančna.
Bolj splošno, kar je Dolar znak predstavlja?
>> Samo jQuery.
>> Ja. Torej, samo jQuery ali je to samo funkcija
da je pred nekaj leti guy napisal in drugi ljudje
saj okrepljeno ki dobesedno ki ga je privzeto imenuje -
Ups, se imenuje jQuery.
Preprosto - se izkaže ven za razliko od veliko
jezikov znak za dolar je popolnoma veljavno simbol za uporabo
v imenu spremenljivka, medtem ko je
PHP znak za dolar Očitno ima poseben pomen
ampak v JavaScript kot v nekateri jeziki, znak za dolar
in poudarjajo in druge take posebni znaki popolnoma zakonit
uporabiti v svojem simbolu Imena spremenljivk.
Torej, nekdo je pravkar odločila, da, saj veste kaj?
To se dogaja, da je precej dolgočasno
da bi ves svet tip jQuery ves čas,
Naj vrste rastlin delež v tla in rekel:
"To bo knjižnica uporabite znak za dolar. "
In dejansko to ne povečuje nevarnost
da je nekdo drug presumptuously se bo uporabil znak za dolar
za njegovo ali njeno knjižnico, vendar tam je načinov, da nekako zavarujejo
da če uporabljate dolar prijavite se preslika v jQuery
ker lahko preizkusite, če to je že dodeljena
nekaj drugega v bistvu.
Vse je v redu.
Torej, to je vse, je, ni čarovnija.
To je samo seksi kos sintakso, da je lepo
ter hitro in enostavno, da tip.
Torej, kaj se zgodi, ko vnesite znak za dolar odprtih paren
in potem anonimna funkcija.
No, izkaže, da je to dejansko okrajšava zapis
za dokument piko Pripravljeni odprta paren.
Torej, kot Cynthia opazil prej smo že našli eno
Kotiček za primer.
Če ste pravkar minil v Funkcija lambda,
učinek dolarja Znak je malo drugačna.
V bistvu, kaj se v resnici dogaja je, da je enakovredna tem
ki poteka v zvezi s globalni dokument predmet
da je globalno tako kot okno predmet
ki vam daje nekaj posebna funkcionalnost
, ki vpliva na celotno stran ali brskalnik in se izkaže
iz tega dokumenta, ko jo ovijte s jQuery,
jQuery bistvu se zaveda, oh, to je referenčna
v tem posebnem dokumentu predmeta,
Naj zdaj registrirati Dogodek trener poklical pripravljena
ki ni naravnega JavaScript ali DOM povezani.
Pripravljen je jQuery Stvar, ki pravi,
ko se stran naloži vse elemente HTML
vendar ne nujno naloženo, vse CSS in slik
in JavaScript datoteke in utripati datotek in podobno.
Torej, to je korak pred obremenitvi nato nadaljujte
in izvesti naslednje.
In z glavo uporabe na pripravljeno pomeni, da lahko, saj veš,
da so vsi elementi V vašem DOM,
vse enolično določen stvari z ID-jev, obstajajo tudi
če stran, njena vsebina še vedno nakladanje in nakladanje
in imate nekaj zlomljena ikone za trenutek
ali bela stran v ozadju.
Ja.
>> Kaj bi se zgodilo če [neslišno]?
>> Idealen primer, odlično vprašanje.
Torej, da vidimo, če lahko simulirati to prav zdaj.
Torej, naj gredo naprej in brisanje ta dva linije so tu gor in potem
ne moti, da se določi zamik, naj gredo naprej
in to izbrisati dol - Ups, tale tukaj.
In zdaj, pustite me prenesejo stran, pojdite na obrazcu-2.html in vrsto
v register, nič ni zgodi, recimo, zakaj je bilo to,
gremo naprej in odprite up inšpektorja Chrome,
odpreti konzolo samo da bi videli če se kaj zgodi tukaj, zdaj,
registrirati, še vedno nič.
Torej, koda je skladenjsko V redu
tako da jaz ne vidim nobenih Sporočila o napakah, rdeča
ampak kaj jasno se ne dogaja?
Nobeden od mojih koda je prav, ne deluje tako none
mojih kod izgleda izvršitve, zakaj je to?
No, JavaScript in brskalniki bolj splošno izvršitev
Vsebino spletne strani, na vrh navzdol, od leve proti desni.
In problem je da zaradi top
to stran je HTML, nato pa glavo potem skript nato pa še scenarij,
To se dogaja, da se izvrši preden kaj je še pripravljen,
ali celo obstaja v drevesu zastopanje strani.
Oblika sama, niti Telo obstaja, na tej točki.
Torej, jQuery je dovolj pameten S tem je preverjanje napak
da če ni element z edinstven ID registracije,
da se ne bo bail out na vas
in samo sproži nekaj konzole napakam in prekinil celo stran,
to se dogaja, tiho ignorirati si, ampak zato, da se nobena
to kodo kdaj se izvede
ker če imate registriranih to submit trener,
ni element da jo pritrdite.
Torej, to je nekako ni op tam.
Torej, namesto da bi ga navede, počakajte, da se starostna naložen
če bomo naredili window.onload stvar, ki je nekako
stare šole način dela to, ali bolj seksi jQuery pot
kot je ta, ne moremo povedal, da počaka, dokler vsi
teh oznak HTML imeti je razčlenjena tako da tudi
če se slike ne naložijo na Vsaj to vozlišče v drevesu,
potem se JQuery lahko zagotovi da je vse tam.
Ja.
[Neslišno Opomba]
Ja, dobro, ja seveda.
Torej, druga rešitev to, če niste uporabili to
ali pa se ne spomnim da to obstaja,
bi lahko absolutno premakniti vse to na dno
spletne strani, znotraj telo še vedno, vendar pod obrazca
in da bi tudi rešiti ta problem.
To je samo navadno šteje slaba praksa.
To je grdo in površni posebej
če boste obdržali motenje vse na dnu strani,
še posebej, če bom obdržal stvari preproste s tem da vse
moje kode v notranjosti strani HTML
če seveda lahko zagotovo dobili v navado
da jo faktoring ven v ločeno datoteko
na kateri točki je samo lepo
centralizirati slik v glavi.
Razen da je cena, ki jo plača
z uvedbo JavaScript še sredstva, kot so CSS datoteke
v glavi strani kaj je tveganje, da si pobegnil?
>> Počasneje nalaganje strani.
>> Počasneje nalaganje strani, zakaj?
>> Ker se trudimo naložiti vse knjižnice
pred [neslišno].
>> Točno zato, ker brskalniki preberete kodo vrha do dna,
od leve proti desni, če Google analitike so počasni
ali jQuery CDN je počasen ali Facebook API je počasen
in da je datoteka samo visi potencialno odvisno
o tem, kako ste ga naložili datoteko, celotna stran lahko zdi, da visi.
In če vidiš to Veliko odkrito
na spletnih straneh imajo veliko nizke kakovosti oglasi
na njih, mi smo samo ena počasna ali sestrelil spletna stran lahko obesite stran
za nekatere nedoločen čas Število sekund
dokler končno brskalnik upajmo krat, na tej
in potem kaže Preostanek strani.
Torej, če ste kdaj uporabili kot Facebook, gumb všeč,
na svojo spletno stran, pustite me vidim, če lahko to najdete
ne da bi se prijavite tukaj.
Torej, če greš na Kot tipka Facebook
in kliknite get kodo, prekleto,
bomo videli, če bomo lahko našli primer,
Zagotovo je nekdo objavil to.
[Pause]
Jaz bom v nekaj sekund, če ne bomo videti.
Facebook asynch - OK.
Torej, to je številka, in če oni jo spremenili v zadnjem času
da Facebook dejansko priporoča, da uporabljate
naložiti svojo knjižnico in dejansko predlagala
da si dal to v Telo vaše strani.
Torej, Facebook vam svetuje ustvariti nekakšno neumnega DIV
da ima samo enolično identifikacijsko številko, kot je to, potem ima scenarij oznako
in vse te kompleksnosti v bistvu pa naslednja
in ne uporabljajte JQuery zato, ker ne želijo
da prevzame katero koli drugo odvisnosti,
Naj mi premakniti to več kot samo malo.
Torej, opazil, da imajo anonimni funkcija tu,
več o tem, v trenutku,
ki jih nato uporabite document.createElement,
oni so ustvarili DOM element, to je kot malloc tako rekoč
kjer je oznaka tipa scenarij, to je potem z navedbo
da asinhron atribut te oznake se dogaja
da bi bilo res, potem greš naprej in ugotoviti, kaj URL
Facebook je JavaScript mora biti
in to je samo fancy način
preverjanja smeli bilo HGP ali HDPS.
In potem na koncu, si opazili, kaj Facebook počne,
dobijo DOM vozlišče, ki ima ID Facebook korena
, ki je tisto, kar so povedali vam, da v stran
nato pa dodajte otroka tako učinek vse to
za neke vrste dinamično injicirati nov scenarij tag na vaši strani
kot otrok z DIV, ki ste je vstavljena tako, da preostanek
bremen strani srečno
in potem to kodo dejansko gets naložen asinhrono.
Torej, v bistvu po Dejstvo, in sem odložila omemba
anonimnega funkcije
kaj je to funky sintaksa nanaša na tukaj
ko sem imel ne samo funkcijo paren odpreti, zaprite paren
in potem zaviti oklepaji, Zato so odprte paren tukaj
in nato odprt blizu, blizu paren tam, kaj je to delaš?
>> [Neslišno], ki določata in nato izvršitve?
>> Točno, to je opredelitev Funkcija, ki je anonimna
temveč zgolj opredeljuje funkcijo,
Seveda ne izvede funkcijo, dokler ga imenujemo
z imenom, seveda to je anonimno funkcijo za
tako da ne morem reči po imenu, vendar lahko
v JavaScript izvršiti anonimni funkcija samo
s pomočjo vstavljanja celotno stvar v oklepaju, kot smo naredili
s tem paren in to paren tukaj in nato za pritrditev
na koncu funkcije odprte paren, v bližini paren,
Če ne želite, da se jih prenesti nobenih argumentov.
Vendar se zdi neumno,
kot zakaj ta dodatna skladenjska zapletenost
da večina ljudi ne zdi prepoznati, kaj je vrednost
ovijanja tistih tri vrstice kode
anonimno funkcijo na ta način.
Ja.
>> Da bi se izognili prepisovanju dragoceno v [neslišno].
>> Točno tako, da bi se izognili prepisovanje spremenljivko
v obstoječe strani, kajne?
Facebook je nekoliko presumptuously odločila,
gredo za uporabo spremenljivka E, je precej verjetno,
da lahko vi ali kdo uporablja Facebook gumb, kot
ali katerokoli drugo socialno vtič
V ima spremenljivko Nekje se imenuje E. Torej,
s pomočjo vstavljanja vse njihove kode v notranjosti
te anonimno funkcije, ki jih ima v bistvu svoj obseg
da ne tvegajo clobbering vse obstoječe spremenljivke.
Torej, tudi to je dejansko zelo pogosti paradigma,
še posebej pri pisanju Knjižnica koda
ali ko se sami ne želite nered vaše ime prostora
z drugimi spremenljivkami vas želijo vrednost živeti
in umrl, ko zaprete da je blok kode,
To je lepo tehnika v JavaScript.
Vse je v redu.
Torej, nato pa nazaj v tem primeru tu smo vse, kar smo naredili na koncu
s tem primer je samo počistil kodo.
Torej, to je še vedno dobil celoto kup stikal, cel kup
pogojev tukaj, ampak Opazili malo sintakse,
To dostopi DOM vozlišče z neponovljivo registrsko ID,
vesoljske sredstvo poglej zdaj potomec to vozlišče,
ga našli, če je tipa Vhod in nato še
Če še niste videli tega prej, morda veste
da je to samo pomeni najti je z vhodno oznako,
vhodni elementi, ki ima atribut imena z vrednostjo
e-pošte, nato pa pustite, mi pomahala z roko na nekatere
preostalega ni vse to spodbudno
ampak res samo jQuery sintaksa za iste operacije.
Vse je v redu.
Ampak kaj ni tako pomembno, Tukaj je stranska brskalnik stvari
ampak s tem, da smo imela čistejših in okolju prijaznejših načinov
dejansko izdelavo da koda dela.
Vse je v redu.
Vsa vprašanja?
[Neslišno Opomba]
OK. Zdaj zabaven del.
Torej, node.js Zakaj?
Koga briga?
Kaj pa ti veš danes o tem?
Node.js, zakaj?
Henry [domneva črkovanje].
[Neslišno Opomba]
Obnovljena baterije?
Kaj - to popolna cliff hanger
v drugi polovici leta danes.
Zakaj ne gremo in se 5 minutni odmor tukaj,
tam je pol sladkarije stroj tam, če bi
kot neke sladkarije brez dajanje četrtino prijavite