1 00:00:00,000 --> 00:00:07,440 2 00:00:07,440 --> 00:00:08,180 >> TOMAS REIMERS: Cześć wszystkim. 3 00:00:08,180 --> 00:00:09,250 Nazywam się Tomas Reimers. 4 00:00:09,250 --> 00:00:10,500 >> MIKE RIZZO: Jestem Mike Rizzo. 5 00:00:10,500 --> 00:00:12,990 >> TOMAS REIMERS: Jesteśmy dwa CS50s TS. 6 00:00:12,990 --> 00:00:18,910 A dziś jesteśmy wiodącym seminarium JavaScript i CSS w aplikacjach internetowych. 7 00:00:18,910 --> 00:00:22,140 Jeśli chcesz podążać, link jest tam. 8 00:00:22,140 --> 00:00:25,190 I chcesz umieścić go na krótko komputer? 9 00:00:25,190 --> 00:00:27,460 >> Jest ogniwem. 10 00:00:27,460 --> 00:00:30,390 To małe miejsce, które ma powiązania z wszystkie zasoby Zamierzamy być 11 00:00:30,390 --> 00:00:36,490 wskazując cię dzisiaj, a także posiada wiele przydatne informacje napisane przez nas 12 00:00:36,490 --> 00:00:39,680 czytaj więcej w głębi, kiedy wrócisz, i starasz się przypomnieć sobie, co 13 00:00:39,680 --> 00:00:42,166 dokładnie nie możemy powiedzieć, co było mówisz, et cetera. 14 00:00:42,166 --> 00:00:43,870 >> MIKE RIZZO: W porządku. 15 00:00:43,870 --> 00:00:44,890 Więc zacznijmy. 16 00:00:44,890 --> 00:00:45,700 >> TOMAS REIMERS: Więc chcesz zacząć? 17 00:00:45,700 --> 00:00:45,970 OK. 18 00:00:45,970 --> 00:00:47,170 >> MIKE RIZZO: Tak. 19 00:00:47,170 --> 00:00:51,730 Więc najpierw chciałem zacząć szeroka Informacje o Internecie i 20 00:00:51,730 --> 00:00:54,240 typów plików przy projektowaniu stron internetowych. 21 00:00:54,240 --> 00:00:57,550 Podczas tej prezentacji chcemy, aby dostać się do dużo dużo JavaScript 22 00:00:57,550 --> 00:01:00,320 później, chcieliśmy zacząć od tak, jakby, jak widok z lotu ptaka 23 00:01:00,320 --> 00:01:03,270 o co strona jest i jak myśleć o projektowaniu 24 00:01:03,270 --> 00:01:04,800 strona początku. 25 00:01:04,800 --> 00:01:08,370 >> Więc chłopaki, w tym momencie - z tego jest piątek - powinny mieć 26 00:01:08,370 --> 00:01:11,000 składać się z CS50 finansów Problem ustawia. 27 00:01:11,000 --> 00:01:15,260 Miejmy nadzieję, że był to dobry smak co do programowania stron internetowych może być. 28 00:01:15,260 --> 00:01:18,261 Ale tutaj chcemy, rodzaju, dają jesteś inny smak, jak również. 29 00:01:18,261 --> 00:01:23,190 >> TOMAS REIMERS: Więc po prostu podsumować to, co się dzieje, po wpisaniu w adresie URL do 30 00:01:23,190 --> 00:01:26,650 Twoja przeglądarka, która pobiera adres URL spojrzał w komputerze. 31 00:01:26,650 --> 00:01:28,590 A komputer jest podłączony do innego komputera 32 00:01:28,590 --> 00:01:29,890 którego gospodarzem tej stronie. 33 00:01:29,890 --> 00:01:33,150 OK, więc, gdy idziesz do google.com, jesteś podłączone do jednego z Google'a 34 00:01:33,150 --> 00:01:36,496 komputery, które nie Pliki do google.com. 35 00:01:36,496 --> 00:01:38,750 >> Następnie prosi o określonym pliku. 36 00:01:38,750 --> 00:01:40,020 Więc jeśli przejść do - 37 00:01:40,020 --> 00:01:41,550 Nie wiem - 38 00:01:41,550 --> 00:01:48,170 example.com / index.html lub / test.html, masz zamiar poprosić o 39 00:01:48,170 --> 00:01:49,340 że określony plik. 40 00:01:49,340 --> 00:01:52,780 I serwer www dzieje , aby powrócić do Ciebie. 41 00:01:52,780 --> 00:01:54,910 >> Następnie, po przejściu przez tego pliku - 42 00:01:54,910 --> 00:01:57,750 43 00:01:57,750 --> 00:01:59,950 raz jesteś, że komputer staje się plik - to się do początku 44 00:01:59,950 --> 00:02:00,820 zbudować stronę internetową. 45 00:02:00,820 --> 00:02:03,020 Więc teraz ma plik HTML, która jest trochę jak 46 00:02:03,020 --> 00:02:05,170 Struktura strony internetowej. 47 00:02:05,170 --> 00:02:08,620 Plik HTML może również odwołać Pliki CSS, które definiują 48 00:02:08,620 --> 00:02:09,889 Styl strony. 49 00:02:09,889 --> 00:02:12,970 >> Pliki JavaScript, które definiuje interakcja ze strony internetowej. 50 00:02:12,970 --> 00:02:15,200 Pliki graficzne, które są tylko zdjęcia. 51 00:02:15,200 --> 00:02:19,450 I ewentualnie link do innych plików HTML, które można następnie odwiedzić. 52 00:02:19,450 --> 00:02:22,656 53 00:02:22,656 --> 00:02:24,380 >> MIKE RIZZO: OK, świetnie. 54 00:02:24,380 --> 00:02:28,980 Więc macie wszystko, być może, starannie skonfigurować hosta lokalnego 55 00:02:28,980 --> 00:02:30,810 na maszynie wirtualnej. 56 00:02:30,810 --> 00:02:35,650 I to właśnie, niby, jest miejscowy domeny, które odbywają się tylko komputer 57 00:02:35,650 --> 00:02:38,760 ci na własny adres IP. 58 00:02:38,760 --> 00:02:43,300 >> W terminie, który, można dodać do niego własne strony internetowe. 59 00:02:43,300 --> 00:02:47,655 To znaczy, w CS50 Finansów, należy mieć Dodano kilka stron HTML, które są, 60 00:02:47,655 --> 00:02:49,410 rodzaj, zawinięte w owijki PHP. 61 00:02:49,410 --> 00:02:54,690 Ale ostatecznie, co strona PHP zostały wyprowadzania był HTML. 62 00:02:54,690 --> 00:02:58,210 >> Ale myśli powrót do początku z pset musieliśmy ustawić 63 00:02:58,210 --> 00:03:00,890 uprawnienia na wszystko, prawda? 64 00:03:00,890 --> 00:03:07,270 Więc to po prostu w zasadzie mówi nam którzy mogą czytać, pisać, a może 65 00:03:07,270 --> 00:03:08,730 wykonanie każdego z plików. 66 00:03:08,730 --> 00:03:11,870 Więc mamy zamiar zrobić szybki - hm? 67 00:03:11,870 --> 00:03:15,660 >> TOMAS REIMERS: Więc idziemy aby zrobić szybkie demo. 68 00:03:15,660 --> 00:03:19,560 Więc po prostu przypomnieć, kiedy podłączenie do komputera przez Google - 69 00:03:19,560 --> 00:03:20,690 kto - 70 00:03:20,690 --> 00:03:24,060 i najpierw poprosić o pliku, komputer musi upewnić się, że uprawniony 71 00:03:24,060 --> 00:03:28,790 faktycznie zobaczyć, że plik lub przeczytać, że pliku, ponieważ nie można po prostu zapytać 72 00:03:28,790 --> 00:03:30,430 dla każdego pliku na tym komputerze, prawda? 73 00:03:30,430 --> 00:03:32,260 To byłoby zagrożenie bezpieczeństwa. 74 00:03:32,260 --> 00:03:37,020 >> Więc pliki na systemach, których używamy, jak To urządzenie CS50, mają trzy 75 00:03:37,020 --> 00:03:39,200 ogólnie ludzie, którzy mogą mieć uprawnienia do czegoś. 76 00:03:39,200 --> 00:03:41,610 Pierwsze rzeczywiste Właściciel wspomnianego pliku. 77 00:03:41,610 --> 00:03:43,820 Druga grupa, która jest plik pochodzi. 78 00:03:43,820 --> 00:03:46,090 Nie zamierzamy się skupić zbyt wiele na ten temat. 79 00:03:46,090 --> 00:03:50,010 I ostatnia rzecz, rodzaju, jak świat i tak jak wszyscy, kto jest 80 00:03:50,010 --> 00:03:54,130 nie specyficzne dla tego pliku i nie mają żadnych praw własności do niej. 81 00:03:54,130 --> 00:04:05,650 >> Więc jeśli mamy właściciela, grupy, a potem świat. 82 00:04:05,650 --> 00:04:10,510 A więc, dla każdej z tych grup można może mieć jedną z trzech uprawnień, 83 00:04:10,510 --> 00:04:13,010 OK lub wielu z nich. 84 00:04:13,010 --> 00:04:15,070 Możesz mieć uprawnienia do odczytu. 85 00:04:15,070 --> 00:04:16,560 Możesz mieć odpowiednie uprawnienia. 86 00:04:16,560 --> 00:04:18,880 I można mieć uprawnienia do wykonywania. 87 00:04:18,880 --> 00:04:22,060 >> Tak pod względem faktycznym typów plików, przeczytaj pozwolenie jest jak faktycznie czytanie 88 00:04:22,060 --> 00:04:23,250 zawartość pliku. 89 00:04:23,250 --> 00:04:24,730 Jest zezwolenie na piśmie prawo do wspomnianego pliku. 90 00:04:24,730 --> 00:04:28,370 Uprawnienie Execute działa pliku, podobnie jak to zrobić po uruchomieniu jednego z 91 00:04:28,370 --> 00:04:29,620 Twoje projekty CS50. 92 00:04:29,620 --> 00:04:32,190 93 00:04:32,190 --> 00:04:38,820 >> Tak więc, gdy myślimy o plikach jak wtedy, gdy musimy przeczytać HTML 94 00:04:38,820 --> 00:04:41,790 Plik, który musi być świat czytelne, prawda? 95 00:04:41,790 --> 00:04:44,420 Przypuszczalnie, także właściciel chce aby móc edytować ten plik. 96 00:04:44,420 --> 00:04:46,610 Więc właściciel będzie potrzebował uprawnienia do odczytu i zapisu. 97 00:04:46,610 --> 00:04:48,710 Oni naprawdę nie trzeba wykonywać. 98 00:04:48,710 --> 00:04:50,950 >> Grupa, będziemy traktować same, jak na świecie teraz. 99 00:04:50,950 --> 00:04:54,610 Więc potrzebują uprawnień do odczytu. 100 00:04:54,610 --> 00:04:57,310 Ale nie trzeba pisać lub uprawnienia do wykonywania. 101 00:04:57,310 --> 00:05:01,920 A teraz, jeśli uważamy, że powrót do byłego PSETs, co my sobie sprawę, jest to rodzaj 102 00:05:01,920 --> 00:05:03,360 z wyglądać dwójkowy, prawda? 103 00:05:03,360 --> 00:05:04,210 1 oznacza tak. 104 00:05:04,210 --> 00:05:05,040 0 na nie. 105 00:05:05,040 --> 00:05:06,870 I rzeczywiście możemy tłumaczyć to binarny. 106 00:05:06,870 --> 00:05:10,478 >> Więc 110 binarnie będzie 6. 107 00:05:10,478 --> 00:05:13,270 100 będzie 4. 108 00:05:13,270 --> 00:05:14,690 Podobnie jest z świata. 109 00:05:14,690 --> 00:05:20,846 Więc liczba dostaniemy za uprawnienia do tego będzie 644. 110 00:05:20,846 --> 00:05:24,400 >> MIKE RIZZO: A jeśli uważasz, że powrót do kiedy chmoded coś, wierzę 111 00:05:24,400 --> 00:05:28,980 dali się problemu ustawić przykładem, gdzie można zrobić 112 00:05:28,980 --> 00:05:36,470 coś jak chmod 644 , a następnie nazwę pliku. 113 00:05:36,470 --> 00:05:39,980 644, a następnie, można teraz zobaczyć bezpośrednio jeżeli pochodzi. 114 00:05:39,980 --> 00:05:42,840 Więc mam nadzieję, że sprawia, że trochę bardziej jasne. 115 00:05:42,840 --> 00:05:45,600 >> A następnie dla jasności ciebie faceta - 116 00:05:45,600 --> 00:05:48,200 och tak, tutaj jest to ponownie. 117 00:05:48,200 --> 00:05:53,260 Więc 600 to będzie tylko przykładem daliśmy się tutaj, gdzie właściciel ma 118 00:05:53,260 --> 00:05:56,360 Przeczytałem natomiast grupa prawy uprawnienia i świat nie mają żadnych uprawnień 119 00:05:56,360 --> 00:05:58,145 aby uzyskać dostęp do pliku. 120 00:05:58,145 --> 00:06:01,500 >> TOMAS REIMERS: I wtedy mamy szybkie Lista wspólnych uprawnień. 121 00:06:01,500 --> 00:06:05,250 Tak katalogi, chcesz faktycznie chmod 711. 122 00:06:05,250 --> 00:06:08,930 Krótki bok - do katalogu, aby mieć pozwolenie wykonywalny oznacza móc 123 00:06:08,930 --> 00:06:11,680 , aby otworzyć katalog. 124 00:06:11,680 --> 00:06:15,280 Obrazy, CSS, JavaScript, HTML potrzeb 644, ponieważ, w zasadzie, świat 125 00:06:15,280 --> 00:06:16,400 Potrzeby uprawnienia do odczytu. 126 00:06:16,400 --> 00:06:20,960 >> I PHP, które wy widzieliście mimo, że nie będą o tym mówić 127 00:06:20,960 --> 00:06:24,880 ściśle z typowo chmoded Uprawnienie 600, ponieważ jest prowadzony z 128 00:06:24,880 --> 00:06:26,540 uprawnienia właściciela. 129 00:06:26,540 --> 00:06:27,790 Przynajmniej na urządzeniu. 130 00:06:27,790 --> 00:06:30,200 131 00:06:30,200 --> 00:06:36,870 >> MIKE RIZZO: Więc nie, jeśli nie specjalnie określić, jaki typ pliku 132 00:06:36,870 --> 00:06:39,480 chcesz w rzeczywistości ustawienie do prezentacji - 133 00:06:39,480 --> 00:06:43,490 mieliśmy z tym problem, ponieważ wszystko nie chmoded poprawnie - 134 00:06:43,490 --> 00:06:47,550 ty dostaniesz, rodzaj, zabronione błąd, że strona 135 00:06:47,550 --> 00:06:49,700 w rzeczywistości nie ma uprawnień , aby uzyskać dostęp niezależnie plik 136 00:06:49,700 --> 00:06:51,370 chcesz go przejść. 137 00:06:51,370 --> 00:06:54,780 I oczywiście, że może być ustalona - jak w błąd danych - przez zmianę 138 00:06:54,780 --> 00:06:56,405 uprawnienia odpowiednio. 139 00:06:56,405 --> 00:06:59,620 >> TOMAS REIMERS: I ostatni komentarz dla Rozwój lokalny to szybko - mamy 140 00:06:59,620 --> 00:07:02,000 przyniósł to do góry, ale po prostu chcieliśmy wnieść go ponownie - 141 00:07:02,000 --> 00:07:06,230 jeśli poprosić o serwerze - tak hosta lokalnego, np. com czy cokolwiek. - 142 00:07:06,230 --> 00:07:09,170 i nie określają konkretnego pliku, Plik, że komputer będzie 143 00:07:09,170 --> 00:07:11,540 prosić o nazywa index.html. 144 00:07:11,540 --> 00:07:12,790 Lub, jeżeli nie istnieje, index.php. 145 00:07:12,790 --> 00:07:15,560 146 00:07:15,560 --> 00:07:16,350 >> Fajne. 147 00:07:16,350 --> 00:07:19,560 Więc to jest tylko podsumowanie wszystkiego, miejmy nadzieję, że omówiliśmy w 148 00:07:19,560 --> 00:07:22,800 sekcja, i wykład, i do tej pory w CS50. 149 00:07:22,800 --> 00:07:26,110 A teraz mamy zamiar rozpocząć rozmowy o specjalnie bibliotek. 150 00:07:26,110 --> 00:07:30,270 CSS, JavaScript i biblioteki dla aplikacji internetowych. 151 00:07:30,270 --> 00:07:36,350 >> Więc jeden szybki powód dlaczego mamy biblioteki jest programowanie - 152 00:07:36,350 --> 00:07:39,000 istnieje wiele problemów w programowania, które pojawiały się utrzymać 153 00:07:39,000 --> 00:07:40,570 znowu, i znowu, i znowu. 154 00:07:40,570 --> 00:07:43,870 Można zauważyć, że wiele stron internetowych Potrzebuję zdolność do rozwijanej 155 00:07:43,870 --> 00:07:49,100 menu, na przykład, czy potrzebna jest możliwość mieć bardzo standardowy przycisk 156 00:07:49,100 --> 00:07:51,400 styl, który nie może być najłatwiej. 157 00:07:51,400 --> 00:07:54,670 Teraz, gdy zaczynają się na HTML, można sobie sprawę, że może faktycznie przyciski 158 00:07:54,670 --> 00:07:57,720 wyglądają bardzo brzydko, czy ci nie rób nic. 159 00:07:57,720 --> 00:08:00,830 >> Tak wiele osób pisało zwane biblioteki. 160 00:08:00,830 --> 00:08:02,990 I w tym kontekście, że są zwany także ramy. 161 00:08:02,990 --> 00:08:04,790 Zamierzamy użyć dwa zamiennie. 162 00:08:04,790 --> 00:08:07,360 I jakie są to są w zasadzie predefiniowane fragmenty kodu - 163 00:08:07,360 --> 00:08:09,130 zarówno CSS lub JavaScript - 164 00:08:09,130 --> 00:08:13,240 które zabierają dużo Team masz w kodowaniu. 165 00:08:13,240 --> 00:08:17,290 >> Więc wstępnie określić kilka klas lub wstępnie określić kilka funkcji do 166 00:08:17,290 --> 00:08:20,110 Sprawa JavaScript, w którym możesz zadzwonić później. 167 00:08:20,110 --> 00:08:22,690 A potem może, coś, uzyskać Dostęp do tego kodu bez 168 00:08:22,690 --> 00:08:23,710 mając nic zrobić. 169 00:08:23,710 --> 00:08:27,750 Przykład bibliotekę CS50.H. To była biblioteka daliśmy wam powrót 170 00:08:27,750 --> 00:08:32,090 w ciągu jednego tygodnia, który pozwolił, aby zrobić takie rzeczy GetInt i GetString 171 00:08:32,090 --> 00:08:35,237 bez pisania każdy kod sam. 172 00:08:35,237 --> 00:08:36,179 >> MIKE RIZZO: W porządku. 173 00:08:36,179 --> 00:08:40,299 Więc, tak jak musieliśmy m.in. w naszym plików różni c 174 00:08:40,299 --> 00:08:46,570 biblioteki, także powinny obejmować w nasza html różnych bibliotek. 175 00:08:46,570 --> 00:08:50,310 Na przykład, jeśli chcemy m.in. Biblioteka JavaScript tu specyficzny, 176 00:08:50,310 --> 00:08:52,850 być może, który napisaliśmy sami, jak to jest lokalnie gospodarzem 177 00:08:52,850 --> 00:08:56,000 zwane script.js, po prostu korzystać z tego zapisu. 178 00:08:56,000 --> 00:08:59,500 >> Więc mamy typu skrypt równych JavaScript źródło równi 179 00:08:59,500 --> 00:09:01,260 JavaScript.js. 180 00:09:01,260 --> 00:09:05,190 A jeśli uważasz, że powrót do CS50 ustawić problemem finansów, jeśli spojrzał w 181 00:09:05,190 --> 00:09:09,190 header.php w folderze szablonów, powinny widzieliście 182 00:09:09,190 --> 00:09:10,970 niektóre z nich zawarte. 183 00:09:10,970 --> 00:09:13,250 Więc ten pierwszy - skrypty - 184 00:09:13,250 --> 00:09:16,080 jest w tym biblioteki JavaScript. 185 00:09:16,080 --> 00:09:18,760 W tym jest CSS biblioteki trochę inaczej. 186 00:09:18,760 --> 00:09:21,430 >> Tutaj, zamiast skryptu Tag trzeba tag łącza. 187 00:09:21,430 --> 00:09:27,110 A następnie, tekst typu CSS jest trochę inny. 188 00:09:27,110 --> 00:09:29,270 Nie zawsze muszą zawierać Arkusz stylów rel. 189 00:09:29,270 --> 00:09:30,970 Ale myślę, że to, na ogół, dobra praktyka. 190 00:09:30,970 --> 00:09:35,810 >> I w końcu, HREF, które zapewne widział w swoim ATAGs łączenia 191 00:09:35,810 --> 00:09:39,440 w różnych linków tylko określa ogniwem, gdzie znaleźć to. 192 00:09:39,440 --> 00:09:42,250 Na przykład, jeśli chcemy połączyć inna biblioteka - powiedzmy - 193 00:09:42,250 --> 00:09:49,330 że mieszkał w styles.css. 194 00:09:49,330 --> 00:09:54,030 Chcieliśmy połączyć w to, że Gości na stronie, że chcemy skopiować. 195 00:09:54,030 --> 00:09:58,834 A następnie wkleić go do co mamy tu zamiast. 196 00:09:58,834 --> 00:10:01,340 >> TOMAS REIMERS: OK, mam nadzieję, że jesteś Chłopaki są już znane 197 00:10:01,340 --> 00:10:02,410 z jak połączyć CSS. 198 00:10:02,410 --> 00:10:04,000 Trzeba było to zrobić na Twoja ostatnia brązowy zestaw. 199 00:10:04,000 --> 00:10:07,110 JavaScript, niektórzy z was być może pewne doświadczenie z. 200 00:10:07,110 --> 00:10:07,980 Niektórzy z was nie może. 201 00:10:07,980 --> 00:10:12,190 >> Więc teraz, wiem, że plik JavaScript jest bardzo podobny w pliku CSS 202 00:10:12,190 --> 00:10:15,640 poczucie, że można połączyć się z nim lub , że można umieścić go wewnątrz. 203 00:10:15,640 --> 00:10:17,360 I to pozwala na pisanie skryptów. 204 00:10:17,360 --> 00:10:21,820 I mamy zamiar przejść przez Trochę JavaScript później. 205 00:10:21,820 --> 00:10:23,560 >> Więc przy użyciu biblioteki - 206 00:10:23,560 --> 00:10:26,150 kiedy już uwzględnione to, że to, jak proste, jak dosłownie dzwoni 207 00:10:26,150 --> 00:10:29,640 funkcji lub dodaniu nazwy klas do niego. 208 00:10:29,640 --> 00:10:32,220 Ostatnią rzeczą, chcemy rozmawiać o w zakresie biblioteki - 209 00:10:32,220 --> 00:10:34,180 i to jest bardziej uwadze technicznej - 210 00:10:34,180 --> 00:10:35,860 licencji open source jest. 211 00:10:35,860 --> 00:10:41,550 Więc kiedy znajdziesz te rzeczywiste biblioteki, można myśleć o 212 00:10:41,550 --> 00:10:47,630 pytania, jak to jest w porządku, że jestem po prostu przy użyciu kodu kogoś innego, zwłaszcza 213 00:10:47,630 --> 00:10:51,970 bo to jest coś, co bardzo Miałeś nie robić w tym kursie. 214 00:10:51,970 --> 00:10:55,790 >> Tak więc w przypadku licencji open source, Wielu programistów - 215 00:10:55,790 --> 00:10:57,540 po ich Napisałem bibliotekę, które uważają, że może być 216 00:10:57,540 --> 00:10:59,450 pomocne dla innych ludzi - 217 00:10:59,450 --> 00:11:02,420 publikuje je w internecie i dać mu licencję. 218 00:11:02,420 --> 00:11:06,620 I licencji w zasadzie mówi, że jestem niniejszym udzielanie zgody na inne 219 00:11:06,620 --> 00:11:11,250 ludzi do korzystania z tego elementu o następującym rodzaj 220 00:11:11,250 --> 00:11:13,230 postanowienia. 221 00:11:13,230 --> 00:11:16,100 >> Zamieściliśmy link do dobrej strony do pomaga zrozumieć w licencji 222 00:11:16,100 --> 00:11:17,720 Jeśli używasz do nich. 223 00:11:17,720 --> 00:11:21,680 Wspólne postanowienia są takie rzeczy jak zapraszamy do korzystania z mojej biblioteki, więc 224 00:11:21,680 --> 00:11:23,000 ile możesz dać mi kredyt. 225 00:11:23,000 --> 00:11:25,670 Zapraszamy do korzystania z mojej biblioteki pod warunkiem, gdy rozkłada 226 00:11:25,670 --> 00:11:26,790 mnie nie winić. 227 00:11:26,790 --> 00:11:30,310 Zapraszamy do korzystania z mojej biblioteki, tak długo, jak nie używać go do zarabiania pieniędzy 228 00:11:30,310 --> 00:11:31,910 dla siebie. 229 00:11:31,910 --> 00:11:34,130 Są to rodzaje wspólnego postanowienia. 230 00:11:34,130 --> 00:11:37,780 >> W tym CS50 ostatecznego projektu, to nie powinno być bardzo istotne, ponieważ 231 00:11:37,780 --> 00:11:41,440 projekty, które są wam używać chyba raczej rodzaj, znany. 232 00:11:41,440 --> 00:11:44,170 Ale kiedy rzeczywiście wyjść na świat i zacząć korzystać z bibliotek, które 233 00:11:44,170 --> 00:11:48,100 mogą lub nie mogą być także implementowane jako niektóre z bardziej popularnych których jesteśmy 234 00:11:48,100 --> 00:11:49,780 będzie przechodzić. 235 00:11:49,780 --> 00:11:53,310 Dobrze jest być w stanie zrozumieć licencje i do tych 236 00:11:53,310 --> 00:11:54,560 zrozumieć, co one oznaczają. 237 00:11:54,560 --> 00:11:58,120 238 00:11:58,120 --> 00:11:58,586 I wraca. 239 00:11:58,586 --> 00:12:00,960 >> MIKE RIZZO: OK. 240 00:12:00,960 --> 00:12:04,850 Więc teraz porusza się na przykładach rzeczywistego CSS. 241 00:12:04,850 --> 00:12:07,770 W tym momencie do tej pory, to polubisz nie spotkałem tego. 242 00:12:07,770 --> 00:12:10,300 Ale można ją spotkałem Twoje codzienne życie, gdzie coś 243 00:12:10,300 --> 00:12:13,160 że wygląda jeden sposób na jednej przeglądarce może nie wyglądają tak samo 244 00:12:13,160 --> 00:12:14,880 stronę w innej przeglądarce. 245 00:12:14,880 --> 00:12:17,400 >> Nazywa się to Browser kompatybilność. 246 00:12:17,400 --> 00:12:20,780 I to staje się coraz bardziej i większym problemem, zwłaszcza 247 00:12:20,780 --> 00:12:25,260 Przeglądarki się coraz więcej wolności do wykonania rzeczy, jak chcą. 248 00:12:25,260 --> 00:12:28,440 Więc do pokonania, że ​​tam rzeczywiście jest wielka biblioteka nazywa Normalize.CSS. 249 00:12:28,440 --> 00:12:32,236 250 00:12:32,236 --> 00:12:33,770 >> TOMAS REIMERS: włączono link. 251 00:12:33,770 --> 00:12:36,210 W tym momencie jest to przydatne, gdy masz tam swój laptop 252 00:12:36,210 --> 00:12:38,740 patrząc na miejscu. 253 00:12:38,740 --> 00:12:42,580 I dajemy to do ciebie teraz po prostu dlatego ostateczna CS50 254 00:12:42,580 --> 00:12:44,370 Projekt jest rzeczywiście będzie poprosić o jego realizacji 255 00:12:44,370 --> 00:12:45,860 podobnie i przez przeglądarki. 256 00:12:45,860 --> 00:12:49,250 >> Tak po prostu, aby utrzymać się w tylnej części głowy, jest to wspaniałe biblioteki 257 00:12:49,250 --> 00:12:51,170 bo to będzie, rodzaj, standaryzacja rzeczy. 258 00:12:51,170 --> 00:12:54,230 Firefox, coś może pokazać jako jeden piksel w lewo. 259 00:12:54,230 --> 00:12:58,390 A następnie może zdecydować, że Chrome faktycznie co masz na myśli to 10 pikseli 260 00:12:58,390 --> 00:12:59,380 lewo. 261 00:12:59,380 --> 00:13:01,030 I chcesz ujednolicenia tego. 262 00:13:01,030 --> 00:13:05,360 Normalizacja będzie faktycznie bardzo dobry zadanie upewnić się, że witryna 263 00:13:05,360 --> 00:13:08,070 wygląda tak samo w różnych przeglądarkach. 264 00:13:08,070 --> 00:13:10,660 >> MIKE RIZZO: Więc jeśli chcieliśmy tylko kliknij link naprawdę szybko i pokaż 265 00:13:10,660 --> 00:13:13,140 Ci, co to wygląda, ci Można go pobrać za pomocą 266 00:13:13,140 --> 00:13:14,670 Olbrzym Pobierz przycisk. 267 00:13:14,670 --> 00:13:18,520 I zachęcam, aby przeczytać więcej o tym klikając w ten link w dolnej 268 00:13:18,520 --> 00:13:19,310 prawy róg. 269 00:13:19,310 --> 00:13:22,420 >> TOMAS REIMERS: A jeśli rzeczywiście kliknij czytaj więcej tam - 270 00:13:22,420 --> 00:13:24,340 kliknij źródło na GitHub - 271 00:13:24,340 --> 00:13:31,720 będziesz rzeczywiście zobaczyć open source licencji na LICENSE.md tam. 272 00:13:31,720 --> 00:13:35,740 I zobaczysz tu jest bardzo popularne licencji MIT. 273 00:13:35,740 --> 00:13:38,940 Ponownie, jeśli przeczytać tekstu, będzie można go znaleźć na stronie 274 00:13:38,940 --> 00:13:42,550 my określany przed i móc zrozumieć bez zapoznania 275 00:13:42,550 --> 00:13:45,920 przez żargonu prawnego. 276 00:13:45,920 --> 00:13:46,850 >> MIKE RIZZO: OK, świetnie. 277 00:13:46,850 --> 00:13:47,940 Więc to jest normalizacja. 278 00:13:47,940 --> 00:13:49,190 Chcieliśmy dać że bardzo szybko. 279 00:13:49,190 --> 00:13:50,030 Och, masz pytanie? 280 00:13:50,030 --> 00:13:53,013 >> PUBLICZNOŚCI: Więc kiedy go pobrać, to tak wynika z tego, że mają kod 281 00:13:53,013 --> 00:13:54,098 pod przyciskiem Pobierz? 282 00:13:54,098 --> 00:13:55,860 >> TOMAS REIMERS: Tak, tak, podczas pobierania - 283 00:13:55,860 --> 00:13:58,130 >> MIKE RIZZO: Och, to jest wielka litera. 284 00:13:58,130 --> 00:14:00,700 Więc pytanie, jak zrobić faktycznie go pobrać? 285 00:14:00,700 --> 00:14:03,260 Jeśli więc kliknij link, widzimy że rzeczywiście pojawia się 286 00:14:03,260 --> 00:14:05,030 w kodzie źródłowym. 287 00:14:05,030 --> 00:14:08,550 Tak, aby to zrobić, co się dało nie jest po prostu kliknij przycisk Zapisz jako. 288 00:14:08,550 --> 00:14:10,830 Zapisz jako i że należy przywołać plik. 289 00:14:10,830 --> 00:14:14,160 A następnie możemy wybrać, aby zapisać to jak normalize.CSS. 290 00:14:14,160 --> 00:14:15,810 A potem trzeba by połączyć je w - 291 00:14:15,810 --> 00:14:18,660 >> TOMAS REIMERS: W ten sam sposób można odwołuje się w żadnym innym pliku. 292 00:14:18,660 --> 00:14:22,250 I po połączeniu go w to, co jest świetne o normalizacji jest to rzeczywiście 293 00:14:22,250 --> 00:14:25,920 dbać o wszystkich ciężko działać samodzielnie. 294 00:14:25,920 --> 00:14:27,730 Co oznacza, że ​​nie masz dodać jakieś zajęcia. 295 00:14:27,730 --> 00:14:29,690 >> Nie musisz robić nic dziwnego. 296 00:14:29,690 --> 00:14:34,590 Będzie normalizacji bez ciebie cokolwiek dalej. 297 00:14:34,590 --> 00:14:36,083 Tak, musisz umieścić go. 298 00:14:36,083 --> 00:14:38,990 299 00:14:38,990 --> 00:14:40,240 Przeglądarka Google Chrome nie odpowiada. 300 00:14:40,240 --> 00:14:43,270 301 00:14:43,270 --> 00:14:44,860 >> Po prostu na bok szybkie - 302 00:14:44,860 --> 00:14:46,800 Zauważyłem, że wskoczył do tego. 303 00:14:46,800 --> 00:14:49,010 Reszta tej prezentacji jest będzie krótki przegląd. 304 00:14:49,010 --> 00:14:50,380 Badanie bibliotek. 305 00:14:50,380 --> 00:14:52,710 >> Zasadniczo, co to jest. 306 00:14:52,710 --> 00:14:53,350 To, co robią. 307 00:14:53,350 --> 00:14:54,060 Jak są one użyteczne. 308 00:14:54,060 --> 00:14:56,540 Jak można je realizować. 309 00:14:56,540 --> 00:14:59,730 Jeśli chcesz zacząć patrzeć na nich, po wzdłuż i czytania 310 00:14:59,730 --> 00:15:01,990 im, gorąco zachęcają. 311 00:15:01,990 --> 00:15:07,620 >> Alternatywnie, zapraszamy również do ściągnij je i tym 312 00:15:07,620 --> 00:15:11,400 je w zasięgu wzroku, by zobaczyć, co oni wyglądają i co zrobić, jeśli masz 313 00:15:11,400 --> 00:15:12,270 twój laptop przed tobą. 314 00:15:12,270 --> 00:15:14,650 Jeśli nie, to serdecznie zapraszamy do utrzymania słuchając nas mówić. 315 00:15:14,650 --> 00:15:15,500 Mamy zamiar rozmawiać. 316 00:15:15,500 --> 00:15:18,680 I mamy czas na koniec, mam nadzieję, my rzeczywiście dostać się pokazując, 317 00:15:18,680 --> 00:15:20,946 co niektórzy z tych bibliotek wyglądać. 318 00:15:20,946 --> 00:15:22,320 >> MIKE RIZZO: Cool. 319 00:15:22,320 --> 00:15:25,466 Dobra, to teraz porozmawiajmy o czcionki Niesamowite. 320 00:15:25,466 --> 00:15:30,480 >> TOMAS REIMERS: Niesamowite jest to czcionki naprawdę miłe miejsce, szczególnie dla tych, 321 00:15:30,480 --> 00:15:32,450 z nas, którzy są mniej artystycznie utalentowana. 322 00:15:32,450 --> 00:15:36,330 323 00:15:36,330 --> 00:15:38,880 Ignorowanie nazwę czcionki Niesamowite, daje Ci kilka ikon, które są 324 00:15:38,880 --> 00:15:41,050 bardzo użyteczne. 325 00:15:41,050 --> 00:15:45,950 Tak wiele razy będziesz realizować icon możesz się miłym X tak 326 00:15:45,950 --> 00:15:47,170 że można zamknąć coś. 327 00:15:47,170 --> 00:15:49,910 >> A może chcesz jakiś przycisk Edytuj z rysunkiem ołówkiem, jak 328 00:15:49,910 --> 00:15:50,940 wszyscy inni. 329 00:15:50,940 --> 00:15:53,850 I to jest, gdy dowiedzą się, że rysunek te ikony mogą być 330 00:15:53,850 --> 00:15:55,510 bardzo żmudne i trudne. 331 00:15:55,510 --> 00:15:59,160 Czcionki Awesome - jeśli rzeczywiście przejdź do strony - 332 00:15:59,160 --> 00:16:02,892 daje dużo ikon pod ikony na górze. 333 00:16:02,892 --> 00:16:06,980 Tak, tylko góry. 334 00:16:06,980 --> 00:16:09,030 To daje dużo ikon na darmo. 335 00:16:09,030 --> 00:16:15,210 >> Więc widzisz mamy takie rzeczy jak Gwiazdka, bary, piorun, 336 00:16:15,210 --> 00:16:19,750 kalendarz, błąd, książka, et cetera. 337 00:16:19,750 --> 00:16:21,110 Może to być bardzo użyteczne. 338 00:16:21,110 --> 00:16:24,290 Sposób obejmuje to uwzględnić dosłownie plik CSS. 339 00:16:24,290 --> 00:16:29,760 I po tym, jak zawarte w pliku CSS, co możesz zrobić, to stworzyć 340 00:16:29,760 --> 00:16:33,430 tag o nazwie I. satands dla ikona z klasy FA 341 00:16:33,430 --> 00:16:34,460 stojąca dla czcionki niesamowite. 342 00:16:34,460 --> 00:16:36,330 A następnie, niezależnie od klasy chcesz. 343 00:16:36,330 --> 00:16:41,220 >> Więc gdybym chciał ikonę tego plusa kwadratu tutaj, dałbym 344 00:16:41,220 --> 00:16:43,290 to klasa FA. 345 00:16:43,290 --> 00:16:46,230 A następnie FA myślnik oraz łącznik kwadratowy. 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: I wtedy, w zeszłym CSS Biblioteka chcemy dotrzeć jesteśmy 349 00:16:56,980 --> 00:16:59,950 starając się zachować minimalne na CSS biblioteki, ponieważ zdajemy sobie sprawę, 350 00:16:59,950 --> 00:17:03,660 Tytuł tej prezentacji jest obsługa JavaScript Biblioteki. 351 00:17:03,660 --> 00:17:07,089 Ale myśleliśmy, że możemy również wprowadzenie do innych bibliotek 352 00:17:07,089 --> 00:17:09,569 podczas gdy rozmawialiśmy o bibliotekach. 353 00:17:09,569 --> 00:17:11,400 >> To Web Fonts Google. 354 00:17:11,400 --> 00:17:17,040 I Google Web Fonts, co pozwala Wystarczy dodać czcionki na swojej stronie, 355 00:17:17,040 --> 00:17:22,079 co jest naprawdę łatwy sposób to zrobić ładna i odróżnić swój zestaw 356 00:17:22,079 --> 00:17:24,460 od każdego innego jest jeśli ma ładne czcionki lub jeśli ma ładny 357 00:17:24,460 --> 00:17:27,790 Zbiór czcionek. 358 00:17:27,790 --> 00:17:31,410 Google Web Fonts jest ładna w przeciwieństwie do innych bibliotek w tym sensie, że jest 359 00:17:31,410 --> 00:17:33,490 naprawdę kierować instalacji. 360 00:17:33,490 --> 00:17:38,680 >> Więc jeśli w link, to google.com / czcionki, wierzę. 361 00:17:38,680 --> 00:17:41,100 Jeśli się, że ci Można wybrać czcionkę. 362 00:17:41,100 --> 00:17:44,410 Można wybrać się na lewo od Grubość, skos, et cetera. 363 00:17:44,410 --> 00:17:48,970 A następnie, po wybraniu jednego, można kliknąć przycisk szybkiego użycia. 364 00:17:48,970 --> 00:17:49,820 Tam. 365 00:17:49,820 --> 00:17:51,590 W prawym dolnym rogu okna. 366 00:17:51,590 --> 00:17:54,380 367 00:17:54,380 --> 00:17:56,700 >> , A następnie przewiń w dół. 368 00:17:56,700 --> 00:17:59,600 369 00:17:59,600 --> 00:18:02,650 Po pierwsze, daje ci CSS, które trzeba właściwie link do niego. 370 00:18:02,650 --> 00:18:03,330 To właśnie tam. 371 00:18:03,330 --> 00:18:05,170 Możesz po prostu skopiować i wkleić, że w. 372 00:18:05,170 --> 00:18:07,250 I miłą rzeczą jest to jeden w rzeczywistości nie trzeba nawet 373 00:18:07,250 --> 00:18:08,340 pobierz plik. 374 00:18:08,340 --> 00:18:11,170 >> , Co to będzie zrobić, to to będzie link do wersji to Google. 375 00:18:11,170 --> 00:18:14,130 Wracając do tego, co to znaczy. 376 00:18:14,130 --> 00:18:18,270 Oznacza to, że gdy użytkownik pobiera plik - 377 00:18:18,270 --> 00:18:22,300 pobiera strony HTML - Twój HTML strona będzie odwoływać się do tego pliku. 378 00:18:22,300 --> 00:18:26,790 >> Tak więc komputer będzie zobaczyć, Och, to jest raczej gościł na google.com 379 00:18:26,790 --> 00:18:28,170 niż na theirsite.com. 380 00:18:28,170 --> 00:18:30,370 Puść mnie poprosić Google dla tego pliku. 381 00:18:30,370 --> 00:18:32,800 A potem, to będzie obejmować to prawie tak, jakby były 382 00:18:32,800 --> 00:18:35,584 część swojej własnej strony. 383 00:18:35,584 --> 00:18:36,540 >> TOMAS REIMERS: Cool. 384 00:18:36,540 --> 00:18:40,980 I po to m.in., że wtedy umieścić go w CSS, to daje 385 00:18:40,980 --> 00:18:41,830 Rzeczywista linia. 386 00:18:41,830 --> 00:18:45,188 Tak ustawić własność rodziny czcionek równa nazwę swojej czcionki. 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 właśnie skończyliśmy z CSS. 390 00:18:52,220 --> 00:18:57,230 A niektórzy z was mogą myśleć, dobrze, mieliśmy trochę CSS na CS50 Finansów. 391 00:18:57,230 --> 00:19:00,390 Ale biblioteka CSS był bootstrap. 392 00:19:00,390 --> 00:19:05,190 My rzeczywiście zawierają mało Bootstrap później, ponieważ z mocy JavaScript 393 00:19:05,190 --> 00:19:09,660 Biblioteka jest również CSS Bootstrap z dużo JavaScript, który 394 00:19:09,660 --> 00:19:12,060 Bootstrap lub Twitter - który uczynił Bootstrap - 395 00:19:12,060 --> 00:19:15,426 używa do zarządzania wszystkimi ich CSS. 396 00:19:15,426 --> 00:19:19,592 >> TOMAS REIMERS: Czy ktoś ma jakiekolwiek pytania do tej pory około CSS w ogóle? 397 00:19:19,592 --> 00:19:20,723 Jesteśmy dobrzy? 398 00:19:20,723 --> 00:19:21,216 Niesamowite. 399 00:19:21,216 --> 00:19:22,495 >> MIKE RIZZO: Niesamowite. 400 00:19:22,495 --> 00:19:25,136 >> TOMAS REIMERS: Więc w ruchu do JavaScript. 401 00:19:25,136 --> 00:19:27,900 >> MIKE RIZZO: Więc chcieliśmy porozmawiać o jQuery na początku. 402 00:19:27,900 --> 00:19:30,780 Czy ktoś słyszał o jQuery przed lub używał go? 403 00:19:30,780 --> 00:19:32,180 Tak, kilka? 404 00:19:32,180 --> 00:19:36,000 Więc jeśli po prostu pracować z rodzimych JavaScript, będziesz się znaleźć 405 00:19:36,000 --> 00:19:41,000 wpisując wiele długich selektorów dużo. 406 00:19:41,000 --> 00:19:44,400 To co robi to jest jQuery zapewnia ładny wrapper dla JavaScriptu 407 00:19:44,400 --> 00:19:48,180 język, który pozwala w prosty sposób wybrać i manipulować różnych elementów 408 00:19:48,180 --> 00:19:52,470 w dokumencie modelu obiektowego Strona WWW lub DOM, które myślę, że 409 00:19:52,470 --> 00:19:54,290 wy słyszeliście o w wykład w tym momencie. 410 00:19:54,290 --> 00:19:57,550 >> TOMAS REIMERS: Jeśli nie słyszałeś o to czy wykład jeśli nie oglądałem 411 00:19:57,550 --> 00:20:01,870 jednak dokument jest Object Model w zasadzie, jak rzeczy są reprezentowane. 412 00:20:01,870 --> 00:20:05,290 Więc HTML rodzaju wygląda jak drzewo kiedy rzeczywiście wyciągnąć go. 413 00:20:05,290 --> 00:20:06,850 Masz element HTML na górze. 414 00:20:06,850 --> 00:20:07,560 Masz głowę i ciało. 415 00:20:07,560 --> 00:20:09,500 >> A następnie, w terminie, który mają wszystko. 416 00:20:09,500 --> 00:20:10,660 To dalej DOM - 417 00:20:10,660 --> 00:20:12,120 Document Object Model. 418 00:20:12,120 --> 00:20:16,090 Więc model, który reprezentuje obiekty w Dokument jest prosty sposób, aby myśleć 419 00:20:16,090 --> 00:20:18,560 o tym. 420 00:20:18,560 --> 00:20:22,520 I jeden z wielkich rzeczy na temat jQuery jest to naprawdę robi referowania 421 00:20:22,520 --> 00:20:26,460 że i elementy manipulacji w obrębie że niezwykle proste. 422 00:20:26,460 --> 00:20:30,300 >> Takie proste, w rzeczywistości, że większość JavaScript biblioteki lub jeśli nie 423 00:20:30,300 --> 00:20:34,200 większość, większość z tych kawałków zobaczysz tak naprawdę wymaga jQuery 424 00:20:34,200 --> 00:20:37,530 że mogą się po prostu uruchomić bo jeśli nie ma jQuery, ci 425 00:20:37,530 --> 00:20:40,540 nie tracić czasu na próby dowiedzieć się, jak wybrać pewne 426 00:20:40,540 --> 00:20:43,660 elementy i jak robić inne rzeczy. 427 00:20:43,660 --> 00:20:47,950 I inne wielkie rzeczy na temat jQuery jest to, że krzyż przeglądarka zgodna. 428 00:20:47,950 --> 00:20:51,550 >> Więc pamiętaj, z powrotem, gdy powiedzieliśmy, że nie wszystkie przeglądarki realizacji 429 00:20:51,550 --> 00:20:53,100 rzeczy w ten sam sposób? 430 00:20:53,100 --> 00:20:55,120 Dzieje się tak nawet w JavaScript. 431 00:20:55,120 --> 00:20:58,220 I jednym z wielkich rzeczy na temat jQuery jest to, że wykrywa 432 00:20:58,220 --> 00:21:00,300 przeglądarka i wykrywania odpowiedni sposób. 433 00:21:00,300 --> 00:21:03,420 >> Więc jeśli chcesz, aby wybrać element, Internet Explorer może powiedzieć, że jesteś 434 00:21:03,420 --> 00:21:05,770 robić w ten sposób. 435 00:21:05,770 --> 00:21:08,300 Firefox może powiedzieć poprawne droga jest w ten sposób. 436 00:21:08,300 --> 00:21:09,710 jQuery nie obchodzi. 437 00:21:09,710 --> 00:21:12,550 Kiedy mówisz jQuery wybrać elementem będzie dowiedzieć się, jak to jest 438 00:21:12,550 --> 00:21:16,290 powinien zrobić to w przeglądarce Użytkownik jest obecnie, a następnie wykonaj 439 00:21:16,290 --> 00:21:18,584 to w ten sposób. 440 00:21:18,584 --> 00:21:22,650 >> MIKE RIZZO: Więc nie mówmy o Wykorzystanie jQuery trochę. 441 00:21:22,650 --> 00:21:27,670 Podobnie jak PHP, jQuery ma szczególnie sentyment do dolara. 442 00:21:27,670 --> 00:21:30,880 Więc można stwierdzić, że wszelkie jQuery - 443 00:21:30,880 --> 00:21:32,060 Cóż, nie wszyscy. 444 00:21:32,060 --> 00:21:35,210 Czasami można zastąpić dolara znak ze słowem jQuery. 445 00:21:35,210 --> 00:21:38,980 Ale ogólnie, tylko dlatego, że krótszy, gdy widzisz jQuery jest 446 00:21:38,980 --> 00:21:41,420 używane to będzie ze znakiem dolara. 447 00:21:41,420 --> 00:21:47,030 >> Więc tutaj mamy po prostu pokazując początek selektora dla elementu w DOM. 448 00:21:47,030 --> 00:21:52,850 Tutaj mamy znak dolara, a następnie otwartymi nawiasami a następnie notowań. 449 00:21:52,850 --> 00:21:56,130 Oraz w cudzysłowie iść nasze selektorów dla różnych elementów. 450 00:21:56,130 --> 00:21:59,810 Podobnie jak w CSS, co potrzebne do selektorów móc projektować inne elementy 451 00:21:59,810 --> 00:22:00,840 w stronę. 452 00:22:00,840 --> 00:22:06,555 Te różne selektory tłumaczeniu dokładnie do jQuery i JavaScript, 453 00:22:06,555 --> 00:22:07,820 w większości przypadków. 454 00:22:07,820 --> 00:22:10,120 >> Więc tutaj mamy foo kropka. 455 00:22:10,120 --> 00:22:14,780 Więc jeśli pamiętacie z wykładu, kropka oznacza po prostu klasę. 456 00:22:14,780 --> 00:22:18,850 Więc mamy wybór elementu z klasy foo. 457 00:22:18,850 --> 00:22:22,670 Jeśli więc śmiało i otwarcie naszego Konsola JavaScript tutaj naprawdę szybko 458 00:22:22,670 --> 00:22:26,830 tylko wykazać je, gdybym po prostu wpisz znak dolara, widzimy, że jest to część 459 00:22:26,830 --> 00:22:28,090 Funkcja, która pojawia się. 460 00:22:28,090 --> 00:22:29,420 I to jest po prostu zdefiniowane przez jQuery. 461 00:22:29,420 --> 00:22:32,120 >> TOMAS REIMERS: Dla tych z Was, znają, że konsola jest narzędziem 462 00:22:32,120 --> 00:22:35,430 w ciągu Chrome, który pozwala, w zasadzie, uruchomić JavaScript na 463 00:22:35,430 --> 00:22:36,450 Ta strona. 464 00:22:36,450 --> 00:22:39,420 To znajdziesz bardzo przydatne, gdy jesteś rzeczywiście i debugowania 465 00:22:39,420 --> 00:22:42,400 muszą być podobne, co jest obecny wartość jakiejś zmiennej globalnej lub co 466 00:22:42,400 --> 00:22:43,910 jest coś jeszcze? 467 00:22:43,910 --> 00:22:47,620 To trochę jak z wyjątkiem GDB że można rzeczywiście 468 00:22:47,620 --> 00:22:51,600 manipulować elementów na stronie z to w znacznie łatwiejszy sposób. 469 00:22:51,600 --> 00:22:55,080 A także, że nie, w zasadzie, sprawdź z wami, zanim nic nie robi. 470 00:22:55,080 --> 00:22:58,660 >> Tak więc mając na uwadze, GDB może być jak, jesteś na pewno chcesz uruchomić następny krok? 471 00:22:58,660 --> 00:22:59,830 Konsola jest w czasie rzeczywistym. 472 00:22:59,830 --> 00:23:03,690 Tak jak strona internetowa jest trójwymiarowa i robi to, co robi, 473 00:23:03,690 --> 00:23:05,720 Rada jest również uruchomiony obok niego. 474 00:23:05,720 --> 00:23:08,330 I można umieścić kod przypisać do że konsola, która będzie 475 00:23:08,330 --> 00:23:09,260 działać na stronie. 476 00:23:09,260 --> 00:23:12,190 >> MIKE RIZZO: Tak, aby wejść do konsoli, Myślę, że należy na krótko 477 00:23:12,190 --> 00:23:13,750 wspomnieć, jak to zrobić. 478 00:23:13,750 --> 00:23:17,850 W ostatnich problemów, które mogą mieć Używany Chrome elementu sprawdzić 479 00:23:17,850 --> 00:23:20,440 funkcje lub źródło - widok strony 480 00:23:20,440 --> 00:23:23,870 a te są dostępne tylko przez prawo kliknij na stronie lub określonego 481 00:23:23,870 --> 00:23:28,430 Element i robi albo skontrolować Element lub zobacz stronę źródła. 482 00:23:28,430 --> 00:23:31,190 Możemy również uzyskać dostęp do JavaScript Konsola bezpośrednio 483 00:23:31,190 --> 00:23:33,630 Wybierając sprawdzić element. 484 00:23:33,630 --> 00:23:37,930 Więc to po prostu hit konsoli po prawej stronie. 485 00:23:37,930 --> 00:23:41,900 >> Alternatywnie, można również zniknął w prawym górnym rogu, 486 00:23:41,900 --> 00:23:46,820 która jest odcięta na tym ekranie, gdzie ma trzy poziome paski. 487 00:23:46,820 --> 00:23:52,010 I udać się do narzędzi i następnie konsola JavaScript 488 00:23:52,010 --> 00:23:53,240 tutaj, gdzie można zobaczyć - 489 00:23:53,240 --> 00:23:54,370 przynajmniej w systemie Windows - 490 00:23:54,370 --> 00:23:59,680 Sterowanie jest skrót J. Więc przesuwne jeśli chcemy, aby wybrać element 491 00:23:59,680 --> 00:24:06,060 na tej stronie, tak jak pokazałem wcześniej, robimy znak dolara otwarte parens 492 00:24:06,060 --> 00:24:08,180 a następnie cytuje. 493 00:24:08,180 --> 00:24:11,750 >> Ciekawostką jest, na ogół, apostrofy i cudzysłowy są 494 00:24:11,750 --> 00:24:12,370 wymienialne. 495 00:24:12,370 --> 00:24:16,050 Tak wiele osób po prostu użyć pojedynczego cytaty, ponieważ są one szybciej wpisywać 496 00:24:16,050 --> 00:24:19,780 niż podwójny cudzysłów, ponieważ nie trzeba przytrzymać klawisz Shift. 497 00:24:19,780 --> 00:24:21,770 Więc ja po prostu to zrobić już teraz. 498 00:24:21,770 --> 00:24:24,510 >> Tak, chcę, aby wybrać coś z klasą. 499 00:24:24,510 --> 00:24:27,200 Pojemnik, tylko dlatego, że wiem, że to coś, co znajduje się na naszej 500 00:24:27,200 --> 00:24:28,740 strona internetowa teraz. 501 00:24:28,740 --> 00:24:29,520 I naciśnij Enter. 502 00:24:29,520 --> 00:24:31,670 I widzimy, że wybrany go. 503 00:24:31,670 --> 00:24:34,990 Więc to pokazuje się, że wrócił tego obiektu. 504 00:24:34,990 --> 00:24:36,620 Więc to jest podstawowy wybór. 505 00:24:36,620 --> 00:24:40,080 Jeśli chcemy rzeczywiście manipulować, trzeba by nazwać coś 506 00:24:40,080 --> 00:24:43,925 tego wyboru, który dostaniemy się później. 507 00:24:43,925 --> 00:24:49,030 >> TOMAS REIMERS: Więc po prostu patrzeć na to bardziej w głębi, nie ma różnicy 508 00:24:49,030 --> 00:24:52,245 niż funkcjach zrobiliśmy w C. Nazwa funkcji jest tu 509 00:24:52,245 --> 00:24:52,580 trochę dziwne. 510 00:24:52,580 --> 00:24:55,640 To znak dolara. 511 00:24:55,640 --> 00:24:57,010 To tylko nazwa funkcji. 512 00:24:57,010 --> 00:24:58,810 Nie ma nic specjalnego. 513 00:24:58,810 --> 00:25:00,450 >> Mamy otwarte nawiasy. 514 00:25:00,450 --> 00:25:03,880 Następnie mamy jeden argument, który w tym przypadku okazuje się być ciągiem znaków, 515 00:25:03,880 --> 00:25:05,680 który jest selektorem dla niego. 516 00:25:05,680 --> 00:25:08,130 A potem, mamy zamknięty nawias. 517 00:25:08,130 --> 00:25:09,960 To jest to. 518 00:25:09,960 --> 00:25:11,500 >> To nie jest tak bardzo różne. 519 00:25:11,500 --> 00:25:12,900 Mimo, że wygląda bardzo dziwnie. 520 00:25:12,900 --> 00:25:17,220 I to może być, w pewnym sensie, kłucia punkt dla wielu ludzi. 521 00:25:17,220 --> 00:25:21,460 >> MIKE RIZZO: Więc podobnie, jeśli chcemy , aby wybrać element, który ma identyfikator, 522 00:25:21,460 --> 00:25:23,470 teraz chcemy wybrać przez ID zamiast klasy. 523 00:25:23,470 --> 00:25:28,080 To byłoby coś podobnego, gdzie po prostu zrobić ostry znak dla ID. 524 00:25:28,080 --> 00:25:33,576 Więc mamy tu wszystko, wybierając Elementy, które mają pasek identyfikacyjny. 525 00:25:33,576 --> 00:25:35,400 >> TOMAS REIMERS: A ten wydłuża. 526 00:25:35,400 --> 00:25:36,450 Że CSS rozszerza. 527 00:25:36,450 --> 00:25:42,260 Podobnie jak w CSS, można wybrać wszystkie linki, które mają foo klasy. 528 00:25:42,260 --> 00:25:43,420 Tutaj, to jest to samo. 529 00:25:43,420 --> 00:25:52,750 >> Można zrobić a.foo, które wybrać wszystkie linki z klasy foo. 530 00:25:52,750 --> 00:25:58,860 Można zrobić ostry bar, które wybierz link z paska ID i tak 531 00:25:58,860 --> 00:25:59,770 dalej, i tak dalej. 532 00:25:59,770 --> 00:26:02,120 Wszelkie selektor CSS jest poprawny selektor jQuery. 533 00:26:02,120 --> 00:26:03,370 >> MIKE RIZZO: Tak. 534 00:26:03,370 --> 00:26:07,996 535 00:26:07,996 --> 00:26:11,460 OK, więc teraz przejdźmy do trochę manipulacji, że możemy zrobić z 536 00:26:11,460 --> 00:26:12,870 nasza jQuery. 537 00:26:12,870 --> 00:26:19,280 Więc jQuery ma szczególny rodzaj notacji, gdzie po prostu wykorzystać 538 00:26:19,280 --> 00:26:20,170 kropka na końcu. 539 00:26:20,170 --> 00:26:23,340 A może myślisz o tym, jak w C jak mieliśmy różne przypisać struktury. 540 00:26:23,340 --> 00:26:27,110 I iść w tych strukturach, byś używać kropki, aby dostać się do nich. 541 00:26:27,110 --> 00:26:28,480 >> To jest, jakby, podobnie rzecz. 542 00:26:28,480 --> 00:26:33,570 Teraz mamy tylko w ramach tej funkcji Selektor, że możemy wywołać na nim. 543 00:26:33,570 --> 00:26:38,640 Więc tutaj, pierwszy przykład widać to selektor CSS. 544 00:26:38,640 --> 00:26:45,290 I w zasadzie, co to to nie jest dotyczy pierwszego elementu CSS do tego 545 00:26:45,290 --> 00:26:46,230 rzecz, która została wybrana - 546 00:26:46,230 --> 00:26:47,720 ten element, który został wybrany - 547 00:26:47,720 --> 00:26:49,290 z wartością tego. 548 00:26:49,290 --> 00:26:55,390 >> TOMAS REIMERS: Tak proste tłumaczenie że gdyby jQuery zasadniczo 549 00:26:55,390 --> 00:26:57,790 po prostu wziął foo. 550 00:26:57,790 --> 00:27:05,480 A następnie w CSS powiedział, kolor czerwony i blisko. 551 00:27:05,480 --> 00:27:06,670 To ten sam pomysł. 552 00:27:06,670 --> 00:27:08,800 Co to się robi jest to zaznaczone wszystkie elementy foo. 553 00:27:08,800 --> 00:27:10,170 A potem to stosowane. 554 00:27:10,170 --> 00:27:15,884 Rodzaj, kolor nieruchomości jest równa czerwony. 555 00:27:15,884 --> 00:27:21,070 >> MIKE RIZZO: Podobnie, możemy również zmienić Rzeczywista zawartość tego, co jest 556 00:27:21,070 --> 00:27:24,870 pokazano na HTML strony, co jest naprawdę fajne, bo to znaczy, że 557 00:27:24,870 --> 00:27:28,095 Strony internetowe mogą być teraz całkowicie dynamiczny i nie muszą być statyczne 558 00:27:28,095 --> 00:27:31,660 że drukowanie za pomocą PHP na początku 559 00:27:31,660 --> 00:27:33,320 Strona jest załadowany. 560 00:27:33,320 --> 00:27:36,810 Więc, jeśli chcemy zmienić Rzeczywisty HTML strony, bylibyśmy teraz 561 00:27:36,810 --> 00:27:43,550 wywołania funkcji HTML, które po prostu Wkładki cokolwiek określić na 562 00:27:43,550 --> 00:27:45,390 że elementem, który wybraliśmy. 563 00:27:45,390 --> 00:27:49,810 Więc tutaj mamy do wyboru elementu z class foo, a następnie mówi, że to HTML 564 00:27:49,810 --> 00:27:52,200 to teraz witaj świecie. 565 00:27:52,200 --> 00:27:55,600 >> TOMAS REIMERS: I kiedy myślisz o jakie są użyteczne aplikacje 566 00:27:55,600 --> 00:28:00,800 ta, to jeden CSS, pierwszą rzeczą, która możesz zacząć myśleć o 567 00:28:00,800 --> 00:28:03,070 w zakresie nawet menu rozwijanych. 568 00:28:03,070 --> 00:28:08,350 Można zacząć robić rzeczy, jak, kiedy najechaniu na górnej części 569 00:28:08,350 --> 00:28:11,970 of a down drop, chcesz, aby Dolna część widoczne. 570 00:28:11,970 --> 00:28:12,540 Prawda? 571 00:28:12,540 --> 00:28:15,610 >> Więc w CSS, mamy właściwości zrobić coś widocznego. 572 00:28:15,610 --> 00:28:19,330 Rzeczy, jak żaden wyświetlacz okrężnicy Pozwoliłoby to niewidoczne. 573 00:28:19,330 --> 00:28:21,190 Blok wyświetlacza stałaby się widoczna. 574 00:28:21,190 --> 00:28:25,860 Lub nawet jeśli chcesz iść prostsze, ci takie rzeczy jak równych sobie widoczności 575 00:28:25,860 --> 00:28:27,520 widoczne, a widoczność wynosi ukryty. 576 00:28:27,520 --> 00:28:30,330 577 00:28:30,330 --> 00:28:34,780 >> I można zacząć realizować rzeczy jak menu rozwijanych prawo 578 00:28:34,780 --> 00:28:38,410 po odebraniu przez pomysł, jak można dowiedzieć się, kiedy to otwiera się, 579 00:28:38,410 --> 00:28:39,850 które dostaniemy za bardzo krótko. 580 00:28:39,850 --> 00:28:42,160 Ale możemy zacząć, aby zobaczyć Wnioski z tego. 581 00:28:42,160 --> 00:28:45,540 W podobnym sensie, jeśli były, aby spróbować i wdrożenia, powiedzmy, czat 582 00:28:45,540 --> 00:28:48,620 silnik i chcesz, aby trochę dymka wymyślić, gdy masz 583 00:28:48,620 --> 00:28:52,880 mam nową wiadomość, po uzyskaniu nowa wiadomość, możesz zrobić trochę 584 00:28:52,880 --> 00:28:55,890 dymka wymyślić zmieniając HTML strony, prawda? 585 00:28:55,890 --> 00:29:00,540 Dodając, że dodatkowe dymka z dodatkowym tekstem istnieje. 586 00:29:00,540 --> 00:29:01,140 Tak? 587 00:29:01,140 --> 00:29:07,750 >> PUBLICZNOŚCI: Tak byłoby umieścić to w ciągu Kod HTML w coś w rodzaju 588 00:29:07,750 --> 00:29:10,534 [Niesłyszalne]? 589 00:29:10,534 --> 00:29:12,940 >> MIKE RIZZO: Prawo. 590 00:29:12,940 --> 00:29:16,190 Tak, my się do tego, w trochę. 591 00:29:16,190 --> 00:29:18,810 Tak, to jest podobny trochę do PHP. 592 00:29:18,810 --> 00:29:21,240 Nie dokładnie podobny. 593 00:29:21,240 --> 00:29:24,730 >> Dobry do rozróżnienia tego, co jest faktycznie edycji, kiedy edytować 594 00:29:24,730 --> 00:29:28,480 strona, ponieważ nie będzie edycji rzeczywistej plik jest 595 00:29:28,480 --> 00:29:31,380 przechowywane na serwerze, ponieważ świat nie powinien mieć uprawnień 596 00:29:31,380 --> 00:29:32,610 edytować pliki. 597 00:29:32,610 --> 00:29:36,080 To jest po prostu edycji, co jest na stronie i to, co jest wyświetlane w 598 00:29:36,080 --> 00:29:36,950 Przeglądarka. 599 00:29:36,950 --> 00:29:40,340 Więc jeśli było po odświeżyć stronę, powiedzieć, usuwanie coś jak my 600 00:29:40,340 --> 00:29:44,730 zobaczyć, co możemy zrobić z wezwaniem usuń, że sprawa będzie wtedy ponownie. 601 00:29:44,730 --> 00:29:48,590 >> TOMAS REIMERS: Więc jeden sposób myślenia o to jest, czy jestem na komputerze i 602 00:29:48,590 --> 00:29:50,170 Mike jest, w pewnym sensie, serwer. 603 00:29:50,170 --> 00:29:53,850 Co się stanie, to będę zapytaj Mike, hej, mogę mieć kopię 604 00:29:53,850 --> 00:29:54,630 ta strona? 605 00:29:54,630 --> 00:29:56,190 A on da mi jego kopię. 606 00:29:56,190 --> 00:29:57,430 >> Nie, to nie jest oryginalna rzecz. 607 00:29:57,430 --> 00:29:58,620 To tylko kopia. 608 00:29:58,620 --> 00:30:00,450 I wtedy to będzie jak, och, jest obsługa JavaScript tutaj. 609 00:30:00,450 --> 00:30:02,450 Oczywiście, należy zmienić Strona tak być. 610 00:30:02,450 --> 00:30:04,250 A ja edycji kopię. 611 00:30:04,250 --> 00:30:05,920 >> Ale to nie dokonania rzeczywista kopia. 612 00:30:05,920 --> 00:30:08,480 I gdybym znowu go zapytać odśwież stronę, - 613 00:30:08,480 --> 00:30:10,060 hej, może mam inny czystej kopii - 614 00:30:10,060 --> 00:30:11,440 on da mi kolejna czysta kopia. 615 00:30:11,440 --> 00:30:14,240 A potem, mam zamiar zrobić to samo jak, och, ten mówi, że tutaj JS 616 00:30:14,240 --> 00:30:14,866 do edycji tego. 617 00:30:14,866 --> 00:30:17,460 I mam zamiar robić to. 618 00:30:17,460 --> 00:30:20,930 >> MIKE RIZZO: Tak naprawdę fajna rzecz , które można zrobić z jQuery jest 619 00:30:20,930 --> 00:30:24,350 faktycznie dodać różne rodzaje animacji na swojej stronie. 620 00:30:24,350 --> 00:30:27,440 Nie wiem, czy kiedykolwiek widział, gdzie starasz się o wypełnienie formularza 621 00:30:27,440 --> 00:30:31,250 online i nie wypełnić rzeczy prawidłowo. 622 00:30:31,250 --> 00:30:33,440 Tak mała rzecz ześlizguje u góry i mówi, że 623 00:30:33,440 --> 00:30:34,820 nie zrobić to poprawnie. 624 00:30:34,820 --> 00:30:36,260 Prosimy spróbować ponownie. 625 00:30:36,260 --> 00:30:37,890 A potem, to może nawet po prostu przesuń się. 626 00:30:37,890 --> 00:30:40,710 >> Okazuje się, jQuery ma wbudowane funkcje które sprawiają, że wszyscy 627 00:30:40,710 --> 00:30:44,180 animacja bardzo, bardzo proste. 628 00:30:44,180 --> 00:30:46,750 Więc nie jest pierwszy na blaknięcie z funkcji, które 629 00:30:46,750 --> 00:30:47,710 możesz zadzwonić na coś. 630 00:30:47,710 --> 00:30:55,650 I to jest sposób na zmianę z CSS ten element w animowanym sposób. 631 00:30:55,650 --> 00:30:58,480 Tak więc niezależnie od elementu trwa nazywasz to fade out na. 632 00:30:58,480 --> 00:31:03,990 A potem, powoli zmienia To krycie dopóki nie idzie całkowicie przezroczysty. 633 00:31:03,990 --> 00:31:07,330 >> TOMAS REIMERS: inny popularny jest zjechać w dół, co uczyni 634 00:31:07,330 --> 00:31:08,800 coś wydaje się, przesuwając go w dół. 635 00:31:08,800 --> 00:31:12,840 Tak więc w przypadku menu drop down, ponownie, gdy dowiedzieliśmy się, jak wykrywać 636 00:31:12,840 --> 00:31:15,310 kiedy to został unosił się nad, można po prostu powiedzieć to dno 637 00:31:15,310 --> 00:31:16,910 część przesuń w dół teraz. 638 00:31:16,910 --> 00:31:19,270 A potem, wydaje się, przesuwając w dół. 639 00:31:19,270 --> 00:31:22,042 640 00:31:22,042 --> 00:31:26,590 >> MIKE RIZZO: A potem, jeśli tylko mają jakiś rodzaj animacji na uwadze, że 641 00:31:26,590 --> 00:31:29,080 jQuery nie musi dostarczyć. 642 00:31:29,080 --> 00:31:32,690 Na przykład, powiedzmy, że jQuery daje Ci ze zjeżdżalnią 643 00:31:32,690 --> 00:31:33,750 w dół i przesuń w górę. 644 00:31:33,750 --> 00:31:36,740 Cóż, powiedzmy, że chcesz przesunąć coś się z lewej lub z 645 00:31:36,740 --> 00:31:39,880 prawda trochę jak CS50 strona główna robi, gdy 646 00:31:39,880 --> 00:31:42,080 idziesz do nowego panelu. 647 00:31:42,080 --> 00:31:45,030 Będziesz wtedy prawdopodobnie do wdrożyć go samodzielnie za pomocą 648 00:31:45,030 --> 00:31:49,310 funkcji animowania ciągu jQuery. 649 00:31:49,310 --> 00:31:51,350 >> Podobnie więc, po prostu animować. 650 00:31:51,350 --> 00:31:55,850 A następnie, w nim trwa Słownik różnych wartościach 651 00:31:55,850 --> 00:31:57,340 że masz się przejść. 652 00:31:57,340 --> 00:32:06,960 Więc, jeśli chcemy animować Element foo taki sposób, że jego szerokość bądź 653 00:32:06,960 --> 00:32:10,880 rozszerza lub umowy do 80 pikseli, w zależności od tego, co to jest obecnie. 654 00:32:10,880 --> 00:32:14,100 Chcemy po prostu przekazać, że jak Argument w nim. 655 00:32:14,100 --> 00:32:18,060 >> Animować też kilka innych argumentów że można przekazać go, na przykład, 656 00:32:18,060 --> 00:32:21,150 szybkość animacji że chcesz dać. 657 00:32:21,150 --> 00:32:26,220 I aby to zrobić, chciałbym tylko powiedzieć, szybko Google jQuery animować. 658 00:32:26,220 --> 00:32:31,710 A następnie, wychowywanie stronę, można zobaczyć, że ma kilka różnych 659 00:32:31,710 --> 00:32:33,560 właściwości, że można go przejść. 660 00:32:33,560 --> 00:32:35,990 >> I zachęcam was - gdy przyjdziesz na coś, że nie 661 00:32:35,990 --> 00:32:40,390 wiedzą lub po prostu chcesz dowiedzieć się więcej o zwłaszcza sposób, że można zadzwonić 662 00:32:40,390 --> 00:32:41,270 na coś - 663 00:32:41,270 --> 00:32:44,440 tylko google. jQuery jest bardzo dobrze udokumentowane. 664 00:32:44,440 --> 00:32:49,140 I często są dużo przykłady, które świadczą, że dla Ciebie. 665 00:32:49,140 --> 00:32:52,470 Jeśli będziemy przewijać - 666 00:32:52,470 --> 00:32:53,720 droga w dół - 667 00:32:53,720 --> 00:32:57,660 668 00:32:57,660 --> 00:32:59,190 że możemy użyć, jak również. 669 00:32:59,190 --> 00:33:02,480 >> Ponownie, gdy deweloper faktycznie idzie sobie trud pisania 670 00:33:02,480 --> 00:33:05,810 Biblioteka, zazwyczaj chcą ktoś go używać. 671 00:33:05,810 --> 00:33:09,400 Tak dzieje się obok być dokumentacja. 672 00:33:09,400 --> 00:33:12,270 I to zazwyczaj można dokumentacja znaleźć na stronie projektu, który jest 673 00:33:12,270 --> 00:33:14,970 dlaczego dał ci tę oryginalną witrynę w początek, który łączy do 674 00:33:14,970 --> 00:33:18,080 Strony projektu, dzięki czemu można zobaczyć, że dokumentacja. 675 00:33:18,080 --> 00:33:22,670 >> Zazwyczaj strona projektu w przypadku z [niesłyszalne], to mówiłem o 676 00:33:22,670 --> 00:33:23,940 Nazwy klas. 677 00:33:23,940 --> 00:33:27,250 W przypadku języka JavaScript, daje Ci nazwę funkcji. 678 00:33:27,250 --> 00:33:35,310 Nawiasem mówiąc, jeżeli przewijania do góry Uwaga na boczne szybki funkcji jest 679 00:33:35,310 --> 00:33:39,080 gdy widzisz funkcji realizowanych jak to się ciężko 680 00:33:39,080 --> 00:33:43,800 wsporniki w środku, to znaczy, że właściwość jest opcjonalna. 681 00:33:43,800 --> 00:33:44,750 Wystarczy się głowy. 682 00:33:44,750 --> 00:33:47,350 Widziałem wiele pytań o tym. 683 00:33:47,350 --> 00:33:50,370 >> Więc widzimy, że animacja trwa właściwości 684 00:33:50,370 --> 00:33:51,800 jako konieczny argument. 685 00:33:51,800 --> 00:33:54,870 I wszystko inne jest opcjonalne. 686 00:33:54,870 --> 00:33:56,136 Notatka - 687 00:33:56,136 --> 00:33:58,090 można myśleć o tym, sortowania o, jak strony man. 688 00:33:58,090 --> 00:34:04,275 Strony man są Dokumentacja C i na wiele innych rzeczy, jak również. 689 00:34:04,275 --> 00:34:11,020 >> MIKE RIZZO: Więc nauczyłem się zmienić inny CSS na stronie, 690 00:34:11,020 --> 00:34:14,040 animować i wyjmij dodać HTML. 691 00:34:14,040 --> 00:34:16,889 Ale jeden z naprawdę najpotężniejszym rzeczy o JavaScript 692 00:34:16,889 --> 00:34:18,270 a szczególnie jQuery - 693 00:34:18,270 --> 00:34:22,570 co pozwala zrobić to odpowiedzieć na Poszczególne elementy tego. 694 00:34:22,570 --> 00:34:25,380 Na przykład, tutaj mamy obsługi zdarzeń. 695 00:34:25,380 --> 00:34:28,210 I to po prostu oznacza, w przypadku gdy jest zdarzenie, załatwiamy to w 696 00:34:28,210 --> 00:34:29,280 pewien sposób. 697 00:34:29,280 --> 00:34:35,159 >> Więc tutaj, generic zdarzenie jQuery Ładowarka jest kropka. 698 00:34:35,159 --> 00:34:42,949 A następnie, pierwszą rzeczą, którą umieszczono Wydarzenie to jest to, co powinno 699 00:34:42,949 --> 00:34:43,810 nasłuchiwać. 700 00:34:43,810 --> 00:34:45,610 Więc, jest to, że kliknięcie czekamy. 701 00:34:45,610 --> 00:34:49,250 >> TOMAS REIMERS: Alternatywnie, można mieć przy aktywowaniu, który jest bardzo popularny. 702 00:34:49,250 --> 00:34:52,000 Wracając do mojego pomysłu rozwijanego menu. 703 00:34:52,000 --> 00:34:54,239 To masz górną jeden przy aktywowaniu. 704 00:34:54,239 --> 00:34:56,096 A następnie można zmienić. 705 00:34:56,096 --> 00:34:56,830 >> MIKE RIZZO: Prawo. 706 00:34:56,830 --> 00:35:01,680 A potem, kiedy tak się dzieje, to po prostu wykonuje tę funkcję, że dajemy mu 707 00:35:01,680 --> 00:35:05,080 jako argumentu, a ostrzega, że ​​cześć i cześć. 708 00:35:05,080 --> 00:35:08,900 >> TOMAS REIMERS: Tak więc w przypadku JavaScript, jest to miejsce, musimy 709 00:35:08,900 --> 00:35:12,970 usunąć się od C. Możemy rzeczywiście podjęcia funkcji jako argumenty. 710 00:35:12,970 --> 00:35:15,940 I istnieje wiele naprawdę skomplikowane sposoby, aby to zrobić. 711 00:35:15,940 --> 00:35:17,940 Zamierzamy promować w jedną stronę, który można zdefiniować 712 00:35:17,940 --> 00:35:19,270 funkcjonować tam. 713 00:35:19,270 --> 00:35:22,540 >> Więc kiedy pytasz o funkcji jako parametrów, jesteś w zasadzie tylko 714 00:35:22,540 --> 00:35:24,500 zamiar określenia funkcji na miejscu. 715 00:35:24,500 --> 00:35:27,090 I sposób definiowania funkcji Jest pan w JavaScript 716 00:35:27,090 --> 00:35:28,820 dosłownie powiedzieć funkcji. 717 00:35:28,820 --> 00:35:30,130 Następnie zazwyczaj nazwą funkcji. 718 00:35:30,130 --> 00:35:32,510 Ale my nigdy nie będziemy odwoływać funkcja ta ponownie. 719 00:35:32,510 --> 00:35:34,040 Więc zostaw to bezimienny. 720 00:35:34,040 --> 00:35:40,440 >> Następnie nawiasy, to kręcone szelki, a następnie kod wewnątrz tego. 721 00:35:40,440 --> 00:35:42,540 Więc rozumiem, może to być trochę mylące. 722 00:35:42,540 --> 00:35:45,180 Więc daje ogólną formę co wygląda obsługi zdarzeń 723 00:35:45,180 --> 00:35:47,790 dołu, który jest na zdarzenia. 724 00:35:47,790 --> 00:35:50,598 A następnie, że kod wewnątrz. 725 00:35:50,598 --> 00:35:52,478 >> MIKE RIZZO: Czy istnieje Pytania na ten temat? 726 00:35:52,478 --> 00:35:54,818 To może być trochę mylące pierwszy raz go zobaczyć. 727 00:35:54,818 --> 00:35:57,550 >> TOMAS REIMERS: Ty rzeczywiście chcesz otworzyć plik i pokazać im kilka 728 00:35:57,550 --> 00:35:58,155 jQuery w tej chwili? 729 00:35:58,155 --> 00:35:59,853 >> MIKE RIZZO: Tak, zróbmy to. 730 00:35:59,853 --> 00:36:00,256 OK. 731 00:36:00,256 --> 00:36:02,490 >> TOMAS REIMERS: Więc teraz jesteśmy w urządzeniu. 732 00:36:02,490 --> 00:36:07,730 I co zrobiliśmy jest podjęliśmy wolność tworzenia zarówno index.html 733 00:36:07,730 --> 00:36:10,100 Plik, który prowadzi do plik JavaScript. 734 00:36:10,100 --> 00:36:12,880 I możemy otworzyć - 735 00:36:12,880 --> 00:36:15,170 tak. 736 00:36:15,170 --> 00:36:16,630 Cóż, to dwie rzeczy. 737 00:36:16,630 --> 00:36:18,350 >> Pierwszym z nich jest to linki do plik JavaScript. 738 00:36:18,350 --> 00:36:21,250 I zobaczymy, że się tutaj. 739 00:36:21,250 --> 00:36:25,340 Widzimy, że w głowie Dokument HTML, w szczególności. 740 00:36:25,340 --> 00:36:28,260 Więc można tam zobaczyć, że my w zasadzie powiedzieć, SRC, 741 00:36:28,260 --> 00:36:29,590 co oznacza źródło. 742 00:36:29,590 --> 00:36:30,630 I to jest adres URL. 743 00:36:30,630 --> 00:36:32,700 >> Więc można powiedzieć, mamy zawarte jQuery. 744 00:36:32,700 --> 00:36:34,290 I my także skrypty. 745 00:36:34,290 --> 00:36:40,630 Innym sposobem jest włączenie JavaScript że można to skrypt inline 746 00:36:40,630 --> 00:36:44,600 Znacznik jak już w dolnej, gdzie mówi, jest tekst typu skrypt JavaScript. 747 00:36:44,600 --> 00:36:46,960 >> Więc mówisz, posłuchaj, jesteśmy o włączenie skryptu. 748 00:36:46,960 --> 00:36:51,890 I rodzaj tego skryptu jest JavaScript, który jest typu tekst. 749 00:36:51,890 --> 00:36:52,550 Bardzo proste. 750 00:36:52,550 --> 00:36:56,490 >> MIKE RIZZO: Więc to, rodzaj, dostaje się do pytanie o tym, jak m.in. 751 00:36:56,490 --> 00:37:02,340 JavaScript w naszych aktach, ponieważ kiedy nie PHP, możemy coś takiego zrobić. 752 00:37:02,340 --> 00:37:07,570 A potem, mamy swoje funkcje PHP - powiedzmy zapasy zrobić 753 00:37:07,570 --> 00:37:09,150 coś z tym - 754 00:37:09,150 --> 00:37:10,490 idzie tam. 755 00:37:10,490 --> 00:37:13,860 Jednak teraz mamy tagów skryptu że dajemy to, co w rzeczywistości 756 00:37:13,860 --> 00:37:19,470 częścią samego języka HTML, ponieważ nie jest udaje jest plik HTML, jak to 757 00:37:19,470 --> 00:37:25,070 jest w PHP, bo jeśli faktycznie go w i spojrzeć na źródło strony, 758 00:37:25,070 --> 00:37:28,430 zobaczysz te znaczniki SCRIPT tam z JavaScript związane z 759 00:37:28,430 --> 00:37:29,800 im w tym. 760 00:37:29,800 --> 00:37:31,760 >> Tak więc, jeśli chcemy napisać JavaScript - 761 00:37:31,760 --> 00:37:37,110 powiedzmy, że chcemy zmienić ciało bo teraz nie mam 762 00:37:37,110 --> 00:37:40,020 inne znaczniki, które mogę naprawdę edycji oprócz ciała. 763 00:37:40,020 --> 00:37:42,450 Powiedzmy, że chciałem zmienić CSS tego. 764 00:37:42,450 --> 00:37:46,190 Więc będziemy iść do przodu i zmiana Kolor to czerwony. 765 00:37:46,190 --> 00:37:47,380 >> Więc zapisać plik. 766 00:37:47,380 --> 00:37:52,700 Wróćmy do naszej strony internetowej, odświeżanie, i robi to automatycznie 767 00:37:52,700 --> 00:37:55,920 dlatego, że nie wydaje się, że czekał w ogóle, bo nie słuchałeś 768 00:37:55,920 --> 00:37:59,450 wydarzeń lub coś podobnego. 769 00:37:59,450 --> 00:38:02,800 >> TOMAS REIMERS: Tak, jeśli wrócimy do tego złożyć w szczególności - HTML 770 00:38:02,800 --> 00:38:04,710 plik - co masz zamiar aby zobaczyć to mamy - 771 00:38:04,710 --> 00:38:06,810 przypomnieć, że jest załadowane rodzaj, chronologicznie. 772 00:38:06,810 --> 00:38:09,910 Więc musimy najpierw głową. ładuje te dwa pliki. 773 00:38:09,910 --> 00:38:10,800 Następnie udajemy się do ciała. 774 00:38:10,800 --> 00:38:11,640 I widzimy, Hello World. 775 00:38:11,640 --> 00:38:13,030 Więc uczynić Hello World. 776 00:38:13,030 --> 00:38:15,240 >> A następnie ostatnią rzeczą mamy to mamy znacznik script. 777 00:38:15,240 --> 00:38:20,880 Tak to działa tag skryptu, ponieważ jest to Nie mówiąc to na nic czekać. 778 00:38:20,880 --> 00:38:24,700 I to jest najbardziej podstawowa sposób uruchomić JavaScript. 779 00:38:24,700 --> 00:38:29,200 >> Z powiedział, że można umieścić skrypt tag w nagłówku tylko 780 00:38:29,200 --> 00:38:31,240 pokazać ten punkt? 781 00:38:31,240 --> 00:38:34,450 782 00:38:34,450 --> 00:38:35,700 I uruchomić to. 783 00:38:35,700 --> 00:38:38,880 784 00:38:38,880 --> 00:38:41,070 Jedziemy do zauważyć, że nie zmieni koloru. 785 00:38:41,070 --> 00:38:44,210 Jest to jeden z problemów JavaScript jest to, że rzeczy są załadowane 786 00:38:44,210 --> 00:38:45,930 w porządku chronologicznym. 787 00:38:45,930 --> 00:38:49,750 >> Tak więc w tym momencie, że kod został uruchomiony, wybraliśmy - 788 00:38:49,750 --> 00:38:52,530 wrócić - 789 00:38:52,530 --> 00:38:53,670 tag ciała. 790 00:38:53,670 --> 00:38:57,560 Tag ciało jeszcze nie istnieje, ponieważ JavaScript jest zgodna z HTML. 791 00:38:57,560 --> 00:39:01,790 Więc przeglądarka jest jak select ciała. 792 00:39:01,790 --> 00:39:02,760 Jest jeszcze coś takiego. 793 00:39:02,760 --> 00:39:03,600 Więc możemy zignorować. 794 00:39:03,600 --> 00:39:05,330 A my dalej. 795 00:39:05,330 --> 00:39:07,200 >> A następnie definiujemy tag ciała. 796 00:39:07,200 --> 00:39:09,670 Ale to nigdy nie jest aktualizowany. 797 00:39:09,670 --> 00:39:12,560 Więc kiedy wdrożenie skryptu tagi, upewnij się, że miejsce 798 00:39:12,560 --> 00:39:15,502 po tagu ciała. 799 00:39:15,502 --> 00:39:16,820 Następny slajd. 800 00:39:16,820 --> 00:39:17,830 >> MIKE RIZZO: OK. 801 00:39:17,830 --> 00:39:19,330 Więc zmieniliśmy coś. 802 00:39:19,330 --> 00:39:21,910 Ale to nie wygląda tak, jak odpowiedział na nam w ogóle, bo to po prostu rodzaj 803 00:39:21,910 --> 00:39:24,150 zrobił to tak szybko, jak to załadowane strony. 804 00:39:24,150 --> 00:39:27,700 Więc teraz, zamiast robić to, dlaczego Nie możemy dodać obsługę zdarzenia. 805 00:39:27,700 --> 00:39:31,020 >> Więc zróbmy coś do korpusu ponownie. 806 00:39:31,020 --> 00:39:33,490 I powiedzmy, że robimy to na - 807 00:39:33,490 --> 00:39:34,500 kliknij. 808 00:39:34,500 --> 00:39:35,750 Dodamy funkcję. 809 00:39:35,750 --> 00:39:38,270 810 00:39:38,270 --> 00:39:39,690 >> Miejmy zmiana: Tomas Reimers to znów kolor na czerwony. 811 00:39:39,690 --> 00:39:40,000 Dlaczego nie? 812 00:39:40,000 --> 00:39:41,680 >> Zmiana Tak, niech: MIKE RIZZO jego "kolor na czerwony ponownie. 813 00:39:41,680 --> 00:39:46,310 814 00:39:46,310 --> 00:39:46,900 Dobrze. 815 00:39:46,900 --> 00:39:48,480 Warto więc odświeżyć stronę. 816 00:39:48,480 --> 00:39:49,530 OK, zobaczymy - 817 00:39:49,530 --> 00:39:52,290 zgodnie z oczekiwaniami, to nie włącza jeszcze czerwone. 818 00:39:52,290 --> 00:39:53,610 Ale to możemy iść do przodu, a następnie kliknij go. 819 00:39:53,610 --> 00:39:54,270 >> TOMAS REIMERS: I to nie zmieni się na czerwony. 820 00:39:54,270 --> 00:39:56,090 >> MIKE RIZZO: I to robi zmieni kolor na czerwony, jak oczekiwano. 821 00:39:56,090 --> 00:39:59,010 >> TOMAS REIMERS: I możemy zobaczyć, jak możemy zacząć budować bardzo podstawowe 822 00:39:59,010 --> 00:40:00,170 interakcja. 823 00:40:00,170 --> 00:40:03,850 Inne rzeczy może chcemy zrobić to, jeśli nie chcemy, aby ciało 824 00:40:03,850 --> 00:40:07,230 kolor czerwony, zróbmy HTML czerwony kolor tła. 825 00:40:07,230 --> 00:40:08,480 Tak to jest ten sam CSS. 826 00:40:08,480 --> 00:40:19,960 827 00:40:19,960 --> 00:40:23,320 >> A kiedy go zmienić, możemy to zobaczyć bardzo dramatyczny efekt zmiany 828 00:40:23,320 --> 00:40:25,510 cała strona. 829 00:40:25,510 --> 00:40:29,100 Więc znowu, jeśli rzeczy wykonawczych, możesz mieć jeden składnik 830 00:40:29,100 --> 00:40:30,150 który ma być kliknął. 831 00:40:30,150 --> 00:40:32,710 Powiedzmy przycisk Zakończ i Cały drugi składnik, 832 00:40:32,710 --> 00:40:33,830 która jest przeznaczona do reagowania. 833 00:40:33,830 --> 00:40:35,755 Więc można usunąć okno kiedy to się stanie. 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 Tylko jako przykład - 837 00:40:42,200 --> 00:40:44,400 nie udało nam się zobaczyć to wcześniej - 838 00:40:44,400 --> 00:40:47,500 Ja po prostu pokazać, jak to wygląda lubię, gdy coś ukryć. 839 00:40:47,500 --> 00:40:52,220 Więc śmiało i nie ślizgać się. 840 00:40:52,220 --> 00:40:54,440 >> TOMAS REIMERS: Chcesz zawijać, że w Typ pkt przed zrobimy? 841 00:40:54,440 --> 00:40:55,132 >> MIKE RIZZO: OK. 842 00:40:55,132 --> 00:40:59,135 Tak, dlaczego nie robimy tak możemy wybrać go trochę więcej. 843 00:40:59,135 --> 00:41:00,490 >> TOMAS Reimers: i niech to nadać jej klasę. 844 00:41:00,490 --> 00:41:01,740 >> MIKE RIZZO: Tak. 845 00:41:01,740 --> 00:41:06,575 846 00:41:06,575 --> 00:41:09,920 OK, więc zobaczymy. 847 00:41:09,920 --> 00:41:14,820 Zamiast wybierania faktyczne ciało teraz, po prostu wybierz wszystko z 848 00:41:14,820 --> 00:41:18,780 Klasa komentarzy, które tutaj tylko jedną rzecz. 849 00:41:18,780 --> 00:41:20,900 Więc nie powinno się martwić. 850 00:41:20,900 --> 00:41:23,080 >> Więc będę ją odświeżyć. 851 00:41:23,080 --> 00:41:24,230 Pójdę dalej i kliknij go. 852 00:41:24,230 --> 00:41:27,890 I to, w pewnym sensie, nie dziwne slide się coś, co nie wyglądało, że 853 00:41:27,890 --> 00:41:29,580 atrakcyjne. 854 00:41:29,580 --> 00:41:31,060 Ogólnie rzecz biorąc, to nie wygląda całkiem ładnie. 855 00:41:31,060 --> 00:41:32,720 Myślę, że to - dla niektórych Powód - nie. 856 00:41:32,720 --> 00:41:36,640 Ja po prostu zrobić tak Fade Out można spojrzeć na to zbyt. 857 00:41:36,640 --> 00:41:38,100 O wiele ładniejsza. 858 00:41:38,100 --> 00:41:41,150 >> A potem, jeśli otwarcie JavaScript pocieszyć ponownie i chcemy zobaczyć, co 859 00:41:41,150 --> 00:41:43,900 wygląda na to, kiedy znikną go w. 860 00:41:43,900 --> 00:41:46,920 Teraz, po prostu zadzwoń blakną na nim. 861 00:41:46,920 --> 00:41:48,830 I zanika widok 862 00:41:48,830 --> 00:41:56,150 >> Podobnie, możemy faktycznie również przekazać Argument zanikać lub fade out, 863 00:41:56,150 --> 00:41:57,640 który jest typu, prędkość niego. 864 00:41:57,640 --> 00:42:02,220 Więc śmiało powiedzieć, że chcemy to iść powoli zanikać w. 865 00:42:02,220 --> 00:42:04,250 Więc myślę, że to nadal wydawało dość szybko. 866 00:42:04,250 --> 00:42:06,180 Ale to był wolniejszy niż wcześniej. 867 00:42:06,180 --> 00:42:10,340 >> TOMAS REIMERS: A jeśli chcesz znaleźć Więcej informacji na temat tych rzeczy, znowu, 868 00:42:10,340 --> 00:42:13,410 po prostu pójść do dokumentacji jQuery, które daliśmy wam i czytaj 869 00:42:13,410 --> 00:42:13,735 przez nich. 870 00:42:13,735 --> 00:42:15,790 Dokumentują oni swoje funkcje bardzo dobrze. 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 Więc myślę, wracajmy do tego. 874 00:42:21,560 --> 00:42:23,490 I możemy mówić o naszej ostatniej stronie. 875 00:42:23,490 --> 00:42:24,690 Cóż, możemy skończyć z Bootstrap. 876 00:42:24,690 --> 00:42:27,140 A potem będziemy go otworzyć na niektóre pytania. 877 00:42:27,140 --> 00:42:30,180 A jeśli macie jakieś pomysły, które chcesz spróbować rzucić się i patrz 878 00:42:30,180 --> 00:42:34,150 czy możemy wdrożyć je JavaScript szybko. 879 00:42:34,150 --> 00:42:37,890 >> Więc bardzo szybko o Bootstrap, który została automatycznie włączone 880 00:42:37,890 --> 00:42:41,700 Twój ostatni problem ustawić w folderze CSS i faktycznie połączone w swoje 881 00:42:41,700 --> 00:42:43,190 header.php. 882 00:42:43,190 --> 00:42:46,740 Więc można klas, które zostały dodane Bootstrap są zdefiniowane w nim. 883 00:42:46,740 --> 00:42:50,490 I to byłby automatycznie stylu te rzeczy się odpowiednio. 884 00:42:50,490 --> 00:42:54,550 >> TOMAS REIMERS: Więc jest bardzo Bootstrap magiczna rzecz stworzona przez ludzi 885 00:42:54,550 --> 00:42:55,340 na Twitterze. 886 00:42:55,340 --> 00:42:57,230 I co to miał zrobić, to - 887 00:42:57,230 --> 00:43:00,740 przed strony naprawdę ciężko, aby wyglądają ładnie, zwłaszcza gdy mieliśmy 888 00:43:00,740 --> 00:43:02,200 wiele wspólnych elementów. 889 00:43:02,200 --> 00:43:04,770 Tak wiele przycisków internetowej wyglądał tak samo. 890 00:43:04,770 --> 00:43:08,960 >> Wiele pól tekstowych mogą być wykonane do wyglądają lepiej niż standardowy tekst 891 00:43:08,960 --> 00:43:13,620 Pole pewnie wiesz od bardzo Stare strony internetowe lub bardzo słabo wykonane 892 00:43:13,620 --> 00:43:18,210 strony internetowe, które tylko wyglądają jak dosłowne pola tekstowe bez jakiejkolwiek formie tekstu 893 00:43:18,210 --> 00:43:21,190 cień lub wszelkiego rodzaju miłej zarysie. 894 00:43:21,190 --> 00:43:24,540 Więc co Bootstrap nie było powiedziane, dobrze, Mamy wiele wspólnych stylów. 895 00:43:24,540 --> 00:43:28,210 Dlaczego nie zrobić jeden wspólny zestaw CSS i wspólny zestaw JavaScriptu 896 00:43:28,210 --> 00:43:32,210 dobrze, co może projektować je tak jest i który może dać ludziom takie rzeczy jak spadek 897 00:43:32,210 --> 00:43:34,610 w dół menu, które może dać ludziom rzeczy, jak czasowniki modalne. 898 00:43:34,610 --> 00:43:38,580 >> Modal jest to, co pojawia się na stronie gdy jest to ściśle rzecz biorąc 899 00:43:38,580 --> 00:43:41,090 coś, co hamuje dalszy interakcja, dopóki nie 900 00:43:41,090 --> 00:43:43,110 współdziałają z nim. 901 00:43:43,110 --> 00:43:45,820 Coś w tym jest, to na pewno chcesz usunąć tę rzecz? 902 00:43:45,820 --> 00:43:49,100 Naprawdę nie można zrobić nic innego dopóki nie powiedzieć tak lub nie. 903 00:43:49,100 --> 00:43:52,720 >> Zajęło to wszystko i pakuje go razem i powiedział, jedziemy. 904 00:43:52,720 --> 00:43:54,630 Ludzie mogą teraz korzystać z tego. 905 00:43:54,630 --> 00:43:56,830 I można go znaleźć na w getbootstrap.com. 906 00:43:56,830 --> 00:44:00,480 Został on automatycznie objęte ustawić twój ostatni problem. 907 00:44:00,480 --> 00:44:04,160 I jesteś bardziej niż mile widziane używać go na końcowym projektu. 908 00:44:04,160 --> 00:44:06,950 A jeśli chcesz iść, że aby pobrać startowej. 909 00:44:06,950 --> 00:44:10,590 910 00:44:10,590 --> 00:44:15,700 >> Zobaczysz tu jest Bootstrap witryny CSS. 911 00:44:15,700 --> 00:44:16,860 Zobaczysz startowej. 912 00:44:16,860 --> 00:44:20,450 A jeśli przewijać, zobaczysz jak go ściągnąć, jak 913 00:44:20,450 --> 00:44:21,900 zainstalować go, et cetera. 914 00:44:21,900 --> 00:44:24,700 >> MIKE RIZZO: A można też, Co ciekawe, dostosować go do 915 00:44:24,700 --> 00:44:27,770 się niezależnie od rodzaju tematów że chcesz. 916 00:44:27,770 --> 00:44:31,270 Wiem, że coś zrobiłem dla mojego Ostateczny projekt, gdy wziąłem klasę 917 00:44:31,270 --> 00:44:32,050 było go dostosować. 918 00:44:32,050 --> 00:44:34,540 Inna wersja Bootstrap, że miał inny schemat kolorów i 919 00:44:34,540 --> 00:44:36,700 Różne kształty niektórych różne rzeczy. 920 00:44:36,700 --> 00:44:38,250 Tak więc zachęcam do zabawy z tym. 921 00:44:38,250 --> 00:44:39,440 To rodzaj zabawy zrobić. 922 00:44:39,440 --> 00:44:43,230 >> TOMAS REIMERS: Patrząc na górze ponownie, jest to bardzo podobne do Font 923 00:44:43,230 --> 00:44:44,970 Niesamowite miejsce. 924 00:44:44,970 --> 00:44:47,810 Wiele dokumentacji rozpocznie wydawać się podobne, gdy masz 925 00:44:47,810 --> 00:44:48,940 widziałem dosyć. 926 00:44:48,940 --> 00:44:51,260 Więc tutaj mamy CSS elementem tego. 927 00:44:51,260 --> 00:44:53,540 , A zobaczysz, jak to Można projektować rzeczy. 928 00:44:53,540 --> 00:44:56,780 Więc jeśli klikniesz na stołach, na przykład, można tam zrobić 929 00:44:56,780 --> 00:45:01,710 Tabela całkiem po prostu dodając Tabela klasy do niego. 930 00:45:01,710 --> 00:45:03,150 >> Same rzeczy dla przycisków. 931 00:45:03,150 --> 00:45:12,140 Jeśli po prostu dodać klasę BTN i BTN domyślnych lub BTN podstawowym, można 932 00:45:12,140 --> 00:45:16,240 dostać jeden z tych przycisków z tych gotowych stylów. 933 00:45:16,240 --> 00:45:18,570 A potem, jeśli szukasz coś bardziej skomplikowane niż po prostu 934 00:45:18,570 --> 00:45:24,100 restyling co w już, w ciągu dnia Zakładka JavaScript w całej górnej my 935 00:45:24,100 --> 00:45:25,120 mają kilka elementów. 936 00:45:25,120 --> 00:45:30,410 >> Więc tutaj mamy przejść, czasowniki modalne, Dropdowns, zakładki i podpowiedzi. 937 00:45:30,410 --> 00:45:35,530 Podpowiedź, co pojawia się pod twoim po najechaniu kursorem myszy na coś. 938 00:45:35,530 --> 00:45:40,280 Popovers, alerty, przyciski, składany akordeony, co 939 00:45:40,280 --> 00:45:41,190 są one zwykle nazywane. 940 00:45:41,190 --> 00:45:43,045 Karuzele, które klapka przez takich jak obrazy. 941 00:45:43,045 --> 00:45:52,190 942 00:45:52,190 --> 00:45:54,840 >> To są elementy z Bootstrap. 943 00:45:54,840 --> 00:45:57,620 Chciałbym zachęcić was do bardzo go patrzeć. 944 00:45:57,620 --> 00:46:01,780 Jest składnikiem JavaScript i składnik CSS. 945 00:46:01,780 --> 00:46:03,880 Zapraszam do korzystania z nich, jak chcesz. 946 00:46:03,880 --> 00:46:06,730 Nie zamierzamy iść w nich zbyt wiele ponieważ czujemy się z dokumentacją 947 00:46:06,730 --> 00:46:09,360 jest naprawdę dobrze zrobione. 948 00:46:09,360 --> 00:46:10,540 I tak. 949 00:46:10,540 --> 00:46:14,500 Czy masz jakieś pytania dotyczące tego? 950 00:46:14,500 --> 00:46:19,430 >> MIKE RIZZO: Więc jak to naprawdę szybkie z boku, projekt strony internetowej, 951 00:46:19,430 --> 00:46:21,830 szybko ułożyła dla Niniejsza prezentacja jest 952 00:46:21,830 --> 00:46:24,290 rzeczywiście zrobić za pomocą startowej. 953 00:46:24,290 --> 00:46:27,810 Jak widać, po kliknięciu na nich różne karty, nigdy nie jesteśmy w rzeczywistości 954 00:46:27,810 --> 00:46:30,750 pozostawiając tę ​​bieżącą stronę index.html. 955 00:46:30,750 --> 00:46:36,400 Tak więc to, co mamy, jest różne DIV w tym index.html. 956 00:46:36,400 --> 00:46:39,610 A potem, gdy klikamy różne Zakładka, to tylko zmiana 957 00:46:39,610 --> 00:46:41,590 Który z nich jest pokaz. 958 00:46:41,590 --> 00:46:47,390 >> Więc odpowiednio pozycjonuje je, zmienia HTML strony, aby 959 00:46:47,390 --> 00:46:52,330 Zakładka prąd jest oznaczona jako aktywna tak wydaje się inaczej i wygląd 960 00:46:52,330 --> 00:46:52,820 naprawdę ładne. 961 00:46:52,820 --> 00:46:57,260 >> TOMAS REIMERS: Tak, że wszystko było zrobione bez nas pisanie niemal każdego CSS. 962 00:46:57,260 --> 00:47:01,440 Widzimy także nagłówek na górze, które kolory są przez nas. 963 00:47:01,440 --> 00:47:04,800 Jednakże rzeczywiste umieszczenie go na do góry strony i dokonywania 964 00:47:04,800 --> 00:47:06,660 to przewijania był startowej. 965 00:47:06,660 --> 00:47:09,720 A potem nawet do innej biblioteki - to nie jest jednym rozmawialiśmy ale 966 00:47:09,720 --> 00:47:11,580 możesz Google, jeśli chcesz. 967 00:47:11,580 --> 00:47:15,130 Nazywa się to prettify.js. 968 00:47:15,130 --> 00:47:20,650 I to podświetlanie składni kodu ci z wykorzystaniem zarówno CSS i JavaScript. 969 00:47:20,650 --> 00:47:23,480 970 00:47:23,480 --> 00:47:27,070 >> Ostatnią rzeczą, chcemy mówić o Zanim wydamy cię w 971 00:47:27,070 --> 00:47:30,620 świat szukać w bibliotekach, aby dowiedzieć się, jak z nich korzystać i, miejmy nadzieję, 972 00:47:30,620 --> 00:47:34,640 przeczytaj dokumentację i znaleźć to, czego Potrzeba jest, jak znaleźć bibliotek. 973 00:47:34,640 --> 00:47:37,000 Więc pierwsze jesteśmy tylko będzie naciskać Google. 974 00:47:37,000 --> 00:47:37,810 Idź Google. 975 00:47:37,810 --> 00:47:41,150 >> To jest dosłownie to, co robimy, gdy trzeba coś zrobić to my Google. 976 00:47:41,150 --> 00:47:44,730 Czy jest biblioteką JavaScript, która pozwala mi manipulować czasem w 977 00:47:44,730 --> 00:47:45,400 skuteczny sposób? 978 00:47:45,400 --> 00:47:49,510 Tak więc, jeśli wiem, że niektóre stworzenia użytkownika konto tutaj, i to 979 00:47:49,510 --> 00:47:53,010 aktualny czas, w jaki sposób można obliczyć Różnica z tym bez konieczności 980 00:47:53,010 --> 00:47:55,020 obliczyć to sam? 981 00:47:55,020 --> 00:47:59,630 Więc to jest rzeczywiście coś wspólnego, JavaScript biblioteka czas. 982 00:47:59,630 --> 00:48:02,440 I tu Moment.js-- najbardziej popularny. 983 00:48:02,440 --> 00:48:06,530 >> Jeśli potrzebujemy biblioteki do manipulowania coś jak kolor, aby móc 984 00:48:06,530 --> 00:48:08,650 wygenerować kilka losowych kolorów - 985 00:48:08,650 --> 00:48:10,660 ewentualnie, w celu wytworzenia styl lub coś - 986 00:48:10,660 --> 00:48:13,480 możemy coś jak Google JavaScript biblioteki kolorów. 987 00:48:13,480 --> 00:48:15,620 I jestem pewien, że pojawi się z tysiąc i jeden z nich. 988 00:48:15,620 --> 00:48:18,290 989 00:48:18,290 --> 00:48:21,410 Zapraszamy do zapoznanie się z nimi. 990 00:48:21,410 --> 00:48:24,610 >> Tak więc większość rzeczy - kiedy je znaleźć - będą znajdować się na jednym z 991 00:48:24,610 --> 00:48:25,920 Kod miejsca, które gospodarz. 992 00:48:25,920 --> 00:48:26,960 Są kilka popularne. 993 00:48:26,960 --> 00:48:30,870 Najbardziej popularne, przez daleko, jest github.com. 994 00:48:30,870 --> 00:48:35,300 I jeśli pójdziesz do GitHub to faktycznie gdzie normalizacja była gospodarzem. 995 00:48:35,300 --> 00:48:36,950 Tak więc, jeśli chcesz wrócić do tego. 996 00:48:36,950 --> 00:48:38,135 Pokaż im, że. 997 00:48:38,135 --> 00:48:40,516 >> MIKE RIZZO: I to jest naprawdę, gdzie to jest na serwerze też, jeśli zauważyłeś. 998 00:48:40,516 --> 00:48:41,000 >> TOMAS REIMERS: Tak. 999 00:48:41,000 --> 00:48:49,078 Więc jeśli pójdziesz do normalizacji i przejść do GitHub. 1000 00:48:49,078 --> 00:48:51,936 Było to, że? 1001 00:48:51,936 --> 00:48:54,620 >> MIKE RIZZO: To trochę kota rzeczą jest symbolem GitHub. 1002 00:48:54,620 --> 00:48:56,330 >> TOMAS REIMERS: Och. 1003 00:48:56,330 --> 00:49:02,180 Więc GitHub wykorzystuje metodę o nazwie Git do kodu sklepu. 1004 00:49:02,180 --> 00:49:05,150 Czy nie wiesz, co to jest lub to cię przeraża, to w porządku. 1005 00:49:05,150 --> 00:49:16,100 Nie musisz wiedzieć, co jest git ponieważ GitHub ma przycisk Pobierz 1006 00:49:16,100 --> 00:49:17,200 w prawym dolnym rogu. 1007 00:49:17,200 --> 00:49:21,350 >> Inne przydatne rzeczy wiedzieć o GitHub jest większość produktów 1008 00:49:21,350 --> 00:49:23,200 będzie musiał mnie czytać. 1009 00:49:23,200 --> 00:49:25,400 A jeśli nie masz strony internetowej, czytaj mi opowie o tym, jak 1010 00:49:25,400 --> 00:49:28,310 zainstalować go, jak go używać, co to robi, et cetera, et cetera, et cetera. 1011 00:49:28,310 --> 00:49:31,033 Co mamy w zasadzie było was przez. 1012 00:49:31,033 --> 00:49:32,326 >> MIKE RIZZO: Rzuca Internet jest. 1013 00:49:32,326 --> 00:49:34,020 >> TOMAS REIMERS: To dobrze. 1014 00:49:34,020 --> 00:49:36,980 Ostatnie dwie rzeczy, które chcieliśmy mówić o - 1015 00:49:36,980 --> 00:49:38,750 rozmawialiśmy o Git - 1016 00:49:38,750 --> 00:49:40,290 jest rozwiązywanie problemów. 1017 00:49:40,290 --> 00:49:43,020 I to nie jest tak istotne dla Produkt końcowy, jak to jest 1018 00:49:43,020 --> 00:49:44,870 po opuszczeniu 50. 1019 00:49:44,870 --> 00:49:48,310 A gdy napotkasz produktów wykonawczych bibliotek lub wykonawczych 1020 00:49:48,310 --> 00:49:50,230 swój projekt, będziesz mają pytania lub jesteś 1021 00:49:50,230 --> 00:49:51,660 będzie wyglądać na pytania. 1022 00:49:51,660 --> 00:49:53,060 >> Ponownie, to google. 1023 00:49:53,060 --> 00:49:54,630 To jest dosłownie tym, co robimy. 1024 00:49:54,630 --> 00:49:56,400 To zabrzmi głupio. 1025 00:49:56,400 --> 00:49:58,310 Ale dosłownie, że Google to. 1026 00:49:58,310 --> 00:50:01,810 I znowu, jedną z pierwszych miejscach będziesz zazwyczaj jest prowadzony w 1027 00:50:01,810 --> 00:50:06,550 stackoverflow.com, który jest wspaniałym pytanie i odpowiedź widok. 1028 00:50:06,550 --> 00:50:10,530 >> To wspaniałe, bo można zarówno odpowiedzieć na pytania i szukać 1029 00:50:10,530 --> 00:50:12,760 odpowiedzi, ale także dlatego już zawiera dużo 1030 00:50:12,760 --> 00:50:14,590 wstępnie wypełnione treści tam. 1031 00:50:14,590 --> 00:50:18,510 Tak zazwyczaj, gdy Google jest programowanie pierwsze pytanie w ciągu 1032 00:50:18,510 --> 00:50:22,620 para uderza można już uruchomić w tym czasie swoich zbiorów problemowych. 1033 00:50:22,620 --> 00:50:27,840 >> A następnie, ostatnio bardzo krótki, co jest JSFIDDLE, który jest - dziś mamy 1034 00:50:27,840 --> 00:50:32,110 robi dużo pracy z JavaScript HTML CSS. 1035 00:50:32,110 --> 00:50:39,820 JSFIDDLE jest aplikacją internetową, która w zasadzie pozwala na wykonanie kodu HTML, twój 1036 00:50:39,820 --> 00:50:42,820 JavaScript dolny lewy, i Twój CSS na górze po prawej. 1037 00:50:42,820 --> 00:50:47,840 A następnie może stworzyć szybkie renderowanie z nich i zobaczyć, jak to oddziałuje. 1038 00:50:47,840 --> 00:50:50,500 Jest to bardzo przydatne, gdy ludzie próbują zrobić dowód pojęcie jak 1039 00:50:50,500 --> 00:50:52,910 to jak byś zrobić rozwijane menu. 1040 00:50:52,910 --> 00:50:54,980 Może szybkie Odkryć lub cokolwiek. 1041 00:50:54,980 --> 00:50:56,560 >> MIKE RIZZO: Więc chodźmy przed i kliknij to. 1042 00:50:56,560 --> 00:50:57,820 Szybka uwaga - 1043 00:50:57,820 --> 00:51:00,430 mając na uwadze, zanim byliśmy robi na kliknięcia. 1044 00:51:00,430 --> 00:51:04,380 Okazuje Korea JCorey posiada również wbudowany w procedurze obsługi zdarzenia click, że 1045 00:51:04,380 --> 00:51:07,020 używa tylko dlatego, że rysunki jesteś będzie chciał zrobić wiele rzeczy, 1046 00:51:07,020 --> 00:51:08,410 jeśli chcesz kliknij coś. 1047 00:51:08,410 --> 00:51:09,690 >> Podobnie ma też hover. 1048 00:51:09,690 --> 00:51:12,850 Jednak, aby uzyskać pełny zakres ci, spójrz na jQuery 1049 00:51:12,850 --> 00:51:15,320 Dokumentacja i to zrobić. 1050 00:51:15,320 --> 00:51:18,760 Zrobiłem coś głupiego tutaj. 1051 00:51:18,760 --> 00:51:21,490 >> TOMAS REIMERS: Więc mam bardzo szybkie Program tutaj, które mówi, 1052 00:51:21,490 --> 00:51:22,640 przycisk na kliknięcie. 1053 00:51:22,640 --> 00:51:23,890 Następnie mamy do pętli. 1054 00:51:23,890 --> 00:51:26,810 Dla i jest mniejsza niż 404. 1055 00:51:26,810 --> 00:51:29,530 To po prostu się do pop-up Te komunikaty ostrzegawcze. 1056 00:51:29,530 --> 00:51:33,425 >> MIKE RIZZO: A co było Kod 404 stał w HTML? 1057 00:51:33,425 --> 00:51:34,145 Czy ktoś pamięta? 1058 00:51:34,145 --> 00:51:35,450 Nie znaleziono, prawda. 1059 00:51:35,450 --> 00:51:38,640 1060 00:51:38,640 --> 00:51:40,885 Chrome dodaje również to schludny co, gdzie można - 1061 00:51:40,885 --> 00:51:43,430 >> TOMAS REIMERS: Bo ludzie jak Mike zaczął robić to dużo i 1062 00:51:43,430 --> 00:51:47,230 irytujące użytkowników, co pozwala , aby zobaczyć informacje. 1063 00:51:47,230 --> 00:51:48,286 >> MIKE RIZZO: Tak. 1064 00:51:48,286 --> 00:51:50,690 >> TOMAS REIMERS: Czy mamy jakieś pytania o tym, o JavaScript 1065 00:51:50,690 --> 00:51:53,420 biblioteki, biblioteki, lub znalezienie wygląd, co tworzenie stron internetowych 1066 00:51:53,420 --> 00:51:55,400 jak w świecie rzeczywistym? 1067 00:51:55,400 --> 00:51:56,880 Kończy nam się z czasem. 1068 00:51:56,880 --> 00:52:00,400 Więc nie jestem pewien, że będziemy mieć czas na wdrożenie 1069 00:52:00,400 --> 00:52:02,290 chyba że jest to naprawdę szybkie. 1070 00:52:02,290 --> 00:52:04,580 Jesteśmy dobrze? 1071 00:52:04,580 --> 00:52:08,110 >> MIKE RIZZO: wszystko, co faceci chcieliby zobaczyć naprawdę szybkie w, jak dwa 1072 00:52:08,110 --> 00:52:09,556 minut lub mniej? 1073 00:52:09,556 --> 00:52:10,870 >> TOMAS REIMERS: Wszystko możemy wyjaśnić? 1074 00:52:10,870 --> 00:52:12,500 Jak pisać - 1075 00:52:12,500 --> 00:52:13,260 >> PUBLICZNOŚCI: [niesłyszalne]? 1076 00:52:13,260 --> 00:52:16,070 >> MIKE RIZZO: Tak, tak that's - 1077 00:52:16,070 --> 00:52:18,065 >> TOMAS REIMERS: Możesz po prostu naciśnij Control-U na stronie internetowej. 1078 00:52:18,065 --> 00:52:19,275 >> MIKE RIZZO: Och, nie wiedziałem, że. 1079 00:52:19,275 --> 00:52:22,290 >> TOMAS REIMERS: Myślę, że tak. 1080 00:52:22,290 --> 00:52:23,300 Control-U. Tak. 1081 00:52:23,300 --> 00:52:25,970 >> MIKE RIZZO: Och, tak, to jest kod na stronie. 1082 00:52:25,970 --> 00:52:29,580 Ale jeśli rzeczywiście chcą ściągnąć nasze plików i wszystko, jest gospodarzem 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 imię - 1085 00:52:34,850 --> 00:52:38,504 Tomas Reimers - ukośnik Seminarium CS50 myślnik. 1086 00:52:38,504 --> 00:52:40,710 >> MIKE RIZZO: I można wszystko tam. 1087 00:52:40,710 --> 00:52:42,310 >> TOMAS REIMERS: To jest to, co GitHub Wygląda na to, przy okazji. 1088 00:52:42,310 --> 00:52:44,910 Więc znowu, gdy widzisz otwartego źródła Projekt, zazwyczaj, będą czytać 1089 00:52:44,910 --> 00:52:45,950 mi tam, że można odczytać. 1090 00:52:45,950 --> 00:52:50,200 A jeśli wrócisz, można zauważyć, że masz zip do pobrania, które będą 1091 00:52:50,200 --> 00:52:52,130 pozwala pobrać źródła Kod do włączenia 1092 00:52:52,130 --> 00:52:53,666 Produkt w swoim własnym rzeczy. 1093 00:52:53,666 --> 00:52:56,890 >> MIKE RIZZO: Tak, a jeśli po prostu kliknij na index.html bardzo szybko - 1094 00:52:56,890 --> 00:52:59,180 >> TOMAS REIMERS: Zobaczysz tutaj Kod źródłowy dla naszej strony internetowej. 1095 00:52:59,180 --> 00:53:02,016 1096 00:53:02,016 --> 00:53:06,070 >> MIKE RIZZO: Również zapomniałem wcisnąć prawy zanim z wielkim stole to 1097 00:53:06,070 --> 00:53:09,860 włączone, ale jest tam również tabela z chmods że zawarte 1098 00:53:09,860 --> 00:53:13,210 tylko dla jasności. 1099 00:53:13,210 --> 00:53:16,940 Ale jeśli przewiń w dół, aby dno, nie faktycznie bardzo 1100 00:53:16,940 --> 00:53:21,160 wiele z JavaScript rzeczy w ogóle się z tym. 1101 00:53:21,160 --> 00:53:26,610 To wyłącznie od wszystkiego jeszcze, że mieliśmy. 1102 00:53:26,610 --> 00:53:28,730 >> Więc dziękuję wam za przybycie i słuchania. 1103 00:53:28,730 --> 00:53:29,830 Mamy nadzieję, że to był bardzo pomocny. 1104 00:53:29,830 --> 00:53:33,020 Jeśli masz jakiekolwiek JavaScript powiązany pytania lub po prostu chcesz porozmawiać o 1105 00:53:33,020 --> 00:53:36,240 co innego jak to, co innych fajnych rzeczy można to zrobić za pomocą JavaScript, chcielibyśmy 1106 00:53:36,240 --> 00:53:37,186 z tobą porozmawiać. 1107 00:53:37,186 --> 00:53:40,010 >> TOMAS REIMERS: Jeśli masz pytanie o projekcie lub jeśli może to być 1108 00:53:40,010 --> 00:53:42,740 istotne, będziemy prawdopodobnie trzymać się Trochę po tym. 1109 00:53:42,740 --> 00:53:44,640 Ale poza tym, mają udany weekend. 1110 00:53:44,640 --> 00:53:45,845 >> MIKE RIZZO: Tak, cieszyć. 1111 00:53:45,845 --> 00:53:46,120 Do zobaczenia. 1112 00:53:46,120 --> 00:53:47,370 >> TOMAS REIMERS: Do zobaczenia. 1113 00:53:47,370 --> 00:53:47,926