ALLISON Buchholtz-AU: Greit alle.
Velkommen tilbake til del.
Det er vår nest siste avsnitt.
Det er så trist.
Jeg vet ikke hva jeg skal gjøre uten å se dere hver mandag.
Jeg tror vi bør just-- kanskje vi kunne bare
møtes her og ha middag eller noe.
Jeg vet ikke.
Jeg skal ta med mat i stedet.
Vi vil bare snakke.
Men ja, neste uke vil være vår siste delen.
>> På dette notatet, har du en quiz neste uke.
Jeg vet at jeg glemte å gjøre mitt, som, to ukers forhåndsvarsel i forrige uke,
Men forhåpentligvis dere visste at dette kom.
Forhåpentligvis er dette en av de siste midterms for dere for semesteret.
Men det kommer til å dekke alle materiale som vi har gått over.
Så det er ikke som du kan bare glemme om fire sløyfer eller variabler.
Fordi vi har lært de i begynnelsen,
de er tydeligvis rettferdig spill for din quiz.
>> Det kommer til å være den samme format, samme lengde, slik at du allerede er vant til det.
Det kommer til å være koding av hånd problemer,
kanskje noen true false, kanskje noen korte svaret.
Så du bør være fortrolig med formatet,
spesielt hvis du tar praksis tester.
Men som jeg sier her, er det kumulative, men vi er definitivt
kommer til å være fokus på ting fra uke seks framover.
I så fall er vi sannsynligvis ikke kommer å spørre deg om hvor mange byte
finnes i hver type eller disse slags ting,
men vi sannsynligvis kommer til å være interessert i ting som lenkede lister,
eller forskjellige datastrukturer, eller ulike algoritmer
at vi har snakket om.
Så sørg for at du er virkelig opp på disse, og hvis du
trenger noen ressurser, her er massevis av ressurser.
Jeg bare ga deg snill av en rask liste der.
>> Neste uke vil være quiz gjennomgang i løpet av denne tiden.
Så hvis du har noen spørsmål eller spesifikke emner,
spesifikke ting på quiz som du har lyst til å gå over, vær så snill
sende dem til meg på forhånd slik at jeg kan slags forberede en del materiale for det.
Og i tillegg til denne § vurdering, vil vi
også holde kurs omfattende gjennomgang som vi gjorde forrige gang.
Og det kommer til å være gjort av de samme menneskene.
Jeg vet ikke om det gjør det bedre eller verre,
men det kommer til å være meg, Hannah, Davan, og Gabe igjen.
Så hvis du ønsker å komme se oss alle krangler med hverandre
og lede deg gjennom quiz gjennomgang, bør du definitivt
kommet til at neste mandag også.
Så du må bare en mandag jam pakket av quiz vurdering, noe som er bra
fordi da har du tirsdag å behandle gjennom alt.
>> Men definitivt gjøre sjekk ut disse ressursene.
Study.csv.net er langt, jeg tror, ​​en av de mest anvendelige,
mest fordi det har mye eksempelkode,
det har alle strømtilkobling med alle notene på det,
som er virkelig hva jeg tegner mest av mine seksjons materialer fra.
Hvis det er noe i forrige deler som jeg kan ha sendt ut
at du kanskje ikke har fått, bare gi meg beskjed.
Som forrige ukes eksempelkode, hvis noen ikke får det,
bare send meg eller komme å snakke med meg, og jeg skal sørge for at du får det.
>> Så med det i dag vi skal å være å snakke om Script.
Så her har vi Tommy, hvem jeg var bare snakker til deg i går kveld.
Jeg elsker Tommy.
Javascript er hans favoritt språk, som han sier her.
De vil prøve å fortelle deg at det er ikke den beste, og de vil være galt.
Så Tommy er en Javascript-mester.
Jeg er ikke helt på hans nivå, men jeg var liksom:
"Tommy, hvordan lærer jeg disse barna Javascript? "
Så jeg fikk noen tips, så forhåpentligvis de arbeider ut.
>> Så et par ting å vite er at Javascript er en klient-side scripting
språk, så mens PHP er noe at vi betraktet mer server-side,
det ble opp til serveren, kompilert og henrettet der.
Denne er utført på din egen maskin.
OK?
Så du laste noen Java side, og den utfører på din maskin.
Syntaksen er svært lik C og PHP.
Vi kommer til å gå gjennom noen eksempler på Java,
og du kommer til å se at måten vi snakker om variabler, løkker,
og forholdene er alle svært like.
OK?
Det faktum at de er så like er sannsynligvis kommer til å reise noen av dere
opp, i noen tilfeller, bare fordi du vil innlemme en liten bit av C
der det ikke skal være.
Kanskje du prøve og skrive noe når det ikke skal være skrevet.
>> Og på det, en ting til vet er at Java
er en dynamisk skrevet språk, som PHP.
Så hvis dere huske fra seksjon i forrige uke,
da vi var på en måte å gjøre vår PHP lynkurs,
vi så hvordan en streng man kunne være omgjort til en int ett, og så videre.
Den type variabler fastsettes under kjøring,
slik at de kan endre seg over I løpet av programmet,
og på samme måte som vi aldri virkelig erklære typer for PHP variabler,
vi kommer til å gjøre det samme ting her, hvor vi er egentlig ikke
regulering av de typer av våre variabler så å si, som vi gjør i C.
>> Og så en ting som er ganske kult er
at du kan feil sjekk via konsollen,
med denne flotte funksjonen console.log, som
gjør at du kan skrive ut forskjellig variabler eller objekter at vi vil
snakke om.
Akkurat som i forrige uke da jeg var som "bruke denne funksjonen," med dump
fra din PSet dette er en funksjon du ønsker å bruke, console.log.
Jeg ble så overrasket over hvor mange studenter ved kontortid
visste ikke om dump funksjon.
Og jeg var som "gutta, vil dette gjøre livet så mye enklere. "
>> All right, så det var slags bare en kortfattet ting, som alltid,
Vi har eksempler.
Jeg vet at dere elsker dem.
Så her er et eksempel på en meget enkel Javascript-fil her.
Så det er bare kommer til å skape dette pop-up som sier,
"Hello world", når du inn på siden, men la oss
prøv og gå gjennom dette litt.
Så åpenbart dette er bare som den vanlige index.html.
Så, bare vår normale mal her, og vi har HTML, vi har vårt hode,
og akkurat som med CSS, hvordan vi inkludert noen utenfor fil, ikke sant?
Vi har noen script type tekst som er Script.
Og kilden er hello.js, som er her nede.
Dette er hele filen av hello.js.
Og så har vi noen tittel og noen kroppen HTML
at vi ikke egentlig bryr seg om.
>> Hva som skjer er, når vi laster denne siden den utfører dette skriptet automatisk.
OK?
Så Javascript vil utføre automatisk.
Så hva det kommer til å gjøre, det kommer til umiddelbart å gå og utføre dette.
Og det kommer til å si, "varsel.
Hello world. "
Som varsler er den funksjonen som faktisk genererer denne boksen.
OK?
Så det er på en måte alt omfatte.
Det er ikke noe ekstra vi hadde å gjøre i tillegg bare våken,
og deretter hva vi ønsket innenfor vår Alert boks.
OK?
Så det er bare en superenkel eksempel på hva Javascript kan gjøre.
>> En av de virkelig kule ting, som vi skal se,
er at Javascript lar deg å manipulere websidene dine,
uten å måtte laste dem hver gang.
Så hvis man want-- for eksempel hvis du svever over noe,
hvis dere noen gang har sett som Meny barer,
eller når du holder over noen emne, vises en rullegardinmenyen,
det er på grunn av Javascript.
OK?
Så du er ikke omlasting hele side for å få denne menyen til å dukke opp,
du er bare ute etter noen spesifikke handling som brukeren har tatt,
som er kalt hendelser som vi får inn, og når du ser at du sier,
"OK, redigere noe på dette side og gjøre det ser annerledes ut,
men bare redigere disse spesifikke ting.
Ikke legg hele greia. "
Slik at det faktisk er mye hyggeligere, og du trenger ikke å laste sidene dine,
og det er virkelig kult.
>> Så variabeldeklarasjoner, slik at du kan slags se,
Jeg satt på toppen her, løst skrevet.
Så dette er veldig mye som PHP.
Vi trenger ikke å fortelle Java hvilken type vi er
forventer hver av disse variablene å være.
De kan bli hva typer vi ønsker.
Så du merker i dette tilfellet, vi erklære dem veldig enkelt, bare med "var"
og deretter hva vi vil vår variabelnavn å være.
En ting å merke seg er at når du sette Var foran en variabel navn,
det lokalt scopes det.
OK?
Det er helt rimelig for deg å fullstendig bare slette VaR
og bare ha s tilsvarer CS50, og det ville bare være en global variabel.
OK?
Så du kan initialisere det begge veier, bare avhenger av hvordan du vil ha det.
Så hvis du initialisering det innenfor en funksjon,
og du vil at variabelen til holde omfangs innenfor den funksjonen,
du kommer til å ønske å gjøre noe sånt Var Name en variabel,
versus hvis du ønsker det globalt scoped, du
kan bare gjøre navnet den variable og deretter
hva du ønsker det satt lik.
OK?
>> Dette er slags kule ting her nede, fordi hvis vi oppdager vår variabel
b starter som sant.
Og hva dette does-- kan noen fortelle meg hva dette betyr?
Så vi har litt varsling.
Hva ville skrive av b være i begynnelsen?
PUBLIKUM: Boolean.
ALLISON Buchholtz-AU: Boolean.
Høyre.
Og da vi tildele b til denne strengen, ikke sant?
Så her, hva slags b være?
Det ville være en streng, ikke sant?
Så hva er viktig å varsel er at i c, vi
kan nesten aldri gjøre noe sånt.
Vi måtte ha en variabel, kastet det som noe annet,
kanskje gjøre noen funksjon med en to Jeg går fra en kostnad til et heltall.
Men hvis vi legger merke til her, b veldig lett endres skriver.
>> PUBLIKUM: Vent, så du kan bare være som, "gjøre b et heltall?"
>> ALLISON Buchholtz-AU: Yeah.
Du kan bare tilordne b til et heltall.
>> PUBLIKUM: Virkelig?
>> ALLISON Buchholtz-AU: Yeah.
Og så ville det være en int.
Så dine variabler kan endres over I løpet av studiet også.
De er strengt tatt ikke skrevet.
Det er veldig løst skrevet.
OK?
I utgangspunktet variabler kan gjøre hva de vil, så vi slags så med PHP.
De kan gjøre noen sprø ting, så det er viktig å være ganske forsiktig.
Navngi dine variabler godt.
Hvis du ikke gjør det, plutselig du kommer til å være som,
"Vent, jeg trodde dette var en streng, og nå er det en int,
og jeg er ikke helt sikker hva som skjer her. "
Så dette er bare et enkelt eksempel på viser hvordan en variabel kan lett
endre sin type i løpet av løpet av et program.
>> OK.
Så dette bør se super, super kjent.
Så disse er våre løkker i Javascript.
De er nøyaktig det samme, bortsett i stedet for fire int i er lik null,
vi kan bare si Var jeg er lik null.
Og så kunne vi ha vår samme sort av tilstand, samme slags oppdatering,
Jeg pluss pluss fungerer helt fint.
Så firere er de samme, Mellem er de samme,
og gjøre whiles er nøyaktig det samme.
Samme slags generelle formatet.
Vi legger merke til, fire, parentes, parentes, det er alt det samme.
Også det vil være semikolon når vi kommer til eksempelkode.
Du vil se det er ganske mye på samme måte som C.
>> For funksjons erklæringer, igjen, svært lik.
Vi har noen funksjon som bare sier at det er en funksjon, og deretter
navnet på vår funksjon, og inngangene.
Og igjen hvis vi oppdager, vi har ingen typer her overhodet.
Høyre?
Vi har ingenting å si at disse trenger å være ints eller dobbeltrom, eller flyter.
De kan være hva de vil.
Hva er viktig er å merke seg at vi trenger å skrive funksjon forhånd
å la Javascript vite at Dette er faktisk en funksjon.
>> Så dette er bare noen enkle sum funksjon som returnerer x eller y,
og deretter hva er også kult er at du faktisk kan
tildele en funksjon til en variabel.
Så i dette tilfellet er summen nå funksjon som faktisk gjør sum.
Så hvis du legger merke til her, har vi funksjon, navn på funksjon, innganger.
Høyre?
Her er vi bare nødt funksjon og innganger.
Så dette kalles en anonym funksjon.
Og dette er noe som bør være ny til de fleste av dere, om ikke alle av dere.
Så i utgangspunktet hva som middel er at vi ikke gjør det
må navnet på vår funksjon i dette tilfelle.
Vi kan bare si: "OK, jeg kommer til å har denne funksjonen som utfører, her
er sine innganger, og her er hva det kommer til å gjøre. "
Og spesielt når du tilordner en funksjon av noen variable
at du kommer til å manipulere, Du trenger ikke nødvendigvis
trenger å nevne det fordi du kommer til å være å henvise
til det ved denne variabelen navn, ikke av hva
funksjonen ble faktisk kalt.
OK?
>> Så hvis vi ser her, vi har noen variabel sum nå
som er lik summen av tre og fem.
Og vi ville få dette.
Og dette ville bare ha litt våken, tre pluss fem er lik antallet.
Dette pluss vil bare sette sammen hva vårt svar var på strengen.
Også kult, pluss kan sette sammen strenger.
>> For Javascript, som med PHP, HTML og CSS som vi sa,
mye av det vi er snille av å ta treningshjul off her
og dere har mye know hvordan å virkelig forstå disse tingene.
De er litt annerledes, men de er ikke så fremmed
og at du ikke kan google ting eller se dem opp på nettet med w3 skoler.
Og vi egentlig venter deg gutta til, type, eksperiment
og lære på egen hånd.
Så, jeg vet at dette kan virke litt mindre grundig enn noen av de c ting
vi gjør, men det er faktisk for en grunn.
Men forhåpentligvis er det ikke så annerledes, og det er ikke overveldende.
>> Så arrays i Javascript, igjen veldig, veldig lik.
Høyre?
Vi har litt variabelt utvalg som er lik tomme parentes,
og det er bare en tom array.
Dette kalles ofte bokstave rekke notasjon.
Det er bare én ting vi kaller det.
Hvis vi ser matrise to her, har vi noen bokstavelig array som har tre elementer,
ikke sant?
Og så har vi noen Div tredje element som er
noen variabel som er bare kommer til å holde denne strengen, JS.
>> Elementene, godt å legge merke til, er atskilt med komma,
akkurat som vi forventer.
Og du kan også få tilgang til disse, som vi gjorde i C, med denne indeksen notasjon, ikke sant?
Så forskjellig fra PHP nå, vi kommer tilbake
til bare slags henviser til ting ved indeks.
Akkurat som C, er det også null indeksen.
Jeg føler at det ville være veldig grusom hvis de plutselig gjorde Java ett
indeks, og du måtte helt revurdere hvordan du tenker om arrays.
>> En kul ting er at i stedet for å måtte do-- hvis du noensinne
ønsket lengden av en matrise, kanskje du iterere gjennom det
til du finner noen ende, eller du ville bare vite hva det er.
Fordi Javascript er veldig løs i mer måter enn bare typen, som vi ser her,
vi kan bare gjøre denne matrisen større fordi vi bestemmer oss for.
Hvis vi oppdager rekke tre har tre ting å starte,
men så plutselig, vi er liksom: "oh, bare tuller.
Vi blir faktisk kommer for å gjøre det 101 ting. "
Så hvis du noen gang ønsker å vite Selve lengden på array,
du gjør det på denne måten.
Og vi kommer til å se mye av denne notasjonen i eksempler,
men med Javascript det er vanligvis uansett
objekt som du snakker om dot hva slags funksjon
du vil bruke på det.
OK?
>> Slik at i dette tilfellet, vår objekt er matrise to,
og vi sier vi vil ha den lengde på rekke to.
Så dette bare kaller som lengden på det.
Og som vil returnere din lengde.
Også noe å merke seg er at hvis vi legger merke til våre rekker,
i motsetning til C, har de ikke være av samme type.
Dette er mye mer som PHP.
Javascript er i utgangspunktet akkurat som dette interessant meld av C og PHP.
Så vi skal gå inn på det.
For nå, la oss bare anta at arrays er i utgangspunktet
som C arrays, ved at de er null indeksert.
OK, så det er alt.
Du kan også bare forlenge en array til hva indeksen du vil.
Mens dette ville trolig SEG utsette på deg eller gi deg noen feil,
Javascript er like, "nah, det er greit.
Jeg fikk dette.
Vi vil bare gå rett hvor du vil. "
>> OK, slik at gjenstandene er meget viktig.
Dere skal bruke mye av disse i P sett, hvis jeg husker riktig.
Så ting som disse er lik i C er structs.
Så du kan tenke om-- når vi går til et eksempel til høyre
etter dette tror jeg det vil gjøre mye mer sense--
men vi i utgangspunktet bruke gjenstander til organisere selvfølgelig relatert informasjon.
Når vi snakket om structs i C, vi ofte
snakke om en student som hadde noen navn, ID, house, du vet, konsentrasjon.
Og det er slags det samme at vi bruker objekter for her.
Det er bare å organisere lignende informasjon.
>> Du kan også tenke på disse som mer lik assosiative arrays i PHP.
Så dette ville være slags ting hvor vi har noen nøkkel med en viss verdi,
svært lik PHP.
Så du kan initialisere noen tom objekt, som vi ser her oppe,
bare med klammeparentes.
Så arrays er hakeparenteser.
Tomme objekter er klammeparentes.
God skille å ha.
Og disse er bare to forskjellige måter å angi egenskaper.
Så dette er slags mye mer av en måte som
ligner på PHP, med vår assosiative matriser, med vår nøkkel,
og vår verdi, mens denne ene er-- du
ser dette mye mer i Javascript.
Dette pleier å være konvensjonen.
Og på samme måte som vi gjorde matrise to prikk lengde, er dette å si:
"OK, gi meg dette attributt av dette objektet. "
Høyre?
Så på samme måte som det var som "gi meg attributtet lengden på rekke to, "
dette sier, "gi meg noen egenskap av vår tomt objekt. "
Eller i dette tilfellet, er vi tildele det til noen verdi her.
Men du kan også få tilgang til det på den måten.
>> Og så her dette er bare viser to ulike varsler.
Så dette ville vise varslene ville være nøyaktig samme,
det er bare to forskjellige måter tilgang til element som vi ønsker.
Betyr det fornuftig for alle?
Jeg føler at denne ene sannsynligvis gjør mer fornuftig,
bare fordi vi kommer ut av PHP.
Men som vi gjør flere eksempler, dette er bokstavelig talt den samme.
Mye av det er bare å endre i syntaks.
>> OK, så eksempler.
Jeg elsker eksempler.
Så her er noen CS50 variabel som er en gjenstand,
og vi lagrer alt dette informasjon om det.
Så har vi selvfølgelig, instruktør, TFS, psets, og teipet.
Så vi legger merke til disse er nesten alle av forskjellige typer.
Høyre?
Så objekter kan lagre attributter av forskjellige typer.
Vi kan tenke på dette-- det er veldig lik vår assosiative array i PHP.
Så nøkkel, verdi, nøkkel, verdi, nøkkel, verdi, så videre og så videre.
Hva er også interessant på samme måte at vi kan ha arrays innenfor arrays,
Vi kan også ha objekter innenfor gjenstander eller matriser innenfor objekter.
Du aldri virkelig begrenset til bare en eneste ting.
Vi kan få svært Inceptionesque, bare holde det gående ned kaninhullet der.
>> Så hvis vi legger merke til, vi har noen kurs som
er en streng, instruktør som er en streng, og array, en int, og en boolsk.
Så alle disse forskjellige ting.
>> Greit, så har vi en annen.
Så i dette tilfellet, har vi en rekke objekter.
Så akkurat som et objekt kan ha en rekke i den.
Vi kan også ha en rekke objekter.
Dette kan være nyttig for å tenke på lik slag
av hvordan vi hadde en hash tabell, hadde vi en rekke
av alle disse forskjellige typer structs som
var pekere til forskjellige noder og whatnot.
Men i dette tilfelle vil vi har en rekke gjenstander.
Så dette er som en matrise av assosiative arrays.
Så vi har noen første elementet ville være gjenstand med navnet James
og huse Winthrop.
>> Dere husker kanskje noe som er svært lik denne
med din siste PSet, der hvis du trukket noe fra databasen,
den første typen ting i ditt utvalg var
all informasjon om den første brukeren som møtte det,
og deretter måtte indeksen inn som for å få deres lager eller deres cache
eller whatnot.
Så dette er veldig mye det samme ting, bare en liten endring
i syntaks, litt endring i ordene vi bruker for å beskrive dem.
>> Så hvis vi ønsket, kan noen fortelle meg hva dette varselet ville gjøre her?
Eller hva denne biten av kode ville gjøre for oss?
PUBLIKUM: Det vil gi deg alle navnene.
ALLISON Buchholtz-AU: Høyre, så det ville bare varsle med alle navnene
fordi det ville gå gjennom hytte i, så det ville starte på null.
Så det vil si, OK vi leter ved denne første objekt, som
er det første sporet i vår array.
Og det sier, "gi meg attributt, navnet på dette objektet. "
Så vi går her, ville vi scan, vi ville finne navn,
og vi vil skrive ut James, Molly, og Carl.
Eventuelle spørsmål så langt?
Javadessverre du kommer til å være
gjør mye av å se opp på din egen, finne ut syntaksen,
grappling med det.
Men selvfølgelig er jeg alltid her, kontortid er alltid her.
Jeg kan være på tirsdager denne uken.
Så hvis du er der, kan du komme og besøke meg denne uken.
Det ville være flott.
>> OK, så DOM er Document-Object Model.
Så dette er bare en måte at vi liker å tenke
om hvordan vår HTML og alt innenfor den er organisert.
Dette er svært mye noe vil trolig komme opp på quiz.
Jeg vet at min år, var det som her er HTML-fil, fyll i DOM for det.
Og du bare fylle ut småting.
Disse bør være enkle poeng forhåpentligvis.
Forhåpentligvis vil du see--
>> PUBLIKUM: [uhørbart]
>> ALLISON Buchholtz-AU: So du se dette treet her?
>> PUBLIKUM: Yeah.
>> ALLISON Buchholtz-AU: Så de vil spørre bruk
for å fylle ut det som går under kroppen.
Kanskje under kroppen, har vi noen divs eller vi har noen avsnitt,
og vi vil be deg om å fylle ut et tre veldig mye som dette.
Så vi skal gå gjennom det.
Så Document-objektet Modellen er bare en måte
å strukturere og tenke om vår HTML grafisk.
Og også når vi får inn mer Javascript,
det kommer til å være den måte at vi faktisk
manipulere annerledes elementer på siden.
Vi trenger en måte å få tilgang til hver av de tingene i vår HTML,
og så dette gir oss en veldig betong standardisert måte
på tvers av ulike websider for å gjøre det.
>> Så hvis vi bare gå gjennom dette her, selvfølgelig
vår dokumentet er som vår hele filen.
Det gjør åpenbart fornuftig at det er den høyeste tingen,
og da har vi våre faktiske HTML, som tilsvarer denne taggen her.
Også hvis du i innrykk kodene dine ordentlig, så skaper dette DOM treet
blir super enkelt.
Så vi har litt hode her.
Vi har noen kropp som vi ser stamme av av HTML,
det er derfor vi har hode og kropp.
Inne i hodet, har vi noen tittelen tag, en slutt tittelen tag,
så vi vet at kommer etter hodet.
Og innenfor vår tittelen tag, vi har hallo, verden.
OK?
Så det er dette hele venstre gren.
Og deretter for høyre hånd gren her ser vi at vi har HTML,
OK vi har gjort dette hodedelen, vi ser bare på kroppen,
så vi har litt på kroppen.
Og innen denne, er den eneste ting vi har er hallo, verden.
OK?
Hvis vi hadde ting som noen brakett p og deretter
hallo, verden, og deretter en annen brakett p av farvel, verden,
vi ville ha to bobler kommer ut av her.
Fordi de er begge under kroppen, men de er separate avsnitt denne saken.
Det er definitivt praksis på at i tidligere tester,
samt rikelig online på det.
OK så, bare lar dette oss se alt pent
og manipulere ting veldig systematisk.
OK?
Vi vet nøyaktig hvordan de skal traversere gjennom dette treet,
så vi vet hva vi vil ha tilgang til.
>> OK, så dette er grunnen til at vi ønsker å ha denne form for modellen,
slik at vi kan bruke ting som dette, og vi forstår hva de mener,
og de er standardisert tvers av alle tingene som vi gjør.
Så dokument dot tittelen er bare tittelen our-- alle disse
er ganske selvforklarende, Jeg liker å tro.
Så de tre første eksempler er bare å si:
"OK, bare gi meg Tittelen på denne nettsiden. "
Så det vil gi deg det tilsvarer tittelen.
>> Dokument dot kroppen kommer til å gi deg alt innenfor de kropps koder.
Så du kan manipulere det.
Og dokument dot kroppen dot inn HTML er en veldig kul en,
og kanskje er ikke sånn super intuitiv, men den indre HTML
tilsvarer dette akkurat her.
Så hvis du noen gang ønsker å manipulere teksten på en side,
vanligvis du kommer til å gjøre noe med kroppen dot indre HTML.
OK?
Så indre HTML tendens til å referere til hva er egentlig mellom disse kodene.
OK?
Og deretter nyttige funksjoner.
Så hvis du ønsket å få noen av disse, noe element,
vi har noen Id, klasse navn eller kodenavn.
Dette er svært lik ting vi gjorde med CSS, ikke sant?
Hvor vi har noen velgere som tilsvarer enten en kode, en klasse
at vi gir dem, eller en Id.
Dette er svært mye på samme måte.
Hvis du har noe som har noen klasse av hund,
og du sier få elementer ved kodenavn, og du sette hunden i det-- eller lei,
klassenavnet.
Du kan sette prikken der.
Det kommer til å returnere alle de elementer til dere som har denne klassen.
Så du kan manipulere bare de.
På samme måte, kanskje bare ønsker å manipulere noen header, så
noen h1 header, som vi gjorde.
Du kan gjøre få elementer etter tag navn, fordi h1 er et kodenavn.
Og på samme måte, hvis du ønsker å få noen unike ting, kan du får tag.
Få element av Id.
Og de er faktisk mange av disse.
Dette er bare som tre av veldig mange.
Så hvis du går online, som Jeg kommer til å oppmuntre
du skal gjøre, og gjøre noen forskning på egen hånd,
Jeg anbefaler ser på alle disse.
De kunne være super anvendelige, spesielt når
du vil bare slags manipulere svært spesifikke ting uten å ha
å gå gjennom og prøve å analysere ut alt.
>> OK, så det siste er Javascript-hendelser.
Så når jeg snakket tidligere om å gå inn på en nettside,
og når du holder over noe, eller musen svever over noe,
noe annet skjer.
Dette er hva vi ønsker å tenke på som en hendelse.
Så det vi har som kanskje være nyttig her er onclick.
Så min var på hover, som jeg er ganske sikker på, er bare på hover.
Også massevis av disse som du kan se etter.
Det er en hel liste på nettet av de forskjellige tingene
at du kan lytte til.
>> Men Javascript-hendelser er utgangspunktet bare å svare på ting
at brukeren gjør.
Høyre?
Så din bruker gjør noe, er at en hendelse,
og Javascript vil svare men du vil at det skal.
Det vil reagere deretter.
Så i dette tilfellet, har vi noen vinduet dot onload.
Så hva dette sier er, "vente inntil vinduets lastet. "
OK?
Så når alt er lastet, onload, så kan du utføre denne funksjonen.
Så når alt er lastet, du kommer
å ha noen søk-knappen som får et element av Id,
og det skrives hva som element er som på Søk-knappen.
Og så har vi denne variabelen, vi sier, "OK, onclick."
Så når vi hører et klikk på Søk-knappen,
utføre denne funksjon, som er en varsling, klikket du på Søk-knappen.
>> Så hva skjer er-- dette er en fin lite grafisk representasjon her.
Så våre dokument belastninger, det er vår onload,
vi finner vår søk knappen, som er dette.
Vi leter etter vår søkeknappen.
Og så når på Søk-knappen er klikket, tilsvarer det akkurat her.
Onclick.
Da vi endelig varsle vår bruker, som er denne siste linjen her.
OK?
Slik at hver av de fire trinnene bare svarer til de fire boksene
der nede på bunnen.
Betyr det fornuftig for alle?
>> Og så en ting som jeg bare kommer å nevne veldig, veldig kort, at jeg
oppfordre dere til gå nærmere inn er
jQuery, som ligger bare et bibliotek som er bygget på toppen av Javascript.
Det er super nyttig, som med de fleste biblioteker.
Det er mange funksjoner.
Så hvis det er stadig noe som du ønsker å gjøre i Javascript,
ditt første instinkt bør ikke være til å tenke
av, burde "hvilken funksjon Jeg kode? "Det skal være,
"La meg se noens allerede gjort dette for meg. "
Fordi ni av ti ganger, noen vil ha gjort det allerede,
og de sannsynligvis ha gjort det bedre.
Folk bruker mye tid på å gjøre disse, og Javascript er veldig mye brukt,
slik at folk er stadig prøver å gjøre det bedre.
Og jQuery har mange funksjoner som trolig vil være nyttig for deg
i det endelige prosjektet hvis du er gjør noe med webdesign.
Som jeg liker å si, "arbeid smartere, ikke hardere. "
Hvis dere gjør det, vil det være stor.
Når vi er på hackathon jeg gjør ikke ønsker du å være alt stresset ut.
Jeg vil at du skal være som "Jeg fikk dette. jQuery må jo ryggen min.
Jeg trenger ikke å skrive disse funksjonene. "
>> Så bare to ting til husk, jeg kommer
å la dere se mer inn jQuery på egen hånd.
Alt jeg kommer til å si er det gjør noen ganske utrolige ting
og kan gjøre livet ditt hele mye enklere.
Men hva du vil har er uansett fil
at du skal bruke den til, du kommer til å ønske disse to linjene.
Du kommer til å ønske den manus av js jQuery dot js.
Og faktisk din kilde kommer til å være noen URL.
Hvis du Google jQuery, Google faktisk vert alle filene for deg.
Så du definitivt ønsker å innspill som URL i stedet.
Jeg bare sette dette her for enkelhets skyld.
Alt dette betyr er hvor du skal finne din jQuery biblioteket.
Det er massiv, slik at du ikke vil ha å legge den ut på din egen datamaskin
hvis du kan unngå det, det er derfor vi tendens til å bare sette i Googles URL som
vert alle disse filene for deg.
OK?
Du Google det, jeg lover det vil være der.
>> Og så uansett Javascript-fil som du er
bruker, så dette er bare noen ekstern Javascript-fil som du bruker.
På samme måte som vi lenker til våre CSS filer, er dette den samme typen ting.
Dette kobler bare til filen hvor Javascript er.
Og jeg har noen eksempler med enkel Javascript.
Så vi kommer gjennom det.
Og deretter i indeksen Javascript, som er din Javascript-fil her,
dette er slags wrapper at du har for jQuery.
Du er nesten 99,9 prosent av tiden går
å ha dette i din index.js fil.
Fordi hva dette sier er, "Ikke utføre noe
inntil dokumentet er faktisk klar ", som er akkurat det du ønsker.
Fordi hvis dokumentet er ikke klar, og jQuery begynner å gjøre ting på,
det er bare et rot.
Så du alltid vil ha denne wrapper.
Og så for ting som går inn der, jeg skal overlate til dine gutta 'egen perusing.
>> OK, så er det noe du lurer rett nå om Javascript generelt?
Eller DOM-modellen?
Hvis ikke, har vi noen kule eksempler på at vi kan gå gjennom,
at dere kan hjelpe meg kode.
Men jeg er også tenkt å være super fin, og hvis du
ønsker ikke å si noe for disse, er det helt greit.
Jeg kan også bare gi deg eksempler.
Men noe på PowerPoint før vi går videre?
Cool.
>> Jeg føler at dere trenger til energi.
Så jeg tror vi kommer til å begynne med mitt parti eksempel først.
Vi har tre eksempler, du har ditt valg.
Så vi har klokke, hvor vi går å gjennomføre en faktisk klokke som er
kommer til å oppdatere etter som tiden går.
Vi har denne flotte Twitter funksjon.
Dette-- vet du hva, holde på.
Vi kommer til å gjøre dette gå unna.
Bam.
OK.
>> Vi har denne store Twitter-funksjon her, at-- jeg vet, ikke sant?
Det kommer til å være stor.
Er dere spent?
Det kommer til å telle antallet tegn som du har igjen,
så hvis jeg skriver akkurat nå, tydeligvis det fortsatt står 140,
men vi vet at det er ikke tilfelle.
Og deretter med vår siste her, kan du klikke her for å feste.
Hva kommer til å skje er når vi klikker, bakgrunnen er
kommer til å endre farger.
Så dere har dine alternativer av hvilken du ønsker å gjøre først.
Jeg lover at jeg skal ta det veldig enkelt for deg.
Jeg føler at alle er snille av bare svært lav nøkkel i dag.
Så jeg vil gå gjennom hvordan vi vil gjennomføre alle disse.
Hvis du ønsker å kiming i, det er flott, men jeg
føler at alle er litt sliten.
Så jeg skal bare gå deg gjennom disse eksempler.
Har vi noe som vi ønsker å gjøre først?
Anyone?
Ingen preferanse?
OK.
Vet du hva?
Vi er på fest.
Jeg føler at dere trenger en little-- I så fall vil vi gjøre partiet først.
OK.
>> Så det vi har her-- som er ikke ment å være der.
Nå er det bra.
OK.
Så det vi har her er bare en enkel HTML-side
at dere bør alle være super kjenner fra dine to siste psets.
vi har vår doc typen her.
Alle kan se?
OK.
Cool.
Vi har vår HTML åpenbart.
Vi har noen header som er knyttet til et stilark som
bare gjort min skrift fin og stor og fet.
Så ikke bekymre deg for det.
>> Vi har noen kropp med en Id bakgrunn, OK?
Fordi vi kommer til å være endring av bakgrunnen.
Så når vi endrer bakgrunn av vår kropp,
vi husker fra to uker siden når vi har å gjøre med nettsider.
Så godt å ha det.
Og vi har noen Id lik fest.
Dette h ref pund betyr bare at det kommer til å gå til samme side.
Og klikk her for å feste, som er grunnen til at når vi klikker på den,
det bør endre farger, heldigvis.
>> Og så har vi noen script her som er nettopp knyttet til dette partiet dot js
fil, som er tomt fordi vi har ikke gjort noe ennå.
Og det er så trist.
Men ganske snart, vil det endre farger, og det vil være fantastisk.
>> Så jeg skal bare gå dere gjennom hvordan vi kan nærme seg dette.
Så det første som vi kanskje ønsker å gjøre,
hvis vi endrer bakgrunn av kroppen, det første vi vil kanskje
å gjøre er å faktisk ta tak hva kroppen er, ikke sant?
Så vi ønsker å ha sum, vår bakgrunn, og hvis du legger merke til,
Jeg bare automatisk bare begynne å skrive.
Det er ikke noe spesielt at vi trenger å gjøre for våre Javascript-filer.
Jeg kan begynne å erklære variabler, og erklære tilfeldige funksjoner.
Og det er mye mer fri form.
Det er som med C, ga vi dere alle disse harde regler, og du vokste opp,
så vi er like, "gå videre.
Være gratis.
Gjør hva du vil. "
Og det er hva Javascript er.
Så vi har litt bakgrunn her.
Med vår DOM-modellen, vet vi at vi kan gjøre dokumentet dot få element,
og hvis vi oppdager her, Kroppen vår har en Id.
Høyre?
Slik at vi kan får dokumentet ved Id, og her er en enkel en.
Hva er vår Id at vi ønsker her?
PUBLIKUM: Bakgrunn.
ALLISON Buchholtz-AU: Bakgrunn.
Perfekt.
Og semikolon på slutten.
Det har ikke gått bort enda.
Du må fortsatt dine semikolon.
OK.
Så det er vår første.
Og når vi klikker noe, vi ønsker at noe skal skje, ikke sant?
Så vi vil kanskje noen variable som venter på et klikk.
Hva vi skal gjøre er vi kommer til å gjøre vår link ligner mer på en knapp.
Så vi kommer til å ha noen knapp som tilsvarer dokumentere dot få element av Id.
Og hvis jeg snakker om Klikk på linken eller klikk her for å feste
link, hva kan min Id være her?
Fest.
Riktig.
OK ikke så ille så langt.
Alle få det vi gjør?
>> OK, så nå har vi vår knappen, og vi ønsker
ting å endre seg når vi klikker på den.
Så hvis vi husker fra vår PowerPoint, veldig enkel ting vi kan gjøre
er bare knapp dot onclick, ikke sant?
Og det kommer til å like noen funksjon.
Dette er en anonym funksjon.
Og dette bare as-- faktisk jeg er kommer til å gjøre dette til en litt større.
>> Så det jeg gjorde her er jeg sier, OK,
når vi klikker vår knappen, som er denne linken som vi bare referert til,
vi kommer til å kjøre denne anonyme funksjon.
Vi trenger ikke noen innganger.
Vi bryr oss ikke hva brukeren sier.
Når de klikker på det, vi er kommer til å gjøre hva vi vil,
som er endre bakgrunnsfargen.
OK?
Så det er derfor vi ikke har noen innganger, vi bare har denne anonyme funksjon.
Og nå er vi faktisk kommer å skrive denne funksjonen.
>> Så det er en haug av måter du kunne generere en tilfeldig farge.
Måten jeg gjorde det var å generere tre tilfeldige tall
og konvertere dem til et RGB trippel.
Så dette bare viser deg noen kule ting som hvis du er som, "oh,
Jeg trenger å generere en tilfeldig nummer. "hvis du googlet det,
Dette er hva du ville finne.
>> Så vi har tre forskjellige ting, Var, ikke rødt igjen, grønn.
Høyre?
Så de er de tre ting som utgjør en farge.
Blå, rød og grønn.
Cool.
Og hva vi kan gjøre er at vi vet at det må være mellom 255,
og hvis du så opp noen random number generator,
du kan få noe som matematikk dot tilfeldig, som hvis du ser dette opp
vender tilbake til et antall mellom null og en.
OK?
Og hva tallene gjør vårt RGB tredobler gå mellom?
Zero og hva?
Hva kan de gå opp til?
255.
Så hvis matematikk dot tilfeldig går mellom null og én,
hvordan kan vi ønsker å konvertere dette?
PUBLIKUM: Time?
ALLISON Buchholtz-AU: Ja, akkurat.
Så tiden er 255.
>> PUBLIKUM: [uhørbart] Det er som [uhørbart].
ALLISON Buchholtz-AU: Math dot tilfeldig.
PUBLIKUM: Cool.
ALLISON Buchholtz-AU: Ja.
Java tar bare vare på deg.
OK.
Så vi kan gjøre det for alle disse.
Høyre?
Math dot tilfeldige ganger 255.
Kopiere det.
Cool.
Så ting er, kan dette ikke returnere et heltall.
Høyre?
Kanskje vi får noen tall mellom null og en,
og det fører til at det skal være lett off, og våre RGBS kan ikke være flyter.
De trenger å være ints.
Så hvis du har prøvd dette, ville det sannsynligvis har litt uberegnelig oppførsel.
Det ville være litt funky.
Så det vi gjør er at vi ønsker å gjøre sikker på at disse er avrundet,
og du kan runde uansett.
Jeg rundet med gulvet.
Så jeg alltid sørget at det rundet ned.
Men å gå ut av hvor enkelt det var å bare få et tilfeldig tall,
hvordan tror du vi kanskje gulvet dette nummeret?
Det er svært lik.
Noen ide?
Så hvis tilfeldig var bare matematikk dot tilfeldig, så tror du vi ville gjøre gulvet?
Math dot gulvet.
Og du kan også gjøre matte dot tak.
Runde er slags tvetydig fordi du ikke
vite om å runde opp eller avrunde nedover.
Så typisk vi alltid gjøre matte dot gulv, matte dot tak.
Men honestly--
>> PUBLIKUM: Har gulvet runde ned?
>> ALLISON Buchholtz-AU: Gulv runder ned.
Og det er bare et valg for min del.
>> Så nå har vi våre tre tall som har blitt tilfeldig generert,
og hva vi skal gjøre nå er at vi er bare kommer til å endre bakgrunnen.
OK?
Så vi allerede har vår bakgrunn slags lagret
i dette elementet kalles bakgrunn.
Så hva du vil legge merke til er, hvis du spilte rundt med dette,
vi ønsker å endre stilen.
Og dette er slags noe som du ville Google og finne ut,
liker hvordan å endre fargen.
>> Men måten du tilgang til denne fargen er bakgrunn dot stil dot bakgrunn.
Så dette er å si gitt dette formål bakgrunn
som viser til at element Id der oppe,
vi kommer til å se på stil innen stilen,
vi kommer til å se på bakgrunnen.
OK?
Og hvis du går og ser dette opp, det kan gjøre litt mer fornuftig,
men dette er i utgangspunktet bare si: "Gi meg dette svært spesifikk attributt
av det jeg har definert tidligere. "
Så det vi endrer det til er noen RGB, fordi det er fornuftig.
Vi bruker RGB tripler, ikke sant?
Og vi have-- jeg ønsker å sørge for at jeg få riktig antall sitater i her.
Så det vi gjør er at vi har RGB, og vi kommer
to-- dette er som sammensetning, som er rød.
Og da vi ønsker noen komma.
Og da vi ønsker pluss grønn, så noen komma, og noen blå.
>> Så disse plusser bare mener som sammensetning.
Så dette er bare å lage dette strengen som kommer innenfor RGB.
OK?
>> PUBLIKUM: [uhørlig] pluss deretter det grønne et pluss da det røde.
>> ALLISON Buchholtz-AU: Ja, fordi jeg rotet det opp.
At ens fine.
Oh, hold på.
Nei.
Fordi jeg trenger å være sikker at jeg fikk alle disse rett.
Så jeg vil forklare i uno momento.
Grønn, blå, perfekt.
Nå er jeg ferdig.
Jeg tror.
>> OK.
Så hva dette er, er at bakgrunnen kommer til å bli satt til noen streng.
Høyre?
Som er det vi har her.
Det kommer til å være noen RGB 255 komma 255 komma null, eller hva nummeret du
har der.
Så vi gjør her, vi har litt streng.
Og hva vi ønsker å gjøre, er at vi er slags dynamisk skape
at når vi faktisk kjøre dette programmet.
Så dette er litt streng.
Pluss Setter sammen det med verdien som røde har,
som kjeder sammen det med en komma, som kjeder sammen det
med hva grønn er, og så videre, og så videre.
OK?
Helt til slutten, som er den lukke parentes av denne RGB her.
OK?
>> Så hva dette kommer til å generere er noen kommando virkelig
som er RGB av tre tall at bakgrunnen er nå satt til.
OK?
Så la oss se om dette fungerer.
Jeg håper det gjør det, fordi hvis det ikke, jeg kommer til å være ekte trist.
Oh no.
OK, hold på.
Definitivt bakgrunn dot stil dot bakgrunn.
Jeg er definitivt mangler noe bare små.
Har ikke dere hater det?
Når det er bare en liten liten feil?
Allmektige bakgrunn.
RGB.
>> PUBLIKUM: [uhørbart]
ALLISON Buchholtz-AU: Nei.
Jeg prøvde dette før klassen.
Jeg har alt jeg gjorde før klasse i tilfelle var jeg liker,
"Vent, hva gjorde jeg galt?"
Fordi jeg var liksom: "Jeg vil sannsynligvis rotet dette opp på et tidspunkt. "
Pluss grønn.
Alt ser ut som det er sammenkjedet riktig.
OK.
>> PUBLIKUM: [uhørbart]
>> ALLISON Buchholtz-AU: Åh, det du går.
Det er det jeg trengte.
Se på det.
Tiffany å redde.
Perfekt.
OK.
La oss nå se om det fungerer.
Oh my God.
OK.
Hold på.
>> PUBLIKUM: Space etter den andre pluss.
>> ALLISON Buchholtz-AU: Hvem av dem?
Å vente, holde på.
Plass slitasje?
>> PUBLIKUM: Second pluss i den grønne sammensetning.
ALLISON Buchholtz-AU: Oh.
PUBLIKUM: Det er ingen plass etter pluss, ja.
ALLISON Buchholtz-AU: Du trenger ikke det, men--
PUBLIKUM: Å, gjør du ikke?
ALLISON Buchholtz-AU: Det ser ganske.
PUBLIKUM: OK.
OK.
>> ALLISON Buchholtz AU: La oss se om dette fungerer.
OK.
Jeg er tydeligvis mislykkes på denne demoen, som minner meg
av en forelesning den andre uken, men jeg vet at dette vil fungere.
Jeg vet at dette vil fungere.
Så nær.
Med mindre jeg tilfeldigvis slettet min skript på denne.
Nei, det er fest dot js.
OK holde på.
Jeg kommer til å kopiere dette, og jeg er også bare kommer til å slette alt,
fordi jeg hadde denne arbeids tidligere.
>> Jeg lover at det fungerer.
Hvis ikke, vil jeg vise deg hva Tommys er.
Og der.
>> PUBLIKUM: Du refererer fest dot CSS, og det er en fest dot js.
>> ALLISON Buchholtz-AU: Ah, vel akkurat her er partiet dot js.
OK, hva gjorde jeg annerledes?
OK, vil vi se om dette fungerer nå.
Bam.
Så, jeg vet ikke hva jeg gjorde annerledes, men dette er hva som skal skje.
Ganske kult.
Jeg klikket på dette, som, for alltid.
Men vi kan prøve og se hva jeg gjorde annerledes at dette hadde.
Jeg vet ikke om dere, men dette ser i utgangspunktet det jeg nettopp skrev.
Det var trolig en savnet semikolon et sted er min greie.
Faktisk etter, tror jeg at jeg manglet semikolon rett her faktisk.
Men jeg kunne ikke se det fordi det var utenfor skjermen.
>> Men hvis vi legger merke til, er dette ganske mye akkurat hva jeg nettopp skrev.
Jeg tror nok den vanskeligste delen om dette er bare litt av denne tingen rett
her, forståelse hva det gjør der.
Disse slags ting du lærer egentlig bare ved googling og ærlig
bare prøver.
Hvis du tror det er noen attributt, er det sannsynligvis er.
Så prøv det.
Se hva som skjer.
Som jeg sa, det er mye av eksperimentering med Javascript,
og PHP, og alt det der ting, og CSS spesielt.
Det er den eneste sanne måten å forstå det.
>> OK, så etter at fiaskoen med partiet dot js, vi har to andre alternativer.
Vi har klokke eller Twitter.
De er både interessant.
Kanskje ikke fullt så morsomt som part, som hadde en kul liten Blinkende
tingen på slutten.
Har dere noen preferanser?
PUBLIKUM: klokke?
ALLISON Buchholtz-AU: klokke?
OK.
Cool.
>> Så igjen, har vi vår tom Javascript-fil.
Og som vi ser her, vi har noen veldig enkel HTML.
Vi har vår stil ark, som bare formaterer hva det skal se ut.
Vi har vår div med en Id av klokke, som
bare sier, "dette bør være en klokke."
Og vi har vår link til vår Javascript-fil
det er faktisk kommer til å generere vår klokke for oss.
Fordi den kule ting, er at du kan satt Javascript for å automatisk oppdatere
selv.
OK?
Så i stedet for å vente på brukeren å treffe Refresh på en side
slik at du kan få oppdaterte tiden, Java
kan oppdatere den, men det liker.
>> Så, som med vår siste, ville vi å få tilgang til vår bakgrunn, ikke sant?
Så hva tror du kan være den første vi vil gjøre her?
Hvis vi slags gå av denne typen paradigmet her?
Vi sannsynligvis vil tilgang til vår klokke, ikke sant?
Så har vi noen Div klokke, som equals--
hva tror vi vet det kommer til å bli?
Dokument dot få element by-- jeg også elsker Sublime-- Id og vår Id er klokke.
Semikolon.
Fikk å sørge for å få disse semikolon denne gangen,
fordi jeg føler at var problemet sist.
OK så, så jeg ble bare si med prøver å ha Javascript oppdatere seg selv,
det er dette flott funksjon, jeg vet det kom hendig i fjor,
Jeg er ikke sikker på at det kommer i hendig for dette PSet, men det heter innstilt tidsintervall.
Og dette er faktisk veldig kult hvis dere gjøre noe
med tid eller får oppdatert informasjon.
På et nettsted for en endelig prosjekt, er dette trolig
en funksjon du vil få super kjent med.
Så hva satt intervall gjør er at vi kommer til å gi den en funksjon,
og hvor ofte det skal kalle denne funksjonen.
OK?
>> Så i dette tilfellet, vi bare kommer til å skape litt anonym funksjon igjen,
OK, som kommer til å få vår dato, og vår tid,
og deretter oppdatere ting og vise det.
Så vi vil bekymre deg for det.
Vi vil være som generere klokke her.
Men det vi trenger er hvordan ofte for å oppdatere den.
Så i dette tilfellet, er det bare millisekunder.
Så vi skal bare gjøre 100 millisekunder.
Selvfølgelig helt vilkårlig.
Hvis du ønsker den skal oppdatere mye saktere, kunne du.
Vi kan rote rundt med innstilt verdi,
hvor stor vår intervall er etter at vi får en fungerende klokke, som forhåpentligvis vil jeg
komme til.
Så dette er bare å si: "OK, samtale denne funksjonen hver 100 millisekunder. "
OK?
Det er alt den gjør.
>> Så det vi ønsker vår funksjon til gjøre er at vi ønsker å ha noen dato
og litt tid er hva vi kommer til å ha.
Så kan vi begynne med vår dato er lik noe,
og vår tid er lik noe at vi ikke vet ennå.
Eller faktisk, vi trenger bare dato, fordi dato kommer til å omfatte alt.
Igjen hvis du bare Google noe om hva du vil gjøre, hvis du skriver, "OK,
Jeg ønsker å få tid via Javascript, "det
vil gi deg denne store funksjon som heter get dato.
Bokstavelig talt, de fleste ting at du ønsker å gjøre,
Javascript er nødt til det gjort for deg allerede.
Så det er bokstavelig talt som ny få dato, som er creating--
eller ny dato, rather-- som genererer
noen objekt som representerer en dato.
>> Og hva vi skal gjøre her er dette er-- Jeg kommer til å skrive dette,
og deretter forklare hva den gjør.
Så jeg skal sørge for at jeg får denne retten.
>> OK, så hva denne funksjonen gjør, er at vi er bare
skape HTML som faktisk er kommer til å gå innenfor vår div Id av klokke.
Så hva dette kommer til å være å gjøre er bare generere noen streng, OK?
Som deretter kommer til å være transplantert inn i vårt HTML.
I utgangspunktet hva det kommer til å gjøre er hva we-- hva jeg vil vise deg
er at uansett hva vi sier HTML er, vi kommer til å erstatte denne teksten her
med hva HTML er.
Så dette kommer til å tillate oss til å endre vår klokke dot
HTML fra å være bare teksten i denne bør være en klokke, for å faktisk vise
tallene og ting som vi bryr om, og faktisk være o'clock.
>> Så hva vi skal gjøre er at vi er kommer til å begynne å generere denne HTML.
Så på samme måte som vi brukte å gjøre pluss er lik for heltall,
kan du nå gjøre det for strykere, bortsett fra at det kommer til å slå sammen dem.
Høyre?
Som vi så med partiet dot js, dette bare Setter sammen alle disse tingene sammen.
Så du kan sette sammen ulike biter av HTML fra variabler, eller biter av strenger
at du skriver ut selv, og dette er bare
virkelig lar deg dynamisk generere HTML, som er ganske kult.
Så hvis du har noe svært brukerspesifikke,
Dette kan tillate deg å gjøre det.
>> Så vi har HTML, til jeg kommer til å prøve og sørge for at jeg får denne retten.
Så vi kommer til å gjøre noen h1 spissen.
Så hva er viktig å innse her er at dette er faktisk bare HTML.
Høyre?
Vi skriver faktiske HTML-kode i her, er det
ikke bare en streng på vanlig måte som vi ville tenke på det.
Så vi har litt HTML.
Dette regnes som en streng her skjønt.
Og vi gjør dato dot-- vi ønsker å få våre timer.
Igjen, hvis du skulle se opp noe om dato,
det ville fortelle deg disse er alle attributtene som dato har.
Og her er hva du kan bruke på det.
Så det sannsynligvis har ting som få timer, og få minutter,
og få sekunder, og få millisekunder, og hvem vet hva annet de har.
Men hvis du ser inn i dokumentasjon, vil det hele være der.
>> Så vi har få timer, og da ville vi ønsker
til å flette sammen at with-- jeg er kommer til å flytte dette over her.
Så hvis vi genererer akkurat nå, vi er faktisk genererer tiden, ikke sant?
Vi har timer, og deretter hva som er mellom timer og minutter?
Du har et semikolon, ikke sant?
Så vi ønsker å gjøre noen semikolon her.
Og så ønsker vi å få vår minutt, slik at på samme måte
at vi har dato dot få timer, hvordan kan vi få våre minutter?
Det er bokstavelig talt dato dot få minutter, som jeg slags liker.
Det er som, "oh, hvordan får jeg mine minutter? "
Jeg bare få min minutter.
>> OK.
Og så har vi en annen kolon her.
Og så hvis vi ønsker å få vår sekunder, hvordan kan vi få vår andre?
Dato dot få sekunder.
Jeg tror det er ganske kult.
Og hva er viktig å skjønner, er at vi også
må lukke våre HTML-koden her, fordi det skal fortsatt være gyldig HTML, så h1.
Cool.
>> Så etter det, kan vi gjøre klokke dot indre HTML er lik HTML.
OK?
Så husker hvordan jeg sa indre HTML utgangspunktet
tar alt som er mellom to tags som vi snakket om
og innstikk eller manipulerer hva er der?
Så hva dette betyr, hvis vi går tilbake til vår klokke,
er at klokken viser til alt innenfor denne div.
Dette er den indre HTML av denne Id klokke div.
Og så det kommer til å endre det til HTML at vi bare generert,
som, som forhåpentligvis forhåpentligvis, forhåpentligvis,
vil vise tiden akkurat nå.
Vi får se.
Selvfølgelig.
Så mange tekniske problemer.
Allisons just-- jeg er av mine spill i dag folkens.
OK, som fungerer.
klokke dot indre HTML.
Det var HTML Really?
Også dette er hva som skjer.
Når du ikke kan se noe, du bare se på kildekoden.
OK.
Vet du vil vite en kul arbeid rundt at vi kommer til å gjøre her?
>> PUBLIKUM: Kan du gjøre store bokstaver?
De store bokstaver?
Fordi du har få timer, og deretter få minutter.
>> ALLISON Buchholtz-AU: Det er få timer og get-- oh.
Du are-- gullstjerne.
Det er alt en test, folkens.
Jeg lover at det var i arbeid før klassen.
>> OK, men noe kult å vite er at du kan also-- hvis noen ganger
eksterne filer er blir litt gal,
du kan også bare sette dem rett her inne, som har en tendens til å fikse ting.
Bortsett fra dette er som virkelig stygg.
Selvfølgelig formatere alt.
Sørg for at alt er pen.
OK.
>> Jeg ønsket å gjøre alle de kule demoer, og de er bare ikke trener.
OK.
Script Div klokke.
Anyways, det som er viktig er at dette er den generelle måten
at du ville formatere Script.
Som du kan se, kan det være veldig pirkete noen ganger,
selv når det var bokstavelig talt arbeider to sekunder siden.
Eller ikke to andre siden, men veldig, veldig nylig.
>> Så for å vise deg hva det skal se ut, og for å vise deg at jeg er ikke gal,
og at alt er akkurat samme, er dette hva det skal se ut.
Du bare kommer til å gjøre dette øverste delen her, og hvis du vise siden kilden,
hvis du legger merke til, gjorde han noen galere ting, jeg forenklet det.
Også, kreditt til Tommy McWilliam, som faktisk
hjalp meg opprette disse eksemplene, det er derfor jeg vet de fungerer.
Fordi Tommy er en Javascript-mester.
Men hvis vi legger merke til, har vi noen sett.
Vi har vår klokkefunksjon her.
Dette er alt Javascript som vi nettopp skrev, eller noe av det.
Vi skrev denne retten her.
Og han har en ekstra funksjon som bare pads det
ved å sette en null før en brev eller før et nummer hvis det er
bare ett av dem.
Så hvis du legger merke til, er dette ganske mye akkurat hva vi nettopp skrev.
Du har litt variabel klokke som har vår element, få element av ID,
som er klokke.
Vi har vår innstilt tidsintervall funksjon, er at
en anonym funksjon som utfører alt dette.
Vi har noen starter streng med HTML som vi deretter dynamisk
generere ved å ha noen h1 header, lenke sammen
med få timer, pluss våre kolon, pluss å få
protokollen, pluss en annen tykktarm, samt våre sekunder,
og til slutt slutter HTML for det.
Og da vi oppdaterer vår klokke dot indre HTML til HTML,
og vi oppdaterer hver 100 millisekunder.
OK?
>> Se Jeg lover jeg er ikke gal.
Jeg vet ikke.
Jeg vet ikke hvorfor det ikke liker meg.
Jeg føler meg som ser det samme, men tydeligvis det hater meg.
>> Så la oss se om runde tre går bedre.
Vi er i ferd med å se.
Jeg er ikke sikker på hvordan dette kommer til å gå.
Er alle minst få ulemper, som bare den generelle tema
av Javascript, skjønt?
Jeg håper det er minst nyttig, mer enn å vise at det er litt pirkete.
Men problemet settet vil være veldig gøy.
Det kommer til å være stor.
Det vil ikke være fullt så kjedelig som dette, tror jeg ikke.
Du vil faktisk få til se virkelig kule ting.
>> Så sist men ikke minst, vi skal prøve Twitter én.
Jeg er virkelig redd nå, folkens.
Jeg vet ikke hvordan dette kommer til å gå.
Men bare for å gi deg litt mer smak, er og dette faktisk
manipulere strenger og innganger, hva vi skal gjøre
er, hvis vi legger merke til her med HTML-- denne har en litt mer--
vi har noen tekstområdet, som tilsvarer dette tekstområdet her.
OK?
Og som har en Id av tekst.
Vi pusset det litt med en viss bredde og høyde
at vi har forhåndsbestemt, og vi har H1,
som bare er vår header en som representerer våre tegn igjen.
Vi ga det noen Id av tegn igjen,
og så har vi noen skript her, som jeg er virkelig
håper tredje gang er sjarmen her, folkens.
>> Så det vi ønsker å gjøre, i samme generelle vene
at vi har gjort med klokke dot js og parti dot js som vi har lagt merke til,
er vi har startet med å faktisk gripe de tingene som vi bryr oss om, ikke sant?
Så i dette tilfellet, er det to ting som vi bryr oss om, OK?
En ting som vi er faktisk slags ser inn og trekke data fra,
og en ting som vi faktisk endring.
Så det er vår HTML.
Hvis dette er vår web side her, hva er dataene som vi ser på?
Det kommer til å bli hva teksten i våre bokser, ikke sant?
Så uansett hva jeg skriver her.
Det er det jeg ønsker å vite, eller det er det jeg ønsker å se på.
Og hva kommer til å være endre på vår web-side?
De tegn igjen.
Så på samme måte, vi ønsker å starte ved å initial variabler
som faktisk holde på disse elementene.
OK?
Så hvis vi har noen Div som er vår tekstområdet,
og vi har noen Div som er igjen.
Høyre?
Så disse kommer til å holde disse to tingene.
Så den samme typen ting, dokument dot-- OK, jeg er
kommer til å sørge for at dette er kommer til å fungere denne gangen.
Jeg er veldig sikker i sin sak.
OK, så hvis vi ønsker vår tekstområdet, ifølge
til vår HTML, hva er vår identifikator?
Hva er vår Id?
Det er bare kommer til å være tekst fordi dette skaper vår tekstområdet, OK,
og vår Id er tekst, så det er hvordan vi kan hente hva som er der.
OK, semikolon.
Jeg kommer til å være super presis om dette,
fordi jeg vil at dette skal fungere denne gangen.
OK, gjør det samme, få element av Id.
Jeg virkelig lurer på hva har forårsaket de to andre å rote.
OK, så i denne, hva gjør vi ønsker å få tilgang?
Hva er vår Id her?
Vi har en annen Id i vår HTML, hva er det?
PUBLIKUM: Tegn som gjenstår.
ALLISON Buchholtz-AU: Tegn igjen.
>> OK.
Cool.
Så jeg skal bare skrive dette veldig fort.
Jeg kommer bare til å skrive dette i andre.
Så tekstområdet.
Det interessante er B function-- det er mange funksjoner som ikke bare
tilsvare din mus, men tastaturet.
OK?
Så du kan si når en tast er trykket, kan du gjøre ting som dette.
Så den som vi bruker kalles på nøkkelen opp, noe som
sier, "hvis du har trykket på en tast på tastaturet, når brukeren har løftet
fingeren av den knappen, og nøkkelen har blitt upresset,
så vi kommer til å gjøre noe. "
OK?
Så dette er fornuftig, ikke sant?
Fordi hver karakter vi skriver, vi skal
til å løfte våre fingre off av det, så når nøkkelen går opp,
vi kan vite for å minske våre tegn igjen.
>> Så vi har noen på nøkkelen opp, og på samme måte,
vi kommer til å si, "OK, når vi gjør det, vi
kommer til å lage noen funksjon som kommer til å ta e ", i dette tilfellet
og hva vi ønsker å gjøre er beregne antall gjenværende.
OK, så la oss bare begynne ved å skape en variabel.
Så vi har litt variabel r, som kommer til å representere
hvor mange tegn vi har igjen.
OK?
Vi vet at vi starter med 140, og hvis vi ønsker å vite,
la oss si, lengden av denne streng som har vært innspill,
dere har noen ide hvordan vi kan gjøre det?
Bare basert off av den åpenbare ting, som om vi ønsket timer,
vi brukte få timer.
Vi vet at våre objekt er tekst området, men kunne dere
tenke på hva som kan komme etter det?
Noen ideer?
>> Så dette ens form for mindre intuitivt, men det er verdi dot lengde.
Så bare gi meg noen verdi attributt som
faktisk er lengden av denne streng.
Så det kommer til å si: "OK, jeg ser på hele denne strengen innenfor tekstområdet,
og jeg kommer til å fortelle du hvor lenge det er. "
Fordi hvis vi husker strenger er egentlig bare matriser,
så vi kan bare ta lengden på dem.
Så har vi det.
Cool.
>> Så hva vi ønsker å gjøre er vi aldri vil tillate brukeren
skrive mer enn 140 tegn, ikke sant?
Fordi hvis vi sier liksom: "oh, du bare har dette mye gjenstår, "
og så la dem gjøre det anyways, har vi ligget.
Og dette er en annen ting som Java
kan være veldig bra for, er brukervalidering
og sørge for at din bruker passer innenfor noen regler
at du har gitt til dem.
Så hvis du ønsker å gjøre ting som å lage sikkert noen innspill sin e-postadresse,
eller å sørge for at når de oppgi to passord, matchet de.
Javascript kan gjøre det.
Du ville gjøre noe sånt som "når skjemaet er sendt "eller lignende,
"Når Send skjema-knappen er klikket, sjekk alle disse tingene. "
Og vi kan gjøre det Script.
Så det er bare hva vi kommer til å gjøre her.
>> Så hva kan være en måte å sjekke om de har gått over 140 tegn?
Hva kommer til å skje med vår verdi av r hvis de prøver?
Det kommer til å være negativ, ikke sant?
Eller det kommer til å være mindre enn eller lik null.
Slik at vi kan bruke en hvis det er akkurat som alt annet.
OK?
Og vi har noen tekstområdet dot verdi, og hva vi gjør her
er vi bare cutting-- hva er det?
Unnskyld.
Denne, vi ønsker bare å returnere falsk.
Jeg ble forvirret.
Alle uryddig fra ting ikke fungerer.
OK, vi ønsker bare å return false, og da vi
ønsker å vise gjenværende tegn, ikke sant?
Så med klokken, vi gjorde noe med indre HTML, ikke sant?
Der vi satt det lik noen variabel, så hva kan vi gjøre her?
Hva skal vi endre den indre HTML av?
>> PUBLIKUM: Gjenværende?
>> ALLISON Buchholtz-AU: Vi endrer gjenstår.
Greit, og hva gjør vi ønsker å sette den lik?
Det kommer til å være r, fordi det bør være våre tegn igjen.
OK?
Så jeg er veldig nervøs for å se om dette fungerer nå, men vi får se.
La dette.
Det er veldig fort.
[Uhørbart] OK.
Igjen, jeg bare kommer til å vise deg.
Uansett grunn, min bestemmer seg for ikke å jobbe,
men det jeg vil vise deg er at dette er-- oh jeg skulle sette det i.
OK, vi merker den samme typen ting her, får tekstområdet.
>> Også, hvis du fyr varsel, hvis det er stadig noe du ønsker å gjøre,
og du ikke vet hvordan du gjør den, klikker du Vis sidekilde,
og de kommer til å fortelle deg.
Noen ganger vil det være kryptert.
For din PSet, krypterer vi alt, så det bare ut som vrøvl.
Men hvis det er noen gang en virkelig kul nettside som du liker,
hvis du bare klikke Vis sidekilde, det kommer til å fortelle deg hvordan du gjør det.
Så igjen, jobbe smartere, ikke hardere.
Og som du ser her, alle disse tingene er de samme.
denne her bare tar litt treng at jeg glemmer nøyaktig hva dette betyr.
Men det tydeligvis tar litt treng av verdien fra null til ti,
og returnerer false hva bør slutte brukeren fra å legge inn lenger,
og deretter åpenbart oppdaterer den indre HTML der.
>> Cool.
Så store take-aways fra i dag, eksperiment, se på kildekoden
fordi det kommer til å hjelpe deg mye, og alle, noen ganger Java
kan være vanskelig å jobbe med, og ikke alltid virker slik du forventer det,
men bare fortsette å prøve fordi jeg lover det vil.
Jeg lover alle disse eksemplene arbeidet før klassen.
Jeg forstår ikke hva som skjedde.
Jeg bokstavelig talt har alt det samme.
>> En ting som jeg bare vil vise dere som kan være super nyttig
er in-- hva som fungerte før?
Vi fikk part i arbeid, gjorde vi ikke?
Jeg tror det.
Ja.
Vi gjorde.
Awesome.
OK, så en ting som dere bør vite
er konsollen logg som jeg snakket om.
Så trøste dot logg over hei.
Så dette er slags Java tilsvarer printf.
Så hvis du noen gang ønsker å inspisere variabler
eller se hva som skjer der, hva du kan gjøre er, hvis vi inspisere element,
er hva du ønsker å gå til, og du går å trøste,
vil du se at det skrives hei.
>> Slik at vi kunne ha det print hva vi ønsket.
Hvis vi ønsket å skrive ut bakgrunns dot stil dot bakgrunn,
vi bør være i stand til å se den RGB trippel som kommer opp.
Eller ikke.
Jeg glemmer nøyaktig hvordan du skrive ut en variabel som det,
men du bør kunne skrive ut ting som det.
Det vil være svært nyttig for din PSet når
du prøver å manipulere koordinerer eller whatnot.
Slik at de også endre dette stykket i klassen.
Dette er forskjellig fra siste år, så bare være hyggelig å dine TFS, eller TFS
på kontortiden heller, fordi vi er type læring sammen med dere.
Men konsollen loggen var super, super nyttig for Javascript i fjor.
Så elsker det.
Lær hvordan du bruker den.
Det er enklere å bruke enn GDB, slik at bør være minst et pluss.
Men takker dere bærer med meg.
Jeg beklager at min eksempler på noen grunn
bare ikke ønsker å samarbeide med meg, men jeg
håper at det hjalp slags får du en litt mer i sonen av Javascript.
Og send meg alle dine spørsmål for neste uke slik at jeg kan bli super reparert,
og jeg skal bringe godteri og selv ekstra godteri fordi dette var latterlig.
Men dere er stor, og har en fantastisk uke.