>> Okej.
Så, Javascript.
Nästan alla i det här rummet sannolikt har en viss grad
komfort med det om Det var långt tillbaka i SC50
eller det har varit personligt webbprojekt eller till och med
om du gjorde lite av det med det senaste PHP basprojektet,
men för det mesta del, många av er,
även om du har lite tröst
med JavaScript kanske har inte tagits
för givet hur språk fungerar och vad som går
på under huven och vad vi ska försöka
att göra idag är skal tillbaka en del av de tekniska lagren
av vad JavaScript är, hur det skiljer sig från ett språk
som PHP, hur kan vara används inte bara klientsidan
men även serversidan och sedan fokusera mycket specifikt
på denna ram, märker ingen JS som väsentligen är en körning,
ett program med vilket du kan köra JavaScript-kod,
serversidan och det blir alltmer populär sort
av på samma resning detta dagar förmodligen Ruby och PHP
och Python och du ser
att det har några ganska kraftfulla funktioner i form av vissa
av den inbyggda språk konstruktioner.
Men först en del av den lätta saker bara för att påminna dig
om hur detta språk fungerar och om du har svårt att se någon
av detta, bara rop ut och vi kommer att justera.
Så, en som i PHP finns det ingen föreställning om en huvudfunktion,
du bara börja skriva kod
och du kan därtill tolka det uppifrån och ned.
I samband med en webbläsare
eller i något serversidan vi får se några exempel
i lite.
Villkor, syntaktiskt motsvarande PHP och C,
C + + och några andra språk så bara för att ge dig en känsla
om hur vi kan strukturera den,
det finns bara en kanonisk skick.
Booleska uttryck, exakt samma syntaktiskt som du har sett
i de samma andra språk, både för oring
och för att avsluta saker och ting tillsammans.
JavaScript har växlar, ungefär som PHP och andras göra
och du är inte begränsad, liksom i C för inbyggda primitiver
liknande tecken och ints kan faktiskt göra andra typer av värden.
Loops. Så detta är exakt samma
och förmodligen ett dussin språk, medan loopar, göra medan slingor
och då detta trick här.
Så, är denna typ av känd som snabb uppräkning
och det är ett mycket smart sätt för precis som i PHP gör
för varje FU som bar Du kan på samma sätt,
i ett JavaScript-objekt, där objektet är namnet
av variabeln här, säg, var jag på objektet och på varje iteration
av denna loop, är jag kommer att bli en
av nycklarna från det objektet.
Så, om du har ett objekt för en student, och en elev har ett ID
och ett namn och ett hus, iterativt jag kommer att ta
av värdet på ID och namn och hus och du kan därför index
i objektet som om det är en array med hakparentes
notation för att få värdet av den nyckel-ID eller namn
eller hus och så vidare.
Och i motsats till vanliga antagande, JavaScript-objekt,
egenskaper inte nödvändigtvis garanterat
i samma ordning, det är också trogen PHP så ta inte för givet
att saker och ting kommer att stanna i samma ordning
att du sätter dem nyckeln värde-par till ett objekt.
Vad sägs om arrayer?
Det finns ett par sätt att skriva det syntaktiskt
men detta är förmodligen den mest vanligt nu bara använda torget
hakparenteser.
Så detta är en variabel för att ringa upp nummer som innehåller array
av sex heltal där, Här är en enkel sträng
och märker vad som är frånvarande från dessa exempel,
Vad är JavaScript tydligen saknas.
Yeah. Så, det finns inget begrepp att skriva, verkligen inte
i detta sammanhang här, men detta är verkligen en sträng.
Så JavaScript har typer och det var verkligen en matris
som i sig är en typ och vart och ett av elementen
i matrisen var av typ nummer som JavaScript kallar dem.
Så det är en löst skrivit språk och vi får se
att JavaScript som PHP har en identitet operatör
och andra mekanismer för faktiskt kolla vad typ
över några variabel är både för felkontroll
och för andra tillämpningar.
Och här är en provobjekt innehåller bara ett ID och ett namn.
Och nu, märker att vi är med hjälp av klammer notation,
indrag och den vita rymden är en slags menings
och detta förklarar en variabel vars namn är Rob
och vars ID är 1 och datum typ är här vårt nummer
och strängen respektive.
Och då är något lite annorlunda
Om du någonsin har gjort något med Ajax nuförtiden?
Du använde antagligen ett objekt som detta
men det som är värt att notera här?
Vad är syntaktiskt någonsin så annorlunda, bara ett par
saker mellan detta exempel vilket är visserligen mindre
och det större exempel.
Så, först i lekman sikt, vad är detta?
Vilken typ av Personalen skulle du säga?
OK, det är en array, det är en samling av vad?
>> Objects.
>> OK, det är en array med objekt.
Och nu, fokusera på bara en - något av dessa föremål,
vad som är annorlunda mellan det här och det här?
>> Nycklarna är strängar.
>> Ja. Så, det nycklar är strängar,
och knapparna är faktiskt strängar i båda fallen
och det är typ av en idiotisk
enligt min mening historisk konstruktion beslut när du använder
JSON, JavaScript Object Notation,
som är i huvudsak ett transportformat
för att skicka data vanligtvis över nätverket
mellan klient och server, du måste komma ihåg
att detta inte är faktiskt giltigt JSON och detta är ett
av dessa FYIs såvida du någonsin bang huvudet mot väggen
i flera minuter för ingen bra Därför är det inte giltigt JSON
eftersom nycklarna är faktiskt inte citeras.
JSON kräver idiotically att nycklarna inte bara citeras,
men att de dubbelt citerade, apostrof räcker inte.
Så dum liten sak och mer av en rolig faktum
för dagens ändamål, men detta också skulle vara giltiga JavaScript
det är bara inte - det omvända är inte sant.
Okej.
Så, vi får se massor mer av det.
Okej.
Så, det är JavaScript syntaktiskt nog ganska
förtrogen, någon av er som har aldrig använt JavaScript innan
det inte är ett stort steg från PHP eller de flesta någon procedurella språk
som du kan ha använt.
Så, idag ska vi fokusera på de intressanta aspekter
JavaScript särskilt i samband med någon JS
men inte enbart på grund fram till nu du har förmodligen,
om du använt Javascript, använde den i en webbläsare.
Så, är ingen JS en miljö sedan i en liten bit går
så att vi kan få tillgång till JavaScript-kod klient -
serversidan men först, låt oss ta en titt
på något som är en lite mer klientsidan.
Så har jag gått in och det är kopplade på kurserna hemsida,
om du vill spela med, det finns två underkataloger
i dagens Zip av kallas käll dubbar dragkedja på webbplatsen
och dessa är bara en Några exempel reminiscing
saker som du kanske har sett innan och jag slags byggde dem
upp från enklaste till något mer komplicerat att retas
några av funktionerna av Javascript.
Så, låt oss gå vidare och ta en titta till exempel på detta.
Så, tyvärr blink tag var död på flera år sedan
som vägen har fått snyggare och snyggare
och blink-taggen var bokstavligen öppen fäste blinka nära fästet
och det slags ingen längre med oss.
Men, kan vi fortfarande återuppliva denna idé om ett tag genom att bara typ
att tänka på det logiskt, hur ska du gå
om att göra något liknande denna blinka intuitivt?
Förutsatt att du vet lite lite av JavaScript och eller CSS
vid denna punkt, är det OK om du inte gör det.
>> Ställ en timeout och gömma det sedan efter jag tagga det
ut och visa den igen.
>> Ja, perfekt.
Detta är typ av programmering 101,
hur skulle du få en visuell effekt som denna?
Tja, du på något sätt måste visa något
och sedan dölja något, show något, dölja något
och som Jonathan föreslår med hjälp av någon form av timeout,
någon form av schema du kan göra detta flera gånger utan att behöva
att använda en loop eller något liknande.
Så, låt mig gå in i blink-0.html
och låt mig krympa typsnittet lite
så att mer av detta passar.
Och låt oss ta en titt på vad som händer här.
Så först av allt, märka att kroppen
på denna sida är super enkel, insidan av kroppen
på sidan är bara en div.
Jag har godtyckligt givet ett ID på hälsning
och det kan vara allt så länge det är unikt
och då har jag bara några enkel text, hallå världen.
Så, om jag bläddrar nu upp, märker några fluffig styling.
Så jag säger, skarp hälsning, vilket som ni vet
i CSS betyder bara unikt identifiera elementet
med en idé om hälsning,
teckenstorlek går godtyckligt vara här, marginal och text align.
Så, ointressant estetiska detaljer
att ungefär centrera texten.
Så, är den intressanta delen i skripttagg upp här
som jag råkar sätta in i huvudet på sidan.
Så, we'll - kan du göra detta på ett antal olika sätt
och vi får se några iterationer av denna samma program
men låt oss börja från toppen.
Så har jag deklarerat en Funktionen kallas blink
och tydligen den använder detta inbyggda DOM metod som kallas
getElementById vilket kanske en av de mer kraftfulla metoder
att du får ur lådan med JavaScript söker
"Hälsning" behöver inte vara citattecken som det var
i HTML är antingen är bra så länge
som du är stilistiskt konsekvent dessa dagar jag vågar säga
många använder Java, apostrof i JavaScript,
citattecken i HTML men Det spelar egentligen ingen roll
så länge du är konsekvent.
Så här om du inte är bekant, du kan faktiskt komma åt
med JavaScript CSS fastigheter på element.
Så märker att jag har deklarerat en variabel som heter div
och förvaras inuti av den variabeln,
en hänvisning till vad att DOM-elementet är.
Så, om du tänker tillbaka på CS50 eller någon klass där du trodde
om trädstrukturer och DOM, Document Object Model,
detta är bara en referens till en nod i ett träd,
som representerar den här sidan
och om div.style.visibility Fastigheten är lika, lika, lika,
dolt, då jag bara vill ha en toggle det
som Jonathan föreslagna annars vill jag
för att växla den till dold.
Nu, som i sidan, varför triple lika där?
Eller vad är det jämfört med dubbla jämlikar?
>> Strikt motsvarighet.
>> Förlåt.
>> Strikt motsvarighet.
Så det är identitetsoperatörerna
där som du kollar inte endast värdet av den variabla
som en jämlike, samma känsla utan även typen av den.
Så, även om vi inte har anges här långt inga uppgifter
typer för alla variabler i denna eller någon av bilderna,
det finns en typ associerad med den strängen dolt
med detta värde, dolda och det är naturligtvis strängen.
Så i det här fallet, det spelar egentligen ingen roll
eftersom det inte finns något sätt att vi ska blanda ihop en sträng
av "dolda" med något annat värde
men detta är ofta en bra vana jag skulle säga att få
in med hjälp av lika, lika,
likhetstecknet är i allmänhet en bra sak.
Det kommer att göra din kod mer robust både i PHP men
och i JavaScript eftersom du kör
in ibland hörnfall där värdet kan vara noll
att du kollar efter och noll kan sammanbinds med falsk
eller skulle kunna finnas någon och som i PHP,
Javascript också kan ha flera falskeligen värden där med noll
och falskt och null och undefined kan alla lösa implicit
till false.
Men om du verkligen vill ha för att kontrollera om det särskilt värde
som noll, antalet, eller falskt den Boolean så har du
att använda denna identitet operatör.
Så, kan det hända att få i alla fall, även om här,
Det blir liksom meningslöst eftersom vi vet att vi kollar
för ett strängvärde och det är inte att vara något annat.
Så, här är det magiska då, om jag bläddra ner till denna linje här,
tydligen, byggd i fönstret objektet
och detta är en funktion av en webbläsare som du kan komma åt
till denna super globala objekt som kallas fönster,
insidan av det är vissa funktioner,
Om stycke där är inställd intervall
och det tar tydligen vilka typer av argument?
Yeah.
>> Funktion samtal och en tid.
>> Bra. Så, en funktion ring och en tid
och så att i synnerhet en referera till en funktion,
en pekare till en funktion på sätt och vis
och det är den funktion det händer
att bli avrättade varje rad millisekunder och i det här fallet,
det var 500 millisekunder.
Så det är ett sätt att förmå effektivt och oändlig loop
utan att använda signalen, men istället träffande JavaScript
till motorn inne av webbläsaren
att göra detta varje 500 millisekunder eller ligger nära
till 500 millisekunder som det kan,
det visar sig att under huven,
det är vad som kallas en händelse slinga och vi ska återkomma till detta
i samband med noden JS som bara hela tiden typ
att sitta där, spinning, väntar på arbete att göra
och så snart som den inser,
500 millisekunder har förflutit blink kommer få kallas igen
och gång på gång är vid sidan av annat arbete
som behöver få gjort.
Så, vad kan vi förbättra här?
Nåväl, låt mig öppna upp blink-1.html
och demonstrera blink-1.html
som estetiskt perfekt identiska.
Så, vad kan vi förbättra här?
Tja, märker att det var ganska värdelös
att definiera en funktion som kallas Blink eftersom hur många
på hur många platser gjorde jag anropa funktionen blinkar?
>> Bara en gång.
>> Så, en.
Så, det var inte dåligt, i Faktum är att det är nog ganska
rakt framåt.
Jag definierade en funktion blink, jag anropa en funktion blink genom
av denna parameter, men tekniskt,
fanns det inte skäl för den och en gemensam paradigm
i JavaScript är att faktiskt utnyttja lambdafunktioner
som ni kanske minns från 51 eller anonyma funktioner
där om du inte behöver ett namn för en funktion,
om du bara kallar det säkert på ett ställe,
varför bry belamra din kod, belamra programmerare sinnet
och ditt namn utrymme egentligen med symboler
att du egentligen inte behöver bry sig om.
Och så, i denna version här,
märker att jag ringer Window.setInterval direkt
högst upp på min script tag sedan jag passerar
i en namnlös funktion som tar inga argument
och det är perfekt fina och då kroppen
av denna funktion det verkar är identisk med vad den var innan
och det enda syntaktisk Skillnaden nu är
här nere bredvid den 500.
Jag stänger kroppen av funktionen
och då säger jag exekvera det föregående kod,
varje 500 millisekunder.
Så mycket marginell förändring
men ett steg mot vad som är antagligen en mer elegant
Genomförandet av detta.
Så, låt oss ta det här gå vidare om jag nu går
i blink två, kommer du se ett gemensamt bibliotek,
vars effekt kommer
för att vara helt oviktig estetiskt men om vi går
i version två här, meddelande som på toppen av mitt huvud,
Jag har tagit med den senaste versionen av jQuery.
Och sedan, här nere, Jag bara rengöras
upp koden lite, det är inte kommer att bli en rolig värld
att fortsätta att använda nativa DOM-funktioner
och typ av rå JavaScript.
Faktum JQuery som du kan vet har blivit så populärt
att de flesta människor bara konflikt jQuery med JavaScript
men egentligen bara en supé användbar bibliotek skriven
av en man vid namn John Resig och eftersom andra
som bara gör en massa tråkiga saker
i JavaScript lättare och mer kortfattad.
Så i det här fallet här vad som händer?
Så, jag har detta utseende ett dollartecken, mer om det
på bara ett ögonblick, sedan detta är en CSS-väljare.
Så det är väldigt lika i ande vad jag gjorde innan,
men den här gången, jag är bokstavligen med hjälp av hash-taggen
för att indikera ett unikt identifierare som kallas hälsning
och sedan tydligen . Css är en metod som byggde
in till vad objektet är att jag just skapat
och jag kollar värdet av synlighet nyckeln.
Och om värdet på denna nyckel lika, lika, lika, gömd,
då jag ska växla den och Jag kommer att växla den här gången
genom användning av samma metod som uppenbarligen är överbelastad
i den meningen att den har två olika signaturer,
en med ett argument och en med två argument,
av vilka den andra är setter,
den förstnämnda av dessa är en get-metod så att säga.
Och om nyfikna och om du skulle aldrig tittat på det här,
om vi går till jquery.css förhoppningsvis den översta träffen är verkligen här
och du kan se en mer formell förklaring
att vi använder just detta, . Css med fastighetsnamnet
och sedan setter är punkt CSS
med ett fastighetsnamn och ett värde.
Så, marginellt renare, men märke till den typ av mönster här
med varje iteration av denna kod,
vi sorts gör det hårdare och hårdare och hårdare
och det säger bättre konstruktioner
eftersom vi använder någon annans kod som har eliminerats
en del av komplexiteten.
Så, nu ska vi göra detta ännu enklare.
Och faktiskt, om jag tar bort alla citat du ser bara alla de
comment ser du hur enkelt detta har fått.
Den ena skillnaden här är naturligtvis
att jag använder en toggle metod som också är inbyggt
in till jQuery och det är bara
eftersom någon annan skrev koden
som faktiskt växlar inställningen synlighet
av alla DOM-element att du skickar det.
Så, bättre och bättre.
Och så, är detta ett mönster,
även om detta är en supé enkelt exempel och sortera
av dumma nettoeffekt som är en blinkande textstycke,
det är den typen av tanke process som du bör tänka -
tänka på inte nödvändigtvis den allra första
passiv skrivande något för det kommande projektet
men säkert när du iterera med din rådgivare eller med mig
och dina gruppmöten eller du bara se över dina lagkamrater kod
om åtdragning upp saker, eller hur?
När allt, de är mindre -
ett färre kodrader du i slutändan har
i teorin desto färre buggar dig sannolikt kommer att bjuda in
eftersom det finns helt enkelt mindre kod för att röra upp med.
Okej.
Så, ett par hämtställen.
Lambda funktioner, anonyma funktioner,
av vilka många du har sett förut
och sedan också bara dra åt upp saker med ett bibliotek
liknande jQuery i detta särskilt fall.
Okej.
Några frågor?
Låt oss göra en annan klientsidan aspekt här,
i formen noll vi har denna nettoeffekt.
Super enkel form och tydligen om jag försöker klicka registrera dig här,
initialt det säger mig att du är registrerat, ja, inte riktigt.
Tja, varför är det?
Tja, här är form 0.html mycket lite kod,
inga JavaScript helst och det är helt en falsk slags
i form, eftersom åtgärden värdet är registered.html
vilket innebär att oavsett vad Jag skriver i denna form,
där kommer det att sändas på servern?
Yeah. Så, för att registered.html vilket helt klart är en HTML-fil
vilket är därför statiskt fil som inte har några medel
att ta användarens input förutsatt det finns ingen JavaScript-kod
inbäddade i det som är tittar i URL
så detta är helt och hållet en NOOP och att ingenting kommer att hända
med inlämnade uppgifter, men du kan se strukturen
av en ganska enkel HTML5 formen
som har ett fåtal lösenord, några ingångstyper.
Så, låt oss faktiskt nu lägga till några felkontroll
och se hur vi kan förbättra detta.
Så, här är en slags dålig människans sätt att genomföra detta
och det är en slags otäck bit av kod.
Så, först ska vi rulla ner till botten
för att se vad som är på samma och vad som är annorlunda.
Det enda som skiljer nu mellan detta
och den tidigare versionen är att jag har gett form och ID
för "registrering" kunde har varit något jag vill ha
men dess tänkt att vara unikt identifierbar även det är inte
absolut nödvändigt för om en sidan har bara en form säkert jag
kunde hitta det med en av jQuery metoder väljaren.
Men detta sätt gör bara det mer deterministisk.
Så, om jag går upp nu till mitt manus tag, märker följande,
window.onload jämlikar en anonym funktion.
Så, vad är det här att göra?
Så, kanske du minns att i klientsidan -
JavaScript snarare HTML-sidor ha olika evenemang i samband
med element, klicka och skicka in och fokusera
och oskärpa och andra sådana händelser som kan hända
som en användare typiskt interagerar med sidan,
window.onload gör vad den säger.
På det hela fönstren lastning
så när alla bilder har varit ner när alla filer har
hämtats och en gång sidan har laddats,
gör följande kod, och märker om jag byter till botten
av denna metod, märker att det finns ingen parentes
efter klammerparentes det vill säga
att jag inte köra denna funktion upp här nu,
webbläsaren går att exekvera det för mig när det har fastställts
att sidan har laddats.
Så, låt oss se vad vi har gjort,
document.getElementById registrering
så det ger bara mig en referens till noden
i trädet som är av har ett ID för registrering.
Och nu, kommer jag att registrera en annan händelsehanterare
genom att göra form.onsubmit får denna anonym funktion
vilket innebär följande koden ska köras när
att formuläret skickas.
Nu är det mesta av detta bara slags tråkiga logik.
Så, om värdet av den e-post fält i formuläret är
"Ingenting" då måste du ge din e-postadress,
du skrika åt användaren en varna och sedan returnera false.
Och då har jag en massa andra kontroller,
kontrollerna för lösenordet,
de kontrollerar om lösenorden är desamma,
kontrollerna om avtalet kryssrutan är markerad eller inte
och jag bara skrika åt användaren om någon
av dessa tester misslyckas faktiskt.
Och så, här är ett exempel även även om det är lite krystat
här att jag använder lika, lika, lika,
innebär att användaren kan inte försöka lura mig
genom att skriva in vilket värde.
Eller snarare är jag verkligen kontroll med avseende på närvaron
av en tom sträng, användaren har inte skrivit något ännu.
Om användaren skrivit i bokstavligen noll,
"Noll" skulle kunna vara förväxlas med den tomma strängen.
Och jag säger att det är typ av meningslös här
eftersom det självklart även noll är inte en e-postadress.
Men om det var en mer generiskt fält som ett textfält
eller ett namn eller en beskrivning eller något du vill att värdet för
och det är inte nödvändigtvis syntaktiskt har
för att vara en e-postadress, användaren skulle kunna skriva något i stil med noll
och återigen hörn fall men det är varför vanligtvis kontroll typer är
en bra sak.
Du är verkligen kontrollera för användaren har skrivit något
in i det fältet.
Så, vad händer om ingen av dessa tester misslyckas, ja,
vänder sant inuti av en händelsehanterare
liknande onSubmit betyder bara låt den ursprungliga beteende faktiskt
propagera och därför formulär kommer att få in.
Och det är därför, när jag äntligen klickade in innan jag fick
genom att register.html och om jag gör det nu, varsel,
Jag blir utskälld om jag inte gör det en e-postadress
och jag kan skriva in malan@harvard.edu,
crimson [fonetisk], crimson, markera rutan,
och nu registrera sig och det säger mig, igen,
du är registrerad eller inte riktigt.
Okej.
Så, låt oss städa upp detta bara en lite och sedan övergång
till den nya nyare serversidan grejer.
Så, om jag går in i formulär-2.html, märke till några saker.
Så, en, jag tog jQuery tillbaka in i blandningen
så där igen är denna dollartecken
och nu jag använder några jQuery metoder.
Så, först, vad är det om dollartecknet som är
så speciellt här?
Vad är det dollartecken spetsad under större delen någon jQuery kod?
Yeah.
[Ohörbart Anmärkning]
OK. Så, dollartecken funktionen går igenom DOM ser
för något med detta särskild CSS-väljare.
Så sant, men nästan alltför exakt.
Det är vad som händer när du passerar i en sträng
som i detta fall, men du gör inte alltid måste passera i en sträng.
I själva verket är fallet, själva första raden här är detta inte en
CSS-väljare, jag passerar i en Lambda-funktion.
Så, mer generellt - så, bra svar men alltför exakt.
Mer allmänt, vad är dollartecken representerar?
>> Precis jQuery.
>> Ja. Så, bara jQuery eller är det bara en funktion
att en kille år sedan skrev och andra människor har
sedan förbättras som bokstavligen som standard kallas -
oops, heter jQuery.
Det bara - det visar ut till skillnad från många
språk dollartecken är en helt giltiga symbol att använda
i en variabel namn medan
i PHP dollartecken uppenbarligen har en speciell betydelse
men i JavaScript som i vissa språk, dollartecken
och understreck och andra sådana specialtecken helt legit
att använda i din egen symbol namn på variabler.
Så, någon som just beslutat det, vet ni vad?
Det kommer att bli ganska tråkiga
att göra hela världen skriver jQuery hela tiden,
låt mig sorts plantera en påle i marken och säga,
"Detta bibliotek kommer använda dollartecken. "
Och faktiskt, denna inte öka risken
att någon annan övermodigt kommer att använda dollartecken
för sitt bibliotek, men det finns olika sätt att sorts försäkra
att när du använder dollarn underteckna det kartor till jQuery
eftersom du kan testa om det har redan tilldelats
till något annat väsentligt.
Okej.
Så, det är allt som är, det finns ingen magi.
Det är bara en sexig ser bit syntax som är fint
och snabbt och enkelt att skriva.
Så, vad händer när du skriver dollartecken öppna föräldra
och sedan en anonym funktion.
Tja, visar sig att detta är faktiskt shorthand notation
för dokument prick redo öppna föräldra.
Så, som Cynthia märkte tidigare vi redan hittat en
hörn fallet.
Om du bara skicka in lambda-funktion,
effekten av den dollar tecken är lite annorlunda.
I själva verket är det som egentligen händer är att det är likvärdigt med det här,
passerar i en hänvisning till den globala dokumentobjektet
som är globala precis som fönsterobjektet är
som ger dig en del speciell funktionalitet
som påverkar hela sidan eller webbläsare och det visar
att dokumentet när du slå in den med jQuery,
jQuery realiserar huvudsak åh, det här är en referens
till den speciella dokumentobjektet,
Låt mig nu registrera en händelsehanterare kallas redo
vilket inte är infödd JavaScript eller DOM relaterat.
Ready är en jQuery sak som säger
När sidan har laddats alla HTML-element
men inte nödvändigtvis lastas, alla av CSS och bilder
och JavaScript-filer och Flash-filer och liknande.
Så det är ett steg före på belastning sedan gå vidare
och exekvera följande.
Och uppsidan att använda på färdig sätt är att du kan, du vet,
att alla element i DOM,
alla de identifieras saker med ID, existerar de ens
om sidan, dess innehåll fortfarande lastning och lastning
och du har några brutna ikoner för en stund
eller vit sida i bakgrunden.
Yeah.
>> Vad skulle hända om [ohörbart]?
>> Perfekt exempel en perfekt fråga.
Så, låt oss se om vi kan simulera detta just nu.
Så, låt mig gå vidare och ta bort detta två rader upp här och sedan
utan att bry sig om att åtgärda indrag, låt mig gå vidare
och ta bort det här nere - oops, här en här nere.
Och nu, låt mig gå över till sida, gå till formulär-2.html och typ
Registrera, ingenting tycktes händer, låt oss säga, varför var det,
Låt oss gå vidare och öppna upp Chromes inspektör,
öppna konsolen bara för att se om det händer något här, nu,
registrera, fortfarande ingenting.
Så, är koden syntaktiskt fin
så jag inte ser någon meddelanden röd fel,
men det som klart händer inte?
Ingen av min kod är rätt, det fungerar inte så ingen
av mina koder tycks vara exekvera, så varför är det här?
Tja, JavaScript och webbläsare mer allmänt utföra
innehållet i en webbsida, topp och ned, från vänster till höger.
Och problemet är att eftersom den övre
på denna sidan har HTML huvudet sedan då script då ett annat skript,
detta kommer att bli avrättade innan det är även redo,
eller ens existerar i trädet representation av den sidan.
Formen i sig, inte ens kropp existerar på denna punkt.
Så, är jQuery smart nog med sin felkontroll
att om det inte finns något inslag med ett unikt ID för registrering,
det kommer inte att lösa ut på dig
och bara utlösa en konsol fel och bryta hela sidan,
det kommer att tyst ignorera er, men på grund av att ingen
av denna kod någonsin utför är
för när du har registrerade detta skicka handler,
det fanns inget inslag att koppla den till.
Så det är en slags inget op där.
Så, genom att specificera i stället, vänta till åldern har laddats
Om vi ​​gjorde det window.onload sak som är typ
av den gamla skolan sätt att göra det eller det sexigare jQuery vägen
så här, vi kan berätta det vänta tills alla
av dessa HTML-taggar har tolkats så att även
Om bilderna inte har laddats på minst den noden är i trädet,
sedan JQuery kan säkerställa att allt finns där.
Yeah.
[Ohörbart Anmärkning]
Ja, bra, ja absolut.
Så, den andra lösningen för att detta, om du inte använder det här
eller kom inte ihåg att detta fanns,
du kan absolut flytta allt detta till botten
av webbsidan, insidan av kroppen fortfarande men nedanför formuläret
och det skulle också lösa detta problem.
Det är bara normalt anses vara dålig praxis.
Det är lite rörigt och slarviga speciellt
Om du fortsätter att störa allt till botten av sidan,
speciellt när jag håller saker enkelt genom att sätta alla
av min kod inuti på HTML-sidan
När det är klart du kan säkert vänja sig vid
av facto ut det till en separat fil
vid vilken punkt det är bara trevligt
att centralisera filer i huvudet.
Förutom det finns ett pris som du betalar
genom att sätta JavaScript ytterligare tillgångar som CSS-filer
i huvudet på sidan, vad är en risk som du kör?
>> Långsammare sidan laddas.
>> Långsammare sidan laddas, varför?
>> Därför att vi försöker för att ladda alla bibliotek
innan [ohörbart].
>> Exakt eftersom webbläsare läsa koden toppen till botten,
vänster till höger om Google analytics är långsamma
eller jQuery CDN är långsam eller Facebook-API är långsam
och att filen bara hänger potentiellt beroende
om hur du laddat den filen, den hela sidan kan visas att hänga.
Och om du ser detta mycket uppriktigt
på webbplatser de har mycket annonser av låg kvalitet
på dem, vi är bara ett långsamt eller nedskjutna webbplats kan hänga en sida
för lite obestämd antal sekunder
tills slutligen webbläsaren förhoppningsvis timeout på det
och sedan visar resten av sidan.
Så, om du någonsin har använt liknande Facebook, som knappen,
på din webbsida, låt mig se om jag kan hitta det här
utan att behöva logga in här.
Så, om du går till Facebooks gillaknapp
och klickar på en get-kod, för fan,
kan se om vi kan hitta exempel
säkert någon hade postat detta.
[Paus]
Jag ska ge upp i ett fåtal sekunder om vi inte ser det.
Facebook asynch - OK.
Så detta är den kod och om inte de har ändrat det nyligen
att Facebook faktiskt rekommenderar att du använder
att ladda sitt bibliotek och faktiskt föreslå
att du sätter detta i kroppen på din sida.
Så, Facebook råder dig skapa ett slags dum DIV
som bara har unikt ID som detta, då har en script-tagg
och allt detta komplexa väsentligen gör följande
och de inte använder någon JQuery eftersom de inte vill
att ta på sig någon annan beroenden,
Låt mig gå här över bara lite.
Så märker att de har en anonym funktion här,
mer på att på bara ett ögonblick,
de sedan använder document.createElement,
de är att skapa ett DOM-element, detta är som malloc så att säga
där etiketten är av typen manus, är det då ange
att async attributet av den taggen kommer
för att vara sant då ni går vidare och räkna ut vad URL
av Facebooks JavaScript bör vara
och detta är bara finare sätt
av kontroll bör det vara HGP eller HDPS.
Och slutligen, du märke till vad Facebook gör,
de får DOM-nod som har ett ID på Facebook rot
vilket är vad de sa till dig att sätta in i sidan
och sedan lägga barnet så effekten av allt detta är
för slags dynamiskt injicera ett nytt script-tagg på din sida
som barn i DIV som du infogas där så att resten
av sidan laddas glatt
och sedan denna kod faktiskt inladdas asynkront.
Så, i huvudsak efter den faktum och jag uppskjuten omnämnande
av anonym funktion,
Vad är det här funky syntax hänvisar till här
när jag har inte bara funktionen öppna Paren, nära Paren
och sedan klammerparenteser, varför de öppna föräldra här
och sedan öppna nära, nära Paren där, vad är det att göra?
>> [Ohörbart] som definierar och sedan köra?
>> Exakt, det som definierar en funktion som är anonym
utan endast definierar en funktion,
naturligtvis inte köra en funktion tills du kallar det
efter namn, men naturligtvis detta är en anonym funktion
så du kan inte kalla det med namn, men du kan
i JavaScript verkställa en anonym funktion bara
genom inkapsling av det hela inom parentes som vi har gjort
med denna föräldra och detta Paren här och sedan ett fixerings
till slutet av funktionen öppna föräldra, nära Paren,
om du inte vill Ge det några argument.
Men det verkar lite dumt,
som varför denna ytterligare syntaktisk komplexitet
att de flesta människor inte verkar att känna igen, vad är värdet
omslags dem tre rader kod
i en anonym funktion på detta sätt.
Yeah.
>> För att undvika att skriva över en värdefulla i det [ohörbart].
>> Exakt, för att undvika skriver över en variabel
i den befintliga sidan, eller hur?
Facebook är något modigt beslutat,
de ska använda variabel E, är det ganska troligt
att du eller någon använder på Facebook som knappen
eller vad andra sociala kontakten
i har en variabel någonstans kallas E. Så,
genom att kapsla in alla av sin kod inuti
av denna anonym funktion, är de i huvudsak har sin egen omfattning
som inte riskerar dunkar några befintliga variabler.
Så, för detta är faktiskt en mycket vanlig paradigm,
speciellt när du skriver ett bibliotek kod
eller när du själv inte gör det vill röran ditt namn utrymme
med andra variabler som du vill att värdet för att leva
och dö när du avslutar att kodblock,
Detta är en fin teknik i JavaScript.
Okej.
Så, sedan tillbaka till det här exemplet Här har allt vi gjort på slutet
med detta exempel är precis städat upp koden.
Så, är det fortfarande en hel gäng switchar, en hel drös
av förhållandena här, men märka lite av syntax,
Detta ger tillgång till DOM-nod med det unika ID-registreringen,
rymdorgan ser nu en ättling till den noden,
tycker att det är, om det är av typen ingång och då även
Om du inte har sett det här innan, kanske du vet
att detta innebär bara hitta den med inmatningstagg,
inmatningselement som har en attribut för namn med ett värde
av e-post, och sedan låta mig våg min hand på något
resten är inte allt det stimulerande
men egentligen bara jQuery syntax för samma verksamhet.
Okej.
Men vad är inte så viktigt här är webbläsarsidan grejer
utan snarare det faktum att vi hade renare och renare sätt
att faktiskt göra den koden arbete.
Okej.
Några frågor?
[Ohörbart Anmärkning]
OK. Nu den roliga delen.
Så, Node.js Varför?
Vem bryr sig?
Vad vet du om det idag?
Node.js, varför?
Henry [antas stavning].
[Ohörbart Anmärkning]
Batteri reset?
Vad - det här är en perfekt klippa hängare
för den senare hälften av idag.
Ska vi gå och ta en 5 minuters paus här,
det finns en halv godis maskin där om du skulle
som lite godis utan sätta en fjärdedel i.