ALLISON Buchholtz-AU: Okay alle.
Velkommen tilbage til afsnittet.
Det er vores næstsidste sektion.
Det er så trist.
Jeg ved ikke, hvad jeg har tænkt mig at gøre uden at se jer hver mandag.
Jeg gætter vi bør bare-- måske vi kunne bare
mødes her og har middag eller noget.
Jeg ved det ikke.
Jeg tager mad i stedet.
Vi vil bare snakke.
Men ja, i næste uge være vores sidste afsnit.
>> På dette notat, har du en quiz i næste uge.
Jeg ved, at jeg har glemt at gøre mit, ligesom, to uger varsel i sidste uge,
Men forhåbentlig jer vidste det ville komme.
Forhåbentlig er dette en af ​​de sidste midterms for jer til semester.
Men det kommer til at omfatte alle de materiale, som vi har gået forbi.
Så det er ikke ligesom du kan bare glemme omkring fire sløjfer eller variable.
Fordi vi har lært de i begyndelsen,
de er naturligvis fair spil til din quiz.
>> Det kommer til at være det samme format, samme længde, så du allerede er vant til det.
Der kommer til at være kodning i hånden problemer,
måske nogle true false, måske nogle korte svar.
Så du skal være fortrolig med det format,
især hvis du tager de praksis tests.
Men som jeg siger her, det er kumulative, men vi er helt sikkert
vil fokusere på ting fra uge seks og frem.
Så vi er sandsynligvis ikke vil spørge dig om, hvor mange bytes
er i hver type eller den slags ting,
men vi sandsynligvis vil være interesseret i ting som hægtede lister,
eller forskellige datastrukturer, eller forskellige algoritmer
at vi har talt om.
Så sørg for du virkelig op på dem, og hvis du
brug for ressourcer, Her er masser af ressourcer.
Jeg gav dig slags af en hurtig liste der.
>> I næste uge vil være quiz anmelder løbet af denne tid.
Så hvis du har spørgsmål eller specifikke emner,
specifikke ting på quiz, du gerne vil gå over, skal du
sende dem til mig i god tid, så jeg kan slags forberede noget materiale for.
Og i tillæg til dette sektion gennemgang, vil vi
også holde kurset hele gennemgå som vi gjorde sidste gang.
Og det kommer til at blive udført af de samme personer.
Jeg ved ikke, om det gør det bedre eller værre,
men det vil være mig, Hannah, Davan, og Gabe igen.
Så hvis du ønsker at komme se os alle drillerier med hinanden
og gå dig gennem quiz gennemgang, bør du helt sikkert
kommer til at næste mandag også.
Så du bare have en mandag marmelade pakket af quiz gennemgang, hvilket er godt
fordi så har du tirsdag at behandle gennem alt.
>> Men helt sikkert gøre tjek disse ressourcer.
Study.csv.net er langt jeg tænke, en af ​​de mest nyttige,
hovedsagelig fordi det har en masse kodeeksempler,
det har alle de Power Point med alle de noter på den,
der er virkelig, hvad jeg tegner mest af mine afsnit materialer fra.
Hvis der er noget i tidligere sektioner, jeg kan have sendt ud
at du ikke kan have fået, bare lad mig det vide.
Ligesom sidste uges kodeeksempler, hvis nogen ikke fik det,
bare email mig eller komme tale med mig, og jeg vil sørge for, at du får det.
>> Så med dette, i dag skal vi at være tale om JavaScript.
Så her er vi Tommy, hvem jeg var bare at tale med dig i aftes.
Jeg elsker Tommy.
JavaScript er hans foretrukne sprog, som han siger her.
De vil forsøge at fortælle dig, at det er ikke den bedste, og de vil være forkert.
Så Tommy er en JavaScript mester.
Jeg er ikke helt på hans niveau, men jeg var ligesom,
"Tommy, hvordan jeg underviser disse børn JavaScript? "
Så jeg fik nogle tips, så forhåbentlig de arbejder ud.
>> Så et par ting at vide, er, at JavaScript er et klient-side scripting
sprog, så mens PHP er noget at vi anses for mere server-side,
Det blev uploade til serveren, kompileret og udføres der.
Denne ene udføres på din egen maskine.
OK?
Så du indlæse nogle JavaScript siden og det udfører på din maskine.
Syntax er meget lig C og PHP.
Vi kommer til at gå gennem nogle eksempler på JavaScript,
og du kommer til at se, at måde, vi taler om variabler, løkker,
og betingelserne er alle meget ens.
OK?
Det faktum, at de er så ens, er sandsynligvis kommer til at rejse nogle af jer
op i nogle tilfælde, blot fordi vil du optage en lille smule C
hvor der ikke skulle være.
Måske du prøve og skrive noget når det ikke skal skrives.
>> Og på den, en ting til ved er, at JavaScript
er en dynamisk indtastet sprog, som PHP.
Så hvis du fyre huske fra afsnittet i sidste uge,
da vi var slags gør vores PHP lynkursus,
Vi så, hvordan en streng kunne være forvandlet til en int én, og så videre.
Den type dine variabler bestemmes på kørselstidspunktet,
så de kan ændre sig over løbet af programmet,
og på samme måde, som vi aldrig virkelig erklærer typer til PHP variabler,
vi kommer til at gøre det samme ting her, hvor vi er ikke rigtig
styre de typer af vores variable, så at sige, som vi gør i C.
>> Og så en ting der er temmelig cool er
at du kan fejl kontrollere via konsollen,
med denne store funktion console.log, som
giver dig mulighed for at udskrive forskellige variabler eller genstande, som vi vil
taler om.
Ligesom i sidste uge, da jeg var som, "bruge denne funktion," med dump
fra din pset dette er en funktion du vil bruge, console.log.
Jeg var så overrasket over, hvor mange studerende på kontortid
vidste ikke, om dump-funktionen.
Og jeg var ligesom, "gutter, vil dette gøre dit liv så meget lettere. "
>> Okay, så det var slags bare en kort ting, som altid,
vi har eksempler.
Jeg ved, du fyre elsker dem.
Så her er et eksempel på et meget simpel JavaScript-fil her.
Så det er bare at skabe denne pop-up, der siger,
"Hej verden", når du indtaste siden, men lad os
forsøge at gå gennem dette en lille smule.
Så selvfølgelig er det bare ligesom din normale index.html.
Så bare vores normale skabelon her, og vi har HTML, vi har vores hoved,
og ligesom med CSS, hvordan vi omfattede nogle uden fil, ikke?
Vi har nogle script type tekst, er JavaScript.
Og kilden er hello.js, der er hernede.
Det er hele filen for hello.js.
Og så har vi nogle titel og nogle organ HTML
at vi ikke virkelig bekymrer sig om.
>> Hvad der sker, er, når vi indlæse denne side den automatisk udfører dette script.
OK?
Så JavaScript vil udføre automatisk.
Så hvad det kommer til at gøre, går det til straks at gå og udføre dette.
Og det kommer til at sige, "alarm.
Hej verden ".
Hvilken alarm er den funktion, faktisk frembringer denne boks.
OK?
Så det er sådan alle Encompass.
Der er ikke noget ekstra, vi havde at gøre foruden bare alarm,
og så hvad vi ville inden for vores Alert box.
OK?
Så det er bare en super enkel eksempel på, hvad JavaScript kan gøre.
>> En af de virkelig cool ting, som vi skal se,
er, at JavaScript giver dig at manipulere dine websider,
uden at genindlæse dem hver gang.
Så hvis du want-- for eksempel, hvis du svæver over noget,
hvis du fyre nogensinde har set ligesom menulinjer,
eller når du svæver over nogle emne, vises en drop-down menu,
det er på grund af JavaScript.
OK?
Så du ikke at genindlæse hele side at få denne menu til at dukke op,
du bare på udkig efter nogle specifikke handling, som brugeren har taget,
som kaldes begivenheder, vi får ind, og når du ser det, du siger,
"OK, redigere noget på dette side og gøre det ser anderledes,
men kun redigere disse specifikke ting.
Du må ikke genindlæse det hele. "
Så det faktisk er meget pænere, og du behøver ikke at genindlæse dine sider,
og det er virkelig cool.
>> Så variable erklæringer, så du kan slags se,
Jeg sætter på toppen her, løst skrevet.
Så dette er meget gerne PHP.
Vi behøver ikke at fortælle JavaScript hvilken type vi er
forventer hver af disse variabler for at være.
De kan være hvad typer, vi ønsker.
Så du bemærker i denne sag, erklærer vi dem meget enkelt, bare med "var"
og så hvad vi vil vores variabelnavn at være.
Én ting at bemærke er, at når du sætte var foran et variabelnavn,
den lokalt scope det.
OK?
Det er helt rimeligt for dig til helt at bare slette Var
og bare have s lig CS50, og det ville bare være en global variabel.
OK?
Så du kan initialisere det begge veje, bare afhænger af, hvordan du vil have det.
Så hvis du initialisering det i en funktion,
og du vil, at variablen til holde scoped inden for denne funktion,
du vil ønsker at gøre noget som var navngive en variabel,
versus hvis du ønsker det globalt scoped, du
kan bare gøre navnet de variable og derefter
uanset hvad du gerne vil have det sat lig med.
OK?
>> Det er lidt cool ting hernede, for hvis vi opdager vores variabel
B starter som sandt.
Og hvad det does-- kan nogen fortælle mig, hvad det betyder?
Så vi har nogle alarm.
Hvad ville type B være i begyndelsen?
PUBLIKUM: Boolean.
ALLISON Buchholtz-AU: Boolean.
Right.
Og så vi overflytte B til denne streng, ikke?
Så her, hvilken type B være?
Det ville være en streng, ikke?
Så hvad der er vigtigt for meddelelse er, at i C, vi
kunne næsten aldrig gøre noget lignende.
Vi er nødt til at have en variabel, kastede det som noget andet,
måske gøre nogle funktion med en to i, gå fra en afgift til et heltal.
Men hvis vi bemærker her, B meget nemt ændrer skriver.
>> PUBLIKUM: Vent, så du kan bare være ligesom, "make b et heltal?"
>> ALLISON Buchholtz-AU: Ja.
Du kan bare overflytte b for et heltal.
>> PUBLIKUM: Virkelig?
>> ALLISON Buchholtz-AU: Ja.
Og så ville det være en int.
Så dine variabler kan ændre sig over løbet af programmet også.
De er ikke strengt indtastet.
Det er meget løst skrevet.
OK?
Dybest set dine variabler kan gøre, hvad de ønsker, som vi slags så med PHP.
De kan gøre nogle skøre ting, så er det vigtigt at være temmelig forsigtig.
Navngiv dine variabler godt.
Hvis du ikke, gør lige pludselig du kommer til at være ligesom,
"Vent, jeg troede, det var en streng, og nu er det en int,
og jeg er ikke helt sikker hvad der foregår her. "
Så dette er blot et enkelt eksempel på viser, hvordan en variabel kan let
ændre dens type i løbet af et program.
>> OK.
Så dette skal se super, super bekendt.
Så dette er vores sløjfer i JavaScript.
De er nøjagtig de samme, bortset fra i stedet for fire int i er lig med nul,
kunne vi bare sige var jeg lig med nul.
Og så kunne vi have vores samme slags af betingelse, samme slags opdatering,
Jeg plus plus fungerer fint.
Så fire er de samme, whiles er de samme,
og gøre whiles er nøjagtig den samme.
Samme slags generelt format.
Vi bemærker, fire, parenteser, beslag, det er alle de samme.
Der vil også være semikoloner når vi kommer til eksempel kode.
Du vil se det temmelig det samme som C.
>> For funktionserklæringer, igen, meget ens.
Vi har en funktion, som kun siger, at det er en funktion, og derefter
navnet på vores funktion, og indgangene.
Og igen, hvis vi bemærker, at vi har ingen typer her overhovedet.
Right?
Vi har ikke noget at sige, at disse skal være int'er eller double, eller flåd.
De kunne være, hvad de vil.
Hvad der er vigtigt er at bemærke, at vi nødt til at skrive funktionen på forhånd
at lade JavaScript ved, at dette er faktisk en funktion.
>> Så dette er blot nogle simple sum funktion, der returnerer x eller y,
og så hvad er også køligt er, at du rent faktisk kan
tildele en funktion til en variabel.
Så i dette tilfælde summen er nu funktion, der faktisk gør sum.
Så hvis du bemærker her, vi har funktion, navnet på funktionen, indgange.
Right?
Her har vi bare have funktion og indgange.
Så dette kaldes en anonym funktion.
Og det er noget, der bør være nye til de fleste af jer, hvis ikke alle.
Så dybest set, hvad det betyder, at vi ikke
nødt til navnet på vores funktion i dette tilfælde.
Vi kan bare sige, "OK, jeg har tænkt mig at har denne funktion, udfører, her
er dens input, og her er hvad det kommer til at gøre. "
Og især når du tildele en funktion til nogle variable
at du kommer til at manipulere, Du behøver ikke nødvendigvis
nødt til at navngive det, fordi du kommer til at henvise
det ved denne variabel navn, ikke ved, hvad
funktionen blev faktisk kaldt.
OK?
>> Så hvis vi ser her, vi har nogle variable sum nu
der er lig med den sum af tre og fem.
Og vi ville få det.
Og det ville bare have nogle alarm, tre plus fem er lig med nummeret.
Dette plus vil bare sammenkæde uanset vores svar var på strengen.
Også køligt, plus kan sammenkæde strenge.
>> For JavaScript, som med PHP, HTML og CSS som vi sagde,
en masse af det vi er slags tage de uddannelse hjul off her
og du fyre har en masse know hvordan man virkelig forstå disse ting.
De er lidt anderledes, men de er ikke så fremmed
og at du ikke kan google ting eller slå dem op online med W3 skoler.
Og vi er virkelig forventer du fyre til, slags, eksperiment
og lære på egen hånd.
Så jeg ved, at dette kan synes en smule mindre grundig end nogle af de C-ting
vi gør, men det er faktisk en grund til.
Men forhåbentlig er det ikke alt anderledes, og det er ikke overvældende.
>> Så arrays i JavaScript, igen meget, meget ens.
Right?
Vi har nogle variable matrix der er lig med tomme parenteser,
og det er bare en tom array.
Dette kaldes ofte bogstavelig matrix notation.
Det er bare én ting, vi kalder det.
Hvis vi ser matrix to her, vi har nogle bogstavelig array, der har tre elementer,
ret?
Og så har vi nogle Var tredje element, der er
nogle variable, der er bare kommer til at holde denne streng, JS.
>> De elementer, god til at lægge mærke til, er adskilt af kommaer,
ligesom vi ville forvente.
Og du kan også få adgang til disse, som vi gjorde i C, med dette indeks notation, ikke?
Så forskellige fra PHP nu, vi vil tilbage
til bare lidt for at henvise til ting ved indeks.
Ligesom C, er det også nul-indekset.
Jeg føler, at det ville være virkelig grusom hvis de pludselig JavaScript én
indeks, og du havde helt genoverveje, hvordan du synes om arrays.
>> En cool ting er, at i stedet for at skulle do-- hvis du nogensinde
ønskede længde af et array, måske du gentage gennem det
indtil du finder nogle ende, eller du vil bare vide, hvad det er.
Fordi JavaScript er meget løs i mere måder end bare typen, som vi ser her,
vi kan bare gøre dette array større, fordi vi beslutter at.
Hvis vi bemærker vifte tre har tre ting til at starte,
men så lige pludselig, vi er ligesom, "Åh, bare for sjov.
Vi faktisk går at gøre det 101 ting. "
Så hvis du nogensinde ønsker at vide faktiske længde af dit array,
du gør det på denne måde.
Og vi kommer til at se en masse af denne notation i eksemplerne,
men med JavaScript Det er typisk, hvad
objekt, du taler om dot uanset form for funktion
du vil anvende for den.
OK?
>> Så i dette tilfælde vores formål er arrayet to,
og vi siger, vi ønsker længde matrix to.
Så dette blot kræver ligesom længden på det.
Og der vil returnere din længde.
Også noget at bemærke er at hvis vi opdager vores arrays,
modsætning C, har de ikke at være alle af samme type.
Dette er meget mere som PHP.
JavaScript er dybest set ligesom denne interessante meld C og PHP.
Så vi får ind.
For nu, lad os bare antage at dine arrays er dybest set
som C arrays, i at de er nul indekseret.
OK, så det er alt.
Du kan også bare udvide en matrix til uanset indeks, du vil.
Betragtninger vil det sandsynligvis seg fejl på dig eller give dig nogle fejl,
JavaScript er ligesom, "nah, det er fint.
Jeg fik dette.
Vi vil bare gå lige hvor du vil. "
>> OK, så objekter er meget vigtigt.
Du fyre vil bruge en masse af disse i din P sæt, hvis jeg husker korrekt.
Så de ting, at disse er svarende til i C er structs.
Så du kan tænke om-- når vi går til et eksempel til højre
efter dette Jeg tror, ​​det vil gøre en masse mere sense--
men vi dybest set bruge objekter til organisere naturligvis information.
Når vi talte om structs i C, vi ofte
tale om en studerende, der havde nogle navn, ID, hus, du ved, koncentration.
Og det er sådan det samme at vi bruger objekter til her.
Det er bare at organisere tilsvarende oplysninger.
>> Du kan også tænke på disse som mere svarende til associative arrays i PHP.
Så det ville være slags ting hvor vi har nogle nøgle med en vis værdi,
meget lig PHP.
Så du kan initialisere nogle tom objekt, som vi ser heroppe,
bare med krøllede parenteser.
Så arrays er firkantede parenteser.
Tomme objekter er krøllede parenteser.
Godt forskel at have.
Og disse er blot to forskellige måder at angive egenskaber.
Så dette er slags meget mere af en måde, der
ligner PHP, med vores associative arrays, med vores nøgle,
og vores værdi, hvorimod denne ene is-- du vil
se denne meget mere i JavaScript.
Denne tendens til at være konventionen.
Og på samme måde, som vi gjorde matrix to dot længde, dette at sige:
"OK, giv mig dette attribut af dette objekt. "
Right?
Så på samme måde, det var ligesom, "giv mig attributten længde matrix to "
dette siger, "giv mig nogle ejendom i vores tomme objekt. "
Eller i dette tilfælde, er vi tildele den til en vis værdi her.
Men du kan også få adgang til det på den måde.
>> Og så her er det bare viser to forskellige alarmer.
Så det ville vise de indberetninger ville være nøjagtigt den samme,
Det er blot to forskellige måder adgang til elementet, som vi ønsker.
Giver det mening for alle?
Jeg har lyst til dette ene sandsynligvis er mere fornuftigt,
bare fordi vi kommer ud af PHP.
Men som vi gør flere eksempler, dette er bogstaveligt talt nøjagtig det samme.
Meget af det er bare ændre på syntaks.
>> OK, så eksempler.
Jeg elsker eksempler.
Så her er nogle CS50 variabel, er et objekt,
og vi opbevarer alt dette oplysninger om det.
Så vi har selvfølgelig, instruktør, TFS, psets, og tapede.
Så vi bemærker disse er næsten alle forskellige typer.
Right?
Så objekter kan gemme attributter af forskellige typer.
Vi kan tænke på denne-- det er meget ligner vores associative array i PHP.
Så nøgle, værdi, nøgle, værdi, nøgle, værdi, så videre og så videre.
Hvad er også interessant på samme måde at vi kan have arrays inden arrays,
Vi kan også have objekter inden for genstande eller arrays inden genstande.
Du er aldrig rigtig er begrænset til blot en enkelt ting.
Vi kan få meget Inceptionesque, bare holde går ned i kaninhullet der.
>> Så hvis vi bemærker, at vi har nogle naturligvis at
er en streng, instruktør, der er en snor, og array, en int og en boolesk.
Så alle disse forskellige ting.
>> Okay, så har vi en anden.
Så i dette tilfælde, har vi et array af objekter.
Så bare gerne et objekt kan have en matrix i det.
Vi kan også have en række af objekter.
Dette kan være nyttigt for tænke ligner slags
om, hvordan vi havde en hash bord, havde vi et array
af alle disse forskellige typer structs at
var henvisninger til forskellige noder og whatnot.
Men i dette tilfælde, vi har en række af objekter.
Så dette er ligesom et array af associative arrays.
Så vi har nogle første ville være genstand med navnet James
og hus Winthrop.
>> Du fyre kan huske noget meget lig dette
med din sidste pset, hvor, hvis du trukket noget fra din database,
den første slags ting i dit array var
alle de oplysninger om den første bruger, der mødte det,
og så er du nødt til at indeksere ind i det at få deres bestand eller deres cache
eller whatnot.
Så dette er meget det samme ting, bare en lille ændring
i syntaks, lidt ændring i de ord, vi bruger til at beskrive dem.
>> Så hvis vi ønskede, kan nogen fortælle mig, hvad denne advarsel ville gøre her?
Eller hvad denne bit af kode vil gøre for os?
PUBLIKUM: Det vil give dig alle de navne.
ALLISON Buchholtz-AU: Højre, så det ville bare advare alle de navne
fordi det ville gå igennem sommerhus i, så det ville starte ved nul.
Så det vil sige, OK vi ser på dette første objekt, som
er den første slot i vores array.
Og det siger, "giv mig attribut, navnet på det pågældende objekt. "
Så vi går her, ville vi scan, ville vi finde navn,
og vi ville udskrive James, Molly og Carl.
Eventuelle spørgsmål indtil videre?
JavaScript desværre du kommer til at være
gør en masse for at kigge op på din egne, finde ud af syntaks,
kæmper med det.
Men selvfølgelig er jeg altid her, kontortid er altid her.
Jeg kunne være om tirsdagen i denne uge.
Så hvis du er der, kan du kom og besøg mig i denne uge.
Det ville være dejligt.
>> OK, så DOM er Document-Object Model.
Så dette er blot en måde at vi kan lide at tænke
om, hvordan vores HTML og alt inden den er organiseret.
Dette er meget noget, vil sandsynligvis komme op på din quiz.
Jeg kender mit år, var det som her er HTML-fil, skal du udfylde DOM for det.
Og du bare udfylde små ting.
Disse bør være nemme point forhåbentlig.
Forhåbentlig vil du see--
>> Publikum: [uhørligt]
>> ALLISON Buchholtz-AU: So du ser dette træ her?
>> PUBLIKUM: Ja.
>> ALLISON Buchholtz-AU: Så de vil bede brug
at udfylde, hvad der sker under kroppen.
Måske under kroppen, vi har nogle divs eller vi har nogle stykker,
og vi vil bede dig om at udfylde et træ meget gerne dette.
Så vi vil gå gennem den.
Så Document-objekt Model er bare en måde
at strukturere og tænke om vores HTML grafisk.
Og også når vi får til mere JavaScript,
det vil være det måde, at vi faktisk
manipulere anderledes elementer på siden.
Vi har brug for en måde at få adgang til hver af de ting i vores HTML,
og så det giver os et meget beton standardiseret måde
tværs af forskellige websider til at gøre det.
>> Så hvis vi bare gå gennem det her, naturligvis
vores dokument er ligesom hele vores fil.
Det naturligvis giver mening at det er den højeste ting,
og så har vi vores faktiske HTML, som svarer til dette mærke her.
Også hvis du i led dine tags ordentligt, så skaber dette DOM-træet
bliver super enkel.
Så vi har nogle hoved her.
Vi har nogle organ, vi ser stamceller ud af HTML,
hvilket er grunden til vi har hoved og krop.
Inden hovedet, vi har nogle titel-tag, en ende titel-tag,
så vi ved, der kommer efter hovedet.
Og inden for vores titel-tag, vi har goddag, verden.
OK?
Så det er det hele venstre gren.
Og så til højre hånd gren her ser vi, at vi har HTML,
OK, vi har gjort dette hoveddelen, vi ser bare på kroppen,
så vi har nogle organ område.
Og inden for denne, den eneste ting vi har, er hej, verden.
OK?
Hvis vi havde ting som nogle beslag p og derefter
Hej, verden, og derefter en anden beslag p af farvel, verden,
ville vi have to bobler kommer ud herfra.
Fordi de er begge under kroppen, men de er separate stykker denne sag.
Der er absolut praksis om der i tidligere quizzer,
samt masser online på det.
OK, så er dette bare lader os se alt pænt
og manipulere ting meget systematisk.
OK?
Vi ved præcis, hvordan man krydse gennem dette træ,
så vi ved, hvad vi vil have adgang til.
>> OK, så det er derfor, vi ønsker at have denne slags model,
så vi kan bruge ting som dette, og vi forstår, hvad de betyder,
og de er standardiseret på tværs af alle ting, vi gør.
Så dokument dot titel er bare titlen på our-- alle disse
er temmelig selvforklarende, Jeg vil gerne tro.
Så de første tre eksempler er blot at sige,
"OK, bare giv mig Titlen på denne webside. "
Så det vil give dig, hvad svarer til titlen.
>> Dokument dot krop vil give dig hvad der er inden for disse kroppens tags.
Så du kan manipulere det.
Og dokument dot krop dot indtaste HTML er en meget cool én,
og måske ikke ligesom super intuitive, men den indre HTML
svarer til denne ret her.
Så hvis du nogensinde vil manipulere tekst på en side,
typisk du vil gøre noget med kroppen dot indre HTML.
OK?
Så indre HTML tendens til at henvise til hvad der rent faktisk mellem disse tags.
OK?
Og så nyttige funktioner.
Så hvis du ønskede at få nogen af ​​disse, ethvert element,
vi har nogle Id, klasse navn eller mærke navn.
Dette er meget lig ting, vi gjorde med CSS, ikke?
Hvor vi har nogle vælgere, der svarer til enten et tag, en klasse
at vi giver dem, eller en id.
Dette er meget meget på samme måde.
Hvis du har noget, har nogle klasse af hund,
og du siger få elementer ved mærkenavn, og du lægger hund i there-- eller ked af det,
klasse navn.
Du kan sætte prik i der.
Det kommer til at returnere alle dem elementer du der har denne klasse.
Så du kan manipulere kun dem.
På samme måde, måske har du bare ønsker at manipulere nogle header, så
nogle h1 header, som vi gjorde.
Du kan gøre få elementer ved tag navn, fordi H1 er et mærkenavn.
Og på samme måde, hvis du ønsker at få nogle unikke ting, kan du få tag.
Få element af Id.
Og de er faktisk masser af disse.
Disse er kun ligesom tre af rigtig mange.
Så hvis du går online, som Jeg har tænkt mig at opmuntre
du skal gøre, og gøre nogle forskning på egen hånd,
Jeg helt klart anbefale undersøger alle dem.
De kunne være super nyttige, især når
du vil bare slags manipulere meget specifikke ting uden at have
at gå igennem og prøve til at frasortere alt.
>> OK, så det sidste, er JavaScript-hændelser.
Så da jeg talte tidligere om at gå ind på en hjemmeside,
og når du svæver over noget, eller musen svæver over noget,
noget andet sker.
Det er det, vi gerne vil tænke som en begivenhed.
Så det, vi har, at magt være nyttigt her er onclick.
Så mine var på hover, som, jeg er temmelig sikker, er lige på hover.
Også et ton af disse at du kan kigge efter.
Der er en hel liste online af de forskellige ting
at du kan lytte til.
>> Men JavaScript-hændelser er dybest set bare at reagere på tingene
at din bruger gør.
Right?
Så din bruger gør noget, det er en begivenhed,
og JavaScript vil reagere men du vil have det til.
Det vil reagere i overensstemmelse hermed.
Så i dette tilfælde, har vi nogle vindue dot onload.
Så hvad det siger, er, "vent indtil vinduets loaded. "
OK?
Så når alt er lastet, onload, så kan du udføre denne funktion.
Så når alt er indlæst, er du nødt
at have nogle søgeknappen der får et element af Id,
og den udskriver hvad det så element er som knappen Søg.
Og så har vi denne variabel, vi siger, "OK, onclick."
Så når vi hører et klik på knappen Søg,
udføre denne funktion, hvilket er en alarm, du har klikket på knappen Søg.
>> Så hvad sker der is-- dette er en nice lille grafisk gengivelse her.
Så vores dokument belastninger, det er vores onload,
Vi finder vores søgning knap, som er dette.
Vi leder efter vores knappen Søg.
Og så når knappen Søg er klikkede, svarer det til lige her.
Onclick.
Så vi endelig advare vores brugere, som er det sidste linje her.
OK?
Så hver af disse fire trin bare svarer til de fire kasser
dernede på bunden.
Giver det mening for alle?
>> Og så en ting, jeg bare at nævne meget, meget kort, at jeg
opfordre jer til gå se mere på er
jQuery, som er lige et bibliotek der er bygget oven på JavaScript.
Det er super nyttigt, da med de fleste biblioteker.
Der er masser af funktioner.
Så hvis der er nogensinde noget, du ønsker at gøre i JavaScript,
dit første instinkt bør ikke være at tænke
af, bør "hvilken funktion Jeg kode? "Det skal være,
"Lad mig se nogen er allerede gjort det for mig. "
Fordi ni ud af ti gange, nogen vil have gjort det allerede,
og de sandsynligvis have gjort det bedre.
Folk bruger en masse tid på at gøre disse, og JavaScript er meget udbredt,
så folk er konstant forsøger at gøre det bedre.
Og jQuery har en masse funktioner der vil formentlig være nyttige for dig
i din endelige projekt, hvis du er gør noget med webdesign.
Som jeg gerne sige, "arbejde smartere, ikke hårdere. "
Hvis du fyre gør det, vil det være dejligt.
Når vi er på hackathon jeg ikke Du skal være alt stresset.
Jeg vil have dig til at være ligesom, "Jeg fik dette. jQuery er fik min ryg.
Jeg behøver ikke at skrive disse funktioner. "
>> Så bare to ting til husk, jeg har tænkt mig
at lade jer se mere i jQuery på egen hånd.
Jeg har tænkt mig at sige, er det gør nogle temmelig awesome ting
og kan gøre dit liv en hel del lettere.
Men hvad du vil har er hvad fil
at du kommer til at bruge det i, du vil ønsker disse to linjer.
Du kommer til at have den script af JS jQuery dot js.
Og faktisk din kilde kommer til at være nogle URL.
Hvis du Google jQuery, Google faktisk er vært alle filerne for dig.
Så du helt sikkert ønsker at input, URL i stedet.
Jeg bare sætte dette her for nemheds skyld.
Alt dette betyder er, hvor at find dit jQuery biblioteket.
Det er massiv, så du ikke vil at være vært for det på din egen computer
hvis du kan undgå det, og derfor har vi tendens til at bare sætte i Googles webadresse,
er vært alle disse filer til dig.
OK?
Du google det, jeg lover det vil være der.
>> Og så uanset JavaScript-fil, som du er
hjælp, så dette er blot nogle ydre JavaScript-fil, som du bruger.
På samme måde, som vi linker til vores CSS filer, det er den samme slags ting.
Dette blot links til filen hvor du har JavaScript er.
Og jeg har nogle eksempler med enkle JavaScript.
Så vi vil gå igennem det.
Og så i dit indeks JavaScript, hvilket er din JavaScript-fil her,
dette er slags indpakningen at du har til jQuery.
Du er næsten 99,9 procent af tiden går
at have dette i din index.js fil.
For hvad det siger, er, "Ikke udføre noget
indtil dokumentet er faktisk klar ", hvilket er præcis, hvad du ønsker.
For hvis dit dokument er ikke klar, og jQuery begynder at gøre tingene,
det er bare noget rod.
Så du altid ønsker at have denne wrapper.
Og så for ting, der går der, jeg overlader det til dine gutter egen perusing.
>> OK, så er der nogen spørgsmål til højre nu om JavaScript i almindelighed?
Eller DOM model?
Hvis ikke, har vi nogle cool eksempler, vi kan gå igennem,
at du fyrene kan hjælpe mig koden.
Men jeg vil også være super nice, og hvis du
ønsker ikke at sige noget for disse, det er fint.
Jeg kan også bare give dig eksempler.
Men noget på PowerPoint før vi går videre?
Cool.
>> Jeg føler at du fyre har brug for til energi.
Så jeg tror, ​​vi kommer til at starte med mit parti eksempel først.
Vi har tre eksempler, du har dit valg.
Så vi har uret, hvor vi skal hen at gennemføre en egentlig ur, der er
vil opdatere som tiden går.
Vi har denne store kvidre funktion.
Denne-- du hvad, hold fast.
Vi kommer til at gøre dette gå væk.
Bam.
OK.
>> Vi har denne store kvidre funktion her, at-- jeg ved, ikke?
Det kommer til at være stor.
Er du fyre ophidset?
Det kommer til at tælle antallet tegn, som du har tilbage,
så hvis jeg skriver lige nu, selvfølgelig er det stadig står 140,
men vi ved, det er ikke tilfældet.
Og så med vores sidste her, klik her for at feste.
Hvad kommer til at ske, er, når vi klikker, baggrunden er
kommer til at ændre farver.
Så du fyre har dine muligheder for hvilken en du ønsker at gøre først.
Jeg lover jeg vil tage det meget let på dig.
Jeg føler at alle ligesom af bare meget lav nøgle i dag.
Så jeg vil lede dig gennem hvordan vi vil gennemføre alle disse.
Hvis du ønsker at kime i, det er fantastisk, men jeg
lyst alle er lidt træt.
Så jeg vil bare gå dig gennem disse eksempler.
Har vi noget, Vi vil gerne gøre først?
Nogen?
Ingen præference?
OK.
Ved du hvad?
Vi er på partiet.
Jeg føler, at du fyre har brug for en little-- så vil vi gøre festen først.
OK.
>> Så det, vi har her-- det er ikke skulle være der.
Nu er det godt.
OK.
Så det, vi har her, er blot en simpel HTML-side
at jer alle bør være super kender fra dine sidste to psets.
vi har vores doc typen her.
Kan alle se?
OK.
Cool.
Vi har vores HTML naturligvis.
Vi har nogle header, der er knyttet til et typografiark, der
lige lavet min skrifttype nice og store og fed.
Så du skal ikke bekymre dig om det.
>> Vi har nogle organ med en Id baggrund, OK?
Fordi vi vil være ændre baggrunden.
Så når vi er ved at ændre den baggrund af vores krop,
Vi husker fra for to uger siden når vi har at gøre med web-sider.
Så godt at have det.
Og vi har nogle Id lig fest.
Denne h ref pund betyder blot, at det kommer til at gå til den samme side.
Og klik her for at feste, hvilket er grunden til, når vi klikker på det,
det skal ændre farver, heldigvis.
>> Og så har vi nogle script her, at er netop knyttet til dette parti dot js
fil, der er tom, fordi Vi har ikke gjort noget endnu.
Og det er så trist.
Men meget snart, vil det ændre farver, og det vil være fantastisk.
>> Så jeg vil bare gå jer gennem hvordan vi kan gribe dette.
Så det første, vi måske ønsker at gøre,
hvis vi ændrer på baggrund af kroppen, det første, vi måske ønsker
at gøre er faktisk fat hvad kroppen er, ikke?
Så vi ønsker at have sum, vores baggrund, og hvis du bemærker,
Jeg bare automatisk bare begynde at skrive.
Der er ikke noget særligt, at vi nødt til at gøre for vores JavaScript-filer.
Jeg kan begynde at erklære variabler, og erklære tilfældige funktioner.
Og det er meget mere fri form.
Det er ligesom med C, vi gav jer alle disse hårde regler, og du voksede op,
så vi er ligesom, "gå videre.
Være fri.
Gør hvad du vil. "
Og det er, hvad JavaScript er.
Så vi har nogle baggrunden her.
Med vores DOM model, vi ved, vi kan gøre dokumentet dot få element,
og hvis vi bemærker her, vores krop har en Id.
Right?
Så vi kan får dokument ved Id, og her er en simpel en.
Hvad er vores Id, vi ønsker her?
PUBLIKUM: Baggrund.
ALLISON Buchholtz-AU: Baggrund.
Perfekt.
Og semikolon til sidst.
Det er ikke gået væk endnu.
Du har stadig brug for dine semikoloner.
OK.
Så det er vores første.
Og når vi klikker noget, vi vil have noget til at ske, ikke?
Så vi måske ønsker nogle variable der venter på et klik.
Hvad vi vil gøre, er at vi kommer til at gøre vores link mere ligner en knap.
Så vi kommer til at have nogle knap, lig dokumentere prik få element af Id.
Og hvis jeg taler om det klik link eller klik her for at feste
link, hvad kunne min Id være her?
Party.
Korrekt.
OK ikke alt for dårlig hidtil.
Alle får, hvad vi laver?
>> OK, så nu har vi vores knap, og vi ønsker
ting at ændre sig, når vi klikker på det.
Så hvis vi husker fra vores PowerPoint, meget simpel ting, vi kan gøre
er bare knap dot onclick, ikke?
Og det kommer til at svare til nogle funktion.
Dette er en anonym funktion.
Og det bare as-- faktisk er jeg kommer til at gøre dette til en lidt større.
>> Så hvad jeg lige gjorde her er jeg siger, OK,
når vi klikker vores knap, som er dette link, som vi netop er nævnt,
vi kommer til at udføre denne anonyme funktion.
Vi har ikke brug for input.
Vi er ligeglade, hvad brugeren siger.
Når de klikker på det, vi er kommer til at gøre, hvad vi vil,
der er ændre baggrundsfarven.
OK?
Så det er derfor vi ikke har nogen input, vi bare har denne anonyme funktion.
Og nu er vi faktisk går at skrive denne funktion.
>> Så der er en masse måder, du kunne generere en tilfældig farve.
Den måde, at jeg gjorde det var at generere tre tilfældige tal
og konvertere dem til et RGB triple.
Så dette blot viser dig nogle cool ting, hvis du ligesom, "Åh,
Jeg har brug for at generere en tilfældig nummer. "Hvis du googlede det,
dette er hvad du ville finde.
>> Så vi har tre forskellige ting, Var, ikke rød igen, grøn.
Right?
Så dem er de tre ting, der gør en farve.
Blå, rød og grøn.
Cool.
Og det, vi kan gøre, er, at vi ved at det skal være mellem 255,
og hvis du kiggede op nogle tilfældige tal generator,
du kunne få noget som matematik dot tilfældig, som hvis man ser dette op
vender tilbage til nogle antal mellem nul og én.
OK?
Og hvilke numre gøre vores RGB tripler gå mellem?
Zero og hvad?
Hvad kan de gå op til?
255.
Så hvis matematik dot tilfældigt går mellem nul og én,
hvordan kan vi ønsker at konvertere dette?
PUBLIKUM: Time?
ALLISON Buchholtz-AU: Ja, præcis.
Så tid er 255.
>> Publikum: [uhørligt] Det er ligesom [uhørligt].
ALLISON Buchholtz-AU: Math dot tilfældigt.
PUBLIKUM: Cool.
ALLISON Buchholtz-AU: Ja.
JavaScript bare tager sig af dig.
OK.
Så vi kan gøre det for alle disse.
Right?
Math dot tilfældige tidspunkter 255.
Kopier det.
Cool.
Så de ting er, kan dette ikke returnere et heltal.
Right?
Måske vi få nogle tal mellem nul og én,
og det får den til at være lidt off, og vores RGBS kan ikke være flåd.
De skal være int'er.
Så hvis du prøvet dette, det ville nok har nogle uberegnelig opførsel.
Det ville være lidt funky.
Så det, vi gør, er vi ønsker at gøre sikre, at disse er afrundede,
og du kunne runde enten måde.
Jeg afrundet med gulv.
Så jeg altid sørget at det rundet ned.
Men gå ud af hvor nemt det var at bare få et tilfældigt tal,
hvordan tror du, vi måske gulv dette nummer?
Det er meget ens.
Nogen idé?
Så hvis tilfældig var bare matematik dot tilfældig, så tror du, vi ville gøre gulvet?
Math dot gulv.
Og du kan også gøre math dot loft.
Runde er slags tvetydig fordi du ikke
vide, om at runde op eller runde ned.
Så typisk gør vi altid matematik dot etage, matematik dot loft.
Men honestly--
>> PUBLIKUM: Er ordet runde ned?
>> ALLISON Buchholtz-AU: Floor runder ned.
Og det er kun et valg fra min side.
>> Så nu har vi vores tre tal der er blevet tilfældigt genereret,
og hvad vi vil gøre nu, er vi bare at ændre baggrunden.
OK?
Så vi allerede har vores baggrund slags gemt
i dette element kaldet baggrund.
Så hvad du vil bemærke, er, hvis du leget med dette,
Vi ønsker at ændre stil.
Og det er sådan noget, du vil Google og finde ud af,
gerne, hvordan du ændrer farven.
>> Men den måde, du får adgang til denne farve er baggrund dot style dot baggrund.
Så dette siger givet Dette formål, baggrund,
som henviser til, at element Id deroppe,
vi kommer til at se på stil i den stil,
vi kommer til at se på baggrunden.
OK?
Og hvis du går og ser dette op, det kan gøre lidt mere mening,
men det er dybest set bare at sige, "Giv mig denne meget specifikke attribut
af det, jeg har defineret tidligere. "
Så det, vi er ved at ændre det til, er nogle RGB, fordi det giver mening.
Vi bruger RGB tredobler, ikke?
Og vi have-- jeg vil sørge for jeg få det rigtige antal citater herinde.
Så det, vi gør, er vi RGB, og vi vil
at-- dette er ligesom sammenkædning, som er rød.
Og så ønsker vi nogle komma.
Og så ønsker vi plus grøn, derefter nogle komma, og nogle blå.
>> Så disse plusser bare mener ligesom sammenkædning.
Så dette er blot at skabe dette streng, der foregår inden for RGB.
OK?
>> Publikum: [uhørligt] plus derefter det grønne plus derefter det røde.
>> ALLISON Buchholtz-AU: Ja, fordi jeg rodet det op.
At ens fint.
Åh, hold fast.
Nej.
Fordi jeg har brug for at sørge for, at jeg fik alle disse ret.
Så jeg vil forklare i uno momento.
Grøn, blå, perfekt.
Nu er jeg færdig.
Jeg tror.
>> OK.
Så hvad det er, at baggrunden vil blive sat til nogle streng.
Right?
Hvilket er, hvad vi har her.
Det kommer til at være nogle RGB 255 komma 255 komma nul, eller hvad nummer du
har der.
Så vi laver her, vi har nogle streng.
Og hvad vi ønsker at gøre, er vi slags dynamisk skabe
at når vi faktisk køre dette program.
Så dette er nogle streng.
Plus sammenkæder det med den værdi, røde har,
der sammenkæder den med en komma, der sammenkæder den
med det grønne er, og så videre, og så videre.
OK?
Indtil det sidste, som er den slutparenteserne denne RGB her.
OK?
>> Så hvad det kommer til at generere er nogle kommando virkelig
der er RGB af tre tal den baggrund er nu indstillet til.
OK?
Så lad os se om det virker.
Jeg håber det ikke, for hvis det ikke, jeg har tænkt mig at være reel trist.
Åh nej.
OK, hold fast.
Absolut baggrund dot stil dot baggrund.
Jeg absolut mangler noget bare lille.
Har du ikke fyre hader det?
Når det er bare en lille smule fejl?
Almægtige baggrund.
RGB.
>> Publikum: [uhørligt]
ALLISON Buchholtz-AU: Nej.
Jeg prøvede dette før klassen.
Jeg har alt, hvad jeg gjorde før klasse i tilfælde jeg var ligesom,
"Vent, hvad har jeg gjort forkert?"
Fordi jeg var ligesom, "jeg vil sandsynligvis rod dette op på et tidspunkt. "
Plus grønne.
Alt ser ud som det er sammenkædet korrekt.
OK.
>> Publikum: [uhørligt]
>> ALLISON Buchholtz-AU: Åh, der du går.
Det er, hvad jeg havde brug for.
Kig på det.
Tiffany til at redde.
Perfekt.
OK.
Lad os se om det virker.
Åh min Gud.
OK.
Hold på.
>> PUBLIKUM: Plads efter den anden plus.
>> ALLISON Buchholtz-AU: Hvilken?
Åh vent, vent.
Space slid?
>> PUBLIKUM: Anden plus i den grønne sammenkædning.
ALLISON Buchholtz-AU: Oh.
PUBLIKUM: Der er ikke plads efter plus, ja.
ALLISON Buchholtz-AU: Du har ikke brug for det, men--
PUBLIKUM: Åh, det gør du ikke?
ALLISON Buchholtz-AU: Det ser pænt ud.
PUBLIKUM: OK.
OK.
>> ALLISON Buchholtz AU: Lad os se, om det virker.
OK.
Jeg naturligvis ikke på denne demo, som minder mig
af et foredrag den anden uge, men jeg ved, at dette vil arbejde.
Jeg ved, at dette vil arbejde.
Så tæt.
Medmindre jeg ved et uheld slettet mit script på denne ene.
Nej, det er part dot js.
OK holde på.
Jeg har tænkt mig at kopiere denne, og jeg er også bare at slette alt,
fordi jeg havde denne arbejdsgruppe tidligere.
>> Jeg lover, at det virker.
Hvis ikke, vil jeg vise dig, hvad Tommys er.
Og der.
>> PUBLIKUM: Du refererer part dot CSS, og det er en fest dot js.
>> ALLISON Buchholtz-AU: Ah, godt lige her er part dot js.
OK, hvad har jeg gjort anderledes?
OK, vil vi se, om det virker nu.
Bam.
Så jeg ved ikke, hvad jeg gjorde anderledes, men det er hvad der skal ske.
Kinda cool.
Jeg klikkede på dette, ligesom, for evigt.
Men vi kan forsøge at se, hvad jeg gjorde forskelligt, at denne havde.
Jeg ved ikke, om jer, men dette ser dybest set, hvad jeg lige har skrevet.
Der var sandsynligvis en manglende semikolon et sted er min ting.
Faktisk efter, jeg tror, ​​jeg manglede et semikolon lige her faktisk.
Men jeg kunne ikke se det, fordi Det var væk fra skærmen.
>> Men hvis vi bemærker, er det temmelig meget præcis, hvad jeg lige har skrevet.
Jeg tror nok den sværeste del om dette er bare lidt denne ting ret
her, forståelse hvad det gør der.
Disse mulige ting, du lærer egentlig bare ved at google og ærligt
prøver bare.
Hvis du tror, ​​der er nogle attribut, der sandsynligvis er.
Så prøv det.
Se hvad der sker.
Som jeg sagde, er der en masse eksperimenter med JavaScript,
og PHP, og alt, ting, og CSS især.
Det er den eneste sande måde at forstå det.
>> OK, så efter at fiaskoen med fest dot js, vi har to andre muligheder.
Vi har ur eller Twitter.
De er begge interessante.
Måske ikke helt så sjovt som part, som havde en cool lille Lysblink
ting i slutningen.
Har du fyre har nogen præference?
PUBLIKUM: Ur?
ALLISON Buchholtz-AU: Clock?
OK.
Cool.
>> Så igen, har vi vores tom JavaScript-fil.
Og som vi ser her, vi har nogle meget enkle HTML.
Vi har vores typografiark, der bare formaterer hvad det skal se ud.
Vi har vores div med en Id af ur, som
bare siger, "dette bør være et ur."
Og vi har vores link til vores JavaScript-fil
der er faktisk kommer til at generere vores ur for os.
Fordi cool ting er, at du kan sæt JavaScript til automatisk at opdatere
selv.
OK?
Så i stedet for at vente på brugeren at ramme Opdater på en side
så du kan få opdateret tid, JavaScript
kan opdatere det, men det kan lide.
>> Så som med vores sidste, vi ønskede at få adgang til vores baggrund, ikke?
Så hvad tror du kan være den første ting, vi ønsker at gøre her?
Hvis vi slags går ud denne form for paradigme her?
Vi sikkert gerne adgang til vores ur, right?
Så har vi nogle var ur, der equals--
hvad gør vi tror det kommer til at være?
Dokument prik få element by-- jeg også elsker Sublime-- Id og vores Id er ur.
Semikolon.
Fik at sørge for at få disse semikoloner denne gang,
fordi jeg har lyst til at var problemet sidste gang.
OK, så, da jeg var bare at sige med at forsøge have JavaScript opdatere sig selv,
der er denne store funktion, jeg kender det skete praktisk sidste år,
Jeg er ikke sikker på det kommer i handy for dette pset, men det hedder indstillede interval.
Og det er faktisk rigtig cool hvis du fyre gøre noget
med tiden eller få opdaterede oplysninger.
På en hjemmeside for en endelig projekt, dette er sandsynligvis
en funktion, du vil få super bekendt med.
Så hvad indstillede interval gør, er at vi kommer til at give det en funktion,
og hvor ofte det skal kalde denne funktion.
OK?
>> Så i dette tilfælde, er vi bare at skabe nogle anonyme funktion igen,
OK, det kommer til at få vores date, og vores tid,
og derefter opdatere ting og vise det.
Så vi vil bekymre sig om det.
Vi vil være ligesom generere ur her.
Men det, vi har brug for, er, hvordan ofte for at opdatere den.
Så i dette tilfælde, det er bare millisekunder.
Så vi bare gå til gøre 100 millisekunder.
Selvfølgelig helt vilkårlig.
Hvis du ønskede det at opdatere meget langsommere, kunne du.
Vi kan rode rundt med det indstillede interval,
hvor stor vores interval er efter vi får en arbejdsgruppe ur, som forhåbentlig vil jeg
komme til.
Så det er bare at sige: "OK, opkald denne funktion for hver 100 millisekunder. "
OK?
Det er alt den gør.
>> Så det, vi ønsker, at vores funktion til gøre, er at vi ønsker at have nogle dato
og nogle gang er det vi vil have.
Så vi kan starte med vores dato lig noget,
og vores tid er lig med noget at vi ikke kender endnu.
Eller faktisk, vi skal blot dato, fordi dato kommer til at omfatte alt.
Igen, hvis du bare Google noget om hvad du vil gøre, hvis du skriver, "OK,
Jeg ønsker at få den tid via JavaScript, "det
vil give dig denne store funktion kaldet get dato.
Bogstaveligt, de fleste ting at du ønsker at gøre,
JavaScript vil have det gjort for dig allerede.
Så det er bogstaveligt talt som ny få dato, hvilket er creating--
eller ny dato, rather-- som genererer
en genstand, der repræsenterer en dato.
>> Og hvad vi skal gøre her er dette is-- jeg har tænkt mig at skrive dette,
og derefter forklare, hvad det gør.
Så jeg vil sørge for jeg får denne ret.
>> OK, så hvad denne funktion gør, er vi bare
skabe HTML, der er faktisk kommer til at gå i vores div id af ur.
Så hvad det vil gøre er blot generere nogle streng, OK?
Det bliver så vil være transplanteret ind i vores HTML.
Dybest set, hvad det kommer til at gøre, er hvad we-- hvad jeg vil vise dig
er, at uanset hvad vi siger HTML er, vi kommer til at erstatte denne tekst her
med hvad HTML er.
Så dette kommer til at tillade os til at ændre vores ur prik
HTML fra at være blot teksten i dette bør være et ur, til rent faktisk at vise
numre og ting, som vi holder af om, og faktisk være klokken.
>> Så det, vi kommer til at gøre, er at vi er vil begynde at generere denne HTML.
Så på samme måde, som vi brugte at gøre plus lig for heltal,
kan du nu gøre det for strygere, undtagen det kommer til at sammenkæde dem.
Right?
Som vi så med part dot js, det bare sammenkæder alle disse ting sammen.
Så du kan sammenkæde forskellige stumper af HTML fra variabler eller stumper af strenge
at du skriver ud dig selv, og det bare
virkelig giver dig mulighed for dynamisk generere HTML, som er temmelig cool.
Så hvis du har noget meget brugerspecifikke,
dette kan give dig mulighed for at gøre det.
>> Så vi har HTML, til jeg har tænkt mig at forsøge at sikre jeg får denne ret.
Så vi kommer til at gøre nogle h1 header.
Så hvad er vigtigt at indse her er, at dette er faktisk bare HTML.
Right?
Vi skriver faktisk HTML-kode på her, det er
ikke bare en streng i det normale måde, at vi ville tænke over det.
Så vi har nogle HTML.
Dette betragtes som en streng her selv.
Og vi gør dato dot-- vi ønsker at få vores timer.
Igen, hvis du skulle kigge up noget om dato,
det ville fortælle dig disse er alle de attributter, dato har.
Og her er hvad du kan bruge på det.
Så det har sandsynligvis ting som få timer, og få minutter,
og få sekunder og få millisekunder, og hvem ved hvad de har.
Men hvis man ser ind i dokumentation, vil det hele være der.
>> Så vi har få timer, og så ville vi ønsker
at sammenkæde at med-- jeg er kommer til at flytte denne herovre.
Så hvis vi genererer lige nu, er vi faktisk genererer den tid, ikke?
Vi har timer, og derefter hvad der er mellem timer og minutter?
Du har et semikolon, ikke?
Så vi vil gøre nogle semikolon her.
Og så ønsker vi at få vores minutter, så på samme måde
at vi har dato prik få timer, hvordan kan vi få vores minutter?
Det er bogstavelig talt dato prik få minutter, som jeg lidt ligesom.
Det er ligesom, "Åh, hvordan får jeg mine minutter? "
Jeg bare få mine minutter.
>> OK.
Og så har vi en anden kolon her.
Og så hvis vi ønsker at få vores sekunder, hvordan kan vi få vores andet?
Dato dot få sekunder.
Jeg synes det er ret cool.
Og hvad der er vigtigt for indse, er, at vi også
nødt til at lukke vores HTML-tag her, fordi Det skal stadig være gyldig HTML, så H1.
Cool.
>> Så efter det, kan vi gøre ur dot indre HTML er lig med HTML.
OK?
Så husk, hvordan jeg sagde indre HTML dybest set
tager hvad der er mellem to tags, som vi talte om
og skær eller manipulerer hvad der er derinde?
Så hvad det gør, hvis vi går tilbage til vores ur,
er, at uret refererer til alt inden for denne div.
Dette er den indre HTML af denne Id ur div.
Og så det kommer til at ændre det til HTML, vi netop dannet,
der, som forhåbentlig Forhåbentlig, forhåbentlig,
vil vise tiden lige nu.
Vi vil se.
Selvfølgelig.
Så mange tekniske spørgsmål.
Allisons bare-- jeg fra min spil i dag fyre.
OK, der virker.
ur dot indre HTML.
Det var HTML Really?
Også dette er, hvad der sker.
Når du ikke kan se noget, du bare se på din kildekode.
OK.
Vil du vide en cool arbejde omkring at vi kommer til at gøre lige her?
>> PUBLIKUM: Kan du gøre store bogstaver?
De store bogstaver?
Fordi du har få timer, og derefter få minutter.
>> ALLISON Buchholtz-AU: Det er få timer og get-- oh.
Du are-- guldstjerne.
Det hele er en test, gutter.
Jeg lover, at det var i orden før klassen.
>> OK, men noget køligt at vide, er at du kan also-- hvis undertiden
de eksterne filer er få lidt skør,
du kan også bare sætte dem lige herinde, som har en tendens til at ordne tingene.
Undtagen dette er ligesom virkelig grimme.
Selvfølgelig formatere alt.
Sørg for at det hele er smuk.
OK.
>> Jeg ønskede at gøre alle de seje demoer, og de er bare ikke arbejder ud.
OK.
Script var ur.
Anyways, hvad der er vigtigt er, at dette er den almindelige måde
at du ville formatere JavaScript.
Som du kan se, kan det være meget kræsen tider,
selv når det var bogstaveligt arbejdet, to sekunder siden.
Eller ikke to sekund siden, men meget, meget nylig.
>> Så for at vise dig, hvad det skal se ud, og til at vise dig, at jeg ikke er skør,
og at alt er præcis den samme, det er hvad det skal se ud.
Du er bare kommer til at gøre denne top del her, og hvis du ser side kilde,
hvis du bemærker, han gjorde nogle crazier ting, jeg forenklet det.
Også kredit til Tommy McWilliam, der rent faktisk
hjalp mig oprette disse eksempler, hvilket er grunden til jeg ved, at de arbejder.
Fordi Tommy er en JavaScript mester.
Men hvis vi bemærker, har vi nogle sæt.
Vi har vores ur-funktion her.
Dette er JavaScript, vi bare skrev, eller noget af det.
Vi har lige skrev denne ene lige her.
Og han har en ekstra funktion, bare puder det
ved at sætte et nul, før en bogstav eller før et nummer, hvis det er
kun en af ​​dem.
Så hvis du bemærker, dette er temmelig meget præcis, hvad vi lige har skrevet.
Du har nogle variable ur, har vores element, får element af ID,
som er ur.
Vi har vores indstillede interval funktion, det er
en anonym funktion der udfører alt dette.
Vi har nogle start streng af HTML at vi så dynamisk
generere ved at have nogle h1 header, sammenkæde
med få timer, plus vores tyktarm, plus at få
referatet, plus en anden kolon, plus vores sekunder
og endelig slutter HTML for det.
Og derefter opdatere vi vores ur dot indre HTML til HTML,
og vi opdaterer hver 100 millisekunder.
OK?
>> Se Jeg lover jeg ikke skør.
Jeg ved det ikke.
Jeg ved ikke, hvorfor den ikke kan lide mig.
Jeg føler mig som ser det samme, men det hader mig tilsyneladende.
>> Så lad os se om runde tre går bedre.
Vi er ved at se.
Jeg er ikke sikker på, hvordan det kommer til at gå.
Er alle mindst få ulemper, ligesom bare det overordnede tema
af JavaScript, selv?
Jeg håber, det er i hvert fald nyttigt, mere end at vise, at det er lidt kræsen.
Men dit problem sæt vil være meget sjovt.
Det kommer til at være stor.
Det vil ikke være helt så kedelig da dette, tror jeg ikke.
Du vil faktisk komme til se virkelig cool ting.
>> Så sidst men ikke mindst, vi skal prøve Twitter én.
Jeg er virkelig bange nu, gutter.
Jeg ved ikke, hvordan det kommer til at gå.
Men bare for at give dig lidt mere smag, og det er faktisk
manipulere strenge og indgange, hvad vi vil gøre
er, hvis vi bemærker her med HTML-- denne ene har en lille smule more--
vi har noget tekst område, som svarer til denne tekst område her.
OK?
Og det har en Id af tekst.
Vi nyindrettede det en lille smule med nogle bredde og højde
at vi har forudbestemt, og vi har H1,
som netop er vores header, der repræsenterer vores tegn tilbage.
Vi gav det nogle Id af tegn tilbage,
og så har vi nogle script her, som jeg er virkelig
håber tredje gang er charmen her, gutter.
>> Så det, vi ønsker at gøre, i den samme generelle vene
at vi har gjort med ur dot js og fest dot js som vi har bemærket,
er vi startet ved faktisk snuppe de ting, vi holder af, ikke?
Så i dette tilfælde, er der to ting, som vi holder af, OK?
En ting, vi er faktisk slags leder til og trække data fra
og en ting, vi faktisk forandring.
Så der er vores HTML.
Hvis dette er vores hjemmeside her, hvad der er de data, vi kigger på?
Det kommer til at være, hvad teksten i vores bokse, ikke?
Så uanset hvad jeg skriver i her.
Det er, hvad jeg vil vide, eller det er, hvad jeg ønsker at se på.
Og hvad vil være ændre på vores hjemmeside?
De tegn tilbage.
Så på samme måde, vi ønsker at begynde ved at initialisere variabler
der rent faktisk holde på disse elementer.
OK?
Så hvis vi har nogle var det er vores tekstområde,
og vi har nogle var der er tilbage.
Right?
Så disse kommer til at holde disse to ting.
Så den samme slags ting, dokument dot-- OK, jeg er
vil sørge for dette er kommer til at arbejde denne gang.
Jeg er meget stejlt.
OK, så hvis vi ønsker, at vores tekstområde, ifølge
til vores HTML, hvad er vores id?
Hvad er vores Id?
Det er bare kommer til at være tekst, fordi dette skaber vores tekst område, OK,
og vores id er tekst, så det er hvordan vi kan få fat i, hvad der er derinde.
OK, semikolon.
Jeg har tænkt mig at være super præcist om dette,
fordi jeg ønsker, at dette arbejde denne gang.
OK, gøre det samme, få element af Id.
Jeg er virkelig spekulerer på, hvad har forårsagede de to andre at rod.
OK, så i dette ene, hvad vil vi få adgang til?
Hvad er vores Id her?
Vi har en anden id i vores HTML, hvad er det?
PUBLIKUM: tegn tilbage.
ALLISON Buchholtz-AU: Tegn tilbage.
>> OK.
Cool.
Så jeg bare gå til skriver dette virkelig hurtig.
Jeg bare at skrive dette i sekundet.
Så tekstområde.
Det interessante er B function-- der er masser af funktioner, som ikke kun
svarer til dine mus, men tastaturet.
OK?
Så du kan sige, når en tast er presset, kan du gøre ting som.
Så det, vi bruger kaldes på nøgle op, som
siger, "hvis du har trykket på en tast på tastaturet, når brugeren har løftet
deres finger det knap, og nøglen er blevet upresset,
så vi kommer til at gøre noget. "
OK?
Så det giver mening, ikke?
Fordi hvert tegn vi skriver, vi skal
at nødt til at løfte vores fingre off af det, så når nøglen går op,
vi kan vide at formindske vores tegn tilbage.
>> Så vi har nogle på nøgle op, og på samme måde,
vi kommer til at sige, "OK, når vi gør det, vi
kommer til at skabe nogle funktion, vil tage e "i dette tilfælde,
og hvad vi ønsker at gøre, er beregne antallet tilbage.
OK, så lad os bare starte ved at skabe en variabel.
Så vi har nogle variable r, der kommer til at repræsentere
hvor mange tegn, vi har tilbage.
OK?
Vi ved, at vi starter med 140, og hvis vi ønsker at vide,
Lad os sige, at længden af ​​denne streng, der har været input,
Har du fyre har nogen idé hvordan vi kan gøre det?
Lige baseret ud af det åbenlyse ting, som hvis vi ønskede timer,
vi bruges få timer.
Vi ved, at vores formål er tekst område, men kunne du fyre
tænke på, hvad der kan komme efter det?
Nogen idéer?
>> Så denne ene er lidt mindre intuitiv, men det værdi dot længde.
Så bare give mig nogle værdi attribut,
er faktisk længden af ​​denne streng.
Så det kommer til at sige, "OK, jeg leder ved hele denne streng indenfor tekstområdet,
og jeg har tænkt mig at fortælle dig, hvor lang tid det er. "
For hvis vi husker strenge er virkelig kun arrays,
så vi bare kan tage længden af ​​dem.
Så vi har det.
Cool.
>> Så det, vi ønsker at gøre, er vi aldrig vil tillade brugeren
indtaste mere end 140 tegn, ikke?
For hvis vi siger ligesom, "Åh, du kun så meget tilbage, "
og derefter lade dem gøre det anyways, har vi ligget.
Og det er en anden ting at JavaScript
kan være rigtig godt for, er brugervalidering
og sikre, at din bruger passer ind nogen regler
at du har givet til dem.
Så hvis du ønsker at gøre ting som gør sikker på nogen input deres e-mail-adresse,
eller at sørge for, at når de indtaste to passwords, de matchede.
JavaScript kan gøre det.
Du ville gøre noget lignende, "når formularen er sendt "eller lignende,
"Når Send formular knap er klikkede, find ud af alle disse ting. "
Og vi kan gøre det JavaScript.
Så det er lige, hvad vi vil gøre her.
>> Så hvad der kunne være en måde at kontrollere, om de har gået over 140 tegn?
Hvad kommer til at ske med vores værdi af r hvis de prøver?
Det kommer til at være negativ, ikke?
Eller det vil være mindre end eller lig med nul.
Så vi kan bruge en, hvis det er ligesom alt andet.
OK?
Og vi har nogle tekstområde dot værdi, og hvad vi laver her
er vi bare cutting-- hvad er det?
Undskyld.
Denne ene, vi ønsker blot at returnere falsk.
Jeg fik forvirret.
Alle frazzled fra ting ikke fungerer.
OK, vi ønsker blot at return false, og så vi
ønsker at vise resterende tegn, ikke?
Så med uret, vi gjorde noget med indvendig HTML, ikke?
Hvor vi sat det lige for nogle variable, så hvad kunne vi gøre her?
Hvad skal vi ændre den indre HTML af?
>> PUBLIKUM: Resterende?
>> ALLISON Buchholtz-AU: Vi er ved at ændre tilbage.
Okay, og hvad gør vi ønsker at sætte det lig med?
Det kommer til at være r, fordi det bør være vores tegn tilbage.
OK?
Så jeg er virkelig nervøs for at se, om dette virker nu, men vi vil se.
Lad dette.
Det er virkelig hurtig.
[Uhørligt] OK.
Igen, jeg bare vil vise dig.
Uanset årsagen, mine beslutter ikke at arbejde,
men hvad jeg vil vise dig er, at denne is-- oh Jeg skulle sætte det i.
OK, vi bemærker den samme slags ting her, at få tekstområdet.
>> Også, hvis du guy varsel, hvis der er nogensinde noget, du ønsker at gøre,
og du ved ikke, hvordan man gør det, skal du blot klikke Vis sidens kilde,
og de kommer til at fortælle dig.
Nogle gange vil det være krypteret.
For din pset, vi krypterer alting, så det bare ligner volapyk.
Men hvis der er nogensinde en rigtig kølig websted, som du kan lide,
hvis du bare klikke på Vis sidens kilde, det kommer til at fortælle dig, hvordan du gør det.
Så igen, at arbejde smartere, ikke hårdere.
Og som du kan se her, alle disse ting er ens.
denne ene her blot tager nogle substring at jeg glemmer præcis, hvad det betyder.
Men det tager selvfølgelig nogle substring af værdien fra nul til ti,
og returnerer falsk hvad bør stoppe brugeren fra indlæsning længere,
og så selvfølgelig opdaterer den indre HTML der.
>> Cool.
Så store tage på lager fra i dag, eksperiment, se på kildekoden
fordi det vil hjælpe dig meget, og alle, nogle gange JavaScript
kan være svært at arbejde med og ikke altid arbejde på den måde, du forventer, at,
men bare holde forsøger fordi jeg lover, at det vil.
Jeg lover alle disse eksempler arbejdede før klassen.
Jeg forstår ikke, hvad der skete.
Jeg bogstaveligt talt har alt det samme.
>> En ting mere, som jeg ønsker blot at vise jer, der kan være super nyttig
er in-- hvad arbejdede før?
Vi fik part i arbejde, har vi ikke?
Det tror jeg.
Ja.
Vi gjorde.
Awesome.
OK, så en ting, du fyre skal vide
er konsollen log, som jeg talte om.
Så trøste dot log over hej.
Så dette er sådan det JavaScript svarer til printf.
Så hvis du nogensinde vil inspicere dine variabler
eller se, hvad der sker der, hvad du kan gøre er, hvis vi inspicere element,
er, hvad du ønsker at gå til, og du går at trøste,
vil du se, at det trykte hej.
>> Så vi kunne have det print hvad vi ville.
Hvis vi ønskede at udskrive baggrund dot stil dot baggrund
Vi bør være i stand til at se den RGB triple, der kommer op.
Eller ikke.
Jeg glemmer præcis hvordan du udskrive en variabel som det,
men du bør være i stand til at udskrive noget.
Det vil være meget nyttigt for din pset når
du forsøger at manipulere koordinater eller whatnot.
Så de også ændre dette stykke i klassen.
Dette er forskelligt fra sidste år, så bare være rart at dine TF'er eller TFS
ved kontortid snarere, fordi vi er form for læring sammen med jer.
Men konsollen log var super, super nyttigt for JavaScript sidste år.
Så elsker det.
Lær at bruge den.
Det er nemmere at bruge end GDB, så bør være mindst et plus punkt.
Men tak gutter bærer med mig.
Jeg er ked af, at min eksempler på en eller anden grund
bare ikke lyst til at samarbejde med mig, men jeg
håber, at det hjalp slags får du en lidt mere i den zone af JavaScript.
Og send mig alle dine spørgsmål til næste uge, så jeg kan super repareres,
og jeg vil bringe slik og endda ekstra slik, fordi det var latterligt.
Men du fyre er stor, og har en fantastisk uge.