>> Okay.
Så JavaScript.
Næsten alle i dette rum sandsynligvis har en vis grad
af komfort med det om det var måde tilbage når i SC50
eller det har været personlig web projekter eller endog
hvis du gjorde lidt af det med denne sidste PHP basis-projektet,
men for det meste del, mange af jer,
selv hvis du har nogle komfort
med JavaScript måske Der er ikke taget
for givet, hvordan sprog fungerer, og hvad der går
på under hætten og hvad vi vil prøve
at gøre i dag er at skrælle tilbage nogle af de tekniske lag
af, hvad JavaScript er, hvordan det adskiller sig fra et sprog
som PHP, hvordan kan være bruges ikke kun klientsiden
men også server side og derefter fokusere meget specifikt
på denne ramme, meddelelse nr. JS som er hovedsagelig en køretid,
et program, som du kan udføre JavaScript-kode,
server side, og det bliver stadig mere populær form
af samme statur dette dage sandsynligvis Ruby og PHP
og Python og du vil se
at det har nogle ret kraftfulde funktioner i form af nogle
af det indbyggede sprog konstruktioner.
Men nogle første let ting bare for at minde dig
af hvordan dette sprog fungerer, og hvis du har svært ved at se nogen
af dette, bare råb ud, og vi vil justere.
Så en som i PHP er der ingen forestilling om en hovedfunktion,
du bare begynde at skrive kode
og du kan gå i fortolke det top til bund.
I forbindelse med en browser
eller i noget server side vi vil se nogle eksempler
i en bit.
Betingelser, syntaktisk svarende til PHP samt C,
C + + og nogle andre sprog så bare for at give dig en følelse
af hvordan vi kan strukturere den,
der er bare en kanonisk tilstand.
Boolske udtryk, nøjagtig samme syntaktisk som du har set
i de samme andre sprog, både for ORING
og til at afslutte ting sammen.
JavaScript har kontakter, ligesom PHP og andres do
og du er ikke begrænset, ligesom i C til integrale primitiver
ligesom chars og ints kan faktisk gøre andre typer af værdier.
Sløjfer. Så det er nøjagtigt det samme
og sandsynligvis en halv snes sprog, mens loops, gøre, mens sløjfer
og så dette trick her.
Så det er en slags kendt som hurtig tælling
og det er en meget smart måde af ligesom i PHP laver
for hver FU som bar kan du på samme måde,
i en JavaScript objekt, hvor objektet er navnet
af den variable her, siger, var jeg i objekt og på hver iteration
af denne sløjfe, i er kommer til at være en
af nøglerne fra objektet.
Så hvis du har et objekt for en studerende, og en elev har et ID
og et navn og et hus, iterativt vil jeg tage
af værdien af ​​id og navn og hus, og du kan derfor indeks
i objektet, som om det er et array ved hjælp af firkantede beslag
notation for at få værdien af nøgle-ID eller navn
eller hus og så videre.
Og i modsætning til fælles antagelse, JavaScript-objekter,
egenskaber er ikke nødvendigvis garanteret at være
i samme rækkefølge, er det også sand til PHP så ikke antage
at tingene vil forblive i samme rækkefølge
at du sætter dem nøgle værdi par til et objekt.
Hvad med arrays?
Der er et par måder at skrive det syntaktisk
men det er sandsynligvis den mest almindeligt nu bare bruge firkantet
beslag notation.
Så det er en variabel opkald til numre, der indeholder matrix
seks heltal der, her er en simpel snor
og læg mærke til, hvad der er fraværende fra disse eksempler
Hvad er JavaScript tilsyneladende mangler.
Ja. Så der er ingen forestilling af maskinskrivning, bestemt ikke
i denne sammenhæng her, men dette er faktisk en streng.
Så JavaScript har typer og det var faktisk et array
som selv er en type og hvert af de elementer,
i denne opstilling var af typen nummer som JavaScript kalder dem.
Så det er en løst maskinskrevet sprog, og vi vil se
at JavaScript som PHP har en identitet operatør
og andre mekanismer for faktisk at kontrollere, hvad avanceret
nogle variabel er både for fejlkontrol
og til andre anvendelser.
Og her er en prøve objekt indeholder blot en id og et navn.
Og nu se, at vi er hjælp krøllet parentes notation
indrykning og det hvide rum er en slags meningsløs
og det erklærer en variabel, hvis navn er Rob
og hvis ID er 1, og den dato type er her vores nummer
og snor hhv.
Og så er det noget lidt anderledes
hvis du nogensinde har gjort noget med Ajax i disse dage?
Du har sikkert brugt en genstand som denne
men hvad er værd at bemærke her?
Hvad er syntaktisk nogensinde så forskellige, blot et par
af ting mellem dette eksempel der er ganske vist mindre
og dette større eksempel.
Så først i lægmands sigt, hvad er det?
Hvad er den type af personale ville du sige?
OK, det er et array, Det er en bred vifte af hvad?
>> Objects.
>> OK, det er en vifte af objekter.
Og nu, fokusere på blot én - helst af disse objekter,
hvad der er anderledes mellem dette og det her?
>> Tasterne er strenge.
>> Ja. Så nøgler er strenge,
og tasterne er faktisk strenge i begge tilfælde
og det er en slags Idiotisk
efter min mening historisk design beslutning, når du bruger
JSON, JavaScript Object Notation,
der i det væsentlige en transport format
for at sende data typisk over netværket
mellem klient og server, du nødt til at huske
at det ikke er faktisk gyldigt JSON og dette er et
af disse FYIs medmindre du nogensinde bang dit hoved mod væggen
i flere minutter uden god grund er det ikke gyldig JSON
fordi tasterne faktisk ikke citeret.
JSON idiotisk kræver, at nøglerne ikke kun blive citeret,
men at de dobbelt blive citeret, enkelte anførselstegn er ikke nok.
Så dum lille ting og mere af en sjov kendsgerning
for nutidens formål, men dette også ville være gyldigt JavaScript
det er bare ikke - det omvendte er ikke tilfældet.
Ok.
Så vil vi se masser mere af det.
Ok.
Så det er JavaScript syntaktisk sandsynligvis temmelig
kender nogen af ​​jer, der har aldrig brugt JavaScript før
det er ikke et stort spring fra PHP eller de fleste enhver proceduremæssig sprog
som du måske har brugt.
Så i dag vil vi fokusere på de interessante aspekter
af JavaScript særligt i forbindelse med ikke JS
men ikke udelukkende, fordi indtil nu har du sikkert,
hvis du har brugt Javascript, brugte det inde i en browser.
Så ingen JS er et miljø derefter i en lille smule går
at tillade os at få adgang til JavaScript-kode klient -
server side, men først, lad os tage et kig
på noget, der er en lidt mere klientsiden.
Så jeg har gået i, og det er forbundet på kurser hjemmeside,
hvis du ønsker at spille sammen, der er to underbiblioteker
i dagens Zip af kaldet source nitter lynlås på hjemmesiden
og disse er blot en par eksempler Reminiscing
ting, du måske har set før, og jeg slags byggede dem
op fra enkleste til lidt mere kompliceret at drille
nogle af de funktioner, af JavaScript.
Så lad os gå videre og tage et kig for eksempel på dette.
Så desværre blink tag var dræbt flere år siden
som den måde har fået smukkere og smukkere
og blink tag var bogstaveligt åbneparentes blinke tæt beslag
og den slags ikke længere er iblandt os.
Men vi kan stadig genopstå denne idé om et tag ved bare lidt
at tænke over det logisk, hvordan kan du gå
om at gøre noget lignende dette blinke intuitivt?
Forudsat, at du kender lidt bit af JavaScript og eller CSS
på dette punkt, er det OK, hvis du ikke gør.
>> Indstil en tid ud og skjule det så efter jeg mærke det
ud og vise det igen.
>> Ja, perfekt.
Dette er en slags programmering 101,
hvordan ville du opnå en visuel effekt som dette?
Nå, du eller anden måde nødt til at vise noget
og derefter skjule noget, show noget, skjule noget
og som Jonathan foreslår bruge en form for timeout,
en slags tidsplan, du kan gøre dette gentagne gange, uden at behøve
at anvende en løkke eller noget lignende.
Så lad mig gå ind i blink-0.html
og lad mig skrumpe skrifttypen en lille smule
således at flere af dette passer.
Og lad os tage et kig på, hvad der foregår her.
Så først og fremmest, bemærke, at kroppen
på denne side er super enkel, indersiden af ​​kroppen
på siden er bare en div.
Jeg har vilkårligt givet et ID for hilsen
og at kunne være noget så længe det er unikt
og så har jeg bare have nogle simpel tekst, hej verden.
Så hvis jeg nu rulle op, bemærke nogle fluffy styling.
Så siger jeg, skarpe hilsen, der som bekendt
i CSS betyder bare entydigt identificere det pågældende element
med en idé om hilsen,
skriftstørrelse går vilkårligt være dette, margin og tekst align.
Så uinteressant æstetiske detaljer
til ca centrere teksten.
Så den interessante del er i script-tag op her
som jeg tilfældigvis at sætte inde af hovedet på siden.
Så we'll - du kan gøre dette på en række forskellige måder
og vi vil se et par gentagelser af samme program
men lad os starte fra toppen.
Så har jeg erklæret en funktion kaldet blink
og det bruger denne tilsyneladende indbygget DOM metode, der kaldes
getElementById som måske en af ​​de mere kraftfulde metoder
at du får ud af kassen med JavaScript søger
"Hilsen" ikke har til være dobbelte anførselstegn som var det
i HTML er enten er fint, så længe
som du er stilmæssigt konsekvent disse dage jeg tør sige
mange mennesker bruger Java, enkelte citater i JavaScript,
anførselstegn i HTML, men det er faktisk ligegyldigt
så længe du er konsekvent.
Så her, hvis du ikke kender, du kan faktisk få adgang til
med JavaScript CSS ejendomme på elementer.
Så mærke til, at jeg har erklæret en variabel kaldet div
og gemt inde af denne variabel,
en henvisning til, hvad at DOM element er.
Så hvis du tænker tilbage på CS50 eller enhver klasse, som du troede
om træstrukturer og DOM, Document Object Model,
dette er blot en reference til et knudepunkt i træet,
der repræsenterer denne side
og hvis div.style.visibility Ejendommen lig, lig, lig med,
skjult, så jeg bare ønsker en toggle det
som Jonathan foreslog ellers vil jeg
for at slå det over til skjult.
Nu, som i siden, hvorfor triple lig der?
Eller hvad er det kontra dobbelt ligemænd?
>> Streng tilsvarende.
>> Undskyld.
>> Streng tilsvarende.
Så det er identiteten operatører
hvor ved du tjekker ikke kun værdien af ​​variablen
som en ligeværdig, lige fornuft men også typen af ​​det.
Så selvom vi ikke har specificeret dette langt data
typer for eventuelle variabler i denne eller nogen af ​​de dias,
er der en type forbundet med denne streng skjult
med denne værdi, skjulte og det er selvfølgelig streng.
Så i dette tilfælde er det er faktisk ligegyldigt
fordi der er ingen måde, at vi kommer til at sammenblande en streng
"skjult" med en anden værdi
men det er ofte en god vane Jeg vil sige at få
ind ved hjælp af den lige, lige,
lighedstegnet er generelt en god ting.
Det vil gøre din kode mere robust både i PHP, men
og i JavaScript fordi du vil køre
i lejlighedsvis hjørne sager hvor værdien kan være nul
at du tjekker efter og nul kan blandes sammen med falsk
eller kunne ikke, og som i PHP,
Javascript også kan have flere falskt værdier, hvor ved nul
og falske og ugyldige og udefineret kan alle løse implicit
til falsk.
Men hvis du virkelig ønsker at kontrollere, om særlig værdi
som nul, antallet eller falsk Boolean så har du
at bruge denne identitet operatør.
Så kunne det ske at få i alligevel selv om her,
det er lidt meningsløst fordi vi ved, at vi tjekker
for en streng værdi, og det er ikke kommer til at være noget andet.
Så her er det magiske så, hvis jeg scroll ned til denne linje her,
tilsyneladende, bygget i vinduet objekt
og dette er en funktion af en browser kan du få adgang til
til denne super globale objekt kaldet Window,
inde i det er nogle funktioner,
hvis stykke som er indstillet interval
og det tager tilsyneladende hvad slags argumenter?
Ja.
>> Funktion opkald og en tid.
>> Godt. Så en funktion ringe og en tid
og så især en referere til en funktion,
en pointer til en funktion i en vis forstand
og det er den funktion der kommer
at få henrettet hvert nummer af millisekunder og i dette tilfælde,
det er hver 500 millisekunder.
Så det er en måde at fremkalde effektivt og uendelig løkke
uden brug iteration men i stedet for at fortælle JavaScript
til indersiden motor af browseren
at gøre dette hver 500 millisekunder eller er tæt på
til 500 millisekunder, som det kan,
det viser sig, at under hætten,
der er, hvad der kaldes en begivenhed loop og vi vil vende tilbage til dette
i forbindelse med knudepunktet JS der bare konstant slags
for at sidde der, spinning, venter på arbejde, der skal gøres
og så snart den er klar over,
500 millisekunder er gået blink vil blive kaldt igen
og igen og igen er sammen af ​​noget andet arbejde
der skal få gjort.
Så hvad kan vi forbedre her?
Nå, lad mig åbne up blink-1.html
og demonstrere blink-1.html
som æstetisk perfekt identiske.
Så hvad kan vi forbedre her?
Nå, bemærke, at det var slags ubrugelig
at definere en funktion kaldet Blink fordi hvor mange
i hvor mange steder gjorde jeg kalder funktionen blink?
>> Bare én gang.
>> Så en.
Så det var ikke dårligt, i Faktisk er det sandsynligvis temmelig
ligetil.
Jeg definerede en funktion blink, jeg kalde en funktion blink ved
af denne parameter men teknisk,
der var ikke grund til det og en fælles paradigme
i JavaScript er rent faktisk gøre brug af lambda-funktioner
som du måske husker fra 51 eller anonyme funktioner
hvor, hvis du ikke har brug et navn for en funktion,
hvis du kun kalder det sikkert på ét sted,
hvorfor gider roder i din kode, roder programmører sind
og dit navn plads virkelig med symboler
at du ikke rigtig behøver at bekymre sig om.
Og så, i denne version her,
bemærke, at jeg ringer window.SetInterval direkte
på toppen af ​​min script-tag så jeg passerer
i en anonym funktion der ikke tager nogen argumenter
og det er perfekt fint og så kroppen
af denne funktion fremgår det er identisk med, hvad den var før
og den eneste syntaktiske Forskellen nu er,
hernede ved siden af ​​500.
Jeg lukker kroppen af funktionen
og så siger jeg udføre den forrige kode,
hver 500 millisekunder.
Så meget marginal ændring
men et skridt i retning af, hvad der er sandsynligvis en mere elegant
gennemførelsen af ​​denne.
Så lad os tage dette ene skridt videre, hvis jeg nu gå
i blink to, vil du se et fælles bibliotek,
virkning som kommer
at være fuldstændig ligegyldig æstetisk, men hvis vi går
i version to her, varsel at der på toppen af ​​hovedet,
Jeg har inkluderet nyeste version af JQuery.
Og så hernede, Jeg har lige renset
op koden en lille smule, er det ikke kommer til at være en sjov verden
at fortsætte med at bruge native DOM-funktioner
og sortering af rå JavaScript.
I virkeligheden, JQuery, som du kan kende er blevet så populær
at de fleste mennesker bare konflikt jQuery med JavaScript
men egentlig bare en aftensmad nyttige bibliotek skrevet
af en fyr ved navn John Resig og da andre
der har bare gør en masse kedelige ting
i JavaScript lettere og mere kortfattet.
Så i dette tilfælde her, hvad der foregår?
Så jeg har denne udseende et dollartegn, mere om det
på bare et øjeblik, så dette er en CSS vælgeren.
Så det er meget ens i ånd til, hvad jeg gjorde før,
men denne gang er jeg bogstaveligt bruge hash-tag
at angive en unik identifikator kaldet hilsen
og derefter tilsyneladende . Css er en metode bygget
i til uanset objekt er, at jeg lige har oprettet
og jeg tjekker værdien synliggørelse nøgle.
Og hvis værdien af ​​denne nøgle lig, lig, lig, skjult,
så jeg har tænkt mig at skifte det og Jeg har tænkt mig at skifte det denne gang
ved hjælp af den samme metode som tilsyneladende er overbelastet
i den forstand, at den har to forskellige signaturer,
én med et argument og et med to argumenter,
hvoraf den anden er setter,
førstnævnte som er en getter så at sige.
Og hvis nysgerrige og hvis du gerne faktisk aldrig set på dette,
hvis vi går til jquery.css forhåbentlig toppen hit er faktisk dette
og du kan se en mere formel forklaring
at vi bruger netop dette, . Css med ejendom navn
og derefter setter er dot CSS
med en ejendom navn og en værdi.
Så marginalt renere, men bemærke den slags mønster her
med hver iteration af denne kode,
vi slags for at gøre det strammere og strammere og strammere
og der siger bedre design
da vi bruger nogen andens kode, der er elimineret
nogle af kompleksitet.
Så lad os nu gøre dette endnu enklere.
Og i virkeligheden, hvis jeg fjerne alle citater, du vil se bare alle de
kommentere du vil se hvordan simpelt det har fået.
Den ene forskel her er naturligvis
at jeg bruger en toggle metode, der ligger også bygget
på jQuery og det er kun
fordi en anden skrev koden
der faktisk skifter synligheden indstilling
noget DOM element at du sender den.
Så bedre og bedre.
Og ja, denne er et mønster,
selv om dette er en aftensmad simpelt eksempel og sortere
dumme nettoeffekt som er en blinkende stykke tekst,
Det er den slags tanker proces, som du bør tænke -
tænke ikke nødvendigvis den allerførste
passiv skrive noget for det kommende projekt
men helt sikkert som du gentage med din rådgiver eller med mig
og dit team møder eller du bare gennemgå din holdkammerater kode
om stramning tingene op, right?
Efter alt, er de mindre -
en færre linjer kode du i sidste ende har
i teorien jo færre generer dig er tilbøjelige til at være indbydende
fordi der er simpelthen mindre kode at rod op med.
Ok.
Så et par grillbarer.
Lambda-funktioner, anonyme funktioner,
hvoraf mange du har set før
og så også lige at stramme tingene op med et bibliotek
ligesom jQuery i dette særlige tilfælde.
Ok.
Eventuelle spørgsmål?
Lad os gøre en anden klientsiden aspekt her,
i form, nul vi har denne Nettoeffekten.
Super simpel form og tilsyneladende hvis jeg forsøger at klikke på tilmeld dig her,
oprindeligt det fortæller mig, at du er registreret, godt, ikke rigtig.
Tja, hvorfor er det?
Nå, her er formular-0.html meget lidt kode,
nej JavaScript overhovedet, og det er helt en falsk slags
af form, fordi handlingen værdien er registered.html
hvilket betyder, uanset hvad Jeg skriver i denne formular,
hvor går det til blive sendt på serveren?
Ja. Så for at registered.html som helt klart er en HTML-fil
der er derfor statisk fil, der ikke har nogen mulighed
tage brugerinput antager der er ingen JavaScript-kode
indlejret i det, der er ser i webadressen
så det er helt en NOOP og at intet kommer til at ske
med en indsendt data, men du kan se strukturen
af en forholdsvis simpel HTML5 formular
, der har et par kodeord, et par input typer.
Så lad os nu faktisk tilføje nogle fejlkontrol
og se, hvordan vi kan forbedre dette.
Så her er en slags dårlig mands måde at gennemføre dette
og det er en slags grim luns af kode.
Så lad os først scroll ned til bunden
at se, hvad der er det samme og hvad der er anderledes.
Det eneste anderledes nu mellem dette
og den tidligere version er at jeg har givet formularen og ID
af "registrering" kunne har været noget, jeg vil
men det menes at være entydigt identificerbare selv det er ikke
strengt nødvendigt, fordi hvis en side kun har én form sikkert jeg
kunne finde det med en af jQuery er selector metoder.
Men på denne måde bare gør det mere deterministisk.
Så hvis jeg går op nu til mit script tag, mærke til følgende,
window.onload ligemænd en anonym funktion.
Så hvad er det gør?
Så kan du huske, at i client-side programmering -
JavaScript snarere HTML-sider have forskellige arrangementer forbundet
med elementer, klikke og indsendelse og fokusere
og sløring og andre sådanne hændelser, der kan ske
som bruger typisk interagerer med siden,
window.onload gør hvad den siger.
På vinduerne hele belastning
så når alle billeder har været downloades når alle filer er
blevet hentet og en gang siden er indlæst,
gøre følgende kode, og varsel, hvis jeg skifter til bunden
denne metode bemærke, at der ikke er nogen parentes
efter klammeparentes hvilket vil sige
at jeg ikke udfører denne funktion op her nu,
browseren vil udføre det for mig, når det er fastslået
at siden er indlæst.
Så lad os se, hvad vi har gjort,
document.getElementById registrering
så bare giver mig en henvisning til knudepunktet
i træet, der er af har et id for registrering.
Og nu, jeg har tænkt mig at registrere en anden hændelseshandler
ved at gøre form.onsubmit får denne anonyme funktion
hvilket betyder, at følgende koden skal udføre, når
at formularen er sendt.
Nu er det meste af dette er blot slags kedelige logik.
Så hvis værdi email felt i formularen er
"Ingenting", så skal du give din e-mailadresse,
du råber på brugeren en advare og derefter vende tilbage falsk.
Og så har jeg en bundt af andre kontroller,
kontrollen af ​​password,
kontrol, hvis passwords er de samme,
kontrollen, hvis aftalen er afkrydset eller ej
og jeg bare råbe på brugeren, hvis nogen
af disse prøver faktisk mislykkes.
Og ja, her er et eksempel selv selvom det er lidt forceret
her det faktum, at jeg bruger lig, lig, lig med,
betyder, at brugeren kan ikke forsøge at narre mig
ved at skrive i hvilken værdi.
Eller rettere jeg virkelig kontrol for tilstedeværelsen
af den tomme streng brugeren har ikke skrevet noget endnu.
Hvis brugeren har indtastet i bogstaveligt nul,
"Nul" potentielt kunne være forveksles med den tomme streng.
Og jeg siger det er lidt af meningsløs her
fordi selvfølgelig endog nul er ikke en e-mailadresse.
Men hvis dette var en mere generisk felt som et tekstfelt
eller et navn eller en beskrivelse eller noget du vil værdi for
og det er ikke nødvendigvis syntaktisk har
at være en e-mailadresse, brugeren kunne skrive noget lignende nul
og igen hjørne sag, men det er hvorfor der typisk kontrol typer er
en nyttig ting.
Du er virkelig kontrol for brugeren har indtastet noget
i dette område.
Så hvad sker der, hvis ingen af disse forsøg mislykkes, ja,
returnere sandt inde af en hændelseshandler
ligesom onSubmit betyder bare lade den oprindelige adfærd faktisk
udbrede og derfor formular vil blive fremlagt.
Og det er derfor, da jeg endelig klikkede på Send, før jeg fik
igennem til register.html og hvis jeg gør det nu, varsel,
Jeg bliver råbt på, hvis jeg ikke give en e-mail-adresse
og jeg kan skrive i malan@harvard.edu,
Crimson [fonetisk] Crimson, markere feltet,
og nu registrere og det fortæller mig, igen,
du er registreret eller ikke rigtig.
Ok.
Så lad os rydde dette op bare en lille smule og derefter overgang
til den nye nyere server side ting.
Så hvis jeg går ind i formular-2.html, bemærke et par ting.
Så en, jeg bragte jQuery tilbage i mix
så der igen er denne dollartegn
og nu jeg bruger nogle jQuery metoder.
Så først, hvad handler det om dollar tegn, der er
så specielt her?
Hvad er dollartegn snøret gennem det meste nogen jQuery kode?
Ja.
[Lydløs Bemærkning]
OK. Så dollartegn funktion går gennem DOM søger
efter noget med dette især CSS vælgeren.
Så sandt, men næsten for præcis.
Det er hvad der sker når du passerer i en streng
som i dette tilfælde, men du behøver ikke altid nødt til at passere i en streng.
Faktisk tilfælde bemærkes, at den meget første linje her er dette ikke er en
CSS selector, jeg passerer i en Lambda funktion.
Så mere generelt - så godt svar, men også præcis.
Mere generelt, hvad er dollar tegn repræsenterer?
>> Just jQuery.
>> Ja. Så bare jQuery eller er det bare en funktion
at nogle fyr år siden skrev og andre mennesker har
siden forbedret, der bogstaveligt talt som standard kaldes -
Ups, hedder jQuery.
Det bare - det viser ud i modsætning til en masse
sprog dollartegn er en perfekt gyldigt symbol for at bruge
i en variabel navn hvorimod
i PHP dollartegn har naturligvis særlig betydning
men i JavaScript ligesom i nogle sprog, dollartegn
og understregning og andre sådanne specialtegn helt legit
at bruge i dit eget symbol navne til variabler.
Så nogen netop besluttet det, ved du hvad?
Det kommer til at være temmelig kedelig
at gøre hele verden skriv jQuery hele tiden,
lad mig slags plante et aktiepost i jorden og sige,
"Dette bibliotek vil bruge dollartegn. "
Og i virkeligheden er denne ikke øge risikoen
at en anden formasteligt kommer til at bruge dollartegn
for hans eller hendes bibliotek, men der er måder at slags forsikre
at når du bruger dollaren underskrive det kort til jQuery
fordi du kan teste om det er allerede blevet tildelt
til noget andet væsentligt.
Ok.
Så det er alt, er, er der ingen magi.
Det er bare en sexet søger stykke syntaks, der er rart
og hurtig og nem at skrive.
Så hvad sker der, når du skriv dollar sign åbne paren
og derefter en anonym funktion.
Nå, viser sig, at dette er faktisk stenografi notation
for dokument prik klar åben parentes.
Så bemærket som Cynthia tidligere vi allerede har fundet en
hjørne sagen.
Hvis du bare passere i lambda-funktion,
virkningen af ​​dollar tegn er lidt anderledes.
Faktisk er hvad der virkelig sker er, at det svarer til det,
passerer i en reference til den globale dokument objekt
der er global ligesom vinduet objektet er
det giver dig nogle speciel funktionalitet
der påvirker hele siden eller browser, og det viser
ud af, at dokumentet, når du wrap det med jQuery,
jQuery væsentlige indser, oh, dette er en reference
til denne særlige dokument objekt,
lad mig nu registrere en hændelseshandler kaldet klar
som ikke er nativt JavaScript eller DOM relateret.
Ready er et jQuery ting, der siger
når siden er indlæst alle de HTML-elementer
men ikke nødvendigvis indlæst, alle CSS og billeder
og JavaScript-filer og Flash-filer og lignende.
Så det er et skridt, før på belastningen derefter gå videre
og udføre følgende.
Og opadrettede at bruge på klar betyder, at du kan, du ved,
at alle de elementer, i dit DOM,
alle de entydigt identificeret ting med id'er, de findes selv
hvis den side, dens indhold er stadig læsning og læsning
og du har nogle brudte ikoner til et øjeblik
eller hvid side i baggrunden.
Ja.
>> Hvad ville der ske hvis [uhørligt]?
>> Perfekt eksempel et perfekt spørgsmål.
Så lad os se om vi kan simulere dette lige nu.
Så lad mig gå videre og slette denne to linjer op her og derefter
uden at bekymre sig for at løse indrykning, lad mig gå videre
og slette denne hernede - Ups, denne ene hernede.
Og nu, lad mig gå over til side, gå til formular-2.html og type
Tilmeld, intet syntes at ske, lad os sige, hvorfor var det,
lad os gå videre og åbne op Chromes inspektør,
åbne konsollen bare for at se hvis der sker noget her, nu,
registrere, stadig intet.
Så koden er syntaktisk fint
så jeg kan ikke se nogen rød fejlmeddelelser,
men hvad klart sker ikke?
Ingen af ​​min kode er rigtig, det fungerer ikke, så ingen
mine koder synes at være udførelse, så hvorfor er dette?
Nå, JavaScript og browsere mere generelt udføre
indholdet af en webside, top til bund, venstre til højre.
Og problemet er at fordi toppen
af denne side er HTML derefter hovedet så script derefter en anden script,
dette vil blive henrettet før hvad er endda klar,
eller endnu eksisterer i træet repræsentation af siden.
Selve formularen, ikke engang krop findes i dette punkt.
Så jQuery er smart nok med det fejlkontrol
at hvis der er noget element med det unikke id for registrering,
det kommer ikke til at springe ud på dig
og bare udløse nogle konsol fejl og bryde hele siden,
det kommer til at ignorere en dig, men grunden til, at ingen
Denne kode nogensinde udfører er
fordi når du har registreret denne indsende handleren,
der var ingen element at fastgøre den til.
Så det er en slags no op der.
Så ved at angive stedet, vente, indtil alderen er indlæst
hvis vi gjorde det window.onload ting, som er en slags
af den gamle skole måde at gøre det eller sexet jQuery måde
som dette, kan vi fortælle det vente, indtil alle
af disse HTML-tags har blevet parset så selv
hvis billederne ikke har indlæst på mindst denne node er i træet,
derefter JQuery kan sikre at alt er der.
Ja.
[Lydløs Bemærkning]
Ja, godt, ja absolut.
Så den anden løsning på dette, hvis du ikke bruge denne
eller ikke huske at dette eksisterede,
kunne du absolut flytte alt dette til bunden
af websiden, indersiden af krop stadig, men under den formular
Og det ville også løse dette problem.
Det er bare typisk betragtes som dårlig praksis.
Det er en lidt rodet og sjusket specielt
hvis du holder jamming alt til bunden af ​​siden,
især når jeg holder tingene enkle ved at sætte alle
af min kode inde af HTML-siden
når selvfølgelig kan du sikkert få det til en vane
af factoring det ud til en separat fil
på hvilket tidspunkt det er bare dejligt
at centralisere filer i hovedet.
Bortset fra at der er en pris, du betaler
ved at sætte JavaScript anden aktiver som CSS-filer
i hovedet på siden, hvad er en risiko for, at du kører?
>> Langsommere side belastning.
>> Langsommere side lastning, hvorfor?
>> Fordi vi prøver at indlæse alle biblioteker
før [uhørligt].
>> Netop fordi browsere læse koden fra top til bund,
venstre til højre, hvis Google analytics er langsomme
eller jQuery CDN er langsom eller Facebook API er langsom
og filen bare hænger potentielt afhængigt
om, hvordan du har lagt denne fil, hel side kan synes at hænge.
Og hvis du ser denne meget ærligt
på hjemmesider de har en masse af lav kvalitet reklamer
på dem, vi er bare en langsom eller nedskudte hjemmeside kunne hænge en side
for nogle ubestemt antallet af sekunder
indtil endelig browser forhåbentlig gange ud på at
, og viser derefter resten af ​​siden.
Så hvis du nogensinde har brugt som Facebook, ligesom knap,
i din webside, så lad mig se om jeg kan finde denne
uden at skulle logge ind her.
Så hvis du går til Facebook er ligesom knap
og klik på en get-kode, for pokker,
lad os se om vi kan finde eksempel
sikkert nogen havde indsendt dette.
[Pause]
Jeg vil give op i et par sekunder, hvis vi ikke ser dette.
Facebook synkronisering lige - OK.
Så dette er den kode, og medmindre de har ændret det for nylig
at Facebook faktisk anbefaler, at du bruger
at indlæse deres bibliotek og faktisk foreslå
at du sætte dette i kroppen af ​​din side.
Så Facebook rådgiver dig skabe en slags dum DIV
der bare har unikke id ligesom dette, så har et script-tag
og alt dette kompleksitet hovedsagelig gør følgende
og de bruger ikke nogen JQuery fordi de ikke ønsker
at antage enhver anden afhængigheder,
lad mig flytte dette i løbet af bare en smule.
Så bemærke, at de har en anonym funktion her,
mere om det i bare et øjeblik,
de så bruge document.createElement,
de er ved at oprette en DOM element, det er ligesom malloc så at sige
hvor mærket er af typen script, er det derefter angive
at async attribut af det mærke går
til at være sandt, så du går videre og regne ud, hvad URL
af Facebooks JavaScript bør være
og dette er blot den fancy måde
af kontrol bør det være HGP eller HDPS.
Og så til sidst, du mærke til, hvad Facebook gør,
de får DOM node, har et id på Facebook rod
hvilket er, hvad de fortalte dig til at sætte ind på siden
og så tilføje barnet så effekten af ​​alt dette er
at slags dynamisk injicere en ny script-tag på din side
som et barn af DIV, som du indsættes der så resten
af siden indlæses lykkeligt
og så denne kode faktisk bliver indlæst asynkront.
Så det væsentlige efter faktum og jeg udskudt omtale
på den anonyme funktion,
hvad er det funky syntaks refererer til her
når jeg har ikke kun fungere åbne paren, tæt paren
og derefter krøllede parenteser, hvorfor de åbne paren her
og derefter åbne luk, Hovedproduktet der, hvad er det at gøre?
>> [Lydløs] definerer og derefter udfører?
>> Præcis, det er at definere en funktion, som er anonym
men blot at definere en funktion,
selvfølgelig ikke udfører en funktion, indtil du kalder det
ved navn, men det er naturligvis er en anonym funktion
så du kan ikke kalde det ved navn, men du kan
i JavaScript udføre en anonym funktion bare
ved at indkapsle hele i parentes, som vi har gjort
dette parantes og dette Hovedproduktet her og derefter en fastsættelse
til slutningen af ​​funktionen åbne paren, tæt paren,
hvis du ikke ønsker at give det nogen argumenter.
Men dette synes slags dumme,
ligesom hvorfor denne ekstra syntaktiske kompleksitet
at de fleste mennesker ikke synes at erkende, hvad er værdien
af indpakning dem tre linjer kode
i en anonym funktion på denne måde.
Ja.
>> Vil undgå at overskrive en værdifuldt i [uhørligt].
>> Præcis, for at undgå overskriver en variabel
i den eksisterende side, right?
Facebook er noget formasteligt besluttet,
de kommer til at bruge variabel E, det er ganske sandsynligt,
at du eller nogen hjælp Facebook ligesom knap
eller hvad andre social plug
i har en variabel et sted kaldet E. Så
ved at indkapsle alle af deres kode inde
af denne anonyme funktion, de hovedsagelig har deres egen rækkevidde
der ikke risikerer clobbering eventuelle eksisterende variabler.
Så også dette er faktisk en meget almindelig paradigme
især når du skriver et bibliotek kode
eller når du selv ikke ønsker at rode dit navn plads
med andre variabler, du ønsker, at værdien at leve
og dø, når du afslutter at blok af kode,
dette er en nice teknik i JavaScript.
Ok.
Så derefter tilbage til dette eksempel her, har alle vi gjort i slutningen
med dette eksempel er lige ryddet op i koden.
Så er det stadig fået en hel bundt af switche, en hel flok
betingelser her, men bemærke en smule syntaks,
dette adgang til DOM-node med unikke id-registrering,
den plads midler ser nu for en efterkommer af denne node,
finde det, hvis det er af typen input og derefter selv
hvis du ikke har set dette før, kan du vide
at dette betyder bare finde det med input tag,
input elementer, der har en egenskab ved navn med en værdi
e-mail, og lad mig vinke min hånd på nogle
resten er ikke alt, stimulerende
men egentlig bare jQuery syntaks for de samme operationer.
Ok.
Men hvad er ikke så vigtigt her er browseren side stuff
men snarere det faktum, at vi havde renere og renere måder
af faktisk gør denne kode arbejde.
Ok.
Eventuelle spørgsmål?
[Lydløs Bemærkning]
OK. Nu er den sjove del.
Så node.js Hvorfor?
Hvem bekymrer sig?
Hvad ved du om det i dag?
Node.js, hvorfor?
Henry [antaget stavning].
[Lydløs Bemærkning]
Batteri reset?
Hvad - dette er en perfekt klippe bøjle
for den sidste halvdel af i dag.
Hvorfor vi ikke gå og tage en 5 minutters pause her,
der er en halv slik maskine der, hvis du vil
ligesom nogle slik uden sætte en fjerdedel i.