>> Alle regte.
So, JavaScript.
Byna almal in die kamer waarskynlik 'n mate
van troos met dit of dit was die pad terug toe in SC50
of is dit 'n persoonlike web projekte of selfs
As jy het 'n bietjie van dit met die afgelope PHP basis projek,
maar vir die mees deel, baie van julle,
selfs as jy 'n paar troos
met JavaScript miskien nog nie geneem
vanselfsprekend hoe die taal werk en wat gaan
op onder die enjinkap en wat ons gaan om te probeer
Vandag doen is om terug te skil sommige van die tegniese lae
van wat JavaScript is, hoe dit verskil van 'n taal
soos PHP, hoe kan wees nie net gebruik kliënt kant
maar ook bediener kant en dan fokus baie spesifiek
op hierdie raamwerk, sien geen JS wat is in wese 'n hardloop tyd,
'n program waarmee jy kan JavaScript-kode uit te voer,
bediener kant en is dit steeds toenemend gewild soort
van dieselfde statuur hierdie dae van waarskynlik Ruby en PHP
en Python en jy sal sien
dat dit 'n paar mooi 'n kragtige funksies deur middel van 'n paar
van die gebou-in die taal konstrukte.
Maar eers 'n paar van die maklike dinge net om jou te herinner
hoe hierdie taal werk en As jy probleme het dat enige
van hierdie, net skree uit en ons sal pas.
So, die een wat soos in PHP is daar geen idee van 'n hoof-funksie,
jy net begin kode skryf
en jy kan daarvoor dit top interpreteer na onder.
In die konteks van 'n leser
of in iets bediener kant ons sal sien 'n paar voorbeelde
in 'n bietjie.
Voorwaardes, sintakties gelykstaande aan PHP sowel as C,
C + + en 'n paar ander tale so net om te gee jou 'n gevoel
hoe ons dit kan orden,
daar is net 'n kanoniese toestand.
Boolse uitdrukkings, presies dieselfde sintakties as jy gesien het
in daardie selfde ander tale, beide vir die oring
en vir die beëindiging van dinge saam.
JavaScript is skakelaars, baie soos PHP en ander se doen
en jy is nie beperk, soos in C te integrale primitiewes
soos karakters en ints kan eintlik doen ander vorme van waardes.
Loops. So, dit is presies dieselfde
en waarskynlik 'n dosyn tale, terwyl loops, doen terwyl sirkelroetes
en dan hierdie truuk hier.
So, dit is 'n soort van bekend as 'n vinnige opsomming
en dit is 'n baie slim manier net soos in PHP doen
vir elke FU as bar jy kan op soortgelyke wyse,
in 'n JavaScript voorwerp, waar voorwerp is die naam
van die veranderlike hier, sê, var i in voorwerp en op elke iterasie
van hierdie lus, ek is gaan een te wees
van die sleutels van die voorwerp.
So, as jy 'n voorwerp vir 'n student, en 'n student 'n ID
en 'n naam en 'n huis, iteratief Ek sal
van die waarde van ID en naam en huis en jy kan daarvoor indeks
in voorwerp asof dit 'n skikking met behulp van vierkantige hakies
notasie die waarde te kry van die sleutel ID of naam
of huis, en so meer.
En in teenstelling met algemene aanname, JavaScript voorwerpe,
eienskappe is nie noodwendig gewaarborg om te wees
in dieselfde volgorde, is dit ook getrou aan PHP so aanvaar nie
dat dinge sal bly in dieselfde volgorde
dat jy die sleutel waarde pare in 'n voorwerp.
Hoe oor skikkings?
Daar is 'n paar van die maniere om dit te sintakties skryf
maar dit is waarskynlik die mees gemeenskaplike nou net die gebruik van vierkante
hakienotasie.
So, dit is 'n veranderlike te getalle wat skikking noem
ses heelgetalle daar, hier is 'n eenvoudige string
en sien wat is afwesig Uit hierdie voorbeelde
Wat is JavaScript blykbaar ontbreek.
Ja. So, daar is geen idee tik-, beslis nie
in hierdie konteks hier, maar Dit is inderdaad 'n string.
So, JavaScript het tipes en dit was inderdaad 'n skikking
wat self 'n tipe en elk van die elemente
in daardie reeks was van die tipe nommer as JavaScript noem hulle.
So, dit is 'n losweg getik taal en ons sal sien
dat JavaScript soos PHP het 'n identiteit operateur
en ander meganismes vir eintlik kontrole wat die tipe
van sommige veranderlike beide vir foutopsporing
en vir die ander programme.
En hier is 'n monster voorwerp met net 'n ID en 'n naam.
En nou, kennis dat ons gebruik krulhakie notasie,
die inkeping en die wit ruimte is 'n soort van sinnelose
en dit verklaar 'n veranderlike wie se naam is Rob
en wie se ID is 1 en die datum tipe is hier ons nommer
en string onderskeidelik.
En dan is dit iets effens anders
As jy al ooit iets gedoen met Ajax hierdie dae?
Jy het waarskynlik gebruik 'n voorwerp soos hierdie
maar wat is die moeite werd om daarop te let hier?
Wat is sintakties ooit so anders, net 'n paar
van die dinge wat tussen hierdie voorbeeld wat weliswaar kleiner
en die groter voorbeeld.
So, die eerste keer in die leek se term, wat is dit?
Wat is die aard van die personeel sou jy sê?
OK, dit is 'n skikking, dit is 'n verskeidenheid van wat?
>> Voorwerpe.
>> OK, dit is 'n verskeidenheid van voorwerpe.
En nou, fokus op net een - enige van hierdie voorwerpe,
Wat is die verskillende tussen dit en dit?
>> Die sleutels is snare.
>> Ja. So, die sleutels is snare,
en die sleutels is eintlik snare in beide gevalle
en dit is 'n soort van 'n idiotiese
In my opinie historiese ontwerp besluit wanneer jy met
Into JavaScript Voorwerp Notasie,
wat in wese 'n vervoer-formaat
vir die stuur van data tipies oor die netwerk
tussen die kliënt en bediener, wat jy nodig het om te onthou
dat dit nie eintlik geldig into en dit is een
van hierdie FYIs tensy jy al ooit jou kop kap teen die muur
vir 'n paar minute vir die goeie rede, dit is nie geldig into
omdat die sleutels is nie eintlik aangehaal.
Into idiotically vereis dat die sleutels is nie net aangehaal word,
maar dat hulle dubbeld word aangehaal, enkele aanhalings volstaan ​​nie.
So, dom dingetjie en meer van 'n pret feit
vir vandag se doeleindes, maar hierdie ook sou geldig wees JavaScript
dit is net nie - die omgekeerde is nie waar nie.
Alle regte.
So, sal ons baie sien meer van daardie.
Alle regte.
So, dit is JavaScript sintakties waarskynlik redelik
bekende, enige van julle wat nooit JavaScript gebruik voordat
dit is nie 'n groot sprong van PHP of die meeste 'n proses taal
wat jy kan gebruik.
So, vandag sal ons fokus op die interessante aspekte
JavaScript veral in die konteks van geen JS
maar nie uitsluitlik nie, want tot nou het jy waarskynlik
As jy Javascript gebruik, gebruik dit binnekant van 'n leser.
Dus, geen JS is 'n omgewing dan in 'n bietjie gaan
toe te laat om ons te bekom JavaScript-kode kliënt -
bediener kant, maar die eerste, Kom ons neem 'n blik
op iets wat 'n bietjie meer kliënt kant.
So, ek het in gegaan en dit is gekoppel aan die kursusse webwerf,
As jy wil om te speel saam, Daar is twee subgidse
in vandag se Zip van genoem bron studs rits op die webwerf
en dit is net 'n paar voorbeelde reminiscing
van die dinge wat jy dalk gesien het voor en ek soort van gebou om hulle
uit eenvoudigste effens meer ingewikkeld om te pla
'n paar van die funksies van JavaScript.
So, laat ons gaan voort en neem 'n kyk byvoorbeeld na hierdie.
So, ongelukkig is die knip tag was vermoor af 'n paar jaar gelede
as die pad gekry het mooier en mooier
en die knip tag was letterlik oop bracket knip naby bracket
en dit soort van geen meer met ons nie.
Maar, kan ons nog steeds wek die idee van 'n etiket deur net 'n soort
dink oor dit logies, hoe gaan jy
oor iets soos die maak hierdie intuïtief knip?
Wanneer jy weet 'n bietjie bietjie van JavaScript en CSS of
Op hierdie punt, is dit OK as jy dit nie doen nie.
>> Stel 'n tyd om uit en steek dit dan na sal ek dit merk
uit en wys dit weer.
>> Ja, volmaak.
Dit is 'n soort van programmering 101
hoe sou jy bereik 'n visuele effek soos hierdie?
Wel, jy een of ander manier iets om te wys
en dan steek iets show iets weg te steek om iets
en as Jonathan stel gebruik 'n soort van die tyd uit,
'n soort van skedule wat jy kan doen hierdie herhaaldelik sonder
'n lus of te gebruik iets soos dit.
So, laat my gaan in knip-0.html
en laat my krimp die skrif 'n bietjie
sodat meer van hierdie pas.
En laat ons 'n blik na wat gaan hier aan.
So, die eerste van alles, sien dat die liggaam
van hierdie bladsy is super eenvoudige, binnekant van die liggaam
van die bladsy is net 'n div.
Ek het arbitrêr gegee 'n ID van groet
en dit kan enigiets wees so lank as wat dit is uniek
en dan het ek net 'n paar eenvoudige teks, hallo wêreld.
So, as ek blaai nou op, agterkom dat sekere sagte stilering.
So, sê Ek, skerp groet, wat soos jy weet
in CSS beteken net uniek die element te identifiseer
met 'n idee van groet,
lettergrootte is arbitrêr gaan wees hierdie, marge en teks te pas.
So, vervelige estetiese besonderhede
tot ongeveer sentrum van die teks.
So, die interessante deel is in die script tag hier
wat ek gebeur binne-in sit van die hoof van die bladsy.
So, we'll - jy kan doen dit in 'n aantal maniere
en ons sal 'n paar te sien iterasies van dieselfde program
maar laat ons begin van die top.
So het ek verklaar dat 'n funksie genoem knip
en blykbaar is dit gebruik hierdie ingeboude DOM metode genoem
getElementById wat miskien een van die meer kragtige metodes
dat jy uit die boks met JavaScript op soek na
"Groet" nie hoef te dubbel aanhalings soos dit was
in HTML is óf is goed so lank
as jy stilisties konsekwent hierdie dae durf ek sê
baie mense gebruik Java, enkele aanhalings in JavaScript,
dubbel aanhalings in HTML, maar dit maak nie regtig saak nie
so lank as wat jy konsekwent.
So, hier as jy nie vertroud is, jy kan eintlik toegang
met JavaScript CSS eienskappe van die elemente.
So, sien dat Ek het verklaar 'n veranderlike genoem div
en gestoor word binne van daardie veranderlike,
'n verwysing na wat ook al dat DOM element is.
So, as jy terug na CS50 dink of enige klas in wat jy gedink
oor boom strukture en DOM, Document Object Model,
dit is net 'n verwysing om 'n knoop in 'n boom,
wat verteenwoordig hierdie bladsy
en as div.style.visibility eiendom gelyk, gelykes, gelyk,
verborge, dan het ek net wil 'n skakel dit
Jonathan voorgestelde anders wat ek wil
dit om te wissel na die verborge.
Nou, soos in die kant, hoekom die drie is gelyk aan daar?
Of wat is dit teenoor dubbel gelykes?
>> Streng ekwivalent.
>> Jammer.
>> Streng ekwivalent.
So, dit is die identiteit operateurs
Waar jy die nagaan nie slegs die waarde van die veranderlike
as 'n gelyke, gelyke sin maar ook die tipe van dit.
Dus, selfs al het ons nie gespesifiseerde so ver enige data
tipes vir enige veranderlikes in hierdie of enige van die skyfies,
daar is 'n tipe geassosieer met die string weggesteek
met die waarde, verborge en Dit is natuurlik string.
So, in hierdie geval, is dit nie regtig saak nie
want daar is geen manier dat ons gaan 'n string te conflate
van die "verborge" met 'n ander waarde
maar dit is dikwels 'n goeie gewoonte wat ek sou sê om te kry
in die gebruik van die gelyk, gelyke,
gelyk teken is oor die algemeen 'n goeie ding.
Dit sal jou kode te maak meer robuuste beide in PHP, maar
en in JavaScript want jy sal hardloop
in soms hoek gevalle waar die waarde nul kan wees
dat jy die keur vir en zero kan conflated word met vals
of kon nie en as in PHP wees,
Javascript te kan verskeie het vals waardes waar deur nul
en vals en van nul en ongedefinieerde almal kan oplos implisiet
vals.
Maar as jy regtig wil na te gaan vir besondere waarde
soos nul, die aantal, of valse die Boole dan moet jy
hierdie identiteit operateur te gebruik.
So, kan dit gebeur te kry in elk geval, selfs al is hier,
dit is soort van sinnelose omdat ons weet ons is die beheer van
vir 'n string waarde en dit is nie van plan om iets anders te wees.
So, hier is die magic dan, as ek blaai af na hierdie lyn hier,
blykbaar, gebou in die venster voorwerp
en dit is 'n kenmerk van 'n leser kan jy toegang tot
hierdie super globale voorwerp genoem venster,
binnekant van wat sommige funksies,
Indien stuk wat is ingestel interval
en dit neem blykbaar watter soort argumente?
Ja.
>> Function oproep en 'n tyd.
>> Goed. So, 'n funksie bel en 'n tyd
en so veral 'n verwysing na 'n funksie,
'n verwysing na 'n funksie in 'n sin
en dit is die funksie wat gaan
uitgevoer raak elke getal millisekondes en in hierdie geval,
dit is elke 500 millisekondes.
So, dit is 'n manier van beïnvloeding effektief en oneindige lus
sonder die gebruik van herhaling, maar plaas vertel JavaScript
aan die enjin binne van die leser
dit elke 500 te doen millisekondes of naby
500 millisekondes soos dit kan,
dit blyk dat onder die enjinkap,
daar is wat genoem word 'n gebeurtenis lus en ons sal terug te kom na hierdie
in die konteks van node JS dat net voortdurend soort
van die vergadering is daar, spin, wag vir werk wat gedoen moet word
en sodra dit besef,
500 millisekondes geslaag knip sal weer 'n beroep te raak
en weer en weer is saam met enige ander werk
wat moet gedoen te kry.
So, wat kan ons hier te verbeter?
Wel, laat ek oop up Blink-1.html
en demonstreer die knip-1.html
as esteties perfek identies.
So, wat kan ons hier te verbeter?
Wel, agterkom dat dit was soort van nutteloos
'n funksie genoem te definieer Blink want hoeveel
Op hoeveel plekke het ek noem die funksie knip?
>> Net een keer.
>> So, een.
So, dit was nie sleg nie, in Eintlik is dit waarskynlik redelik
reguit vorentoe.
Ek gedefinieer 'n funksie knip, het ek noem 'n funksie knip deur middel
van hierdie parameter, maar tegnies,
daar was nie rede vir dit en 'n gemeenskaplike paradigma
in JavaScript is om werklik gebruik van lambda funksies maak
As jy kan onthou uit 51 of anonieme funksies
waar as jy nie 'n naam vir 'n funksie,
as jy net noem dit beslis in een plek,
Hoekom pla stapels jou kode, stapels die programmeerders gedagte
en jou naam ruimte regtig met simbole
dat jy nie regtig moet omgee.
En so, in hierdie weergawe hier,
agterkom dat ek vra window.SetInterval direk
op die top van my scripttag dan is ek verby
in 'n naamlose funksie dit neem geen argumente
en dit is perfek boete en dan is die liggaam
van daardie funksie blyk dit is identies aan wat dit was voor
en die enigste sintaktiese verskil is nou
hier langs die 500.
Ek is die sluiting van die liggaam van die funksie
en dan ek sê voer dat vorige kode,
elke 500 millisekondes.
So, baie marginale verandering
maar 'n stap in die rigting wat is waarskynlik 'n meer elegante
implementering van hierdie.
So, laat ons hierdie een stap verder as ek nou gaan
in knip twee, sal jy sien 'n gemeenskaplike biblioteek,
die effek van wat gaan
om heeltemal onbelangrik esteties, maar as ons gaan
in weergawe twee hier, kennisgewing wat aan die bokant van my kop,
Ek het ingesluit die jongste weergawe van jQuery.
En dan, hier, Ek het net skoongemaak
die kode 'n bietjie, dit is gaan nie na 'n prettige wêreld
om voort te gaan met behulp van moedertaal DOM funksies
en soort van rou JavaScript.
In werklikheid, JQuery as jy kan weet het so gewild geword
dat die meeste mense net konflik met jQuery JavaScript
maar eintlik net 'n maaltyd nuttige biblioteek geskryf
deur 'n mede met die naam John Resig en aangesien ander
wat maak net 'n baie vervelige dinge
in JavaScript makliker en meer bondige.
So, in hierdie geval hier wat gaan aan?
So, ek het hierdie voorkoms van 'n dollar-teken, meer oor dit
in net 'n oomblik, dan dit is 'n CSS selector.
So, dit is baie soortgelyk in gees wat ek gedoen het voor,
maar hierdie keer, ek is letterlik met behulp van die hash tag
'n unieke aan te dui identifikasie genoem groet
en dan glo . Css is 'n metode gebou
in aan enige voorwerp is dat ek net geskep
en ek is die beheer van die waarde van die sigbaarheid sleutel.
En as die waarde van die sleutel gelyk, gelykes, gelyk, verborge,
dan gaan ek dit om te wissel en Ek gaan om dit te skakel hierdie tyd
deur dieselfde metode wat blykbaar oorlaai
in die sin dat dit twee verskillende handtekeninge,
met die een argument en een met twee argumente,
die tweede van wat is die setter,
die voormalige van wat 'n lucky om so te praat.
En as nuuskierig en as jy wil nooit eintlik kyk na hierdie,
As ons gaan om hopelik jquery.css die top treffer is inderdaad hierdie
en jy kan sien 'n meer formele verklaring
dat ons net hierdie, . Css met eiendom naam
En dan is die opsteller is dot CSS
met 'n eiendom se naam en 'n waarde.
So, wat effens skoner, maar kennis van die soort van patroon hier
met elke iterasie van hierdie kode,
ons soort van wat dit strenger en strenger en strenger
en daar sê 'n beter ontwerpe
want ons is met behulp van iemand anders se kode wat is uitgeskakel
sommige van die kompleksiteit.
So, laat ons nou maak dit selfs makliker.
En in die waarheid, as ek verwyder al die aanhalings wat jy sal sien net al die
kommentaar sal jy sien hoe eenvoudige dit gekry.
Die een verskil hier is natuurlik
dat ek met behulp van 'n skakel metode wat kom ook gebou
in te jQuery en dit is net
omdat iemand anders geskryf die kode
wat eintlik toggled die sigbaarheid instelling
enige DOM element dat jy dit stuur.
So, beter en beter.
En so, dit is 'n patroon,
selfs al is dit 'n maaltyd eenvoudige voorbeeld en sorteer
dom netto effek wat is 'n flikkerende stuk van die teks,
dit is dat die soort van denke proses wat jy moet dink -
dink oor nie noodwendig die heel eerste
passiewe iets te skryf vir die komende projek
maar seker as jy Itereer met u adviseur of met my
en jou span vergaderings of jy net seker jou spanmaats kode
oor strenger dinge, reg?
Na alles, hulle is minder -
'n minder reëls van die kode jy uiteindelik
in teorie die minder foute wat jy is geneig om te word uitgenooi
want daar is eenvoudig minder-kode te mors met.
Alle regte.
So, 'n paar van die wegneemetes.
Lambda funksies, anonieme funksies,
baie van wat jy gesien het voordat
en dan ook net strenger dinge met 'n biblioteek
soos jQuery in hierdie spesifieke geval.
Alle regte.
Enige vrae?
Kom ons doen 'n ander kliënt kant aspek hier,
in vorm nul ons het hierdie netto effek.
Super eenvoudige vorm en glo As ek probeer om te kliek registreer hier
Aanvanklik is dit vir my sê jy geregistreer is, wel, nie regtig nie.
Wel, hoekom is dit?
Wel, hier is vorm-0.html baie min kode,
geen JavaScript hoegenaamd en dit is heeltemal 'n vals soort
vorm nie aangesien die werking waarde is registered.html
wat beteken dat geen saak wat Ek tik in hierdie vorm,
waar gaan dit word op die bediener gestuur?
Ja. So, om registered.html wat is duidelik 'n HTML-lêer
wat is dus statiese lêer wat geensins
van die neem van die gebruiker se toevoer veronderstelling daar is geen JavaScript kode
ingesluit in dit wat soek in die URL
so dit is heeltemal 'n noop en dat niks gaan gebeur
met 'n voorgelê data nie, maar kan jy die struktuur sien
van 'n redelik eenvoudige HTML5 vorm
wat 'n paar wagwoord 'n paar insette tipes.
So, laat ons nou eintlik voeg 'n paar foutopsporing
en sien hoe ons kan verbeter nie.
So, hier is 'n soort van 'n swak man se manier van die uitvoering van hierdie
en dit is soort van 'n nare stuk van die kode.
So, eers laat rol af na die onderkant
om te sien wat dieselfde en wat anders is.
Die enigste ding wat verskillende nou tussen hierdie
en die vorige weergawe is dat ek die vorm en ID het gegee
van die "registrasie" kan gewees het iets wat ek wil
maar sy veronderstel is om te wees unieke identifiseerbare selfs dit is nie
streng noodsaaklik, want as 'n bladsy het slegs een vorm sekerlik ek
kan dit vind by een van jQuery se selector metodes.
Maar op hierdie manier maak net dit meer deterministiese.
So, as ek gaan nou na my script tag, neem kennis van die volgende,
window.onload gelykes 'n anonieme funksie.
So, wat is dit?
So, kan jy onthou dat in kliënt-kant programmering -
JavaScript eerder HTML bladsye het verskeie gebeure wat verband hou
met elemente, klik en die indiening en fokus
en vervaag en ander sulke gebeure wat kan gebeur
as 'n gebruiker tipies wisselwerking met die bladsy
window.onload doen wat dit sê.
Op die vensters hele laai
So een keer al die foto's is Sodra afgelaai al die lêers het
afgelaai en een keer die bladsy gelaai is,
doen die volgende kode, en die agterkom as ek oorskakel na die onderkant
van hierdie metode, sien dat daar is geen hakies
na die krullerige stut wat om te sê
dat ek nie die uitvoering hierdie funksie hier nou,
die leser gaan uit te voer dit vir my wanneer dit bepaal
dat die bladsy gelaai word.
So, laat ons sien wat ons gedoen het,
document.getElementById registrasie
sodat net gee my 'n verwysing na die knoop
in die boom dit is van het 'n ID van registrasie.
En nou, ek gaan om te registreer 'n ander geval hanteerder
deur te doen kry form.onsubmit hierdie anonieme funksie
wat die volgende beteken kode moet voer wanneer
daardie vorm ingedien word.
Nou, die meeste van hierdie is net soort van vervelig logika.
Dus, as die waarde van die e-pos veld in die vorm
"Niks" Dan moet jy verskaf jou e-posadres,
jy gil op die gebruiker met 'n waarsku en dan terug onwaar.
En dan het ek 'n n klomp van die ander tjeks,
die tjeks vir die wagwoord,
die tjeks indien die wagwoorde is dieselfde,
die tjeks indien die ooreenkoms boks is nagegaan of nie
en ek het net skree die gebruiker indien enige
van daardie toetse eintlik misluk.
En so, hier is 'n voorbeeld selfs al is dit 'n bietjie slinks
hier om die feit dat ek gebruik gelyk, gelykes, gelyk,
beteken dat die gebruiker kan nie probeer om my te mislei
deur te tik in watter waarde.
Of liewer Ek is werklik kontrole vir die teenwoordigheid
van die leë string, die gebruiker het niks getik nie.
As die gebruiker getik in letterlik zero,
"Zero" potensieel kan wees verwar met die leë string.
En ek sê dit is soort sinnelose hier
want natuurlik selfs nul is nie 'n e-pos adres.
Maar as dit was 'n meer generiese veld soos 'n teks veld
of 'n naam of 'n beskrywing of iets wat jy wil na waarde vir
en dit is nie noodwendig sintakties het
'n e-pos-adres, die gebruiker te wees kan iets tik, soos nul
en weer hoek geval, maar dit is Hoekom tipies nagaan tipes is
'n nuttige ding.
Jy is werklik kontrole vir dat die gebruiker met getik niks
in daardie gebied.
So, wat gebeur as geen van die toetse misluk, goed,
terugkeer waar binne van 'n gebeurtenis hanteerder
soos onsubmit beteken net laat die oorspronklike gedrag eintlik
propageer en daarom is die vorm voorgelê sal kry.
En dit is hoekom wanneer ek uiteindelik gekliek voorlê voordat ek
deur te register.html en as ek doen wat nou, kennisgewing,
Ek kry geskree as ek dit nie doen nie bied 'n e-pos adres
en ek kan tik in malan@harvard.edu,
bloedrooi [fonetiese], bloedrooi die boks,
En nou registreer en dit vertel my, weer,
u geregistreer of nie regtig nie.
Alle regte.
So, laat ons skoon te maak van hierdie up net 'n bietjie en dan oorgang
na die nuwe nuwer bediener kant dinge.
So, as ek gaan in vorm-2.html, sien 'n paar dinge.
So, een, ek het jQuery terug in die mengsel
so daar is weer hierdie dollar-teken
en nou is ek met behulp van paar jQuery metodes.
So, in die eerste, wat is dit oor die dollar teken dat is
so spesiaal hier?
Wat is die dollar-teken gedraai Dwarsdeur die meeste 'n jQuery-kode?
Ja.
[Onhoorbaar Nota]
OK. So, die dollar teken funksie gaan deur die DOM soek
vir iets met hierdie veral CSS selector.
So, waar maar amper te presies.
Dit is wat gebeur wanneer jy in 'n string slaag
soos in hierdie geval, maar jy dit nie doen nie altyd in 'n string te slaag.
In werklikheid, geval in punt, die einste eerste reël hier is dit nie 'n
CSS selector, ek verby in 'n Lambda funksie.
So, meer in die algemeen - so, goeie antwoord, maar ook presies.
Meer in die algemeen, wat dollar-teken voor?
>> Net jQuery.
>> Ja. So, net jQuery of is dit net 'n funksie
dat sommige ou jaar gelede geskryf het en ander mense het
sedert versterk wat letterlik by verstek genoem word -
oops, is jQuery genoem.
Dit is net - dit blyk uit teenstelling met 'n baie
tale dollar-teken is 'n volkome geldig simbool te gebruik
in 'n veranderlike se naam, terwyl
in PHP dollar-teken natuurlik het 'n spesiale betekenis
maar in JavaScript soos in sommige tale, dollar-teken
en onderskryf en ander sulke spesiale karakters heeltemal wettig
te gebruik in jou eie simbool name vir veranderlikes.
So, iemand net besluit dat jy weet wat?
Dit gaan redelik vervelige
die hele wêreld te maak tik jQuery al die tyd,
laat my soort plant 'n belang in die grond en sê:
"Die biblioteek sal gebruik dollar-teken. "
En in werklikheid, hierdie nie verhoog die risiko
dat iemand anders vermetelheid gaan die dollar-teken te gebruik
vir sy of haar biblioteek, maar daar is maniere om te soort te verseker
dat wanneer jy gebruik maak van die dollar teken kaarte te jQuery
want jy kan toets of dit is reeds aangestel
om iets anders in wese.
Alle regte.
So, dit is al wat is, is daar geen magic.
Dit is net 'n sexy soek stuk sintaksis wat 'n mooi
en 'n vinnige en maklik om te tik.
So, wat gebeur wanneer jy tik dollar teken oop hakie
en dan 'n anonieme funksie.
Wel, blyk dat dit eintlik snelskriknotasie
vir die dokument dot gereed oop hakie.
So, as Cynthia opgemerk Vroeër het ons reeds gevind een
hoek geval.
As jy net slaag in die lambda-funksie,
die effek van die dollar teken is 'n bietjie anders.
In werklikheid, wat werklik gebeur is dat dit gelykstaande is aan die,
verby in 'n verwysing na die globale dokument voorwerp
dit is net soos globale die venster voorwerp
wat gee jou 'n paar spesiale funksies
wat invloed op die hele bladsy of die leser en dit blyk
uit daardie dokument toe jy draai met jQuery,
jQuery besef wese, O, dit is 'n verwysing
om daardie spesiale dokument voorwerp,
Laat my nou registreer 'n geval hanteerder genoem gereed
wat is nie inheems JavaScript of DOM verwant is.
Gereed is 'n jQuery ding wat sê
wanneer die bladsy is gelaai al die HTML-elemente
maar nie noodwendig gelaai, al die CSS en beelde
en JavaScript-lêers en flits lêers en dies meer.
So, dit is 'n stap voor op load dan voort te gaan
en uit te voer die volgende.
En die onderstebo van die gebruik van gereed beteken is dat jy kan, jy weet,
dat al die elemente in jou DOM,
al die uniek geïdentifiseer dinge met ID's, hulle bestaan ​​selfs
As die bladsy, die inhoud daarvan steeds laai en laai
en jy het 'n paar gebreekte ikone vir 'n oomblik
of wit bladsy in die agtergrond.
Ja.
>> Wat sou gebeur As [onhoorbaar]?
>> Perfekte voorbeeld, 'n perfekte vraag.
So, laat ons kyk of ons kan simuleer hierdie reg nou.
So, laat my voort te gaan en verwyder hierdie twee lyne hier en dan
sonder om vas te stel die inkeping, laat my gaan voort
en skrap hierdie hier - Oeps, hierdie een hier.
En nou, laat ek gaan oor na die bladsy, gaan na vorm-2.html en tipe
in Register, niks was om te gebeur nie, kom ons sê, waarom was dat,
Kom ons gaan voort en oop up Chrome se inspekteur,
oop te maak die Console net om te sien As iets gebeur hier, nou,
registreer, nog niks.
So, is die kode sintakties fyn
so ek sien nie enige rooi fout boodskappe,
Maar wat duidelik gebeur nie?
Nie een van my kode reg is, dit is nie die werk so geen
van my kodes blyk te wees uitvoering, so hoekom is dit?
Wel, JavaScript en implementeer meer in die algemeen uit te voer die
inhoud van 'n web bladsy, bo na onder, links na regs.
En die probleem is omdat die top
van hierdie bladsy HTML dan kop dan script dan nog script,
dit gaan kry uitgevoer voor wat selfs bereid om,
of selfs bestaan ​​in die boom verteenwoordiging van die bladsy.
Die vorm self, nie eens die liggaam bestaan ​​op hierdie punt.
So, jQuery is slim genoeg met dit se foutopsporing
dat as daar geen element met die unieke ID van registrasie,
dit is nie van plan om borgtog uit op jou
en net aktiveer sommige console foute en breek die hele bladsy,
dit gaan stil ignoreer nie, maar die rede dat niemand
van hierdie kode ooit voer is
want as jy hou hierdie onderwerp hanteerder,
daar was geen element om dit te heg aan.
So, dit is soort van 'n geen op daar.
So, deur te spesifiseer plaas, wag totdat die ouderdom gelaai
As ons die window.onload ding wat is 'n soort
van die ou skool manier van doen dit of die sexier jQuery manier
soos hierdie, kan ons vertel hy wag totdat al
van diegene HTML tags het is geparseerd sodat selfs
As die beelde nie gelaai op minste node is in die boom,
dan JQuery kan verseker word dat alles is daar.
Ja.
[Onhoorbaar Nota]
Ja, goed, ja absoluut.
So, die ander oplossing vir hierdie, as jy nie gebruik van hierdie
of kan nie onthou dat dit bestaan,
jy kan absoluut beweeg al hierdie aan die onderkant
van die webblad, binnekant van die liggaam nog maar onder die vorm
En dit sou ook Los hierdie probleem.
Dis net tipies beskou as slegte praktyk.
Dit is 'n bietjie slordig en slordige spesiaal
as jy hou storing alles aan die onderkant van die bladsy,
veral wanneer ek hou dinge eenvoudig deur om al
van my kode binne-in van die HTML bladsy
wanneer jy natuurlik kan beslis in die gewoonte
factoriseren dit uit na 'n aparte lêer
op watter punt is dit net lekker
te sentraliseer die lêers in die kop.
Behalwe dat daar is 'n prys wat jy betaal
deur om JavaScript ander bates soos CSS lêers
in die kop van die bladsy, Wat is 'n risiko dat jy loop?
>> Stadiger bladsy laai.
>> Stadiger bladsy laai, hoekom?
>> Omdat ons probeer al die biblioteke te laai
voor [onhoorbaar].
>> Juis omdat blaaiers lees die kode van bo na onder,
links na regs as Google analise is stadig
of die jQuery CDN is stadig of die Facebook API is stadig
en dat die lêer net hang potensieel afhangende
oor hoe jy gelaai hierdie lêer, die hele bladsy kan verskyn op te hang.
En as jy kyk na hierdie 'n baie eerlik
op webwerwe hulle het 'n baie van lae gehalte advertensies
op hulle, ons is net een stadige of sluk webwerf kan 'n bladsy te hang
vir 'n paar onbepaalde aantal sekondes
totdat die leser hopelik keer op daardie
en dan wys jou die res van die bladsy.
So, as jy al ooit gebruik soos die Facebook, soos knoppie,
in jou webblad, laat my kyk of ek dit kan vind
sonder om hier aan te teken.
So, as jy gaan na die Soos knoppie Facebook se
en op 'n get-kode, damn dit,
Kom ons kyk of ons kan vind die voorbeeld,
sekerlik iemand het gepos nie.
[Pouse]
Ek gee in 'n paar sekondes as ons nie sien nie.
Facebook synchronous - OK.
So, dit is die kode en tensy hulle het dit onlangs verander
dat Facebook eintlik beveel aan dat jy gebruik
hul biblioteek te laai en eintlik stel
dat jy sit dit in die liggaam van jou bladsy.
So, Facebook beveel jy skep 'n soort van dom DIV
dat net het 'n unieke ID soos , dan het 'n script tag
en al hierdie kompleksiteit wese nie die volgende
en hulle het nie enige JQuery gebruik nie omdat hulle nie wil hê
enige ander om te aanvaar afhanklikes,
laat my beweeg hierdie oor net 'n bietjie.
So, sien hulle het 'n anonieme funksie hier,
meer op wat in net 'n oomblik,
Hulle het dan gebruik document.createElement,
hulle is die skep van 'n DOM element, dit is soos malloc so te praat
waar die merker is van die tipe script, dit is dan spesifiseer
dat die ASYNC kenmerk van daardie merker gaan
om waar te wees, dan jy gaan voort en uit te vind wat die URL
van Facebook se JavaScript behoort te wees
en dit is net die fancy manier
van kontrole moet dit HGP of HDPS.
En dan uiteindelik, jy sien wat Facebook doen,
hulle kry die DOM node wat het 'n ID van Facebook wortel
en dit is wat hulle gesê jy in die bladsy te sit
en dan sal hulle voeg die kind sodat die effek van dit alles is
te sorteer van dinamiese spuit 'n nuwe script tag in jou bladsy
as 'n kind van die DIV dat jy ingevoeg is daar sodat die res
van die bladsy laai gelukkig
en dan hierdie kode eintlik kry asynchroon gelaai.
So, in wese na die feit en ek uitgestel melding
van die anonieme funksie,
Wat is dit funky sintaksis verwys hier
wanneer ek het nie net funksie oopmaak van voorwerpe, naby hakie
en dan krulhakies, waarom die oop hakie hier
en dan sal die oop naby, naby hakie daar, wat is dit doen?
>> [Onhoorbaar] definieer en dan die uitvoering van?
>> Presies, dit is die definisie van 'n funksie wat 'n anonieme
maar bloot 'n funksie te definieer,
natuurlik nie voer 'n funksie totdat jy dit noem
by die naam, maar natuurlik hierdie is 'n anonieme funksie
sodat jy kan nie noem dit by die naam, maar jy kan
in JavaScript voer 'n anonieme funksie net
deur vat die hele ding in hakies as wat ons gedoen het
met hierdie hakie en dit hakie hier en dan 'n bevestiging
aan die einde van die funksie oop paren, naby paren,
As jy nie wil slaag dit enige argumente.
Maar dit lyk soort van dom,
soos waarom hierdie bykomende sintaktiese kompleksiteit
dat die meeste mense nie lyk te erken, wat is die waarde
wikkel diegene drie reëls van die kode
in 'n anonieme funksie op hierdie manier.
Ja.
>> Om te verhoed dat die vervang 'n waardevol in die [onhoorbaar].
>> Presies, om te verhoed dat vervang van 'n veranderlike
in die bestaande bladsy, reg?
Facebook is 'n bietjie deur vermetelheid het besluit,
hulle gaan gebruik om die veranderlike E, is dit baie waarskynlik
dat jy of enigiemand met behulp van die Facebook soos knoppie
of enige ander sosiale plug
in 'n veranderlike iewers genoem E. So,
deur vat al van hulle kode binne-in
van hierdie anonieme funksie, het hulle wese het hul eie omvang
wat nie waag beuken enige bestaande veranderlikes.
So, dit is ook eintlik 'n baie algemene paradigma,
veral wanneer skryf 'n biblioteek-kode
of wanneer jy jouself doen nie jou naam ruimte te warboel
met ander veranderlikes wat jy wil die waarde te leef
en sterf sodra jy die uitgang daardie blok van die kode,
dit is 'n mooi tegniek in JavaScript.
Alle regte.
So, dan terug na hierdie voorbeeld hier, alles wat ons in die einde gedoen het
met hierdie voorbeeld is net skoongemaak die kode.
So, dit is nog steeds 'n hele n klomp van die skakelaars, 'n hele klomp
van toestande hier, maar sien 'n bietjie van sintaksis,
hierdie toegang tot die DOM knoop met die unieke ID registrasie,
die ruimte middel lyk nou vir 'n afstammeling van die knoop,
vind dit as dit is van die tipe insette en dan selfs
As jy nie gesien het nie hierdie voor, kan jy weet
dat dit beteken net vind dit met die insette tag,
die insette elemente wat 'n kenmerk van 'n naam met 'n waarde
van e-pos, en dan laat my waai my hand op 'n sekere
van die res is nie alles wat stimulerend
maar eintlik net jQuery sintaks vir dieselfde bedrywighede.
Alle regte.
Maar wat is nie so belangrik nie hier is die leser kant dinge
maar eerder die feit dat ons het skoner en skoner maniere
van die werklikheid te maak wat die kode werk.
Alle regte.
Enige vrae?
[Onhoorbaar Nota]
OK. Nou is die pret deel.
So, node.js Hoekom?
Wie gee om?
Wat weet jy van vandag?
Node.js, hoekom?
Henry [aanvaar spelling].
[Onhoorbaar Nota]
Battery herstel?
Wat - dit is 'n perfekte krans hanger
vir die tweede helfte van vandag.
Hoekom het ons nie gaan neem 'n 5 minute breek hier,
daar is 'n half lekkergoed masjien is daar as jy wil
soos 'n paar lekkergoed sonder om 'n kwart in