1 00:00:00,000 --> 00:00:07,440 2 00:00:07,440 --> 00:00:08,180 >> TOMAS REIMERS: Ahoj, všetci. 3 00:00:08,180 --> 00:00:09,250 Volám sa Tomáš Reimers. 4 00:00:09,250 --> 00:00:10,500 >> MIKE RIZZO: A ja som Mike Rizzo. 5 00:00:10,500 --> 00:00:12,990 >> TOMAS REIMERS: Sme dvaja CS50s TS. 6 00:00:12,990 --> 00:00:18,910 A dnes sme v čele seminár na JavaScript a CSS pre webové aplikácie. 7 00:00:18,910 --> 00:00:22,140 Ak chcete sledovať spolu, odkaz je tamto. 8 00:00:22,140 --> 00:00:25,190 A chcete, aby ju na počítači krátko? 9 00:00:25,190 --> 00:00:27,460 >> Tu je odkaz. 10 00:00:27,460 --> 00:00:30,390 Je to malé miesto, ktoré má väzby na všetky zdroje Chystáme sa byť 11 00:00:30,390 --> 00:00:36,490 ukázal vám dnes, a tiež má veľa užitočné informácie, napísal nám 12 00:00:36,490 --> 00:00:39,680 čítajte viac do hĺbky, keď idete späť, a vy sa snažíte spomenúť, čo 13 00:00:39,680 --> 00:00:42,166 presne tak sme si povedali, čo ste boli hovorí o, et cetera. 14 00:00:42,166 --> 00:00:43,870 >> MIKE RIZZO: Dobre. 15 00:00:43,870 --> 00:00:44,890 Tak poďme začať. 16 00:00:44,890 --> 00:00:45,700 >> TOMAS REIMERS: Takže chcete začať? 17 00:00:45,700 --> 00:00:45,970 OK. 18 00:00:45,970 --> 00:00:47,170 >> MIKE RIZZO: Jo. 19 00:00:47,170 --> 00:00:51,730 Tak sme sa prvýkrát chceli začať s širokým prehľad o internete a 20 00:00:51,730 --> 00:00:54,240 typy súborov, pri navrhovaní webových stránok. 21 00:00:54,240 --> 00:00:57,550 Aj keď táto prezentácia my chceme, aby dostať sa do do JavaScriptu oveľa oveľa 22 00:00:57,550 --> 00:01:00,320 neskôr, sme chceli začať s len, druh, ako oko pohľad z vtáčej 23 00:01:00,320 --> 00:01:03,270 z čoho webovej stránky je a ako premýšľať o navrhovaní 24 00:01:03,270 --> 00:01:04,800 Webové stránky pre štart. 25 00:01:04,800 --> 00:01:08,370 >> Takže vy, v tomto bode - s ním že v piatok večer - by mali mať 26 00:01:08,370 --> 00:01:11,000 predložil svoje CS50 financie Problém sady. 27 00:01:11,000 --> 00:01:15,260 Dúfajme, že bol dobrý vkus o tom, čo webové programovanie môže byť. 28 00:01:15,260 --> 00:01:18,261 Ale tu chceme, druh, dať si iný vkus, rovnako. 29 00:01:18,261 --> 00:01:23,190 >> TOMAS REIMERS: Tak len zhrnúť, čo sa stane, keď zadáte adresu URL do 30 00:01:23,190 --> 00:01:26,650 váš webový prehliadač, ktorý dostane URL vzhliadol v počítači. 31 00:01:26,650 --> 00:01:28,590 A počítač je pripojený k inému počítaču, 32 00:01:28,590 --> 00:01:29,890 ktoré hostí túto webovú stránku. 33 00:01:29,890 --> 00:01:33,150 OK, takže keď idete na google.com, že ste pripojený k jednému z Google je 34 00:01:33,150 --> 00:01:36,496 počítača, ktorý má súbory na google.com. 35 00:01:36,496 --> 00:01:38,750 >> To potom požiada o konkrétny súbor. 36 00:01:38,750 --> 00:01:40,020 Takže ak idete do - 37 00:01:40,020 --> 00:01:41,550 Neviem - 38 00:01:41,550 --> 00:01:48,170 example.com / index.html / alebo test.html, budete žiadať 39 00:01:48,170 --> 00:01:49,340 že konkrétny súbor. 40 00:01:49,340 --> 00:01:52,780 A webový server deje vrátiť sa k vám. 41 00:01:52,780 --> 00:01:54,910 >> Potom, čo prejdete tohto súboru - 42 00:01:54,910 --> 00:01:57,750 43 00:01:57,750 --> 00:01:59,950 akonáhle ste počítač dostane, že súbor - je to chystá začať 44 00:01:59,950 --> 00:02:00,820 vybudovať webovú stránku. 45 00:02:00,820 --> 00:02:03,020 Takže teraz má súbor HTML, čo je niečo ako 46 00:02:03,020 --> 00:02:05,170 Štruktúra webovej stránky. 47 00:02:05,170 --> 00:02:08,620 HTML súbor by tiež odkazovať CSS súbory, ktoré definujú 48 00:02:08,620 --> 00:02:09,889 štýl webové stránky. 49 00:02:09,889 --> 00:02:12,970 >> JavaScript súbory, ktoré definuje interakcie s webovou stránkou. 50 00:02:12,970 --> 00:02:15,200 Obrazové súbory, ktoré sú len obrazy. 51 00:02:15,200 --> 00:02:19,450 A prípadne odkazy na iné súbory HTML, ktoré potom môžete navštíviť. 52 00:02:19,450 --> 00:02:22,656 53 00:02:22,656 --> 00:02:24,380 >> MIKE RIZZO: OK, dobre. 54 00:02:24,380 --> 00:02:28,980 Takže vy máte všetko, možno, starostlivo nastaviť miestneho hostiteľa 55 00:02:28,980 --> 00:02:30,810 na vašom virtuálnom stroji. 56 00:02:30,810 --> 00:02:35,650 A to práve, druh, je miestna doména, ktorá váš počítač hostiteľom iba 57 00:02:35,650 --> 00:02:38,760 pre vás na vlastnú IP adresu. 58 00:02:38,760 --> 00:02:43,300 >> Takže v to, že potom môžete pridať k tomu svoje vlastné webové stránky. 59 00:02:43,300 --> 00:02:47,655 Myslím, že v CS50 financií, mali by ste mať pridané niektoré HTML stránky, ktoré sú, 60 00:02:47,655 --> 00:02:49,410 druh, zabalené v PHP obale. 61 00:02:49,410 --> 00:02:54,690 Ale nakoniec, aké sú vaše PHP stránky sa výstup bol HTML. 62 00:02:54,690 --> 00:02:58,210 >> Ale spomenul si na začiatku z pset, sme museli nastaviť 63 00:02:58,210 --> 00:03:00,890 oprávnenia pre všetko, že jo? 64 00:03:00,890 --> 00:03:07,270 Takže to v podstate len tresne kto vie čítať, písať, a možno 65 00:03:07,270 --> 00:03:08,730 vykonávať jednotlivé súbory. 66 00:03:08,730 --> 00:03:11,870 Takže budeme robiť rýchlo - hm? 67 00:03:11,870 --> 00:03:15,660 >> TOMAS REIMERS: Tak ideme urobiť rýchly demo. 68 00:03:15,660 --> 00:03:19,560 Takže len pre pripomenutie, keď sa pripojenie k počítaču Google - 69 00:03:19,560 --> 00:03:20,690 kto - 70 00:03:20,690 --> 00:03:24,060 a požiadať o súbore, počítač najprv je potrebné, aby sa ubezpečil, že ste oprávnený 71 00:03:24,060 --> 00:03:28,790 skutočne zobraziť tento súbor, alebo čítal, že súbor, pretože nemôžete len opýtať 72 00:03:28,790 --> 00:03:30,430 pre akýkoľvek súbor na tomto počítači, že jo? 73 00:03:30,430 --> 00:03:32,260 To by bolo riziko zabezpečenia. 74 00:03:32,260 --> 00:03:37,020 >> Takže súbory na systémoch, ktoré používame, ako je Tento CS50 zariadení, majú tri 75 00:03:37,020 --> 00:03:39,200 všeobecne ľudia, ktorí môžu mať oprávnenie k niečomu. 76 00:03:39,200 --> 00:03:41,610 Prvým z nich je skutočný majiteľ uvedeného spisu. 77 00:03:41,610 --> 00:03:43,820 Druhá je skupina, ktorá súbor patrí. 78 00:03:43,820 --> 00:03:46,090 Nebudeme sa sústrediť príliš veľa na to. 79 00:03:46,090 --> 00:03:50,010 A posledná vec je, niečo, ako je svet alebo ako všetci ostatní, kto je 80 00:03:50,010 --> 00:03:54,130 nie je špecifická pre tento súbor, a nemá mať žiadne vlastnícke práva k nej. 81 00:03:54,130 --> 00:04:05,650 >> Takže ak máme vlastník, skupina, a potom sa svet. 82 00:04:05,650 --> 00:04:10,510 A potom, pre každú z týchto skupín, je môže mať jednu z troch oprávnenia, 83 00:04:10,510 --> 00:04:13,010 OK, alebo viacerých z nich. 84 00:04:13,010 --> 00:04:15,070 Môžete mať povolenie na čítanie. 85 00:04:15,070 --> 00:04:16,560 Môžete mať správne povolenia. 86 00:04:16,560 --> 00:04:18,880 A môžete si spustiť oprávnenie. 87 00:04:18,880 --> 00:04:22,060 >> Takže pokiaľ ide o skutočné typy súborov, prečítajte si Povolenie je ako v skutočnosti čítanie 88 00:04:22,060 --> 00:04:23,250 obsah súboru. 89 00:04:23,250 --> 00:04:24,730 Právo povolenia sa píše do uvedeného súboru. 90 00:04:24,730 --> 00:04:28,370 Vykonávať oprávnenia beží súbor ako vy, keď musíte spustiť niektorý z 91 00:04:28,370 --> 00:04:29,620 Vaše CS50 projekty. 92 00:04:29,620 --> 00:04:32,190 93 00:04:32,190 --> 00:04:38,820 >> Takže keď budeme premýšľať o súboroch ako keď musíme čítať HTML 94 00:04:38,820 --> 00:04:41,790 Súbor, ktorý musí byť svet čitateľné, nie? 95 00:04:41,790 --> 00:04:44,420 Možno predpokladať, že aj majiteľ chce byť schopní upraviť tento súbor. 96 00:04:44,420 --> 00:04:46,610 Takže majiteľ bude potrebovať čítať a písať oprávnenia. 97 00:04:46,610 --> 00:04:48,710 Nemajú naozaj potrebujete spustiť. 98 00:04:48,710 --> 00:04:50,950 >> Skupina, ideme na liečbu rovnako ako svet pre teraz. 99 00:04:50,950 --> 00:04:54,610 Takže oni potrebujú povolenie na čítanie. 100 00:04:54,610 --> 00:04:57,310 Ale nemusíte písať alebo vykonať oprávnenia. 101 00:04:57,310 --> 00:05:01,920 A teraz, keď si myslíme, že späť do bývalej PSETs, čo si uvedomujeme, je tento druh 102 00:05:01,920 --> 00:05:03,360 z vyzerajú ako binárny, že jo? 103 00:05:03,360 --> 00:05:04,210 1 znamená áno. 104 00:05:04,210 --> 00:05:05,040 0 pre nie. 105 00:05:05,040 --> 00:05:06,870 A môžeme skutočne prekladať to binárne. 106 00:05:06,870 --> 00:05:10,478 >> Takže 110 v binárnom by byť 6. 107 00:05:10,478 --> 00:05:13,270 100 bude 4. 108 00:05:13,270 --> 00:05:14,690 Rovnaké je to s svetom. 109 00:05:14,690 --> 00:05:20,846 Takže číslo, ktoré by sa pre oprávnenia pre to bude 644. 110 00:05:20,846 --> 00:05:24,400 >> MIKE RIZZO: A ak si myslíte, späť do keď chmoded niečo, verím, 111 00:05:24,400 --> 00:05:28,980 dali do problému nastavenie príklad, kde by ste mohli urobiť 112 00:05:28,980 --> 00:05:36,470 niečo ako chmod 644 a potom názov súboru. 113 00:05:36,470 --> 00:05:39,980 644 potom, môžete teraz vidieť priamo kde to pochádza. 114 00:05:39,980 --> 00:05:42,840 Tak dúfajme, že robí, že trochu jasnejšie. 115 00:05:42,840 --> 00:05:45,600 >> A potom pre prehľadnosť vám chlapa - 116 00:05:45,600 --> 00:05:48,200 ach jo, tu je to znova. 117 00:05:48,200 --> 00:05:53,260 Takže 600 by potom byť len príklad dali sme sem, kde má vlastník 118 00:05:53,260 --> 00:05:56,360 čítanie a správne oprávnenia, zatiaľ čo skupina a svet nemajú žiadne oprávnenie 119 00:05:56,360 --> 00:05:58,145 prístup k súboru. 120 00:05:58,145 --> 00:06:01,500 >> TOMAS REIMERS: A potom sme rýchlo Zoznam spoločných oprávnenie. 121 00:06:01,500 --> 00:06:05,250 Takže adresára, budete chcieť skutočne chmod 711. 122 00:06:05,250 --> 00:06:08,930 Rýchle stranou - pre adresár mať spustiteľný povolenia znamená, že je schopný 123 00:06:08,930 --> 00:06:11,680 otvoriť adresár. 124 00:06:11,680 --> 00:06:15,280 Obrázky, CSS, JavaScript, HTML potreby 644, pretože v podstate svet 125 00:06:15,280 --> 00:06:16,400 potrebuje povolenie na čítanie. 126 00:06:16,400 --> 00:06:20,960 >> A PHP, ktoré vy ste videli aj keď nebudeme o tom hovoriť 127 00:06:20,960 --> 00:06:24,880 prísne je typicky s chmoded povolenie 600, pretože je to beh s 128 00:06:24,880 --> 00:06:26,540 oprávnenia vlastníka. 129 00:06:26,540 --> 00:06:27,790 Aspoň na zariadení. 130 00:06:27,790 --> 00:06:30,200 131 00:06:30,200 --> 00:06:36,870 >> MIKE RIZZO: Takže ak nie sú výslovne určiť, aký typ súboru 132 00:06:36,870 --> 00:06:39,480 Ak v skutočnosti nastavenie do tejto prezentácii - 133 00:06:39,480 --> 00:06:43,490 sme mali problém s tým, pretože všetko, čo nebolo správne chmoded - 134 00:06:43,490 --> 00:06:47,550 budete mať, druh, zakázané chyba, že webové stránky 135 00:06:47,550 --> 00:06:49,700 nemá v skutočnosti majú oprávnenie prístup bez ohľadu na súbor 136 00:06:49,700 --> 00:06:51,370 chcete, aby prístup. 137 00:06:51,370 --> 00:06:54,780 A samozrejme, že môže byť stanovená - ako problém sada - zmenou 138 00:06:54,780 --> 00:06:56,405 oprávnenia primerane. 139 00:06:56,405 --> 00:06:59,620 >> TOMAS REIMERS: A posledná poznámka pre Rýchlo miestny rozvoj - sme 140 00:06:59,620 --> 00:07:02,000 priniesol to, ale len sme chceli aby to zase - 141 00:07:02,000 --> 00:07:06,230 ak sa spýtate na serveri - takže miestneho hostiteľa, Napríklad, com alebo čokoľvek iného. - 142 00:07:06,230 --> 00:07:09,170 a neuvediete konkrétny súbor, súbor, ktorý váš počítač sa deje 143 00:07:09,170 --> 00:07:11,540 požiadať o sa nazýva index.html. 144 00:07:11,540 --> 00:07:12,790 Alebo v prípade, že neexistuje, index.php. 145 00:07:12,790 --> 00:07:15,560 146 00:07:15,560 --> 00:07:16,350 >> V pohode. 147 00:07:16,350 --> 00:07:19,560 Takže je to len rekapitulácia všetkého, dúfajme, že sme na ktoré sa vzťahuje 148 00:07:19,560 --> 00:07:22,800 sekcie a prednášky, a tak ďaleko CS50. 149 00:07:22,800 --> 00:07:26,110 A teraz budeme začať hovoriť o špecificky knižnice. 150 00:07:26,110 --> 00:07:30,270 JavaScript a CSS knižnice pre webové aplikácie. 151 00:07:30,270 --> 00:07:36,350 >> Tak jedna rýchla dôvod, prečo máme knižnice je programovanie - 152 00:07:36,350 --> 00:07:39,000 je tu veľa problémov programovanie, ktoré udržujú objavovať 153 00:07:39,000 --> 00:07:40,570 znova a znova a znova. 154 00:07:40,570 --> 00:07:43,870 Môžete si všimnúť, že mnoho internetových stránok je potrebné schopnosť mať rozbaľovacej 155 00:07:43,870 --> 00:07:49,100 menu, napríklad, alebo potrebujete schopnosť mať tlačidlo veľmi štandardné 156 00:07:49,100 --> 00:07:51,400 štýl, ktorý nemusí byť najjednoduchšie. 157 00:07:51,400 --> 00:07:54,670 Teraz, keď začnete sa dostať do HTML, môžete Uvedomujem si, že tlačidlá môže skutočne 158 00:07:54,670 --> 00:07:57,720 vyzerajú naozaj škaredo, ak vám nerobia nič. 159 00:07:57,720 --> 00:08:00,830 >> Takže veľa ľudí písali s názvom knižnice. 160 00:08:00,830 --> 00:08:02,990 A v tejto súvislosti, že sú tiež volal rámca. 161 00:08:02,990 --> 00:08:04,790 Budeme používať dva vzájomne zameniteľné. 162 00:08:04,790 --> 00:08:07,360 A to, čo oni sú, je, že sú v podstate premade kusy kódu - 163 00:08:07,360 --> 00:08:09,130 Buď CSS alebo JavaScript - 164 00:08:09,130 --> 00:08:13,240 že odniesť veľa tím máte v kódovaní. 165 00:08:13,240 --> 00:08:17,290 >> Takže dopredu definovať veľa tried, alebo dopredu definovať veľa funkcií pre 166 00:08:17,290 --> 00:08:20,110 JavaScript je prípad, ktorý môžete zavolať neskôr. 167 00:08:20,110 --> 00:08:22,690 A potom je to možné, nejako, sa prístup k tomuto kódu, bez toho, aby 168 00:08:22,690 --> 00:08:23,710 museli niečo urobiť. 169 00:08:23,710 --> 00:08:27,750 Príkladom knižnice bolo CS50.H. To bola knižnica dali sme vám späť 170 00:08:27,750 --> 00:08:32,090 v týždni jeden, ktorý dovolil, aby si veci, ako že vezmi_int a GetString 171 00:08:32,090 --> 00:08:35,237 aby bolo nutné písať akýkoľvek kód sami. 172 00:08:35,237 --> 00:08:36,179 >> MIKE RIZZO: Dobre. 173 00:08:36,179 --> 00:08:40,299 Tak tu, rovnako ako sme museli zahrnúť v našom c súbory odlišujú 174 00:08:40,299 --> 00:08:46,570 knižnice, tiež by sme mali zahrnúť do náš HTML súbory rôznych knižníc. 175 00:08:46,570 --> 00:08:50,310 Napríklad, ak by sme chceli zahrnúť špecifické knižnica JavaScript tu, 176 00:08:50,310 --> 00:08:52,850 možno ten, ktorý sme napísal sami, ako je to lokálne hostil 177 00:08:52,850 --> 00:08:56,000 tzv script.js, práve sme použiť tento zápis. 178 00:08:56,000 --> 00:08:59,500 >> Takže máme typ skriptu rovná JavaScript zdroj rovná 179 00:08:59,500 --> 00:09:01,260 JavaScript.js. 180 00:09:01,260 --> 00:09:05,190 A ak si myslíte, že späť do svojej CS50 financie problému nastavenie, ak ste sa pozreli na 181 00:09:05,190 --> 00:09:09,190 header.php v priečinku šablón, by ste mali vidieť 182 00:09:09,190 --> 00:09:10,970 niektoré z nich v cene. 183 00:09:10,970 --> 00:09:13,250 Tak to prvý - skripty - 184 00:09:13,250 --> 00:09:16,080 je vrátane knižnice JavaScript. 185 00:09:16,080 --> 00:09:18,760 Vrátane knižnice CSS je trochu inak. 186 00:09:18,760 --> 00:09:21,430 >> Tu, namiesto skriptu Tag musíte tag odkazu. 187 00:09:21,430 --> 00:09:27,110 A potom, zadajte text CSS je trochu iný. 188 00:09:27,110 --> 00:09:29,270 Nemusíte vždy musí obsahovať rel štýlov. 189 00:09:29,270 --> 00:09:30,970 Ale myslím, že to, všeobecne, dobrej praxe. 190 00:09:30,970 --> 00:09:35,810 >> A nakoniec, HREF, ktorý pravdepodobne videl vo svojich ATAGs pre prepojenie 191 00:09:35,810 --> 00:09:39,440 v rôznych väzieb len určuje, odkaz, kde nájsť to. 192 00:09:39,440 --> 00:09:42,250 Napríklad, ak by sme chceli spojiť iný knižnica - povedzme - 193 00:09:42,250 --> 00:09:49,330 že žil v styles.css. 194 00:09:49,330 --> 00:09:54,030 A my sme chceli spojiť to v tom, že je hostované na webe, budeme kopírovať to. 195 00:09:54,030 --> 00:09:58,834 A potom ju vložiť do akéhokoľvek máme tu miesto. 196 00:09:58,834 --> 00:10:01,340 >> TOMAS REIMERS: OK, dúfajme, že ste chlapci sú už oboznámení 197 00:10:01,340 --> 00:10:02,410 s tým, ako prepojiť CSS. 198 00:10:02,410 --> 00:10:04,000 Mal si na to, že na Vaša posledná hnedá sada. 199 00:10:04,000 --> 00:10:07,110 JavaScript, niektorí z vás možno majú nejaké skúsenosti s 200 00:10:07,110 --> 00:10:07,980 Niektorí z vás možno nie. 201 00:10:07,980 --> 00:10:12,190 >> Takže teraz, viem, že súbor JavaScript je veľmi podobný súboru CSS v 202 00:10:12,190 --> 00:10:15,640 pocit, že môžete odkaz na neho, alebo že môžete zahrnúť interne. 203 00:10:15,640 --> 00:10:17,360 A to vám umožní skriptu veci. 204 00:10:17,360 --> 00:10:21,820 A budeme vás prevedie Trochu JavaScript neskôr. 205 00:10:21,820 --> 00:10:23,560 >> Takže pomocou knižnice - 206 00:10:23,560 --> 00:10:26,150 akonáhle ste súčasťou, je to ako jednoduché, ako doslova volá 207 00:10:26,150 --> 00:10:29,640 funkcie alebo pridanie Trieda mena do nej. 208 00:10:29,640 --> 00:10:32,220 Posledná vec, ktorú chceme hovoriť o, pokiaľ ide o knižnice - 209 00:10:32,220 --> 00:10:34,180 a to je viac technickej poznámke - 210 00:10:34,180 --> 00:10:35,860 Je licenciou open source. 211 00:10:35,860 --> 00:10:41,550 Takže keď zistíte, tieto skutočné knižnice, si môžu myslieť, zo 212 00:10:41,550 --> 00:10:47,630 Otázky páči, je to v poriadku, že som len pomocou kódu niekoho iného, ​​a to najmä 213 00:10:47,630 --> 00:10:51,970 pretože to je niečo, čo veľmi povedal, že nebude robiť v tomto kurze. 214 00:10:51,970 --> 00:10:55,790 >> Takže v prípade open source licenciou, Mnoho vývojárov - 215 00:10:55,790 --> 00:10:57,540 potom, čo som napísal knižnicu, ktorý si myslí, že by mohli byť 216 00:10:57,540 --> 00:10:59,450 užitočné pre ostatných ľudí - 217 00:10:59,450 --> 00:11:02,420 bude ho publikovať na webe a dať mu licenciu. 218 00:11:02,420 --> 00:11:06,620 A licencie v podstate hovorí, že som sa týmto udeľovanie povolení na ďalšie 219 00:11:06,620 --> 00:11:11,250 ľudia používať tento softvér s týmto druhom 220 00:11:11,250 --> 00:11:13,230 dojednania. 221 00:11:13,230 --> 00:11:16,100 >> Sme zaradili odkaz na dobré stránky na pomôže pochopiť licencií v 222 00:11:16,100 --> 00:11:17,720 prípade, že sa dostanete do nich. 223 00:11:17,720 --> 00:11:21,680 Spoločné dojednania sú veci ako ste vítaní v mojej knižnici, aby 224 00:11:21,680 --> 00:11:23,000 Kým mi dať úver. 225 00:11:23,000 --> 00:11:25,670 Ste vítaní na použitie mojej knižnice tak dlho, ako keď sa rozbije 226 00:11:25,670 --> 00:11:26,790 že ma viniť. 227 00:11:26,790 --> 00:11:30,310 Ste vítaní na použitie mojej knižnice tak dlho, ak nechcete použiť, ako zarobiť peniaze 228 00:11:30,310 --> 00:11:31,910 pre seba. 229 00:11:31,910 --> 00:11:34,130 Jedná sa o bežné druhy dojednania. 230 00:11:34,130 --> 00:11:37,780 >> Pre tento CS50 poslednom projekte, by nemal byť super relevantné, pretože 231 00:11:37,780 --> 00:11:41,440 projekty, ktoré vy používate sú pravdepodobne skôr trochu známy. 232 00:11:41,440 --> 00:11:44,170 Ale keď ste vlastne ísť von do svet a začať používať knižnice, ktoré 233 00:11:44,170 --> 00:11:48,100 môže, ale nemusí byť, rovnako realizovaný ako niektoré z viac populárne tie sme 234 00:11:48,100 --> 00:11:49,780 bude prechádza. 235 00:11:49,780 --> 00:11:53,310 Je dobré, aby bolo možné pochopiť, Tieto licencie a na 236 00:11:53,310 --> 00:11:54,560 pochopiť, čo znamenajú. 237 00:11:54,560 --> 00:11:58,120 238 00:11:58,120 --> 00:11:58,586 A vracať. 239 00:11:58,586 --> 00:12:00,960 >> MIKE RIZZO: OK. 240 00:12:00,960 --> 00:12:04,850 Takže teraz pohybuje na príkladoch skutočné CSS. 241 00:12:04,850 --> 00:12:07,770 V tomto bode tak ďaleko, môžete Nie je sa stretli to. 242 00:12:07,770 --> 00:12:10,300 Ale možno ste sa stretli s tým v tvoj každodenný život, kde sa niečo 243 00:12:10,300 --> 00:12:13,160 to vyzerá na jednu stranu na jednom prehliadači nemusí vyzerať rovnako 244 00:12:13,160 --> 00:12:14,880 spôsob, ako v inom prehliadači. 245 00:12:14,880 --> 00:12:17,400 >> To sa nazýva prehliadač prehliadač kompatibilita. 246 00:12:17,400 --> 00:12:20,780 A stále je to stále viac a väčší problém, najmä preto, 247 00:12:20,780 --> 00:12:25,260 prehliadača sa stále viac a viac slobody realizovať veci tak, ako chcú. 248 00:12:25,260 --> 00:12:28,440 Takže prekonať to, že tam skutočne je veľká knižnica s názvom Normalize.CSS. 249 00:12:28,440 --> 00:12:32,236 250 00:12:32,236 --> 00:12:33,770 >> TOMAS REIMERS: zahrnuté odkaz. 251 00:12:33,770 --> 00:12:36,210 V tomto bode, to je užitočné v prípade, Máte svoj notebook tam 252 00:12:36,210 --> 00:12:38,740 pri pohľade na mieste. 253 00:12:38,740 --> 00:12:42,580 A dávame vám to hneď Teraz jednoducho preto, že CS50 finále 254 00:12:42,580 --> 00:12:44,370 Projekt bude skutočne vás vyzve na jeho vykonanie 255 00:12:44,370 --> 00:12:45,860 podobne aj cez prehliadača. 256 00:12:45,860 --> 00:12:49,250 >> Takže stačí mať na zadnej strane hlava, to je nádherný knižnica 257 00:12:49,250 --> 00:12:51,170 , Pretože to bude, tak nejako, štandardizovať veci. 258 00:12:51,170 --> 00:12:54,230 Vo Firefoxe, niečo, čo sa môže ukázať, ako jeden pixel na ľavej strane. 259 00:12:54,230 --> 00:12:58,390 A potom Chrome môže rozhodnúť, že v skutočnosti to, čo ste mal na mysli bolo 10 pixelov 260 00:12:58,390 --> 00:12:59,380 na ľavej strane. 261 00:12:59,380 --> 00:13:01,030 A chcete štandardizovať to. 262 00:13:01,030 --> 00:13:05,360 Normalizácia bude vlastne robiť naozaj dobrý Úlohou uistite sa, že vaše stránky 263 00:13:05,360 --> 00:13:08,070 vyzerá rovnako v rôznych prehliadačoch. 264 00:13:08,070 --> 00:13:10,660 >> MIKE RIZZO: Takže keby sme chceli len kliknite na odkaz naozaj rýchlo a ukázať 265 00:13:10,660 --> 00:13:13,140 si, čo to vyzerá, vás Môžete si ho stiahnuť pomocou 266 00:13:13,140 --> 00:13:14,670 obrie tlačidlo Download. 267 00:13:14,670 --> 00:13:18,520 Alebo by som Odporúčame vám prečítať viac o tom po kliknutí na tento odkaz v dolnej 268 00:13:18,520 --> 00:13:19,310 v pravom dolnom rohu. 269 00:13:19,310 --> 00:13:22,420 >> TOMAS REIMERS: A ak skutočne kliknite na tlačidlo Čítať viac tady - 270 00:13:22,420 --> 00:13:24,340 kliknite na zdroj na GitHub - 271 00:13:24,340 --> 00:13:31,720 budete skutočne vidieť open source licencie na LICENSE.md tady. 272 00:13:31,720 --> 00:13:35,740 A uvidíte, je tu veľmi populárne licencie MIT. 273 00:13:35,740 --> 00:13:38,940 Opäť platí, že ak si prečítate v texte, budete môcť nájsť na stránkach 274 00:13:38,940 --> 00:13:42,550 sme odkazované pred a byť schopný pochopiť, bez toho aby ste museli čítať 275 00:13:42,550 --> 00:13:45,920 prostredníctvom právneho žargónu. 276 00:13:45,920 --> 00:13:46,850 >> MIKE RIZZO: OK, dobre. 277 00:13:46,850 --> 00:13:47,940 Tak to je Normalizácia. 278 00:13:47,940 --> 00:13:49,190 Chceli sme, aby vám že naozaj rýchlo. 279 00:13:49,190 --> 00:13:50,030 Oh, máte nejakú otázku? 280 00:13:50,030 --> 00:13:53,013 >> DIVÁKOV: Takže keď si ju stiahnuť, je len sledovať ten kód, ktorý majú 281 00:13:53,013 --> 00:13:54,098 pod tlačidlom stiahnutie? 282 00:13:54,098 --> 00:13:55,860 >> TOMAS REIMERS: Áno, tak keď si stiahnete - 283 00:13:55,860 --> 00:13:58,130 >> MIKE RIZZO: Oh, to je skvelé miesto. 284 00:13:58,130 --> 00:14:00,700 Takže otázka je, ako to sme vlastne ju stiahnuť? 285 00:14:00,700 --> 00:14:03,260 Takže ak klikneme na odkaz, vidíme, že skutočne objavia 286 00:14:03,260 --> 00:14:05,030 v zdrojovom kóde. 287 00:14:05,030 --> 00:14:08,550 Tak, ako to urobiť, čo sme mohli to je len kliknite na príkaz Uložiť ako. 288 00:14:08,550 --> 00:14:10,830 Uložiť ako a že by vychovávať súbor. 289 00:14:10,830 --> 00:14:14,160 A potom môžeme zvoliť uloženie to ako normalize.CSS. 290 00:14:14,160 --> 00:14:15,810 A potom budete musieť prepojiť ju do - 291 00:14:15,810 --> 00:14:18,660 >> TOMAS REIMERS: rovnakým spôsobom odkazujú v inom súbore. 292 00:14:18,660 --> 00:14:22,250 A akonáhle sa prepojiť ju, čo je skvelé o Normalizácia je to skutočne 293 00:14:22,250 --> 00:14:25,920 starať sa o všetky ťažké fungovať sama o sebe. 294 00:14:25,920 --> 00:14:27,730 To znamená, že nemáte pridať nejaké triedy. 295 00:14:27,730 --> 00:14:29,690 >> Nemusíte robiť nič divného. 296 00:14:29,690 --> 00:14:34,590 To bude normalizovať bez teba robiť niečo ďalšie. 297 00:14:34,590 --> 00:14:36,083 Áno, budete musieť zahrnúť. 298 00:14:36,083 --> 00:14:38,990 299 00:14:38,990 --> 00:14:40,240 Google Chrome nereaguje. 300 00:14:40,240 --> 00:14:43,270 301 00:14:43,270 --> 00:14:44,860 >> Len rýchly stranou - 302 00:14:44,860 --> 00:14:46,800 Všimol som si, sme skočili do toho. 303 00:14:46,800 --> 00:14:49,010 Zvyšok tejto prezentácie je Bude rýchly prehľad. 304 00:14:49,010 --> 00:14:50,380 Prehľad knižníc. 305 00:14:50,380 --> 00:14:52,710 >> V podstate to, čo oni sú. 306 00:14:52,710 --> 00:14:53,350 To, čo robia. 307 00:14:53,350 --> 00:14:54,060 Ako sú užitočné. 308 00:14:54,060 --> 00:14:56,540 Ako ste ich mohli realizovať. 309 00:14:56,540 --> 00:14:59,730 Ak chcete začať hľadať na ne, Nasledujúce spolu, a prečítanie 310 00:14:59,730 --> 00:15:01,990 im, by som veľmi povzbudiť, že. 311 00:15:01,990 --> 00:15:07,620 >> Prípadne, ste vítaní aj so začať sťahovať ich a vrátane 312 00:15:07,620 --> 00:15:11,400 je v očiach len preto, aby videli, čo vyzerať alebo čo robiť, keď máte 313 00:15:11,400 --> 00:15:12,270 váš laptop pred vami. 314 00:15:12,270 --> 00:15:14,650 Ak nie, ste vítaní, aby sa počúvania nám hovoriť. 315 00:15:14,650 --> 00:15:15,500 Budeme ďalej hovoriť. 316 00:15:15,500 --> 00:15:18,680 A máme čas na konci, dúfajme, že budeme skutočne dostať do ukáže vám, 317 00:15:18,680 --> 00:15:20,946 to, čo niektoré z týchto knižníc vyzerať. 318 00:15:20,946 --> 00:15:22,320 >> MIKE RIZZO: Cool. 319 00:15:22,320 --> 00:15:25,466 Dobre, takže teraz poďme hovoriť o Písmo Skvelé. 320 00:15:25,466 --> 00:15:30,480 >> TOMAS REIMERS: tak Font Úžasné je naozaj pekné miesto, a to najmä pre tých, 321 00:15:30,480 --> 00:15:32,450 z nás, ktorí sú menej umelecky talentovaný. 322 00:15:32,450 --> 00:15:36,330 323 00:15:36,330 --> 00:15:38,880 Ignorovanie názov písma Úžasné, to dáva Ste banda ikon, ktoré sú 324 00:15:38,880 --> 00:15:41,050 veľmi užitočné. 325 00:15:41,050 --> 00:15:45,950 Takže mnohokrát budete realizovať icon budete chcieť ako peknú X tak, 326 00:15:45,950 --> 00:15:47,170 ktoré môžete uzavrieť tak niečo. 327 00:15:47,170 --> 00:15:49,910 >> Alebo možno budete chcieť nejaké tlačidlo Edit s kresba ceruzkou, ako je 328 00:15:49,910 --> 00:15:50,940 všetci ostatní. 329 00:15:50,940 --> 00:15:53,850 A to je, keď ste sa dozvedeli, že kreslenie tie ikony môžu byť 330 00:15:53,850 --> 00:15:55,510 veľmi zdĺhavé a ťažké. 331 00:15:55,510 --> 00:15:59,160 Font Awesome - ak ste skutočne ísť na stránky - 332 00:15:59,160 --> 00:16:02,892 vám dáva veľa ikon pod Ikony v hornej časti. 333 00:16:02,892 --> 00:16:06,980 Jo, len hore. 334 00:16:06,980 --> 00:16:09,030 To vám dá veľa ikon zadarmo. 335 00:16:09,030 --> 00:16:15,210 >> Takže tu vidíte, máme veci, ako je hviezdička, bary, blesk, 336 00:16:15,210 --> 00:16:19,750 kalendár, chyba, knihy, et cetera. 337 00:16:19,750 --> 00:16:21,110 To môže byť veľmi užitočné. 338 00:16:21,110 --> 00:16:24,290 Spôsob, ako zahrnúť je zahrnúť doslova súboru CSS. 339 00:16:24,290 --> 00:16:29,760 A potom, čo ste súčasťou súboru CSS, to, čo môžete urobiť, je vytvoriť 340 00:16:29,760 --> 00:16:33,430 tag s názvom I. satands pre icon s triedou FA 341 00:16:33,430 --> 00:16:34,460 stojí za font Awesome. 342 00:16:34,460 --> 00:16:36,330 A potom, bez ohľadu na triedu budete chcieť. 343 00:16:36,330 --> 00:16:41,220 >> Takže keď som chcel ikonu tohto Plus námestí, priamo tu, by som dať 344 00:16:41,220 --> 00:16:43,290 je trieda FA. 345 00:16:43,290 --> 00:16:46,230 A potom FA pomlčku a spojovník námestí. 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 potom, posledný CSS knižnica sa chceme dostať cez sme 349 00:16:56,980 --> 00:16:59,950 sa snaží udržať minimálne na CSS knižnice, pretože si uvedomujeme 350 00:16:59,950 --> 00:17:03,660 Názov tejto prezentácie je JavaScript knižnice. 351 00:17:03,660 --> 00:17:07,089 Ale my sme si mysleli, že sme sa môže aj Predstavujeme Vám k iným knižniciam 352 00:17:07,089 --> 00:17:09,569 keď sme hovorili o knižniciach. 353 00:17:09,569 --> 00:17:11,400 >> Je to Google Web Fonts. 354 00:17:11,400 --> 00:17:17,040 A to, čo Google Web Fonts Vám umožní urobiť, je pridať písma na vaše webové stránky, 355 00:17:17,040 --> 00:17:22,079 čo je naozaj jednoduchý spôsob, ako to pekná a odlíšiť sady 356 00:17:22,079 --> 00:17:24,460 od každého iného je, ak má pekné písmo, alebo v prípade, že má pekný 357 00:17:24,460 --> 00:17:27,790 kolekcie písiem. 358 00:17:27,790 --> 00:17:31,410 Google Web Fonts je pekný rozdiel od iných knižnice v tom zmysle, že je to 359 00:17:31,410 --> 00:17:33,490 naozaj riadiť inštalácie. 360 00:17:33,490 --> 00:17:38,680 >> Takže ak budete nasledovať odkaz, je to google.com / fonts, verím. 361 00:17:38,680 --> 00:17:41,100 Ak sa budete držať, aby vás môžu vybrať svoje písmo. 362 00:17:41,100 --> 00:17:44,410 Môžete si vybrať, na ľavej strane od hrúbku, sklon, et cetera. 363 00:17:44,410 --> 00:17:48,970 A potom, akonáhle ste si vybrali jeden, môžete kliknutím na tlačidlo rýchle použitie. 364 00:17:48,970 --> 00:17:49,820 Presne tam. 365 00:17:49,820 --> 00:17:51,590 V pravom dolnom rohu okna. 366 00:17:51,590 --> 00:17:54,380 367 00:17:54,380 --> 00:17:56,700 >> A potom, prejdite nadol. 368 00:17:56,700 --> 00:17:59,600 369 00:17:59,600 --> 00:18:02,650 Po prvé, že vám CSS, ktoré budete musieť skutočne odkaz na neho. 370 00:18:02,650 --> 00:18:03,330 Je to tu. 371 00:18:03,330 --> 00:18:05,170 Stačí si len skopírovať a vložiť, že dovnútra 372 00:18:05,170 --> 00:18:07,250 A pekná vec, o tomto je nemusíte vlastne ani potreba 373 00:18:07,250 --> 00:18:08,340 stiahnuť súbor. 374 00:18:08,340 --> 00:18:11,170 >> Čo to urobí, je, že to bude odkaz na Google verzií toho. 375 00:18:11,170 --> 00:18:14,130 Takže späť k čo to znamená. 376 00:18:14,130 --> 00:18:18,270 To znamená, že keď používateľ stiahne súbor - 377 00:18:18,270 --> 00:18:22,300 stiahne vaše stránky HTML - váš HTML Stránka sa bude odkazovať na tento súbor. 378 00:18:22,300 --> 00:18:26,790 >> Takže, váš počítač bude vidieť, oh, to je hosťovaní na google.com skôr 379 00:18:26,790 --> 00:18:28,170 ako na theirsite.com. 380 00:18:28,170 --> 00:18:30,370 Nechaj ma ísť požiadať Google o tomto súbore. 381 00:18:30,370 --> 00:18:32,800 A potom, že to bude zahŕňať je to skoro, ako keby sa jednalo o 382 00:18:32,800 --> 00:18:35,584 súčasťou vašich vlastných stránok. 383 00:18:35,584 --> 00:18:36,540 >> TOMAS REIMERS: Cool. 384 00:18:36,540 --> 00:18:40,980 A akonáhle sa patrí, potom sa zahrnúť ju do svojho CSS, to vám dáva 385 00:18:40,980 --> 00:18:41,830 aktuálny riadok. 386 00:18:41,830 --> 00:18:45,188 Takže môžete nastaviť rodinného majetku písma rovnajúcu sa názov vášho písma. 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 Tak sme práve dokončili s CSS. 390 00:18:52,220 --> 00:18:57,230 A niektorí z vás si možno myslieť, dobre, sme mali nejaké CSS na CS50 financií. 391 00:18:57,230 --> 00:19:00,390 Ale CSS knižnica bola bootstrap. 392 00:19:00,390 --> 00:19:05,190 Sme vlastne patrí Bootstrap málo neskôr v JavaScripte, pretože sa 393 00:19:05,190 --> 00:19:09,660 knižnica Bootstrap CSS tiež prichádza s množstvom JavaScript, ktorý 394 00:19:09,660 --> 00:19:12,060 Bootstrap alebo Twitter - kto robil Bootstrap - 395 00:19:12,060 --> 00:19:15,426 používa pre správu všetkých ich CSS. 396 00:19:15,426 --> 00:19:19,592 >> TOMAS REIMERS: Má niekto nejaké otázky doteraz o CSS všeobecne? 397 00:19:19,592 --> 00:19:20,723 Sme dobrý? 398 00:19:20,723 --> 00:19:21,216 Úžasné. 399 00:19:21,216 --> 00:19:22,495 >> MIKE RIZZO: Skvelé. 400 00:19:22,495 --> 00:19:25,136 >> TOMAS REIMERS: Takže sťahovanie na JavaScript. 401 00:19:25,136 --> 00:19:27,900 >> MIKE RIZZO: Tak sme chceli hovoriť o jQuery začať. 402 00:19:27,900 --> 00:19:30,780 Má niekto počul o jQuery pred alebo použil? 403 00:19:30,780 --> 00:19:32,180 Jo, pár? 404 00:19:32,180 --> 00:19:36,000 Takže ak ste práve pracovať s natívnym JavaScript, zistíte sami 405 00:19:36,000 --> 00:19:41,000 písanie veľa dlhých selektorov veľa. 406 00:19:41,000 --> 00:19:44,400 Takže to, čo jQuery robí, je, že poskytuje pekný obal pre JavaScript 407 00:19:44,400 --> 00:19:48,180 jazyk, ktorý vám umožní ľahko zvoliť a manipulovať s rôznymi prvkami 408 00:19:48,180 --> 00:19:52,470 v dokumente objekt modeli webové stránky alebo DOM, čo si myslím, 409 00:19:52,470 --> 00:19:54,290 vy ste počuli v prednáška v tomto bode. 410 00:19:54,290 --> 00:19:57,550 >> TOMAS REIMERS: Ak ste ešte nepočuli o to, alebo ak ste sledovali prednáška 411 00:19:57,550 --> 00:20:01,870 napriek tomu, Document Object Model je v podstate, ako sa veci zastúpené. 412 00:20:01,870 --> 00:20:05,290 Takže HTML trochu vyzerá ako strom keď ste skutočne čerpať ju. 413 00:20:05,290 --> 00:20:06,850 Máte HTML element na vrchole. 414 00:20:06,850 --> 00:20:07,560 Máte hlavu a telo. 415 00:20:07,560 --> 00:20:09,500 >> A potom, v rámci ktorej si majú všetko ostatné. 416 00:20:09,500 --> 00:20:10,660 To je odvolával sa na ako DOM - 417 00:20:10,660 --> 00:20:12,120 Document Object Model. 418 00:20:12,120 --> 00:20:16,090 Takže model, ktorý reprezentuje objekty dokument je jednoduchý spôsob, ako myslieť 419 00:20:16,090 --> 00:20:18,560 o tom. 420 00:20:18,560 --> 00:20:22,520 A jedným z veľkých vecí o jQuery Je to naozaj robí traverzování 421 00:20:22,520 --> 00:20:26,460 že a manipulácia s prvkami v rámci že neuveriteľne jednoduché. 422 00:20:26,460 --> 00:20:30,300 >> Tak jednoduché, v skutočnosti, že väčšina JavaScript knižnice, alebo nie, ak 423 00:20:30,300 --> 00:20:34,200 Väčšina, veľký väčšina tých uvidíte v skutočnosti vyžadujú, jQuery, takže 424 00:20:34,200 --> 00:20:37,530 že je možné spustiť sami jednoducho pretože ak ste nemali jQuery, vás 425 00:20:37,530 --> 00:20:40,540 by odpad veľa času sa snažia prísť na to, ako vybrať určité 426 00:20:40,540 --> 00:20:43,660 prvky a ako robiť iné veci. 427 00:20:43,660 --> 00:20:47,950 A ďalšia skvelá vec, o jQuery je, že je to cross kompatibilný so všetkými prehliadačmi. 428 00:20:47,950 --> 00:20:51,550 >> Takže pamätajte späť, keď sme povedali, že nie všetky prehliadače implementovať 429 00:20:51,550 --> 00:20:53,100 veci rovnakým spôsobom? 430 00:20:53,100 --> 00:20:55,120 To platí aj v JavaScripte. 431 00:20:55,120 --> 00:20:58,220 A jedným z veľkých vecí, o jQuery je, že to bude detekovať 432 00:20:58,220 --> 00:21:00,300 prehliadač a odhaliť vhodná metóda. 433 00:21:00,300 --> 00:21:03,420 >> Takže ak budete potrebovať vybrať prvok, Internet Explorer by sa povedať, že ste 434 00:21:03,420 --> 00:21:05,770 robiť týmto spôsobom. 435 00:21:05,770 --> 00:21:08,300 Firefox by sa povedať, správne spôsob, ako je tento spôsob. 436 00:21:08,300 --> 00:21:09,710 jQuery nestará. 437 00:21:09,710 --> 00:21:12,550 Keď poviete jQuery vybrať prvok bude zistiť, ako je to 438 00:21:12,550 --> 00:21:16,290 robiť to v prehliadači užívateľ je v súčasnej dobe, a potom vykonajte 439 00:21:16,290 --> 00:21:18,584 to tak. 440 00:21:18,584 --> 00:21:22,650 >> MIKE RIZZO: Tak poďme o tom hovoriť využitie jQuery trochu. 441 00:21:22,650 --> 00:21:27,670 Rovnako ako PHP, jQuery má najmä láska na znak dolára. 442 00:21:27,670 --> 00:21:30,880 Tak zistíte, že žiadny jQuery - 443 00:21:30,880 --> 00:21:32,060 dobre, nie je všetko. 444 00:21:32,060 --> 00:21:35,210 Niekedy môžete nahradiť dolár prihlásiť sa slovom jQuery. 445 00:21:35,210 --> 00:21:38,980 Ale všeobecne, len preto, že je to kratšie, keď vidíte, že jQuery 446 00:21:38,980 --> 00:21:41,420 používa to bude s znakom dolára. 447 00:21:41,420 --> 00:21:47,030 >> Tak tu sme len ukazuje na začiatok volič pre element v DOM. 448 00:21:47,030 --> 00:21:52,850 Tu máme nasledovať znak dolára otvorené zátvorky a potom citácie. 449 00:21:52,850 --> 00:21:56,130 A v úvodzoviek ísť našich voličov pre rôzne prvky. 450 00:21:56,130 --> 00:21:59,810 Rovnako ako v CSS, sme potrebovali voliča, aby môcť štýl rôznych prvkov 451 00:21:59,810 --> 00:22:00,840 v rámci stránky. 452 00:22:00,840 --> 00:22:06,555 Tieto rôzne selektory prekladať presne na jQuery a JavaScript, 453 00:22:06,555 --> 00:22:07,820 z väčšej časti. 454 00:22:07,820 --> 00:22:10,120 >> Takže tu máme dot foo. 455 00:22:10,120 --> 00:22:14,780 Takže ak si pamätáte z prednášky, bodka jednoducho znamená triedu. 456 00:22:14,780 --> 00:22:18,850 Takže sme vyberiete prvok s triedou foo. 457 00:22:18,850 --> 00:22:22,670 Takže keď som sa ísť dopredu a otvoriť naše JavaScript console tu naozaj rýchlo 458 00:22:22,670 --> 00:22:26,830 len demonštrovať to, či som typ znak dolára, vidíme, že je to nejaký 459 00:22:26,830 --> 00:22:28,090 funkcia, ktorá príde. 460 00:22:28,090 --> 00:22:29,420 A to je len definovaný jQuery. 461 00:22:29,420 --> 00:22:32,120 >> TOMAS REIMERS: Pre tých z vás, neznáme, konzola je nástroj 462 00:22:32,120 --> 00:22:35,430 v Chrome, ktorý umožňuje, v podstate, beh JavaScript 463 00:22:35,430 --> 00:22:36,450 aktuálna stránka. 464 00:22:36,450 --> 00:22:39,420 To zistíte, neuveriteľne užitočné, keď ste vlastne ladenie a 465 00:22:39,420 --> 00:22:42,400 musí byť rovnako ako to, čo je aktuálne Hodnota nejaké globálne premenné alebo čo 466 00:22:42,400 --> 00:22:43,910 je niečo iné? 467 00:22:43,910 --> 00:22:47,620 Je to niečo ako GDB s výnimkou že môžete skutočne 468 00:22:47,620 --> 00:22:51,600 manipulovať s prvkami na stránke sa je v oveľa jednoduchšie móde. 469 00:22:51,600 --> 00:22:55,080 A tiež to nie je, v podstate, skontrolujte, či s vami, ako sa s tým nič nerobí. 470 00:22:55,080 --> 00:22:58,660 >> Takže vzhľadom k tomu, GDB môže byť rád, si istí, že chcete spustiť ďalší krok? 471 00:22:58,660 --> 00:22:59,830 Konzola je v skutočnosti. 472 00:22:59,830 --> 00:23:03,690 Tak ako webová stránka je vykresľovanie a robiť, čo to robí, 473 00:23:03,690 --> 00:23:05,720 Rada je tiež beží vedľa nej. 474 00:23:05,720 --> 00:23:08,330 A vy môžete dať pričítať kód do že konzola, ktorá bude 475 00:23:08,330 --> 00:23:09,260 byť prevádzkovaný na stránke. 476 00:23:09,260 --> 00:23:12,190 >> MIKE RIZZO: Tak vstúpiť do konzoly, Myslím, že by som mal stručne 477 00:23:12,190 --> 00:23:13,750 spomenúť, ako na to. 478 00:23:13,750 --> 00:23:17,850 V posledných problémy, ktoré môžu mať ojazdené Chrome je kontrolovať prvok 479 00:23:17,850 --> 00:23:20,440 funkcie alebo zobraziť zdrojový stránku - 480 00:23:20,440 --> 00:23:23,870 a tie sú prístupné len tým, že právo Kliknutím na stránky alebo špecifické 481 00:23:23,870 --> 00:23:28,430 prvok a tým buď prehliadnuť prvok alebo zobrazenie zdroja stránky. 482 00:23:28,430 --> 00:23:31,190 Môžeme tiež prístup JavaScript konzoly priamo 483 00:23:31,190 --> 00:23:33,630 výber kontrolovať prvok. 484 00:23:33,630 --> 00:23:37,930 Takže potom stačí kliknúť na konzole na pravej strane. 485 00:23:37,930 --> 00:23:41,900 >> Prípadne môžete tiež preč na pravom hornom rohu, 486 00:23:41,900 --> 00:23:46,820 ktorý je odrezaný na tejto obrazovke, kde má tri vodorovné pruhy. 487 00:23:46,820 --> 00:23:52,010 A idete dole k nástrojom a potom konzola JavaScript 488 00:23:52,010 --> 00:23:53,240 tu, kde môžete vidieť - 489 00:23:53,240 --> 00:23:54,370 aspoň v systéme Windows - 490 00:23:54,370 --> 00:23:59,680 skratka je Shift Control J. Tak ak by sme chceli vybrať prvok 491 00:23:59,680 --> 00:24:06,060 na tejto stránke, rovnako ako som ukázal, skôr, urobíme znak dolára otvorené zátvorky 492 00:24:06,060 --> 00:24:08,180 a potom cituje. 493 00:24:08,180 --> 00:24:11,750 >> Zaujímavosťou je, všeobecne, jednoduché úvodzovky a dvojité úvodzovky sú 494 00:24:11,750 --> 00:24:12,370 vymeniteľná. 495 00:24:12,370 --> 00:24:16,050 Takže veľa ľudí stačí použiť jeden úvodzovky, pretože sú rýchlejšie typ 496 00:24:16,050 --> 00:24:19,780 ako úvodzovkách, pretože nemáte musieť držať stlačený kláves Shift. 497 00:24:19,780 --> 00:24:21,770 Tak som si len to, že práve teraz. 498 00:24:21,770 --> 00:24:24,510 >> Takže chcem vybrať niečo, s triedou. 499 00:24:24,510 --> 00:24:27,200 Kontajner, len preto, že viem, že je to niečo, čo je v našich 500 00:24:27,200 --> 00:24:28,740 webové stránky práve teraz. 501 00:24:28,740 --> 00:24:29,520 A ja som stlačte kláves Enter. 502 00:24:29,520 --> 00:24:31,670 A vidíme, že vybral to. 503 00:24:31,670 --> 00:24:34,990 Tak to sa ukáže, že vrátil sa daný objekt. 504 00:24:34,990 --> 00:24:36,620 Tak to je základný výber. 505 00:24:36,620 --> 00:24:40,080 Ak by sme chceli skutočne manipulovať, budete musieť niečo hovoriť 506 00:24:40,080 --> 00:24:43,925 na tento výber, ktorý sa dostaneme do neskôr. 507 00:24:43,925 --> 00:24:49,030 >> TOMAS REIMERS: Takže stačí sa pozrieť na to viac do hĺbky, to sa nelíši 508 00:24:49,030 --> 00:24:52,245 ako volanie funkcie, ktoré sme vykonali v C. Názov funkcie je tu 509 00:24:52,245 --> 00:24:52,580 trochu divný. 510 00:24:52,580 --> 00:24:55,640 Je to znak dolára. 511 00:24:55,640 --> 00:24:57,010 Je to len názov funkcie. 512 00:24:57,010 --> 00:24:58,810 Na tom nie je nič zvláštne. 513 00:24:58,810 --> 00:25:00,450 >> Máme otvorené zátvorky. 514 00:25:00,450 --> 00:25:03,880 Potom máme jeden argument, ktorý v tomto prípade sa stane, že je reťazec, 515 00:25:03,880 --> 00:25:05,680 , Čo je pre neho volič. 516 00:25:05,680 --> 00:25:08,130 A potom, máme uzavretá zátvorka. 517 00:25:08,130 --> 00:25:09,960 To je to. 518 00:25:09,960 --> 00:25:11,500 >> Nie je to tak diametrálne odlišná. 519 00:25:11,500 --> 00:25:12,900 Aj keď to vyzerá veľmi divne. 520 00:25:12,900 --> 00:25:17,220 A to môže byť trochu, lepenie bod pre mnoho ľudí. 521 00:25:17,220 --> 00:25:21,460 >> MIKE RIZZO: Takže podobne, ak by sme chceli vyberte prvok, ktorý má ID, 522 00:25:21,460 --> 00:25:23,470 Teraz chceme vybrať podľa ID namiesto triedy. 523 00:25:23,470 --> 00:25:28,080 Bolo by to niečo podobné, kde sme proste ostrý znak pre ID. 524 00:25:28,080 --> 00:25:33,576 Takže sme vyberiete tu všetko prvky, ktoré majú ID bar. 525 00:25:33,576 --> 00:25:35,400 >> TOMAS REIMERS: A to rozširuje. 526 00:25:35,400 --> 00:25:36,450 To CSS rozširuje. 527 00:25:36,450 --> 00:25:42,260 Rovnako ako v CSS, môžete si vybrať všetko odkazy, ktoré majú triedy foo. 528 00:25:42,260 --> 00:25:43,420 Tu je to to isté. 529 00:25:43,420 --> 00:25:52,750 >> Dalo by sa urobiť a.foo, ktoré by výber všetky odkazy s triednym foo. 530 00:25:52,750 --> 00:25:58,860 Dalo by sa urobiť ostrú tyč, ktorá by vyberte odkaz s ID baru a tak, 531 00:25:58,860 --> 00:25:59,770 ďalej a tak ďalej. 532 00:25:59,770 --> 00:26:02,120 Každý volič CSS je platný jQuery voliča. 533 00:26:02,120 --> 00:26:03,370 >> MIKE RIZZO: Jo. 534 00:26:03,370 --> 00:26:07,996 535 00:26:07,996 --> 00:26:11,460 OK, takže teraz poďme do trochu manipulácie, ktoré môžeme urobiť s 536 00:26:11,460 --> 00:26:12,870 naše jQuery. 537 00:26:12,870 --> 00:26:19,280 Takže jQuery má zvláštny typ notácie, kde sme práve používate 538 00:26:19,280 --> 00:26:20,170 bodka na konci. 539 00:26:20,170 --> 00:26:23,340 A vy môžete myslieť na to ako na C, ako sme mali rôzne structs. 540 00:26:23,340 --> 00:26:27,110 A ísť do tých štruktúr, by ste použite bodku, aby sa do nich. 541 00:26:27,110 --> 00:26:28,480 >> To je druh, niečo podobné. 542 00:26:28,480 --> 00:26:33,570 Až teraz máme funkcie v rámci tejto volič, ktorý môžeme nazvať na neho. 543 00:26:33,570 --> 00:26:38,640 Takže tu je prvý príklad môžete vidieť, je selektor CSS. 544 00:26:38,640 --> 00:26:45,290 A v podstate, čo to robí, je to sa vzťahuje na prvý prvok CSS na to 545 00:26:45,290 --> 00:26:46,230 vec, ktorú ste vybrali - 546 00:26:46,230 --> 00:26:47,720 Tento prvok, ktorý ste vybrali - 547 00:26:47,720 --> 00:26:49,290 s hodnotou tohto. 548 00:26:49,290 --> 00:26:55,390 >> TOMAS REIMERS: Tak jednoduchý preklad že by bolo, keby jQuery, v podstate, 549 00:26:55,390 --> 00:26:57,790 len sa foo. 550 00:26:57,790 --> 00:27:05,480 A potom v CSS povedal, farba červená a zavrieť. 551 00:27:05,480 --> 00:27:06,670 Je to rovnaký nápad. 552 00:27:06,670 --> 00:27:08,800 Čo to robí, je to zvolené všetky foo prvky. 553 00:27:08,800 --> 00:27:10,170 A potom sa to aplikovať. 554 00:27:10,170 --> 00:27:15,884 Niečo, farba nehnuteľnosti sa rovná červené. 555 00:27:15,884 --> 00:27:21,070 >> MIKE RIZZO: Podobne môžeme tiež zmeniť skutočný obsah toho, čo je 556 00:27:21,070 --> 00:27:24,870 ukazuje na HTML stránky, ktorá Je naozaj skvelé, pretože to znamená, že vaše 557 00:27:24,870 --> 00:27:28,095 Webové stránky môžu byť teraz úplne dynamický a nemusí byť statická 558 00:27:28,095 --> 00:27:31,660 ktoré tlačíte s použitím PHP na samom začiatku 559 00:27:31,660 --> 00:27:33,320 Stránka sa načítava. 560 00:27:33,320 --> 00:27:36,810 Takže tu, keď sme chceli zmeniť aktuálnej HTML stránky, by teraz 561 00:27:36,810 --> 00:27:43,550 volanie funkcie HTML, ktorý potom už len vložky, čo sme sa určujú na 562 00:27:43,550 --> 00:27:45,390 že prvok, ktorý sme si vybrali. 563 00:27:45,390 --> 00:27:49,810 Takže tu máme výber prvku s class foo a potom povedal, že je to HTML 564 00:27:49,810 --> 00:27:52,200 teraz je to hello world. 565 00:27:52,200 --> 00:27:55,600 >> TOMAS REIMERS: A keď sa nad tým zamyslíte aké sú užitočné aplikácie 566 00:27:55,600 --> 00:28:00,800 tohle, tohle CSS jedno, prvá vec, ktorá môžete začať premýšľať o tom, 567 00:28:00,800 --> 00:28:03,070 z hľadiska dokonca drop-down menu. 568 00:28:03,070 --> 00:28:08,350 Dalo by sa začať robiť veci, ako, keď užívateľ sa vznáša nad hornej časti 569 00:28:08,350 --> 00:28:11,970 z rozbaľovacieho, chcete, aby sa spodnú časť viditeľná. 570 00:28:11,970 --> 00:28:12,540 Je to tak? 571 00:28:12,540 --> 00:28:15,610 >> Takže v CSS, máme vlastnosti urobiť niečo viditeľného. 572 00:28:15,610 --> 00:28:19,330 Veci ako displej hrubého čreva nikto by bolo neviditeľné. 573 00:28:19,330 --> 00:28:21,190 Zobraziť blok by sa zobrazil. 574 00:28:21,190 --> 00:28:25,860 Alebo dokonca, ak chcete ísť jednoduchšie, vás mať veci, ako je viditeľnosti sa rovná 575 00:28:25,860 --> 00:28:27,520 viditeľné, a viditeľnosť sa rovná skryté. 576 00:28:27,520 --> 00:28:30,330 577 00:28:30,330 --> 00:28:34,780 >> A môžete začať vykonávať veci ako rozbaľovacie menu vpravo 578 00:28:34,780 --> 00:28:38,410 potom, čo sa dostanete cez myšlienky o tom, ako môžete zistiť, keď sa to otvorí, 579 00:28:38,410 --> 00:28:39,850 ktoré dostaneme cez veľmi stručne. 580 00:28:39,850 --> 00:28:42,160 Ale môžeme začať vidieť aplikácie to. 581 00:28:42,160 --> 00:28:45,540 V podobnom zmysle, ak ste mali skúsiť a realizovať, povedzme, chatu 582 00:28:45,540 --> 00:28:48,620 motora a chcete, aby sa trochu bublinu prísť kedykoľvek ste 583 00:28:48,620 --> 00:28:52,880 dostal novú správu, akonáhle sa dostanete nová správa, môžete si trochu 584 00:28:52,880 --> 00:28:55,890 bublinu prísť zmenou HTML stránky, nie? 585 00:28:55,890 --> 00:29:00,540 Pridaním že ďalšie bublinu s extra texte tam. 586 00:29:00,540 --> 00:29:01,140 Jo? 587 00:29:01,140 --> 00:29:07,750 >> DIVÁKOV: Takže by ste vložiť to do HTML kód niečo ako 588 00:29:07,750 --> 00:29:10,534 [Nepočuteľný]? 589 00:29:10,534 --> 00:29:12,940 >> MIKE RIZZO: Správne. 590 00:29:12,940 --> 00:29:16,190 Jo, dostaneme sa k tomu v trochu. 591 00:29:16,190 --> 00:29:18,810 Jo, je to podobné trochu PHP. 592 00:29:18,810 --> 00:29:21,240 Nie tak celkom podobné. 593 00:29:21,240 --> 00:29:24,730 >> Dobrý rozdiel, aby sa to, čo to je v skutočnosti upravujete, keď sme editovať 594 00:29:24,730 --> 00:29:28,480 stránky, pretože to nebude editáciu skutočný súbor, ktorý je 595 00:29:28,480 --> 00:29:31,380 uchovávané na serveri, pretože svet by nemali mať oprávnenie 596 00:29:31,380 --> 00:29:32,610 editovať súbory. 597 00:29:32,610 --> 00:29:36,080 To je práve upravujete, čo je na stránke a to, čo je zobrazené v 598 00:29:36,080 --> 00:29:36,950 prehliadač. 599 00:29:36,950 --> 00:29:40,340 Takže ak ste sa po načítaní stránky, povedať, mazanie niečo ako my 600 00:29:40,340 --> 00:29:44,730 vidieť, čo môžeme urobiť s remove volanie, že vec by sa potom znovu objaví. 601 00:29:44,730 --> 00:29:48,590 >> TOMAS REIMERS: Takže jediný spôsob, ako premýšľať o tom, to je, keď som počítač a 602 00:29:48,590 --> 00:29:50,170 Mike je, tak nejako, servera. 603 00:29:50,170 --> 00:29:53,850 Čo sa stane, je, že budem opýtajte sa Mike, hej, môžem mať kópiu 604 00:29:53,850 --> 00:29:54,630 táto webová stránka? 605 00:29:54,630 --> 00:29:56,190 A on mi dá jeho kópiu. 606 00:29:56,190 --> 00:29:57,430 >> Nie, to nie je originálna vec. 607 00:29:57,430 --> 00:29:58,620 Je to len kópia. 608 00:29:58,620 --> 00:30:00,450 A potom by to bolo, oh, tam je JavaScript tu. 609 00:30:00,450 --> 00:30:02,450 Je jasné, že by som mal upraviť Stránka sa takto. 610 00:30:02,450 --> 00:30:04,250 A ja som v úpravách kópiu. 611 00:30:04,250 --> 00:30:05,920 >> Ale to nie je znemožnenie aktuálnu kópiu. 612 00:30:05,920 --> 00:30:08,480 A keď som sa ho znova spýtať aktualizovať stránku, - 613 00:30:08,480 --> 00:30:10,060 Ahoj, môžem mať čistú kópiu - 614 00:30:10,060 --> 00:30:11,440 že sa chystá dať mi ďalšie čisté kópie. 615 00:30:11,440 --> 00:30:14,240 A potom, ja urobím to isté ako, oh, to JS tú, ktorá hovorí, 616 00:30:14,240 --> 00:30:14,866 upraviť to. 617 00:30:14,866 --> 00:30:17,460 A budem to robiť. 618 00:30:17,460 --> 00:30:20,930 >> MIKE RIZZO: Tak to naozaj super vec ktoré môžete robiť s jQuery je 619 00:30:20,930 --> 00:30:24,350 v skutočnosti pridať rôzne typy animácií na vaše stránky. 620 00:30:24,350 --> 00:30:27,440 Ja neviem, či ste niekedy videli, kde snažíte sa vyplniť formulár 621 00:30:27,440 --> 00:30:31,250 on-line a nechcete vyplniť veci správne. 622 00:30:31,250 --> 00:30:33,440 Tak trochu to kĺže dole hore a hovorí, že 623 00:30:33,440 --> 00:30:34,820 Neurobil to správne. 624 00:30:34,820 --> 00:30:36,260 Skúste to prosím znova. 625 00:30:36,260 --> 00:30:37,890 A potom, že by aj len kĺzať hore. 626 00:30:37,890 --> 00:30:40,710 >> Ukázalo sa, že jQuery má vstavanú funkcií že aby to všetko 627 00:30:40,710 --> 00:30:44,180 animácia naozaj jednoduché. 628 00:30:44,180 --> 00:30:46,750 Takže tam je prvý fade out funkcie, ktoré 629 00:30:46,750 --> 00:30:47,710 môžete volať na niečo. 630 00:30:47,710 --> 00:30:55,650 A to je spôsob, ako zmeniť CSS na tento prvok v animovanom spôsobom. 631 00:30:55,650 --> 00:30:58,480 Tak to trvá bez ohľadu na prvok hovoríte, že mizne na. 632 00:30:58,480 --> 00:31:03,990 A potom sa pomaly mení, že je to krytie kým to ide úplne transparentné. 633 00:31:03,990 --> 00:31:07,330 >> TOMAS REIMERS: ďalšie populárne je skĺznuť dole, čo umožní 634 00:31:07,330 --> 00:31:08,800 niečo, čo sa objaví posunutím dolu. 635 00:31:08,800 --> 00:31:12,840 Takže v prípade, že v ponuke pokles dole, znovu, keď sme sa dozvedeli, ako rozpoznať 636 00:31:12,840 --> 00:31:15,310 keď to bolo vznášal nad, môžete len povedať toto dno 637 00:31:15,310 --> 00:31:16,910 časť posuňte sa dolu. 638 00:31:16,910 --> 00:31:19,270 A potom, zdá sa, posunutím nadol. 639 00:31:19,270 --> 00:31:22,042 640 00:31:22,042 --> 00:31:26,590 >> MIKE RIZZO: A potom, ak máte nejaký druh animácie na pamäti, že 641 00:31:26,590 --> 00:31:29,080 jQuery nemusia nutne poskytovať. 642 00:31:29,080 --> 00:31:32,690 Napríklad, povedzme, jQuery sa poskytujú vám so šmýkačkou 643 00:31:32,690 --> 00:31:33,750 nadol a posuňte nahor. 644 00:31:33,750 --> 00:31:36,740 No, povedzme, že ste chcel kĺzať niečo z ľavej alebo z 645 00:31:36,740 --> 00:31:39,880 správny druh ako CS50 Hlavná strana robí vždy, keď 646 00:31:39,880 --> 00:31:42,080 idete do nového panelu. 647 00:31:42,080 --> 00:31:45,030 Tie by sa potom pravdepodobne implementovať sami pomocou 648 00:31:45,030 --> 00:31:49,310 animovať funkcie v jQuery. 649 00:31:49,310 --> 00:31:51,350 >> Takže podobne, stačí animovať. 650 00:31:51,350 --> 00:31:55,850 A potom, v ňom trvá Slovník rôznych hodnôt 651 00:31:55,850 --> 00:31:57,340 že ste mal prejsť. 652 00:31:57,340 --> 00:32:06,960 Takže tu, ak by sme chceli animovať foo element tak, že jeho šírka buď 653 00:32:06,960 --> 00:32:10,880 rozpína ​​alebo naopak zmršťuje až 80 bodov, v závislosti na tom, čo v súčasnej dobe je. 654 00:32:10,880 --> 00:32:14,100 Radi by sme len prejsť, že ako Argument v ňom. 655 00:32:14,100 --> 00:32:18,060 >> Animácie tiež nejaké ďalšie argumenty že by ste mohli prejsť, napríklad, 656 00:32:18,060 --> 00:32:21,150 rýchlosť animácie ktoré chcete dať. 657 00:32:21,150 --> 00:32:26,220 A k tomu by som len povedať, rýchlo Google jQuery animácie. 658 00:32:26,220 --> 00:32:31,710 A potom, čím sa na túto stránku, môžete vidieť, že má veľa rôzne 659 00:32:31,710 --> 00:32:33,560 vlastnosti, ktoré u nás môžete absolvovať ju. 660 00:32:33,560 --> 00:32:35,990 >> A ja povzbudiť vás - vždy, keď prišiel cez niečo, čo nechcete 661 00:32:35,990 --> 00:32:40,390 vedieť, alebo len chcete dozvedieť viac o najmä spôsob, ktorý môžete volať 662 00:32:40,390 --> 00:32:41,270 na niečo - 663 00:32:41,270 --> 00:32:44,440 len Google to. jQuery je veľmi dobre zdokumentované. 664 00:32:44,440 --> 00:32:49,140 A často dokonca existuje veľa príklady, ktoré poskytujú pre vás. 665 00:32:49,140 --> 00:32:52,470 Ak sa posunúť dole - 666 00:32:52,470 --> 00:32:53,720 smerom dole - 667 00:32:53,720 --> 00:32:57,660 668 00:32:57,660 --> 00:32:59,190 ktoré môžeme použiť, rovnako. 669 00:32:59,190 --> 00:33:02,480 >> Opäť platí, že ak developer vlastne ide cez ťažkosti písanie 670 00:33:02,480 --> 00:33:05,810 knižnica, oni zvyčajne chcú niekto ju používať. 671 00:33:05,810 --> 00:33:09,400 Takže spolu sa chystá byť dokumentácie. 672 00:33:09,400 --> 00:33:12,270 A že dokumentácia môže byť zvyčajne nájdete na stránke projektu, ktorá je 673 00:33:12,270 --> 00:33:14,970 Preto sme vám dali, že pôvodné miesto vo začiatok, ktorý vás spája so 674 00:33:14,970 --> 00:33:18,080 Stránky projektu, takže môžete vidieť, že v dokumentácii. 675 00:33:18,080 --> 00:33:22,670 >> Typicky, stránka projektu v prípade, z [nepočuteľné], to vám povedal o 676 00:33:22,670 --> 00:33:23,940 názvy tried. 677 00:33:23,940 --> 00:33:27,250 V prípade JavaScript, dáva si názov funkcie. 678 00:33:27,250 --> 00:33:35,310 Mimochodom, keď sme prejdite až na vrchol, rýchle bočné poznámka o funkciách je 679 00:33:35,310 --> 00:33:39,080 keď vidíte, funkcie implementovanej takto sa ťažko 680 00:33:39,080 --> 00:33:43,800 držiaky v stredu, to znamená, že že majetok je voliteľná. 681 00:33:43,800 --> 00:33:44,750 Len heads up. 682 00:33:44,750 --> 00:33:47,350 Videl som veľa otázok o tom. 683 00:33:47,350 --> 00:33:50,370 >> Takže tu môžeme vidieť, že živý sa vlastnosti 684 00:33:50,370 --> 00:33:51,800 ako nevyhnutné argumentáciu. 685 00:33:51,800 --> 00:33:54,870 A všetko ostatné je voliteľný. 686 00:33:54,870 --> 00:33:56,136 Bočné Poznámka - 687 00:33:56,136 --> 00:33:58,090 môžete myslieť na to, triedenie z, ako manuálové stránky. 688 00:33:58,090 --> 00:34:04,275 Manuálové stránky sú dokumentácie pre C a pre mnoho ďalších vecí, rovnako. 689 00:34:04,275 --> 00:34:11,020 >> MIKE RIZZO: Tak sme sa dozvedeli, ako sa zmeniť iné CSS na stránke, 690 00:34:11,020 --> 00:34:14,040 animovať ho a vyberte pridať HTML. 691 00:34:14,040 --> 00:34:16,889 Ale jeden z naozaj najsilnejší veci, o JavaScriptu 692 00:34:16,889 --> 00:34:18,270 a najmä jQuery - 693 00:34:18,270 --> 00:34:22,570 to, čo môžete urobiť, je reagovať na rôzne prvky, ktoré sa dejú. 694 00:34:22,570 --> 00:34:25,380 Napríklad, máme tu obslužnú rutinu udalosti. 695 00:34:25,380 --> 00:34:28,210 A to práve znamená, že vždy, keď to udalosť stane, budeme s ňou zaobchádzať v 696 00:34:28,210 --> 00:34:29,280 určitým spôsobom. 697 00:34:29,280 --> 00:34:35,159 >> Tak tu je všeobecný jQuery udalosti Psovod je bodka na. 698 00:34:35,159 --> 00:34:42,949 A potom, prvá vec, ktorú ste zadali Je to udalosť, že by 699 00:34:42,949 --> 00:34:43,810 bude počúvať. 700 00:34:43,810 --> 00:34:45,610 Tak tu je to cvaknutie, ktoré sme čakali. 701 00:34:45,610 --> 00:34:49,250 >> TOMAS REIMERS: Prípadne, máte na visenie, ktorý je veľmi populárny. 702 00:34:49,250 --> 00:34:52,000 Takže späť k môjmu rozbaľovacej ponuke nápad. 703 00:34:52,000 --> 00:34:54,239 Budete mať horný jeden na visu. 704 00:34:54,239 --> 00:34:56,096 A potom by ste mohol zmeniť. 705 00:34:56,096 --> 00:34:56,830 >> MIKE RIZZO: Správne. 706 00:34:56,830 --> 00:35:01,680 A potom, keď sa to stane, je to len vykonáva túto funkciu, že dáme 707 00:35:01,680 --> 00:35:05,080 ako argument, a že upozorní ahoj a ahoj. 708 00:35:05,080 --> 00:35:08,900 >> TOMAS REIMERS: Takže v prípade JavaScript, toto je miesto, musíme 709 00:35:08,900 --> 00:35:12,970 odstrániť sami od C. Môžeme skutočne sa funkcie ako argumenty. 710 00:35:12,970 --> 00:35:15,940 A existuje veľa naozaj komplexné spôsoby, ako to urobiť. 711 00:35:15,940 --> 00:35:17,940 Budeme podporovať jednu stranu, ktoré je môžete definovať 712 00:35:17,940 --> 00:35:19,270 pracovať tam. 713 00:35:19,270 --> 00:35:22,540 >> Takže keď sa pýtate na funkciu ako parameter, ste v podstate len 714 00:35:22,540 --> 00:35:24,500 bude definovať funkcie na mieste. 715 00:35:24,500 --> 00:35:27,090 A tak, ako definovať funkciu v JavaScriptu je vám 716 00:35:27,090 --> 00:35:28,820 doslova hovoria funkcie. 717 00:35:28,820 --> 00:35:30,130 Potom, zvyčajne, názov funkcie. 718 00:35:30,130 --> 00:35:32,510 Ale my nikdy odkazovať táto funkcia znovu. 719 00:35:32,510 --> 00:35:34,040 Tak sme ho nechať bezmenný. 720 00:35:34,040 --> 00:35:40,440 >> Potom zátvorky, potom kučeravý traky, a potom kód v to. 721 00:35:40,440 --> 00:35:42,540 Takže chápeme to môže byť trochu mätúce. 722 00:35:42,540 --> 00:35:45,180 Tak sme vám všeobecný tvar čo rutina udalosť vyzerá 723 00:35:45,180 --> 00:35:47,790 nižšie, ktorá je na udalosti. 724 00:35:47,790 --> 00:35:50,598 A potom, váš kód vo vnútri, že. 725 00:35:50,598 --> 00:35:52,478 >> MIKE RIZZO: Existujú nejaké otázky o tom? 726 00:35:52,478 --> 00:35:54,818 To môže byť trochu mätúce Prvýkrát ju vidieť. 727 00:35:54,818 --> 00:35:57,550 >> TOMAS REIMERS: Vy naozaj chcete otvoriť súbor a ukázať im niektoré 728 00:35:57,550 --> 00:35:58,155 jQuery práve teraz? 729 00:35:58,155 --> 00:35:59,853 >> MIKE RIZZO: Jo, ideme na to. 730 00:35:59,853 --> 00:36:00,256 OK. 731 00:36:00,256 --> 00:36:02,490 >> TOMAS REIMERS: Tak teraz sme v prístroji. 732 00:36:02,490 --> 00:36:07,730 A to, čo sme urobili je, že sme si vziať sloboda vytvárať ako je index.html 733 00:36:07,730 --> 00:36:10,100 súbor, ktorý odkazuje na súbor JavaScript. 734 00:36:10,100 --> 00:36:12,880 A môžeme otvoriť - 735 00:36:12,880 --> 00:36:15,170 jo. 736 00:36:15,170 --> 00:36:16,630 No, to robí dve veci. 737 00:36:16,630 --> 00:36:18,350 >> Prvým z nich je, že odkazy na súbor JavaScript. 738 00:36:18,350 --> 00:36:21,250 A uvidíme, že až tu. 739 00:36:21,250 --> 00:36:25,340 Vidíme, že v čele HTML dokument, a to najmä. 740 00:36:25,340 --> 00:36:28,260 Takže uvidíte tam, že sme sa v podstate povedať, SRC, 741 00:36:28,260 --> 00:36:29,590 čo je skratka pre zdroj. 742 00:36:29,590 --> 00:36:30,630 A to je URL. 743 00:36:30,630 --> 00:36:32,700 >> Tak tu si môžete povedať, že sme si vrátane jQuery. 744 00:36:32,700 --> 00:36:34,290 A my sme tiež skripty. 745 00:36:34,290 --> 00:36:40,630 Iný spôsob, ako zahrnúť JavaScript je , Ktorý môže obsahovať vložené skript 746 00:36:40,630 --> 00:36:44,600 tag, ako sme sa v spodnej časti, kde sa hovorí, že typ skriptu je textový JavaScript. 747 00:36:44,600 --> 00:36:46,960 >> Takže hovoríme, počúvaj, my sme o zaradiť skript. 748 00:36:46,960 --> 00:36:51,890 A typ tohto skriptu je JavaScript, čo je typ textu. 749 00:36:51,890 --> 00:36:52,550 Veľmi jednoduché. 750 00:36:52,550 --> 00:36:56,490 >> MIKE RIZZO: Takže to, druh, k lopte sa Vaša otázka o tom, ako sú 751 00:36:56,490 --> 00:37:02,340 JavaScript v našich súboroch, pretože keď sme sa sa PHP, robíme niečo také. 752 00:37:02,340 --> 00:37:07,570 A potom, máme svoje PHP funkcie - povedzme, že zásoby robiť 753 00:37:07,570 --> 00:37:09,150 čo s tým - 754 00:37:09,150 --> 00:37:10,490 ide tam. 755 00:37:10,490 --> 00:37:13,860 Avšak, teraz máme tagy skriptu že sme sa dať, ktoré sú v skutočnosti 756 00:37:13,860 --> 00:37:19,470 súčasťou HTML sám, pretože to nie je predstiera, že súbor HTML, ako to 757 00:37:19,470 --> 00:37:25,070 je v PHP, pretože ak ste skutočne ísť a pozrieť sa na zdroj stránky, 758 00:37:25,070 --> 00:37:28,430 uvidíte tieto tagy skriptu tam s JavaScript spojené s 759 00:37:28,430 --> 00:37:29,800 im v tom. 760 00:37:29,800 --> 00:37:31,760 >> Takže, ak by sme chceli napísať nejaký JavaScript - 761 00:37:31,760 --> 00:37:37,110 povedzme, že by sme chceli zmeniť telo pretože teraz nemám 762 00:37:37,110 --> 00:37:40,020 všetky ostatné značky, ktoré som si naozaj upravovať vedľa tela. 763 00:37:40,020 --> 00:37:42,450 Povedzme, že som chcel, aby zmeniť CSS z toho. 764 00:37:42,450 --> 00:37:46,190 Takže budeme pokračovať a zmena farba to na červenú. 765 00:37:46,190 --> 00:37:47,380 >> Tak som súbor uložte. 766 00:37:47,380 --> 00:37:52,700 Vráťme sa na našich webových stránkach, obnoviť, a to automaticky robí 767 00:37:52,700 --> 00:37:55,920 , Pretože to nevyzeralo, ako by čakal, vôbec, pretože sme neboli počúvanie 768 00:37:55,920 --> 00:37:59,450 na akciu alebo niečo podobné. 769 00:37:59,450 --> 00:38:02,800 >> TOMAS REIMERS: Takže keď sa vrátime k tomu súbor najmä - HTML 770 00:38:02,800 --> 00:38:04,710 súbor - čo budete vidieť ich máme - 771 00:38:04,710 --> 00:38:06,810 si uvedomiť, že toto je načítaný, druh, chronologicky. 772 00:38:06,810 --> 00:38:09,910 Takže máme prvú hlavu. načíta tie dva súbory. 773 00:38:09,910 --> 00:38:10,800 Potom ideme k telu. 774 00:38:10,800 --> 00:38:11,640 A vidíme, Hello World. 775 00:38:11,640 --> 00:38:13,030 Tak sme činí Hello World. 776 00:38:13,030 --> 00:38:15,240 >> A potom posledná vec, ktorú máme je máme tag script. 777 00:38:15,240 --> 00:38:20,880 Tak to beží tag script, pretože je to nehovorí to nič čakať. 778 00:38:20,880 --> 00:38:24,700 A to je to najzákladnejšie spôsob, ako spustiť JavaScript. 779 00:38:24,700 --> 00:38:29,200 >> Vďaka, že povedal, môžete si dať skript označiť v záhlaví len 780 00:38:29,200 --> 00:38:31,240 ukázať tento bod? 781 00:38:31,240 --> 00:38:34,450 782 00:38:34,450 --> 00:38:35,700 A spustiť to. 783 00:38:35,700 --> 00:38:38,880 784 00:38:38,880 --> 00:38:41,070 Budeme všimnúť, že nezmenil farbu. 785 00:38:41,070 --> 00:38:44,210 A to je jeden z problémov JavaScript je, že veci sú načítané 786 00:38:44,210 --> 00:38:45,930 v chronologickom poradí. 787 00:38:45,930 --> 00:38:49,750 >> A tak v čase, keď tento kód bežal, sme si vybrali - 788 00:38:49,750 --> 00:38:52,530 späť - 789 00:38:52,530 --> 00:38:53,670 tag telo. 790 00:38:53,670 --> 00:38:57,560 Tag telo ešte neexistuje, pretože JavaScript je v súlade s HTML. 791 00:38:57,560 --> 00:39:01,790 Takže prehliadač je ako vyberte tele. 792 00:39:01,790 --> 00:39:02,760 Je tu ešte žiadna taká vec. 793 00:39:02,760 --> 00:39:03,600 Takže môžeme ignorovať. 794 00:39:03,600 --> 00:39:05,330 A budeme pokračovať. 795 00:39:05,330 --> 00:39:07,200 >> A potom sme sa definovať tag tela. 796 00:39:07,200 --> 00:39:09,670 Ale nikdy sa aktualizuje. 797 00:39:09,670 --> 00:39:12,560 Takže, keď ste vykonávania skriptu tagy, uistite sa, že miesto 798 00:39:12,560 --> 00:39:15,502 po tagu body. 799 00:39:15,502 --> 00:39:16,820 Ďalšiu snímku. 800 00:39:16,820 --> 00:39:17,830 >> MIKE RIZZO: OK. 801 00:39:17,830 --> 00:39:19,330 Tak sme niečo zmenili. 802 00:39:19,330 --> 00:39:21,910 Ale to nevyzeralo, ako by reagoval na nám vôbec, pretože je to len trochu 803 00:39:21,910 --> 00:39:24,150 to urobil, akonáhle načítanie stránky. 804 00:39:24,150 --> 00:39:27,700 Takže teraz, namiesto toho robil to, prečo Čo keby sme pridať obslužnú rutinu udalosti. 805 00:39:27,700 --> 00:39:31,020 >> Takže poďme niečo urobiť k telu znova. 806 00:39:31,020 --> 00:39:33,490 A povedzme, že sme to na - 807 00:39:33,490 --> 00:39:34,500 kliknite na tlačidlo. 808 00:39:34,500 --> 00:39:35,750 Ak budeme pridať funkciu. 809 00:39:35,750 --> 00:39:38,270 810 00:39:38,270 --> 00:39:39,690 >> Tomáš Reimers: Zmeňme je to farba na červenú znova. 811 00:39:39,690 --> 00:39:40,000 Prečo nie? 812 00:39:40,000 --> 00:39:41,680 >> MIKE RIZZO: Jo, poďme zmeniť jeho "farbu na červenú znova. 813 00:39:41,680 --> 00:39:46,310 814 00:39:46,310 --> 00:39:46,900 Dobrá. 815 00:39:46,900 --> 00:39:48,480 Takže poďme znova načítate stránku. 816 00:39:48,480 --> 00:39:49,530 OK, uvidíme - 817 00:39:49,530 --> 00:39:52,290 ako sa očakávalo, to nie je zase ešte červená. 818 00:39:52,290 --> 00:39:53,610 Ale potom môžeme ísť do toho a kliknite na neho. 819 00:39:53,610 --> 00:39:54,270 >> TOMAS REIMERS: A to sčervená. 820 00:39:54,270 --> 00:39:56,090 >> MIKE RIZZO: A to robí sčervená, ako sa očakávalo. 821 00:39:56,090 --> 00:39:59,010 >> TOMAS REIMERS: A vidíme, ako môžeme začať budovať veľmi jednoduchý 822 00:39:59,010 --> 00:40:00,170 interakcie. 823 00:40:00,170 --> 00:40:03,850 Ďalšie veci, ktoré sme mohli chcieť urobiť, je, ak nechceme, aby sa telo 824 00:40:03,850 --> 00:40:07,230 farba červená, poďme robiť HTML pozadia farba červená. 825 00:40:07,230 --> 00:40:08,480 Rovnako tak je to rovnaké CSS. 826 00:40:08,480 --> 00:40:19,960 827 00:40:19,960 --> 00:40:23,320 >> A keď sme sa to zmeniť, môžeme vidieť Veľmi dramatický efekt zmeny 828 00:40:23,320 --> 00:40:25,510 celá stránka. 829 00:40:25,510 --> 00:40:29,100 Takže znova, ak ste sa vykonáva veci, môžete mať jednu zložku 830 00:40:29,100 --> 00:40:30,150 ktorý je určený na klikol na. 831 00:40:30,150 --> 00:40:32,710 Povedzme, že tlačidlo Exit a celý ďalšie komponenty, 832 00:40:32,710 --> 00:40:33,830 ktorý je určený k reakcii. 833 00:40:33,830 --> 00:40:35,755 Takže by ste odstrániť okno keď sa to stane. 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 Len ako príklad - 837 00:40:42,200 --> 00:40:44,400 ste nedostal vidieť skôr - 838 00:40:44,400 --> 00:40:47,500 Ukážem vám, ako to vyzerá Páči sa mi, keď sme sa schovať niečo. 839 00:40:47,500 --> 00:40:52,220 Takže budem pokračovať a to posunutím nahor. 840 00:40:52,220 --> 00:40:54,440 >> TOMAS REIMERS: Chcete zabaliť, že v Typ odsek skôr ako my, že? 841 00:40:54,440 --> 00:40:55,132 >> MIKE RIZZO: OK. 842 00:40:55,132 --> 00:40:59,135 Jo, prečo nie my, že len preto, môžeme vybrať to trochu viac. 843 00:40:59,135 --> 00:41:00,490 >> TOMAS Reimers: A poďme dať triedu. 844 00:41:00,490 --> 00:41:01,740 >> MIKE RIZZO: Jo. 845 00:41:01,740 --> 00:41:06,575 846 00:41:06,575 --> 00:41:09,920 OK, tak sa poďme pozrieť. 847 00:41:09,920 --> 00:41:14,820 Namiesto výberu vlastné telo teraz, budem len vybrať všetko, čo sa 848 00:41:14,820 --> 00:41:18,780 trieda ahoj, ktorý sme tu len jednu vec. 849 00:41:18,780 --> 00:41:20,900 Takže by sme nemali mať na obávať, že. 850 00:41:20,900 --> 00:41:23,080 >> Takže budem aktualizovať ho. 851 00:41:23,080 --> 00:41:24,230 Pôjdem do toho a kliknite na neho. 852 00:41:24,230 --> 00:41:27,890 A to, trochu, urobil divný Slide sa vec, ktorá nevyzerala, že 853 00:41:27,890 --> 00:41:29,580 atraktívny. 854 00:41:29,580 --> 00:41:31,060 Všeobecne platí, že vyzerajú celkom pekné. 855 00:41:31,060 --> 00:41:32,720 Myslím, že tento - pre niektoré dôvod - nie. 856 00:41:32,720 --> 00:41:36,640 Budem proste robiť fade out, takže sa môžete pozrieť na to taky. 857 00:41:36,640 --> 00:41:38,100 Oveľa krajší. 858 00:41:38,100 --> 00:41:41,150 >> A potom, keď som otvoriť JavaScript konzola znova a chceme vidieť, čo 859 00:41:41,150 --> 00:41:43,900 to vyzerá, ako keď sme slabnúť ju dovnútra 860 00:41:43,900 --> 00:41:46,920 Teraz, len hovorím slabnúť v tom. 861 00:41:46,920 --> 00:41:48,830 A to vybledne späť dovnútra 862 00:41:48,830 --> 00:41:56,150 >> Podobne by sme mohli vlastne tiež odovzdať argument vyblednúť alebo fade out, 863 00:41:56,150 --> 00:41:57,640 ktorá je, druh, rýchlosť to. 864 00:41:57,640 --> 00:42:02,220 Tak poďme do toho a že chceme to ísť pomaly mizne dovnútra 865 00:42:02,220 --> 00:42:04,250 Takže myslím, že to ešte zdalo, celkom rýchlo. 866 00:42:04,250 --> 00:42:06,180 Ale to bolo pomalšie ako predtým. 867 00:42:06,180 --> 00:42:10,340 >> TOMAS REIMERS: A ak chcete nájsť Viac informácií o týchto veciach, opäť, 868 00:42:10,340 --> 00:42:13,410 stačí ísť do dokumentácie jQuery, ktorý sme vám dal, a prečítajte si 869 00:42:13,410 --> 00:42:13,735 cez to. 870 00:42:13,735 --> 00:42:15,790 Oni dokumentovať ich funkcie neuveriteľne dobre. 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 Takže si myslím, vráťme sa k tomu. 874 00:42:21,560 --> 00:42:23,490 A môžeme hovoriť o našej poslednej stránke. 875 00:42:23,490 --> 00:42:24,690 No, môžeme skončiť s Bootstrap. 876 00:42:24,690 --> 00:42:27,140 A potom si otvorte ju na niektoré otázky. 877 00:42:27,140 --> 00:42:30,180 A ak vy máte nejaké nápady, ktoré by ste chceli, aby sa pokúsili hodiť hore a vidieť 878 00:42:30,180 --> 00:42:34,150 v prípade, že ich môžeme realizovať s JavaScript rýchlo. 879 00:42:34,150 --> 00:42:37,890 >> Takže naozaj rýchlo o Bootstrap, ktorá bola automaticky zahrnuté do 880 00:42:37,890 --> 00:42:41,700 Vaše posledný problém nastaviť v priečinku CSS a v skutočnosti spojené s vo vašej 881 00:42:41,700 --> 00:42:43,190 header.php. 882 00:42:43,190 --> 00:42:46,740 Takže by ste mohli ste pridali tried, ktoré sú definované v rámci Bootstrap k nemu. 883 00:42:46,740 --> 00:42:50,490 A to by sa automaticky štýlu tie veci podľa toho. 884 00:42:50,490 --> 00:42:54,550 >> TOMAS REIMERS: Tak Bootstrap je veľmi magická vec vyvinutý ľuďmi 885 00:42:54,550 --> 00:42:55,340 na Twitteri. 886 00:42:55,340 --> 00:42:57,230 A čo to bolo chcel urobiť, bolo - 887 00:42:57,230 --> 00:43:00,740 Pred webové stránky boli naozaj ťažké, aby sa Sluší ti to, zvlášť keď sme mali 888 00:43:00,740 --> 00:43:02,200 veľa spoločných prvkov. 889 00:43:02,200 --> 00:43:04,770 Takže veľa tlačidiel na web vyzeral rovnako. 890 00:43:04,770 --> 00:43:08,960 >> Mnoho textových polí môžu byť vykonané vyzerajú lepšie ako štandardný text 891 00:43:08,960 --> 00:43:13,620 pole, ktoré pravdepodobne poznáte z naozaj Staré webové stránky alebo naozaj zle vykonaná 892 00:43:13,620 --> 00:43:18,210 webové stránky, ktoré rovnako vyzerajú ako doslovný textové polia bez akejkoľvek forme textu 893 00:43:18,210 --> 00:43:21,190 tieň alebo akékoľvek pekné osnovy. 894 00:43:21,190 --> 00:43:24,540 Takže to, čo Bootstrap urobil, bolo, že povedal, dobre, Máme veľa spoločných štýlov. 895 00:43:24,540 --> 00:43:28,210 Prečo robíme jednu spoločnú sadu CSS a spoločný súbor JavaScriptu, ako 896 00:43:28,210 --> 00:43:32,210 dobre, čo je štýl ako je, a ktorý môže dať ľuďom veci, ako je pokles 897 00:43:32,210 --> 00:43:34,610 down menu, ktoré môže dať ľuďom veci ako modálne slovesá. 898 00:43:34,610 --> 00:43:38,580 >> Modal je to, čo sa objaví na stránke vždy, keď je to prísne vzaté 899 00:43:38,580 --> 00:43:41,090 niečo, ktorý ďalej inhibuje interakcie, kým 900 00:43:41,090 --> 00:43:43,110 komunikovať s ním. 901 00:43:43,110 --> 00:43:45,820 Niečo také je, ste si istí, Ak chcete odstrániť túto vec? 902 00:43:45,820 --> 00:43:49,100 Nemôžete robiť nič iné, kým sa povedať áno alebo nie. 903 00:43:49,100 --> 00:43:52,720 >> Trvalo to všetko a to balí ju dohromady a povedal, ideme na to. 904 00:43:52,720 --> 00:43:54,630 Ľudia teraz môžu použiť. 905 00:43:54,630 --> 00:43:56,830 A nájdete ju na getbootstrap.com. 906 00:43:56,830 --> 00:44:00,480 To bol automaticky zahrnuté do Vaše posledný problém nastaviť. 907 00:44:00,480 --> 00:44:04,160 A vy ste viac ako vítaní použiť ho na svojom poslednom projekte. 908 00:44:04,160 --> 00:44:06,950 A ak chcete z toho, že prepojiť, aby sa Bootstrap. 909 00:44:06,950 --> 00:44:10,590 910 00:44:10,590 --> 00:44:15,700 >> Uvidíte tu Zavedený CSS stránky. 911 00:44:15,700 --> 00:44:16,860 Uvidíte Bootstrap. 912 00:44:16,860 --> 00:44:20,450 A ak sa posunúť dole, uvidíte ako stiahnuť, ako sa 913 00:44:20,450 --> 00:44:21,900 nainštalovať, et cetera. 914 00:44:21,900 --> 00:44:24,700 >> MIKE RIZZO: A môžete tiež, dosť zaujímavé, prispôsobiť tak, aby 915 00:44:24,700 --> 00:44:27,770 sa bez ohľadu na druh tém ktoré chcete. 916 00:44:27,770 --> 00:44:31,270 Viem, že je to niečo, čo som urobil pre moje Konečný projekt, keď som vzal triedu 917 00:44:31,270 --> 00:44:32,050 bolo prispôsobiť sa. 918 00:44:32,050 --> 00:44:34,540 Iná verzia Bootstrap, že mal inú farebnú schému a 919 00:44:34,540 --> 00:44:36,700 rôzne tvary niektorých rôzne veci. 920 00:44:36,700 --> 00:44:38,250 Tak som sa povzbudiť, aby ste si s tým. 921 00:44:38,250 --> 00:44:39,440 Je to celkom zábavné robiť. 922 00:44:39,440 --> 00:44:43,230 >> TOMAS REIMERS: Pohľad cez horný znovu, je to veľmi podobné písmo 923 00:44:43,230 --> 00:44:44,970 Super miesto. 924 00:44:44,970 --> 00:44:47,810 Mnoho dokumentácie začne vyzerať podobne, keď ste 925 00:44:47,810 --> 00:44:48,940 videl dosť. 926 00:44:48,940 --> 00:44:51,260 Takže tu máme CSS súčasť tohto. 927 00:44:51,260 --> 00:44:53,540 A uvidíte, ako to môžete štýl veci. 928 00:44:53,540 --> 00:44:56,780 Takže ak kliknete na tabuľkách, napríklad, môžete okamžite vykonať 929 00:44:56,780 --> 00:45:01,710 Tabuľka celkom jednoducho pridaním trieda stôl k nej. 930 00:45:01,710 --> 00:45:03,150 >> Rovnaké veci na gombíky. 931 00:45:03,150 --> 00:45:12,140 Ak jednoducho pridať triedu BTN a BTN predvolený alebo BTN primárnej, môžete 932 00:45:12,140 --> 00:45:16,240 sa niektorý z týchto tlačidiel s týmito pre-made štýly. 933 00:45:16,240 --> 00:45:18,570 A potom, ak hľadáte pre niečo zložitejšie, než len 934 00:45:18,570 --> 00:45:24,100 rekonštruuje, čo w už viac ako na Karta JavaScript celej hornej my 935 00:45:24,100 --> 00:45:25,120 majú veľa dielov. 936 00:45:25,120 --> 00:45:30,410 >> Takže tu máme prechodov, modálne slovesá, rozbaľovacích ponukách, karty a popisky. 937 00:45:30,410 --> 00:45:35,530 Tooltip je to, čo sa objaví pod vaším myši, keď podržíte na niečo. 938 00:45:35,530 --> 00:45:40,280 Popovers, upozornenia, tlačidlá, skladacie harmoniky je to, čo 939 00:45:40,280 --> 00:45:41,190 oni sú zvyčajne nazýva. 940 00:45:41,190 --> 00:45:43,045 Kolotoče, ktorý Flip až ako obrazy. 941 00:45:43,045 --> 00:45:52,190 942 00:45:52,190 --> 00:45:54,840 >> Takže to sú komponenty z Bootstrap. 943 00:45:54,840 --> 00:45:57,620 Chcel by som vás povzbudiť, aby vysoko ísť na ne pozrieť. 944 00:45:57,620 --> 00:46:01,780 Tam je zložka JavaScript a zložka CSS. 945 00:46:01,780 --> 00:46:03,880 Neváhajte a používať ich ako ty. 946 00:46:03,880 --> 00:46:06,730 Nebudeme sa moc ísť do nich pretože máme pocit, že dokumentácia 947 00:46:06,730 --> 00:46:09,360 Je naozaj dobre. 948 00:46:09,360 --> 00:46:10,540 A jo. 949 00:46:10,540 --> 00:46:14,500 Máte nejaké otázky týkajúce sa, že? 950 00:46:14,500 --> 00:46:19,430 >> MIKE RIZZO: Tak, ako sú naozaj rýchle strana, dizajn tejto webovej stránky, ktorá 951 00:46:19,430 --> 00:46:21,830 sme sa rýchlo dať dohromady táto prezentácia je 952 00:46:21,830 --> 00:46:24,290 v skutočnosti vykonáva pomocou Bootstrap. 953 00:46:24,290 --> 00:46:27,810 Ako môžete vidieť, keď klikneme na nich rôzne karty, my sme vlastne nikdy 954 00:46:27,810 --> 00:46:30,750 opustenie tohto prúdu index.html stránku. 955 00:46:30,750 --> 00:46:36,400 Takže to, čo máme, je rôzne divs v tomto index.html. 956 00:46:36,400 --> 00:46:39,610 A potom, keď sme kliknite na iný karta, je to len zmenou 957 00:46:39,610 --> 00:46:41,590 ktorá niečí predstavenie. 958 00:46:41,590 --> 00:46:47,390 >> Tak to teda pozícia je, zmení HTML stránky tak, aby 959 00:46:47,390 --> 00:46:52,330 Karta prúd je označený ako aktívny, takže zdá sa inak a vzhľad 960 00:46:52,330 --> 00:46:52,820 naozaj pekné. 961 00:46:52,820 --> 00:46:57,260 >> TOMAS REIMERS: Takže to všetko bolo vykonané bez toho, aby nám písať takmer každý CSS. 962 00:46:57,260 --> 00:47:01,440 Tiež pozri záhlavie v hornej, ktoré farby sú u nás. 963 00:47:01,440 --> 00:47:04,800 Ale skutočné uvedenie na Horná časť stránky a robiť 964 00:47:04,800 --> 00:47:06,660 to zvitok bol Bootstrap. 965 00:47:06,660 --> 00:47:09,720 A potom aj pre iné knižnice - to nie je tá, ktorú sme hovorili o, ale jeden 966 00:47:09,720 --> 00:47:11,580 môžete Google, ak budete chcieť. 967 00:47:11,580 --> 00:47:15,130 To sa nazýva prettify.js. 968 00:47:15,130 --> 00:47:20,650 A to bude zvýraznenie syntaxe kódu Pre použitie aj CSS a JavaScript. 969 00:47:20,650 --> 00:47:23,480 970 00:47:23,480 --> 00:47:27,070 >> Posledná vec, ktorú chceme hovoriť o tom, predtým, než sme sa uvoľniť vás do 971 00:47:27,070 --> 00:47:30,620 Svet sa pozrieť na knižnice prísť na to, ako ich používať a, dúfajme, 972 00:47:30,620 --> 00:47:34,640 prečítajte si dokumentáciu a nájsť to, čo ste Potreba je, ako nájsť knižnice. 973 00:47:34,640 --> 00:47:37,000 Takže prvá je, že sme len bude tlačiť Google. 974 00:47:37,000 --> 00:47:37,810 Choď Google. 975 00:47:37,810 --> 00:47:41,150 >> To je doslova to, čo budeme robiť, keď sme musíte urobiť niečo, čo je Google my. 976 00:47:41,150 --> 00:47:44,730 Je tu knižnica JavaScript, ktorý mi umožňuje manipulovať čas 977 00:47:44,730 --> 00:47:45,400 užitočný spôsob, ako? 978 00:47:45,400 --> 00:47:49,510 Takže, ak ja viem, že niektoré užívateľské vytváranie účtu tu, a to je 979 00:47:49,510 --> 00:47:53,010 aktuálny čas, ako môžem spočítať Rozdiel, ktorý bez toho, aby museli 980 00:47:53,010 --> 00:47:55,020 vypočítať to sám? 981 00:47:55,020 --> 00:47:59,630 Takže to je vlastne bežná vec, JavaScript čas knižnice. 982 00:47:59,630 --> 00:48:02,440 A tu sme Moment.js-- jeden z najobľúbenejších. 983 00:48:02,440 --> 00:48:06,530 >> Ak budeme potrebovať knižnicu pre manipuláciu niečo ako farba, aby bolo možné 984 00:48:06,530 --> 00:48:08,650 generovať veľa náhodných farieb - 985 00:48:08,650 --> 00:48:10,660 prípadne, pre generovanie štýl alebo tak niečo - 986 00:48:10,660 --> 00:48:13,480 mohli by sme sa Google niečo ako JavaScript farba knižnica. 987 00:48:13,480 --> 00:48:15,620 A som si istý, že by sa pop-up s tisíc a jeden z nich. 988 00:48:15,620 --> 00:48:18,290 989 00:48:18,290 --> 00:48:21,410 Ste vítaní, aby si cez ne. 990 00:48:21,410 --> 00:48:24,610 >> Takže väčšina vecí - keď ich nájdete - sa chystáte byť umiestnený na jednom z 991 00:48:24,610 --> 00:48:25,920 stránky, ktoré hostiteľ kód. 992 00:48:25,920 --> 00:48:26,960 Sú to niekoľko z nich populárne. 993 00:48:26,960 --> 00:48:30,870 Najviac populárne tým, že Zatiaľ je github.com. 994 00:48:30,870 --> 00:48:35,300 A ak idete na GitHub, že je to v skutočnosti kde Normalizácia moderoval. 995 00:48:35,300 --> 00:48:36,950 Takže ak sa chcete vrátiť k tej jednej. 996 00:48:36,950 --> 00:48:38,135 Ukážte im, že. 997 00:48:38,135 --> 00:48:40,516 >> MIKE RIZZO: A to je vlastne, kde to je hosťovaná taky, či ste si všimli. 998 00:48:40,516 --> 00:48:41,000 >> TOMAS REIMERS: Jo. 999 00:48:41,000 --> 00:48:49,078 Takže ak pôjdete cez normalizovať a ísť na GitHub. 1000 00:48:49,078 --> 00:48:51,936 Boli to je? 1001 00:48:51,936 --> 00:48:54,620 >> MIKE RIZZO: To je malá mačka, čo je symbol GitHub. 1002 00:48:54,620 --> 00:48:56,330 >> TOMAS REIMERS: Oh. 1003 00:48:56,330 --> 00:49:02,180 Takže GitHub používa metódu nazvanú Git na uloženie kódu. 1004 00:49:02,180 --> 00:49:05,150 Je neviete, čo to je, alebo to vás desí, to je v poriadku. 1005 00:49:05,150 --> 00:49:16,100 Nemusíte vedieť, čo Git je pretože GitHub má tlačidlo Stiahnuť 1006 00:49:16,100 --> 00:49:17,200 v pravom dolnom rohu. 1007 00:49:17,200 --> 00:49:21,350 >> Ďalšia užitočná vec vedieť o GitHub je väčšina výrobkov 1008 00:49:21,350 --> 00:49:23,200 bude mať read me. 1009 00:49:23,200 --> 00:49:25,400 A ak nemajú webové stránky, čítať, aby som sa bude hovoriť o tom, ako 1010 00:49:25,400 --> 00:49:28,310 nainštalovať, ako ju používať, čo to áno, et cetera, et cetera, et cetera. 1011 00:49:28,310 --> 00:49:31,033 To, čo sme v podstate boli chôdze vás. 1012 00:49:31,033 --> 00:49:32,326 >> MIKE RIZZO: Internet je prestať fajčiť. 1013 00:49:32,326 --> 00:49:34,020 >> TOMAS REIMERS: To je v poriadku. 1014 00:49:34,020 --> 00:49:36,980 Posledné dve veci, ktoré sme chceli hovoriť - 1015 00:49:36,980 --> 00:49:38,750 sme hovorili o git - 1016 00:49:38,750 --> 00:49:40,290 je riešenie problémov. 1017 00:49:40,290 --> 00:49:43,020 A toto nie je relevantná pre konečného výrobku, ako je 1018 00:49:43,020 --> 00:49:44,870 keď necháte 50. 1019 00:49:44,870 --> 00:49:48,310 A keď sa dostanete do produktov vykonávanie knižnice alebo vykonávanie 1020 00:49:48,310 --> 00:49:50,230 svoj vlastný projekt, budete mať otázky alebo ste 1021 00:49:50,230 --> 00:49:51,660 bude vyzerať na otázky. 1022 00:49:51,660 --> 00:49:53,060 >> Opäť platí, Google ho. 1023 00:49:53,060 --> 00:49:54,630 To je doslova to, čo robíme. 1024 00:49:54,630 --> 00:49:56,400 To bude znieť hlúpo. 1025 00:49:56,400 --> 00:49:58,310 Ale doslova sme ho Google. 1026 00:49:58,310 --> 00:50:01,810 A opäť, jedna z prvých vecí, budete zvyčajne beží na je 1027 00:50:01,810 --> 00:50:06,550 stackoverflow.com, čo je nádherný Otázka a odpoveď zrak. 1028 00:50:06,550 --> 00:50:10,530 >> Je to úžasné, pretože ako môžete post otázky a hľadať na 1029 00:50:10,530 --> 00:50:12,760 odpovede, ale tiež preto, že to už je veľa 1030 00:50:12,760 --> 00:50:14,590 dopredu vyplnené obsah tam. 1031 00:50:14,590 --> 00:50:18,510 Takže väčšinou, keď sa Google v programovaní otázka v rámci prvej 1032 00:50:18,510 --> 00:50:22,620 pár hitov, ktoré ste už spustili do neho počas vášho problému sád. 1033 00:50:22,620 --> 00:50:27,840 >> A potom, konečne naozaj krátka vec je JSFIDDLE, čo je - dnes máme 1034 00:50:27,840 --> 00:50:32,110 robil veľa práce s JavaScript HTML CSS. 1035 00:50:32,110 --> 00:50:39,820 JSFIDDLE je webová aplikácia, ktorá v podstate umožňuje, aby sa vaše HTML, YOUR 1036 00:50:39,820 --> 00:50:42,820 JavaScript vľavo dole, a vaše CSS v pravom hornom rohu. 1037 00:50:42,820 --> 00:50:47,840 A potom to môže vytvoriť rýchly render IT a uvidíte, ako to ovplyvňuje. 1038 00:50:47,840 --> 00:50:50,500 Je to veľmi užitočné, keď sa ľudia snažia urobiť proof of concept, ako 1039 00:50:50,500 --> 00:50:52,910 To je, ako by ste to rozbaľovacie menu. 1040 00:50:52,910 --> 00:50:54,980 Možno, že rýchly odhaliť alebo čokoľvek iného. 1041 00:50:54,980 --> 00:50:56,560 >> MIKE RIZZO: Tak ideme na to dopredu a kliknite na to. 1042 00:50:56,560 --> 00:50:57,820 Krátka poznámka - 1043 00:50:57,820 --> 00:51:00,430 vzhľadom k tomu, ako sme boli robí na kliknutie. 1044 00:51:00,430 --> 00:51:04,380 Ukázalo sa, že JCorey Kórea má tiež vstavaný V click obsluhu udalosti, ktorá je 1045 00:51:04,380 --> 00:51:07,020 používa len preto, že čísla ste bude chcieť robiť veľa vecí, 1046 00:51:07,020 --> 00:51:08,410 ak chcete kliknite na niečo. 1047 00:51:08,410 --> 00:51:09,690 >> Podobne, má tiež vznášať. 1048 00:51:09,690 --> 00:51:12,850 Ale dostať plný rozsah tie, pozri sa na jQuery 1049 00:51:12,850 --> 00:51:15,320 dokumentácie a urobiť to. 1050 00:51:15,320 --> 00:51:18,760 Urobil som niečo hlúpe tu. 1051 00:51:18,760 --> 00:51:21,490 >> TOMAS REIMERS: Tak som sa naozaj rýchlo Program tu, ktorý hovorí, 1052 00:51:21,490 --> 00:51:22,640 tlačidlo na myši. 1053 00:51:22,640 --> 00:51:23,890 Potom máme pre sláčiky. 1054 00:51:23,890 --> 00:51:26,810 U i je menšie ako 404. 1055 00:51:26,810 --> 00:51:29,530 Je to jednoducho bude pop-up Tieto výstražné správy. 1056 00:51:29,530 --> 00:51:33,425 >> MIKE RIZZO: A čo bolo kód 404 stál v HTML? 1057 00:51:33,425 --> 00:51:34,145 Pamätá si niekto? 1058 00:51:34,145 --> 00:51:35,450 Nebol nájdený, vpravo. 1059 00:51:35,450 --> 00:51:38,640 1060 00:51:38,640 --> 00:51:40,885 Chrome tiež pridal to čistý vec, kde môžete - 1061 00:51:40,885 --> 00:51:43,430 >> TOMAS REIMERS: Pretože ľudia ako Mike začal robiť to veľa a 1062 00:51:43,430 --> 00:51:47,230 otravné užívateľa, čo umožňuje môžete vidieť informácie. 1063 00:51:47,230 --> 00:51:48,286 >> MIKE RIZZO: Jo. 1064 00:51:48,286 --> 00:51:50,690 >> TOMAS REIMERS: Máme nejaké otázky o tom, o JavaScriptu 1065 00:51:50,690 --> 00:51:53,420 knižnice, nájsť knižnice, alebo čo vývoj webových vzhľad 1066 00:51:53,420 --> 00:51:55,400 rovnako ako v reálnom svete? 1067 00:51:55,400 --> 00:51:56,880 Sme beh proti času. 1068 00:51:56,880 --> 00:52:00,400 Takže si nie som istý, ideme mať čas na prevedenie 1069 00:52:00,400 --> 00:52:02,290 ak je to naozaj rýchlo. 1070 00:52:02,290 --> 00:52:04,580 Sme dobrý? 1071 00:52:04,580 --> 00:52:08,110 >> MIKE RIZZO: niečo, čo ľudí chceli vidieť naozaj rýchlo, tak za dva 1072 00:52:08,110 --> 00:52:09,556 minút alebo menej? 1073 00:52:09,556 --> 00:52:10,870 >> TOMAS REIMERS: niečo môžeme objasniť? 1074 00:52:10,870 --> 00:52:12,500 Ako písať - 1075 00:52:12,500 --> 00:52:13,260 >> DIVÁKOV: [nepočuteľné]? 1076 00:52:13,260 --> 00:52:16,070 >> MIKE RIZZO: Áno, tak to je - 1077 00:52:16,070 --> 00:52:18,065 >> TOMAS REIMERS: Môžete len hit Control-U na internetových stránkach. 1078 00:52:18,065 --> 00:52:19,275 >> MIKE RIZZO: Oh, nevedel som, že. 1079 00:52:19,275 --> 00:52:22,290 >> TOMAS REIMERS: Myslím, že jo. 1080 00:52:22,290 --> 00:52:23,300 Control-U. Jo. 1081 00:52:23,300 --> 00:52:25,970 >> MIKE RIZZO: Aha, tak to je Kód pre webové stránky. 1082 00:52:25,970 --> 00:52:29,580 Ale ak si naozaj chcete stiahnuť naše súbory a všetko, to je hosťovaní 1083 00:52:29,580 --> 00:52:32,650 na github.com 1084 00:52:32,650 --> 00:52:34,850 >> TOMAS REIMERS: lomítko moje meno - 1085 00:52:34,850 --> 00:52:38,504 Tomáš Reimers - slash CS50 pomlčka seminár. 1086 00:52:38,504 --> 00:52:40,710 >> MIKE RIZZO: A môžete tu všetko tam. 1087 00:52:40,710 --> 00:52:42,310 >> TOMAS REIMERS: To je to, čo GitHub vyzerá, mimochodom. 1088 00:52:42,310 --> 00:52:44,910 Takže znova, keď vidíte open source projekt, typicky, že bude čítanie 1089 00:52:44,910 --> 00:52:45,950 ma tam, že si môžete prečítať. 1090 00:52:45,950 --> 00:52:50,200 A keď sa vrátite, zistíte, že budete mať sťahovanie zips, ktorý bude 1091 00:52:50,200 --> 00:52:52,130 vám umožní stiahnuť zdroj kódu 1092 00:52:52,130 --> 00:52:53,666 produkt vo svojej vlastnej veci. 1093 00:52:53,666 --> 00:52:56,890 >> MIKE RIZZO: Jo, a keď sme stačí kliknúť na index.html naozaj rýchlo - 1094 00:52:56,890 --> 00:52:59,180 >> TOMAS REIMERS: Uvidíte tu Zdrojový kód pre naše webové stránky. 1095 00:52:59,180 --> 00:53:02,016 1096 00:53:02,016 --> 00:53:06,070 >> MIKE RIZZO: Tiež som zabudol posunúť vpravo skôr s veľkým stolom je 1097 00:53:06,070 --> 00:53:09,860 v cene, ale je tu tiež tabuľku z chmods, že sme súčasťou 1098 00:53:09,860 --> 00:53:13,210 iba pre prehľadnosť. 1099 00:53:13,210 --> 00:53:16,940 Ale ak budeme prechádzať celú cestu dole do dno, sme nemali vlastne robiť veľmi 1100 00:53:16,940 --> 00:53:21,160 veľa sa JavaScriptu veci vôbec s tým. 1101 00:53:21,160 --> 00:53:26,610 Je to výhradne od všetkého iného, ​​čo sme mali. 1102 00:53:26,610 --> 00:53:28,730 >> Takže ďakujem chlapci prišli a počúvania. 1103 00:53:28,730 --> 00:53:29,830 Dúfame, že to bolo naozaj užitočné. 1104 00:53:29,830 --> 00:53:33,020 Ak máte akékoľvek JavaScript súvisiace otázky, alebo len chcete o tom hovoriť 1105 00:53:33,020 --> 00:53:36,240 čo iné, ako to, čo ďalšie skvelé veci môžete to urobiť pomocou JavaScriptu, radi by sme 1106 00:53:36,240 --> 00:53:37,186 s tebou hovoriť. 1107 00:53:37,186 --> 00:53:40,010 >> TOMAS REIMERS: Ak máte otázku o projekte, alebo či to môže byť 1108 00:53:40,010 --> 00:53:42,740 relevantné, pravdepodobne budeme držať okolo trochu po tomto. 1109 00:53:42,740 --> 00:53:44,640 Ale iné, než to, že majú dobrý víkend. 1110 00:53:44,640 --> 00:53:45,845 >> MIKE RIZZO: Jo, baví. 1111 00:53:45,845 --> 00:53:46,120 Uvidíme sa. 1112 00:53:46,120 --> 00:53:47,370 >> TOMAS REIMERS: Maj sa. 1113 00:53:47,370 --> 00:53:47,926