>> Greit.
Så, Javascript.
Nesten alle i dette rommet sannsynligvis har en viss grad
av komfort med det om det var helt tilbake når du er i SC50
eller det har vært personlig webprosjekter eller
hvis du gjorde litt av det med denne siste PHP basen prosjektet,
men for det meste del, mange av dere,
selv om du har litt trøst
med Java kanskje Det er ikke tatt
for gitt hvordan språket fungerer og hva som går
på under panseret og hva vi kommer til å prøve
å gjøre i dag er å skrelle tilbake noen av de tekniske lagene
av hva Javascript er, hvordan det skiller seg fra et språk
som PHP, hvordan kan være brukes ikke bare klientsiden
men også server side og deretter fokusere veldig spesielt
på dette rammeverket, merker ingen JS som er egentlig en kjøretid,
et program som du kan kjøre Javascript-kode,
server side og det blir stadig mer populær sort
av den samme vekst denne dager med sannsynligvis Ruby og PHP
og Python, og du vil se
at den har noen ganske kraftige funksjoner ved hjelp av noen
av den innebygde språk konstruksjoner.
Men først noe av den lette ting bare for å minne deg
av hvordan dette språket fungerer og hvis du har problemer med å se noen
av dette, bare rope ut, og vi vil justere.
Så, ett som i PHP er det ingen forestilling om en hovedfunksjon,
du bare begynne å skrive kode
og du kan derfor tolke det topp til bunn.
I sammenheng med en nettleser
eller i noe server side vi får se noen eksempler
i en bit.
Forhold, syntaktisk ekvivalent med PHP, så vel som C,
C + + og noen andre språk så bare for å gi deg en følelse
av hvordan vi kan strukturere det,
det er bare en kanonisk tilstand.
Boolske uttrykk, nøyaktig samme syntaktisk som du har sett
i de samme andre språk, både for ORING
og for å få slutt ting sammen.
Javascript har brytere, mye som PHP og andres gjøremål
og du er ikke begrenset, som i C til integrerte primitiver
som tegn og ints kan faktisk gjøre andre typer verdier.
Loops. Så, er dette nøyaktig den samme
og sannsynligvis et dusin språk, mens loops, gjøre mens sløyfer
og deretter dette trikset her.
Så, er denne typen kjent som rask telling
og det er en veldig smart måte av akkurat som i PHP gjør
for hver FU som bar du kan på samme måte,
i en Javascript-objekt, hvor objektet er navnet
av den variable her, sier, Var jeg i objektet, og på hver iterasjon
av denne sløyfen, er jeg kommer til å bli en
av nøklene fra dette objektet.
Så, hvis du har et objekt for en student, og en student har en ID
og et navn og et hus, iterativt vil jeg ta
av verdien av ID og navn og huset, og du kan derfor indeksen
inn objekt som om det er en matrise ved hjelp av hakeparentes
notasjon for å få verdien av nøkkelen ID eller navn
eller hus og så videre.
Og i motsetning til vanlig antagelse, objekter Javascript,
egenskaper er ikke nødvendigvis garantert å være
i samme rekkefølge, er dette også true til PHP, så ikke anta
at ting vil bli i samme rekkefølge
at du setter de nøkkelen verdi-par til et objekt.
Hva med arrays?
Det er et par måter å skrive det syntaktisk
men dette er trolig den mest vanlig nå bare ved hjelp av firkant
brakett notasjon.
Så, er dette en variabel til ringe numre som inneholder matrise
av seks heltall der, her er en enkel streng
og legge merke til hva som er fraværende fra disse eksempler
hva er Java tilsynelatende mangler.
Yeah. Så, det er ingen forestilling av å skrive, absolutt ikke
i denne sammenhengen her, men dette er faktisk en streng.
Så, har Java typer og det var faktisk en matrise
som selv er en type og hvert av elementene
ved at matrisen var av typen antall som Java kaller dem.
Så, det er en løst skrevet språk og vi får se
at Java som PHP har en identitet operatør
og andre mekanismer for faktisk sjekke hva type
av noen variable er både for feilsjekking
og for andre programmer.
Og her er et eksempel objekt inneholder bare en ID og et navn.
Og nå, merker at vi er bruker krøllete brakett notasjon,
innrykket og den hvite plass er liksom meningsløst
og dette erklærer en variabelen med navnet Rob
og hvis ID er en og dato typen er her vår nummer
og streng hhv.
Og så er dette noe litt annerledes
hvis du noen gang har gjort noe med Ajax i disse dager?
Du har sannsynligvis brukt et objekt som dette
men hva som er verdt å merke seg her?
Hva er syntaktisk noensinne så forskjellig, bare et par
ting mellom dette eksemplet som er riktignok mindre
og dette større eksempel.
Så, først i lekmann sikt, hva er dette?
Det er typen ansatte ville du si?
OK, det er en matrise, det er en rekke av hva?
>> Objects.
>> OK, det er en rekke objekter.
Og nå, fokusere på bare ett - hvilken som helst av disse gjenstandene,
hva er annerledes mellom denne og dette?
>> Tastene er strenger.
>> Ja. Så, den nøkler er strenger,
og tastene er faktisk strenger i begge tilfeller
og dette er liksom en idiotisk
etter min mening historisk design avgjørelse når du bruker
JSON, Java Object Notation,
som i hovedsak er en transport format
for sending av data vanligvis over nettverket
mellom klient og server, du trenger å huske
at dette ikke faktisk gyldig JSON og dette er en
av disse FYIs mindre du noensinne bang hodet mot veggen
i flere minutter for ingen god Derfor er det ikke gyldig JSON
fordi tastene er faktisk ikke sitert.
JSON idiotisk krever at nøklene ikke bare bli sitert,
men at de bli dobbelt sitert, apostrof ikke nok.
Så, dum liten ting og mer av en fun fact
for dagens formål, men dette også ville være gyldig Java
det er bare ikke - det converse er ikke sant.
OK.
Så vil vi se masse mer av det.
OK.
Så, det er Java syntaktisk sannsynligvis ganske
kjent, noen av dere som har aldri brukt Java før
det er ikke et stort sprang fra PHP eller de fleste noen saksbehandlings språk
at du kan ha brukt.
Så, i dag vil vi fokusere på de interessante aspektene
av Java spesielt i sammenheng med ingen JS
, men ikke utelukkende på grunn frem til nå har du sikkert,
hvis du brukte Javascript, brukte den inne i en nettleser.
Så, er ingen JS et miljø deretter i litt kommer
å tillate oss å få tilgang til Javascript-kode klient -
server side, men først, la oss ta en titt
på noe som er en litt mer klientsiden.
Så, jeg har gått i, og dette er koblet på kurs nettside,
Hvis du ønsker å spille sammen, det er to underkataloger
i dagens Zip av kalt kilde studs glidelås på nettsiden
og dette er bare en noen eksempler reminiscing
av ting du kanskje har sett før og jeg liksom bygget dem
opp fra enkleste til litt mer komplisert å tease
ut noen av funksjonene av Javascript.
Så, la oss gå videre og ta en ser for eksempel på dette.
Så, dessverre blinking lappen var drept av flere år siden
som veien har fått penere og penere
og blinking tag var bokstavelig talt åpen brakett blinke tett brakett
og det liksom ingen lenger med oss.
Men, kan vi likevel gjenopplive denne ideen om en tag av bare slags
av å tenke på det logisk, hvordan du går
om å gjøre noe sånt dette blinke intuitivt?
Forutsatt at du vet litt bit av Javascript og eller CSS
på dette punktet, er det OK hvis du ikke gjør det.
>> Sett en tid ut og skjule det da etter at jeg vil merke det
ut og vise det igjen.
>> Ja, perfekt.
Dette er liksom programmering 101,
hvordan ville du oppnå en visuelle effekten som dette?
Vel, du liksom må vise noe
og deretter skjule noe, vis noe, skjule noe
og som Jonathan foreslår ved hjelp av noen form for tiden ut,
en slags timeplan du kan gjøre dette gjentatte ganger uten
å bruke en sløyfe eller noe sånt.
Så, la meg gå inn i blink-0.html
og la meg krympe skriften litt
slik at mer av dette passer.
Og la oss ta en titt på hva som skjer her.
Så, først av alt, merker at kroppen
på denne siden er super enkel, på innsiden av legemet
på siden er bare en div.
Jeg har vilkårlig gitt en ID hilsen
og som kan være noe så lenge det er unikt
og da jeg bare har noen enkel tekst, hello world.
Så, hvis jeg blar nå opp, merke til noen fluffy styling.
Så sier jeg, skarp hilsen, som du vet
i CSS betyr bare unikt identifisere element
med en idé for hilsen,
skriftstørrelse kommer vilkårlig være dette, margin og tekst over hverandre.
Så, uinteressant estetiske detaljer
til omtrent sentrere teksten.
Så, er den interessante delen i skriptmerket opp her
som jeg tilfeldigvis satt inne av hodet på siden.
Så, Vi finner oss ikke - du kan gjøre dette på en rekke måter
og vi får se noen gjentakelser av denne samme program
men la oss starte fra toppen.
Så, jeg har erklært en Funksjonen kalles blink
og tilsynelatende den bruker dette innebygde DOM metode som kalles
getElementById som er kanskje en av de mer kraftige metoder
at du får ut av boksen med Java leter etter
"Hilsen" trenger ikke å være doble anførselstegn som det var
i HTML er enten er greit så lenge
som du er stilistisk konsekvent i disse dager jeg tør si
mange bruker Java, apostrof i Javascript,
doble anførselstegn i HTML, men det spiller egentlig ingen rolle
så lenge du er konsekvent.
Så, her hvis du ikke er kjent, du kan faktisk få tilgang
med Javascript CSS eiendommer på elementer.
Så merker at jeg har erklærte en variabel kalt div
og lagret inne av denne variabelen,
en referanse til hva at DOM element er.
Så, hvis du tenker tilbake til CS50 eller noen klasse hvor du trodde
om trestrukturer og DOM, Document Object Model,
dette er bare en referanse til en node i et tre,
som representerer denne siden
og hvis div.style.visibility Eiendommen er lik, lik, lik,
skjult, da jeg bare vil en vippe det
som Jonathan foreslått ellers vil jeg
for å slå det over til skjult.
Nå, som i siden, hvorfor trippel tilsvarer det?
Eller hva er det kontra doble likeverdige?
>> Streng tilsvarende.
>> Beklager.
>> Streng tilsvarende.
Så, det er identitets operatører
der etter du sjekker ikke bare verdien av variabelen
som en likeverdig, lik følelse men også typen av den.
Så, selv om vi ikke har spesifisert dette langt data
typer for noen variabler i denne eller noen av lysbildene,
det er en type forbundet med at strengen skjult
med denne verdien, skjult og det er selvfølgelig strengen.
Så, i dette tilfellet, det ikke virkelig betyr noe
fordi det er ingen måte at vi kommer til å conflate en streng
av "skjult" med en annen verdi
men dette er ofte et godt vane jeg vil si å få
inn ved hjelp av lik, lik,
likhetstegnet er generelt en god ting.
Det vil gjøre koden mer robust både i PHP, men
og i Javascript fordi du vil kjøre
inn tidvis hjørne tilfeller hvis verdi kan være null
at du sjekker for og null kan bli smeltet sammen med falsk
eller kan være nei, og som i PHP,
Javascript kan også ha flere feilaktig verdier der med null
og falsk og null og udefinert kan alle løse implisitt
til false.
Men hvis du virkelig ønsker å sjekke for spesiell verdi
lik null, antallet, eller falsk boolsk da har du
å bruke denne identiteten operatør.
Så, kan det skje for å få inn allikevel, selv om her,
det er liksom meningsløst fordi vi vet at vi sjekker
for en streng verdi og det er ikke kommer til å være noe annet.
Så, her er magi da, hvis jeg bla ned til denne linjen her,
tilsynelatende, bygget inn i vinduet objekt
og dette er en funksjon av en nettleser kan du få tilgang
til denne super global objekt kalt Window,
innsiden av det er noe av funksjonaliteten,
hvis stykke hvorav er satt intervall
og det tar tydeligvis hva slags argumenter?
Yeah.
>> Funksjon samtale og en tid.
>> Bra. Så, en funksjon ringer og en gang
og så spesielt en referere til en funksjon,
en peker til en funksjon i en forstand
og det er den funksjonen som kommer
å bli henrettet hver rekke millisekunder, og i dette tilfellet
Det er hver 500 millisekunder.
Så, det er en måte å indusere effektivt og uendelig loop
uten å bruke iterasjon, men istedenfor å fortelle Java
til motoren inne av nettleseren
å gjøre dette hver 500 millisekunder eller er nær
til 500 millisekunder som det kan,
det viser seg at under panseret,
det er det som kalles en hendelse løkke og vi vil komme tilbake til dette
i sammenheng med node JS som bare stadig slag
for å sitte der, spinning, venter på arbeidet som skal gjøres
og så snart den er klar,
500 millisekunder har gått blink vil bli kalt igjen
og igjen og igjen er sammen med noe annet arbeid
som trenger å få gjort.
Så, hva kan vi forbedre her?
Vel, la meg åpne opp blink-1.html
og demonstrere blink-1.html
som estetisk helt identiske.
Så, hva kan vi forbedre her?
Vel, legge merke til at det var litt ubrukelig
å definere en funksjon som heter Blink fordi hvor mange
i hvor mange steder gjorde jeg kaller funksjonen blink?
>> Bare en gang.
>> Så, ett.
Så, det var ikke dårlig, i Faktisk er det trolig ganske
rett frem.
Jeg definerte en funksjon blink, jeg kalle en funksjon blink med måte
av denne parameteren, men teknisk,
det ikke var årsak til den og en felles paradigme
i Javascript er å faktisk gjøre bruk av lambda-funksjoner
som du kanskje husker fra 51 eller anonyme funksjoner
der hvis du ikke trenger et navn på en funksjon,
hvis du bare kalle det sikkert på ett sted,
hvorfor bry fylle koden din, cluttering programmerere sinn
og navnet ditt plass virkelig med symboler
at du egentlig ikke trenger å bry seg om.
Og så, i denne versjonen her,
legge merke til at jeg ringer window.SetInterval direkte
på toppen av min skriptmerket da jeg passerer
i en navnløs funksjon som tar ingen argumenter
og det er helt fin og så kroppen
av den funksjonen det vises er identisk med hva det var før
og den eneste syntaktisk Forskjellen er nå
ned her ved siden av den 500.
Jeg stenger kroppen av funksjonen
og da sier jeg utføre det forrige koden,
hver 500 millisekunder.
Så, veldig marginal endring
men et skritt mot det som er trolig en mer elegant
gjennomføringen av denne.
Så, la oss ta dette ett steg videre hvis jeg nå gå
inn blink to, vil du se en felles bibliotek,
virkningen herav kommer
å være helt ubetydelig estetisk, men hvis vi går
i versjon to her, varsel som på toppen av hodet mitt,
Jeg har tatt den nyeste versjonen av jQuery.
Og så, her nede, Jeg bare ryddet
opp koden litt, er det ikke kommer til å bli en morsom verden
å fortsette å bruke innfødte DOM funksjoner
og liksom rå Javascript.
Faktisk, JQuery som du kan kjenner har blitt så populært
at folk flest bare konflikt jQuery med Javascript
men egentlig bare en kveldsmat nyttig bibliotek skrevet
av en kar ved navn John Resig og siden andre
som bare har gjør en masse kjedelige ting
i Javascript enklere og mer konsis.
Så, i dette tilfellet her er hva som skjer?
Så, jeg har dette utseendet et dollartegn, mer om det
på bare et øyeblikk, så dette er en CSS velgeren.
Så, det er veldig likt i ånden til hva jeg gjorde før,
men denne gangen er jeg bokstavelig talt å bruke hash tag
for å indikere en unik identifikator som kalles hilsen
og deretter tilsynelatende . Css er en metode bygget
i til hva objektet er at jeg nettopp opprettet
og jeg sjekker verdien av synlighet nøkkelen.
Og hvis verdien av at nøkkelen lik, lik, lik, skjult,
så jeg kommer til å veksle det og Jeg kommer til å veksle det denne gangen
ved å bruke samme metode som tilsynelatende er overbelastet
i den forstand at det har to forskjellige signaturer,
ett med ett argument og ett med to argumenter,
den andre av hvilken er fuglehunden,
førstnevnte av disse er en getter så å si.
Og hvis nysgjerrig, og hvis du hadde faktisk aldri sett på dette,
Hvis vi går til jquery.css forhåpentligvis toppen hit er faktisk dette
og du kan se en mer formell forklaring
at vi bare bruke dette, . Css med objektnavn
og deretter setter er dot CSS
med et egenskapsnavn og en verdi.
Så, marginalt renere, men legge merke til den slags mønster her
med hver iterasjon av denne koden,
vi er liksom noe som gjør det strammere og strammere og strammere
og det si bedre design
siden vi bruker noen annens kode som er eliminert
noe av kompleksiteten.
Så, nå la oss gjøre dette enda enklere.
Og faktisk, hvis jeg fjerne all sitater du vil se bare alle
comment vil du se hvordan enkelt dette har fått.
Den eneste forskjellen her er selvfølgelig
at jeg bruker en vippe metode som også kommer innebygd
i til jQuery og det er bare
fordi noen andre skrev koden
som faktisk veksler sikten innstilling
i alle DOM element at du sender den.
Så, bedre og bedre.
Og så, er dette et mønster,
selv om dette er en supper enkelt eksempel og sortere
av dumme nettoeffekten som er en blinkende stykke tekst,
det er den slags tanke prosess som du bør tenke -
være å tenke på ikke nødvendigvis den første
passiv skriving noe for det kommende prosjektet
men sikkert som du iterere med din rådgiver eller med meg
og dine teammøter eller du bare gjennomgå lagkamerater kode
om innstramming ting opp, ikke sant?
Tross alt, de er mindre -
en færre kodelinjer du til slutt har
i teorien jo færre feil du er sannsynlig å være innbydende
fordi det er enkelt mindre kode å rote med.
OK.
Så, et par gatekjøkken.
Lambda funksjoner, anonyme funksjoner,
mange av dem du har sett før
og da også bare stramme ting opp med et bibliotek
som jQuery i dette spesielle tilfellet.
OK.
Eventuelle spørsmål?
La oss gjøre en annen klientsiden aspekt her,
i skjemaet null har vi denne nettoeffekten.
Super enkel form og tilsynelatende hvis jeg prøver å klikke registrer deg her,
utgangspunktet forteller det meg at du er registrert, vel, egentlig ikke.
Vel, hvorfor er det?
Vel, her er form 0.html svært lite kode,
nei Javahodet og det er helt en falsk slags
av form fordi handlingen Verdien er registered.html
noe som betyr at uansett hva Jeg skriver inn dette skjemaet,
hvor det kommer til å sendes på server?
Yeah. Så, for å registered.html som er helt klart en HTML-fil
som er således statisk fil som ikke har noen midler
for å ta brukerundersøkelser antar det er ingen Javascript-kode
innebygd i det som er ser i URL
så dette er helt en NOOP og at ingenting kommer til å skje
med innsendte data, men du kan se strukturen
av en ganske enkel HTML5 skjema
som har et par passord noen inngangstyper.
Så, la oss faktisk nå legge til noen feilsjekking
og se hvordan vi kan forbedre dette.
Så, her er liksom et dårlig manns måte å implementere dette
og det er liksom en ekkel mengde koder.
Så, først la oss bla ned til bunnen
å se hva som er det samme og hva er annerledes.
Den eneste annerledes nå mellom denne
og den forrige versjonen er at jeg har gitt form og ID
av "registrering" kunne har vært hva jeg vil
men det er ment å være unikt identifiserbar selv det er ikke
strengt nødvendig fordi hvis en side har bare én form sikkert jeg
kunne finne den med en av jQuery er velger metoder.
Men på denne måten bare gjør det mer deterministisk.
Så, hvis jeg går opp nå til manuset mitt tag, legge merke til følgende,
window.onload likemenn en anonym funksjon.
Så, hva er dette å gjøre?
Så, kan du huske at i klientsiden programmering -
Javascript snarere HTML-sider har ulike arrangementer knyttet
med elementer, klikking og sende og fokusering
og uskarphet og andre slike hendelser som kan skje
som en bruker vanligvis samhandler med siden,
window.onload gjør det de sier.
På vinduene hele laste
så når alle bildene har vært lastet ned når alle filene har
blitt lastet ned og en gang den siden er lastet,
Gjør følgende kode, og merke hvis jeg bytter til bunnen
av denne fremgangsmåte, legge merke til at det er ingen parentes
etter klammeparentes det vil si
at jeg ikke utfører denne funksjonen opp her nå,
leseren kommer til å utføre det for meg når det har funnet
at siden er lastet.
Så, la oss se hva vi har gjort,
document.getElementById registrering
slik at bare gir meg en referanse til noden
i tre som er av har en ID for registrering.
Og nå, kommer jeg til å registrere en ny hendelsesbehandling
ved å gjøre form.onsubmit får dette anonym funksjon
noe som betyr at den følgende koden skal utføre når
at skjemaet er sendt.
Nå er de fleste av dette er bare slags kjedelig logikk.
Så, hvis verdien av e-post-feltet i form er
"Ingenting", så du må gi din e-postadresse,
du kjefte på brukeren med en varsle og deretter returnere false.
Og så har jeg en haug med andre kontroller,
de sjekker for passordet,
de sjekker om ordene er de samme,
de sjekker om avtalen er merket eller ikke
og jeg bare kjefte på brukeren hvis noen
av disse testene faktisk mislykkes.
Og så, her er et eksempel enda selv om det er litt contrived
her det faktum at jeg bruker lik, lik, lik,
betyr at brukeren kan ikke prøve å lure meg
ved å skrive inn hva verdien.
Eller rettere sagt jeg er virkelig sjekker for tilstedeværelsen
av den tomme strengen, brukeren har ikke skrevet noe ennå.
Hvis brukeren har skrevet i bokstavelig talt null,
"Null" kan inneholde forveksles med den tomme strengen.
Og jeg sier det er liksom av meningsløse her
fordi åpenbart enda null ikke er en e-postadresse.
Men hvis denne var en mer generiske feltet som et tekstfelt
eller et navn eller en beskrivelse eller noe du ønsker å verdsette for
og det er ikke nødvendigvis syntaktisk har
å være en e-postadresse, brukeren kunne skrive noe sånt som null
og igjen hjørne tilfelle, men det er hvorfor typisk sjekker typer
en nyttig ting.
Du er virkelig å se etter brukeren har skrevet noe
inn i dette feltet.
Så, hva skjer hvis ingen av disse testene mislykkes, vel,
returnere true inne av en hendelseshåndterer
som onsubmit betyr bare la den opprinnelige atferden faktisk
forplante og derfor skjemaet vil bli sendt.
Og det er grunnen til at når jeg endelig klikket sende inn før jeg fikk
gjennom å register.html og hvis jeg gjør det nå, varsel,
Jeg blir skreket til hvis jeg ikke gjør det oppgi en e-postadresse
og jeg kan skrive inn malan@harvard.edu,
crimson [fonetisk], Crimson, merke av i boksen,
og nå registrere og det forteller meg, igjen,
du er registrert eller egentlig ikke.
OK.
Så, la oss rydde opp bare en litt og deretter overgang
til den nye nyere server side stuff.
Så, hvis jeg går inn i skjema-2.html, merke til et par ting.
Så, en, jeg tok jQuery tilbake inn i blandingen
så det igjen er denne dollartegn
og nå er jeg bruker noen jQuery metoder.
Så, første, hva er det om dollartegnet som er
så spesielt her?
Hva er dollartegnet laced gjennom det meste noen jQuery kode?
Yeah.
[Hørbar Remark]
OK. Så, dollartegnet funksjon går gjennom DOM ser
for noe med dette spesielt CSS velgeren.
Så sant, men nesten for presis.
Det er hva som skjer når du passerer i en streng
som i dette tilfellet, men du gjør ikke alltid må passere i en streng.
Faktisk eksempel på dette, er meget første linje her er dette ikke er en
CSS selector, jeg har bestått i en Lambda-funksjon.
Så, mer generelt - så, godt svar, men også presis.
Mer generelt er det som er dollartegn representerer?
>> Bare jQuery.
>> Ja. Så, bare jQuery eller er det bare en funksjon
at noen fyr år siden skrev og andre mennesker har
siden forbedret som bokstavelig talt som standard kalles -
oops, kalles jQuery.
Det bare - det viser ut i motsetning til mye
av språk dollartegn er en helt gyldig symbol å bruke
i en variabel navn mens
i PHP dollartegn åpenbart har spesiell betydning
men i Javascript som i noen språk, dollartegn
og understrek og andre slike spesialtegn helt legit
å bruke i ditt eget symbol navn for variabler.
Så, noen bare bestemte det, vet du hva?
Det kommer til å være ganske kjedelig
å gjøre hele verden skriver jQuery hele tiden,
la meg slags plante en eierandel i bakken og si,
"Dette biblioteket vil bruke dollartegn. "
Og faktisk denne ikke øke risikoen
at noen andre presumptuously kommer til å bruke dollartegn
for hans eller hennes bibliotek, men det er måter å liksom forsikre
at når du bruker dollar signere det kart til jQuery
fordi du kan teste om det er allerede blitt tildelt
til noe annet egentlig.
OK.
Så, det er alt som er, er det ingen magi.
Det er bare et sexy utseende stykke syntaks som er fint
og rask og enkelt å skrive.
Så, hva skjer når du skriver dollar sign åpne paren
og deretter en anonym funksjon.
Vel, det viser seg at dette er faktisk stenografi notasjon
for dokument prikk klar åpen paren.
Så, som Cynthia merke tidligere vi allerede funnet ett
hjørne saken.
Hvis du bare passere i lambda funksjon
effekten av dollaren skiltet er litt annerledes.
Faktisk er det som egentlig skjer er at det er ekvivalent til dette,
passering i en referanse til den globale dokumentobjekt
som er globale, akkurat som vinduet objektet er
som gir deg noen spesiell funksjonalitet
som påvirker hele siden eller nettleser og det viser
ut at dokumentet når du pakker det med jQuery,
jQuery hovedsak innser, oh, er dette en referanse
til den spesielle dokumentobjekt,
la meg nå registrere en hendelsesbehandling kalt klar
som ikke er hjemmehørende Javascript eller DOM relatert.
Ready er en jQuery ting som sier
når siden er lastet alle HTML-elementer
, men ikke nødvendigvis er lastet, alt av CSS og bilder
og Javascript-filer og Flash-filer og det liker.
Så, er det et skritt før på belastning og deretter gå videre
og utføre følgende.
Og opp til å bruke på klar betyr er at du kan, vet du,
at alle elementene i DOM,
alle de unikt identifisert ting med IDer, eksisterer de selv
hvis side, innholdet er fortsatt lasting og laste
og du har noen ødelagte ikoner for et øyeblikk
eller hvit side i bakgrunnen.
Yeah.
>> Hva ville skje hvis [uhørbart]?
>> Perfekt eksempel, en perfekt spørsmål.
Så, la oss se om vi kan simulere dette akkurat nå.
Så, la meg gå videre og slette dette to linjer opp her og deretter
uten å bry seg å fikse innrykk, la meg gå videre
og slette denne her nede - oops, dette ned her.
Og nå, la meg gå over til side, gå til form 2.html og type
i Register, virket ingenting å skje, la oss si, hvorfor var det,
la oss gå videre og åpne opp Chrome inspektør,
åpne opp konsollen bare for å se hvis noe skjer her, nå,
Registrer deg og fortsatt ingenting.
Så, er koden syntaktisk bot
så jeg ser ikke noe red feilmeldinger,
men hva klart ikke skjer?
Ingen av koden min er riktig, det virker ikke slik at ingen
mine koder synes å være utføring, så hvorfor er dette?
Vel, Javascript og nettlesere mer generelt utføre
innholdet på en nettside, topp til bunn, fra venstre mot høyre.
Og problemet at fordi toppen
på denne siden har HTML deretter hodet deretter script deretter en annen script,
dette kommer til å bli henrettet før det er enda klar,
eller eksisterer selv i treet fremstilling av siden.
Skjemaet i seg selv, ikke engang Kroppen finnes på dette punktet.
Så, er jQuery smart nok med sin feilsjekking
at dersom det ikke er noe element med den unike ID for registrering,
det er ikke til å kausjon ut på deg
og bare utløse noen konsoll feil og bryte hele siden,
det kommer til å stille ignorere deg, men grunnen til at ingen
av denne koden noen gang utfører er
fordi når du har registrert dette sender handler,
det var ingen element å feste den til.
Så, det er liksom en ikke op der.
Så, ved å angi stedet, vente til alderen har lastet
hvis vi gjorde window.onload ting som er liksom
av den gamle skolen måte å drive den eller den mer sexy jQuery vei
som dette, kan vi fortelle det vente til alle
av disse HTML-kodene har blitt analysert, slik at selv
hvis bildene ikke har lagt i, på minst at noden er i treet,
deretter JQuery kan sikre at alt er der.
Yeah.
[Hørbar Remark]
Ja, god, ja absolutt.
Derfor, er den andre løsning for å dette, hvis du ikke bruker dette
eller ikke husker at dette eksisterte,
du kan absolutt flytte alt dette til bunnen
av websiden, innsiden av organ fremdeles, men under skjemaet
Og det ville også løse dette problemet.
Det er bare typisk anses som dårlig praksis.
Det er litt rotete og slurvet spesielt
hvis du holder jamming alt til bunnen av siden,
spesielt når jeg holder ting enkelt ved å sette alle
av koden min inne av HTML-siden
da selvfølgelig kan du sikkert komme inn i vanen
av facto det ut til en egen fil
på hvilket tidspunkt det er bare hyggelig
å sentralisere filer i hodet.
Bortsett fra det er en pris du betaler
ved å sette Java ytterligere eiendeler som CSS-filer
i hodet på siden, hva er en risiko for at du kjører?
>> Saktere side lasting.
>> Saktere side lasting, hvorfor?
>> Fordi vi prøver å laste alle bibliotekene
før [uhørbart].
>> Nettopp fordi nettlesere lese koden topp til bunn,
venstre til høyre hvis Google analytics er trege
eller jQuery CDN er treg eller Facebook API er treg
og at filen bare henger potensielt avhengig
på hvordan du lastet den filen, Hele siden kunne synes å henge.
Og hvis du ser dette mye ærlig
på nettsteder de har mye av lav kvalitet annonser
på dem, vi er bare en treg eller nedskutte nettsted kan henge en side
for noen ubestemt antall sekunder
inntil endelig nettleseren forhåpentligvis ganger ut på at
og deretter viser deg resten av siden.
Så, hvis du noen gang har brukt som Facebook, som knapp,
i websiden din, la meg se om jeg kan finne dette
uten å måtte logge inn her.
Så, hvis du går til Facebooks like knapp
og klikk på en get-kode, for faen,
kan se om vi kan finner f.eks
sikkert noen hadde postet dette.
[Pause]
Jeg skal gi opp i noen sekunder hvis vi ikke ser dette.
Facebook ASYNCH - OK.
Så, er dette koden og mindre de har endret det nylig
at Facebook faktisk anbefaler at du bruker
å laste sine bibliotek og faktisk foreslå
at du setter dette i hovedteksten på siden din.
Så, Facebook råder deg skape en slags dum DIV
som bare har en unik ID som dette, så har en script tag
og alt dette kompleksitet hovedsak gjør følgende
og de ikke bruker noen JQuery fordi de ikke ønsker
å anta noe annet avhengigheter,
la meg flytte dette over bare litt.
Så oppdager de har en anonym funksjon her,
mer om det i løpet av et øyeblikk,
de deretter bruke document.createElement,
de skaper et DOM-element, dette er som malloc så å si
hvor koden er av typen script, er det da å spesifisere
at async attributtet av at koden kommer
til å være sant så du gå videre og finne ut hva URL
av Facebooks Java skal
og dette er bare den fancy måte
av kontroll bør det være HGP eller HDPS.
Og så til slutt, du Legg merke til hva Facebook gjør,
de får DOM node som har en ID på Facebook rot
som er hva de fortalte du sette inn på siden
og deretter de føyer barnet slik at effekten av alt dette er
å slags dynamisk injisere et nytt skriptmerket på siden din
som et barn av DIV at du satt inn der, slik at resten
av siden lastes lykkelig
og deretter denne koden faktisk blir lastet asynkront.
Så, i hovedsak etter faktum og jeg utsatt omtale
av anonym funksjon,
hva er dette funky syntaks henviser til her
når jeg har ikke bare funksjon åpne paren, nære paren
og deretter klammeparentes, hvorfor de åpne paren her
og den åpne nære, tett paren der, hva er det du gjør?
>> [Hørbar] definerer og deretter kjøre?
>> Nettopp, det er å definere en funksjon som er anonym
men bare å definere en funksjon
selvfølgelig ikke utføre en funksjon til du kaller det
ved navn, men selvfølgelig dette er en anonym funksjon
så du kan ikke kalle det ved navn, men du kan
i Java utføre en anonym funksjon bare
ved å innkapsle det hele i parentes som vi har gjort
med denne paren og dette paren her og deretter en fikse
til enden av funksjonen åpne paren, nære paren,
hvis du ikke ønsker å gi det noen argumenter.
Men dette virker litt dumt,
som hvorfor denne ekstra syntaktisk kompleksitet
at folk flest ikke synes å gjenkjenne, hva er verdien
å pakke dem tre linjer med kode
i en anonym funksjon på denne måten.
Yeah.
>> For å unngå å overskrive en verdifullt i [uhørbart].
>> Nettopp, for å unngå skrive en variabel
i den eksisterende siden, ikke sant?
Facebook er noe presumptuously besluttet,
de kommer til å bruke den variabel E, er det ganske sannsynlig
at du eller noen hjelp Facebook like-knapp
eller hva andre sosiale plugg
i har en variabel et sted som heter E. Så,
ved å innkapsle alle av koden sin inne
av denne anonym funksjon, de i hovedsak har sin egen omfang
som ikke risikere clobbering eventuelle eksisterende variabler.
Så, for dette er faktisk en veldig vanlig paradigme,
spesielt når du skriver et bibliotek kode
eller når du selv ikke gjør det vil rotet ditt navn plass
med andre variabler du vil verdien til å leve
og dø en gang du går ut at blokken med kode,
dette er en fin teknikk i Javascript.
OK.
Så, deretter tilbake til dette eksemplet her, har alt vi gjort i slutten
med dette eksempelet er bare ryddet opp koden.
Så, er det fortsatt en hel haug med brytere, en hel haug
av forholdene her, men merke en bit av syntaks,
dette tilgang til DOM node med den unike ID registrering,
plass midler ser nå for en etterkommer av den noden,
finne det hvis det er av typen innspill og deretter selv
hvis du ikke har sett dette før, kanskje du vet
at dette betyr bare finne det med inngangssignalet,
input elementer som har en egenskap av navn med en verdi
av e-post, og deretter la meg vinke min hånd på noen
av resten ikke er alt som stimulerende
men egentlig bare jQuery syntaks for de samme operasjonene.
OK.
Men hva er ikke så viktig her er leseren side stuff
men det faktum at vi hatt renere og renere måter
av faktisk gjør at kodearbeidet.
OK.
Eventuelle spørsmål?
[Hørbar Remark]
OK. Nå er den morsomme delen.
Så, node.js Hvorfor?
Hvem bryr seg?
Hva vet du om det i dag?
Node.js, hvorfor?
Henry [antatt staving].
[Hørbar Remark]
Batteri reset?
Hva - dette er en perfekt stup hengeren
for siste halvdel av i dag.
Hvorfor ikke vi gå og ta en fem minutters pause her,
det er en halv godteri maskin der hvis du ville
som noen godteri uten sette en fjerdedel i.