ALLISON Buchholtz-AU: Alle regte almal.
Welkom terug na afdeling.
Dit is ons voorlaaste afdeling.
Dit is so hartseer.
Ek weet nie wat ek gaan doen sonder om te sien julle ouens elke Maandag.
Ek dink ons ​​moet just-- Miskien kan ons net
hier ontmoet en aandete of iets.
Ek weet nie.
Ek sal kos bring in plaas.
Ons sal net praat.
Maar ja, volgende week sal ons laaste artikel.
>> Op daardie noot, jy het 'n quiz volgende week.
Ek weet ek het my te doen, soos, twee week vooraf kennisgewing verlede week,
maar hopelik julle ouens geweet dit kom.
Hopelik is dit een van die laaste midterms vir julle vir die semester.
Maar dit gaan al die te dek materiaal wat ons het gegaan oor.
So dit is nie soos jy net kan vergeet omtrent vier sirkelroetes of veranderlikes.
Omdat ons geleer diegene in die begin,
dit is natuurlik fair game vir jou quiz.
>> Dit gaan wees om die dieselfde formaat, dieselfde lengte, so jy reeds gebruik om dit te.
Daar gaan wees kodering met die hand probleme,
miskien 'n paar ware valse, miskien 'n paar kort antwoord.
So jy moet wees vertroud is met die formaat,
veral as jy die praktyk te toets.
Maar soos ek sê hier, dit is kumulatiewe, maar ons is beslis
gaan word met die fokus op dinge van week ses af.
So, ons is waarskynlik nie gaan om jou te vra oor hoeveel bytes
is in elke tipe of hierdie soort van dinge,
maar ons is waarskynlik gaan om te wees belangstel in dinge soos geskakelde lyste,
of verskillende data strukture, of verskillende algoritmes
dat ons het gepraat oor.
So maak seker dat jy regtig op daardie, en as jy
moet enige hulpbronne, hier is baie van die hulpbronne.
Ek het net vir jou gegee het soort van 'n vinnige lys daar.
>> Volgende week sal quiz wees hersien gedurende hierdie tyd.
So indien u enige vrae of spesifieke onderwerpe,
spesifieke dinge op die quiz wat jy wil oor gaan, asseblief
stuur hulle vir my voor die tyd sodat ek kan soort berei sommige materiaal vir daardie.
En bykomend tot hierdie artikel hersiening, sal ons
ook hou die kursus-wye hersien soos wat ons gedoen het die afgelope tyd.
En dit gaan wees gedoen deur dieselfde mense.
Ek weet nie of dit maak dit 'n beter of slegter,
maar dit gaan my te wees, Hannah, Davan en Gabe weer.
So as jy wil kom kyk ons almal geskerts met mekaar
en loop jy deur quiz hersiening, moet jy beslis
kom dat die volgende Maandag ook.
So jy sal net 'n Maandag konfyt verpak van quiz hersiening, wat goed is
want dan moet jy Dinsdag te verwerk deur alles.
>> Maar beslis nie gaan uit hierdie hulpbronne.
Study.csv.net is by verre, ek dink, een van die mees bruikbare,
veral omdat dit 'n baie van die monster-kode,
dit het al die kragpunte met al die notas oor dit,
wat regtig wat ek trek die meeste van my artikel materiaal uit.
As daar enigiets in die vorige afdelings wat ek kan gestuur het om uit
dat jy nie mag hê gekry, maar laat my weet.
Soos verlede week se voorbeeld kode, as iemand nie kry nie,
e-pos my of kom praat met my, en ek sal seker maak dat jy dit maak.
>> So met dit, vandag gaan ons om te praat oor JavaScript.
So hier is ons Tommy, wat ek was net met jou praat gisteraand.
Ek is mal Tommy.
JavaScript is sy gunsteling taal, soos hy sê hier.
Hulle sal probeer en vertel dat dit nie die beste, en hulle sal verkeerd wees.
So Tommy is 'n JavaScript meester.
Ek is nie heeltemal op sy vlak, maar ek was soos,
"Tommy, hoe leer ek hierdie kinders JavaScript? "
So ek het 'n paar wenke, sodat hopelik sal hulle uit te werk.
>> So 'n paar dinge om te weet, is dat JavaScript is 'n kliënt-kant skripte
taal, so terwyl PHP is iets dat ons beskou as meer bediener-kant,
dit oplaai na die bediener, saamgestel en daar uitgevoer.
Hierdie een is uitgevoer op jou eie masjien.
OK?
So jy laai 'n paar JavaScript bladsy en dit voer op jou rekenaar.
Sintaksis is baie soortgelyk aan C en PHP.
Ons gaan om te gaan deur middel van 'n paar voorbeelde van JavaScript,
en jy gaan om te sien dat die manier waarop ons praat oor veranderlikes, loops,
en voorwaardes is almal baie soortgelyk.
OK?
Die feit dat hulle is so soortgelyk is waarskynlik gaan sommige van julle te reis
up, in sommige gevalle, net omdat jy sal 'n bietjie van C inkorporeer
waar daar moet wees nie.
Miskien het jy probeer en tik iets wanneer dit moet nie getik word.
>> En op daardie een ding om te weet, is dat JavaScript
is 'n dinamiese getik taal, soos PHP.
So as jy ouens onthou van artikel verlede week,
toe ons soort doen ons PHP crash kursus,
het ons gesien hoe 'n string een kan wees het in 'n int een, en so meer.
Die tipe van jou veranderlikes word bepaal te hardloop tyd,
sodat hulle kan verander oor die loop van die program,
en in die dieselfde manier as wat ons nooit regtig verklaar tipes vir PHP veranderlikes,
ons gaan om dieselfde te doen ding hier, waar ons is nie regtig
die beheer van die tipes van ons veranderlikes, om so te praat, soos ons in C.
>> En dan een ding dit is pretty cool is
wat jy kan fout check via die konsole,
met hierdie groot funksie console.log, wat
kan jy om uit te druk verskillende veranderlikes of voorwerpe wat ons sal
praat oor.
Net soos verlede week toe ek soos, "gebruik hierdie funksie," met stort
uit jou pset dit is 'n funksie wat jy wil gebruik, console.log.
Ek was so verbaas wees hoeveel studente by kantoorure
het nie geweet oor die stortingsterrein funksie.
Maar ek was soos, "ouens, dit wil maak jou lewe soveel makliker. "
>> Alle reg, sodat dit was soort van net 'n kort ding, soos altyd,
ons het voorbeelde.
Ek weet julle ouens is lief vir hulle.
So hier is 'n voorbeeld van 'n baie eenvoudige JavaScript lêer hier.
So dit is net gaan om te skep hierdie pop-up wat sê,
"Hello world", wanneer jy Tik die bladsy, maar laat
probeer en loop deur middel van hierdie 'n bietjie.
So natuurlik is dit net soos jou normale index.html.
So, net ons normale sjabloon hier, en ons het HTML, ons het ons kop,
en net soos met CSS, hoe ons ingesluit 'n buite-lêer, reg?
Ons het 'n paar script type teks wat is JavaScript.
En die bron is hello.js, wat is hier.
Dit is die hele gebied van die hello.js.
En dan het ons het 'n paar titel en sommige liggaam HTML
dat ons nie regtig omgee nie.
>> Wat gebeur is, wanneer ons laai die bladsy, dit outomaties voer hierdie script.
OK?
So JavaScript voer outomaties.
So wat dit gaan doen, gaan dit gaan onmiddellik en uit te voer nie.
En dit gaan om te sê, "waarskuwing.
Hello world. "
Watter waarskuwing is die funksie wat eintlik genereer hierdie boks.
OK?
So dit is soort van alle sluit.
Daar is niks ekstra wat ons gehad het om te doen behalwe net wakker,
en dan alles wat ons wou binne ons Alert boks.
OK?
So dit is net 'n super eenvoudige voorbeeld van wat JavaScript kan doen.
>> Een van die baie cool dinge, soos ons sal sien,
is dat JavaScript kan jy jou webblaaie te manipuleer,
sonder om te herlaai hulle elke keer.
So as jy want-- byvoorbeeld, indien jy beweeg word oor iets,
As jy ouens ooit gesien soos Menu bars,
of wanneer jy hover oor 'n paar onderwerp, 'n drop-down menu verskyn,
dit is as gevolg van JavaScript.
OK?
So jy is nie te herlaai die hele bladsy te kry hierdie kieslys te wys,
jy net op soek na 'n spesifieke aksie wat die gebruiker het geneem,
watter gebeure geroep is dat ons sal kry in, en sodra jy sien dat jy sê,
"OK, iets oor hierdie wysig bladsy en maak dit anders lyk,
maar net hierdie spesifieke dinge wysig.
Moenie die hele ding herlaai nie. "
So dit is eintlik baie lekkerder, en jy hoef nie jou bladsye te laai,
en dit is regtig cool.
>> So veranderlike verklarings, sodat jy kan soort van sien nie,
Ek sit op die top hier, losweg getik.
So, dit is baie soos PHP.
Ons hoef nie te vertel JavaScript watter tipe ons
verwag elk van hierdie veranderlikes te wees.
Hulle kan wees wat tipes ons wil hê.
So jy in hierdie geval sien, ons verklaar hulle baie eenvoudig, net met 'n "var"
en dan wat ons wil ons veranderlike naam wees.
Een ding om daarop te let is dat wanneer jy sit var in die voorkant van 'n veranderlike naam,
dit plaaslik bestekke dit.
OK?
Dit is heeltemal redelike vir jou heeltemal net vee die var
en net s gelyk CS50, en wat sou net 'n globale veranderlike.
OK?
Sodat jy kan inisialiseer dit beide maniere, net hang af van hoe jy dit wil hê.
So as jy initializing dit binne 'n funksie,
en jy wil hê dat die veranderlike bly scoped binne daardie funksie,
jy gaan om te wil doen iets soos var noem 'n veranderlike,
versus as jy dit wil hê wêreldwyd scoped, jy
kan net nie die naam van die veranderlike en dan
alles wat jy wil dit gelyk aan.
OK?
>> Dit is 'n soort van 'n cool ding hier, want as ons agterkom dat ons veranderlike
b begin as waar.
En wat hierdie does-- kan iemand vir my sê wat dit beteken?
So ons het 'n paar waarskuwing.
Wat sou tipe b wees in die begin?
GEHOOR: Boolean.
ALLISON Buchholtz-AU: Boolean.
Reg.
En dan toewys ons b hierdie string, reg?
So, hier is, watter tipe b wees?
Dit sou 'n string wees, reg?
So, wat is belangrik om te kennisgewing is dat in c, ons
kon byna nooit doen iets soos dit.
Ons wil 'n veranderlike te hê, gooi dit as iets anders,
Miskien doen 'n paar funksie met 'n twee i, gaan van 'n klag na 'n heelgetal.
Maar as ons hier sien, b baie maklik verander tik.
>> GEHOOR: Wag, so jy kan net wees, "maak b 'n heelgetal?"
>> ALLISON Buchholtz-AU: Ja.
Jy kan net toewys b 'n heelgetal.
>> GEHOOR: Regtig?
>> ALLISON Buchholtz-AU: Ja.
En dan sou dit 'n int wees.
Sodat jou veranderlikes kan verander oor die loop van die program ook.
Hulle is nie streng getik.
Dit is baie losweg getik.
OK?
Basies jou veranderlikes kan doen wat hulle wil hê, as ons soort van sien met PHP.
Hulle kan dit doen 'n paar mal dinge, so dit is belangrik om redelik versigtig te wees.
Noem jou veranderlikes goed.
As jy dit nie doen nie, almal van 'n skielike jy gaan wees,
"Wag, ek het gedink dit was 'n string, en nou is dit 'n int,
en ek is nie seker wat gaan aan hier. "
So dit is net 'n eenvoudige voorbeeld van wys hoe 'n veranderlike kan maklik
verander sy soort oor die loop van 'n program.
>> OK.
So dit moet kyk super, super bekende.
So dit is ons lusse in JavaScript.
Dit is presies dieselfde, behalwe vir in plaas van vier int i gelyk aan nul,
ons kon net sê var i gelyk aan nul.
En dan kan ons ons dieselfde soort het van toestand, dieselfde soort werk,
i plus plus werk net fyn.
So viere is dieselfde, o swaard is dieselfde,
en doen die genot is presies dieselfde.
Dieselfde soort algemene formaat.
Ons sien, vier, tussen hakies, hakies, dit is almal dieselfde.
Ook is daar kommapunte sal wees wanneer ons by voorbeeld kode.
Jy sal sien dit is redelik baie dieselfde as c.
>> Vir funksie verklarings, weer, baie soortgelyk.
Ons het 'n paar funksie wat net sê dat dit is 'n funksie, en dan
die naam van ons funksie, en die insette.
En weer as ons sien, ons het geen tipes hier hoegenaamd nie.
Reg?
Ons het niks te sê dat hierdie moet SY of dubbels, of dryf om te wees.
Hulle kon wees wat hulle wil.
Wat belangrik is, is die merk wat ons moet funksioneer om vooraf skryf
te laat JavaScript weet dat dit is eintlik 'n funksie.
>> So dit is net 'n paar eenvoudige som funksie wat terug x of y,
en dan wat is ook koel is dat jy kan eintlik
wys 'n funksie op 'n veranderlike.
So in hierdie geval, som is nou die funksie wat eintlik nie som.
So as jy hier sien, het ons funksie, naam van funksie, insette.
Reg?
Hier het ons net funksie en insette.
So dit is 'n anonieme funksie genoem.
En dit is iets wat nuwe moet wees die meeste van julle ouens, indien nie almal van julle.
So basies wat dit beteken is dat ons dit nie doen nie
moet naam van ons funksie in hierdie geval.
Ons kan net sê, "OK, ek gaan hierdie funksie wat voer, hier
is sy insette, en hier is wat dit gaan doen nie. "
En veral wanneer jy die toeken 'n funksie aan 'n paar veranderlike
wat jy gaan om te manipuleer, jy nie noodwendig
nodig het om dit te noem, want jy gaan word verwys
dit deur hierdie veranderlike naam, nie deur watter
Die funksie is eintlik genoem.
OK?
>> So as ons hier sien, is ons het 'n paar veranderlike som nou
wat gelyk is aan die som van drie en vyf.
En ons sou kry nie.
En dit sou net 'n paar waarskuwing, drie plus vyf is gelyk aan die aantal.
Dit plus sal net koppel Wat ook al ons antwoord was op die string.
Ook Modern, plus kan koppel snare.
>> Vir JavaScript, soos met PHP, HTML en CSS soos ons sê,
'n baie dit ons soort van die neem van die opleiding wiele af hier
en julle het 'n baie van die know hoe om regtig te verstaan ​​hierdie dinge.
Hulle is effens anders, maar hulle is nie so vreemd
en dat jy kan nie dinge Google of kyk hulle aanlyn met w3 skole.
En ons is regtig verwag jy ouens, soort, eksperiment
en leer op jou eie.
So, ek weet dit lyk 'n bietjie minder deeglik as sommige van die c dinge
ons doen nie, maar dit is eintlik vir 'n rede.
Maar hopelik is dit nie te anders, en dit is nie oorweldigend.
>> So skikkings in JavaScript, weer baie, baie soortgelyk.
Reg?
Ons het 'n paar veranderlike verskeidenheid dit is gelyk aan leë hakies,
en dit is net 'n leë skikking.
Dit word dikwels genoem letterlike verskeidenheid notasie.
Dit is net een ding wat ons dit noem.
As ons kyk verskeidenheid twee hier, ons het 'n paar letterlike skikking wat het drie elemente,
reg?
En dan het ons het 'n paar var derde element wat
sommige veranderlike dit is net gaan hierdie string te hou, JS.
>> Die elemente, goed om te sien, word deur kommas geskei,
net soos ons sou verwag.
En jy kan ook toegang tot hierdie, soos ons gedoen het in C, met die indeks notasie, reg?
So anders as PHP Nou, ons gaan terug
net soort van verwysing dinge deur indeks.
Net soos C, dit is ook nul-indeks.
Ek voel soos dit werklik wrede sou wees as hulle skielik JavaScript een
indeks, en jy het om heeltemal dink hoe jy dink oor skikkings.
>> Een cool ding is dat in plaas van om te do-- as jy ooit
wou die lengte van 'n skikking, Miskien het jy Itereer deur dit
totdat jy 'n paar ou end, of jy wil net weet wat dit is.
Omdat JavaScript is baie los in meer maniere as net soort, soos ons hier sien,
ons kan maak net hierdie verskeidenheid groter omdat ons besluit om.
As ons sien verskeidenheid drie het drie dinge om te begin,
maar dan is almal van 'n skielike, ons is soos, "O, net 'n grap.
Ons is eintlik gaan om dit te maak 101 dinge. "
So as jy ooit wil die weet werklike lengte van jou skikking,
jy doen dit so.
En ons gaan 'n baie om te sien van hierdie notasie in voorbeelde,
maar met JavaScript dit is tipies wat
voorwerp wat jy praat dot watter soort funksie
jy aansoek gedoen wil om dit te.
OK?
>> So in hierdie geval, ons voorwerp is opgestel twee,
en ons sê ons wil die lengte van verskeidenheid twee.
So hierdie oproepe net soos lengte op daardie.
En wat jou lengte terugkeer.
Ook iets om daarop te let is dat as ons agterkom dat ons skikkings,
teenstelling C, hulle het nie almal van dieselfde soort te wees.
Dit is veel meer soos PHP.
JavaScript is basies net soos hierdie interessante versmelting van C en PHP.
So ons sal kry in dit.
Vir nou, laat ons net aanvaar dat jou skikkings is basies
soos C skikkings, in daardie hulle zero geïndekseer.
OK, so dit is alles.
Jy kan ook net verleng 'n skikking te ookal indeks wat jy wil.
AANGESIEN dit waarskynlik sal seg fout op jou of gee jou 'n paar foute,
JavaScript is soos, "Nee wat, dit is goed.
Ek het hierdie.
Ons sal net gaan reguit waar jy wil. "
>> OK, so voorwerpe is baie belangrik.
Julle sal gebruik word om 'n groot deel van hierdie in jou P stel, as ek reg onthou.
So die ding wat dit is soortgelyk aan in C is structs.
So jy kan dink about-- wanneer ons gaan na 'n voorbeeld reg
daarna sal Ek dink dit sal maak 'n baie meer sense--
maar ons basies gebruik om voorwerpe te organiseer natuurlik verwante inligting.
Wanneer ons gepraat oor structs in C, het ons dikwels
praat oor 'n student wat 'n paar name gehad het, ID, huis, jy weet, konsentrasie.
En dit is soort van dieselfde ding wat ons gebruik voorwerpe hier.
Dis net te organiseer soortgelyke inligting.
>> Jy kan ook dink van hierdie as meer soortgelyke skikkings te associatieve in PHP.
So dit sou soort van die ding waar ons het 'n paar sleutel met 'n bietjie waarde,
baie soortgelyk aan PHP.
Sodat jy kan inisialiseer 'n paar leë voorwerp, soos ons sien hier,
net met krullerige draadjies.
So skikkings is vierkantige hakies.
Leë voorwerpe is krullerige draadjies.
Goeie onderskeid te hê.
En dit is net twee verskillende maniere eienskappe te stel.
So dit is soort van veel meer van 'n manier dat
is soortgelyk aan PHP, met ons assosiatiewe skikkings, met die sleutel,
en ons waarde, terwyl hierdie een is-- jy sal
sien dit 'n baie meer in JavaScript.
Dit is geneig om die konvensie te wees.
En op dieselfde manier wat ons gedoen het array twee dot lengte, is hierdie woorde,
"OK, gee my daardie kenmerk van hierdie voorwerp. "
Reg?
So dieselfde manier waarop dit was soos, "gee my die kenmerk lengte van verskeidenheid twee, "
dit sê, "gee my 'n paar eiendom van ons leë voorwerp. "
Of in hierdie geval, ons is toeken dit tot 'n waarde hier.
Maar jy kan ook toegang verkry tot dit so.
>> En dan is hier is dit net wat twee verskillende waarskuwings.
So hierdie die waarskuwings sou wys presies dieselfde sou wees,
dit is net twee verskillende maniere toegang tot die element wat ons wil hê.
Maak dit sin maak vir almal?
Ek voel soos hierdie een waarskynlik meer sin maak,
net omdat ons kom af van PHP.
Maar as ons dit doen meer voorbeelde, hierdie is letterlik presies dieselfde.
Baie van dit is net verander in sintaksis.
>> OK, so voorbeelde.
Ek is mal voorbeelde.
So hier is 'n paar CS50 veranderlike wat 'n voorwerp,
en ons het almal die winkel inligting oor dit.
Dus het ons natuurlik instrukteur, TFS, psets, en op band opgeneem.
So sien ons dit is byna al die verskillende tipes.
Reg?
So voorwerpe kan stoor eienskappe van die verskillende tipes.
Ons kan dink this-- dit is baie soortgelyk aan ons assosiatiewe skikking in PHP.
So sleutel, waarde, sleutel, waarde, sleutel, waarde, so aan en so voort.
Wat ook interessant is in die dieselfde manier dat ons skikkings binne skikkings kan hê,
ons kan ook voorwerpe binne voorwerpe, of skikkings binne voorwerpe.
Jy nooit regtig beperk tot net 'n enkele een van die dinge.
Ons kan baie Inceptionesque, net hou om af te gaan die haas gat daar.
>> So as ons sien, ons het 'n paar kursus wat
is 'n string, instrukteur dit is 'n string, en skikking, 'n int, en 'n Boole.
So al hierdie verskillende dinge.
>> Alle reg, sodat ons 'n ander een.
So in hierdie geval, ons het 'n verskeidenheid van voorwerpe.
So net soos 'n voorwerp kan 'n verskeidenheid in dit.
Ons kan ook 'n verskeidenheid van voorwerpe.
Dit kan nuttig wees dink oor soortgelyke soort
van hoe ons 'n hash tafel, ons het 'n skikking
van al hierdie verskillende tipes structs dat
was verwysings na verskillende nodes en noem maar op.
Maar in hierdie geval, ons het 'n verskeidenheid van voorwerpe.
So dit is soos 'n skikking assosiatiewe skikkings.
So ons het 'n paar eerste element sou die voorwerp met die naam James
en die huis van Winthrop.
>> Julle kan onthou iets baie soortgelyk aan hierdie
met jou laaste pset, waar as jy getrek iets van jou databasis,
die eerste soort ding in jou array was
al die inligting oor die eerste gebruiker wat nagekom nie,
en dan het jy na die indeks in daardie hul voorraad of hul kas te kry
of iets anders.
So, dit is baie dieselfde ding, net 'n bietjie verandering
in sintaksis, bietjie verandering in die woorde wat ons gebruik om hulle te beskryf.
>> So as ons wou, kan enigiemand vertel my wat hierdie waarskuwing sou hier doen?
Of wat hierdie stukkie kode vir ons sou doen?
GEHOOR: Dit sal jou al die name.
ALLISON Buchholtz-AU: Right, so dit wil net waarsku met al die name
want dit sou gaan deur huisie i, so dit sou begin by nul.
So dit wil sê, OK ons soek by die eerste voorwerp, wat
is die eerste slot in ons verskeidenheid.
En dit sê, "gee my die skryf die naam van die voorwerp. "
So het ons hier gaan, wil ons skandering, ons wil vind naam,
en ons wil uit te druk James, Molly, en Carl.
Enige vrae so ver?
JavaScript ongelukkig jy gaan wees
doen 'n baie soek op jou eie, uitzoeken die sintaksis,
worstel met dit.
Maar ek is natuurlik altyd hier, kantoorure is altyd hier.
Ek kan hierdie week op Dinsdae.
So as jy daar is, kan jy kom besoek my hierdie week.
Dit sou wonderlik wees.
>> OK, so DOM is Document-Object Model.
So dit is net 'n manier om dat ons wil om te dink
oor hoe ons HTML en alles binne dit georganiseer.
Dit is veral iets wat sal waarskynlik op jou quiz kom.
Ek weet my jaar, was dit soos hier is HTML-lêer, vul die DOM vir dit.
En jy moet net in te vul die klein dingetjies.
Dit moet maklik wees om punte hopelik.
Hopelik sal jy see--
>> GEHOOR: [onhoorbaar]
>> ALLISON Buchholtz-AU: So jy hierdie boom hier sien?
>> GEHOOR: Ja.
>> ALLISON Buchholtz-AU: So sal hulle gebruik vra
in te vul wat gaan onder die liggaam.
Miskien onder die liggaam, ons het 'n paar divs of ons 'n paar paragrawe,
en ons sal jou vra om in te vul 'n boom baie soos hierdie.
So ons sal wandel deur dit.
So het die dokument Object Model is net 'n manier om
te struktureer en te dink oor ons HTML grafies.
En ook wanneer ons in meer JavaScript,
dit gaan die wees manier wat ons eintlik
manipuleer verskillende elemente op die bladsy.
Ons moet 'n manier elke toegang tot van die dinge in ons HTML,
en so dit gee ons 'n baie beton gestandaardiseerde manier
oor verskeie web bladsye wat om te doen.
>> So as ons net loop deur hierdie hier, natuurlik
ons dokument is soos ons hele lêer.
Dit maak natuurlik sin dat dit die hoogste ding,
en dan het ons ons werklike HTML, wat ooreenstem met hierdie merker hier.
Ook as jy in streepje jou tags behoorlik, dan skep dit DOM boom
raak super eenvoudig.
So ons het 'n paar hoof hier.
Ons het 'n paar liggaam wat sien ons stuit af van HTML,
wat is die rede waarom ons kop en liggaam.
Binne kop, ons het 'n paar titel tag, 'n einde titel tag,
sodat ons weet wat kom na die hoof.
En in ons titel tag, ons het hello, wêreld.
OK?
So dit is hierdie hele linkerhand tak.
En dan vir die regterhand tak hier sien ons dat ons 'n HTML,
OK ons het die hoof deel gedoen het, ons is op soek net op die liggaam,
so ons het 'n paar liggaamsdele.
En binne daardie, die enigste ding wat ons het, is hello, wêreld.
OK?
As ons dinge soos sommige bracket p en dan
hello, wêreld, en dan 'n ander bracket p van totsiens, wêreld,
sou ons twee borrels kom af van hier.
Want hulle is albei onder die liggaam nie, maar hulle is afsonderlike paragrawe hierdie geval.
Daar is beslis praktyk oor wat in die vorige vasvrae,
sowel as baie online op dit.
OK so, dit net kan ons sien alles mooi
en dinge manipuleer baie stelselmatig.
OK?
Ons weet presies hoe om te deurkruis deur hierdie boom,
sodat ons weet wat ons wil om toegang te verkry.
>> OK so dit is hoekom ons wil hierdie soort van model te hê,
sodat ons dinge kan gebruik soos hierdie, en ons verstaan ​​wat dit beteken,
en hulle is gestandaardiseerde oor al die dinge wat ons doen.
So dokument dot titel is net die titel van our-- al hierdie
is redelik selfverduidelikend, Ek hou van om te dink.
So het die eerste drie voorbeelde word net sê,
"OK, gee my net die titel van hierdie webblad. "
So dit sal jou gee wat ooreenstem met die titel.
>> Dokument dot liggaam gaan jy te gee alles wat binne daardie liggaam tags.
Sodat jy kan manipuleer nie.
En die dokument dot liggaam dot Tik HTML is 'n baie cool een,
en miskien nie soos Super intuïtief, maar die innerlike HTML
stem ooreen met hierdie reg hier.
So as jy ooit wil die teks manipuleer op 'n bladsy,
tipies jy gaan om te doen iets met die liggaam dot innerlike HTML.
OK?
So innerlike HTML geneig om te verwys na wat is eintlik tussen hierdie tags.
OK?
En dan nuttige funksies.
So as jy wil te kry enige van hierdie, enige element,
ons het 'n paar Id, klas naam, of tag naam.
Dit is baie soortgelyk aan dinge wat ons gedoen het met CSS, reg?
Waar ons het 'n paar keurders ooreenstem met óf 'n tag, 'n klas
wat ons gee hulle, of 'n ID.
Dit is baie dieselfde manier.
As jy iets wat het 'n paar klas van die hond,
en jy sê kry elemente deur tag naam, en jy sit hond in there-- of jammer,
klas se naam.
Jy kan dot sit daar.
Dit gaan al daardie om terug te keer elemente vir julle dat daardie klas.
So kan jy net diegene manipuleer.
In dieselfde manier, miskien het jy net wil 'n paar kop te manipuleer, sodat
sommige h1 kop, soos ons gedoen het.
Wat jy kan doen kry elemente deur tag noem, want h1 is 'n tag naam.
En op dieselfde manier, as jy wil te kry 'n paar unieke ding, kan jy tag doen.
Kry element deur Id.
En hulle is eintlik baie van hulle nie.
Hierdie is slegs soos drie van baie.
So as jy aanlyn gaan, as Ek gaan aan te moedig
om te doen, en doen 'n paar navorsing op jou eie,
Ek het beslis aanbeveel op soek na al daardie.
Hulle kon super wees nuttig, veral wanneer
jy wil net 'n soort van manipuleer baie spesifieke dinge sonder
om deur te gaan en probeer te ontleed uit alles.
>> OK, so die laaste ding wat is JavaScript gebeure.
So toe ek vroeër gepraat oor te gaan op 'n webwerf,
en wanneer jy hover oor iets, of jou muis hang oor iets,
iets anders gebeur.
Dit is wat ons wil dink oor as 'n gebeurtenis.
So wat ons het daardie mag nuttig wees hier is onclick.
So was my op hover, wat, ek is redelik seker, is net op hover.
Ook 'n ton van hierdie dat jy kan kyk vir.
Daar is 'n hele lys aanlyn van die verskillende dinge
dat jy kan luister vir.
>> Maar JavaScript gebeure basies net te reageer op dinge
dat jou gebruiker doen.
Reg?
Sodat jou gebruiker nie iets, dit is 'n gebeurtenis,
en JavaScript sal reageer maar jy wil dit te hou.
Dit sal reageer daarvolgens.
So in hierdie geval, ons het sommige venster dot onload.
So, wat hierdie sê is, "wag totdat die venster se gelaai. "
OK?
So as alles gelaai, onload, dan kan jy hierdie funksie uit te voer.
So as alles gelaai, jy gaan
'n paar soek knoppie te hê wat kry 'n element deur Id,
en dit druk wat dit ook al element is soos op die knoppie Soek.
En dan het ons hierdie veranderlike, ons sê, "OK, onclick."
So wanneer ons hoor 'n kliek op die knoppie Soek,
hierdie funksie, wat is 'n voer waarskuwing, jy het die knoppie Soek.
>> So wat gebeur is-- dit is 'n mooi bietjie grafiese voorstelling hier.
So ons dokument vragte, dit is ons onload,
vind ons Soek knoppie, wat is dit.
Ons is op soek na ons Soek knoppie.
En dan wanneer die Soek knoppie gekliek, dit stem ooreen met reg hier.
Onclick.
Toe ons uiteindelik waarsku ons gebruikers, wat is hierdie laaste reël hier.
OK?
So elkeen van die vier stappe net ooreenstem met die vier bokse
af daar op die bodem.
Maak dit sin maak vir almal?
>> En dan een ding wat ek net gaan baie, baie kortliks, dat ek te noem
moedig julle aan gaan kyk meer in is
jQuery, wat net 'n biblioteek wat is gebou op die top van JavaScript.
Dit is super nuttig, as met die meeste biblioteke.
Daar is baie van die funksies.
So as daar ooit iets wat jy wil om te doen in JavaScript,
jou eerste instink moet nie wees om te dink
van, moet "watter funksie Ek code? "Dit moet wees,
"Laat my sien iemand is reeds gedoen vir my. "
Omdat nege keer uit tien, iemand sal dit reeds gedoen het,
en hulle het waarskynlik dit beter gedoen.
Mense spandeer baie tyd om hierdie, en JavaScript is baie wyd gebruik word,
sodat mense is voortdurend probeer om dit beter te maak.
En jQuery het 'n baie funksies dit sal waarskynlik nuttig vir jou wees
in jou finale projek as jy om iets te doen met die web ontwerp.
As ek wil sê, "werk slimmer, nie harder. "
As jy ouens dit doen, sal dit wonderlik wees.
Wanneer ons by die hackathon ek doen nie wil hê julle moet wees al beklemtoon word.
Ek wil hê jy wil wees, "Ek het hierdie. jQuery se het my rug.
Ek het nie nodig om hierdie funksies te skryf. "
>> Dus net twee dinge Onthou, ek gaan
om jou te laat ouens lyk meer in jQuery op jou eie.
Al wat ek gaan om te sê, is dit doen 'n paar mooi ongelooflike dinge
en kan jou lewe 'n hele klomp makliker.
Maar wat jy wil het, is alles lêer
wat jy gaan word om dit te gebruik in, jy gaan hierdie twee lyne te wil hê.
Jy gaan die wil script JS jQuery dot js.
En eintlik jou bron gaan 'n paar URL te wees.
As u kontak met Google jQuery, Google eintlik gasheer al die lêers vir jou.
So moet jy beslis wil insette wat URL plaas.
Ek het net sit dit hier ter wille van eenvoud.
Al beteken dit is waar om te vind jou jQuery biblioteek.
Dit is massiewe, so jy wil nie dit aan te bied op jou eie rekenaar
As jy dit kan vermy, wat is die rede waarom ons geneig om net in Google se URL wat
gasheer al hierdie lêers vir jou.
OK?
Jy google dit, ek belowe dit sal daar wees.
>> En dan ook al JavaScript-lêer wat jy
die gebruik van, so dit is net 'n paar eksterne JavaScript-lêer wat jy gebruik.
In dieselfde manier wat ons skakel na ons CSS lêers, dit is dieselfde soort van ding.
Dit sluit net na die lêer waar jou JavaScript is.
En ek het 'n paar voorbeelde met 'n eenvoudige JavaScript.
So sal ons gaan deur dit.
En dan in jou indeks JavaScript, wat is jou JavaScript lêer hier,
hierdie is 'n soort van die omslag dat jy vir jQuery.
Jy is amper 99,9 persent van die tyd gaan
om dit te hê in jou index.js lêer.
Want wat hierdie sê is, "Niks te voer nie
totdat jou dokument is eintlik gereed, "en dit is presies wat jy wil.
Want as jou dokument is nie gereed nie, en jQuery begin om dinge te doen,
dit is net 'n gemors.
So wil jy altyd hierdie wrapper te hê.
En dan vir die dinge wat gaan daar, ek sal laat jou ouens se eie deurlees.
>> OK, so is daar enige vrae reg nou oor JavaScript in die algemeen?
Of die DOM model?
Indien nie, ons het 'n paar koel voorbeelde wat ons deur kan gaan,
dat julle ouens my kan help code.
Maar ek gaan ook te wees super mooi, en as jy
wil nie iets te sê vir hierdie, dit is goed.
Ek kan ook net gee jou voorbeelde.
Maar enigiets op die PowerPoint voordat ons?
Cool.
>> Ek voel soos jy ouens nodig het om te energie.
So ek dink ons ​​gaan om te begin met my party byvoorbeeld eerste.
Ons het drie voorbeelde, moet jy jou keuse.
So ons het die klok, waar ons gaan 'n werklike klok wat is te implementeer
gaan om te werk soos die tyd gaan deur.
Ons het hierdie groot Twitter funksie.
This-- jy weet wat, hou op.
Ons gaan om te maak dit gaan weg.
Bam.
OK.
>> Ons het hierdie groot Twitter funksie hier, that-- Ek weet nie, reg?
Dit gaan groot wees.
Is jy ouens opgewonde?
Dit gaan om die nommer te tel karakters wat jy verlaat het,
so as ek tik nou, Natuurlik is dit nog steeds sê 140
maar ons weet dit is nie die geval nie.
En dan met ons laaste een hier, kliek hier om te party.
Wat gaan gebeur, is wanneer ons op die agtergrond se
gaan van kleur te verander.
So julle ouens het jou opsies van watter een jy wil hê om eerste te doen.
Ek belowe ek sal dit baie maklik op jou.
Ek voel soos almal is soort van net 'n baie lae sleutel vandag.
So ek sal loop jy deur hoe ons sal implementeer al hierdie.
As jy wil om te slaan in, dit is 'n groot, maar ek
voel soos almal is 'n bietjie moeg.
So ek sal net loop jy deur hierdie voorbeelde.
Het ons iets wat ons wil graag om eerste te doen?
Enigiemand?
Geen voorkeur?
OK.
Jy weet wat?
Ons is op party.
Ek voel soos jy ouens moet 'n little-- so nie, sal ons die party een eerste te doen.
OK.
>> So wat ons het here-- dit is nie veronderstel om daar te wees.
Nou is dit goed.
OK.
So wat ons hier het is net 'n eenvoudige HTML bladsy
dat julle ouens almal moet wees super vertroud is met van jou laaste twee psets.
ons het ons doc tipe hier.
Kan almal sien?
OK.
Cool.
Ons het ons HTML natuurlik.
Ons het 'n paar kop wat gekoppel aan 'n stylblad dat
net het my font mooi en groot en vet.
So moenie bekommerd wees oor dit.
>> Ons het 'n paar liggaam met 'n ID agtergrond, OK?
Omdat ons gaan wees die verandering van die agtergrond.
So wanneer ons die verandering van die agtergrond van ons liggaam,
ons onthou van twee weke gelede wanneer ons te doen met die web bladsye.
So goed om te hê.
En ons het 'n paar Id gelyk party.
Dit h ref pond beteken net dat dit gaan om te gaan na dieselfde bladsy.
En kliek hier om te party, wat is die rede waarom wanneer ons kliek,
dit kleure moet verander, gelukkig.
>> En dan het ons het 'n paar script hier dat net gekoppel aan dié party dot js
lêer, wat is leeg, want ons het nog niks gedoen nie.
En dit is so hartseer.
Maar baie gou, sal dit verander kleure, en dit sal fantasties wees.
>> So ek is net gaan om jou te wandel ouens deur hoe ons dit kan benader.
So die eerste ding wat ons dalk wil doen,
As ons die verandering van die agtergrond van die liggaam, die eerste ding wat ons dalk wil
te doen, is eintlik gryp wat die liggaam is, reg?
So wil ons som te hê, ons agtergrond, en as jy sien,
Ek het net outomaties net begin tik.
Daar is niks spesiaal dat ons nodig vir ons JavaScript-lêers te doen.
Ek kan begin verklaar veranderlikes, en verklaar ewekansige funksies.
En dit is baie meer vrye vorm.
Dit is soos met C, het ons julle dit al hierdie moeilike reëls, en jy grootgeword het,
so ons is soos, "uitgaan.
Wees vry.
Doen wat jy wil. "
En dit is wat JavaScript is.
So ons het 'n bietjie agtergrond hier.
Met ons DOM model, ons weet ons kan doen dokument dot kry element,
en as ons hier sien, ons liggaam het 'n ID.
Reg?
So ons kan kry dokument nie deur ID, en hier is 'n eenvoudige een.
Wat is ons Id dat ons hier?
GEHOOR: Agtergrond.
ALLISON Buchholtz-AU: Agtergrond.
Volmaak.
En kommapunt aan die einde.
Dit het nie weg nog weg.
Jy moet nog steeds jou kommapunte.
OK.
So dit is ons eerste een.
En wanneer ons iets klik, ons iets om te gebeur, reg hê?
Sodat ons kan wil 'n paar veranderlike wat wag vir 'n klik.
Wat ons gaan doen, is ons gaan maak ons ​​skakel om meer soortgelyk aan 'n knoppie.
So ons gaan 'n paar knoppie te hê wat gelyk dokumenteer dot kry element deur Id.
En as ek praat oor die Klik skakel of kliek hier om fees te vier
skakel, wat kan my ID hier wees?
Party.
Korrek is.
OK nie te sleg nie so ver.
Almal kry wat ons doen?
>> OK, so nou het ons ons knoppie, en ons wil
om dinge te verander wanneer ons kliek op dit.
So as ons onthou van ons PowerPoint, baie eenvoudige ding wat ons kan doen
is net knoppie dot onclick, reg?
En wat gaan 'n funksie te ewenaar.
Dit is 'n anonieme funksie.
En dit net as-- eintlik ek is gaan dit 'n bietjie groter te maak.
>> So, wat ek nou net gedoen het hier is ek sê, OK,
wanneer ons ons knoppie, kliek wat hierdie skakel dat ons net verwys na,
ons gaan om uit te voer hierdie anonieme funksie.
Ons het geen insette nodig nie.
Ons gee nie om wat die gebruiker sê.
Wanneer hulle op dit, ons is gaan om te doen wat ons wil hê,
wat is die agtergrond kleur.
OK?
So dit is waarom ons nie enige insette het nie, ons moet net hierdie anonieme funksie.
En nou is ons eintlik gaan hierdie funksie te skryf.
>> So is daar 'n klomp van die maniere waarop jy kon 'n ewekansige kleur genereer.
Die manier wat ek gedoen het, was om dit te genereer drie ewekansige getalle
en sit hulle op 'n RGB trippel.
So dit wys jou net 'n paar cool dinge wat as jy soos, "O,
Ek het 'n ewekansige te genereer nommer. "As jy dit Googled,
dit is wat jy sal vind.
>> So het ons drie verskillende dinge, var, nie weer rooi, groen.
Reg?
So dit is die drie dinge wat 'n kleur.
Blou, rooi en groen.
Cool.
En wat ons kan doen, is dat ons weet dat dit moet wees tussen 255,
en as jy opkyk sommige ewekansige getal generator,
jy kan iets soos wiskunde kry dot ewekansige, wat as jy kyk hierdie up
keer terug na 'n paar nommer tussen nul en een.
OK?
En wat getalle doen ons RGB drietalle gaan tussen?
Zero en wat?
Wat kan hulle optrek na?
255.
So as wiskunde dot ewekansige gaan tussen nul en een,
hoe kan ons dit wil omskep?
GEHOOR: Tyd?
ALLISON Buchholtz-AU: Ja, presies.
So die tyd is 255.
>> GEHOOR: [onhoorbaar] Dit is soos [onhoorbaar].
ALLISON Buchholtz-AU: Math dot ewekansige.
GEHOOR: Cool.
ALLISON Buchholtz-AU: Ja.
JavaScript neem net sorg vir jou.
OK.
So ons kan doen wat vir al hierdie.
Reg?
Wiskunde dot ewekansige keer 255.
Kopieer dit.
Cool.
So die ding is, dit kan nie terugkeer 'n heelgetal.
Reg?
Miskien kry ons 'n paar nommer tussen nul en een,
en dit veroorsaak dat dit effens wees af, en ons RGBs kan nie dryf.
Hulle moet SY te wees.
So as jy probeer om hierdie, dit sal waarskynlik het 'n paar wisselvallige gedrag.
Dit sou 'n bietjie funky wees.
So wat ons doen is ons wil maak seker dat dit afgerond,
en jy kan óf andersom.
Ek afgerond met vloer.
So ek het altyd seker gemaak dat dit afgerond.
Maar gaan af van hoe maklik dit was om net 'n ewekansige getal,
Hoe dink jy het ons mag vloer hierdie getal?
Dit is baie soortgelyk.
Enige idee?
So as ewekansige was net wiskunde dot ewekansige, so dink jy ons wil vloer doen?
Wiskunde dot vloer.
En jy kan ook doen wiskunde dot plafon.
Ronde is 'n soort van dubbelsinnige omdat jy dit nie doen nie
weet of te rond of rond af.
So tipies ons altyd wiskunde doen dot vloer, wiskunde dot plafon.
Maar honestly--
>> GEHOOR: Is vloer ronde af?
>> ALLISON Buchholtz-AU: Vloer rondes af.
En dit is net 'n keuse van my kant.
>> So nou het ons ons drie getalle wat lukraak gegenereer is,
en wat ons nou gaan doen is om ons gaan net die agtergrond te verander.
OK?
So het ons reeds ons agtergrond soort gestoor
in hierdie element genoem agtergrond.
So, wat jy sal sien is, as jy gespeel het om met hierdie,
ons wil die styl te verander.
En dit is 'n soort van iets wat jy sou Google en uit te vind,
hou van hoe die kleur te verander.
>> Maar die manier waarop jy toegang tot hierdie kleur is agtergrond dot styl dot agtergrond.
So hierdie sê gegee hierdie voorwerp, agtergrond,
wat verwys na die element Id tot daar,
ons gaan om te kyk na die styl binne die styl,
ons gaan om te kyk na die agtergrond.
OK?
En as jy gaan kyk dit op, dit kan 'n bietjie meer sin maak nie,
maar dit is basies net sê, "Gee my hierdie baie spesifieke kenmerk
van wat ek vroeër gedefinieer. "
So wat ons verander om dit te is sommige RGB, want dit maak sin.
Ons gebruik RGB triples, reg?
En ons have-- Ek wil seker ek maak kry die regte aantal aanhalings in hier.
So wat ons doen, is ons RGB, en ons gaan
aan- dit is soos aaneenskakeling, wat is rooi.
En dan wil ons 'n paar komma.
En dan wil ons plus groen, dan 'n paar komma, en 'n paar blou.
>> So het hierdie plus punte net bedoel soos aaneenskakeling.
So dit is net die skep van hierdie string wat gaan binne RGB.
OK?
>> GEHOOR: [onhoorbaar] plus dan die groen 'n plus dan die rooi.
>> ALLISON Buchholtz-AU: Ja, want ek deurmekaar dat tot.
Dat 'n mens se fyn.
O, hou op.
No.
Omdat ek nodig het om seker te maak dat ek al hierdie reg.
So ek sal verduidelik in uno momento.
Groen, blou, volmaak.
Nou is ek gedoen het.
Ek glo nie.
>> OK.
So, wat is dit, is dat die agtergrond gaan ingestel word om 'n paar string.
Reg?
En dit is wat ons hier het.
Dit gaan 'n paar RGB 255 komma te wees 255 komma nul, of wat ook al nommer wat jy
het daar.
So ons hier doen, ons het 'n paar string.
En wat ons wil doen, is ons soort dinamiese skep
dat wanneer ons eintlik hierdie program te hardloop.
So dit is 'n string.
Plus concatenates dit met die waarde wat rooi is,
wat concatenates dit met 'n komma, wat concatenates dit
met wat groen is, en so aan, en so meer.
OK?
Tot die bitter einde, wat is die sluiting hakies van hierdie RGB hier.
OK?
>> So, wat dit gaan genereer is sommige opdrag regtig
wat RGB van drie getalle dié agtergrond is nou om te.
OK?
So laat ons sien of dit werk.
Ek hoop dat dit nie, want as dit nie, ek gaan aan die werklike hartseer wees.
O nee.
OK, hou op.
Beslis agtergrond dot dot styl agtergrond.
Ek is beslis ontbreek iets wat net klein.
Het jy nie ouens haat dit?
Wanneer dit is net 'n klein bietjie fout?
Almagtige agtergrond.
RGB.
>> GEHOOR: [onhoorbaar]
ALLISON Buchholtz-AU: No.
Ek het probeer om dit voor die klas.
Ek het alles wat ek gedoen het voordat klas in geval ek was soos,
"Wag, wat het ek verkeerd gedoen?"
Want ek was soos, "Ek sal waarskynlik gemors dit op 'n sekere punt. "
Plus groen.
Alles lyk soos dit is korrek saamgevoeg.
OK.
>> GEHOOR: [onhoorbaar]
>> ALLISON Buchholtz-AU: Ag, daar gaan jy.
Dit is wat ek nodig het.
Kyk na daardie.
Tiffany te red.
Volmaak.
OK.
Nou laat ons kyk of dit werk.
O my God.
OK.
Hou op.
>> GEHOOR: Space na die tweede plus.
>> ALLISON Buchholtz-AU: Watter een?
O wag, hou op.
Ruimte dra?
>> GEHOOR: Tweede plus in die groen aaneenskakeling.
ALLISON Buchholtz-AU: Oh.
GEHOOR: Daar is geen ruimte na die plus, ja.
ALLISON Buchholtz-AU: Jy nie nodig het dat, but--
GEHOOR: O, jy doen nie?
ALLISON Buchholtz-AU: Dit lyk mooi.
GEHOOR: OK.
OK.
>> ALLISON Buchholtz AU: Kom ons kyk of dit werk.
OK.
Ek is natuurlik die versuim om hierdie demo, wat my herinner
van 'n lesing van die ander week, maar ek weet dit sal werk.
Ek weet dit sal werk.
So naby.
Tensy ek per ongeluk geskrap my script op hierdie een.
Nee, dit is 'n party dot js.
OK vashou.
Ek gaan om dit te kopieer, en ek is ook net gaan om alles te verwyder,
want ek het met hierdie werk vroeër.
>> Ek belowe dit werk.
Indien nie, sal ek vir jou wys wat Tommy se is.
En daar.
>> GEHOOR: Jy verwysing partytjie dot CSS, en dit is 'n party dot js.
>> ALLISON Buchholtz-AU: Ag, goed hier is 'n party dot js.
OK, wat het ek gedoen anders?
OK, ons sal sien of dit werk nou.
Bam.
So, ek weet nie wat ek gedoen het anders, maar dit is wat moet gebeur.
Kinda cool.
Ek het op hierdie, soos, vir ewig.
Maar ons kan probeer en kyk wat Ek daaraan gedoen anders wat hierdie een het.
Ek weet nie van julle ouens, maar hierdie lyk basies wat ek net geskryf.
Daar was waarskynlik 'n vermiste kommapunt iewers is my ding.
Eintlik na, ek dink ek is vermis 'n kommapunt hier eintlik.
Maar ek kon nie sien nie, want dit was die skerm af.
>> Maar as ons sien, is dit 'n mooi veel presies wat ek net geskryf.
Ek dink waarskynlik die moeilikste deel oor dit is net 'n soort van hierdie ding reg
hier, begrip wat dit daar doen.
Hierdie soort van dinge wat jy leer eintlik net deur Googlen en eerlik
net probeer.
As jy dink daar is 'n paar skryf, is daar waarskynlik.
Probeer dit.
Kyk wat gebeur.
Soos ek gesê het, daar is 'n baie eksperimentering met JavaScript,
en PHP, en alles wat dinge, en CSS, veral.
Dit is die enigste ware manier om dit te verstaan.
>> OK, so nadat fiasko met partytjie dot js, het ons twee ander opsies.
Ons het die klok of Twitter.
Hulle is albei interessant.
Miskien nie heeltemal so lekker as party, wat 'n koel bietjie knip
ding aan die einde.
Moenie julle enige voorkeur?
GEHOOR: Klok?
ALLISON Buchholtz-AU: Klok?
OK.
Cool.
>> So weer, ons het ons leë JavaScript-lêer.
En soos ons hier sien, is ons het 'n paar baie eenvoudige HTML.
Ons het ons styl blad, wat net formate wat dit moet lyk.
Ons het ons div met 'n ID van die klok, wat
net sê, "Dit behoort 'n klok te wees."
En ons het ons skakel ons JavaScript-lêer
dit is eintlik gaan genereer ons klok vir ons.
Omdat die cool ding is dat jy kan stel JavaScript outomaties verfris
self.
OK?
So in plaas van om te wag vir die gebruiker Herlaai te slaan op 'n bladsy
sodat jy kan kry opgedateer tyd, JavaScript
kan werk dit maar dit hou.
>> So, as ons laaste een, ons wou ons agtergrond te bekom, reg?
So wat dink jy kan wees om die eerste ding wat ons hier wil doen?
As ons soort gaan af hierdie soort van paradigma hier?
Ons sal waarskynlik wil hê na toegang tot ons klok, reg?
So, ons het 'n paar var klok, wat equals--
Wat dink ons ​​dit gaan wees?
Dokument dot kry element deur- ek ook lief Sublime-- Id en ons id is klok.
Kommapunt.
Het om seker te maak om te kry om diegene kommapunte hierdie tyd,
want ek voel soos wat was die probleem die laaste keer.
OK so, as ek net sê met die probeer te hê JavaScript verfris self,
daar is hierdie groot funksie, ek weet dit handig te pas gekom het verlede jaar,
Ek is nie seker of dit handig te pas kom vir hierdie pset, maar dit is bekend stel interval.
En dit is eintlik baie koel as jy ouens doen niks
met die tyd of om opgedateerde inligting.
Op 'n webwerf vir 'n finale projek, is dit waarskynlik
'n funksie wat jy wil kry super vertroud is met.
So, wat stel interval nie, is dat ons gaan om dit te gee 'n funksie,
en hoe dikwels dit moet noem hierdie funksie.
OK?
>> So in hierdie geval, ons is net gaan om te 'n anonieme funksie skep weer
OK, wat gaan kry ons op datum, en ons tyd,
en dan werk dinge en vertoon dit.
So ons sal bekommerd wees oor wat.
Ons sal wees soos genereer klok hier.
Maar wat ons nodig het, is hoe dikwels te verfris.
So in hierdie geval, dit is net millisekondes.
So ons is maar net gaan doen 100 millisekondes.
Natuurlik heeltemal arbitrêr.
As jy wil om dit te werk baie stadiger, kan jy.
Ons kan gemors rond met die stel interval,
hoe groot ons interval is nadat ons 'n werkende klok, wat hopelik sal ek
kry.
So dit is net sê, "OK, oproep hierdie funksie elke 100 millisekondes. "
OK?
Dit is al wat dit doen nie.
>> So, wat wil ons ons funksie doen, is ons wil 'n paar datum te hê
en 'n paar keer is wat ons gaan hê.
Sodat ons kan begin met ons datum gelyk iets,
en ons tyd is gelyk aan iets dat ons nie weet nie.
Of eintlik, ons moet net die datum, want datum gaan alles in te sluit.
Weereens, as jy net Google enigiets oor wat jy wil doen, en as jy skryf, "OK,
Ek wil die tyd om te kry via JavaScript, "dit
gee jou hierdie groot funksie genoem get datum.
Letterlik, die meeste dinge wat jy wil doen,
JavaScript gaan hê dit vir jou gedoen reeds.
So dit is letterlik soos 'n nuwe kry op datum, wat is creating--
of 'n nuwe datum, rather-- wat genereer
sommige voorwerp wat 'n datum verteenwoordig.
>> En wat ons gaan om hier te doen, is om hierdie is-- ek gaan om dit te skryf,
en verduidelik dan wat dit doen.
So ek sal seker ek kry dit reg te maak.
>> OK, so wat hierdie funksie doen, is ons net
die skep van die HTML wat eintlik gaan om te gaan in ons div id van die klok.
So, wat dit gaan doen net genereer paar string, OK?
Dit word dan gaan wees oorgeplant in ons HTML.
Basies wat dit gaan doen, is om wat we-- wat Ek jou sal wys
is dat dit wat ons sê HTML is, Ons gaan hierdie teks hier vervang
met alles wat HTML is.
So dit gaan toelaat ons ons klok dot te verander
HTML uit om net die teks van hierdie moet 'n klok, om werklik te wys
die getalle en die dinge wat ons omgee oor, en eintlik uur.
>> So wat ons gaan doen, is om ons gaan om te begin hierdie HTML genereer.
So in die dieselfde manier as wat ons gebruik te doen plus gelyk vir heelgetalle,
kan jy nou doen wat vir strykers, behalwe dit gaan om hulle te koppel.
Reg?
Soos ons gesien het met partytjie dot JS, dit net concatenates al hierdie dinge saam.
Sodat jy kan koppel verskillende stukkies HTML van veranderlikes, of stukkies snare
dat jy skryf jouself, en dit net
regtig kan jy dinamiese genereer HTML, wat is pretty cool.
So as jy iets baie gebruikers spesifieke,
dit kan toelaat dat jy om dit te doen.
>> So het ons 'n HTML, te gaan ek probeer en maak seker ek kry dit reg.
So ons gaan 'n paar h1 header te doen.
So, wat is belangrik om hier te besef is dat dit eintlik net HTML.
Reg?
Ons skryf werklike HTML-kode in hier, dit is
nie net 'n string in die normale manier wat ons sou dink oor dit.
So ons het 'n paar HTML.
Dit word beskou as 'n string hier al is.
En ons doen datum dot-- ons wil ons uur te kry.
Weereens, as jy was om te kyk enigiets oor die datum,
dit sal vertel nie dit is al die eienskappe daardie datum het.
En hier is wat jy kan gebruik op dit.
So is dit waarskynlik dinge soos kry uur, en kry minute,
en kry sekondes, en kry millisekondes, en wie weet wat anders hulle het.
Maar as jy kyk na die dokumentasie, sal dit daar wees.
>> Dus het ons kry ure, en dan sal ons wil
te koppel wat with-- Ek is gaan om dit te skuif hier.
So as ons nou te genereer, is ons eintlik genereer die tyd, reg?
Ons het ure, en dan wat is tussen ure en minute?
Jy het 'n kommapunt, reg?
So ons wil 'n paar kommapunt om hier te doen.
En dan wil ons ons te kry minute, so in die dieselfde manier
dat ons datum dot kry ure, Hoe kan ons ons minute?
Dit is letterlik hede dot kry minute, wat ek soort van hou.
Dit is soos, "O, hoe kry ek my minute? "
Ek kry net my minute.
>> OK.
En dan het ons nog 'n kolon hier.
En dan as ons wil om ons sekondes, hoe kan ons ons tweede?
Datum dot kry sekondes.
Ek dink dit is pretty cool.
En wat is belangrik om te besef, is dat ons ook
moet ons HTML tag hier sluit, want dit moet nog steeds geldig HTML, so h1.
Cool.
>> So na dit, kan ons klok doen dot innerlike HTML is gelyk aan HTML.
OK?
So onthou hoe ek gesê innerlike HTML basies
neem alles wat tussen die twee etikette wat ons gepraat oor
en insetsels of manipuleer wat is daar?
So, wat dit doen, as ons gaan terug na ons klok,
is dat die klok verwys na alles in hierdie div.
Dit is die innerlike HTML van hierdie Id klok div.
En so dit gaan om dit te verander die HTML dat ons net gegenereer,
wat, wat, hopelik, hopelik, hopelik,
sal die tyd wys nou.
Ons sal sien.
Van die kursus.
So baie tegniese kwessies.
Allison se just-- Ek is uit my spel vandag ouens.
OK, wat werk.
klok dot innerlike HTML.
Dit was HTML Regtig?
Ook dit is wat gebeur.
Wanneer jy nie iets kan sien, moet jy net kyk na jou bron-kode.
OK.
Het jy wil weet 'n koel werk om dat ons gaan om hier te doen?
>> GEHOOR: Kan jy dit doen hoofletters?
Die hoofletters?
Want jy het kry ure, en dan kry minute.
>> ALLISON Buchholtz-AU: Dit is jy ure en get-- oh.
Jy are-- goue ster.
Dit is al 'n toets, ouens.
Ek belowe dit werk voor die klas.
>> OK, maar iets koel te weet, is wat jy kan also-- as soms
jou eksterne lêers om 'n bietjie mal,
jy kan ook net sit hulle reguit hier, wat geneig is om dinge reg te maak.
Behalwe dit is soos regtig lelik.
Natuurlik formaat alles.
Maak seker dit is al mooi.
OK.
>> Ek wou al die cool demos te doen, en hulle is maar net nie uit te werk.
OK.
Script var klok.
In elk geval, wat belangrik is, is dat dit die algemene manier
dat jy sal die formaat van JavaScript.
Soos jy kan sien, kan dit wees baie kieskeurig soms,
selfs wanneer dit was letterlik werk twee sekondes gelede.
Of nie twee tweede gelede maar baie, baie onlangs.
>> So om jou te wys hoe dit moet lyk, en om jou te wys dat ek nie mal,
en dat alles is presies die dieselfde, dit is wat dit behoort te lyk.
Jy net gaan hierdie top deel te doen hier, en as jy sien bladsy bron,
as jy sien, het hy 'n paar crazier dinge, ek vereenvoudig dit.
Ook, krediet aan Tommy McWilliam, wat eintlik
het my gehelp skep hierdie voorbeelde, wat is die rede waarom ek weet hulle werk.
Omdat Tommy is 'n JavaScript meester.
Maar as ons sien, ons het 'n stel.
Ons het hier vir ons klok funksie.
Dit is al die JavaScript dat Ons het net geskryf het, of 'n deel daarvan.
Ons het dit geskryf een reg hier.
En hy het 'n ekstra funksie wat net pads dit
deur 'n nul voor 'n brief of voor 'n aantal as dit
net een van hulle.
So as jy sien, dit is mooi veel presies wat ons net geskryf.
Jy het 'n paar veranderlike klok wat het ons element, kry element deur ID,
wat is die klok.
Ons het ons stel interval funksie, dit is
'n anonieme funksie wat voer al hierdie dinge.
Ons het 'n paar begin string HTML dat ons dan dinamies
genereer deur 'n paar h1 header, concatenating
ontvang met die ure, plus ons kolon, plus kry
die minute, plus 'n ander kolon, plus ons sekondes,
en uiteindelik die einde HTML vir dit.
En dan het ons ons klok werk dot innerlike HTML te HTML,
en ons werk elke 100 millisekondes.
OK?
>> Sien ek belowe ek is nie mal nie.
Ek weet nie.
Ek weet nie hoekom dit nie van my hou.
Ek voel soos dieselfde lyk, maar glo dit haat my.
>> So laat ons sien of die derde ronde gaan beter.
Ons is oor om te sien.
Ek is nie seker hoe dit gaan om te gaan.
Is almal ten minste om die nadele, soos net die algemene tema
van JavaScript, al is?
Ek hoop dit is ten minste nuttig, meer as wat toon dat dit 'n bietjie kieskeurig.
Maar jou probleem stel sal baie pret.
Dit gaan groot wees.
Dit sal nie heeltemal so vervelig as dit, ek dink nie.
Jy sal eintlik kry om sien regtig cool dinge.
>> So laaste maar nie die minste nie, ons sal probeer om die Twitter een.
Ek is regtig bang nou, ouens.
Ek weet nie hoe dit gaan om te gaan.
Maar net 'n bietjie te gee meer smaak, en dit is eintlik
manipuleer snare en insette, wat ons gaan doen
is, as ons hier op met HTML-- hierdie een het 'n bietjie more--
ons het 'n paar teks area, wat stem ooreen met die teks area hier.
OK?
En dit het 'n ID van die teks.
Ons herstileer dit 'n bietjie met 'n paar hoogte en breedte
dat ons voorafbepaalde, en ons het H1,
wat net is ons kop een wat verteenwoordig ons karakters oor.
Ons het dit 'n paar Id van oorblywende karakters,
en dan het ons het 'n paar script hier, wat Ek is regtig
hoop derde keer se die sjarme hier, ouens.
>> So, wat ons wil doen, in dieselfde algemene trant
dat ons gedoen het met klok dot js en partytjie dot js as ons het opgemerk,
is ons deur eintlik gryp begin het die dinge wat ons omgee, reg?
So in hierdie geval, is daar twee dinge wat ons omgee, OK?
Een ding wat ons is eintlik soort soek na en teken data van,
en een ding wat ons is eintlik verander.
So daar is ons HTML.
As dit is ons webblad hier, wat is die data wat ons is op soek na?
Dit gaan om te word wat die teks in ons bokse, reg?
Dus, wat ek tik hier.
Dit is wat ek wil weet, of dit is wat ek wil om te kyk na.
En wat gaan wees veranderende op ons webblad?
Die oorblywende karakters.
So in die dieselfde manier, ons wil begin deur initializing veranderlikes
wat eintlik vashou daardie elemente.
OK?
So as ons 'n paar var wat ons teks area,
en ons het 'n paar var wat bly.
Reg?
So het hierdie gaan hou dié twee dinge.
So het die dieselfde soort van ding, dokument dot-- OK, ek is
gaan om seker te maak dit is maak gaan hierdie tyd om te werk.
Ek is baie vasbeslote.
OK, so as ons wil hê dat ons teks area, volgens
ons HTML, wat is ons identifiseerder?
Wat is ons id?
Dit is net gaan teks te wees omdat Dit skep ons teks area, OK,
en ons id is teks, so dit is hoe kan ons gryp wat is daar in.
OK, kommapunt.
Ek gaan super wees presiese hieroor
want ek wil dit hierdie keer om te werk.
OK, doen dieselfde ding, kry element deur Id.
Ek is regtig wonder wat het veroorsaak dat die ander twee te gemors.
OK, dan in hierdie een, wat wil ons om toegang te verkry?
Wat is ons Id hier?
Ons het 'n ander Id in ons HTML, wat is dit?
GEHOOR: Oorblywende karakters.
ALLISON Buchholtz-AU: Oorblywende karakters.
>> OK.
Cool.
So ek is net gaan om te skryf dit regtig vinnig.
Ek gaan net hierdie tweede te skryf.
So teks area.
Wat interessant is, is B function-- daar is baie van die funksies wat nie net
ooreenstem met jou muis, maar jou sleutelbord.
OK?
Sodat jy kan sê wanneer 'n sleutel is gedruk is, kan jy dinge soos wat dit doen.
So het die een wat ons gebruik is 'n beroep op die sleutel tot wat
sê, "As jy 'n sleutel op het gedruk jou sleutelbord, wanneer die gebruiker gelig
hulle vinger af dat die knoppie, en die sleutel ongestrykte geword,
dan gaan ons om iets te doen. "
OK?
So dit maak sin, reg?
Want elke karakter ons tik, ons gaan
te hê ons vingers af te lig van dit, sodat wanneer die sleutel gaan op,
ons kan weet decrement ons oorblywende karakters.
>> So ons het 'n paar op die belangrikste up, en in die dieselfde manier,
ons gaan om te sê, "OK, wanneer ons dit doen, ons
gaan 'n funksie te skep wat gaan e te neem, "in hierdie geval,
en wat ons wil doen, is bereken die aantal oorblywende.
OK, so laat ons net begin deur die skep van 'n veranderlike.
So ons het 'n paar veranderlike r, wat gaan verteenwoordig
hoeveel karakters wat ons verlaat het.
OK?
Ons weet dat ons begin met 140, en as ons wil weet,
kom ons sê, die lengte van hierdie string wat al insette,
doen julle enige idee hoe ons dit doen?
Net die basis van die voor die hand liggend dinge, soos as ons wou uur,
ons gebruik kry uur.
Ons weet dat ons doel is teks area, maar kan jy ouens
dink aan wat nadat dit kan kom?
Enige idees?
>> So hierdie een se soort van minder intuïtief, maar dit is waarde dot lengte.
So gee my net 'n paar waarde eienskap wat
is eintlik die lengte van hierdie string.
So dit gaan om te sê, "OK, ek is op soek na by hierdie hele string binne die teks area,
en ek gaan om te vertel jy hoe lank dit is nie. "
Want as ons onthou snare is eintlik net skikkings,
sodat ons kan net die lengte van hulle.
So het ons.
Cool.
>> Dan wat ons wil doen, is ons nooit wil die gebruiker toe te laat
om insette meer as 140 karakters, reg?
Want as ons sê soos, "O, jy net soveel oorblywende, "
en laat hulle dan doen anyways, het ons lê.
En dit is 'n ander ding wat JavaScript
kan regtig goed wees Want is gebruikers validering
en seker te maak dat jou gebruiker pas binne enige reëls
wat u verskaf het aan hulle.
So as jy wil dinge soos die maak om te doen seker dat iemand insette hul e-pos adres,
of om seker te maak dat wanneer hulle Tik twee wagwoorde, hulle ooreenstem.
JavaScript kan dit doen.
Jy sal iets soos, "wanneer doen die vorm ingedien word, "of soos,
"Wanneer Stuur Form knoppie gekliek, gaan al hierdie dinge. "
En ons kan dit doen JavaScript.
So dit is net wat ons gaan om hier te doen.
>> So, wat dalk 'n manier om te kyk of wees meer as 140 karakters wat hulle gegaan het?
Wat gaan gebeur ons waarde van r as hulle probeer?
Dit gaan om negatief te wees, reg?
Of dit gaan minder wees as of gelyk aan nul.
Sodat ons kan gebruik om 'n as dit net soos alles anders.
OK?
En ons het 'n paar teks area dot waarde, en wat ons hier doen
is ons net cutting-- wat is dit?
Jammer.
Hierdie een, ons wil net valse terugkeer.
Ek het verward.
Alle frazzled van dinge nie werk nie.
OK, ons wil net te return false, en dan het ons
wil die te vertoon oorblywende karakters, reg?
So met die klok, ons het iets met innerlike HTML, reg?
Waar ons stel dit gelyk aan 'n paar veranderlike, so wat kan ons hier doen?
Wat gaan ons die verandering van die innerlike HTML van?
>> GEHOOR: Oorblywende?
>> ALLISON Buchholtz-AU: Ons is besig om die oorblywende.
Alle reg, en wat doen ons dit wil gelyk aan?
Dit gaan r te wees, want dit moet wees om ons oorblywende karakters.
OK?
So ek is regtig senuweeagtig om te sien of dit werk nou nie, maar ons sal sien.
Laat hierdie.
Dit is baie vinnig.
[Onhoorbaar] OK.
Weereens, ek is net gaan om te wys.
Vir watter rede ookal, my besluit om nie te werk nie,
maar wat ek sal jou wys, is dat hierdie is-- oh Ek is veronderstel om dit te sit in.
OK, sien ons dieselfde soort ding hier, om die teks area.
>> Ook, as jy ou kennisgewing, as daar ooit iets wat jy wil doen,
en jy weet nie hoe om te doen dit, kliek net View Page Source,
en hulle gaan om jou te vertel.
Soms sal dit wees encrypted.
Vir jou pset, ons enkripteer alles, sodat dit net lyk soos brabbeltaal.
Maar as daar ooit 'n baie koel webwerf wat jy wil,
As jy kliek View Page Source, dit gaan om jou te vertel hoe om dit te doen nie.
So weer, werk slimmer, nie harder.
En as jy hier, al sien hierdie dinge is dieselfde.
hierdie een hier neem net 'n paar substring dat ek vergeet presies wat dit beteken.
Maar dit neem natuurlik 'n paar substring van die waarde van nul tot tien,
en keer terug vals wat moet ophou die gebruiker van die skryf nie,
en dan natuurlik updates die binneste HTML daar.
>> Cool.
So groot take aways vanaf vandag eksperiment, kyk na die bronkode
want dit gaan om jou te help om 'n baie, en almal, soms JavaScript
kan hard te werk met en nie altyd werk om die manier waarop jy verwag om dit te,
maar hou net probeer want ek belowe dit sal.
Ek belowe al hierdie voorbeelde werk was voor die klas.
Ek verstaan ​​nie wat gebeur het nie.
Ek het letterlik alles dieselfde.
>> Een ding wat ek wil net wys julle dat super nuttig kan wees
is in-- wat voor werk is?
Ons het party werk, het ons nie?
Ek dink nie so nie.
Ja.
Ons gedoen het.
Awesome.
OK, so een ding wat Julle moet weet
is die konsole log wat ek het gepraat oor.
So troos dot log van hallo.
So dit is soort van die JavaScript ekwivalent van printf.
So as jy ooit wil jou veranderlikes inspekteer
of sien wat daar gebeur, wat wat jy kan doen is, as ons inspekteer element,
is wat jy wil om te gaan , en jy gaan om te troos,
jy sal sien dat dit gedruk hallo.
>> Sodat ons dit kan hê druk wat ons wou.
As ons wou dit agtergrond te druk dot dot styl agtergrond,
ons moet in staat wees om die te sien RGB driedubbele wat opkom.
Of nie.
Ek vergeet presies hoe jy druk 'n veranderlike soos dit,
maar jy moet in staat wees om te druk dinge soos dat.
Dit sal baie nuttig wees vir jou pset wanneer
jy probeer om te manipuleer koördinate of iets anders.
So het hulle ook verander hierdie stuk in die klas.
Dit is anders as verlede jaar, so net lekker wees om jou TFS, of die TFS
by kantoorure eerder, want ons is soort leer saam met julle.
Maar die konsole log was super, super nuttig vir JavaScript verlede jaar.
So is mal daaroor.
Leer hoe om dit te gebruik.
Dit is makliker om te gebruik as GDB, sodat moet ten minste 'n plus punt wees.
Maar dankie ouens geduld met my.
Ek is jammer dat my voorbeelde vir een of ander rede
net nie wil hê nie saam met my, maar ek
hoop dat dit gehelp soort kry jy 'n bietjie meer in die sone van JavaScript.
En stuur vir my al jou vrae vir volgende week, so ek kan super herstel word nie,
en ek sal lekkergoed en selfs ekstra bring lekkergoed, want dit was belaglik.
Maar julle ouens is groot, en het 'n awesome week.