ALLISON Buchholtz-AU: Okej alla. Välkommen tillbaka till avsnitt. Det är vår näst sista avsnittet. Det är så sorgligt. Jag vet inte vad jag ska göra utan att se er varje måndag. Jag antar att vi borde bara-- kanske vi kunde bara träffas här och äta middag eller något. JAG VET INTE. Jag ska ta med mat istället. Vi ska bara prata. Men ja, nästa vecka kommer vara vår sista avsnittet. Alltså, har du frågesport nästa vecka. Jag vet att jag glömde att göra mitt, liksom, två veckors varsel förra veckan, Men förhoppningsvis ni visste att detta skulle komma. Förhoppningsvis är detta en av de sista midterms för er killar för terminen. Men det kommer att täcka alla material som vi har gått över. Så det är inte som du kan bara glömma cirka fyra slingor eller variabler. Eftersom vi lärt oss de i början, de är uppenbarligen rättvist spel för din frågesport. 

Det kommer att bli samma format, samma längd, så du redan är van vid det. Det kommer att bli kodning av handproblem, kanske några sant falskt, kanske några korta svaret. Så du bör vara bekant med formatet, speciellt om du tar övningsprov. Men som jag säger här, det kumulativa, men vi är definitivt kommer att fokusera på saker från vecka sex och framåt. Så är vi förmodligen inte kommer att fråga dig om hur många bytes är i varje typ eller de möjliga saker, men vi förmodligen kommer att bli intresserade av saker som länkade listor, eller olika datastrukturer, eller olika algoritmer att vi har pratat om. Så se till att du verkligen upp på dem, och om du behöver några resurser, Här finns massor av resurser. Jag gav dig bara snäll av en snabb lista där. 

Nästa vecka blir frågesport granska under denna tid. Så om du har några frågor eller specifika ämnen, specifika saker på den quiz som du vill gå över, vänligen skicka dem till mig i förväg så jag kan sorts förbereda en del material för det. Och i tillägg till detta avsnitt översyn, vi ska också hålla kursen omfattande granska som vi gjorde förra gången. Och det kommer att bli gjort av samma personer. Jag vet inte om det gör det bättre eller sämre, men det kommer att vara jag, Hannah, Davan och Gabe igen. Så om du vill komma se oss alla skämten med varandra och gå igenom frågesport översyn, bör du definitivt kommer till att nästa måndag också. Så du ska bara ha en måndag jam packad av frågesport översyn, vilket är bra för då har du tisdag att bearbeta igenom allt. 

Men definitivt göra kolla ut dessa resurser. Study.csv.net är överlägset, jag tänka, en av de mest användbara, mest för att det har en hel del exempelkod, det har alla Power Points med alla anteckningar på det, vilket är verkligen vad jag drar mest av mina sektions material från. Om det finns något i tidigare sektioner som jag kan ha skickat ut att du inte kan ha fått, så låt mig veta. Liksom förra veckans exempelkod, om någon inte fick det, bara maila mig eller komma och prata med mig, och jag ska se till att du får det. 

Så med det, i dag kommer vi att prata om JavaScript. Så här är vi Tommy, vem jag var bara prata med dig i natt. Jag älskar Tommy. JavaScript är hans favorit språket, som han säger här. De ska försöka berätta att det är inte den bästa, och de kommer att vara fel. Så Tommy är en JavaScript mästare. Jag är inte riktigt på hans nivå, men jag var som, "Tommy, hur gör jag undervisar dessa barn JavaScript? " Så jag fick några tips, så förhoppningsvis de tränar. 

Så ett par saker att veta är att JavaScript är ett klientskript språk, så medan PHP är något att vi anses vara mer serversidan, det laddar upp till servern, kompileras och exekveras där. Denna en exekveras på din egen maskin. OK? Så du laddar lite JavaScript sida, och det utför på din maskin. Syntax är mycket lik C och PHP. Vi kommer att gå igenom några exempel på JavaScript, och du kommer att se att det sätt vi talar om variabler, loopar, och förhållandena är alla mycket lika. OK? Det faktum att de är så lika är förmodligen kommer att resa en del av er upp, i vissa fall, bara för att du kommer att infoga en liten bit av C där det inte borde vara. Kanske du försöker och skriva något när den inte ska skrivas. 

Och på det, en sak till vet är att JavaScript är ett dynamiskt skrivit språket, som PHP. Så om ni kommer ihåg från avsnitt förra veckan, när vi var typ av göra vår PHP snabbkurs, Vi såg hur en sträng man kunde vara förvandlats till en int en, och så vidare. Den typ av dina variabler bestäms vid körning, så de kan förändras över loppet av programmet och på samma sätt som vi aldrig verkligen förklara typer för PHP-variabler, vi kommer att göra detsamma sak här, där vi är verkligen inte styra de typer av våra variabler, så att säga, som vi gör i C. 

Och så en sak det är ganska coolt är att du kan fel Kontrollera via konsolen, med denna stora funktion console.log, vilket gör att du kan skriva ut olika variabler eller objekt att vi kommer prata om. Precis som förra veckan när jag var som, "använda denna funktion" med dump från din pset detta är en funktion du vill använda, console.log. Jag blev så förvånad över hur många studenter på kontorstid visste inte om dumpfunktionen. Och jag var som, "grabbar, denna vilja göra ditt liv så mycket enklare. " 

Okej, så det var typ av bara en kort sak, som alltid, Vi har exempel. Jag vet att ni älskar dem. Så här är ett exempel på en mycket enkel JavaScript fil här. Så det är bara att gå för att skapa Detta pop-up som säger, "Hej världen" när du anger sidans, men låt oss försöka gå igenom det här lite. Så uppenbarligen är detta bara som din vanliga index.html. Så, bara vår normala mall här, och vi har HTML, vi har vårt huvud, och precis som med CSS, hur vi inkluderade några utanför filen, eller hur? Vi har en del script typ text som är JavaScript. Och källan är hello.js, vilket är här nere. Detta är hela filen för hello.js. Och då har vi några titel och vissa kropps HTML att vi egentligen inte bryr sig om. 

Vad som händer är, när vi laddar denna sida, det utför automatiskt här skriptet. OK? Så JavaScript kommer exekvera automatiskt. Så vad det kommer att göra, det kommer att omedelbart gå och utföra detta. Och det kommer att säga, "alert. Hej världen. " Vilken varning är den funktion som faktiskt genererar denna ruta. OK? Så det är typ allt encompass. Det finns inget extra hade vi att göra förutom just alert, och sedan vad vi ville inom vår Alert rutan. OK? Så det är bara en super enkel exempel på vad JavaScript kan göra. 

En av de riktigt coola saker, som vi ska se, är att JavaScript gör att du att manipulera dina webbsidor, utan att behöva ladda dem varje gång. Så om du want-- till exempel om du svävar över något, om ni någonsin har ses som meny barer, eller när du för muspekaren över en viss ämne, visas en rullgardinsmeny, det är på grund av JavaScript. OK? Så du inte ladda om hela sida för att få den här menyn för att visa upp, du bara letar efter vissa specifika åtgärder som användaren har tagit, som kallas händelser som vi kommer att få in, och när du ser det, säger du, "OK, redigera något på detta sida och att det ser annorlunda, men bara redigera dessa specifika saker. Inte ladda om hela saken. " Så det är faktiskt mycket trevligare, och du behöver inte ladda om dina sidor, och det är riktigt coolt. 

Så variabeldeklarationer, så du kan typ av se, Jag satte på toppen här, löst skrivit. Så detta är väldigt likt PHP. Vi behöver inte berätta JavaScript vilken typ vi är förväntar vardera av dessa variabler för att vara. De kan vara vad slag vi vill. Så du märker i det här fallet, vi förklarar dem mycket enkelt, bara med "var" och sedan vad vi vill vår variabelnamn för att vara. En sak att notera är att när du sätta var framför ett variabelnamn, den lokalt omfattningar det. OK? Det är helt rimligt för dig att helt bara radera var och bara ha s lika CS50, och som bara skulle vara en global variabel. OK? Så du kan initiera både och, bara beror på hur du vill ha det. Så om du initierar den inom en funktion, och du vill att variabeln ska hålla scoped inom denna funktion, du kommer att vilja göra något som var namnge en variabel, kontra om du vill ha det globalt scoped, du kan bara göra det känt av variabeln och sedan vad du vill att det sätts lika med. OK? 

Detta är typ av cool sak här nere, för om vi märker våra variabel b börjar som sant. Och vad detta does-- kan någon berätta för mig vad detta innebär? Så vi har lite alert. Vad skulle skriva på b vara i början? PUBLIK: Boolean. ALLISON Buchholtz-AU: Boolean. Höger. Och sedan tilldela vi b till denna sträng, eller hur? Så då här, vilken typ av b vara? Det skulle vara en sträng, eller hur? Så vad som är viktigt för meddelande är att i c, vi kunde nästan aldrig göra något liknande. Vi skulle behöva ha en variabel, kasta den som något annat, kanske göra någon funktion med en två i, går från en avgift till ett heltal. Men om vi märker här, b mycket lätt byter typ. 

PUBLIK: Vänta, så du kan bara vara som, "gör b ett heltal?" 

ALLISON Buchholtz-AU: Yeah. Du kan bara tilldela b till ett heltal. 

PUBLIK: Verkligen? 

ALLISON Buchholtz-AU: Yeah. Och då skulle det vara en int. Så dina variabler kan förändras över loppet av programmets alltför. De är inte strikt skrivit. Det är mycket löst skrivit. OK? I grund och botten dina variabler kan göra vad de vill ha, när vi slags såg med PHP. De kan göra en del galna saker, så det är viktigt att vara ganska försiktiga. Namnge dina variabler väl. Om du inte gör det, helt plötsligt du kommer att vara som, "Vänta, jag trodde att detta var en sträng, och nu är det en int, och jag är inte riktigt säker vad som händer här. " Så det här är bara ett enkelt exempel på som visar hur en variabel kan enkelt ändra dess typ över loppet av ett program. 

OK. Så detta ska se ut super, super bekant. Så dessa är våra slingor i JavaScript. De är exakt samma, med undantag för i stället för fyra int jag är lika med noll, Vi kunde bara säga var i är lika med noll. Och då kunde vi ha vår samma sorts av tillstånd, samma sorts uppdatering, Jag plus plus fungerar alldeles utmärkt. Så fyror är samma, whiles är samma, och göra whiles är exakt samma. Samma sorts allmänna format. Vi märker, fyra, parenteser, konsoler, det är i alla fall. Också det kommer att bli semikolon när vi kommer till exempelkod. Du ser det är ganska mycket samma som c. 

För funktionsdeklarationer, igen, mycket lika. Vi har någon funktion som bara säger att det är en funktion, och sedan namnet på vår funktion, och ingångarna. Och igen om vi märker, vi har inga typer här som helst. Rätt? Vi har ingenting att säga att dessa behöver vara ints eller dubbel, eller flyter. De kan vara vad som helst. Vad som är viktigt är att märka att Vi måste skriva funktionen förväg att låta JavaScript veta att detta är faktiskt en funktion. 

Så det här är bara några enkla summan funktion som returnerar x eller y, och vad är också coolt är att du faktiskt kan tilldela en funktion till en variabel. Så i det här fallet, är summan nu funktion som faktiskt gör summa. Så om du märker här, vi har funktion, namn funktion, ingångar. Rätt? Här har vi bara funktion och ingångar. Så detta kallas en anonym funktion. Och detta är något som borde vara nytt de flesta av er, om inte alla av er. Så i princip vad som medel är att vi inte gör det behöver namnet på vår funktion i det här fallet. Vi kan bara säga, "OK, jag ska har denna funktion som körs, här är dess ingångar, och här är vad det kommer att göra. " Och speciellt när du tilldelar en funktion till viss variabel att du kommer att manipulera, Du behöver inte nödvändigtvis måste nämna det eftersom du kommer att vara att hänvisa genom denna variabel namn, inte genom vad funktionen kallades faktiskt. OK? 

Så om vi ser här, vi har någon rörlig summa nu som är lika med den Summan av tre och fem. Och vi skulle få detta. Och detta skulle bara ha lite varning, tre plus fem är lika med antalet. Detta plus kommer bara slå samman oavsett vårt svar var på strängen. Också coolt, plus kan sammanfoga strängar. 

För JavaScript som med PHP, HTML och CSS som vi sagt, mycket av det vi är typ av att ta träningshjul off här och ni har en hel del know Hur verkligen förstå dessa saker. De är något annorlunda, men de är inte så främmande och att du inte kan googla saker eller leta upp dem på nätet med w3 skolor. Och vi verkligen förväntar dig killar till, typ av, experiment och lära sig på egen hand. Så, jag vet att detta kan verka lite mindre noggrann än vissa av de c saker vi gör, men det är faktiskt en anledning. Men förhoppningsvis är det inte alltför annorlunda, och det är inte överväldigande. 

Så matriser i JavaScript, igen mycket, mycket lika. Rätt? Vi har några rörliga array det är lika med tomma fästen, och det är bara en tom array. Detta kallas ofta bokstav array notation. Det är bara en sak som vi kallar det. Om vi ​​ser array två här, har vi några bokstav array som består av tre delar, rätt? Och då har vi några var tredje element som är någon variabel det är bara kommer att hålla denna sträng, JS. 

Elementen, bra att märka, separeras med kommatecken, precis som vi skulle förvänta oss. Och du kan också komma åt dessa, som vi gjorde i C, med detta index notation, eller hur? Så annorlunda från PHP Nu, vi kommer tillbaka att bara sorts hänvisa till saker av index. Precis som C, det är också noll index. Det känns som att det skulle vara riktigt grym om de plötsligt gjorde JavaScript man index, och du var tvungen att helt tänka om hur du tänker på matriser. 

En cool sak är att istället för att behöva do-- om du någonsin ville längden av en array, kanske du iterera igenom det tills du hittar något slut, eller du skulle bara veta vad det är. Eftersom JavaScript är mycket lös i mer sätt än bara typ, som vi ser här, Vi kan bara göra denna array större eftersom vi beslutar att. Om vi ​​märker array tre har tre saker att starta, men då helt plötsligt, Vi är som, "Åh, bara skojar. Vi faktiskt går för att göra det 101 saker. " Så om du någonsin vill veta faktiska längden på din array, du gör det så här. Och vi kommer att se en hel del av denna notation i exemplen, men med JavaScript det är oftast vad objekt som du pratar om dot oavsett typ av funktion du vill appliceras på det. OK? 

Så i detta fall, vår objektet är array två, och vi säger att vi vill ha det längd matris två. Så det här precis samtal såsom längd på det. Och det kommer att returnera din längd. Också något att notera är att om vi märker våra matriser, skillnad C, har de inte vara alla av samma typ. Detta är mycket mer som PHP. JavaScript är i princip precis som denna intressanta meld av C och PHP. Så vi ska få in det. För nu, låt oss bara anta att dina arrayer är i grunden som C matriser, i det att de är noll indexeras. OK, så det är allt. Du kan också bara förlänga en array till vad index du vill. Medan detta skulle förmodligen seg fel på dig eller ge dig lite fel, JavaScript är som, "Nä, det är bra. Jag fick detta. Vi ska bara gå rakt där du vill. " 

OK, så objekten är mycket viktiga. Ni kommer att använda en hel del av dessa i din P set, om jag minns rätt. Så det som dessa är liknar i C är structs. Så du kan tänka about-- när Vi går till exempel rätt efter detta tror jag att det kommer göra mycket mer sense-- men vi i grund och botten använder objekt till organisera naturligtvis relaterad information. När vi pratade om structs i C, vi ofta tala om en student som hade vissa namn, ID, hus, ni vet, koncentration. Och det är typ av samma sak att vi använder föremål för här. Det är bara att organisera liknande information. 

Du kan också tänka på dessa som mer liknande associativa arrayer i PHP. Så detta skulle vara typ av sak där vi har några viktiga med ett visst värde, mycket lik PHP. Så du kan initiera en del tomt objekt, som vi ser här uppe, precis med klammerparenteser. Så arrayer är hakparenteser. Tomma objekt är klammerparenteser. Bra skillnad att ha. Och dessa är bara två olika sätt att ställa in egenskaper. Så det här är typ av mycket mer av ett sätt som liknar PHP, med vår associativa arrayer, med vår nyckel, och vårt värde, medan här är-- du kommer ser detta mycket mer i JavaScript. Detta tenderar att vara konventionen. Och på samma sätt som vi gjorde array två dot längd, detta säger, "OK, ge mig det här skriver detta objekt. " Rätt? Så på samma sätt var det som, "ge mig attributlängd array två, " detta säger, "ge mig några egendom av vår tomt objekt. " Eller i det här fallet, är vi koppla den till något värde här. Men du kan också komma åt det på det sättet. 

Och så här det är bara visar två olika varningar. Så detta skulle visa registreringarna skulle vara exakt densamma, Det är bara två olika sätt att tillgång till element som vi vill ha. Betyder det vettigt att alla? Jag känner mig som den här förmodligen vettigare, bara för att vi är på väg bort från PHP. Men som vi gör fler exempel, detta är bokstavligen exakt samma. En hel del av det bara ändra i syntaxen. 

OK, så exempel. Jag älskar exempel. Så här är några CS50 variabel som är ett föremål, och vi lagrar allt detta information om det. Så vi har naturligtvis instruktör, tfs, psets och tejpade. Så vi märker dessa är nästan alla olika typer. Rätt? Så föremål kan lagra attribut av olika typer. Vi kan tänka på this-- det är mycket liknar vår associativ array i PHP. Så nyckel, värde, nyckel, värde, nyckel, värde, så vidare och så vidare. Det som också är intressant på samma sätt att vi kan ha arrayer inom arrayer, Vi kan också ha föremål inom objekt eller arrayer inom föremål. Du kommer aldrig riktigt begränsat till bara en enda en av saker. Vi kan få mycket Inceptionesque, precis fortsätt ner i kaninhålet där. 

Så om vi märker, vi ha viss kurs som är en sträng, instruktör som är en sträng, och matris, en int, och en Boolean. Så alla av dessa olika saker. 

Okej, så har vi en till. Så i det här fallet har vi en array med objekt. Så precis som ett objekt kan ha en matris i den. Vi kan också ha en array med objekt. Det kan vara användbart för tänka liknar slag av hur vi hade en hash bord, hade vi en array av alla dessa olika typer av structs som var pekare till olika noder och whatnot. Men i det här fallet, vi ha en array med objekt. Så detta är som en array av associativa arrayer. Så vi har några första elementet skulle bli föremål med namnet James och hus Winthrop. 

Ni kanske minns något mycket liknar detta med din sista pset, där om du drog något från din databas, den första typen av sak i ditt array var all information om den första användaren som mötte det, och sedan du var tvungen att index in i det att få sina lager eller deras cache eller whatnot. Så detta är väldigt mycket samma sak, bara en liten förändring i syntax, lite förändring de ord vi använder för att beskriva dem. 

Så om vi ville, kan någon berätta mig vad denna varning skulle göra här? Eller vad denna bit av kod skulle göra för oss? PUBLIK: Det ska ge er alla namn. ALLISON Buchholtz-AU: Höger, så det skulle bara varna med alla namn eftersom det skulle gå igenom stuga i, så det skulle börja på noll. Så det skulle säga, OK vi söker vid denna första objektet, vilket är den första slitsen i vår array. Och den säger, "ge mig attribut, namnet på det objektet. " Så vi går här, skulle vi scan, vi skulle hitta namn, och vi skulle skriva ut James, Molly, och Carl. Eventuella frågor hittills? JavaScript tyvärr du kommer att bli gör en hel del tittar upp på din egna, räkna ut syntaxen, brottas med den. Men naturligtvis är jag alltid här, kontorstid är alltid här. Jag kan vara på tisdagar här veckan. Så om du är det, kan du kom och besök mig den här veckan. Det skulle vara bra. 

OK, så DOM är Document-Object Model. Så det här är bara ett sätt att vi vill tro om hur vår HTML och allt inom den är organiserad. Detta är mycket något som kommer förmodligen komma upp på din frågesport. Jag vet mitt år, det var som här är HTML-fil, fyll i DOM för det. Och du bara fylla i lite saker. Dessa bör vara enkla poäng förhoppningsvis. Förhoppningsvis kommer du see-- 

PUBLIK: [OHÖRBAR] 

ALLISON Buchholtz-AU: So du ser det här trädet här? 

PUBLIK: Ja. 

ALLISON Buchholtz-AU: Så de kommer att be användning att fylla i vad som händer under kroppen. Kanske under kroppen, har vi några divar eller vi har några stycken, och vi kommer att be dig att fylla i ett träd mycket som här. Så vi kommer att gå igenom det. Så Document-Object Modell är bara ett sätt att strukturera och tänka om vår HTML grafiskt. Och även när vi får till mer JavaScript det kommer att bli den sätt som vi faktiskt manipulera olika element på sidan. Vi behöver ett sätt att komma åt varje av de saker i vår HTML, och så detta ger oss en mycket konkret standardiserat sätt över olika webbsidor för att göra det. 

Så om vi bara gå igenom detta här, naturligtvis vårt dokument är som hela vår fil. Det gör naturligtvis vettigt att det är den högsta sak, och sedan har vi våra faktiska HTML, som motsvarar denna tagg här. Även om du i strecksats dina taggar ordentligt, sedan skapa denna DOM-trädet blir super enkelt. Så vi har lite huvudet här. Vi har några organ som Vi ser stem bort av HTML, det är därför vi har huvud och kropp. Inom huvudet, har vi några rubriktaggen, en slutrubriktaggen, så vi vet att kommer efter huvudet. Och inom vår rubriktaggen, vi har hej, värld. OK? Så det är här hela vänstra grenen. Och sedan för den högra grenen Här ser vi att vi har HTML, OK vi har gjort den här huvuddelen, Vi tittar bara på kroppen, så vi har lite kroppsområde. Och inom denna, den enda Det vi har är hej, värld. OK? Om vi ​​hade saker som vissa fäste p och sedan Hej, värld, och sedan en annan fäste p av goodbye, värld, Vi skulle ha två bubblor kommer ut av här. Eftersom de är båda under kroppen, men de är separata stycken här fallet. Det är definitivt praxis om det i tidigare frågesporter, samt massor på nätet på den. OK så, detta bara låter oss se allt fint och manipulera saker mycket systematiskt. OK? Vi vet exakt hur man passera igenom detta träd, så vi vet vad vi vill komma åt. 

OK så det är därför vi vill ha att ha denna typ av modell, så att vi kan använda saker som detta, och vi förstår vad de menar, och de är standardiserade i alla saker som vi gör. Så dokument dot titel är bara titeln our-- alla dessa är ganska självförklarande, Jag gillar att tänka. Så de tre första exempel säger bara, "OK, bara ge mig titeln på denna webbsida. " Så det kommer att ge dig vad motsvarar titeln. 

Dokument dot kropp kommer att ge dig allt inom dessa kropps taggar. Så du kan manipulera det. Och dokument dot kropps dot ange HTML är en väldigt cool man, och kanske inte som super intuitivt, men det inre HTML motsvarar denna rätt här. Så om du någonsin vill manipulera text på en sida, vanligtvis du kommer att göra något med kroppen dot inre HTML. OK? Så inre HTML tenderar att hänvisa till vad är egentligen mellan dessa taggar. OK? Och sedan användbara funktioner. Så om du ville få någon av dessa, alla element, vi har några Id, klass namn eller taggnamn. Detta är mycket lik saker vi gjorde med CSS, eller hur? Där vi har några väljare som motsvarar antingen en tagg, en klass att vi ger dem, eller ett ID. Detta är mycket samma sätt. Om du har något som har viss klass av hund, och du säger får element genom taggnamn, och du sätter hunden i there-- eller ledsen, klassnamn. Du kan sätta prick i det. Det kommer att returnera alla dem element till er som har den klassen. Så du kan manipulera bara de. På samma sätt, kanske du bara vill manipulera någon header, så vissa h1 header, som vi gjorde. Du kan göra få element via tagg namn, eftersom h1 är ett taggnamn. Och på samma sätt, om du vill få vissa unika sak, kan du få tag. Få elementet genom Id. Och de är faktiskt massor av dessa. Dessa är bara som tre av väldigt många. Så om du går online, som Jag ska uppmuntra dig att göra, och göra en del forskning på egen hand, Jag rekommenderar definitivt undersöker alla dem. De kunde vara super användbara, särskilt när du vill bara typ av manipulera mycket specifika saker utan att ha att gå igenom och försök att tolka ut allt. 

OK, så det sista är JavaScript-händelser. Så när jag pratade tidigare om att gå in på en hemsida, och när du för muspekaren över något, eller musen svävar över något, något annat händer. Detta är vad vi skulle vilja tänka som en händelse. Så vad vi har att styrka vara användbar här är onclick. Så gruvan var på hover, vilket jag är ganska säker, är bara på hover. Också en ton av dessa att du kan leta efter. Det finns en hel lista på nätet av de olika saker att du kan lyssna på. 

Men JavaScript-händelser är i princip bara reagera på saker att ditt användarnamn gör. Rätt? Så din användaren gör något, det är en händelse, och JavaScript kommer att svara men du vill att den ska. Det kommer att reagera därefter. Så i det här fallet har vi vissa fönster dot onload. Så vad detta säger är, "vänta tills fönstrets laddad. " OK? Så när allt är laddad, onload, då kan du utföra denna funktion. Så när allt är laddad, du kommer att ha lite sökknappen som får ett element av Id, och det skrivs ut vad det element är knappen Sök. Och så har vi denna variabel, vi säger, "OK, onclick." Så när vi hör ett klick på sökknappen utföra denna funktion, vilket är en varning, klickade du på knappen Sök. 

Så vad händer är-- detta är en trevlig liten grafisk representation här. Så våra dokumentlaster, det är vår onload, vi hittar vårt sökning knappen, vilket är det. Vi letar efter vår sökknappen. Och sedan när knappen Sök är klickade motsvarar det just här. Onclick. Då vi äntligen varna våra användare, vilket är det sista raden här. OK? Så var och en av dessa fyra steg bara motsvarar de fyra rutorna där nere på botten. Betyder det vettigt att alla? 

Och så en sak som jag kommer bara tala mycket, mycket kortfattat, att jag uppmuntra er till gå titta mer på är jQuery, som ligger bara ett bibliotek som är byggd ovanpå JavaScript. Det är super användbar, såsom med de flesta bibliotek. Det finns massor av funktioner. Så om det finns någonsin något som du vill göra i JavaScript, din första instinkt bör inte vara att tänka av "vilken funktion bör Jag kod? "Det borde vara, "Låt mig se någons redan gjort detta för mig. " Eftersom nio gånger av tio, någon kommer ha gjort det redan, och de förmodligen ha gjort det bättre. Människor tillbringar mycket tid att göra dessa, och Javascript är väldigt stor utsträckning, så att folk ständigt försöka göra det bättre. Och jQuery har en hel del funktioner som förmodligen kommer att vara användbart för dig i ditt slutprojekt om du är gör något med webbdesign. Som jag vilja säga, "arbete smartare, inte hårdare. " Om ni gör det, kommer det att bli bra. När vi är på hackathon jag inte vill du vara allt stressad. Jag vill att du ska vara som, "Jag fick detta. jQuery har fått min rygg. Jag behöver inte skriva dessa funktioner. " 

Så bara två saker till minns, jag ska att låta er ser mer in jQuery på egen hand. Allt jag tänker säga är det gör några ganska häftigt saker och kan göra ditt liv en hel del enklare. Men vad du vill har är oavsett fil att du kommer att använda den, du kommer att ha dessa två linjer. Du kommer att ha den manus av js jQuery dot js. Och faktiskt din källa kommer att bli en del URL. Om du Google jQuery, Google faktiskt är värd alla filer för dig. Så du definitivt vill ingång som URL i stället. Jag lägger just detta här för enkelhetens skull. Allt detta betyder är var man hitta din jQuery biblioteket. Det är massiv, så att du inte vill ha att placera den på din egen dator om du kan undvika det, vilket är anledningen till att vi tenderar att bara sätta i Googles URL som värd alla dessa filer för dig. OK? Du Google det, jag lovar Det kommer att vara där. 

Och sedan vad JavaScript-filen som du är använder, så det här är bara några externa JavaScript-fil som du använder. På samma sätt som vi länkar till vår CSS filer, är detta samma sak. Detta kopplar bara till filen där din JavaScript är. Och jag har några exempel med enkla JavaScript. Så vi kommer att gå igenom det. Och sedan i ditt index JavaScript vilket är ditt JavaScript-filen här, Detta är typ av omslaget att du har för jQuery. Du är nästan 99,9 procent av tiden som går att ha detta i din index.js filen. För vad det säger är, "Inte köra något tills dokumentet är faktiskt redo ", vilket är precis vad du vill. För om dokumentet är inte redo, och jQuery börjar göra saker, det är bara en enda röra. Så du alltid vill ha denna omslag. Och sedan för saker som går in där, jag skall överlåta åt dina killar egna läsningen. 

OK, så finns det några frågor rätt nu om JavaScript i allmänhet? Eller DOM modellen? Om inte, har vi några coola exempel som vi kan gå igenom, att ni kan hjälpa mig koden. Men jag kommer också att vara super trevligt, och om du vill inte säga något för dessa, det är bra. Jag kan också bara ge er exempel. Men något på PowerPoint innan vi går vidare? Cool. 

Det känns som ni behöver energi. Så jag tror att vi kommer att börja med mitt parti exempel först. Vi har tre exemplen, du har ditt val. Så vi har klocka, vart vi ska att genomföra en faktisk klocka som är kommer att uppdatera med tiden. Vi har denna stora Twitter funktionen. This-- du vet vad, hålla på. Vi kommer att göra detta försvinna. Bam. OK. 

Vi har denna stora Twitter funktion Här that-- jag vet, rätt? Det kommer att bli stor. Är ni glada? Det kommer att räkna antalet tecken som du har kvar, så om jag skriver just nu, uppenbarligen fortfarande står 140, men vi vet att det inte är fallet. Och sedan med vår sista här, klicka här för att festa. Vad kommer att hända är när vi klickar, bakgrunden s kommer att ändra färger. Så ni har dina alternativ av vilken du vill göra först. Jag lovar att jag ska ta det väldigt lätt på dig. Jag känner mig som alla är snäll på bara mycket lågmäld dag. Så jag ska gå igenom hur Vi kommer att genomföra alla dessa. Om du vill klämta i, det är bra, men jag känns som alla är lite trött. Så jag ska bara gå dig genom dessa exempel. Har vi något som Vi skulle vilja göra först? Någon? Ingen preferens? OK. Vet du vad? Vi är på fest. Jag känner mig som ni behöver en little-- så kommer vi att göra partiet först. OK. 

Så vad vi har här-- det är inte tänkt att vara där. Nu är det bra. OK. Så vad vi har här är bara en enkel HTML-sida att ni alla ska vara super bekant med från dina två sista psets. Vi har vår doc typ här. Kan alla se? OK. Cool. Vi har vår HTML uppenbarligen. Vi har några huvud som är kopplad till en formatmall som precis gjort min typsnitt trevlig och stora och djärva. Så oroa dig inte om det. 

Vi har lite kropp med en Id bakgrund, OK? Eftersom vi kommer att vara ändra bakgrunden. Så när vi förändrar bakgrund av vår kropp, Vi minns från två veckor sedan när vi har att göra med webbsidor. Så bra att ha det. Och vi har några Id lika part. Detta h ref pundet betyder bara att det kommer att gå till samma sida. Och klicka här för att festa, varför när vi klickar på den, Det borde ändra färger, tack och lov. 

Och då har vi några script här att är bara kopplad till detta parti dot js fil, som är tom eftersom Vi har inte gjort något ännu. Och det är så sorgligt. Men mycket snart, kommer det att förändra färger, och det kommer att bli häftigt. 

Så jag ska bara gå er igenom hur vi skulle kunna närma sig detta. Så det första som vi kanske vill göra, om vi ändrar bakgrunden kroppen, det första vi kanske vill göra är att faktiskt ta tag vad kroppen är, eller hur? Så vi vill ha summan, vår bakgrund, och om du märker, Jag bara automatiskt bara börja skriva. Det finns inget speciellt att vi behöver göra för våra JavaScript-filer. Jag kan börja förklara variabler, och förklara slumpmässiga funktioner. Och det är mycket mer fri form. Det är som med C, vi gav er alla dessa hårda regler, och du växte upp, så vi är som, "gå ut. Var fri. Gör vad du vill. " Och det är vad JavaScript är. Så vi har lite bakgrund här. Med vår DOM modell, vet vi att vi kan göra dokument prick få element, och om vi märker här, vår kropp har ett ID. Rätt? Så vi kan får dokument genom Id, och här är enkel. Vad är vårt Id som vi vill ha här? PUBLIK: Bakgrund. ALLISON Buchholtz-AU: Bakgrund. Perfect. Och semikolon vid slutet. Det har inte gått iväg ännu. Du behöver fortfarande era semikolon. OK. Så det är vår första. Och när vi klickar något, vi vill ha något att hända, eller hur? Så vi kanske vill ha lite variabel som väntar på ett klick. Vad vi ska göra är att vi kommer att göra vår länk mer liknar en knapp. Så vi kommer att ha lite knapp som lika dokumentera dot få inslag av Id. Och om jag talar om det klicka länken eller klicka här för att festa länk, vad som kan mitt ID vara här? Party. Korrekt. OK inte så illa så långt. Alla få vad vi gör? 

OK, så nu har vi vår knapp, och vi vill saker att förändras när vi klickar på den. Så om vi minns från vår PowerPoint, mycket enkel sak vi kan göra är bara knapp dot onclick, eller hur? Och det kommer att vara lika någon funktion. Detta är en anonym funktion. Och detta bara as-- egentligen är jag kommer att göra detta till en lite större. 

Så vad jag gjorde precis Här är jag säger, OK, När vi klickar vår knapp, vilket är denna länk som vi bara nämns, vi kommer att köra Detta anonym funktion. Vi behöver inga ingångar. Vi bryr oss inte vad användaren säger. När de klickar på den, vi är kommer att göra vad vi vill, vilket är att ändra bakgrundsfärgen. OK? Så det är därför vi inte har några insatsvaror, Vi har just detta anonym funktion. Och nu är vi faktiskt kommer att skriva den här funktionen. 

Så det finns en massa olika sätt som du skulle kunna generera en slumpmässig färg. Det sätt som jag gjorde det var att generera tre slumptal och konvertera dem till en RGB-trippel. Så detta bara visar några coola saker som om du är som, "Åh, Jag behöver för att generera en slumpmässig nummer. "om du googlat det, detta är vad du skulle hitta. 

Så vi har tre olika saker, var, inte röd igen, grön. Rätt? Så de är de tre saker som gör upp en färg. Blå, röd och grön. Cool. Och vad vi kan göra är att vi vet att det måste vara mellan 255, och om du tittade upp några slumpgenerator, du kan få något som matematik dot slumpmässigt, vilket om man tittar upp här återgår till vissa nummer mellan noll och ett. OK? Och vilka nummer gör vårt RGB tripplar går mellan? Noll och vad? Vad kan de gå upp till? 255. Så om matte dot slump går mellan noll och ett, Hur kan vi vill omvandla detta? PUBLIK: Tid? ALLISON Buchholtz-AU: Ja, exakt. Så tiden är 255. 

PUBLIK: [OHÖRBAR] Det är som [OHÖRBAR]. ALLISON Buchholtz-AU: Math dot random. PUBLIK: Cool. ALLISON Buchholtz-AU: Ja. JavaScript tar bara hand om dig. OK. Så vi kan göra det för alla dessa. Rätt? Math dot slumpmässiga tidpunkter 255. Uppfattat. Cool. Så saken är, kan detta inte tillbaka ett heltal. Rätt? Kanske får vi ett visst antal mellan noll och ett, och det får att vara något off, och våra RGBS inte kan vara flottar. De måste vara ints. Så om du provat det här, skulle det förmodligen har lite nyckfulla beteende. Det skulle vara lite funky. Så vad vi gör är att vi vill göra Se till att dessa är rundade, och du kan runda båda hållen. Jag rundade med golv. Så jag alltid såg till att det avrundas nedåt. Men att gå bort av hur enkelt det var att bara få ett slumptal, Hur tror du att vi kanske våningen här numret? Det är väldigt likt. Någon idé? Så om slump var bara matte dot slumpmässigt, så tror du att vi skulle göra golvet? Math dot golvet. Och du kan också göra matte dot taket. Round är typ av tvetydiga eftersom du inte vet om att runda upp eller avrunda nedåt. Så typiskt att vi alltid gör matte dot golvet, matte dot taket. Men honestly-- 

PUBLIK: Gör golv runda ner? 

ALLISON Buchholtz-AU: Golv rundor ner. Och det är bara ett val från min sida. 

Så nu har vi våra tre nummer som har slumpmässigt genererade, och vad vi ska göra nu är att vi är bara att ändra bakgrunden. OK? Så vi har redan vår bakgrund slags lagrad i detta element som kallas bakgrunden. Så vad du kommer att märka är, om du lekte med detta, Vi vill ändra stil. Och detta är typ av något som skulle du Google och räkna ut, gillar hur du ändrar färg. 

Men sättet du kommer åt den här färgen är bakgrund dot stil dot bakgrund. Så detta säger givet detta objekt, bakgrund, som hänvisar till det elementet Id uppe, vi kommer att titta på stil inom stilen, vi kommer att titta på i bakgrunden. OK? Och om du går och tittar upp detta, det kan göra lite mer känsla, men detta är i grunden bara säga, "Ge mig detta mycket specifika attribut av vad jag har definierat tidigare. " Så vad vi ändra det till är vissa RGB, eftersom det är vettigt. Vi använder RGB tripplar, eller hur? Och vi have-- jag vill se till att jag få rätt antal citat i här. Så vad vi gör är att vi har RGB, och vi kommer att-- detta är som sammanlänkning, vilket är rött. Och då är vi vill ha lite kommatecken. Och då vill vi plus grönt, sedan några kommatecken, och lite blått. 

Så dessa plus bara menar som sammanfogning. Så det här är bara att skapa denna sträng som händer inom RGB. OK? 

PUBLIK: [OHÖRBAR] plus sedan det gröna ett plus sedan den röda. 

ALLISON Buchholtz-AU: Ja, eftersom jag trasslat upp det. Den där är bra. Åh, hålla på. Nej. Eftersom jag måste se till att jag fick alla dessa rätt. Så jag kommer att förklara i uno momento. Grönt, blått, perfekt. Nu är jag klar. Jag tror. 

OK. Så vad det här är, är att bakgrunden kommer att ställas till viss sträng. Rätt? Vilket är vad vi har här. Det kommer att bli lite RGB 255 kommatecken 255 kommatecken noll, eller vad nummer du har där. Så vi gör här, Vi har lite sträng. Och vad vi vill göra, är att vi är typ av dynamiskt skapa att när vi faktiskt köra programmet. Så detta är något snöre. Plus sammanfogar den med det värde som röda har, som sammanfogar det med en kommatecken, vilket sammanfogar det med vad grönt är, och så vidare, och så vidare. OK? Fram till slutet, vilket är den stängning parenteser av denna RGB här. OK? 

Så vad detta kommer att generera en viss kommando verkligen dvs RGB av tre nummer den bakgrunden är nu inställd på. OK? Så låt oss se om det fungerar. Jag hoppas att det gör det, för om det inte, jag ska vara riktigt tråkigt. Åh nej. OK, hålla på. Definitivt bakgrund dot stil dot bakgrund. Jag definitivt saknas något bara små. Gör inte ni hatar det? När det är bara en liten liten fel? Allsmäktig bakgrund. RGB. 

PUBLIK: [OHÖRBAR] ALLISON Buchholtz-AU: Nej Jag försökte detta innan klassen. Jag har allt jag gjorde innan klass i fall jag var som, "Vänta, vad gjorde jag för fel?" Eftersom jag var som, "Jag kommer förmodligen förstöra detta någon gång. " Plus grönt. Allt ser ut som det är sammanfogas korrekt. OK. 

PUBLIK: [OHÖRBAR] 

ALLISON Buchholtz-AU: Åh, det du går. Det är vad jag behövde. Titta på det. Tiffany att rädda. Perfect. OK. Nu ska vi se om det fungerar. Herregud. OK. Håll ut. 

PUBLIK: Space efter den andra plus. 

ALLISON Buchholtz-AU: Vilken? Åh vänta, vänta. Rymd slitage? 

PUBLIK: Andra plus i den gröna sammanfogning. ALLISON Buchholtz-AU: Oh. PUBLIK: Det finns inget utrymme efter plus, ja. ALLISON Buchholtz-AU: Du behöver inte det, men-- PUBLIK: Åh, gör du inte? ALLISON Buchholtz-AU: Det ser ganska. PUBLIK: OK. OK. 

ALLISON Buchholtz AU: Låt oss se om det fungerar. OK. Jag uppenbarligen misslyckas på denna demo, vilket påminner mig av en föreläsning den andra veckan, men jag vet att detta kommer att fungera. Jag vet att detta kommer att fungera. Så nära. Om jag inte raderade av misstag mitt manus på den här. Nej, det är party prick js. OK håll. Jag kommer att kopiera detta, och jag är också bara att ta bort allt, eftersom jag hade denna arbetsgrupp tidigare. 

Jag lovar att det fungerar. Om inte, kommer jag visa dig vad Tommys är. Och där. 

PUBLIK: Du refererar parti dot CSS, och det är en parti dot js. 

ALLISON Buchholtz-AU: Ah, väl här är parti dot js. OK, vad gjorde jag annorlunda? OK, vi får se om det fungerar nu. Bam. Så, jag vet inte vad jag gjorde annorlunda, men detta är vad som ska hända. Kinda cool. Jag klickade på detta, liksom, för evigt. Men vi kan försöka och se vad jag gjorde annorlunda att detta hade. Jag vet inte om ni, men detta ser i princip vad jag skrev precis. Det var förmodligen en försvunnen semikolon någonstans är min grej. Faktiskt efter, jag tror jag saknade semikolon här faktiskt. Men jag kunde inte se det eftersom Det var utanför skärmen. 

Men om vi märker, detta är ganska mycket exakt vad jag skrev precis. Jag tror nog det svåraste delen om Detta är bara typ av denna sak rätt Här, förståelse vad den gör där. Dessa typer av saker som du lär egentligen bara genom att googla och ärligt bara försöka. Om du tror att det finns vissa attribut, det förmodligen är. Så prova det. Se vad som händer. Som jag sa, det finns en hel del experimenterande med JavaScript och PHP, och allt det grejer, och CSS speciellt. Det är den enda sanna sätt att förstå det. 

OK, så efter att fiaskot med fest dot js, har vi två andra alternativ. Vi har klocka eller Twitter. De är både intressant. Kanske inte riktigt lika roligt som part, som hade en cool liten strobning sak i slutet. Har ni några preferenser? PUBLIK: Klocka? ALLISON Buchholtz-AU: Klocka? OK. Cool. 

Så återigen, har vi vår tom JavaScript-fil. Och som vi ser här, vi har några mycket enkel HTML. Vi har vår stilmall, som bara forma hur det ska se ut. Vi har vår div med ett ID på klocka, som bara säger, "det här borde vara en klocka." Och vi har vår länk till vår JavaScript-fil som är faktiskt kommer att generera vår klocka för oss. Eftersom det häftiga är att du kan ställa JavaScript för att automatiskt uppdatera själv. OK? Så istället för att vänta på användaren att slå Uppdatera på en sida så att du kan få uppdaterade tid, JavaScript kan uppdatera den men det gillar. 

Så, som med vårt sista, vi ville att få tillgång till vår bakgrund, eller hur? Så vad tror du kan vara den första vi vill göra här? Om vi ​​slags gå ut denna typ av paradigm här? Vi vill förmodligen tillgång till vår klocka, eller hur? Så, har vi några var klocka, som equals-- Vad tror vi att det kommer att bli? Dokument prick få elementet by-- jag också älskar Sublime-- Id och vår Id är klockan. Semikolon. Fick se till att få dessa semikolon denna tid, eftersom jag känner mig sådär var problemet förra gången. OK så, som jag säger bara med att försöka ha JavaScript uppdatera sig själv, det finns denna stora funktion, jag vet att det kom praktiskt förra året, Jag är inte säker på att det är praktiskt för detta pset, men det kallas inställt intervall. Och det här är faktiskt riktigt coolt om ni gör något med tiden eller att få uppdaterad information. På en hemsida för en slutlig Projektet är detta förmodligen en funktion som du vill få super bekant med. Så vad inställd intervall gör är att vi kommer att ge det en funktion, och hur ofta det ska kallar denna funktion. OK? 

Så i det här fallet, vi kommer bara att skapa någon anonym funktion igen, OK, som kommer att få våra datum, och vår tid, och sedan uppdatera saker och visa den. Så vi ska oroa sig. Vi ska vara som genererar klockan här. Men vad vi behöver är hur ofta för att uppdatera den. Så i detta fall, det är bara millisekunder. Så vi ska bara gör 100 millisekunder. Naturligtvis helt godtyckligt. Om du ville att det skulle uppdatera mycket långsammare, kunde du. Vi kan röra runt med inställt intervall, hur stor vår intervallet är när vi får en fungerande klocka, som förhoppningsvis ska jag komma till. Så det här är bara säga, "OK, samtal denna funktion varje 100 millisekunder. " OK? Det är allt den gör. 

Så vad vi vill att vår funktion gör är att vi vill ha vissa datum och någon gång är vad vi kommer att ha. Så vi kan börja med vår datum är lika något, och vår tid är lika något att vi inte vet ännu. Eller egentligen, behöver vi bara datum, eftersom datum kommer att omfatta allt. Igen om du bara Google något om vad du vill göra, om du skriver, "OK, Jag vill få tiden via JavaScript, "det kommer att ge dig denna stora Funktionen kallas get datum. Bokstavligen, det mesta som du vill göra, JavaScript kommer att ha det gjort för dig redan. Så det är bokstavligen som nytt få datum, vilket är creating-- eller nytt datum, rather-- vilket genererar vissa objekt som representerar ett datum. 

Och vad vi ska göra här är Detta är-- Jag kommer att skriva detta, och sedan förklara vad den gör. Så jag ska se till att jag får denna rätt. 

OK, så vad denna funktion gör, är att vi är bara skapa HTML som faktiskt kommer att gå i vårt div id på klockan. Så vad detta kommer att göra är bara generera lite sträng, OK? Det är då kommer att bli transplanteras in i vår HTML. I grund och botten vad det kommer att göra är vad we-- vad jag kommer att visa dig är att vad vi säger HTML är, vi kommer att ersätta denna text här med vad HTML är. Så detta kommer att möjliggöra oss att ändra vår klocka dot HTML ifrån bara texten i detta bör vara en klocka, att faktiskt visa siffror och saker som vi bryr om, och faktiskt vara klockan. 

Så vad vi ska göra är att vi är kommer att börja generera denna HTML. Så på samma sätt som vi använde att göra plus lika för heltal, Du kan nu göra det för strängar, förutom det kommer att sammanfoga dem. Rätt? Som vi såg med part prick js, detta bara sammanfogar alla dessa saker tillsammans. Så du kan sammanfoga olika bitar av HTML från variabler, eller bitar av strängar att du skriver ut själv, och detta bara verkligen ger dig möjlighet att dynamiskt generera HTML, vilket är ganska coolt. Så om du har något väldigt användarspecifika, Detta kan tillåta dig att göra det. 

Så vi har HTML, till jag ska försöka se till att jag får denna rätt. Så vi kommer att göra en del h1 header. Så vad är viktigt att inse här är att detta är faktiskt bara HTML. Rätt? Vi skriver faktiskt HTML-kod i här, det är inte bara en sträng i det normala sätt att vi skulle tänka på det. Så vi har lite HTML. Detta anses vara en sträng här men. Och vi gör datum dot-- vi vill få våra timmar. Igen, om du skulle titta upp något om datum, Det skulle berätta dessa är alla de attribut som datumet har. Och här är vad du kan använda den. Så det har antagligen saker som få timmar, och få minuter, och få sekunder, och få millisekunder, och vem vet vad de har. Men om man tittar in i dokumentation, kommer allt att vara där. 

Så vi har få timmar, och sedan skulle vi vilja att sammanfoga att with-- jag är kommer att flytta detta över här. Så om vi genererar just nu, vi är faktiskt genererar tiden, eller hur? Vi har timmar, och sedan vad mellan timmar och minuter? Du har ett semikolon, eller hur? Så vi vill göra något semikolon här. Och sedan vill vi få vår minuter, så på samma sätt att vi har datum prick få timmar, Hur kan vi få våra minuter? Det är bokstavligen vilka datum dot få minuter, vilket jag gillar. Det är som, "Åh, hur får jag mina minuter? " Jag får bara mina minuter. 

OK. Och sedan har vi en annan kolon här. Och sedan om vi vill få våra sekunder, hur kan vi få vår andra? Datum dot få sekunder. Jag tycker det är ganska coolt. Och vad som är viktigt att inser, är att vi också måste stänga vår HTML-taggen här, eftersom Det bör fortfarande vara giltig HTML, så h1. Cool. 

Så efter det kan vi göra klockan dot inre HTML är lika med HTML. OK? Så kom ihåg hur jag sa inre HTML princip tar allt som är mellan två taggar som vi talat om och skär eller manipulerar vad är det? Så vad detta innebär, om vi går tillbaka till vår klocka, är att klocka hänvisar till allt inom denna div. Detta är den inre HTML av denna Id klock div. Och så det kommer att ändra det till HTML som vi just genererade, vilket, som, förhoppningsvis, förhoppningsvis, förhoppningsvis, visar tiden just nu. Vi får se. Självklart. Så många tekniska frågor. Allisons bara-- jag av mina spel idag killar. OK, fungerar det. Klockan dot inre HTML. Det var HTML Verkligen? Också detta är vad som händer. När du inte kan se något, du titta bara på din källkod. OK. Vill du veta en cool arbete runt att vi ska göra här? 

PUBLIK: Kan du göra stora bokstäver? De versaler? Eftersom du har få timmar, och sedan få minuter. 

ALLISON Buchholtz-AU: Det är få timmar och get-- oh. Du är-- guldstjärna. Det är allt ett test, grabbar. Jag lovar att det fungerade innan klassen. 

OK, men något coolt att veta är att du kan also-- om ibland dina externa filer är bli lite galen, Du kan också bara sätta dem rakt in här, vilket tenderar att åtgärda saker. Utom detta är som verkligen ful. Naturligtvis formatera allt. Se till att det är alla ganska. OK. 

Jag ville göra alla coola demos, och de är bara inte tränar. OK. Script var klockan. Iaf, vad som är viktigt är att detta är den allmänna vägen att du skulle formatera JavaScript. Som ni kan se, kan det vara mycket petiga ibland, även när det var bokstavligen arbetar två sekunder sedan. Eller inte två andra sedan, men mycket, mycket nyligen. 

Så för att visa dig hur det ska se ut, och för att visa er att jag inte är galen, och att allt är exakt Samma, det är vad det ska se ut. Du ska bara göra detta övre delen här, och om du visar sidan källa, om du märker, gjorde han några galnare saker, jag förenklat det. Också, kredit till Tommy McWilliam, som faktiskt hjälpte mig att skapa dessa exempel, det är därför jag vet att de fungerar. Eftersom Tommy är en JavaScript mästare. Men om vi märker, vi har några set. Vi har vår klockfunktion här. Detta är desto JavaScript som vi bara skrev, eller en del av det. Vi skrev precis här en rätt här. Och han har en extra funktion som bara pads det genom att sätta en nolla innan ett brev eller före ett nummer om det är bara en av dem. Så om du märker, detta är ganska mycket exakt vad vi skrev precis. Du har några rörliga klocka som har vår del, få del av ID, vilket är klockan. Vi har vår inställt intervall funktion, det är en anonym funktion som utför allt detta. Vi har några utgångs sträng av HTML som vi sedan dynamiskt genererar genom att ha vissa h1 header, sammanfoga med få timmar, plus vår kolon, plus få protokollet, plus en annan kolon, plus våra sekunder, och slutligen slutar HTML för det. Och sedan uppdatera vi vår klocka dot inre HTML till HTML, och vi uppdaterar varje 100 millisekunder. OK? 

Se Jag lovar jag är inte galen. JAG VET INTE. Jag vet inte varför det gillar inte mig. Jag känner mig som ser likadan ut, men tydligen hatar mig. 

Så låt oss se om runt tre går bättre. Vi håller på att se. Jag är inte säker på hur detta kommer att gå. Är alla minst få cons, som bara den allmänna temat av JavaScript, men? Jag hoppas att det är åtminstone bra, mer än att visa att det är lite petiga. Men ditt problem som kommer att vara väldigt roligt. Det kommer att bli stor. Det kommer inte att vara riktigt lika trött eftersom detta, jag tror inte det. Du kommer faktiskt få se riktigt coola saker. 

Så sist men inte minst, vi ska försöka Twitter en. Jag är verkligen rädd nu, grabbar. Jag vet inte hur detta kommer att gå. Men bara för att ge er en liten mer smak, är och detta faktiskt manipulera strängar och ingångar, vad vi ska göra är, om vi märker här med HTML-- här har lite more-- vi har några textområdet, vilket motsvarar denna text område här. OK? Och som har en Id av text. Vi restyled det lite med viss bredd och höjd att vi har förutbestämt, och vi har h1, som just är vår header en som representerar våra tecken kvar. Vi gav det några Id av bokstäver återstår, och sedan har vi några skript här, som jag verkligen hopp tredje gången s charmen här, grabbar. 

Så vad vi vill göra, i samma allmänna ven att vi har gjort med klocka prick js och parti dot js som vi har märkt, är att vi har börjat genom att faktiskt ta tag de saker som vi bryr oss om, eller hur? Så i det här fallet finns det två saker som vi bryr oss om, OK? En sak som vi är faktiskt typ av undersöker och dra data från, och en sak som vi är faktiskt förändras. Så det är vår HTML. Om detta är vår hemsida här, vad är de data som vi tittar på? Det kommer att bli vad som helst texten i våra lådor, eller hur? Så vad jag skriver in här. Det är vad jag vill veta, eller det är vad jag vill titta på. Och vad som kommer att bli ändra på vår hemsida? De bokstäver återstår. Så på samma sätt vill vi börja med att initiera variabler som faktiskt hålla fast dessa delar. OK? Så om vi har någon var det är vår textområde, och vi har några var som återstår. Rätt? Så dessa kommer att håll dessa två saker. Så samma sak, Dokumentet dot-- OK, jag är kommer att se till att detta är gå till jobbet den här gången. Jag är mycket övertygad. OK, så om vi vill att vår textområde, enligt till vår HTML, vad är vårt identifierare? Vad är vårt Id? Det kommer bara att vara text, eftersom detta skapar vår textområde, OK, och vår Id är text, så det är hur vi kan ta vad som finns där inne. OK, semikolon. Jag kommer att vara super exakt om detta, eftersom jag vill att det ska fungera den här gången. OK, gör samma sak, få del av Id. Jag är verkligen undrar vad har orsakade de andra två att förstöra. OK, då i den här, vad vill vi komma åt? Vad är vår Id här? Vi har en annan Id i vår HTML, vad är det? PUBLIK: Tecken kvar. ALLISON Buchholtz-AU: Tecken kvar. 

OK. Cool. Så jag ska bara skriva detta riktigt snabbt. Jag kommer bara att skriva detta på andra. Så textområde. Det intressanta är B function-- där finns massor av funktioner som inte bara motsvarar din mus, men tangentbordet. OK? Så du kan säga när någon tangent är intryckt, kan du göra sådana saker. Så den som vi använder heter på knapp uppåt, vilket säger, "om du har tryckt på en tangent på tangentbordet, när användaren har lyft deras fingret från den knappen, och nyckeln har blivit opressad, då ska vi göra något. " OK? Så detta är vettigt, eller hur? Eftersom varje tecken Vi skriver, vi ska att behöva lyfta våra fingrar off av det, så när nyckeln går upp, vi kan veta att dekrementera våra bokstäver återstår. 

Så vi har en del på nyckeln upp, och på samma sätt, vi ska säga, "OK, när vi gör det, vi kommer att skapa någon funktion som kommer att ta e ", i det här fallet, och vad vi vill göra är att beräkna antalet kvarvarande. OK, så låt oss bara börja genom att skapa en variabel. Så vi har några rörliga r, det kommer att representera hur många tecken som vi har kvar. OK? Vi vet att vi börjar med 140, och om vi vill veta, låt oss säga, längden av detta sträng som har varit ingång, Har ni någon aning hur vi kan göra det? Precis baserat bort av det uppenbara saker, som om vi ville timmar, vi använde få timmar. Vi vet att våra objekt är textområdet, men kan ni tänk på vad som kan komma efter den? Några idéer? 

Så detta ens typ av mindre intuitivt, men det är värde dot längd. Så bara ge mig lite värdeattribut som är faktiskt längden på denna sträng. Så det kommer att säga, "OK, jag letar på hela denna sträng i textområdet, och jag kommer att berätta hur lång tid det är. " För om vi minns strängar är verkligen bara matriser, så vi kan bara ta längden på dem. Så vi har det. Cool. 

Sen vad vi vill göra är att vi aldrig vill låta användaren ange mer än 140 tecken, eller hur? För om vi säger som, "Åh, du endast har detta mycket kvar, " och sedan låta dem göra det anyways, vi har ljugit. Och detta är en annan sak som JavaScript kan bli riktigt bra för, är validering användaren och se till att ditt användaren ryms inom några regler att du har skickat till dem. Så om du vill göra saker som att göra säker på att någon ingång sin e-postadress, eller att se till att när de ange två lösenord, matchas de. JavaScript kan göra det. Du skulle göra något liknande, "när formuläret skickas, "eller liknande, "När Skicka formulär-knapp är klickade, kolla alla dessa saker. " Och vi kan göra att JavaScript. Så det är precis vad vi ska göra här. 

Så vad kan vara ett sätt att kontrollera om de har gått över 140 tecken? Vad kommer att hända med vårt värde på r om de försöker? Det kommer att vara negativ, eller hur? Eller det kommer att bli mindre än eller lika med noll. Så vi kan använda en om det är precis som allt annat. OK? Och vi har några textområdet dot värde, och vad vi gör här är vi bara cutting-- vad är det? Ursäkta. Den här, vi vill bara returnera false. Jag blev förvirrad. Allt frazzled från saker som inte fungerar. OK, vi bara vill return false, och då är vi vill visa återstående tecken, eller hur? Så med klockan, vi gjorde något med inner HTML, eller hur? Där vi satt det lika med en del variabel, så vad kan vi göra här? Vad är det vi förändra inner HTML för? 

PUBLIK: Återstående? 

ALLISON Buchholtz-AU: Vi ändrar kvar. Okej, och vad gör vi vill ställa in den lika med? Det kommer att bli r, eftersom det bör vara våra tecken kvar. OK? Så jag är riktigt nervös för att se om detta fungerar nu, men vi får se. Lämna det här. Det är riktigt snabb. [OHÖRBAR] OK. Återigen, jag ska bara visa er. Av någon anledning, gruvan beslutar att inte arbeta, men vad jag kommer att visa dig är att detta är-- åh jag skulle sätta den i. OK, märker vi samma sorts sak här, att få textområdet. 

Dessutom, om du killen varsel, om det finns någonsin något du vill göra, och du inte vet hur man gör det, bara klicka på Visa sidkälla, och de kommer att berätta för dig. Ibland kommer att krypteras. För din pset, krypterar vi allt, så det bara ser ut som rappakalja. Men om det någonsin en riktigt cool hemsida som du vill, om du bara klicka på Visa sidkälla, det kommer att berätta för dig hur man gör det. Så återigen, arbeta smartare, inte hårdare. Och som ni ser här, alla dessa saker är lika. här här bara tar lite träng att jag glömmer exakt vad detta innebär. Men det tar naturligtvis lite träng av värdet från noll till tio, och returnerar false vad ska sluta användaren från att mata in längre, och då är det uppenbart uppdaterar inner HTML där. 

Cool. Så stora ta aways från idag, experiment, titta på källkoden eftersom det kommer att hjälpa dig mycket, och alla, ibland JavaScript kan vara svårt att arbeta med och inte alltid fungera som du förväntar dig det, men bara fortsätta att försöka eftersom jag lovar att det kommer. Jag lovar alla dessa exempel arbetade innan klassen. Jag förstår inte vad som hände. Jag har bokstavligen allt samma. 

En sak som jag vill bara visa er som kan vara super bra är in-- vad arbetade tidigare? Vi fick partiet att arbeta, inte vi? Jag tror det. Ja. Vi gjorde. Grymt. OK, så en sak som ni bör veta är konsolen loggen som jag pratade om. Så trösta dot logg över hello. Så det här är typ av JavaScript ekvivalent printf. Så om du någonsin vill inspektera dina variabler eller se vad som händer där, vad du kan göra är, om vi inspektera element, är vad du vill gå till, och du går att trösta, du kommer att se att det skrivs ut hej. 

Så vi kunde ha det skriva ut allt vi ville. Om vi ​​ville att det skulle skriva ut bakgrunden dot stil dot bakgrund, Vi borde kunna se RGB trippel som kommer upp. Eller inte. Jag glömmer exakt hur du skriva ut en variabel som detta, men du bör kunna skriva ut saker. Det kommer att vara mycket användbart för din pset när du försöker manipulera koordinater eller whatnot. Så de också ändra denna pjäs i klassen. Detta skiljer sig från senaste åren, så bara vara trevligt att dina TF, eller TF på kontorstid snarare eftersom vi är typ av lärande tillsammans med er. Men konsolen loggen var super, super hjälp för JavaScript fjol. Så älskar det. Lär dig hur man använder det. Det är lättare att använda än GDB, så att bör vara minst ett plus. Men tack killar bär med mig. Jag är ledsen att min exempel av någon anledning bara inte vill samarbeta med mig, men jag hoppas att det hjälpte typ av får du en lite mer i zonen för JavaScript. Och skicka alla dina frågor till mig nästa vecka så jag kan super repar, och jag ska ta med godis och även extra godis eftersom det var löjligt. Men ni är bra, och har en fantastisk vecka.