1 00:00:00,000 --> 00:00:07,440 2 00:00:07,440 --> 00:00:08,180 >> TOMAS REIMERS: Bok, svima. 3 00:00:08,180 --> 00:00:09,250 Moje ime je Tomas REIMERS. 4 00:00:09,250 --> 00:00:10,500 >> MIKE Rizzo: I ja sam Mike Rizzo. 5 00:00:10,500 --> 00:00:12,990 >> TOMAS REIMERS: Mi smo dva CS50s TS. 6 00:00:12,990 --> 00:00:18,910 I danas smo vodeći na seminaru o JavaScript i CSS za web aplikacije. 7 00:00:18,910 --> 00:00:22,140 Ako želite pratiti zajedno, link je tamo. 8 00:00:22,140 --> 00:00:25,190 I ti želiš da ga stavi na računalo kratko? 9 00:00:25,190 --> 00:00:27,460 >> Tu je link. 10 00:00:27,460 --> 00:00:30,390 To je malo mjesto, koje ima veze s svi resursi da ćemo biti 11 00:00:30,390 --> 00:00:36,490 pokazujući vam danas i također ima puno korisne informacije koju je napisao nas 12 00:00:36,490 --> 00:00:39,680 pročitajte više u dubinu, kada se vratite, i sad se pokušava sjetiti što 13 00:00:39,680 --> 00:00:42,166 upravo smo rekli, ono što su pričaju, et cetera. 14 00:00:42,166 --> 00:00:43,870 >> MIKE Rizzo: U redu. 15 00:00:43,870 --> 00:00:44,890 Tako ćemo početi. 16 00:00:44,890 --> 00:00:45,700 >> TOMAS REIMERS: Dakle, želite početi? 17 00:00:45,700 --> 00:00:45,970 OK. 18 00:00:45,970 --> 00:00:47,170 >> MIKE Rizzo: Da. 19 00:00:47,170 --> 00:00:51,730 Dakle, prvo smo htjeli početi sa širokim Pregled o internetu i 20 00:00:51,730 --> 00:00:54,240 podnijeti vrste prilikom dizajniranja web stranice. 21 00:00:54,240 --> 00:00:57,550 Dok je ovaj prikaz možemo želim ući u JavaScriptu puno puno 22 00:00:57,550 --> 00:01:00,320 kasnije, htjeli smo krenuti s Samo, vrsta, kao i pogled iz ptičje perspektive 23 00:01:00,320 --> 00:01:03,270 U što website je i kako razmišljati o projektiranju 24 00:01:03,270 --> 00:01:04,800 website za početak. 25 00:01:04,800 --> 00:01:08,370 >> Dakle, vi, u ovom trenutku - s njom se u petak navečer - treba imati 26 00:01:08,370 --> 00:01:11,000 podnijeti svoj CS50 financije Problem postavlja. 27 00:01:11,000 --> 00:01:15,260 Nadam se, da je bio dobar ukus onoga što web programiranje može biti. 28 00:01:15,260 --> 00:01:18,261 No, ovdje želimo, vrsta, daju što drugi okus, kao dobro. 29 00:01:18,261 --> 00:01:23,190 >> TOMAS REIMERS: Dakle samo da ponovim ono što se događa, kad tip u URL-u 30 00:01:23,190 --> 00:01:26,650 Vaš web-preglednik, koji URL dobiva pogledao u računalo. 31 00:01:26,650 --> 00:01:28,590 I vaše računalo je povezano na drugo računalo, 32 00:01:28,590 --> 00:01:29,890 koje domaćini taj website. 33 00:01:29,890 --> 00:01:33,150 OK, pa kad idete na google.com, ti si povezan na jedan od Google a 34 00:01:33,150 --> 00:01:36,496 računala, koji ima slika za google.com. 35 00:01:36,496 --> 00:01:38,750 >> To onda pita za određenu datoteku. 36 00:01:38,750 --> 00:01:40,020 Dakle, ako idete na - 37 00:01:40,020 --> 00:01:41,550 Ne znam - 38 00:01:41,550 --> 00:01:48,170 example.com / index.html ili / test.html, idete tražiti 39 00:01:48,170 --> 00:01:49,340 tom datotekom. 40 00:01:49,340 --> 00:01:52,780 I web poslužitelja ide da vam ga vratiti. 41 00:01:52,780 --> 00:01:54,910 >> Zatim, nakon što proći kroz tu datoteku - 42 00:01:54,910 --> 00:01:57,750 43 00:01:57,750 --> 00:01:59,950 nakon što se računalo dobiva da je datoteka - to će početi 44 00:01:59,950 --> 00:02:00,820 izgraditi web stranicu. 45 00:02:00,820 --> 00:02:03,020 Dakle, sada je HTML datoteku, koja je vrsta kao što su 46 00:02:03,020 --> 00:02:05,170 Struktura web stranice. 47 00:02:05,170 --> 00:02:08,620 HTML datoteke također mogu referenca CSS datoteke, koje definiraju 48 00:02:08,620 --> 00:02:09,889 Stil web stranice. 49 00:02:09,889 --> 00:02:12,970 >> JavaScript datoteke, koji definira interakciji s web stranice. 50 00:02:12,970 --> 00:02:15,200 Slikovne datoteke, koje su samo slike. 51 00:02:15,200 --> 00:02:19,450 A možda i povezati s drugim HTML datoteke, koje zatim možete posjetiti. 52 00:02:19,450 --> 00:02:22,656 53 00:02:22,656 --> 00:02:24,380 >> MIKE Rizzo: OK, super. 54 00:02:24,380 --> 00:02:28,980 Dakle, vi ste sve, možda, mukotrpno postaviti svoj lokalni domaćin 55 00:02:28,980 --> 00:02:30,810 na svoj virtualni stroj. 56 00:02:30,810 --> 00:02:35,650 I to baš, nekako, je lokalna Domena da vaše računalo domaćini samo 57 00:02:35,650 --> 00:02:38,760 za vas na vlastitu IP adresu. 58 00:02:38,760 --> 00:02:43,300 >> Dakle, u okviru toga, tada možete dodati do njega vlastite web-stranice. 59 00:02:43,300 --> 00:02:47,655 Mislim, u CS50 financija, te bi trebao imati dodane neke HTML stranice, koje su, 60 00:02:47,655 --> 00:02:49,410 vrsta, zamotan u PHP omot. 61 00:02:49,410 --> 00:02:54,690 Ali na kraju, ono što vaše PHP stranice su izlaza je HTML. 62 00:02:54,690 --> 00:02:58,210 >> No misleći natrag na samom početku od pset, morali smo postavili 63 00:02:58,210 --> 00:03:00,890 dopusnice za sve, zar ne? 64 00:03:00,890 --> 00:03:07,270 Pa to samo u osnovi omogućuje nam tko može čitati, pisati, a možda i 65 00:03:07,270 --> 00:03:08,730 izvršiti svaki od datoteka. 66 00:03:08,730 --> 00:03:11,870 Tako ćemo učiniti brzo - hm? 67 00:03:11,870 --> 00:03:15,660 >> TOMAS REIMERS: Dakle, idemo to učiniti brzo demo. 68 00:03:15,660 --> 00:03:19,560 Dakle, samo da vas podsjetim, kada spojiti na Googleov računalo - 69 00:03:19,560 --> 00:03:20,690 tko - 70 00:03:20,690 --> 00:03:24,060 i tražiti datoteke, računalo prvi treba da biste bili sigurni da ste ovlašteni 71 00:03:24,060 --> 00:03:28,790 zapravo vidjeli tu datoteku ili pročitao da podnijeti, jer ne možete samo pitajte 72 00:03:28,790 --> 00:03:30,430 za bilo koju datoteku na tom računalu, zar ne? 73 00:03:30,430 --> 00:03:32,260 To bi bio sigurnosni rizik. 74 00:03:32,260 --> 00:03:37,020 >> Dakle, slika na sustavima koje koristimo, kao što su ovo CS50 aparata, imaju tri 75 00:03:37,020 --> 00:03:39,200 općenito ljudi koji mogu imati dozvole za nešto. 76 00:03:39,200 --> 00:03:41,610 Prvi je stvarna vlasnik spomenute datoteke. 77 00:03:41,610 --> 00:03:43,820 Druga je skupina koja datoteka pripada. 78 00:03:43,820 --> 00:03:46,090 Nećemo se usredotočiti previše na to. 79 00:03:46,090 --> 00:03:50,010 I zadnja stvar je, na neki način, kao što je svijet ili kao i svi drugi koji su je 80 00:03:50,010 --> 00:03:54,130 nije specifična za te datoteke i ne bilo kakvih vlasničkih prava nad njom. 81 00:03:54,130 --> 00:04:05,650 >> Dakle, ako imamo vlasnika, grupu, i onda svijet. 82 00:04:05,650 --> 00:04:10,510 I zatim, za svaki od ovih skupina, te može imati jedan od tri dozvole, 83 00:04:10,510 --> 00:04:13,010 OK, ili multipla od njih. 84 00:04:13,010 --> 00:04:15,070 Možete pročitao dozvole. 85 00:04:15,070 --> 00:04:16,560 Možete imati pravo dozvole. 86 00:04:16,560 --> 00:04:18,880 I vi možete imati izvršiti dozvole. 87 00:04:18,880 --> 00:04:22,060 >> Dakle, u smislu stvarnih vrste datoteka, čitati Dopuštenje je kao zapravo čitanje 88 00:04:22,060 --> 00:04:23,250 sadržaj datoteke. 89 00:04:23,250 --> 00:04:24,730 Pravo dopuštenje pisanje na spomenutom sliku. 90 00:04:24,730 --> 00:04:28,370 Izvršavanje dopuštenje trčanje file kao što učiniti kada pokrenete neku od 91 00:04:28,370 --> 00:04:29,620 Vaši CS50 projekata. 92 00:04:29,620 --> 00:04:32,190 93 00:04:32,190 --> 00:04:38,820 >> Dakle, kada razmišljamo o datotekama kao kad trebamo čitati HTML 94 00:04:38,820 --> 00:04:41,790 file, koji treba da bude svijet čitati, zar ne? 95 00:04:41,790 --> 00:04:44,420 Vjerojatno, također vlasnik želi da bi mogli urediti tu datoteku. 96 00:04:44,420 --> 00:04:46,610 Dakle, vlasnik će morati čitati i pisati dozvole. 97 00:04:46,610 --> 00:04:48,710 Oni zapravo ne trebaju izvršiti. 98 00:04:48,710 --> 00:04:50,950 >> Grupa, idemo u liječenju Isto kao što je svijet za sada. 99 00:04:50,950 --> 00:04:54,610 Zato što im je potrebno čitanje dopuštenja. 100 00:04:54,610 --> 00:04:57,310 No, oni ne trebaju pisati ili izvršavati dozvole. 101 00:04:57,310 --> 00:05:01,920 A sad, ako mislimo natrag na bivšeg PSETs, ono što smo shvatili je ta vrsta 102 00:05:01,920 --> 00:05:03,360 izgledaju kao binarnog, zar ne? 103 00:05:03,360 --> 00:05:04,210 1 označava da. 104 00:05:04,210 --> 00:05:05,040 0 za ne. 105 00:05:05,040 --> 00:05:06,870 I mi zapravo može prevesti to binarno. 106 00:05:06,870 --> 00:05:10,478 >> Dakle, 110 u binarnom bi 6. 107 00:05:10,478 --> 00:05:13,270 100 će biti 4. 108 00:05:13,270 --> 00:05:14,690 Sve sa svijetom. 109 00:05:14,690 --> 00:05:20,846 Dakle, broj koji bi se za dozvole za to će biti 644. 110 00:05:20,846 --> 00:05:24,400 >> MIKE Rizzo: A ako se sjetim kada chmoded nešto, ja vjerujem 111 00:05:24,400 --> 00:05:28,980 Dali su u problemu postaviti primjer što može učiniti 112 00:05:28,980 --> 00:05:36,470 nešto kao chmod 644 a zatim naziv datoteke. 113 00:05:36,470 --> 00:05:39,980 644 tada, sada možete vidjeti izravno gdje to dolazi. 114 00:05:39,980 --> 00:05:42,840 Dakle, nadamo se da se čini da je malo jasnije. 115 00:05:42,840 --> 00:05:45,600 >> A onda za vas tip je jasno - 116 00:05:45,600 --> 00:05:48,200 oh yeah, ovdje je to opet. 117 00:05:48,200 --> 00:05:53,260 Dakle, 600 onda bi samo biti primjer odustali smo ovdje gdje vlasnik ima 118 00:05:53,260 --> 00:05:56,360 čitati i desni dozvole, dok skupina i svijet nemaju dozvolu 119 00:05:56,360 --> 00:05:58,145 pristupiti datoteku. 120 00:05:58,145 --> 00:06:01,500 >> TOMAS REIMERS: I onda smo brzo Popis zajedničkih dozvolama. 121 00:06:01,500 --> 00:06:05,250 Dakle imenike, što želite zapravo chmod 711. 122 00:06:05,250 --> 00:06:08,930 Brzo na stranu - za katalog imati izvršnu dozvolu znači da bi mogli 123 00:06:08,930 --> 00:06:11,680 za otvaranje imenika. 124 00:06:11,680 --> 00:06:15,280 Slike, CSS, JavaScript, HTML potrebe 644, jer, u osnovi, Svjetska 125 00:06:15,280 --> 00:06:16,400 Potrebe za čitanje dopuštenja. 126 00:06:16,400 --> 00:06:20,960 >> I PHP, koji su ti dečki vidjeli iako mi neće govoriti o tome 127 00:06:20,960 --> 00:06:24,880 Strogo je obično chmoded s Dopuštenje 600 jer je pokrenuti s 128 00:06:24,880 --> 00:06:26,540 dopuštenja vlasnika. 129 00:06:26,540 --> 00:06:27,790 Barem na aparatu. 130 00:06:27,790 --> 00:06:30,200 131 00:06:30,200 --> 00:06:36,870 >> MIKE Rizzo: Dakle, ako vi to izričito odrediti vrstu datoteke 132 00:06:36,870 --> 00:06:39,480 Želite u zapravo postavljanje do ove prezentacije - 133 00:06:39,480 --> 00:06:43,490 smo imali problema s tim, jer sve što nije ispravno chmoded - 134 00:06:43,490 --> 00:06:47,550 ti si idući u dobiti, nekako, A Zabranjeno greška koja website 135 00:06:47,550 --> 00:06:49,700 ne zapravo imaju dozvolu pristupiti bez obzira na datoteku 136 00:06:49,700 --> 00:06:51,370 ga želite pristupiti. 137 00:06:51,370 --> 00:06:54,780 I naravno, da se može popraviti - kao u problemu postaviti - promjenom 138 00:06:54,780 --> 00:06:56,405 dozvole na odgovarajući način. 139 00:06:56,405 --> 00:06:59,620 >> TOMAS REIMERS: I zadnji komentar za brzo lokalnog razvoja je - mi 140 00:06:59,620 --> 00:07:02,000 donio ovo gore, ali samo smo htjeli to bi se opet - 141 00:07:02,000 --> 00:07:06,230 ako pita za poslužitelj - pa lokalni domaćin, primjerice, com ili bilo što. - 142 00:07:06,230 --> 00:07:09,170 i ne odredite određenu datoteku, file da vaše računalo ide 143 00:07:09,170 --> 00:07:11,540 tražiti se zove index.html. 144 00:07:11,540 --> 00:07:12,790 Ili ako to ne postoji, index.php. 145 00:07:12,790 --> 00:07:15,560 146 00:07:15,560 --> 00:07:16,350 >> Cool. 147 00:07:16,350 --> 00:07:19,560 Dakle, to je samo rekapitulacija svega, nadam se, da smo pokriveni u 148 00:07:19,560 --> 00:07:22,800 sekcija, a predavanje, i do sada je u CS50. 149 00:07:22,800 --> 00:07:26,110 A sada ćemo početi govoriti o posebno knjižnice. 150 00:07:26,110 --> 00:07:30,270 JavaScript i CSS knjižnice za web aplikacije. 151 00:07:30,270 --> 00:07:36,350 >> Dakle, jedan brzi od razloga zašto imamo knjižnice je programiranje - 152 00:07:36,350 --> 00:07:39,000 ima puno problema u programiranje, koji bi iskakanje gore 153 00:07:39,000 --> 00:07:40,570 opet, i opet, i opet. 154 00:07:40,570 --> 00:07:43,870 Možda ćete primijetiti da je puno web- potrebna mogućnost da se padajući 155 00:07:43,870 --> 00:07:49,100 izbornici, na primjer, ili je potrebna mogućnost da imaju vrlo standardni gumb 156 00:07:49,100 --> 00:07:51,400 stil, koji ne može biti najjednostavnija stvar. 157 00:07:51,400 --> 00:07:54,670 Sada kada počnete da se u HTML, što shvatiti da tipke mogu zapravo 158 00:07:54,670 --> 00:07:57,720 izgledaju jako ružno ako vam ne učiniti ništa. 159 00:07:57,720 --> 00:08:00,830 >> Dakle, puno ljudi su napisali zove knjižnice. 160 00:08:00,830 --> 00:08:02,990 I u tom kontekstu, oni su nazivaju okviri. 161 00:08:02,990 --> 00:08:04,790 Mi ćemo koristiti dva naizmjenično. 162 00:08:04,790 --> 00:08:07,360 A što su se oni u osnovi Premade dijelove koda - 163 00:08:07,360 --> 00:08:09,130 bilo CSS i JavaScript - 164 00:08:09,130 --> 00:08:13,240 koji oduzima puno udružiti imate u kodiranju. 165 00:08:13,240 --> 00:08:17,290 >> Tako su unaprijed definirati hrpa klase ili unaprijed definirati hrpu funkcija za 166 00:08:17,290 --> 00:08:20,110 JavaScript je slučaj, koji možete nazvati kasnije. 167 00:08:20,110 --> 00:08:22,690 I onda se, na neki način, dobiti pristup tom kodu bez 168 00:08:22,690 --> 00:08:23,710 koji se odnosi na sve. 169 00:08:23,710 --> 00:08:27,750 Primjer knjižnice je CS50.H. To je knjižnica, dali smo za vas natrag 170 00:08:27,750 --> 00:08:32,090 u tjedan dana jednom, što je omogućilo da učinite Takve stvari GetInt i GetString 171 00:08:32,090 --> 00:08:35,237 bez pisati bilo kod sebe. 172 00:08:35,237 --> 00:08:36,179 >> MIKE Rizzo: U redu. 173 00:08:36,179 --> 00:08:40,299 Pa evo, baš kao što smo morali uključiti u našoj c datoteke drugačije 174 00:08:40,299 --> 00:08:46,570 knjižnicama, mi također treba uključiti u naš HTML datoteke različite knjižnice. 175 00:08:46,570 --> 00:08:50,310 Na primjer, ako smo htjeli uključiti specifična JavaScript knjižnica ovdje, 176 00:08:50,310 --> 00:08:52,850 možda, onaj koji smo pismeni sami jer lokalno je ugostio 177 00:08:52,850 --> 00:08:56,000 nazivaju script.js, samo smo koristiti ovaj zapis. 178 00:08:56,000 --> 00:08:59,500 >> Dakle, imamo tipa skripta dosegne JavaScript izvor jednaki 179 00:08:59,500 --> 00:09:01,260 JavaScript.js. 180 00:09:01,260 --> 00:09:05,190 A ako mislite vratiti na svoj CS50 financije problema postaviti, ako ste gledali u 181 00:09:05,190 --> 00:09:09,190 header.php u mapu Obrasci, trebali ste vidjeti 182 00:09:09,190 --> 00:09:10,970 Neki od njih uključena. 183 00:09:10,970 --> 00:09:13,250 Dakle, ovo prvo - skripte - 184 00:09:13,250 --> 00:09:16,080 je uključujući i JavaScript knjižnica. 185 00:09:16,080 --> 00:09:18,760 Uključujući CSS knjižnicu je malo drugačiji. 186 00:09:18,760 --> 00:09:21,430 >> Evo, umjesto pisma Tag trebate link oznaku. 187 00:09:21,430 --> 00:09:27,110 A onda, upišite tekst CSS je malo drugačija. 188 00:09:27,110 --> 00:09:29,270 Vi ne moraju uvijek sadržavati rel style sheet. 189 00:09:29,270 --> 00:09:30,970 Ali mislim da je, generalno, dobra praksa. 190 00:09:30,970 --> 00:09:35,810 >> I onda napokon, HREF, koje vjerojatno vidio u svojim ATAGs za povezivanje 191 00:09:35,810 --> 00:09:39,440 u različitim vezama samo koje odredi link gdje se mogu naći to. 192 00:09:39,440 --> 00:09:42,250 Na primjer, ako smo htjeli povezati drugačija knjižnica - recimo samo - 193 00:09:42,250 --> 00:09:49,330 koji je živio u styles.css. 194 00:09:49,330 --> 00:09:54,030 A htjeli smo povezati da je u to domaćin na webu, što bi to razumio. 195 00:09:54,030 --> 00:09:58,834 A zatim zalijepite ga u što god imamo ovdje umjesto. 196 00:09:58,834 --> 00:10:01,340 >> TOMAS REIMERS: OK, nadam se da dečki su već upoznati 197 00:10:01,340 --> 00:10:02,410 s time kako povezati CSS. 198 00:10:02,410 --> 00:10:04,000 Morao si to učiniti na tvoja zadnja smeđa set. 199 00:10:04,000 --> 00:10:07,110 JavaScript, neki od vas možda imaju neka iskustva s. 200 00:10:07,110 --> 00:10:07,980 Neki od vas svibanj ne. 201 00:10:07,980 --> 00:10:12,190 >> Dakle, za sada, znamo da je JavaScript sliku je vrlo mnogo kao CSS datoteke u 202 00:10:12,190 --> 00:10:15,640 osjećaj da se možete povezati s njim ili da ga možete uključiti interno. 203 00:10:15,640 --> 00:10:17,360 I to vam omogućuje da se skripte stvari. 204 00:10:17,360 --> 00:10:21,820 A mi ćemo vas kroz Malo JavaScript kasnije. 205 00:10:21,820 --> 00:10:23,560 >> Dakle, koristite knjižnicu - 206 00:10:23,560 --> 00:10:26,150 nakon što ste ga uključiti, to je kao jednostavno kao doslovno nazivajući 207 00:10:26,150 --> 00:10:29,640 funkcije ili dodavanjem klase imena na njemu. 208 00:10:29,640 --> 00:10:32,220 Zadnja stvar koju želimo razgovarati o tome u smislu knjižnici - 209 00:10:32,220 --> 00:10:34,180 a to je više od tehničkog bilješku - 210 00:10:34,180 --> 00:10:35,860 je open source licenciranje. 211 00:10:35,860 --> 00:10:41,550 Dakle, kada ste pronašli ove stvarne knjižnice, možda se misli na 212 00:10:41,550 --> 00:10:47,630 pitanja poput je li u redu da sam samo korištenjem tuđe kôd, pogotovo 213 00:10:47,630 --> 00:10:51,970 jer to je nešto što mi jako puno Rekao da se ne učiniti u ovom tečaju. 214 00:10:51,970 --> 00:10:55,790 >> Dakle, u slučaju open source licence, puno developera - 215 00:10:55,790 --> 00:10:57,540 nakon što ste napisali knjižnicu, koji misle da bi mogla biti 216 00:10:57,540 --> 00:10:59,450 pomoći drugim ljudima - 217 00:10:59,450 --> 00:11:02,420 će ga objaviti na webu i dati mu licencu. 218 00:11:02,420 --> 00:11:06,620 I licenca osnovi kaže ja sam ovime davanje dozvole za druge 219 00:11:06,620 --> 00:11:11,250 ljudima da koriste ovaj komad softvera sa sljedećim vrsta 220 00:11:11,250 --> 00:11:13,230 propisima. 221 00:11:13,230 --> 00:11:16,100 >> Uključili smo vezu na dobrom mjestu na pomoći da razumiju licence u 222 00:11:16,100 --> 00:11:17,720 slučaju da naiđete na njih. 223 00:11:17,720 --> 00:11:21,680 Zajedničke odredbe su stvari kao što su vi ste dobrodošli da koriste moje knjižnicu tako 224 00:11:21,680 --> 00:11:23,000 god mi dati kredit. 225 00:11:23,000 --> 00:11:25,670 Vi ste dobrodošli da koristite svoju knjižnicu tako dugo kao kad se lomi 226 00:11:25,670 --> 00:11:26,790 da me ne krivi. 227 00:11:26,790 --> 00:11:30,310 Vi ste dobrodošli da koristite svoju knjižnicu tako dugo kao što ga ne koriste kako bi novac 228 00:11:30,310 --> 00:11:31,910 za sebe. 229 00:11:31,910 --> 00:11:34,130 To su vrste česte propisima. 230 00:11:34,130 --> 00:11:37,780 >> Za ovu CS50 konačnog projekta, oni Ne treba biti bitno zato super 231 00:11:37,780 --> 00:11:41,440 projekti koji ti dečki koriste se Vjerojatno već, na neki način, poznat. 232 00:11:41,440 --> 00:11:44,170 No, kada zapravo ide van u Svijet i početi koristiti knjižnice, koja 233 00:11:44,170 --> 00:11:48,100 može ili ne može, kao što je proveden neke od više popularnih one koje možemo 234 00:11:48,100 --> 00:11:49,780 će se kroz. 235 00:11:49,780 --> 00:11:53,310 Lijepo je biti u stanju razumjeti ove licence i to 236 00:11:53,310 --> 00:11:54,560 razumjeti što oni znače. 237 00:11:54,560 --> 00:11:58,120 238 00:11:58,120 --> 00:11:58,586 I ide natrag. 239 00:11:58,586 --> 00:12:00,960 >> MIKE Rizzo: OK. 240 00:12:00,960 --> 00:12:04,850 Dakle, sada se kreće na primjerima stvarne CSS. 241 00:12:04,850 --> 00:12:07,770 U tom trenutku do sada, možda nisu nailazili na to. 242 00:12:07,770 --> 00:12:10,300 No, možda su se susreli s njim u vaš svakodnevni život u kojem se nešto 243 00:12:10,300 --> 00:12:13,160 da izgleda jedan put na jednom browseru možda ne izgledaju isto 244 00:12:13,160 --> 00:12:14,880 Način na neki drugi preglednik. 245 00:12:14,880 --> 00:12:17,400 >> To se zove browser preglednik kompatibilnost. 246 00:12:17,400 --> 00:12:20,780 I sve to postaje sve više i više problema, pogotovo što 247 00:12:20,780 --> 00:12:25,260 preglednici poduzeti sve više i više slobode provesti ono što oni žele. 248 00:12:25,260 --> 00:12:28,440 Tako da prevlada da, postoje zapravo je velika knjižnica zove Normalize.CSS. 249 00:12:28,440 --> 00:12:32,236 250 00:12:32,236 --> 00:12:33,770 >> TOMAS REIMERS: Uključili smo vezu. 251 00:12:33,770 --> 00:12:36,210 U ovom trenutku, to je korisno ako imate svoj laptop tamo 252 00:12:36,210 --> 00:12:38,740 potrazi na mjestu. 253 00:12:38,740 --> 00:12:42,580 I dajemo vam to pravo Sada jednostavno zato CS50 finalu 254 00:12:42,580 --> 00:12:44,370 Projekt se zapravo događa na od vas tražiti da ga provede 255 00:12:44,370 --> 00:12:45,860 na sličan način i kroz preglednicima. 256 00:12:45,860 --> 00:12:49,250 >> Dakle, samo da bi u pozadini vašeg glava, ovo je prekrasno knjižnica 257 00:12:49,250 --> 00:12:51,170 jer će, na neki način, standardizirati stvari. 258 00:12:51,170 --> 00:12:54,230 U Firefox, nešto što se može pokazati kao jednog piksela na lijevoj strani. 259 00:12:54,230 --> 00:12:58,390 I onda Chrome može odlučiti da se zapravo ono što je značilo 10 piksela 260 00:12:58,390 --> 00:12:59,380 ulijevo. 261 00:12:59,380 --> 00:13:01,030 A želite standardizirati to. 262 00:13:01,030 --> 00:13:05,360 Normalize će zapravo napraviti stvarno dobar posao izrade sigurni da je vaša stranica 263 00:13:05,360 --> 00:13:08,070 izgleda isto preko preglednika. 264 00:13:08,070 --> 00:13:10,660 >> MIKE Rizzo: Pa, ako smo htjeli samo kliknite na link jako brzo i pokazati 265 00:13:10,660 --> 00:13:13,140 li što to izgleda, te Možete ga skinuti pomoću 266 00:13:13,140 --> 00:13:14,670 div Preuzimanje gumb. 267 00:13:14,670 --> 00:13:18,520 Ili sam vam da pročitate više o tome klikom na ovaj link u donjem 268 00:13:18,520 --> 00:13:19,310 desnom kutu. 269 00:13:19,310 --> 00:13:22,420 >> TOMAS REIMERS: A ako zaista kliknite opširnije tamo - 270 00:13:22,420 --> 00:13:24,340 kliknite izvor na GitHub - 271 00:13:24,340 --> 00:13:31,720 vi ste zapravo ćete vidjeti open source licencu na LICENSE.md tamo. 272 00:13:31,720 --> 00:13:35,740 I vidjet ćete ovdje vrlo popularan MIT licenca. 273 00:13:35,740 --> 00:13:38,940 Opet, ako ste pročitali tekst, moći ćete ga pronaći na web-mjestu 274 00:13:38,940 --> 00:13:42,550 mi upućuje prije i moći Razumijem ga, bez potrebe za čitanje 275 00:13:42,550 --> 00:13:45,920 kroz pravni žargon. 276 00:13:45,920 --> 00:13:46,850 >> MIKE Rizzo: OK, super. 277 00:13:46,850 --> 00:13:47,940 Dakle, to je normalizirati. 278 00:13:47,940 --> 00:13:49,190 Željeli smo dati da jako brzo. 279 00:13:49,190 --> 00:13:50,030 Oh, imate li pitanje? 280 00:13:50,030 --> 00:13:53,013 >> Ivanković: Pa kada ga skinuti, što samo slijedite taj kod kojeg će se morati 281 00:13:53,013 --> 00:13:54,098 pod gumb Preuzmi? 282 00:13:54,098 --> 00:13:55,860 >> TOMAS REIMERS: Da, tako kada ste preuzeli - 283 00:13:55,860 --> 00:13:58,130 >> MIKE Rizzo: Oh, to je super stvar. 284 00:13:58,130 --> 00:14:00,700 Dakle, pitanje je koliko je to mi zapravo ga skinuti? 285 00:14:00,700 --> 00:14:03,260 Dakle, ako mi kliknite na link, vidimo da se zapravo ne iskoči 286 00:14:03,260 --> 00:14:05,030 u izvornom kodu. 287 00:14:05,030 --> 00:14:08,550 Tako bi to učinili, što smo mogli Ne samo kliknite Spremi kao. 288 00:14:08,550 --> 00:14:10,830 Spremi kao i da bi trebalo dovesti do datoteku. 289 00:14:10,830 --> 00:14:14,160 A onda možemo spremiti to što je normalize.CSS. 290 00:14:14,160 --> 00:14:15,810 I onda bih to povezati u - 291 00:14:15,810 --> 00:14:18,660 >> TOMAS REIMERS: vi isti način povezati u bilo koje druge datoteke. 292 00:14:18,660 --> 00:14:22,250 A nakon što ga povezuju u, što je super o normalizirati je to zapravo će 293 00:14:22,250 --> 00:14:25,920 voditi brigu o svim hard rade samo po sebi. 294 00:14:25,920 --> 00:14:27,730 Što znači da nemate dodati sve razrede. 295 00:14:27,730 --> 00:14:29,690 >> Ne morate učiniti ništa čudno. 296 00:14:29,690 --> 00:14:34,590 To će normalizirati bez tebe radi ništa dalje. 297 00:14:34,590 --> 00:14:36,083 Da, morate ga uključiti. 298 00:14:36,083 --> 00:14:38,990 299 00:14:38,990 --> 00:14:40,240 Google Chrome ne reagira. 300 00:14:40,240 --> 00:14:43,270 301 00:14:43,270 --> 00:14:44,860 >> Samo brza stranu - 302 00:14:44,860 --> 00:14:46,800 Primijetio sam da smo skočili u ovo. 303 00:14:46,800 --> 00:14:49,010 Ostatak ove prezentacije je će biti brz pregled. 304 00:14:49,010 --> 00:14:50,380 Istraživanje o knjižnicama. 305 00:14:50,380 --> 00:14:52,710 >> Uglavnom, ono što su oni. 306 00:14:52,710 --> 00:14:53,350 Ono što im je činiti. 307 00:14:53,350 --> 00:14:54,060 Kako su korisni. 308 00:14:54,060 --> 00:14:56,540 Kako ste mogli provesti ih. 309 00:14:56,540 --> 00:14:59,730 Ako želite početi gleda na njih, sljedeće zajedno, i kroz čitanje 310 00:14:59,730 --> 00:15:01,990 ih, ja bih vrlo poticati da. 311 00:15:01,990 --> 00:15:07,620 >> Alternativno, na čemu također ih početi s preuzimanjem i uključujući 312 00:15:07,620 --> 00:15:11,400 ih u očima samo da vidim što oni izgledaju ili ono što im je činiti, ako imate 313 00:15:11,400 --> 00:15:12,270 vaš laptop ispred vas. 314 00:15:12,270 --> 00:15:14,650 Ako ne, vi ste dobrodošli da bi slušajući nama razgovarati. 315 00:15:14,650 --> 00:15:15,500 Mi ćemo nastaviti razgovarati. 316 00:15:15,500 --> 00:15:18,680 I mi imamo vremena na kraju, nadamo se mi zapravo ćete dobiti u pokazujem 317 00:15:18,680 --> 00:15:20,946 što su neki od tih knjižnica izgledati. 318 00:15:20,946 --> 00:15:22,320 >> MIKE Rizzo: Cool. 319 00:15:22,320 --> 00:15:25,466 U redu, tako da sada razgovarajmo o Font Awesome. 320 00:15:25,466 --> 00:15:30,480 >> TOMAS REIMERS: pa Font Strašan je stvarno uredan stranica, a posebno za one 321 00:15:30,480 --> 00:15:32,450 od nas koji su manje umjetnički talentiran. 322 00:15:32,450 --> 00:15:36,330 323 00:15:36,330 --> 00:15:38,880 Ignoriranje naziv fonta Strašan, daje vi hrpa ikona, koje su 324 00:15:38,880 --> 00:15:41,050 vrlo korisno. 325 00:15:41,050 --> 00:15:45,950 Dakle, puno vremena ćete provoditi Icon Vi svibanj želite kao lijep x pa 326 00:15:45,950 --> 00:15:47,170 da možete zatvoriti nešto. 327 00:15:47,170 --> 00:15:49,910 >> Ili možda želite nekakav Edit gumb s olovkom crtež kao 328 00:15:49,910 --> 00:15:50,940 svatko drugi ima. 329 00:15:50,940 --> 00:15:53,850 A to je kad ste saznali da crtanje one ikone mogu biti 330 00:15:53,850 --> 00:15:55,510 vrlo zahtjevan i težak. 331 00:15:55,510 --> 00:15:59,160 Font Strašan - ako zaista idi na mjestu - 332 00:15:59,160 --> 00:16:02,892 daje vam puno ikona ispod ikone na vrhu. 333 00:16:02,892 --> 00:16:06,980 Da, samo vrh. 334 00:16:06,980 --> 00:16:09,030 To će vam dati puno ikona za besplatno. 335 00:16:09,030 --> 00:16:15,210 >> Dakle, ovdje možete vidjeti da imamo stvari poput Zvjezdica, barovi, munjom, 336 00:16:15,210 --> 00:16:19,750 kalendar, bug, knjiga, et cetera. 337 00:16:19,750 --> 00:16:21,110 To može biti vrlo korisno. 338 00:16:21,110 --> 00:16:24,290 Način na koji su to što su doslovno CSS datoteku. 339 00:16:24,290 --> 00:16:29,760 I nakon što sam uključen u CSS datoteku, što možete učiniti je da stvorite 340 00:16:29,760 --> 00:16:33,430 tag zove I. satands za Icon S klase FA 341 00:16:33,430 --> 00:16:34,460 stoji za Font strašan. 342 00:16:34,460 --> 00:16:36,330 A onda, bez obzira na klasu želite. 343 00:16:36,330 --> 00:16:41,220 >> Dakle, ako sam htjela ikona ovog plusu trg upravo ovdje, dao bih 344 00:16:41,220 --> 00:16:43,290 ona klasa FA. 345 00:16:43,290 --> 00:16:46,230 I onda FA crticu plus crticu trgu. 346 00:16:46,230 --> 00:16:50,325 347 00:16:50,325 --> 00:16:53,710 >> MIKE Rizzo: Cool, OK. 348 00:16:53,710 --> 00:16:56,980 >> TOMAS REIMERS: A onda, zadnji CSS Knjižnica želimo proći smo 349 00:16:56,980 --> 00:16:59,950 pokušavajući ga zadržati minimalno na CSS biblioteke, jer mi shvaćamo 350 00:16:59,950 --> 00:17:03,660 Naslov ove prezentacije je JavaScript Knjižnice. 351 00:17:03,660 --> 00:17:07,089 No, mi smo mislili da možemo, kao i Vas upoznati s drugim knjižnicama 352 00:17:07,089 --> 00:17:09,569 dok smo razgovarali o knjižnicama. 353 00:17:09,569 --> 00:17:11,400 >> To je Google Web fontove. 354 00:17:11,400 --> 00:17:17,040 I ono što Google Web Fonts vam omogućuje učiniti je dodati fontove na svoju web stranicu, 355 00:17:17,040 --> 00:17:22,079 što je stvarno jednostavan način da to napravite lijepa i razlikovati svoj set 356 00:17:22,079 --> 00:17:24,460 od svih drugi je, ako ima Lijepo fonta ili ako ima lijep 357 00:17:24,460 --> 00:17:27,790 zbirka fontova. 358 00:17:27,790 --> 00:17:31,410 Google Web Fonts je lijepo za razliku od drugih knjižnice u smislu da je 359 00:17:31,410 --> 00:17:33,490 Stvarno vođeni instalacija. 360 00:17:33,490 --> 00:17:38,680 >> Dakle, ako slijedite link, to je google.com / fontove, vjerujem. 361 00:17:38,680 --> 00:17:41,100 Ako slijedite da vas Možete odabrati font. 362 00:17:41,100 --> 00:17:44,410 Možete birati na lijevoj strani od Debljina, kos, et cetera. 363 00:17:44,410 --> 00:17:48,970 A onda, nakon što ste odabrali jedan, možete kliknuti brzu uporabu. 364 00:17:48,970 --> 00:17:49,820 Upravo tamo. 365 00:17:49,820 --> 00:17:51,590 Dolje desno od okvira. 366 00:17:51,590 --> 00:17:54,380 367 00:17:54,380 --> 00:17:56,700 >> I onda, pomaknite se dolje. 368 00:17:56,700 --> 00:17:59,600 369 00:17:59,600 --> 00:18:02,650 Prije svega, oni vam dati CSS da vam je potrebno da se zapravo link na njega. 370 00:18:02,650 --> 00:18:03,330 Tamo je. 371 00:18:03,330 --> 00:18:05,170 Možete jednostavno kopirati i zalijepiti da u. 372 00:18:05,170 --> 00:18:07,250 A lijepe stvari o ovom jednom je što zapravo ne treba ni 373 00:18:07,250 --> 00:18:08,340 preuzeti datoteku. 374 00:18:08,340 --> 00:18:11,170 >> Što će to učiniti je što se događa link na Googleov inačicu. 375 00:18:11,170 --> 00:18:14,130 Vratimo se što to znači. 376 00:18:14,130 --> 00:18:18,270 To znači da kada korisnik preuzima datoteku - 377 00:18:18,270 --> 00:18:22,300 preuzima vaš HTML stranica - vaš HTML stranica ide na ovu datoteku. 378 00:18:22,300 --> 00:18:26,790 >> Dakle, vaše računalo će se vidjeti, Oh, to je domaćin na google.com a 379 00:18:26,790 --> 00:18:28,170 nego na theirsite.com. 380 00:18:28,170 --> 00:18:30,370 Pusti me pitaju Google za tu datoteku. 381 00:18:30,370 --> 00:18:32,800 A onda, što će uključiti to je gotovo kao da je 382 00:18:32,800 --> 00:18:35,584 dio svojih mjestu. 383 00:18:35,584 --> 00:18:36,540 >> TOMAS REIMERS: Cool. 384 00:18:36,540 --> 00:18:40,980 A nakon što su to, onda bi uključiti ga u svoj CSS, to vam daje 385 00:18:40,980 --> 00:18:41,830 stvarna linija. 386 00:18:41,830 --> 00:18:45,188 Dakle, postavljate fonta vlasništvo obitelji jednaka je ime svog fonta. 387 00:18:45,188 --> 00:18:47,936 388 00:18:47,936 --> 00:18:50,440 >> MIKE Rizzo: OK. 389 00:18:50,440 --> 00:18:52,220 Tako smo upravo završili sa CSS. 390 00:18:52,220 --> 00:18:57,230 A neki od vas možda misle, dobro, imali smo neke CSS na CS50 financija. 391 00:18:57,230 --> 00:19:00,390 Ali CSS knjižnica bila bootstrap. 392 00:19:00,390 --> 00:19:05,190 Mi zapravo su Bootstrap malo kasnije u JavaScriptu, jer s 393 00:19:05,190 --> 00:19:09,660 Bootstrap CSS knjižnica dolazi s puno JavaScript toj 394 00:19:09,660 --> 00:19:12,060 Bootstrap ili Twitter - koji je Bootstrap - 395 00:19:12,060 --> 00:19:15,426 koristi za upravljanje svim njihovim CSS. 396 00:19:15,426 --> 00:19:19,592 >> TOMAS REIMERS: Ima li tko bilo pitanja do sada oko CSS-u cjelini? 397 00:19:19,592 --> 00:19:20,723 Mi smo dobri? 398 00:19:20,723 --> 00:19:21,216 Strašan. 399 00:19:21,216 --> 00:19:22,495 >> MIKE Rizzo: Strašan. 400 00:19:22,495 --> 00:19:25,136 >> TOMAS REIMERS: Pa kreće na JavaScript. 401 00:19:25,136 --> 00:19:27,900 >> MIKE Rizzo: Dakle, htjeli smo razgovarati o jQuery za početak. 402 00:19:27,900 --> 00:19:30,780 Je li itko čuo za jQuery prije ili ga koristiti? 403 00:19:30,780 --> 00:19:32,180 Da, par? 404 00:19:32,180 --> 00:19:36,000 Dakle, ako ste upravo rad s porijeklom JavaScript, pronaći ćete i sami 405 00:19:36,000 --> 00:19:41,000 tipkanje puno dugih selektora puno. 406 00:19:41,000 --> 00:19:44,400 Pa što jQuery se je ona pruža Lijepo omot za JavaScript 407 00:19:44,400 --> 00:19:48,180 jezik koji omogućuje jednostavno odabrati i manipulirati različitih elemenata 408 00:19:48,180 --> 00:19:52,470 u model objekta dokumenta za Web stranica ili DOM, što mislim 409 00:19:52,470 --> 00:19:54,290 ti dečki su se čuli u predavanje u ovom trenutku. 410 00:19:54,290 --> 00:19:57,550 >> TOMAS REIMERS: Ako još niste čuli to ili ako niste gledali predavanje 411 00:19:57,550 --> 00:20:01,870 ipak, Document Object Model je osnovi kako stvari su zastupljene. 412 00:20:01,870 --> 00:20:05,290 Dakle HTML vrsta izgleda kao drvo kada zapravo ga izvući. 413 00:20:05,290 --> 00:20:06,850 Imate HTML element na vrhu. 414 00:20:06,850 --> 00:20:07,560 Imate glavu i tijelo. 415 00:20:07,560 --> 00:20:09,500 >> A onda, u roku koji ima sve ostalo. 416 00:20:09,500 --> 00:20:10,660 To se naziva DOM - 417 00:20:10,660 --> 00:20:12,120 Document Object Model. 418 00:20:12,120 --> 00:20:16,090 Dakle model koji predstavlja predmete u Dokument je jednostavan način da misle 419 00:20:16,090 --> 00:20:18,560 o tome. 420 00:20:18,560 --> 00:20:22,520 A jedan od velikih stvari o jQuery je li to stvarno čini poprijeko 421 00:20:22,520 --> 00:20:26,460 da i manipulatorski elementi unutar da je nevjerojatno jednostavna. 422 00:20:26,460 --> 00:20:30,300 >> Dakle, jednostavan, u stvari, da je većina JavaScript knjižnicama ili ako ne 423 00:20:30,300 --> 00:20:34,200 Većina, velika većina onih vidjet ćete zapravo zahtijevaju jQuery tako 424 00:20:34,200 --> 00:20:37,530 da oni mogu sami pokrenuti jednostavno jer ako nisu imali jQuery, te 425 00:20:37,530 --> 00:20:40,540 će trošiti mnogo vremena pokušavajući shvatiti kako odabrati određeni 426 00:20:40,540 --> 00:20:43,660 elementi i kako raditi druge stvari. 427 00:20:43,660 --> 00:20:47,950 I druga velika stvar o jQuery je da je križ preglednik kompatibilan. 428 00:20:47,950 --> 00:20:51,550 >> Pa sjetite se vratiti kada smo rekli da je nisu svi preglednici provesti 429 00:20:51,550 --> 00:20:53,100 stvari na isti način? 430 00:20:53,100 --> 00:20:55,120 To vrijedi čak i JavaScript. 431 00:20:55,120 --> 00:20:58,220 A jedan od velikih stvari o jQuery je da će otkriti 432 00:20:58,220 --> 00:21:00,300 preglednik i otkrivanje prikladna metoda. 433 00:21:00,300 --> 00:21:03,420 >> Dakle, ako vam je potrebno odabrati element, Internet Explorer moglo bi se reći da si 434 00:21:03,420 --> 00:21:05,770 trebali raditi na ovaj način. 435 00:21:05,770 --> 00:21:08,300 Firefox moglo reći točne način je na ovaj način. 436 00:21:08,300 --> 00:21:09,710 jQuery ne brine. 437 00:21:09,710 --> 00:21:12,550 Kada reći jQuery za odabir element koji će shvatiti kako je to 438 00:21:12,550 --> 00:21:16,290 Trebao bi to učiniti u pregledniku Korisnik je trenutno u, a zatim napraviti 439 00:21:16,290 --> 00:21:18,584 ga na taj način. 440 00:21:18,584 --> 00:21:22,650 >> MIKE Rizzo: Pa nemojmo govoriti o korištenje jQuery malo. 441 00:21:22,650 --> 00:21:27,670 Baš kao što su PHP, jQuery ima posebno ljubav za dolar znak. 442 00:21:27,670 --> 00:21:30,880 Dakle, vidjet ćete da bilo jQuery - 443 00:21:30,880 --> 00:21:32,060 dobro, ne sve. 444 00:21:32,060 --> 00:21:35,210 Ponekad možete zamijeniti dolar prijavite se riječju jQuery. 445 00:21:35,210 --> 00:21:38,980 No, općenito, samo zato što je kraći, kad god vidim jQuery se 446 00:21:38,980 --> 00:21:41,420 koristi to će biti s znak dolara. 447 00:21:41,420 --> 00:21:47,030 >> Dakle, ovdje mi samo pokazuje početak gumb za element u DOM. 448 00:21:47,030 --> 00:21:52,850 Evo, imamo znak dolara slijedi otvorenih zagrada i onda citati. 449 00:21:52,850 --> 00:21:56,130 A unutar navodnika ide naše selektora za različite elemente. 450 00:21:56,130 --> 00:21:59,810 Baš kao u CSS, morali smo selektora da biti u stanju oblikovati različite elemente 451 00:21:59,810 --> 00:22:00,840 u stranicu. 452 00:22:00,840 --> 00:22:06,555 Ti različiti selektora prevesti točno u jQuery i JavaScript, 453 00:22:06,555 --> 00:22:07,820 za najveći dio. 454 00:22:07,820 --> 00:22:10,120 >> Dakle, ovdje imamo dot foo. 455 00:22:10,120 --> 00:22:14,780 Dakle, ako se sjećate iz predavanja, dot samo znači klasu. 456 00:22:14,780 --> 00:22:18,850 Tako smo odabirom elementa u klasi foo. 457 00:22:18,850 --> 00:22:22,670 Dakle, ako sam ići naprijed i otvoriti naše JavaScript konzola ovdje jako brzo 458 00:22:22,670 --> 00:22:26,830 samo ga pokazati, ako sam samo tip znak dolara, vidimo da je to neka 459 00:22:26,830 --> 00:22:28,090 funkcija koja dolazi. 460 00:22:28,090 --> 00:22:29,420 A to je upravo definirana jQuery. 461 00:22:29,420 --> 00:22:32,120 >> TOMAS REIMERS: Za one od vas upoznati, konzola je alat 462 00:22:32,120 --> 00:22:35,430 unutar preglednika Chrome, koji vam omogućuje da se, osnovi, trčanje JavaScript na 463 00:22:35,430 --> 00:22:36,450 trenutna stranica. 464 00:22:36,450 --> 00:22:39,420 To ćete naći nevjerojatno korisno kada ti si zapravo ispravljanje pogrešaka, a vi 465 00:22:39,420 --> 00:22:42,400 trebaju biti kao što je trenutna Vrijednost neke globalne varijable ili ono 466 00:22:42,400 --> 00:22:43,910 je nešto drugo? 467 00:22:43,910 --> 00:22:47,620 To je vrsta kao što GDB s izuzetkom da možete zapravo 468 00:22:47,620 --> 00:22:51,600 manipulirati elemente na stranici s je u mnogo lakši način. 469 00:22:51,600 --> 00:22:55,080 A isto tako to ne, u osnovi, provjerite s vama prije nego se to dogodi ništa. 470 00:22:55,080 --> 00:22:58,660 >> Dakle, budući da je, GDB moglo biti kao, jesi li sigurni da želite pokrenuti sljedeći korak? 471 00:22:58,660 --> 00:22:59,830 Konzola je u real. 472 00:22:59,830 --> 00:23:03,690 Dakle, kao što je web-stranica se renderiranje i radite što god to radi, 473 00:23:03,690 --> 00:23:05,720 Vijeće je također pokrenut uz njega. 474 00:23:05,720 --> 00:23:08,330 A možete staviti imputirati kod u da konzola, koje će 475 00:23:08,330 --> 00:23:09,260 se izvoditi na stranici. 476 00:23:09,260 --> 00:23:12,190 >> MIKE Rizzo: Dakle, za ulazak u konzolu, Mislim da treba ukratko 477 00:23:12,190 --> 00:23:13,750 napomenuti kako se to radi. 478 00:23:13,750 --> 00:23:17,850 U posljednjih probleme koje imate koristi Chrome-a pregledat elementa 479 00:23:17,850 --> 00:23:20,440 funkcije ili prikaz stranica izvor - 480 00:23:20,440 --> 00:23:23,870 i oni su dostupni samo pravo Klikom na stranici ili određene 481 00:23:23,870 --> 00:23:28,430 element i radi bilo pregledati element ili prikaz stranica izvor. 482 00:23:28,430 --> 00:23:31,190 Također, možete pristupiti JavaScript konzola izravno 483 00:23:31,190 --> 00:23:33,630 odabiru pregledati element. 484 00:23:33,630 --> 00:23:37,930 Pa onda samo hit konzole na desnoj strani. 485 00:23:37,930 --> 00:23:41,900 >> Alternativno, možete se također može otići na gornjem desnom kutu, 486 00:23:41,900 --> 00:23:46,820 koji je odsječen na ovom zaslonu, gdje ima tri vodoravne pruge. 487 00:23:46,820 --> 00:23:52,010 A što silaze alata i onda JavaScript konzola 488 00:23:52,010 --> 00:23:53,240 Ovdje gdje se mogu vidjeti - 489 00:23:53,240 --> 00:23:54,370 barem na Windowsima - 490 00:23:54,370 --> 00:23:59,680 prečac Kontrola Shift J. Dakle ako smo htjeli da odaberete neki element 491 00:23:59,680 --> 00:24:06,060 u ovoj stranici, baš kao što sam pokazao prije, činimo znak dolara otvorene parens 492 00:24:06,060 --> 00:24:08,180 a onda citira. 493 00:24:08,180 --> 00:24:11,750 >> Zanimljivo je, u pravilu, jednokrevetne citati i dvokrevetne citati su 494 00:24:11,750 --> 00:24:12,370 zamjenjivi. 495 00:24:12,370 --> 00:24:16,050 Dakle, puno ljudi jednostavno korištenje single citati, jer oni su brže tipkati 496 00:24:16,050 --> 00:24:19,780 nego navodnicima, jer ne znaš moraju držite Shift. 497 00:24:19,780 --> 00:24:21,770 Dakle, samo ću to učiniti upravo sada. 498 00:24:21,770 --> 00:24:24,510 >> Dakle, želim da odaberete nešto s klase. 499 00:24:24,510 --> 00:24:27,200 Kontejnera, samo zato što znam da je nešto što je na našoj 500 00:24:27,200 --> 00:24:28,740 web stranica upravo sada. 501 00:24:28,740 --> 00:24:29,520 I pogodio Enter. 502 00:24:29,520 --> 00:24:31,670 I možemo vidjeti da ga bira. 503 00:24:31,670 --> 00:24:34,990 Dakle, pokazuje se da je vratio taj objekt. 504 00:24:34,990 --> 00:24:36,620 Dakle, to je osnovni izbor. 505 00:24:36,620 --> 00:24:40,080 Ako bismo htjeli da zapravo manipuliraju, te će morati nazvati nešto 506 00:24:40,080 --> 00:24:43,925 na tom izboru, koji se Mi ćemo ući u kasnije. 507 00:24:43,925 --> 00:24:49,030 >> TOMAS REIMERS: Dakle, samo da pogledate kako više u dubinu, to se ne razlikuje 508 00:24:49,030 --> 00:24:52,245 od funkcija poziva smo napravili u C. Ime funkcionirala je 509 00:24:52,245 --> 00:24:52,580 malo čudno. 510 00:24:52,580 --> 00:24:55,640 To je znak za dolar. 511 00:24:55,640 --> 00:24:57,010 To je samo naziv funkcije. 512 00:24:57,010 --> 00:24:58,810 Nema ništa posebno o tome. 513 00:24:58,810 --> 00:25:00,450 >> Mi imamo otvorene zagrade. 514 00:25:00,450 --> 00:25:03,880 Zatim, mi imamo jedan argument, koji u ovom slučaju se dogodi da se string, 515 00:25:03,880 --> 00:25:05,680 što je selektor za to. 516 00:25:05,680 --> 00:25:08,130 I onda, mi imamo zatvorena zagrada. 517 00:25:08,130 --> 00:25:09,960 To je sve. 518 00:25:09,960 --> 00:25:11,500 >> Nije da je znatno drugačija. 519 00:25:11,500 --> 00:25:12,900 Iako, to ne izgleda jako čudno. 520 00:25:12,900 --> 00:25:17,220 I to može biti, na neki način, ne lijepi točka za puno ljudi. 521 00:25:17,220 --> 00:25:21,460 >> MIKE Rizzo: Dakle, na sličan način, ako smo htjeli odabrati jedan element koji ima ID, 522 00:25:21,460 --> 00:25:23,470 Sada želimo odabrati prema ID umjesto klasi. 523 00:25:23,470 --> 00:25:28,080 To će biti slična stvar gdje smo samo napraviti oštar znak za ID. 524 00:25:28,080 --> 00:25:33,576 Pa mi smo ovdje svi odabirom elementi koji imaju osobnu traku. 525 00:25:33,576 --> 00:25:35,400 >> TOMAS REIMERS: I to se proteže. 526 00:25:35,400 --> 00:25:36,450 To CSS proširuje. 527 00:25:36,450 --> 00:25:42,260 Baš kao u CSS, možete odabrati sve linkovi, koji imaju klasnu Foo. 528 00:25:42,260 --> 00:25:43,420 Evo, to je ista stvar. 529 00:25:43,420 --> 00:25:52,750 >> Ti bi mogao napraviti a.foo, što bi odabrali sve veze s razredom foo. 530 00:25:52,750 --> 00:25:58,860 Ti bi mogao napraviti oštar bar, koji bi odaberite vezu s ID-bara i tako 531 00:25:58,860 --> 00:25:59,770 u i tako dalje. 532 00:25:59,770 --> 00:26:02,120 Svaki selektor CSS je valjana Selektor jQuery. 533 00:26:02,120 --> 00:26:03,370 >> MIKE Rizzo: Da. 534 00:26:03,370 --> 00:26:07,996 535 00:26:07,996 --> 00:26:11,460 U redu, tako da sada idemo na malo manipulacije koje možemo učiniti s 536 00:26:11,460 --> 00:26:12,870 naš jQuery. 537 00:26:12,870 --> 00:26:19,280 Dakle jQuery ima određenu vrstu bilježenja gdje smo samo koristiti 538 00:26:19,280 --> 00:26:20,170 uskličnik na kraju. 539 00:26:20,170 --> 00:26:23,340 A možete misliti na to kao u C kako bismo imali različite tvorevina. 540 00:26:23,340 --> 00:26:27,110 I da ide u tim tvorevina, što bi koristite točku ući u njih. 541 00:26:27,110 --> 00:26:28,480 >> To je, na neki način, slična stvar. 542 00:26:28,480 --> 00:26:33,570 Tek sada imamo funkcije unutar ovog Selector da možemo pozvati na njega. 543 00:26:33,570 --> 00:26:38,640 Pa evo, prvi primjer možete vidjeti je selektor CSS. 544 00:26:38,640 --> 00:26:45,290 I zapravo, ono da se je to primjenjuje se prvi element CSS na to 545 00:26:45,290 --> 00:26:46,230 stvar koju ste odabrali - 546 00:26:46,230 --> 00:26:47,720 ovaj element koji ste odabrali - 547 00:26:47,720 --> 00:26:49,290 s vrijednošću toga. 548 00:26:49,290 --> 00:26:55,390 >> TOMAS REIMERS: Pa lako prijevod da bi se, ako jQuery, u osnovi, 549 00:26:55,390 --> 00:26:57,790 samo je foo. 550 00:26:57,790 --> 00:27:05,480 A onda u CSS rekao, crvena boja i bliski. 551 00:27:05,480 --> 00:27:06,670 To je ista ideja. 552 00:27:06,670 --> 00:27:08,800 Ono što je učinjeno, to je odabrana svi Foo elemenata. 553 00:27:08,800 --> 00:27:10,170 A onda je primijenjena. 554 00:27:10,170 --> 00:27:15,884 Na neki način, u boji nekretnina jednaka crveno. 555 00:27:15,884 --> 00:27:21,070 >> MIKE Rizzo: Slično tome, možemo također mijenjaju stvarni sadržaj onoga što je 556 00:27:21,070 --> 00:27:24,870 pokazujući na HTML stranice, koji stvarno cool, jer to znači da je 557 00:27:24,870 --> 00:27:28,095 Web stranice se sada može biti potpuno dinamičan i ne moraju biti statički 558 00:27:28,095 --> 00:27:31,660 da vam ispisati koristeći PHP na samom početku 559 00:27:31,660 --> 00:27:33,320 stranica se učitava. 560 00:27:33,320 --> 00:27:36,810 Pa evo, ako smo htjeli mijenjati Stvarni HTML stranice, mi bismo sada 561 00:27:36,810 --> 00:27:43,550 nazvati HTML funkciju, koja onda samo umetci god smo naveli u 562 00:27:43,550 --> 00:27:45,390 koji element koji smo izabrani. 563 00:27:45,390 --> 00:27:49,810 Dakle ovdje smo odabirom elementa s Klasa Foo a onda kaže da je HTML 564 00:27:49,810 --> 00:27:52,200 to je sada Pozdrav svijetu. 565 00:27:52,200 --> 00:27:55,600 >> TOMAS REIMERS: I kada razmišljam o Koji su korisne aplikacije 566 00:27:55,600 --> 00:28:00,800 ovo, ovo je jedan CSS, prva stvar koja možete početi razmišljati o tome je 567 00:28:00,800 --> 00:28:03,070 u smislu, čak i padajući izbornici. 568 00:28:03,070 --> 00:28:08,350 Ti bi mogao početi raditi stvari kao što su, kada je Korisnik lebdi nad gornjem dijelu 569 00:28:08,350 --> 00:28:11,970 u padajući, želite napraviti donji dio vidljiv. 570 00:28:11,970 --> 00:28:12,540 Zar ne? 571 00:28:12,540 --> 00:28:15,610 >> Tako je u CSS, imamo svojstva napraviti nešto vidljivo. 572 00:28:15,610 --> 00:28:19,330 Stvari kao prikaz debelog nitko će učiniti nevidljivim. 573 00:28:19,330 --> 00:28:21,190 Prikaz blok će učiniti vidljivim. 574 00:28:21,190 --> 00:28:25,860 Ili čak i ako želite ići jednostavnije, te ima stvari poput vidljivosti jednakima 575 00:28:25,860 --> 00:28:27,520 vidljivi, a vidljivost jednaka skriveno. 576 00:28:27,520 --> 00:28:30,330 577 00:28:30,330 --> 00:28:34,780 >> A ti bi mogao početi provoditi stvari kao padajući izbornici pravo 578 00:28:34,780 --> 00:28:38,410 Nakon što ste dobili kroz ideju kako Možete li shvatiti kad se to otvara, 579 00:28:38,410 --> 00:28:39,850 što ćemo dobiti kroz vrlo kratko. 580 00:28:39,850 --> 00:28:42,160 No, možemo početi vidjeti aplikacije za to. 581 00:28:42,160 --> 00:28:45,540 Na sličan način, ako su to probati i provesti, recimo, chatu 582 00:28:45,540 --> 00:28:48,620 engine i želite napraviti nešto govor mjehurić dođe kad god ste 583 00:28:48,620 --> 00:28:52,880 dobio novu poruku, nakon što se nova poruka, možete napraviti malo 584 00:28:52,880 --> 00:28:55,890 govor mjehurić smisliti mijenjanjem HTML stranice, zar ne? 585 00:28:55,890 --> 00:29:00,540 Dodavanjem taj dodatni oblačića uz dodatni tekst u tamo. 586 00:29:00,540 --> 00:29:01,140 Da? 587 00:29:01,140 --> 00:29:07,750 >> Ivanković: Pa što će položiti u roku HTML kod u vrsta kao 588 00:29:07,750 --> 00:29:10,534 [Nečujan]? 589 00:29:10,534 --> 00:29:12,940 >> MIKE Rizzo: Točno. 590 00:29:12,940 --> 00:29:16,190 Da, mi ćemo doći do toga u malo. 591 00:29:16,190 --> 00:29:18,810 Da, to je slično malo u PHP. 592 00:29:18,810 --> 00:29:21,240 Nije baš slični. 593 00:29:21,240 --> 00:29:24,730 >> Dobra distinkcija da je ono što ovaj je zapravo uređivanje kad smo uredili 594 00:29:24,730 --> 00:29:28,480 stranica, jer to neće biti uređivanje stvarnu sliku koja se 595 00:29:28,480 --> 00:29:31,380 čuvaju na poslužitelju, jer svijet Ne bi trebao imati dozvolu 596 00:29:31,380 --> 00:29:32,610 urediti svoje datoteke. 597 00:29:32,610 --> 00:29:36,080 To je samo uređivanjem što je na stranici i što je se prikazuje u 598 00:29:36,080 --> 00:29:36,950 preglednik. 599 00:29:36,950 --> 00:29:40,340 Dakle, ako ste bili na ponovno učitati stranicu nakon, kažu, brisanje nešto što mi 600 00:29:40,340 --> 00:29:44,730 vidjeti što možemo učiniti s uklanjanja poziv, ta stvar bi zatim ponovno pojaviti. 601 00:29:44,730 --> 00:29:48,590 >> TOMAS REIMERS: Dakle, jedan način razmišljanja o to je, ako sam računalo i 602 00:29:48,590 --> 00:29:50,170 Mike je, na neki način, poslužitelja. 603 00:29:50,170 --> 00:29:53,850 Što će se dogoditi je da ću pitati Mikea, hej, mogu li dobiti kopiju 604 00:29:53,850 --> 00:29:54,630 ova web stranica? 605 00:29:54,630 --> 00:29:56,190 A on će mi dati kopiju. 606 00:29:56,190 --> 00:29:57,430 >> Ne, to nije izvorna stvar. 607 00:29:57,430 --> 00:29:58,620 To je samo kopija. 608 00:29:58,620 --> 00:30:00,450 A onda bi to bilo kao, oh, tu je JavaScript ovdje. 609 00:30:00,450 --> 00:30:02,450 Jasno, ja bi trebao urediti stranica mora biti ovako. 610 00:30:02,450 --> 00:30:04,250 I ja sam uređivanje svoj primjerak. 611 00:30:04,250 --> 00:30:05,920 >> No, to nije izazvalo stvarna kopija. 612 00:30:05,920 --> 00:30:08,480 A ako su i da ga opet pitam osvježite stranicu, - 613 00:30:08,480 --> 00:30:10,060 hej, mogu li dobiti još jednu čistu kopiju - 614 00:30:10,060 --> 00:30:11,440 on će mi dati još jedna čista kopija. 615 00:30:11,440 --> 00:30:14,240 A onda, ja ću učiniti istu stvar kao, oh, to JS da se ovdje govori 616 00:30:14,240 --> 00:30:14,866 urediti ovo. 617 00:30:14,866 --> 00:30:17,460 A ja ću zadržati taj događaj. 618 00:30:17,460 --> 00:30:20,930 >> MIKE Rizzo: Pa stvarno super stvar koje možete učiniti s jQuery je 619 00:30:20,930 --> 00:30:24,350 zapravo dodati različite vrste animacije na svoju stranicu. 620 00:30:24,350 --> 00:30:27,440 Ja ne znam da li ste ikada vidjeli gdje pokušavate na ispunite obrazac 621 00:30:27,440 --> 00:30:31,250 online, a vi ne ispunite Pravilno stvari. 622 00:30:31,250 --> 00:30:33,440 Tako mala stvar klizi prema dolje na vrhu i kaže vam 623 00:30:33,440 --> 00:30:34,820 nisu to učinili kako treba. 624 00:30:34,820 --> 00:30:36,260 Molimo pokušajte ponovno. 625 00:30:36,260 --> 00:30:37,890 I onda, možda čak i samo povucite prema gore. 626 00:30:37,890 --> 00:30:40,710 >> Ispada jQuery je izgrađen u funkcijama da bi sve to 627 00:30:40,710 --> 00:30:44,180 animacije jako, jako jednostavno. 628 00:30:44,180 --> 00:30:46,750 Tako je prvi fade od funkcija, koje 629 00:30:46,750 --> 00:30:47,710 možete pozvati na nešto. 630 00:30:47,710 --> 00:30:55,650 I to je način da se promijeni CSS od taj element u animiranom način. 631 00:30:55,650 --> 00:30:58,480 Tako to traje bez obzira elementa ga zovu fade out na. 632 00:30:58,480 --> 00:31:03,990 A onda, polako se mijenja to je neprozirnost dok se ne ide potpuno transparentno. 633 00:31:03,990 --> 00:31:07,330 >> TOMAS REIMERS: Drugi popularan jedan je slajd dolje, što će učiniti 634 00:31:07,330 --> 00:31:08,800 nešto što se pojaviti tako da spuštanju. 635 00:31:08,800 --> 00:31:12,840 Dakle, u slučaju izbornika padajući, opet, kad smo naučili kako otkriti 636 00:31:12,840 --> 00:31:15,310 kada je to lebdio nad, mogli bi samo reći ovo dno 637 00:31:15,310 --> 00:31:16,910 dio spustiti. 638 00:31:16,910 --> 00:31:19,270 A onda, ona će se pojaviti po spuštanju. 639 00:31:19,270 --> 00:31:22,042 640 00:31:22,042 --> 00:31:26,590 >> MIKE Rizzo: I onda, ako baš morate neka vrsta animacije u vidu da 641 00:31:26,590 --> 00:31:29,080 jQuery nužno ne daju. 642 00:31:29,080 --> 00:31:32,690 Na primjer, recimo jQuery daje li s toboganom 643 00:31:32,690 --> 00:31:33,750 dolje i slide up. 644 00:31:33,750 --> 00:31:36,740 Pa, recimo da je htio da slajd nešto s lijeva ili s 645 00:31:36,740 --> 00:31:39,880 Pravo vrsta kao što su CS50 Glavna stranica se kad god 646 00:31:39,880 --> 00:31:42,080 idete na novoj ploči. 647 00:31:42,080 --> 00:31:45,030 Nakon toga će se vjerojatno morati provoditi ga sami koristite 648 00:31:45,030 --> 00:31:49,310 animirati funkciju unutar jQuery. 649 00:31:49,310 --> 00:31:51,350 >> Dakle, na sličan način, samo animirati. 650 00:31:51,350 --> 00:31:55,850 A onda, u njemu je potrebno rječnik različite vrijednosti 651 00:31:55,850 --> 00:31:57,340 da ste trebali proći. 652 00:31:57,340 --> 00:32:06,960 Pa evo, ako smo htjeli animirati Element Foo kao da je njegova širina bilo 653 00:32:06,960 --> 00:32:10,880 Proširuje ili ugovora na 80 piksela, ovisno o tome što je trenutno. 654 00:32:10,880 --> 00:32:14,100 Mi bismo samo proći da je kao Argument u njemu. 655 00:32:14,100 --> 00:32:18,060 >> Animiranje također imaju neke druge argumente da bi mogao proći, primjerice, 656 00:32:18,060 --> 00:32:21,150 Brzina animacije da želite da ga dati. 657 00:32:21,150 --> 00:32:26,220 I za to, ja bih samo reći Brzo Google jQuery animirati. 658 00:32:26,220 --> 00:32:31,710 I onda, odgaja ovu stranicu, možete vidim da ima hrpa različitih 659 00:32:31,710 --> 00:32:33,560 svojstva koja ga može proći. 660 00:32:33,560 --> 00:32:35,990 >> I ja podržavam - kad god dođe na nešto što vi ne 661 00:32:35,990 --> 00:32:40,390 Znaš ili samo želite saznati više o Posebno metoda koje možete nazvati 662 00:32:40,390 --> 00:32:41,270 na nešto - 663 00:32:41,270 --> 00:32:44,440 samo ga Google. jQuery je izuzetno dobro dokumentirani. 664 00:32:44,440 --> 00:32:49,140 I često puta postoje puno primjeri koje oni pružaju za vas. 665 00:32:49,140 --> 00:32:52,470 Ako smo se pomaknite prema dolje - 666 00:32:52,470 --> 00:32:53,720 putu prema dolje - 667 00:32:53,720 --> 00:32:57,660 668 00:32:57,660 --> 00:32:59,190 koje možemo koristiti, što je dobro. 669 00:32:59,190 --> 00:33:02,480 >> Opet, kada je developer zapravo ide kroz nevolje pisanju 670 00:33:02,480 --> 00:33:05,810 Knjižnica, oni obično žele netko ga koristiti. 671 00:33:05,810 --> 00:33:09,400 Tako će se uz se dokumentacija. 672 00:33:09,400 --> 00:33:12,270 I ta dokumentacija može obično biti pronaći na stranici projekta, koja je 673 00:33:12,270 --> 00:33:14,970 Zato smo vam dali taj izvorni položaj u početak, koji vas povezuje s 674 00:33:14,970 --> 00:33:18,080 Projekt stranice tako da možete vidim tu dokumentaciju. 675 00:33:18,080 --> 00:33:22,670 >> Tipično, stranica projekta u slučaju od [nečujan], to ti se ispričao 676 00:33:22,670 --> 00:33:23,940 Imena klase. 677 00:33:23,940 --> 00:33:27,250 U slučaju JavaScript, daje li naziv funkcije. 678 00:33:27,250 --> 00:33:35,310 Usput, ako dođite do vrha, Brzo strani bilješku o funkcijama je 679 00:33:35,310 --> 00:33:39,080 kad god vidim neku funkciju provodi kao što je ovaj sa hard 680 00:33:39,080 --> 00:33:43,800 nosači u sredini, to znači da da ta imovina nije obavezno. 681 00:33:43,800 --> 00:33:44,750 Samo glave gore. 682 00:33:44,750 --> 00:33:47,350 Vidio sam puno pitanja o tome. 683 00:33:47,350 --> 00:33:50,370 >> Dakle, ovdje možemo vidjeti da animirati traje svojstva 684 00:33:50,370 --> 00:33:51,800 kao nužan argument. 685 00:33:51,800 --> 00:33:54,870 A sve ostalo je opcija. 686 00:33:54,870 --> 00:33:56,136 Side note - 687 00:33:56,136 --> 00:33:58,090 možete misliti na to, vrsta u, kao i man stranica. 688 00:33:58,090 --> 00:34:04,275 Man stranice su dokumentacije za C i za puno drugih stvari, kao što je dobro. 689 00:34:04,275 --> 00:34:11,020 >> MIKE Rizzo: Dakle, naučili smo kako promijeniti drugačiji CSS na stranici, 690 00:34:11,020 --> 00:34:14,040 animirati ga, i ukloniti dodati HTML. 691 00:34:14,040 --> 00:34:16,889 No, jedan od stvarno najmoćniji stvari o JavaScriptu 692 00:34:16,889 --> 00:34:18,270 a pogotovo jQuery - 693 00:34:18,270 --> 00:34:22,570 ono što vam omogućuje da učinite je odgovoriti na različiti elementi koje se događaju. 694 00:34:22,570 --> 00:34:25,380 Na primjer, ovdje imamo rukovatelj događaj. 695 00:34:25,380 --> 00:34:28,210 A to samo znači da kad god to Događaj dogodi, mi ga nositi u 696 00:34:28,210 --> 00:34:29,280 određeni način. 697 00:34:29,280 --> 00:34:35,159 >> Pa evo, generički jQuery događaj rukovatelj je točka na. 698 00:34:35,159 --> 00:34:42,949 A onda, prva stvar koju pruža je ono što bi trebao događaj 699 00:34:42,949 --> 00:34:43,810 se sluša. 700 00:34:43,810 --> 00:34:45,610 Dakle, ovdje, to je klik koji čekamo. 701 00:34:45,610 --> 00:34:49,250 >> TOMAS REIMERS: Alternativno, imate na lebde, koji je vrlo popularan jedan. 702 00:34:49,250 --> 00:34:52,000 Dakle, natrag na moje padajućeg izbornika ideje. 703 00:34:52,000 --> 00:34:54,239 Ti bi gornji jedan na lebdjeti. 704 00:34:54,239 --> 00:34:56,096 A onda ste mogli promijeniti. 705 00:34:56,096 --> 00:34:56,830 >> MIKE Rizzo: Točno. 706 00:34:56,830 --> 00:35:01,680 I onda, kad se to dogodi, to samo izvrši ovu funkciju da smo Give It 707 00:35:01,680 --> 00:35:05,080 kao argument i da upozorava bok ili hi. 708 00:35:05,080 --> 00:35:08,900 >> TOMAS REIMERS: Dakle, u slučaju JavaScript je ovo mjesto moramo, 709 00:35:08,900 --> 00:35:12,970 sami ukloniti iz C. Možemo zapravo preuzeti funkcije kao argumente. 710 00:35:12,970 --> 00:35:15,940 A tu su i puno stvarno složene načine kako to učiniti. 711 00:35:15,940 --> 00:35:17,940 Mi ćemo promovirati jedan način, što je možete definirati 712 00:35:17,940 --> 00:35:19,270 funkcionira upravo tamo. 713 00:35:19,270 --> 00:35:22,540 >> Dakle, kada ste tražili funkciju kao parametar, ti si zapravo samo 714 00:35:22,540 --> 00:35:24,500 će definirati funkciju na licu mjesta. 715 00:35:24,500 --> 00:35:27,090 I način na koji definiraju funkciju u JavaScriptu je li 716 00:35:27,090 --> 00:35:28,820 doslovno kažu funkciju. 717 00:35:28,820 --> 00:35:30,130 Zatim, obično, naziv funkcije. 718 00:35:30,130 --> 00:35:32,510 Ali mi nikad ne idete na referentni ova funkcija opet. 719 00:35:32,510 --> 00:35:34,040 Tako smo ga ostaviti bezimeni. 720 00:35:34,040 --> 00:35:40,440 >> Zatim zagrade, a zatim kovrčava aparatić, a zatim kod unutar toga. 721 00:35:40,440 --> 00:35:42,540 Da se razumijemo to može biti malo zbunjujuće. 722 00:35:42,540 --> 00:35:45,180 Tako ćemo vam dati opću formu ono rukovatelj događaj izgleda 723 00:35:45,180 --> 00:35:47,790 u nastavku, koja se nalazi na događaje. 724 00:35:47,790 --> 00:35:50,598 A onda, tvoja koda unutar toga. 725 00:35:50,598 --> 00:35:52,478 >> MIKE Rizzo: Ima li bilo Pitanja o tome? 726 00:35:52,478 --> 00:35:54,818 To može biti malo zbunjujuće Prvi put kad ga vidim. 727 00:35:54,818 --> 00:35:57,550 >> TOMAS REIMERS: Vi zapravo želite otvoriti datoteku i pokazati im neke 728 00:35:57,550 --> 00:35:58,155 jQuery upravo sada? 729 00:35:58,155 --> 00:35:59,853 >> MIKE Rizzo: Da, hajdemo to učiniti. 730 00:35:59,853 --> 00:36:00,256 OK. 731 00:36:00,256 --> 00:36:02,490 >> TOMAS REIMERS: Sada smo u aparat. 732 00:36:02,490 --> 00:36:07,730 I što smo napravili je da smo poduzeli sloboda stvaranja kako je index.html 733 00:36:07,730 --> 00:36:10,100 datoteka, koji se povezuje s JavaScript datoteka. 734 00:36:10,100 --> 00:36:12,880 I možemo otvoriti - 735 00:36:12,880 --> 00:36:15,170 Da. 736 00:36:15,170 --> 00:36:16,630 Pa, to se dvije stvari. 737 00:36:16,630 --> 00:36:18,350 >> Prvi je da se povezuje s JavaScript datoteka. 738 00:36:18,350 --> 00:36:21,250 I vidjet ćemo da je ovdje. 739 00:36:21,250 --> 00:36:25,340 Vidimo da se u glavi HTML dokument, posebno. 740 00:36:25,340 --> 00:36:28,260 Dakle, vidjet ćete da postoje smo, zapravo, reći SRC, 741 00:36:28,260 --> 00:36:29,590 koja se zalaže za izvor. 742 00:36:29,590 --> 00:36:30,630 I to je URL. 743 00:36:30,630 --> 00:36:32,700 >> Dakle, ovdje možete reći da smo uključene jQuery. 744 00:36:32,700 --> 00:36:34,290 I mi smo također uključene skripte. 745 00:36:34,290 --> 00:36:40,630 Drugi način uključiti JavaScript je koje možete uključiti inline skriptu 746 00:36:40,630 --> 00:36:44,600 tag kao što smo na dnu, gdje je kaže tip skripta je tekst JavaScript. 747 00:36:44,600 --> 00:36:46,960 >> Dakle, mi tvrdimo, slušaj, mi smo o tome kako su scenarij. 748 00:36:46,960 --> 00:36:51,890 A vrsta tog pisma je JavaScript, koja je vrsta teksta. 749 00:36:51,890 --> 00:36:52,550 Vrlo jednostavno. 750 00:36:52,550 --> 00:36:56,490 >> MIKE Rizzo: Pa to, na neki način, dobiva se Vaše pitanje o tome kako su 751 00:36:56,490 --> 00:37:02,340 JavaScript je u našim datotekama, jer kad smo nije PHP, možemo učiniti nešto ovako. 752 00:37:02,340 --> 00:37:07,570 I onda, imamo PHP funkcije - recimo dionice napraviti 753 00:37:07,570 --> 00:37:09,150 nešto s tim - 754 00:37:09,150 --> 00:37:10,490 ide tamo. 755 00:37:10,490 --> 00:37:13,860 Međutim, sada imamo skriptu oznake da mi ga dati, koji su zapravo 756 00:37:13,860 --> 00:37:19,470 dio samog HTML-a, jer to nije zavaravanje kao HTML datoteke kao što je to 757 00:37:19,470 --> 00:37:25,070 je u PHP-u, jer ako zaista ide u i pogled na izvor stranice, 758 00:37:25,070 --> 00:37:28,430 vidjet ćete ove skripte oznake tamo sa JavaScript povezana s 759 00:37:28,430 --> 00:37:29,800 ih u tome. 760 00:37:29,800 --> 00:37:31,760 >> Dakle, ako smo htjeli napišite nešto JavaScript - 761 00:37:31,760 --> 00:37:37,110 recimo samo da smo htjeli promijeniti tijelo jer sada nemam 762 00:37:37,110 --> 00:37:40,020 bilo koje druge oznake koje sam stvarno mogu urediti osim tijela. 763 00:37:40,020 --> 00:37:42,450 Recimo samo da sam htjela mijenjati CSS toga. 764 00:37:42,450 --> 00:37:46,190 Tako ćemo ići naprijed i promjene Boja njega u crveno. 765 00:37:46,190 --> 00:37:47,380 >> Tako sam spremiti datoteku. 766 00:37:47,380 --> 00:37:52,700 Vratimo se na našoj web stranici, refresh, a to čini automatski 767 00:37:52,700 --> 00:37:55,920 jer se nije činilo kao da je čekao na sve, jer mi se ne sluša 768 00:37:55,920 --> 00:37:59,450 za događaj ili nešto slično. 769 00:37:59,450 --> 00:38:02,800 >> TOMAS REIMERS: Dakle, ako se vratimo na to podnijeti posebno - HTML 770 00:38:02,800 --> 00:38:04,710 podnijeti - što idete vidjeti je da imamo - 771 00:38:04,710 --> 00:38:06,810 sjetite se da je to učita, vrsta, kronološki. 772 00:38:06,810 --> 00:38:09,910 Dakle, moramo prvo glavu. ona učitava one dvije datoteke. 773 00:38:09,910 --> 00:38:10,800 Onda idemo na tijelu. 774 00:38:10,800 --> 00:38:11,640 I vidimo Pozdrav svijetu. 775 00:38:11,640 --> 00:38:13,030 Tako smo pružiti Pozdrav svijetu. 776 00:38:13,030 --> 00:38:15,240 >> A onda je zadnje što imamo je imamo oznaku skripte. 777 00:38:15,240 --> 00:38:20,880 Tako to radi oznaku skripte jer je ne govorim ništa čekati. 778 00:38:20,880 --> 00:38:24,700 I to je najosnovnije način za pokretanje JavaScript. 779 00:38:24,700 --> 00:38:29,200 >> Uz to, rekao je, može li staviti skriptu označiti u zaglavlju samo 780 00:38:29,200 --> 00:38:31,240 pokazati tu točku? 781 00:38:31,240 --> 00:38:34,450 782 00:38:34,450 --> 00:38:35,700 I pokrenuti to. 783 00:38:35,700 --> 00:38:38,880 784 00:38:38,880 --> 00:38:41,070 Mi ćemo primijetiti da je nije promijenio boju. 785 00:38:41,070 --> 00:38:44,210 I to je jedan od problema JavaScript je da su stvari učita 786 00:38:44,210 --> 00:38:45,930 kronološkim redom. 787 00:38:45,930 --> 00:38:49,750 >> Dakle, u vrijeme kada je taj broj je pokrenut, odabrali smo - 788 00:38:49,750 --> 00:38:52,530 vratiti - 789 00:38:52,530 --> 00:38:53,670 tag tijela. 790 00:38:53,670 --> 00:38:57,560 Tijelo tag još uvijek ne postoji, jer JavaScript je u skladu s HTML. 791 00:38:57,560 --> 00:39:01,790 Dakle preglednik poput odaberite tijelu. 792 00:39:01,790 --> 00:39:02,760 Postoji takva stvar još nema. 793 00:39:02,760 --> 00:39:03,600 Tako možemo ignorirati. 794 00:39:03,600 --> 00:39:05,330 I mi ide. 795 00:39:05,330 --> 00:39:07,200 >> I onda smo definirali tijelo oznaku. 796 00:39:07,200 --> 00:39:09,670 No, to se nikad ne ažuriraju. 797 00:39:09,670 --> 00:39:12,560 Dakle, kada ste provedbi skriptu oznake, pazite da stavite 798 00:39:12,560 --> 00:39:15,502 Nakon što je tijelo oznaku. 799 00:39:15,502 --> 00:39:16,820 Sljedeća slide. 800 00:39:16,820 --> 00:39:17,830 >> MIKE Rizzo: OK. 801 00:39:17,830 --> 00:39:19,330 Tako smo promijenili nešto. 802 00:39:19,330 --> 00:39:21,910 No, to ne izgleda kao da se odazvali nam na sve, jer to je samo vrsta 803 00:39:21,910 --> 00:39:24,150 Uspjeli čim učita stranicu. 804 00:39:24,150 --> 00:39:27,700 Tako sada, umjesto da to, zašto ne bismo dodali događaj rukovatelj. 805 00:39:27,700 --> 00:39:31,020 >> Tako ćemo nešto učiniti na tijelu ponovno. 806 00:39:31,020 --> 00:39:33,490 I recimo da smo to učiniti na - 807 00:39:33,490 --> 00:39:34,500 kliknite. 808 00:39:34,500 --> 00:39:35,750 Mi ćemo dodati funkcije. 809 00:39:35,750 --> 00:39:38,270 810 00:39:38,270 --> 00:39:39,690 >> Tomas REIMERS: neka je promjena to je boja crvena opet. 811 00:39:39,690 --> 00:39:40,000 Zašto ne? 812 00:39:40,000 --> 00:39:41,680 >> MIKE Rizzo: Da, neka je promjena njegova 'boju u crvenu boju opet. 813 00:39:41,680 --> 00:39:46,310 814 00:39:46,310 --> 00:39:46,900 U redu. 815 00:39:46,900 --> 00:39:48,480 Tako ćemo se ponovno učitati stranicu. 816 00:39:48,480 --> 00:39:49,530 U redu, vidimo - 817 00:39:49,530 --> 00:39:52,290 kao što se očekuje, to ne upali crvena još. 818 00:39:52,290 --> 00:39:53,610 No, onda možemo ići naprijed i kliknite na nju. 819 00:39:53,610 --> 00:39:54,270 >> TOMAS REIMERS: I to ne mijenjaju boju u crvenu. 820 00:39:54,270 --> 00:39:56,090 >> MIKE Rizzo: I to ne mijenjaju boju u crvenu kao što se očekuje. 821 00:39:56,090 --> 00:39:59,010 >> TOMAS REIMERS: A možemo vidjeti kako možemo početi graditi vrlo osnovni 822 00:39:59,010 --> 00:40:00,170 interakcija. 823 00:40:00,170 --> 00:40:03,850 Ostale stvari koje možda želite učiniti je, ako mi ne želimo da se tijelo 824 00:40:03,850 --> 00:40:07,230 crvena boja, idemo napraviti HTML pozadina crvena boja. 825 00:40:07,230 --> 00:40:08,480 Samo tako da je to isto CSS. 826 00:40:08,480 --> 00:40:19,960 827 00:40:19,960 --> 00:40:23,320 >> A kada smo ga promijeniti, možemo vidjeti vrlo dramatičan učinak promjene 828 00:40:23,320 --> 00:40:25,510 cijela stranica. 829 00:40:25,510 --> 00:40:29,100 Pa opet, ako ste u provedbi stvari, možete imati jednu komponentu 830 00:40:29,100 --> 00:40:30,150 što je značilo da se kliknuli. 831 00:40:30,150 --> 00:40:32,710 Recimo jedan gumb Exit i Cijela druga komponenta, 832 00:40:32,710 --> 00:40:33,830 što je značilo da odgovori. 833 00:40:33,830 --> 00:40:35,755 Tako da bi uklonili prozor kad se to dogodi. 834 00:40:35,755 --> 00:40:39,341 835 00:40:39,341 --> 00:40:40,700 >> MIKE Rizzo: OK. 836 00:40:40,700 --> 00:40:42,200 Samo za primjer - 837 00:40:42,200 --> 00:40:44,400 niste dobili ovo vidjeti ranije - 838 00:40:44,400 --> 00:40:47,500 Samo ću vam pokazati kako to izgleda volim kad mi nešto sakriti. 839 00:40:47,500 --> 00:40:52,220 Dakle, ja ću ići naprijed i ne klize prema gore. 840 00:40:52,220 --> 00:40:54,440 >> TOMAS REIMERS: Želite li da zamotate u tipa stav prije nego što smo to učinili? 841 00:40:54,440 --> 00:40:55,132 >> MIKE Rizzo: OK. 842 00:40:55,132 --> 00:40:59,135 Da, zašto ne bismo to baš tako možemo ga odaberite nešto više. 843 00:40:59,135 --> 00:41:00,490 >> TOMAS REIMERS: i neka je daj ga klasu. 844 00:41:00,490 --> 00:41:01,740 >> MIKE Rizzo: Da. 845 00:41:01,740 --> 00:41:06,575 846 00:41:06,575 --> 00:41:09,920 OK, pa da vidimo. 847 00:41:09,920 --> 00:41:14,820 Umjesto odabira stvarni tijelo Sada, ja ću samo odaberite sve s 848 00:41:14,820 --> 00:41:18,780 klasa hello, koji ovdje smo samo jednu stvar. 849 00:41:18,780 --> 00:41:20,900 Dakle, mi ne bi trebali imati brinuti o tome. 850 00:41:20,900 --> 00:41:23,080 >> Dakle, ja ću ga osvježiti. 851 00:41:23,080 --> 00:41:24,230 Ja ću ići naprijed i kliknite na nju. 852 00:41:24,230 --> 00:41:27,890 I to, na neki način, nije čudno Pomaknite up stvar, što se nije činilo da je 853 00:41:27,890 --> 00:41:29,580 atraktivno. 854 00:41:29,580 --> 00:41:31,060 Općenito, oni izgledaju prilično lijepo. 855 00:41:31,060 --> 00:41:32,720 Mislim, ovo - za neke Razlog - nije. 856 00:41:32,720 --> 00:41:36,640 Ja ću samo napraviti fade out tako možete pogledati na to previše. 857 00:41:36,640 --> 00:41:38,100 Puno ljepše. 858 00:41:38,100 --> 00:41:41,150 >> A onda, ako sam otvoriti JavaScript opet utješiti i želimo vidjeti što 859 00:41:41,150 --> 00:41:43,900 to izgleda kao kad smo ga nestati u. 860 00:41:43,900 --> 00:41:46,920 Sada sam samo zovi nestati u tome. 861 00:41:46,920 --> 00:41:48,830 I to blijedi natrag u. 862 00:41:48,830 --> 00:41:56,150 >> Isto tako, mogli bismo zapravo i proći Argument da nestati ili nestati, 863 00:41:56,150 --> 00:41:57,640 koja je vrsta, od brzine. 864 00:41:57,640 --> 00:42:02,220 Tako ćemo ići naprijed i reći što želimo to ići polako blijede u. 865 00:42:02,220 --> 00:42:04,250 Pa mislim da je to još uvijek činilo prilično brzo. 866 00:42:04,250 --> 00:42:06,180 No, to je bio sporiji nego prije. 867 00:42:06,180 --> 00:42:10,340 >> TOMAS REIMERS: A ako želite pronaći Više o tim stvarima, opet, 868 00:42:10,340 --> 00:42:13,410 samo ići na jQuery dokumentacije, koje smo vam dao, i čitati 869 00:42:13,410 --> 00:42:13,735 kroz njih. 870 00:42:13,735 --> 00:42:15,790 Oni dokumentiraju svoje funkcije nevjerojatno dobro. 871 00:42:15,790 --> 00:42:18,622 872 00:42:18,622 --> 00:42:19,570 >> MIKE Rizzo: OK. 873 00:42:19,570 --> 00:42:21,560 Dakle, mislim da ćemo se vratiti na to. 874 00:42:21,560 --> 00:42:23,490 I možemo govoriti o našoj posljednjoj stranici. 875 00:42:23,490 --> 00:42:24,690 Pa, možemo završiti s Bootstrap. 876 00:42:24,690 --> 00:42:27,140 I onda ćemo ga otvoriti za neka pitanja. 877 00:42:27,140 --> 00:42:30,180 A ako vi imate bilo kakve ideje da je želite pokušati povratiti i vidjeti 878 00:42:30,180 --> 00:42:34,150 ako ih možemo provesti s JavaScript brzo. 879 00:42:34,150 --> 00:42:37,890 >> Pa stvarno brzo o Bootstrap, koji je automatski uključena u 880 00:42:37,890 --> 00:42:41,700 Vaš posljednji problem postaviti u CSS mapu i zapravo povezano sa tvojim 881 00:42:41,700 --> 00:42:43,190 header.php. 882 00:42:43,190 --> 00:42:46,740 Dakle, moglo bi se dodati klase koje definirane su u Bootstrap na njega. 883 00:42:46,740 --> 00:42:50,490 I to bi automatski stil te stvari u skladu s tim. 884 00:42:50,490 --> 00:42:54,550 >> TOMAS REIMERS: Dakle Bootstrap je vrlo čarobna stvar razvijen od strane ljudi 885 00:42:54,550 --> 00:42:55,340 na Twitteru. 886 00:42:55,340 --> 00:42:57,230 I ono što je trebao napraviti je - 887 00:42:57,230 --> 00:43:00,740 Prije web stranice su stvarno teško napraviti lijepo izgledaju, pogotovo kad smo imali 888 00:43:00,740 --> 00:43:02,200 puno zajedničkih dijelova. 889 00:43:02,200 --> 00:43:04,770 Dakle, puno tipki na Web izgledala isto. 890 00:43:04,770 --> 00:43:08,960 >> Puno tekstualnih polja mogu biti izrađene na izgledaju bolje od standardnog teksta 891 00:43:08,960 --> 00:43:13,620 Polje što vjerojatno znate od stvarno stare web stranice ili stvarno loše napravio 892 00:43:13,620 --> 00:43:18,210 web stranice, koje samo izgledaju kao doslovna tekstualne okvire bez bilo kakvog oblika teksta 893 00:43:18,210 --> 00:43:21,190 sjena ili bilo kakve lijepim crtama. 894 00:43:21,190 --> 00:43:24,540 Pa što Bootstrap učinio je to rekao, dobro, Imamo puno zajedničkih stilova. 895 00:43:24,540 --> 00:43:28,210 Zašto ne možemo napraviti jedan zajednički set CSS i zajednički skup JavaScript kako 896 00:43:28,210 --> 00:43:32,210 dobro, što se to stil kao što je to i koji mogu dati ljudima stvari kao kap 897 00:43:32,210 --> 00:43:34,610 prema dolje izbornika, koji mogu dati ljudima stvari kao što modals. 898 00:43:34,610 --> 00:43:38,580 >> Modalna je ono cura preko stranice kad god je to strogo je govorio 899 00:43:38,580 --> 00:43:41,090 nešto, što koči daljnji Interakcija do vas 900 00:43:41,090 --> 00:43:43,110 interakciju s njim. 901 00:43:43,110 --> 00:43:45,820 Nešto kao što je to, jeste li sigurni želite obrisati ovu stvar? 902 00:43:45,820 --> 00:43:49,100 Vi stvarno ne mogu učiniti ništa drugo sve dok ne kažu da ili ne. 903 00:43:49,100 --> 00:43:52,720 >> Trebalo je sve to i da ga pakiraju zajedno i rekao, ovdje mi ići. 904 00:43:52,720 --> 00:43:54,630 Ljudi sada mogu koristiti ovaj. 905 00:43:54,630 --> 00:43:56,830 A možete ga pronaći preko na getbootstrap.com. 906 00:43:56,830 --> 00:44:00,480 To je automatski uključena u Vaš posljednji problem postaviti. 907 00:44:00,480 --> 00:44:04,160 A vi ste više nego dobrodošli da se koristite ga na svoj konačni projekt. 908 00:44:04,160 --> 00:44:06,950 A ako želite slijediti taj povezuju se Bootstrap. 909 00:44:06,950 --> 00:44:10,590 910 00:44:10,590 --> 00:44:15,700 >> Vidjet ćete ovdje Bootstrap CSS stranice. 911 00:44:15,700 --> 00:44:16,860 Vidjet ćete Bootstrap. 912 00:44:16,860 --> 00:44:20,450 A ako se pomaknete prema dolje, vidjet ćete kako ga skinuti, kako 913 00:44:20,450 --> 00:44:21,900 instalirati ga, et cetera. 914 00:44:21,900 --> 00:44:24,700 >> MIKE Rizzo: I vi možete, Zanimljivo, prilagoditi se 915 00:44:24,700 --> 00:44:27,770 biti bez obzira na vrstu teme koje želite. 916 00:44:27,770 --> 00:44:31,270 Znam da je to nešto što sam učinio za moju konačni projekt kad sam uzeo klasu 917 00:44:31,270 --> 00:44:32,050 se prilagoditi. 918 00:44:32,050 --> 00:44:34,540 Drugačija verzija Bootstrap da imao drugačiju shemu boja i 919 00:44:34,540 --> 00:44:36,700 različiti oblici neke različite stvari. 920 00:44:36,700 --> 00:44:38,250 Zato vas potičemo da se igraju s tim. 921 00:44:38,250 --> 00:44:39,440 To je vrsta zabave za napraviti. 922 00:44:39,440 --> 00:44:43,230 >> TOMAS REIMERS: Gledajući na vrhu opet, to je vrlo slična slova 923 00:44:43,230 --> 00:44:44,970 Strašan stranica. 924 00:44:44,970 --> 00:44:47,810 Puno dokumentacije će početi da izgleda slično kad ste 925 00:44:47,810 --> 00:44:48,940 vidio dosta toga. 926 00:44:48,940 --> 00:44:51,260 Dakle, ovdje imamo CSS sastavni dio ovoga. 927 00:44:51,260 --> 00:44:53,540 I vidjet ćete kako je to može oblikovati stvari. 928 00:44:53,540 --> 00:44:56,780 Dakle, ako kliknete na stolovima, primjerice, možete odmah napraviti 929 00:44:56,780 --> 00:45:01,710 Tablica prilično jednostavnim dodavanjem Klasa stol na njega. 930 00:45:01,710 --> 00:45:03,150 >> Iste stvari za tipke. 931 00:45:03,150 --> 00:45:12,140 Ako jednostavno dodati klase BTN i BTN zadani ili BTN primarni, možete 932 00:45:12,140 --> 00:45:16,240 dobiti bilo koju od tih tipki s tim pre-made stilova. 933 00:45:16,240 --> 00:45:18,570 A onda, ako ste u potrazi za nešto složeniji nego jednostavno 934 00:45:18,570 --> 00:45:24,100 Redizajn ono w već imate, više o tab JavaScript diljem vrhu smo 935 00:45:24,100 --> 00:45:25,120 imate hrpu komponenti. 936 00:45:25,120 --> 00:45:30,410 >> Dakle, ovdje imamo prijelaza, modals, padajućim popisima, karticama i opise. 937 00:45:30,410 --> 00:45:35,530 Tooltip je ono iskoči pod svoje miša kada prelazite na nešto. 938 00:45:35,530 --> 00:45:40,280 Popovers, upozorenja, tipke, sklopivi Harmonike je ono 939 00:45:40,280 --> 00:45:41,190 oni obično zovu. 940 00:45:41,190 --> 00:45:43,045 Carousels, koji Flip kroz poput slike. 941 00:45:43,045 --> 00:45:52,190 942 00:45:52,190 --> 00:45:54,840 >> Dakle, to su dijelovi od Bootstrap. 943 00:45:54,840 --> 00:45:57,620 Ja bih vas potaknuti da vrlo ići pogledati na njima. 944 00:45:57,620 --> 00:46:01,780 Postoji JavaScript komponentu i CSS komponentu. 945 00:46:01,780 --> 00:46:03,880 Slobodno ih koristiti kako hoćete. 946 00:46:03,880 --> 00:46:06,730 Nećemo ići previše u njih jer smatramo dokumentaciju 947 00:46:06,730 --> 00:46:09,360 je jako dobro napravljena. 948 00:46:09,360 --> 00:46:10,540 I da. 949 00:46:10,540 --> 00:46:14,500 Imate li kakvih pitanja u vezi toga? 950 00:46:14,500 --> 00:46:19,430 >> MIKE Rizzo: Pa što se stvarno brzo strana, dizajn ovog web stranicu koja 951 00:46:19,430 --> 00:46:21,830 brzo smo stavili zajedno Ova prezentacija je 952 00:46:21,830 --> 00:46:24,290 zapravo učinjeno korištenjem Bootstrap. 953 00:46:24,290 --> 00:46:27,810 Kao što možete vidjeti, kad smo kliknite na njih različite kartice, mi smo zapravo nikada 954 00:46:27,810 --> 00:46:30,750 ostavljajući ovaj trenutni index.html stranicu. 955 00:46:30,750 --> 00:46:36,400 Dakle, ono što imamo je različita divs u tom index.html. 956 00:46:36,400 --> 00:46:39,610 I onda, kad smo kliknite različita tab, to je samo promjenom 957 00:46:39,610 --> 00:46:41,590 Tko od njih je pokazivanje. 958 00:46:41,590 --> 00:46:47,390 >> Tako je to u skladu s tim ih pozicionira, mijenja HTML stranice, tako da 959 00:46:47,390 --> 00:46:52,330 trenutni tab označen kao aktivni, tako izgleda drugačije i izgled 960 00:46:52,330 --> 00:46:52,820 jako lijepo. 961 00:46:52,820 --> 00:46:57,260 >> TOMAS REIMERS: Tako da je sve učinjeno bez nas pisanja gotovo bilo CSS. 962 00:46:57,260 --> 00:47:01,440 Također smo vidjeli zaglavlje na vrhu, koje boje su kod nas. 963 00:47:01,440 --> 00:47:04,800 No, stvarna stavljajući ga na vrhu stranice i izradu 964 00:47:04,800 --> 00:47:06,660 to svitak Bootstrap. 965 00:47:06,660 --> 00:47:09,720 A onda ni za drugu knjižnicu - to nije jedan smo razgovarali o tome, ali jedan 966 00:47:09,720 --> 00:47:11,580 možete Google ako želite. 967 00:47:11,580 --> 00:47:15,130 To se zove prettify.js. 968 00:47:15,130 --> 00:47:20,650 I to će sintakse koda za koju koristite i CSS i JavaScript. 969 00:47:20,650 --> 00:47:23,480 970 00:47:23,480 --> 00:47:27,070 >> Zadnja stvar koju želimo razgovarati o prije nego što smo vas pustiti van u 971 00:47:27,070 --> 00:47:30,620 Svijet pogledati knjižnicama shvatiti kako ih koristiti i kako bi, nadamo se, 972 00:47:30,620 --> 00:47:34,640 čitati dokumentaciju i pronaći ono što Potreba je kako pronaći knjižnice. 973 00:47:34,640 --> 00:47:37,000 Dakle, prvo je mi smo samo će gurnuti Google. 974 00:47:37,000 --> 00:47:37,810 Idi Googleu. 975 00:47:37,810 --> 00:47:41,150 >> To je doslovno ono što smo učinili kada smo trebate učiniti nešto je što Google. 976 00:47:41,150 --> 00:47:44,730 Ima JavaScript biblioteka koja mi omogućuje da manipuliraju vrijeme u 977 00:47:44,730 --> 00:47:45,400 koristan način? 978 00:47:45,400 --> 00:47:49,510 Dakle, ako ja znam da su neki korisnik stvara računa ovdje, a to je 979 00:47:49,510 --> 00:47:53,010 trenutno vrijeme, kako mogu izračunati razlika koje bez 980 00:47:53,010 --> 00:47:55,020 izračunati ga osobno? 981 00:47:55,020 --> 00:47:59,630 Dakle, ovo je zapravo uobičajena stvar, JavaScript vrijeme knjižnice. 982 00:47:59,630 --> 00:48:02,440 I ovdje mi Moment.js-- najpopularniji jedan. 983 00:48:02,440 --> 00:48:06,530 >> Ako trebamo knjižnicu manipulirati nešto kao boje da bi mogli 984 00:48:06,530 --> 00:48:08,650 generiranje hrpa slučajnih boja - 985 00:48:08,650 --> 00:48:10,660 eventualno, za generiranje stil ili nešto - 986 00:48:10,660 --> 00:48:13,480 bismo mogli google nešto poput JavaScript boja knjižnica. 987 00:48:13,480 --> 00:48:15,620 I siguran sam da ćemo se pojaviti s Tisuću i jedna od njih. 988 00:48:15,620 --> 00:48:18,290 989 00:48:18,290 --> 00:48:21,410 Vi ste dobrodošli da pročitate kroz njih. 990 00:48:21,410 --> 00:48:24,610 >> Dakle, većina stvari - kad ih naći - će biti domaćin na jednom od 991 00:48:24,610 --> 00:48:25,920 mjesta koja domaćin code. 992 00:48:25,920 --> 00:48:26,960 Oni su nekoliko popularnih one. 993 00:48:26,960 --> 00:48:30,870 Najpopularniji, prema sada je github.com. 994 00:48:30,870 --> 00:48:35,300 A ako idete na GitHub to je zapravo gdje je domaćin normalizirati. 995 00:48:35,300 --> 00:48:36,950 Dakle, ako želite da se vratite na tu jednu. 996 00:48:36,950 --> 00:48:38,135 Pokazati im da. 997 00:48:38,135 --> 00:48:40,516 >> MIKE Rizzo: I to je zapravo gdje ovo je domaćin previše, ako ste primijetili. 998 00:48:40,516 --> 00:48:41,000 >> TOMAS REIMERS: Da. 999 00:48:41,000 --> 00:48:49,078 Dakle, ako idete na to normalizirati i otići na GitHub. 1000 00:48:49,078 --> 00:48:51,936 Jesu li se to? 1001 00:48:51,936 --> 00:48:54,620 >> MIKE Rizzo: To mala mačka stvar je GitHub simbol. 1002 00:48:54,620 --> 00:48:56,330 >> TOMAS REIMERS: Oh. 1003 00:48:56,330 --> 00:49:02,180 Dakle GitHub koristi metodu zvanu Git za pohranu koda. 1004 00:49:02,180 --> 00:49:05,150 Je li ne znam što je to i što vas plaši, to je u redu. 1005 00:49:05,150 --> 00:49:16,100 Ne morate znati što je Git jer GitHub ima gumb Download 1006 00:49:16,100 --> 00:49:17,200 u donjem desnom kutu. 1007 00:49:17,200 --> 00:49:21,350 >> Druga korisna stvar znati o GitHub je većina proizvoda 1008 00:49:21,350 --> 00:49:23,200 imat će me pročitati. 1009 00:49:23,200 --> 00:49:25,400 A ako oni nemaju web stranicu, pročitao mi ćemo govoriti o tome kako 1010 00:49:25,400 --> 00:49:28,310 instalirati ga, kako ga koristiti, što je ne, et cetera, et cetera, et cetera. 1011 00:49:28,310 --> 00:49:31,033 Ono što mi u osnovi sam bio vas kroz. 1012 00:49:31,033 --> 00:49:32,326 >> MIKE Rizzo: Internet je odvikavanje. 1013 00:49:32,326 --> 00:49:34,020 >> TOMAS REIMERS: To je u redu. 1014 00:49:34,020 --> 00:49:36,980 Posljednje dvije stvari koje smo htjeli razgovarati o tome - 1015 00:49:36,980 --> 00:49:38,750 smo razgovarali o Git - 1016 00:49:38,750 --> 00:49:40,290 je za rješavanje problema. 1017 00:49:40,290 --> 00:49:43,020 A ovaj nije relevantno za konačni proizvod kao što je to 1018 00:49:43,020 --> 00:49:44,870 kada odete 50. 1019 00:49:44,870 --> 00:49:48,310 A kad naiđete na proizvode provedbi knjižnice ili provedbi 1020 00:49:48,310 --> 00:49:50,230 svoj projekt, ideš imate pitanja ili ste 1021 00:49:50,230 --> 00:49:51,660 će tražiti pitanja. 1022 00:49:51,660 --> 00:49:53,060 >> Opet, Google ga. 1023 00:49:53,060 --> 00:49:54,630 To je doslovno ono što nam je činiti. 1024 00:49:54,630 --> 00:49:56,400 Ovo će zvučati glupo. 1025 00:49:56,400 --> 00:49:58,310 No, doslovno, mi ga Google. 1026 00:49:58,310 --> 00:50:01,810 A opet, jedna od prvih stvari obično ćete izvoditi u je 1027 00:50:01,810 --> 00:50:06,550 stackoverflow.com, što je divno pitanje i odgovor prizor. 1028 00:50:06,550 --> 00:50:10,530 >> To je divno i zato što možete postavljati pitanja i tražiti 1029 00:50:10,530 --> 00:50:12,760 odgovori, ali i zato što to je već puno 1030 00:50:12,760 --> 00:50:14,590 pre-naseljena sadržaj postoji. 1031 00:50:14,590 --> 00:50:18,510 Tako obično kad Googleu programiranje Pitanje u prva 1032 00:50:18,510 --> 00:50:22,620 Par hitova ste možda već pokrenuti u to vrijeme tvoj problem setovima. 1033 00:50:22,620 --> 00:50:27,840 >> A onda, zadnji put stvarno kratak stvar je JSFIDDLE, što je - danas imamo 1034 00:50:27,840 --> 00:50:32,110 radili puno posla s JavaScript HTML CSS. 1035 00:50:32,110 --> 00:50:39,820 JSFIDDLE je web app, koji u osnovi vam omogućuje da se vaše HTML, vaš 1036 00:50:39,820 --> 00:50:42,820 JavaScript dolje lijevo, a Vaš CSS gore desno. 1037 00:50:42,820 --> 00:50:47,840 A onda to može stvoriti brzo uzvratiti od njega i vidjeti kako se komunicira. 1038 00:50:47,840 --> 00:50:50,500 To je vrlo korisno kada se ljudi pokušavaju napraviti dokaz koncepta kao 1039 00:50:50,500 --> 00:50:52,910 to je kako bi se napraviti padajući izbornik. 1040 00:50:52,910 --> 00:50:54,980 Možda brzo možete otkriti ili što god. 1041 00:50:54,980 --> 00:50:56,560 >> MIKE Rizzo: Dakle, idemo naprijed i kliknite na to. 1042 00:50:56,560 --> 00:50:57,820 Quick note - 1043 00:50:57,820 --> 00:51:00,430 budući da je, prije nego što smo bili radi na klik. 1044 00:51:00,430 --> 00:51:04,380 Ispada JCorey Koreja također ima izgrađen u klik događaj rukovatelj da je 1045 00:51:04,380 --> 00:51:07,020 koristi samo zato što ste figure htjeti učiniti puno stvari 1046 00:51:07,020 --> 00:51:08,410 kada želite da kliknete nešto. 1047 00:51:08,410 --> 00:51:09,690 >> Slično tome, ona također ima lebde. 1048 00:51:09,690 --> 00:51:12,850 No, da biste dobili puni opseg one, pogled na jQuery 1049 00:51:12,850 --> 00:51:15,320 dokumentacije i to učiniti. 1050 00:51:15,320 --> 00:51:18,760 Učinio sam nešto glupo ovdje. 1051 00:51:18,760 --> 00:51:21,490 >> TOMAS REIMERS: Dakle, imam jako brzo Program upravo ovdje, koji govori 1052 00:51:21,490 --> 00:51:22,640 Tipka na klik. 1053 00:51:22,640 --> 00:51:23,890 Onda imamo za petlju. 1054 00:51:23,890 --> 00:51:26,810 I za manje od 404. 1055 00:51:26,810 --> 00:51:29,530 To jednostavno će se pojaviti ove poruke upozorenja. 1056 00:51:29,530 --> 00:51:33,425 >> MIKE Rizzo: A što je Kod 404 stajao u HTML-u? 1057 00:51:33,425 --> 00:51:34,145 Da li se itko sjetio? 1058 00:51:34,145 --> 00:51:35,450 Nije pronađen, zar ne. 1059 00:51:35,450 --> 00:51:38,640 1060 00:51:38,640 --> 00:51:40,885 Chrome je također dodao ovaj uredan stvar gdje možete - 1061 00:51:40,885 --> 00:51:43,430 >> TOMAS REIMERS: Zato što ljudi vole Mike počeo raditi puno i 1062 00:51:43,430 --> 00:51:47,230 dosadne korisnik, što omogućava da vidite informacije. 1063 00:51:47,230 --> 00:51:48,286 >> MIKE Rizzo: Da. 1064 00:51:48,286 --> 00:51:50,690 >> TOMAS REIMERS: Imamo li kakvih pitanja o tome, o JavaScriptu 1065 00:51:50,690 --> 00:51:53,420 knjižnice, pronalaženje knjižnice, ili što web development izgleda 1066 00:51:53,420 --> 00:51:55,400 kao u stvarnom svijetu? 1067 00:51:55,400 --> 00:51:56,880 Nemamo se protiv vremena. 1068 00:51:56,880 --> 00:52:00,400 Pa nisam siguran da ćemo imati vremena za implementaciju 1069 00:52:00,400 --> 00:52:02,290 osim ako je to stvarno brzo. 1070 00:52:02,290 --> 00:52:04,580 Jesmo li dobro? 1071 00:52:04,580 --> 00:52:08,110 >> MIKE Rizzo: sve što vi želite vidjeti jako brzo, kao, dva 1072 00:52:08,110 --> 00:52:09,556 minuta ili manje? 1073 00:52:09,556 --> 00:52:10,870 >> TOMAS REIMERS: Sve možemo pojasniti? 1074 00:52:10,870 --> 00:52:12,500 Kako pisati u - 1075 00:52:12,500 --> 00:52:13,260 >> PUBLIKA: [nečujan]? 1076 00:52:13,260 --> 00:52:16,070 >> MIKE Rizzo: Da, tako that's - 1077 00:52:16,070 --> 00:52:18,065 >> TOMAS REIMERS: Možete samo pogoditi Kontrola-U na web stranici. 1078 00:52:18,065 --> 00:52:19,275 >> MIKE Rizzo: Oh, nisam znala da je. 1079 00:52:19,275 --> 00:52:22,290 >> TOMAS REIMERS: Mislim da, da. 1080 00:52:22,290 --> 00:52:23,300 Kontrola-U. Da. 1081 00:52:23,300 --> 00:52:25,970 >> MIKE Rizzo: Oh, pa to je kod za web stranicu. 1082 00:52:25,970 --> 00:52:29,580 Ali ako stvarno želite preuzeti naše datoteke i sve, što je domaćin 1083 00:52:29,580 --> 00:52:32,650 Na github.com 1084 00:52:32,650 --> 00:52:34,850 >> TOMAS REIMERS: slash moje ime - 1085 00:52:34,850 --> 00:52:38,504 Tomas REIMERS - slash CS50 crtice seminar. 1086 00:52:38,504 --> 00:52:40,710 >> MIKE Rizzo: A što možete pronaći sve postoji. 1087 00:52:40,710 --> 00:52:42,310 >> TOMAS REIMERS: To je ono što GitHub Izgleda, usput. 1088 00:52:42,310 --> 00:52:44,910 Pa opet, kad vidiš open source Projekt, u pravilu, oni će biti čitanje 1089 00:52:44,910 --> 00:52:45,950 ja tu da vam može pročitati. 1090 00:52:45,950 --> 00:52:50,200 I ako se vrati, primijetit ćete da imate preuzimanje zip, koji će 1091 00:52:50,200 --> 00:52:52,130 omogućuju vam da preuzimanje izvor Kod uključiti 1092 00:52:52,130 --> 00:52:53,666 proizvod u svoj stvar. 1093 00:52:53,666 --> 00:52:56,890 >> MIKE Rizzo: Da, i ako mi samo kliknite na index.html jako brzo - 1094 00:52:56,890 --> 00:52:59,180 >> TOMAS REIMERS: Vidjet ćete ovdje izvorni kod za naše web stranice. 1095 00:52:59,180 --> 00:53:02,016 1096 00:53:02,016 --> 00:53:06,070 >> MIKE Rizzo: Također, zaboravio sam gurnuti u pravu Prije nego s velikim stolom to 1097 00:53:06,070 --> 00:53:09,860 uključen, ali tu je i tablica od chmods da smo uključeni 1098 00:53:09,860 --> 00:53:13,210 samo za svoje jasnoće. 1099 00:53:13,210 --> 00:53:16,940 Ali ako mi dođite skroz do dno, nismo zapravo učiniti vrlo 1100 00:53:16,940 --> 00:53:21,160 koliko sa JavaScript stvari uopće s tim. 1101 00:53:21,160 --> 00:53:26,610 To je isključivo od svega ostalo što smo imali. 1102 00:53:26,610 --> 00:53:28,730 >> Dakle, hvala vam momci na dolasku i slušanje. 1103 00:53:28,730 --> 00:53:29,830 Nadamo se da je to bilo jako korisno. 1104 00:53:29,830 --> 00:53:33,020 Ako imate bilo kakve JavaScript povezane pitanja ili jednostavno želite razgovarati o 1105 00:53:33,020 --> 00:53:36,240 Što još mi se što druge cool stvari možete učiniti sa JavaScript, mi bismo rado 1106 00:53:36,240 --> 00:53:37,186 razgovarati s vama. 1107 00:53:37,186 --> 00:53:40,010 >> TOMAS REIMERS: Ako imate pitanje o svom projektu ili ako to može biti 1108 00:53:40,010 --> 00:53:42,740 relevantno, vjerojatno ćemo staviti oko Malo nakon toga. 1109 00:53:42,740 --> 00:53:44,640 No, osim toga, imaju dobar vikend. 1110 00:53:44,640 --> 00:53:45,845 >> MIKE Rizzo: Da, uživajte. 1111 00:53:45,845 --> 00:53:46,120 Vidimo se momci. 1112 00:53:46,120 --> 00:53:47,370 >> TOMAS REIMERS: Vidimo se. 1113 00:53:47,370 --> 00:53:47,926