1 00:00:00,000 --> 00:00:10,632 2 00:00:10,632 --> 00:00:12,340 ALLISON Buchholtz-AU: Greit alle. 3 00:00:12,340 --> 00:00:13,520 Velkommen tilbake til del. 4 00:00:13,520 --> 00:00:15,315 Det er vår nest siste avsnitt. 5 00:00:15,315 --> 00:00:16,542 Det er så trist. 6 00:00:16,542 --> 00:00:19,500 Jeg vet ikke hva jeg skal gjøre uten å se dere hver mandag. 7 00:00:19,500 --> 00:00:20,970 Jeg tror vi bør just-- kanskje vi kunne bare 8 00:00:20,970 --> 00:00:22,710 møtes her og ha middag eller noe. 9 00:00:22,710 --> 00:00:23,270 Jeg vet ikke. 10 00:00:23,270 --> 00:00:24,370 Jeg skal ta med mat i stedet. 11 00:00:24,370 --> 00:00:26,290 Vi vil bare snakke. 12 00:00:26,290 --> 00:00:29,900 Men ja, neste uke vil være vår siste delen. 13 00:00:29,900 --> 00:00:32,390 >> På dette notatet, har du en quiz neste uke. 14 00:00:32,390 --> 00:00:35,660 Jeg vet at jeg glemte å gjøre mitt, som, to ukers forhåndsvarsel i forrige uke, 15 00:00:35,660 --> 00:00:39,140 Men forhåpentligvis dere visste at dette kom. 16 00:00:39,140 --> 00:00:42,880 Forhåpentligvis er dette en av de siste midterms for dere for semesteret. 17 00:00:42,880 --> 00:00:46,950 Men det kommer til å dekke alle materiale som vi har gått over. 18 00:00:46,950 --> 00:00:50,811 Så det er ikke som du kan bare glemme om fire sløyfer eller variabler. 19 00:00:50,811 --> 00:00:52,560 Fordi vi har lært de i begynnelsen, 20 00:00:52,560 --> 00:00:55,870 de er tydeligvis rettferdig spill for din quiz. 21 00:00:55,870 --> 00:01:00,150 >> Det kommer til å være den samme format, samme lengde, slik at du allerede er vant til det. 22 00:01:00,150 --> 00:01:02,330 Det kommer til å være koding av hånd problemer, 23 00:01:02,330 --> 00:01:06,270 kanskje noen true false, kanskje noen korte svaret. 24 00:01:06,270 --> 00:01:08,090 Så du bør være fortrolig med formatet, 25 00:01:08,090 --> 00:01:10,940 spesielt hvis du tar praksis tester. 26 00:01:10,940 --> 00:01:13,950 Men som jeg sier her, er det kumulative, men vi er definitivt 27 00:01:13,950 --> 00:01:17,410 kommer til å være fokus på ting fra uke seks framover. 28 00:01:17,410 --> 00:01:24,050 I så fall er vi sannsynligvis ikke kommer å spørre deg om hvor mange byte 29 00:01:24,050 --> 00:01:26,180 finnes i hver type eller disse slags ting, 30 00:01:26,180 --> 00:01:29,730 men vi sannsynligvis kommer til å være interessert i ting som lenkede lister, 31 00:01:29,730 --> 00:01:32,750 eller forskjellige datastrukturer, eller ulike algoritmer 32 00:01:32,750 --> 00:01:33,960 at vi har snakket om. 33 00:01:33,960 --> 00:01:38,990 Så sørg for at du er virkelig opp på disse, og hvis du 34 00:01:38,990 --> 00:01:41,590 trenger noen ressurser, her er massevis av ressurser. 35 00:01:41,590 --> 00:01:44,790 Jeg bare ga deg snill av en rask liste der. 36 00:01:44,790 --> 00:01:48,330 >> Neste uke vil være quiz gjennomgang i løpet av denne tiden. 37 00:01:48,330 --> 00:01:52,290 Så hvis du har noen spørsmål eller spesifikke emner, 38 00:01:52,290 --> 00:01:56,180 spesifikke ting på quiz som du har lyst til å gå over, vær så snill 39 00:01:56,180 --> 00:02:01,780 sende dem til meg på forhånd slik at jeg kan slags forberede en del materiale for det. 40 00:02:01,780 --> 00:02:06,310 Og i tillegg til denne § vurdering, vil vi 41 00:02:06,310 --> 00:02:09,616 også holde kurs omfattende gjennomgang som vi gjorde forrige gang. 42 00:02:09,616 --> 00:02:11,490 Og det kommer til å være gjort av de samme menneskene. 43 00:02:11,490 --> 00:02:13,030 Jeg vet ikke om det gjør det bedre eller verre, 44 00:02:13,030 --> 00:02:15,670 men det kommer til å være meg, Hannah, Davan, og Gabe igjen. 45 00:02:15,670 --> 00:02:18,630 Så hvis du ønsker å komme se oss alle krangler med hverandre 46 00:02:18,630 --> 00:02:21,270 og lede deg gjennom quiz gjennomgang, bør du definitivt 47 00:02:21,270 --> 00:02:22,600 kommet til at neste mandag også. 48 00:02:22,600 --> 00:02:26,210 Så du må bare en mandag jam pakket av quiz vurdering, noe som er bra 49 00:02:26,210 --> 00:02:29,840 fordi da har du tirsdag å behandle gjennom alt. 50 00:02:29,840 --> 00:02:32,230 >> Men definitivt gjøre sjekk ut disse ressursene. 51 00:02:32,230 --> 00:02:36,030 Study.csv.net er langt, jeg tror, ​​en av de mest anvendelige, 52 00:02:36,030 --> 00:02:37,990 mest fordi det har mye eksempelkode, 53 00:02:37,990 --> 00:02:40,490 det har alle strømtilkobling med alle notene på det, 54 00:02:40,490 --> 00:02:44,510 som er virkelig hva jeg tegner mest av mine seksjons materialer fra. 55 00:02:44,510 --> 00:02:47,480 Hvis det er noe i forrige deler som jeg kan ha sendt ut 56 00:02:47,480 --> 00:02:49,920 at du kanskje ikke har fått, bare gi meg beskjed. 57 00:02:49,920 --> 00:02:52,520 Som forrige ukes eksempelkode, hvis noen ikke får det, 58 00:02:52,520 --> 00:02:55,930 bare send meg eller komme å snakke med meg, og jeg skal sørge for at du får det. 59 00:02:55,930 --> 00:03:02,000 >> Så med det i dag vi skal å være å snakke om Script. 60 00:03:02,000 --> 00:03:04,690 Så her har vi Tommy, hvem jeg var bare snakker til deg i går kveld. 61 00:03:04,690 --> 00:03:06,670 Jeg elsker Tommy. 62 00:03:06,670 --> 00:03:09,040 Javascript er hans favoritt språk, som han sier her. 63 00:03:09,040 --> 00:03:14,050 De vil prøve å fortelle deg at det er ikke den beste, og de vil være galt. 64 00:03:14,050 --> 00:03:16,510 Så Tommy er en Javascript-mester. 65 00:03:16,510 --> 00:03:19,850 Jeg er ikke helt på hans nivå, men jeg var liksom: 66 00:03:19,850 --> 00:03:22,900 "Tommy, hvordan lærer jeg disse barna Javascript? " 67 00:03:22,900 --> 00:03:26,700 Så jeg fikk noen tips, så forhåpentligvis de arbeider ut. 68 00:03:26,700 --> 00:03:31,140 >> Så et par ting å vite er at Javascript er en klient-side scripting 69 00:03:31,140 --> 00:03:35,560 språk, så mens PHP er noe at vi betraktet mer server-side, 70 00:03:35,560 --> 00:03:39,280 det ble opp til serveren, kompilert og henrettet der. 71 00:03:39,280 --> 00:03:42,871 Denne er utført på din egen maskin. 72 00:03:42,871 --> 00:03:43,370 OK? 73 00:03:43,370 --> 00:03:46,960 Så du laste noen Java side, og den utfører på din maskin. 74 00:03:46,960 --> 00:03:49,910 Syntaksen er svært lik C og PHP. 75 00:03:49,910 --> 00:03:52,490 Vi kommer til å gå gjennom noen eksempler på Java, 76 00:03:52,490 --> 00:03:56,740 og du kommer til å se at måten vi snakker om variabler, løkker, 77 00:03:56,740 --> 00:03:58,910 og forholdene er alle svært like. 78 00:03:58,910 --> 00:04:00,500 OK? 79 00:04:00,500 --> 00:04:04,490 Det faktum at de er så like er sannsynligvis kommer til å reise noen av dere 80 00:04:04,490 --> 00:04:08,529 opp, i noen tilfeller, bare fordi du vil innlemme en liten bit av C 81 00:04:08,529 --> 00:04:09,570 der det ikke skal være. 82 00:04:09,570 --> 00:04:14,130 Kanskje du prøve og skrive noe når det ikke skal være skrevet. 83 00:04:14,130 --> 00:04:16,540 >> Og på det, en ting til vet er at Java 84 00:04:16,540 --> 00:04:19,360 er en dynamisk skrevet språk, som PHP. 85 00:04:19,360 --> 00:04:21,410 Så hvis dere huske fra seksjon i forrige uke, 86 00:04:21,410 --> 00:04:23,680 da vi var på en måte å gjøre vår PHP lynkurs, 87 00:04:23,680 --> 00:04:28,860 vi så hvordan en streng man kunne være omgjort til en int ett, og så videre. 88 00:04:28,860 --> 00:04:31,650 89 00:04:31,650 --> 00:04:34,850 Den type variabler fastsettes under kjøring, 90 00:04:34,850 --> 00:04:38,180 slik at de kan endre seg over I løpet av programmet, 91 00:04:38,180 --> 00:04:43,109 og på samme måte som vi aldri virkelig erklære typer for PHP variabler, 92 00:04:43,109 --> 00:04:45,900 vi kommer til å gjøre det samme ting her, hvor vi er egentlig ikke 93 00:04:45,900 --> 00:04:49,740 regulering av de typer av våre variabler så å si, som vi gjør i C. 94 00:04:49,740 --> 00:04:52,200 >> Og så en ting som er ganske kult er 95 00:04:52,200 --> 00:04:54,090 at du kan feil sjekk via konsollen, 96 00:04:54,090 --> 00:04:57,240 med denne flotte funksjonen console.log, som 97 00:04:57,240 --> 00:05:00,930 gjør at du kan skrive ut forskjellig variabler eller objekter at vi vil 98 00:05:00,930 --> 00:05:01,750 snakke om. 99 00:05:01,750 --> 00:05:05,720 Akkurat som i forrige uke da jeg var som "bruke denne funksjonen," med dump 100 00:05:05,720 --> 00:05:10,490 fra din PSet dette er en funksjon du ønsker å bruke, console.log. 101 00:05:10,490 --> 00:05:12,860 Jeg ble så overrasket over hvor mange studenter ved kontortid 102 00:05:12,860 --> 00:05:14,530 visste ikke om dump funksjon. 103 00:05:14,530 --> 00:05:19,010 Og jeg var som "gutta, vil dette gjøre livet så mye enklere. " 104 00:05:19,010 --> 00:05:22,960 >> All right, så det var slags bare en kortfattet ting, som alltid, 105 00:05:22,960 --> 00:05:24,000 Vi har eksempler. 106 00:05:24,000 --> 00:05:25,600 Jeg vet at dere elsker dem. 107 00:05:25,600 --> 00:05:30,930 Så her er et eksempel på en meget enkel Javascript-fil her. 108 00:05:30,930 --> 00:05:34,000 Så det er bare kommer til å skape dette pop-up som sier, 109 00:05:34,000 --> 00:05:36,336 "Hello world", når du inn på siden, men la oss 110 00:05:36,336 --> 00:05:37,960 prøv og gå gjennom dette litt. 111 00:05:37,960 --> 00:05:43,440 Så åpenbart dette er bare som den vanlige index.html. 112 00:05:43,440 --> 00:05:50,280 Så, bare vår normale mal her, og vi har HTML, vi har vårt hode, 113 00:05:50,280 --> 00:05:55,580 og akkurat som med CSS, hvordan vi inkludert noen utenfor fil, ikke sant? 114 00:05:55,580 --> 00:05:59,260 Vi har noen script type tekst som er Script. 115 00:05:59,260 --> 00:06:02,680 Og kilden er hello.js, som er her nede. 116 00:06:02,680 --> 00:06:05,630 Dette er hele filen av hello.js. 117 00:06:05,630 --> 00:06:09,080 Og så har vi noen tittel og noen kroppen HTML 118 00:06:09,080 --> 00:06:11,050 at vi ikke egentlig bryr seg om. 119 00:06:11,050 --> 00:06:15,970 >> Hva som skjer er, når vi laster denne siden den utfører dette skriptet automatisk. 120 00:06:15,970 --> 00:06:16,470 OK? 121 00:06:16,470 --> 00:06:18,790 Så Javascript vil utføre automatisk. 122 00:06:18,790 --> 00:06:22,860 Så hva det kommer til å gjøre, det kommer til umiddelbart å gå og utføre dette. 123 00:06:22,860 --> 00:06:24,110 Og det kommer til å si, "varsel. 124 00:06:24,110 --> 00:06:25,190 Hello world. " 125 00:06:25,190 --> 00:06:30,840 Som varsler er den funksjonen som faktisk genererer denne boksen. 126 00:06:30,840 --> 00:06:31,540 OK? 127 00:06:31,540 --> 00:06:33,390 Så det er på en måte alt omfatte. 128 00:06:33,390 --> 00:06:36,700 Det er ikke noe ekstra vi hadde å gjøre i tillegg bare våken, 129 00:06:36,700 --> 00:06:40,000 og deretter hva vi ønsket innenfor vår Alert boks. 130 00:06:40,000 --> 00:06:40,500 OK? 131 00:06:40,500 --> 00:06:45,080 Så det er bare en superenkel eksempel på hva Javascript kan gjøre. 132 00:06:45,080 --> 00:06:48,110 133 00:06:48,110 --> 00:06:50,070 >> En av de virkelig kule ting, som vi skal se, 134 00:06:50,070 --> 00:06:55,150 er at Javascript lar deg å manipulere websidene dine, 135 00:06:55,150 --> 00:06:57,720 uten å måtte laste dem hver gang. 136 00:06:57,720 --> 00:07:01,830 Så hvis man want-- for eksempel hvis du svever over noe, 137 00:07:01,830 --> 00:07:04,300 hvis dere noen gang har sett som Meny barer, 138 00:07:04,300 --> 00:07:07,360 eller når du holder over noen emne, vises en rullegardinmenyen, 139 00:07:07,360 --> 00:07:08,670 det er på grunn av Javascript. 140 00:07:08,670 --> 00:07:09,170 OK? 141 00:07:09,170 --> 00:07:12,670 Så du er ikke omlasting hele side for å få denne menyen til å dukke opp, 142 00:07:12,670 --> 00:07:17,240 du er bare ute etter noen spesifikke handling som brukeren har tatt, 143 00:07:17,240 --> 00:07:21,800 som er kalt hendelser som vi får inn, og når du ser at du sier, 144 00:07:21,800 --> 00:07:25,960 "OK, redigere noe på dette side og gjøre det ser annerledes ut, 145 00:07:25,960 --> 00:07:28,270 men bare redigere disse spesifikke ting. 146 00:07:28,270 --> 00:07:29,690 Ikke legg hele greia. " 147 00:07:29,690 --> 00:07:33,110 Slik at det faktisk er mye hyggeligere, og du trenger ikke å laste sidene dine, 148 00:07:33,110 --> 00:07:34,510 og det er virkelig kult. 149 00:07:34,510 --> 00:07:38,270 >> Så variabeldeklarasjoner, slik at du kan slags se, 150 00:07:38,270 --> 00:07:40,530 Jeg satt på toppen her, løst skrevet. 151 00:07:40,530 --> 00:07:42,570 Så dette er veldig mye som PHP. 152 00:07:42,570 --> 00:07:48,770 Vi trenger ikke å fortelle Java hvilken type vi er 153 00:07:48,770 --> 00:07:50,740 forventer hver av disse variablene å være. 154 00:07:50,740 --> 00:07:52,560 De kan bli hva typer vi ønsker. 155 00:07:52,560 --> 00:07:57,480 Så du merker i dette tilfellet, vi erklære dem veldig enkelt, bare med "var" 156 00:07:57,480 --> 00:08:00,990 og deretter hva vi vil vår variabelnavn å være. 157 00:08:00,990 --> 00:08:05,680 En ting å merke seg er at når du sette Var foran en variabel navn, 158 00:08:05,680 --> 00:08:07,520 det lokalt scopes det. 159 00:08:07,520 --> 00:08:09,320 OK? 160 00:08:09,320 --> 00:08:14,025 Det er helt rimelig for deg å fullstendig bare slette VaR 161 00:08:14,025 --> 00:08:18,970 og bare ha s tilsvarer CS50, og det ville bare være en global variabel. 162 00:08:18,970 --> 00:08:19,580 OK? 163 00:08:19,580 --> 00:08:22,490 Så du kan initialisere det begge veier, bare avhenger av hvordan du vil ha det. 164 00:08:22,490 --> 00:08:24,448 Så hvis du initialisering det innenfor en funksjon, 165 00:08:24,448 --> 00:08:28,070 og du vil at variabelen til holde omfangs innenfor den funksjonen, 166 00:08:28,070 --> 00:08:31,620 du kommer til å ønske å gjøre noe sånt Var Name en variabel, 167 00:08:31,620 --> 00:08:34,270 versus hvis du ønsker det globalt scoped, du 168 00:08:34,270 --> 00:08:36,240 kan bare gjøre navnet den variable og deretter 169 00:08:36,240 --> 00:08:38,270 hva du ønsker det satt lik. 170 00:08:38,270 --> 00:08:40,230 OK? 171 00:08:40,230 --> 00:08:45,580 >> Dette er slags kule ting her nede, fordi hvis vi oppdager vår variabel 172 00:08:45,580 --> 00:08:47,590 b starter som sant. 173 00:08:47,590 --> 00:08:51,280 Og hva dette does-- kan noen fortelle meg hva dette betyr? 174 00:08:51,280 --> 00:08:54,190 175 00:08:54,190 --> 00:08:55,890 Så vi har litt varsling. 176 00:08:55,890 --> 00:09:00,156 Hva ville skrive av b være i begynnelsen? 177 00:09:00,156 --> 00:09:00,905 PUBLIKUM: Boolean. 178 00:09:00,905 --> 00:09:01,330 ALLISON Buchholtz-AU: Boolean. 179 00:09:01,330 --> 00:09:01,940 Høyre. 180 00:09:01,940 --> 00:09:07,260 Og da vi tildele b til denne strengen, ikke sant? 181 00:09:07,260 --> 00:09:11,170 Så her, hva slags b være? 182 00:09:11,170 --> 00:09:12,480 Det ville være en streng, ikke sant? 183 00:09:12,480 --> 00:09:14,900 Så hva er viktig å varsel er at i c, vi 184 00:09:14,900 --> 00:09:17,330 kan nesten aldri gjøre noe sånt. 185 00:09:17,330 --> 00:09:22,000 Vi måtte ha en variabel, kastet det som noe annet, 186 00:09:22,000 --> 00:09:27,185 kanskje gjøre noen funksjon med en to Jeg går fra en kostnad til et heltall. 187 00:09:27,185 --> 00:09:31,063 Men hvis vi legger merke til her, b veldig lett endres skriver. 188 00:09:31,063 --> 00:09:33,760 >> PUBLIKUM: Vent, så du kan bare være som, "gjøre b et heltall?" 189 00:09:33,760 --> 00:09:34,360 >> ALLISON Buchholtz-AU: Yeah. 190 00:09:34,360 --> 00:09:36,185 Du kan bare tilordne b til et heltall. 191 00:09:36,185 --> 00:09:36,910 >> PUBLIKUM: Virkelig? 192 00:09:36,910 --> 00:09:38,035 >> ALLISON Buchholtz-AU: Yeah. 193 00:09:38,035 --> 00:09:39,810 Og så ville det være en int. 194 00:09:39,810 --> 00:09:43,820 Så dine variabler kan endres over I løpet av studiet også. 195 00:09:43,820 --> 00:09:46,410 De er strengt tatt ikke skrevet. 196 00:09:46,410 --> 00:09:49,180 Det er veldig løst skrevet. 197 00:09:49,180 --> 00:09:50,820 OK? 198 00:09:50,820 --> 00:09:54,820 I utgangspunktet variabler kan gjøre hva de vil, så vi slags så med PHP. 199 00:09:54,820 --> 00:09:59,430 De kan gjøre noen sprø ting, så det er viktig å være ganske forsiktig. 200 00:09:59,430 --> 00:10:01,200 Navngi dine variabler godt. 201 00:10:01,200 --> 00:10:03,450 Hvis du ikke gjør det, plutselig du kommer til å være som, 202 00:10:03,450 --> 00:10:05,783 "Vent, jeg trodde dette var en streng, og nå er det en int, 203 00:10:05,783 --> 00:10:08,170 og jeg er ikke helt sikker hva som skjer her. " 204 00:10:08,170 --> 00:10:12,410 Så dette er bare et enkelt eksempel på viser hvordan en variabel kan lett 205 00:10:12,410 --> 00:10:15,890 endre sin type i løpet av løpet av et program. 206 00:10:15,890 --> 00:10:16,870 >> OK. 207 00:10:16,870 --> 00:10:19,200 Så dette bør se super, super kjent. 208 00:10:19,200 --> 00:10:21,510 Så disse er våre løkker i Javascript. 209 00:10:21,510 --> 00:10:27,780 De er nøyaktig det samme, bortsett i stedet for fire int i er lik null, 210 00:10:27,780 --> 00:10:30,470 vi kan bare si Var jeg er lik null. 211 00:10:30,470 --> 00:10:34,100 Og så kunne vi ha vår samme sort av tilstand, samme slags oppdatering, 212 00:10:34,100 --> 00:10:36,090 Jeg pluss pluss fungerer helt fint. 213 00:10:36,090 --> 00:10:39,800 Så firere er de samme, Mellem er de samme, 214 00:10:39,800 --> 00:10:41,440 og gjøre whiles er nøyaktig det samme. 215 00:10:41,440 --> 00:10:44,070 Samme slags generelle formatet. 216 00:10:44,070 --> 00:10:48,840 Vi legger merke til, fire, parentes, parentes, det er alt det samme. 217 00:10:48,840 --> 00:10:51,470 Også det vil være semikolon når vi kommer til eksempelkode. 218 00:10:51,470 --> 00:10:55,250 Du vil se det er ganske mye på samme måte som C. 219 00:10:55,250 --> 00:10:59,770 >> For funksjons erklæringer, igjen, svært lik. 220 00:10:59,770 --> 00:11:05,100 Vi har noen funksjon som bare sier at det er en funksjon, og deretter 221 00:11:05,100 --> 00:11:07,660 navnet på vår funksjon, og inngangene. 222 00:11:07,660 --> 00:11:11,590 Og igjen hvis vi oppdager, vi har ingen typer her overhodet. 223 00:11:11,590 --> 00:11:12,090 Høyre? 224 00:11:12,090 --> 00:11:18,150 Vi har ingenting å si at disse trenger å være ints eller dobbeltrom, eller flyter. 225 00:11:18,150 --> 00:11:19,530 De kan være hva de vil. 226 00:11:19,530 --> 00:11:23,560 Hva er viktig er å merke seg at vi trenger å skrive funksjon forhånd 227 00:11:23,560 --> 00:11:26,430 å la Javascript vite at Dette er faktisk en funksjon. 228 00:11:26,430 --> 00:11:29,820 >> Så dette er bare noen enkle sum funksjon som returnerer x eller y, 229 00:11:29,820 --> 00:11:33,800 og deretter hva er også kult er at du faktisk kan 230 00:11:33,800 --> 00:11:35,950 tildele en funksjon til en variabel. 231 00:11:35,950 --> 00:11:41,770 Så i dette tilfellet er summen nå funksjon som faktisk gjør sum. 232 00:11:41,770 --> 00:11:47,740 Så hvis du legger merke til her, har vi funksjon, navn på funksjon, innganger. 233 00:11:47,740 --> 00:11:48,860 Høyre? 234 00:11:48,860 --> 00:11:52,120 Her er vi bare nødt funksjon og innganger. 235 00:11:52,120 --> 00:11:54,310 Så dette kalles en anonym funksjon. 236 00:11:54,310 --> 00:11:59,265 Og dette er noe som bør være ny til de fleste av dere, om ikke alle av dere. 237 00:11:59,265 --> 00:12:01,140 Så i utgangspunktet hva som middel er at vi ikke gjør det 238 00:12:01,140 --> 00:12:03,050 må navnet på vår funksjon i dette tilfelle. 239 00:12:03,050 --> 00:12:06,260 Vi kan bare si: "OK, jeg kommer til å har denne funksjonen som utfører, her 240 00:12:06,260 --> 00:12:08,550 er sine innganger, og her er hva det kommer til å gjøre. " 241 00:12:08,550 --> 00:12:12,540 Og spesielt når du tilordner en funksjon av noen variable 242 00:12:12,540 --> 00:12:14,950 at du kommer til å manipulere, Du trenger ikke nødvendigvis 243 00:12:14,950 --> 00:12:17,116 trenger å nevne det fordi du kommer til å være å henvise 244 00:12:17,116 --> 00:12:20,990 til det ved denne variabelen navn, ikke av hva 245 00:12:20,990 --> 00:12:22,840 funksjonen ble faktisk kalt. 246 00:12:22,840 --> 00:12:23,550 OK? 247 00:12:23,550 --> 00:12:27,810 >> Så hvis vi ser her, vi har noen variabel sum nå 248 00:12:27,810 --> 00:12:30,920 som er lik summen av tre og fem. 249 00:12:30,920 --> 00:12:33,070 Og vi ville få dette. 250 00:12:33,070 --> 00:12:36,750 Og dette ville bare ha litt våken, tre pluss fem er lik antallet. 251 00:12:36,750 --> 00:12:43,950 Dette pluss vil bare sette sammen hva vårt svar var på strengen. 252 00:12:43,950 --> 00:12:47,420 Også kult, pluss kan sette sammen strenger. 253 00:12:47,420 --> 00:12:53,510 >> For Javascript, som med PHP, HTML og CSS som vi sa, 254 00:12:53,510 --> 00:12:56,450 mye av det vi er snille av å ta treningshjul off her 255 00:12:56,450 --> 00:13:02,030 og dere har mye know hvordan å virkelig forstå disse tingene. 256 00:13:02,030 --> 00:13:04,280 De er litt annerledes, men de er ikke så fremmed 257 00:13:04,280 --> 00:13:09,460 og at du ikke kan google ting eller se dem opp på nettet med w3 skoler. 258 00:13:09,460 --> 00:13:12,755 Og vi egentlig venter deg gutta til, type, eksperiment 259 00:13:12,755 --> 00:13:14,400 og lære på egen hånd. 260 00:13:14,400 --> 00:13:19,490 Så, jeg vet at dette kan virke litt mindre grundig enn noen av de c ting 261 00:13:19,490 --> 00:13:21,936 vi gjør, men det er faktisk for en grunn. 262 00:13:21,936 --> 00:13:25,060 263 00:13:25,060 --> 00:13:28,470 Men forhåpentligvis er det ikke så annerledes, og det er ikke overveldende. 264 00:13:28,470 --> 00:13:31,940 >> Så arrays i Javascript, igjen veldig, veldig lik. 265 00:13:31,940 --> 00:13:32,460 Høyre? 266 00:13:32,460 --> 00:13:36,520 Vi har litt variabelt utvalg som er lik tomme parentes, 267 00:13:36,520 --> 00:13:40,340 og det er bare en tom array. 268 00:13:40,340 --> 00:13:43,420 Dette kalles ofte bokstave rekke notasjon. 269 00:13:43,420 --> 00:13:45,280 Det er bare én ting vi kaller det. 270 00:13:45,280 --> 00:13:51,380 Hvis vi ser matrise to her, har vi noen bokstavelig array som har tre elementer, 271 00:13:51,380 --> 00:13:51,910 ikke sant? 272 00:13:51,910 --> 00:13:54,640 Og så har vi noen Div tredje element som er 273 00:13:54,640 --> 00:13:58,060 noen variabel som er bare kommer til å holde denne strengen, JS. 274 00:13:58,060 --> 00:14:01,760 275 00:14:01,760 --> 00:14:06,170 >> Elementene, godt å legge merke til, er atskilt med komma, 276 00:14:06,170 --> 00:14:07,740 akkurat som vi forventer. 277 00:14:07,740 --> 00:14:14,630 Og du kan også få tilgang til disse, som vi gjorde i C, med denne indeksen notasjon, ikke sant? 278 00:14:14,630 --> 00:14:16,950 Så forskjellig fra PHP nå, vi kommer tilbake 279 00:14:16,950 --> 00:14:20,180 til bare slags henviser til ting ved indeks. 280 00:14:20,180 --> 00:14:22,189 Akkurat som C, er det også null indeksen. 281 00:14:22,189 --> 00:14:25,230 Jeg føler at det ville være veldig grusom hvis de plutselig gjorde Java ett 282 00:14:25,230 --> 00:14:30,630 indeks, og du måtte helt revurdere hvordan du tenker om arrays. 283 00:14:30,630 --> 00:14:36,140 >> En kul ting er at i stedet for å måtte do-- hvis du noensinne 284 00:14:36,140 --> 00:14:39,240 ønsket lengden av en matrise, kanskje du iterere gjennom det 285 00:14:39,240 --> 00:14:43,430 til du finner noen ende, eller du ville bare vite hva det er. 286 00:14:43,430 --> 00:14:49,310 Fordi Javascript er veldig løs i mer måter enn bare typen, som vi ser her, 287 00:14:49,310 --> 00:14:53,310 vi kan bare gjøre denne matrisen større fordi vi bestemmer oss for. 288 00:14:53,310 --> 00:14:56,177 Hvis vi oppdager rekke tre har tre ting å starte, 289 00:14:56,177 --> 00:14:58,510 men så plutselig, vi er liksom: "oh, bare tuller. 290 00:14:58,510 --> 00:15:01,370 Vi blir faktisk kommer for å gjøre det 101 ting. " 291 00:15:01,370 --> 00:15:05,300 Så hvis du noen gang ønsker å vite Selve lengden på array, 292 00:15:05,300 --> 00:15:06,680 du gjør det på denne måten. 293 00:15:06,680 --> 00:15:10,470 Og vi kommer til å se mye av denne notasjonen i eksempler, 294 00:15:10,470 --> 00:15:12,730 men med Javascript det er vanligvis uansett 295 00:15:12,730 --> 00:15:16,410 objekt som du snakker om dot hva slags funksjon 296 00:15:16,410 --> 00:15:17,740 du vil bruke på det. 297 00:15:17,740 --> 00:15:18,240 OK? 298 00:15:18,240 --> 00:15:20,520 >> Slik at i dette tilfellet, vår objekt er matrise to, 299 00:15:20,520 --> 00:15:23,470 og vi sier vi vil ha den lengde på rekke to. 300 00:15:23,470 --> 00:15:25,716 Så dette bare kaller som lengden på det. 301 00:15:25,716 --> 00:15:27,090 Og som vil returnere din lengde. 302 00:15:27,090 --> 00:15:32,610 303 00:15:32,610 --> 00:15:36,790 Også noe å merke seg er at hvis vi legger merke til våre rekker, 304 00:15:36,790 --> 00:15:39,830 i motsetning til C, har de ikke være av samme type. 305 00:15:39,830 --> 00:15:41,670 Dette er mye mer som PHP. 306 00:15:41,670 --> 00:15:45,905 Javascript er i utgangspunktet akkurat som dette interessant meld av C og PHP. 307 00:15:45,905 --> 00:15:50,020 308 00:15:50,020 --> 00:15:52,170 Så vi skal gå inn på det. 309 00:15:52,170 --> 00:15:56,750 For nå, la oss bare anta at arrays er i utgangspunktet 310 00:15:56,750 --> 00:16:00,640 som C arrays, ved at de er null indeksert. 311 00:16:00,640 --> 00:16:04,120 OK, så det er alt. 312 00:16:04,120 --> 00:16:08,850 Du kan også bare forlenge en array til hva indeksen du vil. 313 00:16:08,850 --> 00:16:14,260 Mens dette ville trolig SEG utsette på deg eller gi deg noen feil, 314 00:16:14,260 --> 00:16:15,970 Javascript er like, "nah, det er greit. 315 00:16:15,970 --> 00:16:16,620 Jeg fikk dette. 316 00:16:16,620 --> 00:16:19,460 Vi vil bare gå rett hvor du vil. " 317 00:16:19,460 --> 00:16:24,310 >> OK, slik at gjenstandene er meget viktig. 318 00:16:24,310 --> 00:16:29,720 Dere skal bruke mye av disse i P sett, hvis jeg husker riktig. 319 00:16:29,720 --> 00:16:34,780 Så ting som disse er lik i C er structs. 320 00:16:34,780 --> 00:16:39,290 Så du kan tenke om-- når vi går til et eksempel til høyre 321 00:16:39,290 --> 00:16:41,810 etter dette tror jeg det vil gjøre mye mer sense-- 322 00:16:41,810 --> 00:16:45,830 men vi i utgangspunktet bruke gjenstander til organisere selvfølgelig relatert informasjon. 323 00:16:45,830 --> 00:16:47,780 Når vi snakket om structs i C, vi ofte 324 00:16:47,780 --> 00:16:53,405 snakke om en student som hadde noen navn, ID, house, du vet, konsentrasjon. 325 00:16:53,405 --> 00:16:56,030 Og det er slags det samme at vi bruker objekter for her. 326 00:16:56,030 --> 00:16:59,300 Det er bare å organisere lignende informasjon. 327 00:16:59,300 --> 00:17:03,620 >> Du kan også tenke på disse som mer lik assosiative arrays i PHP. 328 00:17:03,620 --> 00:17:10,010 Så dette ville være slags ting hvor vi har noen nøkkel med en viss verdi, 329 00:17:10,010 --> 00:17:12,859 svært lik PHP. 330 00:17:12,859 --> 00:17:15,780 Så du kan initialisere noen tom objekt, som vi ser her oppe, 331 00:17:15,780 --> 00:17:17,390 bare med klammeparentes. 332 00:17:17,390 --> 00:17:19,160 Så arrays er hakeparenteser. 333 00:17:19,160 --> 00:17:21,220 Tomme objekter er klammeparentes. 334 00:17:21,220 --> 00:17:24,020 God skille å ha. 335 00:17:24,020 --> 00:17:27,319 Og disse er bare to forskjellige måter å angi egenskaper. 336 00:17:27,319 --> 00:17:31,460 Så dette er slags mye mer av en måte som 337 00:17:31,460 --> 00:17:35,220 ligner på PHP, med vår assosiative matriser, med vår nøkkel, 338 00:17:35,220 --> 00:17:39,910 og vår verdi, mens denne ene er-- du 339 00:17:39,910 --> 00:17:41,920 ser dette mye mer i Javascript. 340 00:17:41,920 --> 00:17:43,550 Dette pleier å være konvensjonen. 341 00:17:43,550 --> 00:17:47,660 Og på samme måte som vi gjorde matrise to prikk lengde, er dette å si: 342 00:17:47,660 --> 00:17:51,580 "OK, gi meg dette attributt av dette objektet. " 343 00:17:51,580 --> 00:17:52,110 Høyre? 344 00:17:52,110 --> 00:17:55,660 Så på samme måte som det var som "gi meg attributtet lengden på rekke to, " 345 00:17:55,660 --> 00:17:59,970 dette sier, "gi meg noen egenskap av vår tomt objekt. " 346 00:17:59,970 --> 00:18:02,890 Eller i dette tilfellet, er vi tildele det til noen verdi her. 347 00:18:02,890 --> 00:18:06,200 Men du kan også få tilgang til det på den måten. 348 00:18:06,200 --> 00:18:09,090 >> Og så her dette er bare viser to ulike varsler. 349 00:18:09,090 --> 00:18:12,320 Så dette ville vise varslene ville være nøyaktig samme, 350 00:18:12,320 --> 00:18:17,150 det er bare to forskjellige måter tilgang til element som vi ønsker. 351 00:18:17,150 --> 00:18:19,552 Betyr det fornuftig for alle? 352 00:18:19,552 --> 00:18:21,510 Jeg føler at denne ene sannsynligvis gjør mer fornuftig, 353 00:18:21,510 --> 00:18:23,270 bare fordi vi kommer ut av PHP. 354 00:18:23,270 --> 00:18:26,400 Men som vi gjør flere eksempler, dette er bokstavelig talt den samme. 355 00:18:26,400 --> 00:18:28,170 Mye av det er bare å endre i syntaks. 356 00:18:28,170 --> 00:18:30,710 357 00:18:30,710 --> 00:18:33,030 >> OK, så eksempler. 358 00:18:33,030 --> 00:18:34,180 Jeg elsker eksempler. 359 00:18:34,180 --> 00:18:40,070 Så her er noen CS50 variabel som er en gjenstand, 360 00:18:40,070 --> 00:18:42,160 og vi lagrer alt dette informasjon om det. 361 00:18:42,160 --> 00:18:46,680 Så har vi selvfølgelig, instruktør, TFS, psets, og teipet. 362 00:18:46,680 --> 00:18:51,840 Så vi legger merke til disse er nesten alle av forskjellige typer. 363 00:18:51,840 --> 00:18:52,340 Høyre? 364 00:18:52,340 --> 00:18:56,230 Så objekter kan lagre attributter av forskjellige typer. 365 00:18:56,230 --> 00:19:01,220 Vi kan tenke på dette-- det er veldig lik vår assosiative array i PHP. 366 00:19:01,220 --> 00:19:07,470 Så nøkkel, verdi, nøkkel, verdi, nøkkel, verdi, så videre og så videre. 367 00:19:07,470 --> 00:19:11,230 Hva er også interessant på samme måte at vi kan ha arrays innenfor arrays, 368 00:19:11,230 --> 00:19:14,690 Vi kan også ha objekter innenfor gjenstander eller matriser innenfor objekter. 369 00:19:14,690 --> 00:19:18,410 Du aldri virkelig begrenset til bare en eneste ting. 370 00:19:18,410 --> 00:19:24,220 Vi kan få svært Inceptionesque, bare holde det gående ned kaninhullet der. 371 00:19:24,220 --> 00:19:26,080 >> Så hvis vi legger merke til, vi har noen kurs som 372 00:19:26,080 --> 00:19:31,120 er en streng, instruktør som er en streng, og array, en int, og en boolsk. 373 00:19:31,120 --> 00:19:36,110 Så alle disse forskjellige ting. 374 00:19:36,110 --> 00:19:39,600 >> Greit, så har vi en annen. 375 00:19:39,600 --> 00:19:42,930 Så i dette tilfellet, har vi en rekke objekter. 376 00:19:42,930 --> 00:19:45,320 Så akkurat som et objekt kan ha en rekke i den. 377 00:19:45,320 --> 00:19:47,210 Vi kan også ha en rekke objekter. 378 00:19:47,210 --> 00:19:51,250 Dette kan være nyttig for å tenke på lik slag 379 00:19:51,250 --> 00:19:54,260 av hvordan vi hadde en hash tabell, hadde vi en rekke 380 00:19:54,260 --> 00:19:56,220 av alle disse forskjellige typer structs som 381 00:19:56,220 --> 00:19:59,070 var pekere til forskjellige noder og whatnot. 382 00:19:59,070 --> 00:20:01,420 Men i dette tilfelle vil vi har en rekke gjenstander. 383 00:20:01,420 --> 00:20:04,890 Så dette er som en matrise av assosiative arrays. 384 00:20:04,890 --> 00:20:09,430 Så vi har noen første elementet ville være gjenstand med navnet James 385 00:20:09,430 --> 00:20:11,340 og huse Winthrop. 386 00:20:11,340 --> 00:20:14,780 >> Dere husker kanskje noe som er svært lik denne 387 00:20:14,780 --> 00:20:21,710 med din siste PSet, der hvis du trukket noe fra databasen, 388 00:20:21,710 --> 00:20:24,480 den første typen ting i ditt utvalg var 389 00:20:24,480 --> 00:20:27,110 all informasjon om den første brukeren som møtte det, 390 00:20:27,110 --> 00:20:30,765 og deretter måtte indeksen inn som for å få deres lager eller deres cache 391 00:20:30,765 --> 00:20:32,110 eller whatnot. 392 00:20:32,110 --> 00:20:34,620 Så dette er veldig mye det samme ting, bare en liten endring 393 00:20:34,620 --> 00:20:39,570 i syntaks, litt endring i ordene vi bruker for å beskrive dem. 394 00:20:39,570 --> 00:20:45,960 >> Så hvis vi ønsket, kan noen fortelle meg hva dette varselet ville gjøre her? 395 00:20:45,960 --> 00:20:48,780 Eller hva denne biten av kode ville gjøre for oss? 396 00:20:48,780 --> 00:20:50,992 397 00:20:50,992 --> 00:20:52,616 PUBLIKUM: Det vil gi deg alle navnene. 398 00:20:52,616 --> 00:20:54,900 ALLISON Buchholtz-AU: Høyre, så det ville bare varsle med alle navnene 399 00:20:54,900 --> 00:20:57,960 fordi det ville gå gjennom hytte i, så det ville starte på null. 400 00:20:57,960 --> 00:21:01,330 Så det vil si, OK vi leter ved denne første objekt, som 401 00:21:01,330 --> 00:21:03,210 er det første sporet i vår array. 402 00:21:03,210 --> 00:21:06,900 Og det sier, "gi meg attributt, navnet på dette objektet. " 403 00:21:06,900 --> 00:21:09,030 Så vi går her, ville vi scan, vi ville finne navn, 404 00:21:09,030 --> 00:21:11,340 og vi vil skrive ut James, Molly, og Carl. 405 00:21:11,340 --> 00:21:14,410 406 00:21:14,410 --> 00:21:15,799 Eventuelle spørsmål så langt? 407 00:21:15,799 --> 00:21:17,590 Javadessverre du kommer til å være 408 00:21:17,590 --> 00:21:20,950 gjør mye av å se opp på din egen, finne ut syntaksen, 409 00:21:20,950 --> 00:21:21,910 grappling med det. 410 00:21:21,910 --> 00:21:25,870 Men selvfølgelig er jeg alltid her, kontortid er alltid her. 411 00:21:25,870 --> 00:21:28,260 Jeg kan være på tirsdager denne uken. 412 00:21:28,260 --> 00:21:31,050 Så hvis du er der, kan du komme og besøke meg denne uken. 413 00:21:31,050 --> 00:21:32,470 Det ville være flott. 414 00:21:32,470 --> 00:21:36,260 >> OK, så DOM er Document-Object Model. 415 00:21:36,260 --> 00:21:38,900 Så dette er bare en måte at vi liker å tenke 416 00:21:38,900 --> 00:21:45,720 om hvordan vår HTML og alt innenfor den er organisert. 417 00:21:45,720 --> 00:21:49,930 Dette er svært mye noe vil trolig komme opp på quiz. 418 00:21:49,930 --> 00:21:58,150 Jeg vet at min år, var det som her er HTML-fil, fyll i DOM for det. 419 00:21:58,150 --> 00:21:59,770 Og du bare fylle ut småting. 420 00:21:59,770 --> 00:22:01,500 Disse bør være enkle poeng forhåpentligvis. 421 00:22:01,500 --> 00:22:03,450 Forhåpentligvis vil du see-- 422 00:22:03,450 --> 00:22:04,590 >> PUBLIKUM: [uhørbart] 423 00:22:04,590 --> 00:22:06,660 >> ALLISON Buchholtz-AU: So du se dette treet her? 424 00:22:06,660 --> 00:22:07,200 >> PUBLIKUM: Yeah. 425 00:22:07,200 --> 00:22:08,949 >> ALLISON Buchholtz-AU: Så de vil spørre bruk 426 00:22:08,949 --> 00:22:11,750 for å fylle ut det som går under kroppen. 427 00:22:11,750 --> 00:22:15,770 Kanskje under kroppen, har vi noen divs eller vi har noen avsnitt, 428 00:22:15,770 --> 00:22:19,160 og vi vil be deg om å fylle ut et tre veldig mye som dette. 429 00:22:19,160 --> 00:22:21,440 Så vi skal gå gjennom det. 430 00:22:21,440 --> 00:22:26,120 Så Document-objektet Modellen er bare en måte 431 00:22:26,120 --> 00:22:31,240 å strukturere og tenke om vår HTML grafisk. 432 00:22:31,240 --> 00:22:33,860 433 00:22:33,860 --> 00:22:35,840 Og også når vi får inn mer Javascript, 434 00:22:35,840 --> 00:22:37,640 det kommer til å være den måte at vi faktisk 435 00:22:37,640 --> 00:22:39,990 manipulere annerledes elementer på siden. 436 00:22:39,990 --> 00:22:43,980 Vi trenger en måte å få tilgang til hver av de tingene i vår HTML, 437 00:22:43,980 --> 00:22:48,050 og så dette gir oss en veldig betong standardisert måte 438 00:22:48,050 --> 00:22:51,010 på tvers av ulike websider for å gjøre det. 439 00:22:51,010 --> 00:22:53,440 >> Så hvis vi bare gå gjennom dette her, selvfølgelig 440 00:22:53,440 --> 00:22:56,790 vår dokumentet er som vår hele filen. 441 00:22:56,790 --> 00:22:59,350 Det gjør åpenbart fornuftig at det er den høyeste tingen, 442 00:22:59,350 --> 00:23:03,520 og da har vi våre faktiske HTML, som tilsvarer denne taggen her. 443 00:23:03,520 --> 00:23:08,480 Også hvis du i innrykk kodene dine ordentlig, så skaper dette DOM treet 444 00:23:08,480 --> 00:23:10,530 blir super enkelt. 445 00:23:10,530 --> 00:23:12,400 Så vi har litt hode her. 446 00:23:12,400 --> 00:23:15,780 Vi har noen kropp som vi ser stamme av av HTML, 447 00:23:15,780 --> 00:23:18,530 det er derfor vi har hode og kropp. 448 00:23:18,530 --> 00:23:22,880 Inne i hodet, har vi noen tittelen tag, en slutt tittelen tag, 449 00:23:22,880 --> 00:23:24,570 så vi vet at kommer etter hodet. 450 00:23:24,570 --> 00:23:28,040 Og innenfor vår tittelen tag, vi har hallo, verden. 451 00:23:28,040 --> 00:23:28,740 OK? 452 00:23:28,740 --> 00:23:31,311 Så det er dette hele venstre gren. 453 00:23:31,311 --> 00:23:34,060 Og deretter for høyre hånd gren her ser vi at vi har HTML, 454 00:23:34,060 --> 00:23:38,680 OK vi har gjort dette hodedelen, vi ser bare på kroppen, 455 00:23:38,680 --> 00:23:40,670 så vi har litt på kroppen. 456 00:23:40,670 --> 00:23:44,350 Og innen denne, er den eneste ting vi har er hallo, verden. 457 00:23:44,350 --> 00:23:45,090 OK? 458 00:23:45,090 --> 00:23:54,130 Hvis vi hadde ting som noen brakett p og deretter 459 00:23:54,130 --> 00:23:57,500 hallo, verden, og deretter en annen brakett p av farvel, verden, 460 00:23:57,500 --> 00:24:00,080 vi ville ha to bobler kommer ut av her. 461 00:24:00,080 --> 00:24:05,550 Fordi de er begge under kroppen, men de er separate avsnitt denne saken. 462 00:24:05,550 --> 00:24:11,520 Det er definitivt praksis på at i tidligere tester, 463 00:24:11,520 --> 00:24:14,570 samt rikelig online på det. 464 00:24:14,570 --> 00:24:18,260 OK så, bare lar dette oss se alt pent 465 00:24:18,260 --> 00:24:20,810 og manipulere ting veldig systematisk. 466 00:24:20,810 --> 00:24:21,340 OK? 467 00:24:21,340 --> 00:24:23,640 Vi vet nøyaktig hvordan de skal traversere gjennom dette treet, 468 00:24:23,640 --> 00:24:26,910 så vi vet hva vi vil ha tilgang til. 469 00:24:26,910 --> 00:24:31,690 >> OK, så dette er grunnen til at vi ønsker å ha denne form for modellen, 470 00:24:31,690 --> 00:24:35,190 slik at vi kan bruke ting som dette, og vi forstår hva de mener, 471 00:24:35,190 --> 00:24:38,370 og de er standardisert tvers av alle tingene som vi gjør. 472 00:24:38,370 --> 00:24:45,900 Så dokument dot tittelen er bare tittelen our-- alle disse 473 00:24:45,900 --> 00:24:48,960 er ganske selvforklarende, Jeg liker å tro. 474 00:24:48,960 --> 00:24:51,660 Så de tre første eksempler er bare å si: 475 00:24:51,660 --> 00:24:54,770 "OK, bare gi meg Tittelen på denne nettsiden. " 476 00:24:54,770 --> 00:24:58,030 Så det vil gi deg det tilsvarer tittelen. 477 00:24:58,030 --> 00:25:01,880 >> Dokument dot kroppen kommer til å gi deg alt innenfor de kropps koder. 478 00:25:01,880 --> 00:25:03,240 Så du kan manipulere det. 479 00:25:03,240 --> 00:25:07,820 Og dokument dot kroppen dot inn HTML er en veldig kul en, 480 00:25:07,820 --> 00:25:11,660 og kanskje er ikke sånn super intuitiv, men den indre HTML 481 00:25:11,660 --> 00:25:13,740 tilsvarer dette akkurat her. 482 00:25:13,740 --> 00:25:17,410 Så hvis du noen gang ønsker å manipulere teksten på en side, 483 00:25:17,410 --> 00:25:22,700 vanligvis du kommer til å gjøre noe med kroppen dot indre HTML. 484 00:25:22,700 --> 00:25:23,820 OK? 485 00:25:23,820 --> 00:25:31,341 Så indre HTML tendens til å referere til hva er egentlig mellom disse kodene. 486 00:25:31,341 --> 00:25:31,840 OK? 487 00:25:31,840 --> 00:25:33,020 Og deretter nyttige funksjoner. 488 00:25:33,020 --> 00:25:40,390 Så hvis du ønsket å få noen av disse, noe element, 489 00:25:40,390 --> 00:25:43,140 vi har noen Id, klasse navn eller kodenavn. 490 00:25:43,140 --> 00:25:47,100 Dette er svært lik ting vi gjorde med CSS, ikke sant? 491 00:25:47,100 --> 00:25:51,360 Hvor vi har noen velgere som tilsvarer enten en kode, en klasse 492 00:25:51,360 --> 00:25:53,800 at vi gir dem, eller en Id. 493 00:25:53,800 --> 00:25:55,310 Dette er svært mye på samme måte. 494 00:25:55,310 --> 00:26:00,720 Hvis du har noe som har noen klasse av hund, 495 00:26:00,720 --> 00:26:05,800 og du sier få elementer ved kodenavn, og du sette hunden i det-- eller lei, 496 00:26:05,800 --> 00:26:06,610 klassenavnet. 497 00:26:06,610 --> 00:26:07,770 Du kan sette prikken der. 498 00:26:07,770 --> 00:26:11,780 Det kommer til å returnere alle de elementer til dere som har denne klassen. 499 00:26:11,780 --> 00:26:13,880 Så du kan manipulere bare de. 500 00:26:13,880 --> 00:26:18,430 På samme måte, kanskje bare ønsker å manipulere noen header, så 501 00:26:18,430 --> 00:26:20,980 noen h1 header, som vi gjorde. 502 00:26:20,980 --> 00:26:24,900 Du kan gjøre få elementer etter tag navn, fordi h1 er et kodenavn. 503 00:26:24,900 --> 00:26:29,270 Og på samme måte, hvis du ønsker å få noen unike ting, kan du får tag. 504 00:26:29,270 --> 00:26:31,100 Få element av Id. 505 00:26:31,100 --> 00:26:32,710 Og de er faktisk mange av disse. 506 00:26:32,710 --> 00:26:36,300 Dette er bare som tre av veldig mange. 507 00:26:36,300 --> 00:26:39,600 Så hvis du går online, som Jeg kommer til å oppmuntre 508 00:26:39,600 --> 00:26:45,342 du skal gjøre, og gjøre noen forskning på egen hånd, 509 00:26:45,342 --> 00:26:48,450 Jeg anbefaler ser på alle disse. 510 00:26:48,450 --> 00:26:50,880 De kunne være super anvendelige, spesielt når 511 00:26:50,880 --> 00:26:57,180 du vil bare slags manipulere svært spesifikke ting uten å ha 512 00:26:57,180 --> 00:27:00,390 å gå gjennom og prøve å analysere ut alt. 513 00:27:00,390 --> 00:27:03,540 >> OK, så det siste er Javascript-hendelser. 514 00:27:03,540 --> 00:27:10,730 Så når jeg snakket tidligere om å gå inn på en nettside, 515 00:27:10,730 --> 00:27:14,340 og når du holder over noe, eller musen svever over noe, 516 00:27:14,340 --> 00:27:15,420 noe annet skjer. 517 00:27:15,420 --> 00:27:17,900 Dette er hva vi ønsker å tenke på som en hendelse. 518 00:27:17,900 --> 00:27:23,970 Så det vi har som kanskje være nyttig her er onclick. 519 00:27:23,970 --> 00:27:29,140 Så min var på hover, som jeg er ganske sikker på, er bare på hover. 520 00:27:29,140 --> 00:27:31,300 Også massevis av disse som du kan se etter. 521 00:27:31,300 --> 00:27:34,340 Det er en hel liste på nettet av de forskjellige tingene 522 00:27:34,340 --> 00:27:37,130 at du kan lytte til. 523 00:27:37,130 --> 00:27:41,220 >> Men Javascript-hendelser er utgangspunktet bare å svare på ting 524 00:27:41,220 --> 00:27:42,430 at brukeren gjør. 525 00:27:42,430 --> 00:27:42,930 Høyre? 526 00:27:42,930 --> 00:27:45,220 Så din bruker gjør noe, er at en hendelse, 527 00:27:45,220 --> 00:27:48,340 og Javascript vil svare men du vil at det skal. 528 00:27:48,340 --> 00:27:49,770 Det vil reagere deretter. 529 00:27:49,770 --> 00:27:54,630 Så i dette tilfellet, har vi noen vinduet dot onload. 530 00:27:54,630 --> 00:27:57,170 Så hva dette sier er, "vente inntil vinduets lastet. " 531 00:27:57,170 --> 00:27:57,780 OK? 532 00:27:57,780 --> 00:28:02,102 Så når alt er lastet, onload, så kan du utføre denne funksjonen. 533 00:28:02,102 --> 00:28:03,810 Så når alt er lastet, du kommer 534 00:28:03,810 --> 00:28:07,760 å ha noen søk-knappen som får et element av Id, 535 00:28:07,760 --> 00:28:13,740 og det skrives hva som element er som på Søk-knappen. 536 00:28:13,740 --> 00:28:17,050 Og så har vi denne variabelen, vi sier, "OK, onclick." 537 00:28:17,050 --> 00:28:20,390 Så når vi hører et klikk på Søk-knappen, 538 00:28:20,390 --> 00:28:23,990 utføre denne funksjon, som er en varsling, klikket du på Søk-knappen. 539 00:28:23,990 --> 00:28:28,910 >> Så hva skjer er-- dette er en fin lite grafisk representasjon her. 540 00:28:28,910 --> 00:28:31,480 Så våre dokument belastninger, det er vår onload, 541 00:28:31,480 --> 00:28:34,340 vi finner vår søk knappen, som er dette. 542 00:28:34,340 --> 00:28:36,570 Vi leter etter vår søkeknappen. 543 00:28:36,570 --> 00:28:40,790 Og så når på Søk-knappen er klikket, tilsvarer det akkurat her. 544 00:28:40,790 --> 00:28:41,980 Onclick. 545 00:28:41,980 --> 00:28:47,300 Da vi endelig varsle vår bruker, som er denne siste linjen her. 546 00:28:47,300 --> 00:28:48,250 OK? 547 00:28:48,250 --> 00:28:52,960 Slik at hver av de fire trinnene bare svarer til de fire boksene 548 00:28:52,960 --> 00:28:55,031 der nede på bunnen. 549 00:28:55,031 --> 00:28:56,405 Betyr det fornuftig for alle? 550 00:28:56,405 --> 00:29:01,120 551 00:29:01,120 --> 00:29:05,200 >> Og så en ting som jeg bare kommer å nevne veldig, veldig kort, at jeg 552 00:29:05,200 --> 00:29:08,660 oppfordre dere til gå nærmere inn er 553 00:29:08,660 --> 00:29:13,210 jQuery, som ligger bare et bibliotek som er bygget på toppen av Javascript. 554 00:29:13,210 --> 00:29:16,480 Det er super nyttig, som med de fleste biblioteker. 555 00:29:16,480 --> 00:29:18,320 Det er mange funksjoner. 556 00:29:18,320 --> 00:29:21,930 Så hvis det er stadig noe som du ønsker å gjøre i Javascript, 557 00:29:21,930 --> 00:29:24,880 ditt første instinkt bør ikke være til å tenke 558 00:29:24,880 --> 00:29:27,340 av, burde "hvilken funksjon Jeg kode? "Det skal være, 559 00:29:27,340 --> 00:29:29,560 "La meg se noens allerede gjort dette for meg. " 560 00:29:29,560 --> 00:29:32,800 Fordi ni av ti ganger, noen vil ha gjort det allerede, 561 00:29:32,800 --> 00:29:35,760 og de sannsynligvis ha gjort det bedre. 562 00:29:35,760 --> 00:29:39,990 Folk bruker mye tid på å gjøre disse, og Javascript er veldig mye brukt, 563 00:29:39,990 --> 00:29:42,810 slik at folk er stadig prøver å gjøre det bedre. 564 00:29:42,810 --> 00:29:47,110 Og jQuery har mange funksjoner som trolig vil være nyttig for deg 565 00:29:47,110 --> 00:29:50,470 i det endelige prosjektet hvis du er gjør noe med webdesign. 566 00:29:50,470 --> 00:29:53,480 Som jeg liker å si, "arbeid smartere, ikke hardere. " 567 00:29:53,480 --> 00:29:57,130 Hvis dere gjør det, vil det være stor. 568 00:29:57,130 --> 00:30:00,330 Når vi er på hackathon jeg gjør ikke ønsker du å være alt stresset ut. 569 00:30:00,330 --> 00:30:03,600 Jeg vil at du skal være som "Jeg fikk dette. jQuery må jo ryggen min. 570 00:30:03,600 --> 00:30:05,790 Jeg trenger ikke å skrive disse funksjonene. " 571 00:30:05,790 --> 00:30:07,636 >> Så bare to ting til husk, jeg kommer 572 00:30:07,636 --> 00:30:10,220 å la dere se mer inn jQuery på egen hånd. 573 00:30:10,220 --> 00:30:13,070 Alt jeg kommer til å si er det gjør noen ganske utrolige ting 574 00:30:13,070 --> 00:30:15,220 og kan gjøre livet ditt hele mye enklere. 575 00:30:15,220 --> 00:30:17,150 Men hva du vil har er uansett fil 576 00:30:17,150 --> 00:30:21,020 at du skal bruke den til, du kommer til å ønske disse to linjene. 577 00:30:21,020 --> 00:30:25,630 Du kommer til å ønske den manus av js jQuery dot js. 578 00:30:25,630 --> 00:30:28,500 Og faktisk din kilde kommer til å være noen URL. 579 00:30:28,500 --> 00:30:35,870 Hvis du Google jQuery, Google faktisk vert alle filene for deg. 580 00:30:35,870 --> 00:30:38,950 Så du definitivt ønsker å innspill som URL i stedet. 581 00:30:38,950 --> 00:30:41,130 Jeg bare sette dette her for enkelhets skyld. 582 00:30:41,130 --> 00:30:45,180 Alt dette betyr er hvor du skal finne din jQuery biblioteket. 583 00:30:45,180 --> 00:30:48,600 Det er massiv, slik at du ikke vil ha å legge den ut på din egen datamaskin 584 00:30:48,600 --> 00:30:53,390 hvis du kan unngå det, det er derfor vi tendens til å bare sette i Googles URL som 585 00:30:53,390 --> 00:30:55,880 vert alle disse filene for deg. 586 00:30:55,880 --> 00:30:56,380 OK? 587 00:30:56,380 --> 00:30:58,850 Du Google det, jeg lover det vil være der. 588 00:30:58,850 --> 00:31:01,200 >> Og så uansett Javascript-fil som du er 589 00:31:01,200 --> 00:31:07,150 bruker, så dette er bare noen ekstern Javascript-fil som du bruker. 590 00:31:07,150 --> 00:31:11,570 På samme måte som vi lenker til våre CSS filer, er dette den samme typen ting. 591 00:31:11,570 --> 00:31:15,480 Dette kobler bare til filen hvor Javascript er. 592 00:31:15,480 --> 00:31:18,970 Og jeg har noen eksempler med enkel Javascript. 593 00:31:18,970 --> 00:31:20,220 Så vi kommer gjennom det. 594 00:31:20,220 --> 00:31:27,230 Og deretter i indeksen Javascript, som er din Javascript-fil her, 595 00:31:27,230 --> 00:31:30,900 dette er slags wrapper at du har for jQuery. 596 00:31:30,900 --> 00:31:33,860 Du er nesten 99,9 prosent av tiden går 597 00:31:33,860 --> 00:31:36,800 å ha dette i din index.js fil. 598 00:31:36,800 --> 00:31:40,010 Fordi hva dette sier er, "Ikke utføre noe 599 00:31:40,010 --> 00:31:43,480 inntil dokumentet er faktisk klar ", som er akkurat det du ønsker. 600 00:31:43,480 --> 00:31:46,600 Fordi hvis dokumentet er ikke klar, og jQuery begynner å gjøre ting på, 601 00:31:46,600 --> 00:31:48,020 det er bare et rot. 602 00:31:48,020 --> 00:31:50,480 Så du alltid vil ha denne wrapper. 603 00:31:50,480 --> 00:31:55,760 Og så for ting som går inn der, jeg skal overlate til dine gutta 'egen perusing. 604 00:31:55,760 --> 00:32:04,610 >> OK, så er det noe du lurer rett nå om Javascript generelt? 605 00:32:04,610 --> 00:32:07,420 Eller DOM-modellen? 606 00:32:07,420 --> 00:32:10,780 Hvis ikke, har vi noen kule eksempler på at vi kan gå gjennom, 607 00:32:10,780 --> 00:32:13,120 at dere kan hjelpe meg kode. 608 00:32:13,120 --> 00:32:15,877 Men jeg er også tenkt å være super fin, og hvis du 609 00:32:15,877 --> 00:32:17,960 ønsker ikke å si noe for disse, er det helt greit. 610 00:32:17,960 --> 00:32:20,510 Jeg kan også bare gi deg eksempler. 611 00:32:20,510 --> 00:32:24,581 Men noe på PowerPoint før vi går videre? 612 00:32:24,581 --> 00:32:25,080 Cool. 613 00:32:25,080 --> 00:32:26,990 >> Jeg føler at dere trenger til energi. 614 00:32:26,990 --> 00:32:31,516 Så jeg tror vi kommer til å begynne med mitt parti eksempel først. 615 00:32:31,516 --> 00:32:33,390 Vi har tre eksempler, du har ditt valg. 616 00:32:33,390 --> 00:32:37,720 Så vi har klokke, hvor vi går å gjennomføre en faktisk klokke som er 617 00:32:37,720 --> 00:32:41,430 kommer til å oppdatere etter som tiden går. 618 00:32:41,430 --> 00:32:43,310 Vi har denne flotte Twitter funksjon. 619 00:32:43,310 --> 00:32:44,560 Dette-- vet du hva, holde på. 620 00:32:44,560 --> 00:32:47,220 Vi kommer til å gjøre dette gå unna. 621 00:32:47,220 --> 00:32:47,950 Bam. 622 00:32:47,950 --> 00:32:49,060 OK. 623 00:32:49,060 --> 00:32:56,132 >> Vi har denne store Twitter-funksjon her, at-- jeg vet, ikke sant? 624 00:32:56,132 --> 00:32:57,090 Det kommer til å være stor. 625 00:32:57,090 --> 00:32:58,350 Er dere spent? 626 00:32:58,350 --> 00:33:01,170 Det kommer til å telle antallet tegn som du har igjen, 627 00:33:01,170 --> 00:33:04,520 så hvis jeg skriver akkurat nå, tydeligvis det fortsatt står 140, 628 00:33:04,520 --> 00:33:06,190 men vi vet at det er ikke tilfelle. 629 00:33:06,190 --> 00:33:08,570 Og deretter med vår siste her, kan du klikke her for å feste. 630 00:33:08,570 --> 00:33:12,150 Hva kommer til å skje er når vi klikker, bakgrunnen er 631 00:33:12,150 --> 00:33:13,340 kommer til å endre farger. 632 00:33:13,340 --> 00:33:17,060 Så dere har dine alternativer av hvilken du ønsker å gjøre først. 633 00:33:17,060 --> 00:33:19,800 Jeg lover at jeg skal ta det veldig enkelt for deg. 634 00:33:19,800 --> 00:33:22,680 Jeg føler at alle er snille av bare svært lav nøkkel i dag. 635 00:33:22,680 --> 00:33:25,540 Så jeg vil gå gjennom hvordan vi vil gjennomføre alle disse. 636 00:33:25,540 --> 00:33:28,520 Hvis du ønsker å kiming i, det er flott, men jeg 637 00:33:28,520 --> 00:33:30,020 føler at alle er litt sliten. 638 00:33:30,020 --> 00:33:32,970 Så jeg skal bare gå deg gjennom disse eksempler. 639 00:33:32,970 --> 00:33:35,015 Har vi noe som vi ønsker å gjøre først? 640 00:33:35,015 --> 00:33:38,140 641 00:33:38,140 --> 00:33:39,475 Anyone? 642 00:33:39,475 --> 00:33:41,350 Ingen preferanse? 643 00:33:41,350 --> 00:33:41,867 OK. 644 00:33:41,867 --> 00:33:42,450 Vet du hva? 645 00:33:42,450 --> 00:33:43,290 Vi er på fest. 646 00:33:43,290 --> 00:33:48,380 Jeg føler at dere trenger en little-- I så fall vil vi gjøre partiet først. 647 00:33:48,380 --> 00:33:48,880 OK. 648 00:33:48,880 --> 00:33:51,470 649 00:33:51,470 --> 00:33:56,930 >> Så det vi har her-- som er ikke ment å være der. 650 00:33:56,930 --> 00:33:57,910 Nå er det bra. 651 00:33:57,910 --> 00:33:59,810 OK. 652 00:33:59,810 --> 00:34:03,110 Så det vi har her er bare en enkel HTML-side 653 00:34:03,110 --> 00:34:07,840 at dere bør alle være super kjenner fra dine to siste psets. 654 00:34:07,840 --> 00:34:10,212 vi har vår doc typen her. 655 00:34:10,212 --> 00:34:10,920 Alle kan se? 656 00:34:10,920 --> 00:34:11,420 OK. 657 00:34:11,420 --> 00:34:12,560 Cool. 658 00:34:12,560 --> 00:34:13,900 Vi har vår HTML åpenbart. 659 00:34:13,900 --> 00:34:18,360 Vi har noen header som er knyttet til et stilark som 660 00:34:18,360 --> 00:34:21,420 bare gjort min skrift fin og stor og fet. 661 00:34:21,420 --> 00:34:23,489 Så ikke bekymre deg for det. 662 00:34:23,489 --> 00:34:26,437 >> Vi har noen kropp med en Id bakgrunn, OK? 663 00:34:26,437 --> 00:34:28,520 Fordi vi kommer til å være endring av bakgrunnen. 664 00:34:28,520 --> 00:34:31,964 Så når vi endrer bakgrunn av vår kropp, 665 00:34:31,964 --> 00:34:35,965 vi husker fra to uker siden når vi har å gjøre med nettsider. 666 00:34:35,965 --> 00:34:36,840 Så godt å ha det. 667 00:34:36,840 --> 00:34:39,270 Og vi har noen Id lik fest. 668 00:34:39,270 --> 00:34:43,909 Dette h ref pund betyr bare at det kommer til å gå til samme side. 669 00:34:43,909 --> 00:34:47,120 Og klikk her for å feste, som er grunnen til at når vi klikker på den, 670 00:34:47,120 --> 00:34:48,940 det bør endre farger, heldigvis. 671 00:34:48,940 --> 00:34:54,322 >> Og så har vi noen script her som er nettopp knyttet til dette partiet dot js 672 00:34:54,322 --> 00:34:58,100 fil, som er tomt fordi vi har ikke gjort noe ennå. 673 00:34:58,100 --> 00:35:00,450 Og det er så trist. 674 00:35:00,450 --> 00:35:06,100 Men ganske snart, vil det endre farger, og det vil være fantastisk. 675 00:35:06,100 --> 00:35:10,520 >> Så jeg skal bare gå dere gjennom hvordan vi kan nærme seg dette. 676 00:35:10,520 --> 00:35:14,030 Så det første som vi kanskje ønsker å gjøre, 677 00:35:14,030 --> 00:35:18,050 hvis vi endrer bakgrunn av kroppen, det første vi vil kanskje 678 00:35:18,050 --> 00:35:22,730 å gjøre er å faktisk ta tak hva kroppen er, ikke sant? 679 00:35:22,730 --> 00:35:27,690 Så vi ønsker å ha sum, vår bakgrunn, og hvis du legger merke til, 680 00:35:27,690 --> 00:35:29,567 Jeg bare automatisk bare begynne å skrive. 681 00:35:29,567 --> 00:35:32,400 Det er ikke noe spesielt at vi trenger å gjøre for våre Javascript-filer. 682 00:35:32,400 --> 00:35:35,820 Jeg kan begynne å erklære variabler, og erklære tilfeldige funksjoner. 683 00:35:35,820 --> 00:35:38,110 Og det er mye mer fri form. 684 00:35:38,110 --> 00:35:41,930 Det er som med C, ga vi dere alle disse harde regler, og du vokste opp, 685 00:35:41,930 --> 00:35:43,220 så vi er like, "gå videre. 686 00:35:43,220 --> 00:35:44,000 Være gratis. 687 00:35:44,000 --> 00:35:44,870 Gjør hva du vil. " 688 00:35:44,870 --> 00:35:46,280 Og det er hva Javascript er. 689 00:35:46,280 --> 00:35:48,390 Så vi har litt bakgrunn her. 690 00:35:48,390 --> 00:35:55,900 Med vår DOM-modellen, vet vi at vi kan gjøre dokumentet dot få element, 691 00:35:55,900 --> 00:36:00,290 og hvis vi oppdager her, Kroppen vår har en Id. 692 00:36:00,290 --> 00:36:00,930 Høyre? 693 00:36:00,930 --> 00:36:06,310 Slik at vi kan får dokumentet ved Id, og her er en enkel en. 694 00:36:06,310 --> 00:36:08,295 Hva er vår Id at vi ønsker her? 695 00:36:08,295 --> 00:36:09,170 PUBLIKUM: Bakgrunn. 696 00:36:09,170 --> 00:36:11,280 ALLISON Buchholtz-AU: Bakgrunn. 697 00:36:11,280 --> 00:36:12,230 Perfekt. 698 00:36:12,230 --> 00:36:14,250 Og semikolon på slutten. 699 00:36:14,250 --> 00:36:15,610 Det har ikke gått bort enda. 700 00:36:15,610 --> 00:36:17,330 Du må fortsatt dine semikolon. 701 00:36:17,330 --> 00:36:17,830 OK. 702 00:36:17,830 --> 00:36:19,690 Så det er vår første. 703 00:36:19,690 --> 00:36:23,880 Og når vi klikker noe, vi ønsker at noe skal skje, ikke sant? 704 00:36:23,880 --> 00:36:28,270 Så vi vil kanskje noen variable som venter på et klikk. 705 00:36:28,270 --> 00:36:32,410 Hva vi skal gjøre er vi kommer til å gjøre vår link ligner mer på en knapp. 706 00:36:32,410 --> 00:36:43,140 Så vi kommer til å ha noen knapp som tilsvarer dokumentere dot få element av Id. 707 00:36:43,140 --> 00:36:48,670 Og hvis jeg snakker om Klikk på linken eller klikk her for å feste 708 00:36:48,670 --> 00:36:51,850 link, hva kan min Id være her? 709 00:36:51,850 --> 00:36:52,590 Fest. 710 00:36:52,590 --> 00:36:55,200 Riktig. 711 00:36:55,200 --> 00:36:56,500 OK ikke så ille så langt. 712 00:36:56,500 --> 00:36:59,060 Alle få det vi gjør? 713 00:36:59,060 --> 00:37:02,100 >> OK, så nå har vi vår knappen, og vi ønsker 714 00:37:02,100 --> 00:37:04,140 ting å endre seg når vi klikker på den. 715 00:37:04,140 --> 00:37:08,750 Så hvis vi husker fra vår PowerPoint, veldig enkel ting vi kan gjøre 716 00:37:08,750 --> 00:37:12,140 er bare knapp dot onclick, ikke sant? 717 00:37:12,140 --> 00:37:14,750 718 00:37:14,750 --> 00:37:18,730 Og det kommer til å like noen funksjon. 719 00:37:18,730 --> 00:37:20,620 Dette er en anonym funksjon. 720 00:37:20,620 --> 00:37:24,620 Og dette bare as-- faktisk jeg er kommer til å gjøre dette til en litt større. 721 00:37:24,620 --> 00:37:27,330 >> Så det jeg gjorde her er jeg sier, OK, 722 00:37:27,330 --> 00:37:31,810 når vi klikker vår knappen, som er denne linken som vi bare referert til, 723 00:37:31,810 --> 00:37:34,270 vi kommer til å kjøre denne anonyme funksjon. 724 00:37:34,270 --> 00:37:35,845 Vi trenger ikke noen innganger. 725 00:37:35,845 --> 00:37:37,220 Vi bryr oss ikke hva brukeren sier. 726 00:37:37,220 --> 00:37:38,800 Når de klikker på det, vi er kommer til å gjøre hva vi vil, 727 00:37:38,800 --> 00:37:40,660 som er endre bakgrunnsfargen. 728 00:37:40,660 --> 00:37:42,640 OK? 729 00:37:42,640 --> 00:37:47,224 Så det er derfor vi ikke har noen innganger, vi bare har denne anonyme funksjon. 730 00:37:47,224 --> 00:37:49,390 Og nå er vi faktisk kommer å skrive denne funksjonen. 731 00:37:49,390 --> 00:37:55,040 >> Så det er en haug av måter du kunne generere en tilfeldig farge. 732 00:37:55,040 --> 00:37:59,010 Måten jeg gjorde det var å generere tre tilfeldige tall 733 00:37:59,010 --> 00:38:01,910 og konvertere dem til et RGB trippel. 734 00:38:01,910 --> 00:38:06,130 Så dette bare viser deg noen kule ting som hvis du er som, "oh, 735 00:38:06,130 --> 00:38:08,464 Jeg trenger å generere en tilfeldig nummer. "hvis du googlet det, 736 00:38:08,464 --> 00:38:09,630 Dette er hva du ville finne. 737 00:38:09,630 --> 00:38:17,580 >> Så vi har tre forskjellige ting, Var, ikke rødt igjen, grønn. 738 00:38:17,580 --> 00:38:18,080 Høyre? 739 00:38:18,080 --> 00:38:20,740 Så de er de tre ting som utgjør en farge. 740 00:38:20,740 --> 00:38:22,220 Blå, rød og grønn. 741 00:38:22,220 --> 00:38:22,960 Cool. 742 00:38:22,960 --> 00:38:27,050 Og hva vi kan gjøre er at vi vet at det må være mellom 255, 743 00:38:27,050 --> 00:38:30,140 og hvis du så opp noen random number generator, 744 00:38:30,140 --> 00:38:36,000 du kan få noe som matematikk dot tilfeldig, som hvis du ser dette opp 745 00:38:36,000 --> 00:38:39,230 vender tilbake til et antall mellom null og en. 746 00:38:39,230 --> 00:38:39,980 OK? 747 00:38:39,980 --> 00:38:44,470 Og hva tallene gjør vårt RGB tredobler gå mellom? 748 00:38:44,470 --> 00:38:47,240 Zero og hva? 749 00:38:47,240 --> 00:38:49,000 Hva kan de gå opp til? 750 00:38:49,000 --> 00:38:49,950 255. 751 00:38:49,950 --> 00:38:53,320 Så hvis matematikk dot tilfeldig går mellom null og én, 752 00:38:53,320 --> 00:38:56,365 hvordan kan vi ønsker å konvertere dette? 753 00:38:56,365 --> 00:38:56,990 PUBLIKUM: Time? 754 00:38:56,990 --> 00:38:57,830 ALLISON Buchholtz-AU: Ja, akkurat. 755 00:38:57,830 --> 00:38:58,677 Så tiden er 255. 756 00:38:58,677 --> 00:39:00,888 >> PUBLIKUM: [uhørbart] Det er som [uhørbart]. 757 00:39:00,888 --> 00:39:02,471 ALLISON Buchholtz-AU: Math dot tilfeldig. 758 00:39:02,471 --> 00:39:03,096 PUBLIKUM: Cool. 759 00:39:03,096 --> 00:39:04,580 ALLISON Buchholtz-AU: Ja. 760 00:39:04,580 --> 00:39:06,300 Java tar bare vare på deg. 761 00:39:06,300 --> 00:39:07,580 OK. 762 00:39:07,580 --> 00:39:09,360 Så vi kan gjøre det for alle disse. 763 00:39:09,360 --> 00:39:10,540 Høyre? 764 00:39:10,540 --> 00:39:16,480 Math dot tilfeldige ganger 255. 765 00:39:16,480 --> 00:39:17,740 Kopiere det. 766 00:39:17,740 --> 00:39:18,820 Cool. 767 00:39:18,820 --> 00:39:23,350 Så ting er, kan dette ikke returnere et heltall. 768 00:39:23,350 --> 00:39:24,080 Høyre? 769 00:39:24,080 --> 00:39:26,450 Kanskje vi får noen tall mellom null og en, 770 00:39:26,450 --> 00:39:32,150 og det fører til at det skal være lett off, og våre RGBS kan ikke være flyter. 771 00:39:32,150 --> 00:39:33,360 De trenger å være ints. 772 00:39:33,360 --> 00:39:37,610 Så hvis du har prøvd dette, ville det sannsynligvis har litt uberegnelig oppførsel. 773 00:39:37,610 --> 00:39:38,810 Det ville være litt funky. 774 00:39:38,810 --> 00:39:43,200 Så det vi gjør er at vi ønsker å gjøre sikker på at disse er avrundet, 775 00:39:43,200 --> 00:39:45,400 og du kan runde uansett. 776 00:39:45,400 --> 00:39:47,110 Jeg rundet med gulvet. 777 00:39:47,110 --> 00:39:49,680 Så jeg alltid sørget at det rundet ned. 778 00:39:49,680 --> 00:39:54,440 Men å gå ut av hvor enkelt det var å bare få et tilfeldig tall, 779 00:39:54,440 --> 00:39:57,920 hvordan tror du vi kanskje gulvet dette nummeret? 780 00:39:57,920 --> 00:40:00,720 Det er svært lik. 781 00:40:00,720 --> 00:40:02,810 Noen ide? 782 00:40:02,810 --> 00:40:06,450 Så hvis tilfeldig var bare matematikk dot tilfeldig, så tror du vi ville gjøre gulvet? 783 00:40:06,450 --> 00:40:09,670 Math dot gulvet. 784 00:40:09,670 --> 00:40:11,340 Og du kan også gjøre matte dot tak. 785 00:40:11,340 --> 00:40:14,030 Runde er slags tvetydig fordi du ikke 786 00:40:14,030 --> 00:40:16,110 vite om å runde opp eller avrunde nedover. 787 00:40:16,110 --> 00:40:20,797 Så typisk vi alltid gjøre matte dot gulv, matte dot tak. 788 00:40:20,797 --> 00:40:21,380 Men honestly-- 789 00:40:21,380 --> 00:40:22,780 >> PUBLIKUM: Har gulvet runde ned? 790 00:40:22,780 --> 00:40:24,740 >> ALLISON Buchholtz-AU: Gulv runder ned. 791 00:40:24,740 --> 00:40:26,990 Og det er bare et valg for min del. 792 00:40:26,990 --> 00:40:32,370 >> Så nå har vi våre tre tall som har blitt tilfeldig generert, 793 00:40:32,370 --> 00:40:36,610 og hva vi skal gjøre nå er at vi er bare kommer til å endre bakgrunnen. 794 00:40:36,610 --> 00:40:37,310 OK? 795 00:40:37,310 --> 00:40:41,490 Så vi allerede har vår bakgrunn slags lagret 796 00:40:41,490 --> 00:40:43,280 i dette elementet kalles bakgrunn. 797 00:40:43,280 --> 00:40:47,300 Så hva du vil legge merke til er, hvis du spilte rundt med dette, 798 00:40:47,300 --> 00:40:50,460 vi ønsker å endre stilen. 799 00:40:50,460 --> 00:40:53,812 Og dette er slags noe som du ville Google og finne ut, 800 00:40:53,812 --> 00:40:55,020 liker hvordan å endre fargen. 801 00:40:55,020 --> 00:40:59,210 >> Men måten du tilgang til denne fargen er bakgrunn dot stil dot bakgrunn. 802 00:40:59,210 --> 00:41:03,490 Så dette er å si gitt dette formål bakgrunn 803 00:41:03,490 --> 00:41:06,920 som viser til at element Id der oppe, 804 00:41:06,920 --> 00:41:10,690 vi kommer til å se på stil innen stilen, 805 00:41:10,690 --> 00:41:13,280 vi kommer til å se på bakgrunnen. 806 00:41:13,280 --> 00:41:14,270 OK? 807 00:41:14,270 --> 00:41:17,630 Og hvis du går og ser dette opp, det kan gjøre litt mer fornuftig, 808 00:41:17,630 --> 00:41:21,930 men dette er i utgangspunktet bare si: "Gi meg dette svært spesifikk attributt 809 00:41:21,930 --> 00:41:25,770 av det jeg har definert tidligere. " 810 00:41:25,770 --> 00:41:32,340 Så det vi endrer det til er noen RGB, fordi det er fornuftig. 811 00:41:32,340 --> 00:41:34,780 Vi bruker RGB tripler, ikke sant? 812 00:41:34,780 --> 00:41:41,530 Og vi have-- jeg ønsker å sørge for at jeg få riktig antall sitater i her. 813 00:41:41,530 --> 00:41:43,940 Så det vi gjør er at vi har RGB, og vi kommer 814 00:41:43,940 --> 00:41:46,800 to-- dette er som sammensetning, som er rød. 815 00:41:46,800 --> 00:41:50,030 816 00:41:50,030 --> 00:41:52,610 Og da vi ønsker noen komma. 817 00:41:52,610 --> 00:41:59,925 Og da vi ønsker pluss grønn, så noen komma, og noen blå. 818 00:41:59,925 --> 00:42:10,640 819 00:42:10,640 --> 00:42:14,120 >> Så disse plusser bare mener som sammensetning. 820 00:42:14,120 --> 00:42:19,810 Så dette er bare å lage dette strengen som kommer innenfor RGB. 821 00:42:19,810 --> 00:42:20,310 OK? 822 00:42:20,310 --> 00:42:23,200 823 00:42:23,200 --> 00:42:26,684 >> PUBLIKUM: [uhørlig] pluss deretter det grønne et pluss da det røde. 824 00:42:26,684 --> 00:42:30,163 >> ALLISON Buchholtz-AU: Ja, fordi jeg rotet det opp. 825 00:42:30,163 --> 00:42:30,890 At ens fine. 826 00:42:30,890 --> 00:42:32,110 Oh, hold på. 827 00:42:32,110 --> 00:42:32,610 Nei. 828 00:42:32,610 --> 00:42:36,770 Fordi jeg trenger å være sikker at jeg fikk alle disse rett. 829 00:42:36,770 --> 00:42:39,680 830 00:42:39,680 --> 00:42:43,950 Så jeg vil forklare i uno momento. 831 00:42:43,950 --> 00:42:47,040 Grønn, blå, perfekt. 832 00:42:47,040 --> 00:42:47,971 Nå er jeg ferdig. 833 00:42:47,971 --> 00:42:48,470 Jeg tror. 834 00:42:48,470 --> 00:42:51,570 835 00:42:51,570 --> 00:42:52,530 >> OK. 836 00:42:52,530 --> 00:42:58,085 Så hva dette er, er at bakgrunnen kommer til å bli satt til noen streng. 837 00:42:58,085 --> 00:42:58,585 Høyre? 838 00:42:58,585 --> 00:42:59,710 Som er det vi har her. 839 00:42:59,710 --> 00:43:05,870 Det kommer til å være noen RGB 255 komma 255 komma null, eller hva nummeret du 840 00:43:05,870 --> 00:43:06,512 har der. 841 00:43:06,512 --> 00:43:08,220 Så vi gjør her, vi har litt streng. 842 00:43:08,220 --> 00:43:11,910 Og hva vi ønsker å gjøre, er at vi er slags dynamisk skape 843 00:43:11,910 --> 00:43:14,010 at når vi faktisk kjøre dette programmet. 844 00:43:14,010 --> 00:43:16,570 Så dette er litt streng. 845 00:43:16,570 --> 00:43:20,290 Pluss Setter sammen det med verdien som røde har, 846 00:43:20,290 --> 00:43:23,320 som kjeder sammen det med en komma, som kjeder sammen det 847 00:43:23,320 --> 00:43:26,090 med hva grønn er, og så videre, og så videre. 848 00:43:26,090 --> 00:43:26,660 OK? 849 00:43:26,660 --> 00:43:32,210 Helt til slutten, som er den lukke parentes av denne RGB her. 850 00:43:32,210 --> 00:43:32,800 OK? 851 00:43:32,800 --> 00:43:37,230 >> Så hva dette kommer til å generere er noen kommando virkelig 852 00:43:37,230 --> 00:43:42,770 som er RGB av tre tall at bakgrunnen er nå satt til. 853 00:43:42,770 --> 00:43:43,940 OK? 854 00:43:43,940 --> 00:43:46,510 Så la oss se om dette fungerer. 855 00:43:46,510 --> 00:43:49,720 Jeg håper det gjør det, fordi hvis det ikke, jeg kommer til å være ekte trist. 856 00:43:49,720 --> 00:43:50,250 Oh no. 857 00:43:50,250 --> 00:43:52,710 OK, hold på. 858 00:43:52,710 --> 00:43:56,730 Definitivt bakgrunn dot stil dot bakgrunn. 859 00:43:56,730 --> 00:43:59,569 Jeg er definitivt mangler noe bare små. 860 00:43:59,569 --> 00:44:00,610 Har ikke dere hater det? 861 00:44:00,610 --> 00:44:04,020 Når det er bare en liten liten feil? 862 00:44:04,020 --> 00:44:04,990 Allmektige bakgrunn. 863 00:44:04,990 --> 00:44:08,391 864 00:44:08,391 --> 00:44:08,890 RGB. 865 00:44:08,890 --> 00:44:09,765 >> PUBLIKUM: [uhørbart] 866 00:44:09,765 --> 00:44:11,729 867 00:44:11,729 --> 00:44:12,770 ALLISON Buchholtz-AU: Nei. 868 00:44:12,770 --> 00:44:14,050 Jeg prøvde dette før klassen. 869 00:44:14,050 --> 00:44:16,570 Jeg har alt jeg gjorde før klasse i tilfelle var jeg liker, 870 00:44:16,570 --> 00:44:17,970 "Vent, hva gjorde jeg galt?" 871 00:44:17,970 --> 00:44:23,190 Fordi jeg var liksom: "Jeg vil sannsynligvis rotet dette opp på et tidspunkt. " 872 00:44:23,190 --> 00:44:24,150 Pluss grønn. 873 00:44:24,150 --> 00:44:26,250 Alt ser ut som det er sammenkjedet riktig. 874 00:44:26,250 --> 00:44:29,620 875 00:44:29,620 --> 00:44:30,520 OK. 876 00:44:30,520 --> 00:44:31,870 >> PUBLIKUM: [uhørbart] 877 00:44:31,870 --> 00:44:33,810 >> ALLISON Buchholtz-AU: Åh, det du går. 878 00:44:33,810 --> 00:44:35,520 Det er det jeg trengte. 879 00:44:35,520 --> 00:44:36,805 Se på det. 880 00:44:36,805 --> 00:44:40,090 Tiffany å redde. 881 00:44:40,090 --> 00:44:40,590 Perfekt. 882 00:44:40,590 --> 00:44:41,090 OK. 883 00:44:41,090 --> 00:44:43,834 La oss nå se om det fungerer. 884 00:44:43,834 --> 00:44:44,816 Oh my God. 885 00:44:44,816 --> 00:44:45,641 OK. 886 00:44:45,641 --> 00:44:46,140 Hold på. 887 00:44:46,140 --> 00:44:48,280 >> PUBLIKUM: Space etter den andre pluss. 888 00:44:48,280 --> 00:44:50,310 >> ALLISON Buchholtz-AU: Hvem av dem? 889 00:44:50,310 --> 00:44:52,910 Å vente, holde på. 890 00:44:52,910 --> 00:44:54,870 Plass slitasje? 891 00:44:54,870 --> 00:44:57,209 >> PUBLIKUM: Second pluss i den grønne sammensetning. 892 00:44:57,209 --> 00:44:58,250 ALLISON Buchholtz-AU: Oh. 893 00:44:58,250 --> 00:44:59,570 PUBLIKUM: Det er ingen plass etter pluss, ja. 894 00:44:59,570 --> 00:45:00,790 ALLISON Buchholtz-AU: Du trenger ikke det, men-- 895 00:45:00,790 --> 00:45:01,190 PUBLIKUM: Å, gjør du ikke? 896 00:45:01,190 --> 00:45:01,910 ALLISON Buchholtz-AU: Det ser ganske. 897 00:45:01,910 --> 00:45:02,530 PUBLIKUM: OK. 898 00:45:02,530 --> 00:45:03,030 OK. 899 00:45:03,030 --> 00:45:05,170 >> ALLISON Buchholtz AU: La oss se om dette fungerer. 900 00:45:05,170 --> 00:45:05,670 OK. 901 00:45:05,670 --> 00:45:07,836 Jeg er tydeligvis mislykkes på denne demoen, som minner meg 902 00:45:07,836 --> 00:45:12,810 av en forelesning den andre uken, men jeg vet at dette vil fungere. 903 00:45:12,810 --> 00:45:15,860 Jeg vet at dette vil fungere. 904 00:45:15,860 --> 00:45:16,580 Så nær. 905 00:45:16,580 --> 00:45:22,330 Med mindre jeg tilfeldigvis slettet min skript på denne. 906 00:45:22,330 --> 00:45:24,035 Nei, det er fest dot js. 907 00:45:24,035 --> 00:45:25,776 OK holde på. 908 00:45:25,776 --> 00:45:28,650 Jeg kommer til å kopiere dette, og jeg er også bare kommer til å slette alt, 909 00:45:28,650 --> 00:45:30,108 fordi jeg hadde denne arbeids tidligere. 910 00:45:30,108 --> 00:45:32,470 911 00:45:32,470 --> 00:45:33,770 >> Jeg lover at det fungerer. 912 00:45:33,770 --> 00:45:36,160 Hvis ikke, vil jeg vise deg hva Tommys er. 913 00:45:36,160 --> 00:45:38,890 Og der. 914 00:45:38,890 --> 00:45:42,380 >> PUBLIKUM: Du refererer fest dot CSS, og det er en fest dot js. 915 00:45:42,380 --> 00:45:45,940 >> ALLISON Buchholtz-AU: Ah, vel akkurat her er partiet dot js. 916 00:45:45,940 --> 00:45:49,187 OK, hva gjorde jeg annerledes? 917 00:45:49,187 --> 00:45:50,520 OK, vil vi se om dette fungerer nå. 918 00:45:50,520 --> 00:45:54,180 919 00:45:54,180 --> 00:45:54,980 Bam. 920 00:45:54,980 --> 00:46:02,110 Så, jeg vet ikke hva jeg gjorde annerledes, men dette er hva som skal skje. 921 00:46:02,110 --> 00:46:03,230 Ganske kult. 922 00:46:03,230 --> 00:46:06,650 Jeg klikket på dette, som, for alltid. 923 00:46:06,650 --> 00:46:11,185 Men vi kan prøve og se hva jeg gjorde annerledes at dette hadde. 924 00:46:11,185 --> 00:46:14,560 Jeg vet ikke om dere, men dette ser i utgangspunktet det jeg nettopp skrev. 925 00:46:14,560 --> 00:46:17,950 Det var trolig en savnet semikolon et sted er min greie. 926 00:46:17,950 --> 00:46:22,064 Faktisk etter, tror jeg at jeg manglet semikolon rett her faktisk. 927 00:46:22,064 --> 00:46:24,230 Men jeg kunne ikke se det fordi det var utenfor skjermen. 928 00:46:24,230 --> 00:46:29,040 >> Men hvis vi legger merke til, er dette ganske mye akkurat hva jeg nettopp skrev. 929 00:46:29,040 --> 00:46:33,010 Jeg tror nok den vanskeligste delen om dette er bare litt av denne tingen rett 930 00:46:33,010 --> 00:46:36,830 her, forståelse hva det gjør der. 931 00:46:36,830 --> 00:46:42,230 Disse slags ting du lærer egentlig bare ved googling og ærlig 932 00:46:42,230 --> 00:46:42,880 bare prøver. 933 00:46:42,880 --> 00:46:46,770 Hvis du tror det er noen attributt, er det sannsynligvis er. 934 00:46:46,770 --> 00:46:48,382 Så prøv det. 935 00:46:48,382 --> 00:46:49,090 Se hva som skjer. 936 00:46:49,090 --> 00:46:53,000 Som jeg sa, det er mye av eksperimentering med Javascript, 937 00:46:53,000 --> 00:46:56,810 og PHP, og alt det der ting, og CSS spesielt. 938 00:46:56,810 --> 00:47:00,046 Det er den eneste sanne måten å forstå det. 939 00:47:00,046 --> 00:47:07,100 >> OK, så etter at fiaskoen med partiet dot js, vi har to andre alternativer. 940 00:47:07,100 --> 00:47:10,650 Vi har klokke eller Twitter. 941 00:47:10,650 --> 00:47:12,190 De er både interessant. 942 00:47:12,190 --> 00:47:17,720 Kanskje ikke fullt så morsomt som part, som hadde en kul liten Blinkende 943 00:47:17,720 --> 00:47:19,595 tingen på slutten. 944 00:47:19,595 --> 00:47:21,714 Har dere noen preferanser? 945 00:47:21,714 --> 00:47:22,380 PUBLIKUM: klokke? 946 00:47:22,380 --> 00:47:22,950 ALLISON Buchholtz-AU: klokke? 947 00:47:22,950 --> 00:47:23,450 OK. 948 00:47:23,450 --> 00:47:25,390 Cool. 949 00:47:25,390 --> 00:47:30,460 >> Så igjen, har vi vår tom Javascript-fil. 950 00:47:30,460 --> 00:47:35,800 Og som vi ser her, vi har noen veldig enkel HTML. 951 00:47:35,800 --> 00:47:40,010 Vi har vår stil ark, som bare formaterer hva det skal se ut. 952 00:47:40,010 --> 00:47:42,860 Vi har vår div med en Id av klokke, som 953 00:47:42,860 --> 00:47:44,420 bare sier, "dette bør være en klokke." 954 00:47:44,420 --> 00:47:47,650 Og vi har vår link til vår Javascript-fil 955 00:47:47,650 --> 00:47:51,400 det er faktisk kommer til å generere vår klokke for oss. 956 00:47:51,400 --> 00:47:56,060 Fordi den kule ting, er at du kan satt Javascript for å automatisk oppdatere 957 00:47:56,060 --> 00:47:56,963 selv. 958 00:47:56,963 --> 00:47:57,810 OK? 959 00:47:57,810 --> 00:48:01,580 Så i stedet for å vente på brukeren å treffe Refresh på en side 960 00:48:01,580 --> 00:48:03,840 slik at du kan få oppdaterte tiden, Java 961 00:48:03,840 --> 00:48:06,760 kan oppdatere den, men det liker. 962 00:48:06,760 --> 00:48:12,082 >> Så, som med vår siste, ville vi å få tilgang til vår bakgrunn, ikke sant? 963 00:48:12,082 --> 00:48:14,790 Så hva tror du kan være den første vi vil gjøre her? 964 00:48:14,790 --> 00:48:19,538 Hvis vi slags gå av denne typen paradigmet her? 965 00:48:19,538 --> 00:48:22,200 Vi sannsynligvis vil tilgang til vår klokke, ikke sant? 966 00:48:22,200 --> 00:48:24,724 Så har vi noen Div klokke, som equals-- 967 00:48:24,724 --> 00:48:26,140 hva tror vi vet det kommer til å bli? 968 00:48:26,140 --> 00:48:29,290 969 00:48:29,290 --> 00:48:42,670 Dokument dot få element by-- jeg også elsker Sublime-- Id og vår Id er klokke. 970 00:48:42,670 --> 00:48:43,585 Semikolon. 971 00:48:43,585 --> 00:48:45,710 Fikk å sørge for å få disse semikolon denne gangen, 972 00:48:45,710 --> 00:48:47,835 fordi jeg føler at var problemet sist. 973 00:48:47,835 --> 00:48:55,980 OK så, så jeg ble bare si med prøver å ha Javascript oppdatere seg selv, 974 00:48:55,980 --> 00:48:59,655 det er dette flott funksjon, jeg vet det kom hendig i fjor, 975 00:48:59,655 --> 00:49:02,780 Jeg er ikke sikker på at det kommer i hendig for dette PSet, men det heter innstilt tidsintervall. 976 00:49:02,780 --> 00:49:05,640 977 00:49:05,640 --> 00:49:08,200 Og dette er faktisk veldig kult hvis dere gjøre noe 978 00:49:08,200 --> 00:49:11,460 med tid eller får oppdatert informasjon. 979 00:49:11,460 --> 00:49:13,700 På et nettsted for en endelig prosjekt, er dette trolig 980 00:49:13,700 --> 00:49:16,240 en funksjon du vil få super kjent med. 981 00:49:16,240 --> 00:49:19,730 Så hva satt intervall gjør er at vi kommer til å gi den en funksjon, 982 00:49:19,730 --> 00:49:21,830 og hvor ofte det skal kalle denne funksjonen. 983 00:49:21,830 --> 00:49:22,430 OK? 984 00:49:22,430 --> 00:49:26,890 >> Så i dette tilfellet, vi bare kommer til å skape litt anonym funksjon igjen, 985 00:49:26,890 --> 00:49:31,530 OK, som kommer til å få vår dato, og vår tid, 986 00:49:31,530 --> 00:49:33,780 og deretter oppdatere ting og vise det. 987 00:49:33,780 --> 00:49:35,130 Så vi vil bekymre deg for det. 988 00:49:35,130 --> 00:49:39,120 Vi vil være som generere klokke her. 989 00:49:39,120 --> 00:49:41,750 Men det vi trenger er hvordan ofte for å oppdatere den. 990 00:49:41,750 --> 00:49:43,930 Så i dette tilfellet, er det bare millisekunder. 991 00:49:43,930 --> 00:49:46,877 Så vi skal bare gjøre 100 millisekunder. 992 00:49:46,877 --> 00:49:48,210 Selvfølgelig helt vilkårlig. 993 00:49:48,210 --> 00:49:50,600 Hvis du ønsker den skal oppdatere mye saktere, kunne du. 994 00:49:50,600 --> 00:49:53,300 Vi kan rote rundt med innstilt verdi, 995 00:49:53,300 --> 00:49:57,240 hvor stor vår intervall er etter at vi får en fungerende klokke, som forhåpentligvis vil jeg 996 00:49:57,240 --> 00:49:59,660 komme til. 997 00:49:59,660 --> 00:50:04,110 Så dette er bare å si: "OK, samtale denne funksjonen hver 100 millisekunder. " 998 00:50:04,110 --> 00:50:04,805 OK? 999 00:50:04,805 --> 00:50:07,280 Det er alt den gjør. 1000 00:50:07,280 --> 00:50:12,290 >> Så det vi ønsker vår funksjon til gjøre er at vi ønsker å ha noen dato 1001 00:50:12,290 --> 00:50:14,200 og litt tid er hva vi kommer til å ha. 1002 00:50:14,200 --> 00:50:19,740 Så kan vi begynne med vår dato er lik noe, 1003 00:50:19,740 --> 00:50:22,708 og vår tid er lik noe at vi ikke vet ennå. 1004 00:50:22,708 --> 00:50:26,070 1005 00:50:26,070 --> 00:50:29,300 Eller faktisk, vi trenger bare dato, fordi dato kommer til å omfatte alt. 1006 00:50:29,300 --> 00:50:34,310 1007 00:50:34,310 --> 00:50:40,010 Igjen hvis du bare Google noe om hva du vil gjøre, hvis du skriver, "OK, 1008 00:50:40,010 --> 00:50:41,980 Jeg ønsker å få tid via Javascript, "det 1009 00:50:41,980 --> 00:50:45,890 vil gi deg denne store funksjon som heter get dato. 1010 00:50:45,890 --> 00:50:48,664 Bokstavelig talt, de fleste ting at du ønsker å gjøre, 1011 00:50:48,664 --> 00:50:50,830 Javascript er nødt til det gjort for deg allerede. 1012 00:50:50,830 --> 00:50:55,770 Så det er bokstavelig talt som ny få dato, som er creating-- 1013 00:50:55,770 --> 00:50:58,600 eller ny dato, rather-- som genererer 1014 00:50:58,600 --> 00:51:03,690 noen objekt som representerer en dato. 1015 00:51:03,690 --> 00:51:08,200 >> Og hva vi skal gjøre her er dette er-- Jeg kommer til å skrive dette, 1016 00:51:08,200 --> 00:51:10,820 og deretter forklare hva den gjør. 1017 00:51:10,820 --> 00:51:12,560 Så jeg skal sørge for at jeg får denne retten. 1018 00:51:12,560 --> 00:51:17,950 1019 00:51:17,950 --> 00:51:23,440 >> OK, så hva denne funksjonen gjør, er at vi er bare 1020 00:51:23,440 --> 00:51:30,680 skape HTML som faktisk er kommer til å gå innenfor vår div Id av klokke. 1021 00:51:30,680 --> 00:51:34,610 Så hva dette kommer til å være å gjøre er bare generere noen streng, OK? 1022 00:51:34,610 --> 00:51:38,510 Som deretter kommer til å være transplantert inn i vårt HTML. 1023 00:51:38,510 --> 00:51:42,130 I utgangspunktet hva det kommer til å gjøre er hva we-- hva jeg vil vise deg 1024 00:51:42,130 --> 00:51:49,070 er at uansett hva vi sier HTML er, vi kommer til å erstatte denne teksten her 1025 00:51:49,070 --> 00:51:51,090 med hva HTML er. 1026 00:51:51,090 --> 00:51:56,390 Så dette kommer til å tillate oss til å endre vår klokke dot 1027 00:51:56,390 --> 00:52:00,940 HTML fra å være bare teksten i denne bør være en klokke, for å faktisk vise 1028 00:52:00,940 --> 00:52:05,630 tallene og ting som vi bryr om, og faktisk være o'clock. 1029 00:52:05,630 --> 00:52:09,810 >> Så hva vi skal gjøre er at vi er kommer til å begynne å generere denne HTML. 1030 00:52:09,810 --> 00:52:16,520 Så på samme måte som vi brukte å gjøre pluss er lik for heltall, 1031 00:52:16,520 --> 00:52:20,461 kan du nå gjøre det for strykere, bortsett fra at det kommer til å slå sammen dem. 1032 00:52:20,461 --> 00:52:20,960 Høyre? 1033 00:52:20,960 --> 00:52:26,070 Som vi så med partiet dot js, dette bare Setter sammen alle disse tingene sammen. 1034 00:52:26,070 --> 00:52:31,970 Så du kan sette sammen ulike biter av HTML fra variabler, eller biter av strenger 1035 00:52:31,970 --> 00:52:33,750 at du skriver ut selv, og dette er bare 1036 00:52:33,750 --> 00:52:38,650 virkelig lar deg dynamisk generere HTML, som er ganske kult. 1037 00:52:38,650 --> 00:52:42,040 Så hvis du har noe svært brukerspesifikke, 1038 00:52:42,040 --> 00:52:44,130 Dette kan tillate deg å gjøre det. 1039 00:52:44,130 --> 00:52:47,550 >> Så vi har HTML, til jeg kommer til å prøve og sørge for at jeg får denne retten. 1040 00:52:47,550 --> 00:52:49,890 Så vi kommer til å gjøre noen h1 spissen. 1041 00:52:49,890 --> 00:52:53,610 Så hva er viktig å innse her er at dette er faktisk bare HTML. 1042 00:52:53,610 --> 00:52:54,460 Høyre? 1043 00:52:54,460 --> 00:52:56,610 Vi skriver faktiske HTML-kode i her, er det 1044 00:52:56,610 --> 00:53:01,090 ikke bare en streng på vanlig måte som vi ville tenke på det. 1045 00:53:01,090 --> 00:53:02,930 Så vi har litt HTML. 1046 00:53:02,930 --> 00:53:04,940 Dette regnes som en streng her skjønt. 1047 00:53:04,940 --> 00:53:10,380 Og vi gjør dato dot-- vi ønsker å få våre timer. 1048 00:53:10,380 --> 00:53:12,910 Igjen, hvis du skulle se opp noe om dato, 1049 00:53:12,910 --> 00:53:16,160 det ville fortelle deg disse er alle attributtene som dato har. 1050 00:53:16,160 --> 00:53:17,670 Og her er hva du kan bruke på det. 1051 00:53:17,670 --> 00:53:20,620 Så det sannsynligvis har ting som få timer, og få minutter, 1052 00:53:20,620 --> 00:53:24,669 og få sekunder, og få millisekunder, og hvem vet hva annet de har. 1053 00:53:24,669 --> 00:53:27,210 Men hvis du ser inn i dokumentasjon, vil det hele være der. 1054 00:53:27,210 --> 00:53:31,980 >> Så vi har få timer, og da ville vi ønsker 1055 00:53:31,980 --> 00:53:35,614 til å flette sammen at with-- jeg er kommer til å flytte dette over her. 1056 00:53:35,614 --> 00:53:38,780 Så hvis vi genererer akkurat nå, vi er faktisk genererer tiden, ikke sant? 1057 00:53:38,780 --> 00:53:43,590 Vi har timer, og deretter hva som er mellom timer og minutter? 1058 00:53:43,590 --> 00:53:45,080 Du har et semikolon, ikke sant? 1059 00:53:45,080 --> 00:53:48,010 Så vi ønsker å gjøre noen semikolon her. 1060 00:53:48,010 --> 00:53:51,780 Og så ønsker vi å få vår minutt, slik at på samme måte 1061 00:53:51,780 --> 00:53:56,450 at vi har dato dot få timer, hvordan kan vi få våre minutter? 1062 00:53:56,450 --> 00:54:01,542 Det er bokstavelig talt dato dot få minutter, som jeg slags liker. 1063 00:54:01,542 --> 00:54:03,250 Det er som, "oh, hvordan får jeg mine minutter? " 1064 00:54:03,250 --> 00:54:05,850 Jeg bare få min minutter. 1065 00:54:05,850 --> 00:54:07,500 >> OK. 1066 00:54:07,500 --> 00:54:10,990 Og så har vi en annen kolon her. 1067 00:54:10,990 --> 00:54:16,350 Og så hvis vi ønsker å få vår sekunder, hvordan kan vi få vår andre? 1068 00:54:16,350 --> 00:54:17,400 Dato dot få sekunder. 1069 00:54:17,400 --> 00:54:20,390 1070 00:54:20,390 --> 00:54:21,590 Jeg tror det er ganske kult. 1071 00:54:21,590 --> 00:54:23,589 Og hva er viktig å skjønner, er at vi også 1072 00:54:23,589 --> 00:54:31,730 må lukke våre HTML-koden her, fordi det skal fortsatt være gyldig HTML, så h1. 1073 00:54:31,730 --> 00:54:33,481 Cool. 1074 00:54:33,481 --> 00:54:43,110 >> Så etter det, kan vi gjøre klokke dot indre HTML er lik HTML. 1075 00:54:43,110 --> 00:54:43,930 OK? 1076 00:54:43,930 --> 00:54:46,470 Så husker hvordan jeg sa indre HTML utgangspunktet 1077 00:54:46,470 --> 00:54:50,610 tar alt som er mellom to tags som vi snakket om 1078 00:54:50,610 --> 00:54:54,470 og innstikk eller manipulerer hva er der? 1079 00:54:54,470 --> 00:54:58,290 Så hva dette betyr, hvis vi går tilbake til vår klokke, 1080 00:54:58,290 --> 00:55:04,180 er at klokken viser til alt innenfor denne div. 1081 00:55:04,180 --> 00:55:09,770 Dette er den indre HTML av denne Id klokke div. 1082 00:55:09,770 --> 00:55:13,930 Og så det kommer til å endre det til HTML at vi bare generert, 1083 00:55:13,930 --> 00:55:16,750 som, som forhåpentligvis forhåpentligvis, forhåpentligvis, 1084 00:55:16,750 --> 00:55:21,026 vil vise tiden akkurat nå. 1085 00:55:21,026 --> 00:55:23,960 Vi får se. 1086 00:55:23,960 --> 00:55:25,170 Selvfølgelig. 1087 00:55:25,170 --> 00:55:26,860 Så mange tekniske problemer. 1088 00:55:26,860 --> 00:55:31,480 Allisons just-- jeg er av mine spill i dag folkens. 1089 00:55:31,480 --> 00:55:34,136 OK, som fungerer. 1090 00:55:34,136 --> 00:55:35,760 klokke dot indre HTML. 1091 00:55:35,760 --> 00:55:42,097 Det var HTML Really? 1092 00:55:42,097 --> 00:55:43,180 Også dette er hva som skjer. 1093 00:55:43,180 --> 00:55:48,750 Når du ikke kan se noe, du bare se på kildekoden. 1094 00:55:48,750 --> 00:55:49,250 OK. 1095 00:55:49,250 --> 00:55:51,912 1096 00:55:51,912 --> 00:55:54,870 Vet du vil vite en kul arbeid rundt at vi kommer til å gjøre her? 1097 00:55:54,870 --> 00:55:55,740 >> PUBLIKUM: Kan du gjøre store bokstaver? 1098 00:55:55,740 --> 00:55:56,580 De store bokstaver? 1099 00:55:56,580 --> 00:55:58,996 Fordi du har få timer, og deretter få minutter. 1100 00:55:58,996 --> 00:56:02,590 >> ALLISON Buchholtz-AU: Det er få timer og get-- oh. 1101 00:56:02,590 --> 00:56:04,945 Du are-- gullstjerne. 1102 00:56:04,945 --> 00:56:08,114 1103 00:56:08,114 --> 00:56:09,030 Det er alt en test, folkens. 1104 00:56:09,030 --> 00:56:13,630 1105 00:56:13,630 --> 00:56:17,330 Jeg lover at det var i arbeid før klassen. 1106 00:56:17,330 --> 00:56:22,590 >> OK, men noe kult å vite er at du kan also-- hvis noen ganger 1107 00:56:22,590 --> 00:56:26,560 eksterne filer er blir litt gal, 1108 00:56:26,560 --> 00:56:30,960 du kan også bare sette dem rett her inne, som har en tendens til å fikse ting. 1109 00:56:30,960 --> 00:56:35,840 Bortsett fra dette er som virkelig stygg. 1110 00:56:35,840 --> 00:56:38,050 Selvfølgelig formatere alt. 1111 00:56:38,050 --> 00:56:41,425 Sørg for at alt er pen. 1112 00:56:41,425 --> 00:56:41,925 OK. 1113 00:56:41,925 --> 00:56:47,200 1114 00:56:47,200 --> 00:56:50,621 >> Jeg ønsket å gjøre alle de kule demoer, og de er bare ikke trener. 1115 00:56:50,621 --> 00:56:51,555 OK. 1116 00:56:51,555 --> 00:56:53,890 Script Div klokke. 1117 00:56:53,890 --> 00:57:00,350 Anyways, det som er viktig er at dette er den generelle måten 1118 00:57:00,350 --> 00:57:01,870 at du ville formatere Script. 1119 00:57:01,870 --> 00:57:04,490 Som du kan se, kan det være veldig pirkete noen ganger, 1120 00:57:04,490 --> 00:57:08,780 selv når det var bokstavelig talt arbeider to sekunder siden. 1121 00:57:08,780 --> 00:57:11,820 Eller ikke to andre siden, men veldig, veldig nylig. 1122 00:57:11,820 --> 00:57:16,070 >> Så for å vise deg hva det skal se ut, og for å vise deg at jeg er ikke gal, 1123 00:57:16,070 --> 00:57:19,730 og at alt er akkurat samme, er dette hva det skal se ut. 1124 00:57:19,730 --> 00:57:27,410 Du bare kommer til å gjøre dette øverste delen her, og hvis du vise siden kilden, 1125 00:57:27,410 --> 00:57:32,160 hvis du legger merke til, gjorde han noen galere ting, jeg forenklet det. 1126 00:57:32,160 --> 00:57:35,710 Også, kreditt til Tommy McWilliam, som faktisk 1127 00:57:35,710 --> 00:57:38,810 hjalp meg opprette disse eksemplene, det er derfor jeg vet de fungerer. 1128 00:57:38,810 --> 00:57:41,560 Fordi Tommy er en Javascript-mester. 1129 00:57:41,560 --> 00:57:43,180 Men hvis vi legger merke til, har vi noen sett. 1130 00:57:43,180 --> 00:57:45,170 Vi har vår klokkefunksjon her. 1131 00:57:45,170 --> 00:57:48,450 Dette er alt Javascript som vi nettopp skrev, eller noe av det. 1132 00:57:48,450 --> 00:57:51,470 Vi skrev denne retten her. 1133 00:57:51,470 --> 00:57:54,260 Og han har en ekstra funksjon som bare pads det 1134 00:57:54,260 --> 00:57:57,790 ved å sette en null før en brev eller før et nummer hvis det er 1135 00:57:57,790 --> 00:57:59,412 bare ett av dem. 1136 00:57:59,412 --> 00:58:02,120 Så hvis du legger merke til, er dette ganske mye akkurat hva vi nettopp skrev. 1137 00:58:02,120 --> 00:58:06,230 Du har litt variabel klokke som har vår element, få element av ID, 1138 00:58:06,230 --> 00:58:07,252 som er klokke. 1139 00:58:07,252 --> 00:58:08,960 Vi har vår innstilt tidsintervall funksjon, er at 1140 00:58:08,960 --> 00:58:12,670 en anonym funksjon som utfører alt dette. 1141 00:58:12,670 --> 00:58:16,940 Vi har noen starter streng med HTML som vi deretter dynamisk 1142 00:58:16,940 --> 00:58:20,750 generere ved å ha noen h1 header, lenke sammen 1143 00:58:20,750 --> 00:58:23,950 med få timer, pluss våre kolon, pluss å få 1144 00:58:23,950 --> 00:58:26,860 protokollen, pluss en annen tykktarm, samt våre sekunder, 1145 00:58:26,860 --> 00:58:29,330 og til slutt slutter HTML for det. 1146 00:58:29,330 --> 00:58:34,210 Og da vi oppdaterer vår klokke dot indre HTML til HTML, 1147 00:58:34,210 --> 00:58:37,640 og vi oppdaterer hver 100 millisekunder. 1148 00:58:37,640 --> 00:58:39,060 OK? 1149 00:58:39,060 --> 00:58:42,470 >> Se Jeg lover jeg er ikke gal. 1150 00:58:42,470 --> 00:58:43,440 Jeg vet ikke. 1151 00:58:43,440 --> 00:58:47,160 Jeg vet ikke hvorfor det ikke liker meg. 1152 00:58:47,160 --> 00:58:54,030 Jeg føler meg som ser det samme, men tydeligvis det hater meg. 1153 00:58:54,030 --> 00:58:59,600 >> Så la oss se om runde tre går bedre. 1154 00:58:59,600 --> 00:59:00,970 Vi er i ferd med å se. 1155 00:59:00,970 --> 00:59:02,910 Jeg er ikke sikker på hvordan dette kommer til å gå. 1156 00:59:02,910 --> 00:59:06,700 Er alle minst få ulemper, som bare den generelle tema 1157 00:59:06,700 --> 00:59:08,480 av Javascript, skjønt? 1158 00:59:08,480 --> 00:59:15,660 Jeg håper det er minst nyttig, mer enn å vise at det er litt pirkete. 1159 00:59:15,660 --> 00:59:21,190 Men problemet settet vil være veldig gøy. 1160 00:59:21,190 --> 00:59:22,590 Det kommer til å være stor. 1161 00:59:22,590 --> 00:59:24,820 Det vil ikke være fullt så kjedelig som dette, tror jeg ikke. 1162 00:59:24,820 --> 00:59:28,100 Du vil faktisk få til se virkelig kule ting. 1163 00:59:28,100 --> 00:59:31,734 >> Så sist men ikke minst, vi skal prøve Twitter én. 1164 00:59:31,734 --> 00:59:32,900 Jeg er virkelig redd nå, folkens. 1165 00:59:32,900 --> 00:59:35,762 Jeg vet ikke hvordan dette kommer til å gå. 1166 00:59:35,762 --> 00:59:39,930 Men bare for å gi deg litt mer smak, er og dette faktisk 1167 00:59:39,930 --> 00:59:44,190 manipulere strenger og innganger, hva vi skal gjøre 1168 00:59:44,190 --> 00:59:50,960 er, hvis vi legger merke til her med HTML-- denne har en litt mer-- 1169 00:59:50,960 --> 00:59:57,200 vi har noen tekstområdet, som tilsvarer dette tekstområdet her. 1170 00:59:57,200 --> 00:59:58,030 OK? 1171 00:59:58,030 --> 01:00:00,420 Og som har en Id av tekst. 1172 01:00:00,420 --> 01:00:04,520 Vi pusset det litt med en viss bredde og høyde 1173 01:00:04,520 --> 01:00:07,310 at vi har forhåndsbestemt, og vi har H1, 1174 01:00:07,310 --> 01:00:11,260 som bare er vår header en som representerer våre tegn igjen. 1175 01:00:11,260 --> 01:00:14,570 Vi ga det noen Id av tegn igjen, 1176 01:00:14,570 --> 01:00:18,660 og så har vi noen skript her, som jeg er virkelig 1177 01:00:18,660 --> 01:00:20,790 håper tredje gang er sjarmen her, folkens. 1178 01:00:20,790 --> 01:00:26,750 >> Så det vi ønsker å gjøre, i samme generelle vene 1179 01:00:26,750 --> 01:00:31,480 at vi har gjort med klokke dot js og parti dot js som vi har lagt merke til, 1180 01:00:31,480 --> 01:00:35,980 er vi har startet med å faktisk gripe de tingene som vi bryr oss om, ikke sant? 1181 01:00:35,980 --> 01:00:42,330 Så i dette tilfellet, er det to ting som vi bryr oss om, OK? 1182 01:00:42,330 --> 01:00:47,199 En ting som vi er faktisk slags ser inn og trekke data fra, 1183 01:00:47,199 --> 01:00:48,990 og en ting som vi faktisk endring. 1184 01:00:48,990 --> 01:00:52,110 1185 01:00:52,110 --> 01:00:53,730 Så det er vår HTML. 1186 01:00:53,730 --> 01:01:00,370 Hvis dette er vår web side her, hva er dataene som vi ser på? 1187 01:01:00,370 --> 01:01:03,860 Det kommer til å bli hva teksten i våre bokser, ikke sant? 1188 01:01:03,860 --> 01:01:05,310 Så uansett hva jeg skriver her. 1189 01:01:05,310 --> 01:01:08,150 Det er det jeg ønsker å vite, eller det er det jeg ønsker å se på. 1190 01:01:08,150 --> 01:01:10,690 Og hva kommer til å være endre på vår web-side? 1191 01:01:10,690 --> 01:01:13,550 1192 01:01:13,550 --> 01:01:14,880 De tegn igjen. 1193 01:01:14,880 --> 01:01:19,550 Så på samme måte, vi ønsker å starte ved å initial variabler 1194 01:01:19,550 --> 01:01:22,030 som faktisk holde på disse elementene. 1195 01:01:22,030 --> 01:01:22,890 OK? 1196 01:01:22,890 --> 01:01:29,930 Så hvis vi har noen Div som er vår tekstområdet, 1197 01:01:29,930 --> 01:01:33,681 og vi har noen Div som er igjen. 1198 01:01:33,681 --> 01:01:34,180 Høyre? 1199 01:01:34,180 --> 01:01:36,190 Så disse kommer til å holde disse to tingene. 1200 01:01:36,190 --> 01:01:42,370 Så den samme typen ting, dokument dot-- OK, jeg er 1201 01:01:42,370 --> 01:01:45,920 kommer til å sørge for at dette er kommer til å fungere denne gangen. 1202 01:01:45,920 --> 01:01:49,620 Jeg er veldig sikker i sin sak. 1203 01:01:49,620 --> 01:01:53,310 OK, så hvis vi ønsker vår tekstområdet, ifølge 1204 01:01:53,310 --> 01:01:55,710 til vår HTML, hva er vår identifikator? 1205 01:01:55,710 --> 01:01:56,420 Hva er vår Id? 1206 01:01:56,420 --> 01:01:59,500 1207 01:01:59,500 --> 01:02:05,540 Det er bare kommer til å være tekst fordi dette skaper vår tekstområdet, OK, 1208 01:02:05,540 --> 01:02:10,320 og vår Id er tekst, så det er hvordan vi kan hente hva som er der. 1209 01:02:10,320 --> 01:02:12,130 OK, semikolon. 1210 01:02:12,130 --> 01:02:13,940 Jeg kommer til å være super presis om dette, 1211 01:02:13,940 --> 01:02:16,300 fordi jeg vil at dette skal fungere denne gangen. 1212 01:02:16,300 --> 01:02:22,120 OK, gjør det samme, få element av Id. 1213 01:02:22,120 --> 01:02:25,970 Jeg virkelig lurer på hva har forårsaket de to andre å rote. 1214 01:02:25,970 --> 01:02:29,750 OK, så i denne, hva gjør vi ønsker å få tilgang? 1215 01:02:29,750 --> 01:02:30,760 Hva er vår Id her? 1216 01:02:30,760 --> 01:02:33,980 1217 01:02:33,980 --> 01:02:36,261 Vi har en annen Id i vår HTML, hva er det? 1218 01:02:36,261 --> 01:02:37,552 PUBLIKUM: Tegn som gjenstår. 1219 01:02:37,552 --> 01:02:39,343 ALLISON Buchholtz-AU: Tegn igjen. 1220 01:02:39,343 --> 01:02:43,360 1221 01:02:43,360 --> 01:02:44,330 >> OK. 1222 01:02:44,330 --> 01:02:46,010 Cool. 1223 01:02:46,010 --> 01:02:49,800 Så jeg skal bare skrive dette veldig fort. 1224 01:02:49,800 --> 01:02:53,706 1225 01:02:53,706 --> 01:02:55,330 Jeg kommer bare til å skrive dette i andre. 1226 01:02:55,330 --> 01:02:56,190 Så tekstområdet. 1227 01:02:56,190 --> 01:02:59,550 1228 01:02:59,550 --> 01:03:06,180 Det interessante er B function-- det er mange funksjoner som ikke bare 1229 01:03:06,180 --> 01:03:09,690 tilsvare din mus, men tastaturet. 1230 01:03:09,690 --> 01:03:10,190 OK? 1231 01:03:10,190 --> 01:03:16,540 Så du kan si når en tast er trykket, kan du gjøre ting som dette. 1232 01:03:16,540 --> 01:03:20,450 Så den som vi bruker kalles på nøkkelen opp, noe som 1233 01:03:20,450 --> 01:03:25,320 sier, "hvis du har trykket på en tast på tastaturet, når brukeren har løftet 1234 01:03:25,320 --> 01:03:28,064 fingeren av den knappen, og nøkkelen har blitt upresset, 1235 01:03:28,064 --> 01:03:29,480 så vi kommer til å gjøre noe. " 1236 01:03:29,480 --> 01:03:29,980 OK? 1237 01:03:29,980 --> 01:03:31,370 Så dette er fornuftig, ikke sant? 1238 01:03:31,370 --> 01:03:33,540 Fordi hver karakter vi skriver, vi skal 1239 01:03:33,540 --> 01:03:36,550 til å løfte våre fingre off av det, så når nøkkelen går opp, 1240 01:03:36,550 --> 01:03:40,980 vi kan vite for å minske våre tegn igjen. 1241 01:03:40,980 --> 01:03:44,440 >> Så vi har noen på nøkkelen opp, og på samme måte, 1242 01:03:44,440 --> 01:03:47,480 vi kommer til å si, "OK, når vi gjør det, vi 1243 01:03:47,480 --> 01:03:55,110 kommer til å lage noen funksjon som kommer til å ta e ", i dette tilfellet 1244 01:03:55,110 --> 01:03:58,800 og hva vi ønsker å gjøre er beregne antall gjenværende. 1245 01:03:58,800 --> 01:04:02,510 OK, så la oss bare begynne ved å skape en variabel. 1246 01:04:02,510 --> 01:04:05,830 Så vi har litt variabel r, som kommer til å representere 1247 01:04:05,830 --> 01:04:07,720 hvor mange tegn vi har igjen. 1248 01:04:07,720 --> 01:04:08,890 OK? 1249 01:04:08,890 --> 01:04:14,540 Vi vet at vi starter med 140, og hvis vi ønsker å vite, 1250 01:04:14,540 --> 01:04:18,360 la oss si, lengden av denne streng som har vært innspill, 1251 01:04:18,360 --> 01:04:20,860 dere har noen ide hvordan vi kan gjøre det? 1252 01:04:20,860 --> 01:04:23,900 Bare basert off av den åpenbare ting, som om vi ønsket timer, 1253 01:04:23,900 --> 01:04:25,870 vi brukte få timer. 1254 01:04:25,870 --> 01:04:28,860 Vi vet at våre objekt er tekst området, men kunne dere 1255 01:04:28,860 --> 01:04:33,050 tenke på hva som kan komme etter det? 1256 01:04:33,050 --> 01:04:35,280 Noen ideer? 1257 01:04:35,280 --> 01:04:41,730 >> Så dette ens form for mindre intuitivt, men det er verdi dot lengde. 1258 01:04:41,730 --> 01:04:44,700 Så bare gi meg noen verdi attributt som 1259 01:04:44,700 --> 01:04:46,500 faktisk er lengden av denne streng. 1260 01:04:46,500 --> 01:04:50,340 Så det kommer til å si: "OK, jeg ser på hele denne strengen innenfor tekstområdet, 1261 01:04:50,340 --> 01:04:52,730 og jeg kommer til å fortelle du hvor lenge det er. " 1262 01:04:52,730 --> 01:04:55,500 Fordi hvis vi husker strenger er egentlig bare matriser, 1263 01:04:55,500 --> 01:04:58,110 så vi kan bare ta lengden på dem. 1264 01:04:58,110 --> 01:05:01,860 Så har vi det. 1265 01:05:01,860 --> 01:05:04,058 Cool. 1266 01:05:04,058 --> 01:05:09,360 >> Så hva vi ønsker å gjøre er vi aldri vil tillate brukeren 1267 01:05:09,360 --> 01:05:12,340 skrive mer enn 140 tegn, ikke sant? 1268 01:05:12,340 --> 01:05:15,610 Fordi hvis vi sier liksom: "oh, du bare har dette mye gjenstår, " 1269 01:05:15,610 --> 01:05:20,522 og så la dem gjøre det anyways, har vi ligget. 1270 01:05:20,522 --> 01:05:22,230 Og dette er en annen ting som Java 1271 01:05:22,230 --> 01:05:24,530 kan være veldig bra for, er brukervalidering 1272 01:05:24,530 --> 01:05:29,062 og sørge for at din bruker passer innenfor noen regler 1273 01:05:29,062 --> 01:05:30,270 at du har gitt til dem. 1274 01:05:30,270 --> 01:05:36,020 Så hvis du ønsker å gjøre ting som å lage sikkert noen innspill sin e-postadresse, 1275 01:05:36,020 --> 01:05:40,242 eller å sørge for at når de oppgi to passord, matchet de. 1276 01:05:40,242 --> 01:05:41,200 Javascript kan gjøre det. 1277 01:05:41,200 --> 01:05:44,010 Du ville gjøre noe sånt som "når skjemaet er sendt "eller lignende, 1278 01:05:44,010 --> 01:05:48,170 "Når Send skjema-knappen er klikket, sjekk alle disse tingene. " 1279 01:05:48,170 --> 01:05:49,670 Og vi kan gjøre det Script. 1280 01:05:49,670 --> 01:05:52,680 Så det er bare hva vi kommer til å gjøre her. 1281 01:05:52,680 --> 01:05:57,810 >> Så hva kan være en måte å sjekke om de har gått over 140 tegn? 1282 01:05:57,810 --> 01:06:03,310 Hva kommer til å skje med vår verdi av r hvis de prøver? 1283 01:06:03,310 --> 01:06:04,760 Det kommer til å være negativ, ikke sant? 1284 01:06:04,760 --> 01:06:07,380 Eller det kommer til å være mindre enn eller lik null. 1285 01:06:07,380 --> 01:06:13,690 Slik at vi kan bruke en hvis det er akkurat som alt annet. 1286 01:06:13,690 --> 01:06:14,270 OK? 1287 01:06:14,270 --> 01:06:20,480 Og vi har noen tekstområdet dot verdi, og hva vi gjør her 1288 01:06:20,480 --> 01:06:29,940 er vi bare cutting-- hva er det? 1289 01:06:29,940 --> 01:06:30,900 Unnskyld. 1290 01:06:30,900 --> 01:06:32,732 Denne, vi ønsker bare å returnere falsk. 1291 01:06:32,732 --> 01:06:34,030 Jeg ble forvirret. 1292 01:06:34,030 --> 01:06:36,560 Alle uryddig fra ting ikke fungerer. 1293 01:06:36,560 --> 01:06:40,010 OK, vi ønsker bare å return false, og da vi 1294 01:06:40,010 --> 01:06:44,160 ønsker å vise gjenværende tegn, ikke sant? 1295 01:06:44,160 --> 01:06:48,720 Så med klokken, vi gjorde noe med indre HTML, ikke sant? 1296 01:06:48,720 --> 01:06:52,070 Der vi satt det lik noen variabel, så hva kan vi gjøre her? 1297 01:06:52,070 --> 01:06:54,590 1298 01:06:54,590 --> 01:06:57,750 Hva skal vi endre den indre HTML av? 1299 01:06:57,750 --> 01:07:02,843 1300 01:07:02,843 --> 01:07:03,780 >> PUBLIKUM: Gjenværende? 1301 01:07:03,780 --> 01:07:05,738 >> ALLISON Buchholtz-AU: Vi endrer gjenstår. 1302 01:07:05,738 --> 01:07:09,217 1303 01:07:09,217 --> 01:07:11,300 Greit, og hva gjør vi ønsker å sette den lik? 1304 01:07:11,300 --> 01:07:14,440 1305 01:07:14,440 --> 01:07:18,437 Det kommer til å være r, fordi det bør være våre tegn igjen. 1306 01:07:18,437 --> 01:07:19,600 OK? 1307 01:07:19,600 --> 01:07:26,060 Så jeg er veldig nervøs for å se om dette fungerer nå, men vi får se. 1308 01:07:26,060 --> 01:07:28,960 1309 01:07:28,960 --> 01:07:29,460 La dette. 1310 01:07:29,460 --> 01:07:34,690 1311 01:07:34,690 --> 01:07:37,700 Det er veldig fort. 1312 01:07:37,700 --> 01:07:38,970 [Uhørbart] OK. 1313 01:07:38,970 --> 01:07:44,574 1314 01:07:44,574 --> 01:07:45,990 Igjen, jeg bare kommer til å vise deg. 1315 01:07:45,990 --> 01:07:49,430 Uansett grunn, min bestemmer seg for ikke å jobbe, 1316 01:07:49,430 --> 01:07:53,354 men det jeg vil vise deg er at dette er-- oh jeg skulle sette det i. 1317 01:07:53,354 --> 01:07:57,470 OK, vi merker den samme typen ting her, får tekstområdet. 1318 01:07:57,470 --> 01:08:01,070 >> Også, hvis du fyr varsel, hvis det er stadig noe du ønsker å gjøre, 1319 01:08:01,070 --> 01:08:04,080 og du ikke vet hvordan du gjør den, klikker du Vis sidekilde, 1320 01:08:04,080 --> 01:08:06,632 og de kommer til å fortelle deg. 1321 01:08:06,632 --> 01:08:07,840 Noen ganger vil det være kryptert. 1322 01:08:07,840 --> 01:08:11,147 For din PSet, krypterer vi alt, så det bare ut som vrøvl. 1323 01:08:11,147 --> 01:08:13,480 Men hvis det er noen gang en virkelig kul nettside som du liker, 1324 01:08:13,480 --> 01:08:17,729 hvis du bare klikke Vis sidekilde, det kommer til å fortelle deg hvordan du gjør det. 1325 01:08:17,729 --> 01:08:20,770 Så igjen, jobbe smartere, ikke hardere. 1326 01:08:20,770 --> 01:08:24,250 Og som du ser her, alle disse tingene er de samme. 1327 01:08:24,250 --> 01:08:31,930 denne her bare tar litt treng at jeg glemmer nøyaktig hva dette betyr. 1328 01:08:31,930 --> 01:08:36,980 Men det tydeligvis tar litt treng av verdien fra null til ti, 1329 01:08:36,980 --> 01:08:41,540 og returnerer false hva bør slutte brukeren fra å legge inn lenger, 1330 01:08:41,540 --> 01:08:46,040 og deretter åpenbart oppdaterer den indre HTML der. 1331 01:08:46,040 --> 01:08:47,410 >> Cool. 1332 01:08:47,410 --> 01:08:53,000 Så store take-aways fra i dag, eksperiment, se på kildekoden 1333 01:08:53,000 --> 01:08:58,359 fordi det kommer til å hjelpe deg mye, og alle, noen ganger Java 1334 01:08:58,359 --> 01:09:03,200 kan være vanskelig å jobbe med, og ikke alltid virker slik du forventer det, 1335 01:09:03,200 --> 01:09:05,700 men bare fortsette å prøve fordi jeg lover det vil. 1336 01:09:05,700 --> 01:09:08,376 Jeg lover alle disse eksemplene arbeidet før klassen. 1337 01:09:08,376 --> 01:09:09,750 Jeg forstår ikke hva som skjedde. 1338 01:09:09,750 --> 01:09:13,069 Jeg bokstavelig talt har alt det samme. 1339 01:09:13,069 --> 01:09:17,660 >> En ting som jeg bare vil vise dere som kan være super nyttig 1340 01:09:17,660 --> 01:09:21,630 er in-- hva som fungerte før? 1341 01:09:21,630 --> 01:09:23,935 Vi fikk part i arbeid, gjorde vi ikke? 1342 01:09:23,935 --> 01:09:26,569 Jeg tror det. 1343 01:09:26,569 --> 01:09:27,069 Ja. 1344 01:09:27,069 --> 01:09:27,630 Vi gjorde. 1345 01:09:27,630 --> 01:09:28,250 Awesome. 1346 01:09:28,250 --> 01:09:31,189 OK, så en ting som dere bør vite 1347 01:09:31,189 --> 01:09:33,340 er konsollen logg som jeg snakket om. 1348 01:09:33,340 --> 01:09:37,040 Så trøste dot logg over hei. 1349 01:09:37,040 --> 01:09:40,430 Så dette er slags Java tilsvarer printf. 1350 01:09:40,430 --> 01:09:42,810 Så hvis du noen gang ønsker å inspisere variabler 1351 01:09:42,810 --> 01:09:49,649 eller se hva som skjer der, hva du kan gjøre er, hvis vi inspisere element, 1352 01:09:49,649 --> 01:09:51,899 er hva du ønsker å gå til, og du går å trøste, 1353 01:09:51,899 --> 01:09:53,770 vil du se at det skrives hei. 1354 01:09:53,770 --> 01:09:55,750 >> Slik at vi kunne ha det print hva vi ønsket. 1355 01:09:55,750 --> 01:10:04,170 Hvis vi ønsket å skrive ut bakgrunns dot stil dot bakgrunn, 1356 01:10:04,170 --> 01:10:08,454 vi bør være i stand til å se den RGB trippel som kommer opp. 1357 01:10:08,454 --> 01:10:11,140 Eller ikke. 1358 01:10:11,140 --> 01:10:13,520 Jeg glemmer nøyaktig hvordan du skrive ut en variabel som det, 1359 01:10:13,520 --> 01:10:17,249 men du bør kunne skrive ut ting som det. 1360 01:10:17,249 --> 01:10:19,040 Det vil være svært nyttig for din PSet når 1361 01:10:19,040 --> 01:10:23,330 du prøver å manipulere koordinerer eller whatnot. 1362 01:10:23,330 --> 01:10:25,270 Slik at de også endre dette stykket i klassen. 1363 01:10:25,270 --> 01:10:30,750 Dette er forskjellig fra siste år, så bare være hyggelig å dine TFS, eller TFS 1364 01:10:30,750 --> 01:10:36,350 på kontortiden heller, fordi vi er type læring sammen med dere. 1365 01:10:36,350 --> 01:10:41,230 Men konsollen loggen var super, super nyttig for Javascript i fjor. 1366 01:10:41,230 --> 01:10:42,740 Så elsker det. 1367 01:10:42,740 --> 01:10:43,780 Lær hvordan du bruker den. 1368 01:10:43,780 --> 01:10:49,026 Det er enklere å bruke enn GDB, slik at bør være minst et pluss. 1369 01:10:49,026 --> 01:10:50,650 Men takker dere bærer med meg. 1370 01:10:50,650 --> 01:10:53,400 Jeg beklager at min eksempler på noen grunn 1371 01:10:53,400 --> 01:10:55,410 bare ikke ønsker å samarbeide med meg, men jeg 1372 01:10:55,410 --> 01:11:01,010 håper at det hjalp slags får du en litt mer i sonen av Javascript. 1373 01:11:01,010 --> 01:11:04,980 Og send meg alle dine spørsmål for neste uke slik at jeg kan bli super reparert, 1374 01:11:04,980 --> 01:11:09,420 og jeg skal bringe godteri og selv ekstra godteri fordi dette var latterlig. 1375 01:11:09,420 --> 01:11:14,000 Men dere er stor, og har en fantastisk uke. 1376 01:11:14,000 --> 01:11:15,584