TOMAS REIMERS: Cześć wszystkim. Nazywam się Tomas Reimers. MIKE RIZZO: Jestem Mike Rizzo. TOMAS REIMERS: Jesteśmy dwa CS50s TS. A dziś jesteśmy wiodącym seminarium JavaScript i CSS w aplikacjach internetowych. Jeśli chcesz podążać, link jest tam. I chcesz umieścić go na krótko komputer? Jest ogniwem. To małe miejsce, które ma powiązania z wszystkie zasoby Zamierzamy być wskazując cię dzisiaj, a także posiada wiele przydatne informacje napisane przez nas czytaj więcej w głębi, kiedy wrócisz, i starasz się przypomnieć sobie, co dokładnie nie możemy powiedzieć, co było mówisz, et cetera. MIKE RIZZO: W porządku. Więc zacznijmy. TOMAS REIMERS: Więc chcesz zacząć? OK. MIKE RIZZO: Tak. Więc najpierw chciałem zacząć szeroka Informacje o Internecie i typów plików przy projektowaniu stron internetowych. Podczas tej prezentacji chcemy, aby dostać się do dużo dużo JavaScript później, chcieliśmy zacząć od tak, jakby, jak widok z lotu ptaka o co strona jest i jak myśleć o projektowaniu strona początku. Więc chłopaki, w tym momencie - z tego jest piątek - powinny mieć składać się z CS50 finansów Problem ustawia. Miejmy nadzieję, że był to dobry smak co do programowania stron internetowych może być. Ale tutaj chcemy, rodzaju, dają jesteś inny smak, jak również. TOMAS REIMERS: Więc po prostu podsumować to, co się dzieje, po wpisaniu w adresie URL do Twoja przeglądarka, która pobiera adres URL spojrzał w komputerze. A komputer jest podłączony do innego komputera którego gospodarzem tej stronie. OK, więc, gdy idziesz do google.com, jesteś podłączone do jednego z Google'a komputery, które nie Pliki do google.com. Następnie prosi o określonym pliku. Więc jeśli przejść do - Nie wiem - example.com / index.html lub / test.html, masz zamiar poprosić o że określony plik. I serwer www dzieje , aby powrócić do Ciebie. Następnie, po przejściu przez tego pliku - raz jesteś, że komputer staje się plik - to się do początku zbudować stronę internetową. Więc teraz ma plik HTML, która jest trochę jak Struktura strony internetowej. Plik HTML może również odwołać Pliki CSS, które definiują Styl strony. Pliki JavaScript, które definiuje interakcja ze strony internetowej. Pliki graficzne, które są tylko zdjęcia. I ewentualnie link do innych plików HTML, które można następnie odwiedzić. MIKE RIZZO: OK, świetnie. Więc macie wszystko, być może, starannie skonfigurować hosta lokalnego na maszynie wirtualnej. I to właśnie, niby, jest miejscowy domeny, które odbywają się tylko komputer ci na własny adres IP. W terminie, który, można dodać do niego własne strony internetowe. To znaczy, w CS50 Finansów, należy mieć Dodano kilka stron HTML, które są, rodzaj, zawinięte w owijki PHP. Ale ostatecznie, co strona PHP zostały wyprowadzania był HTML. Ale myśli powrót do początku z pset musieliśmy ustawić uprawnienia na wszystko, prawda? Więc to po prostu w zasadzie mówi nam którzy mogą czytać, pisać, a może wykonanie każdego z plików. Więc mamy zamiar zrobić szybki - hm? TOMAS REIMERS: Więc idziemy aby zrobić szybkie demo. Więc po prostu przypomnieć, kiedy podłączenie do komputera przez Google - kto - i najpierw poprosić o pliku, komputer musi upewnić się, że uprawniony faktycznie zobaczyć, że plik lub przeczytać, że pliku, ponieważ nie można po prostu zapytać dla każdego pliku na tym komputerze, prawda? To byłoby zagrożenie bezpieczeństwa. Więc pliki na systemach, których używamy, jak To urządzenie CS50, mają trzy ogólnie ludzie, którzy mogą mieć uprawnienia do czegoś. Pierwsze rzeczywiste Właściciel wspomnianego pliku. Druga grupa, która jest plik pochodzi. Nie zamierzamy się skupić zbyt wiele na ten temat. I ostatnia rzecz, rodzaju, jak świat i tak jak wszyscy, kto jest nie specyficzne dla tego pliku i nie mają żadnych praw własności do niej. Więc jeśli mamy właściciela, grupy, a potem świat. A więc, dla każdej z tych grup można może mieć jedną z trzech uprawnień, OK lub wielu z nich. Możesz mieć uprawnienia do odczytu. Możesz mieć odpowiednie uprawnienia. I można mieć uprawnienia do wykonywania. Tak pod względem faktycznym typów plików, przeczytaj pozwolenie jest jak faktycznie czytanie zawartość pliku. Jest zezwolenie na piśmie prawo do wspomnianego pliku. Uprawnienie Execute działa pliku, podobnie jak to zrobić po uruchomieniu jednego z Twoje projekty CS50. Tak więc, gdy myślimy o plikach jak wtedy, gdy musimy przeczytać HTML Plik, który musi być świat czytelne, prawda? Przypuszczalnie, także właściciel chce aby móc edytować ten plik. Więc właściciel będzie potrzebował uprawnienia do odczytu i zapisu. Oni naprawdę nie trzeba wykonywać. Grupa, będziemy traktować same, jak na świecie teraz. Więc potrzebują uprawnień do odczytu. Ale nie trzeba pisać lub uprawnienia do wykonywania. A teraz, jeśli uważamy, że powrót do byłego PSETs, co my sobie sprawę, jest to rodzaj z wyglądać dwójkowy, prawda? 1 oznacza tak. 0 na nie. I rzeczywiście możemy tłumaczyć to binarny. Więc 110 binarnie będzie 6. 100 będzie 4. Podobnie jest z świata. Więc liczba dostaniemy za uprawnienia do tego będzie 644. MIKE RIZZO: A jeśli uważasz, że powrót do kiedy chmoded coś, wierzę dali się problemu ustawić przykładem, gdzie można zrobić coś jak chmod 644 , a następnie nazwę pliku. 644, a następnie, można teraz zobaczyć bezpośrednio jeżeli pochodzi. Więc mam nadzieję, że sprawia, że trochę bardziej jasne. A następnie dla jasności ciebie faceta - och tak, tutaj jest to ponownie. Więc 600 to będzie tylko przykładem daliśmy się tutaj, gdzie właściciel ma Przeczytałem natomiast grupa prawy uprawnienia i świat nie mają żadnych uprawnień aby uzyskać dostęp do pliku. TOMAS REIMERS: I wtedy mamy szybkie Lista wspólnych uprawnień. Tak katalogi, chcesz faktycznie chmod 711. Krótki bok - do katalogu, aby mieć pozwolenie wykonywalny oznacza móc , aby otworzyć katalog. Obrazy, CSS, JavaScript, HTML potrzeb 644, ponieważ, w zasadzie, świat Potrzeby uprawnienia do odczytu. I PHP, które wy widzieliście mimo, że nie będą o tym mówić ściśle z typowo chmoded Uprawnienie 600, ponieważ jest prowadzony z uprawnienia właściciela. Przynajmniej na urządzeniu. MIKE RIZZO: Więc nie, jeśli nie specjalnie określić, jaki typ pliku chcesz w rzeczywistości ustawienie do prezentacji - mieliśmy z tym problem, ponieważ wszystko nie chmoded poprawnie - ty dostaniesz, rodzaj, zabronione błąd, że strona w rzeczywistości nie ma uprawnień , aby uzyskać dostęp niezależnie plik chcesz go przejść. I oczywiście, że może być ustalona - jak w błąd danych - przez zmianę uprawnienia odpowiednio. TOMAS REIMERS: I ostatni komentarz dla Rozwój lokalny to szybko - mamy przyniósł to do góry, ale po prostu chcieliśmy wnieść go ponownie - jeśli poprosić o serwerze - tak hosta lokalnego, np. com czy cokolwiek. - i nie określają konkretnego pliku, Plik, że komputer będzie prosić o nazywa index.html. Lub, jeżeli nie istnieje, index.php. Fajne. Więc to jest tylko podsumowanie wszystkiego, miejmy nadzieję, że omówiliśmy w sekcja, i wykład, i do tej pory w CS50. A teraz mamy zamiar rozpocząć rozmowy o specjalnie bibliotek. CSS, JavaScript i biblioteki dla aplikacji internetowych. Więc jeden szybki powód dlaczego mamy biblioteki jest programowanie - istnieje wiele problemów w programowania, które pojawiały się utrzymać znowu, i znowu, i znowu. Można zauważyć, że wiele stron internetowych Potrzebuję zdolność do rozwijanej menu, na przykład, czy potrzebna jest możliwość mieć bardzo standardowy przycisk styl, który nie może być najłatwiej. Teraz, gdy zaczynają się na HTML, można sobie sprawę, że może faktycznie przyciski wyglądają bardzo brzydko, czy ci nie rób nic. Tak wiele osób pisało zwane biblioteki. I w tym kontekście, że są zwany także ramy. Zamierzamy użyć dwa zamiennie. I jakie są to są w zasadzie predefiniowane fragmenty kodu - zarówno CSS lub JavaScript - które zabierają dużo Team masz w kodowaniu. Więc wstępnie określić kilka klas lub wstępnie określić kilka funkcji do Sprawa JavaScript, w którym możesz zadzwonić później. A potem może, coś, uzyskać Dostęp do tego kodu bez mając nic zrobić. Przykład bibliotekę CS50.H. To była biblioteka daliśmy wam powrót w ciągu jednego tygodnia, który pozwolił, aby zrobić takie rzeczy GetInt i GetString bez pisania każdy kod sam. MIKE RIZZO: W porządku. Więc, tak jak musieliśmy m.in. w naszym plików różni c biblioteki, także powinny obejmować w nasza html różnych bibliotek. Na przykład, jeśli chcemy m.in. Biblioteka JavaScript tu specyficzny, być może, który napisaliśmy sami, jak to jest lokalnie gospodarzem zwane script.js, po prostu korzystać z tego zapisu. Więc mamy typu skrypt równych JavaScript źródło równi JavaScript.js. A jeśli uważasz, że powrót do CS50 ustawić problemem finansów, jeśli spojrzał w header.php w folderze szablonów, powinny widzieliście niektóre z nich zawarte. Więc ten pierwszy - skrypty - jest w tym biblioteki JavaScript. W tym jest CSS biblioteki trochę inaczej. Tutaj, zamiast skryptu Tag trzeba tag łącza. A następnie, tekst typu CSS jest trochę inny. Nie zawsze muszą zawierać Arkusz stylów rel. Ale myślę, że to, na ogół, dobra praktyka. I w końcu, HREF, które zapewne widział w swoim ATAGs łączenia w różnych linków tylko określa ogniwem, gdzie znaleźć to. Na przykład, jeśli chcemy połączyć inna biblioteka - powiedzmy - że mieszkał w styles.css. Chcieliśmy połączyć w to, że Gości na stronie, że chcemy skopiować. A następnie wkleić go do co mamy tu zamiast. TOMAS REIMERS: OK, mam nadzieję, że jesteś Chłopaki są już znane z jak połączyć CSS. Trzeba było to zrobić na Twoja ostatnia brązowy zestaw. JavaScript, niektórzy z was być może pewne doświadczenie z. Niektórzy z was nie może. Więc teraz, wiem, że plik JavaScript jest bardzo podobny w pliku CSS poczucie, że można połączyć się z nim lub , że można umieścić go wewnątrz. I to pozwala na pisanie skryptów. I mamy zamiar przejść przez Trochę JavaScript później. Więc przy użyciu biblioteki - kiedy już uwzględnione to, że to, jak proste, jak dosłownie dzwoni funkcji lub dodaniu nazwy klas do niego. Ostatnią rzeczą, chcemy rozmawiać o w zakresie biblioteki - i to jest bardziej uwadze technicznej - licencji open source jest. Więc kiedy znajdziesz te rzeczywiste biblioteki, można myśleć o pytania, jak to jest w porządku, że jestem po prostu przy użyciu kodu kogoś innego, zwłaszcza bo to jest coś, co bardzo Miałeś nie robić w tym kursie. Tak więc w przypadku licencji open source, Wielu programistów - po ich Napisałem bibliotekę, które uważają, że może być pomocne dla innych ludzi - publikuje je w internecie i dać mu licencję. I licencji w zasadzie mówi, że jestem niniejszym udzielanie zgody na inne ludzi do korzystania z tego elementu o następującym rodzaj postanowienia. Zamieściliśmy link do dobrej strony do pomaga zrozumieć w licencji Jeśli używasz do nich. Wspólne postanowienia są takie rzeczy jak zapraszamy do korzystania z mojej biblioteki, więc ile możesz dać mi kredyt. Zapraszamy do korzystania z mojej biblioteki pod warunkiem, gdy rozkłada mnie nie winić. Zapraszamy do korzystania z mojej biblioteki, tak długo, jak nie używać go do zarabiania pieniędzy dla siebie. Są to rodzaje wspólnego postanowienia. W tym CS50 ostatecznego projektu, to nie powinno być bardzo istotne, ponieważ projekty, które są wam używać chyba raczej rodzaj, znany. Ale kiedy rzeczywiście wyjść na świat i zacząć korzystać z bibliotek, które mogą lub nie mogą być także implementowane jako niektóre z bardziej popularnych których jesteśmy będzie przechodzić. Dobrze jest być w stanie zrozumieć licencje i do tych zrozumieć, co one oznaczają. I wraca. MIKE RIZZO: OK. Więc teraz porusza się na przykładach rzeczywistego CSS. W tym momencie do tej pory, to polubisz nie spotkałem tego. Ale można ją spotkałem Twoje codzienne życie, gdzie coś że wygląda jeden sposób na jednej przeglądarce może nie wyglądają tak samo stronę w innej przeglądarce. Nazywa się to Browser kompatybilność. I to staje się coraz bardziej i większym problemem, zwłaszcza Przeglądarki się coraz więcej wolności do wykonania rzeczy, jak chcą. Więc do pokonania, że ​​tam rzeczywiście jest wielka biblioteka nazywa Normalize.CSS. TOMAS REIMERS: włączono link. W tym momencie jest to przydatne, gdy masz tam swój laptop patrząc na miejscu. I dajemy to do ciebie teraz po prostu dlatego ostateczna CS50 Projekt jest rzeczywiście będzie poprosić o jego realizacji podobnie i przez przeglądarki. Tak po prostu, aby utrzymać się w tylnej części głowy, jest to wspaniałe biblioteki bo to będzie, rodzaj, standaryzacja rzeczy. Firefox, coś może pokazać jako jeden piksel w lewo. A następnie może zdecydować, że Chrome faktycznie co masz na myśli to 10 pikseli lewo. I chcesz ujednolicenia tego. Normalizacja będzie faktycznie bardzo dobry zadanie upewnić się, że witryna wygląda tak samo w różnych przeglądarkach. MIKE RIZZO: Więc jeśli chcieliśmy tylko kliknij link naprawdę szybko i pokaż Ci, co to wygląda, ci Można go pobrać za pomocą Olbrzym Pobierz przycisk. I zachęcam, aby przeczytać więcej o tym klikając w ten link w dolnej prawy róg. TOMAS REIMERS: A jeśli rzeczywiście kliknij czytaj więcej tam - kliknij źródło na GitHub - będziesz rzeczywiście zobaczyć open source licencji na LICENSE.md tam. I zobaczysz tu jest bardzo popularne licencji MIT. Ponownie, jeśli przeczytać tekstu, będzie można go znaleźć na stronie my określany przed i móc zrozumieć bez zapoznania przez żargonu prawnego. MIKE RIZZO: OK, świetnie. Więc to jest normalizacja. Chcieliśmy dać że bardzo szybko. Och, masz pytanie? PUBLICZNOŚCI: Więc kiedy go pobrać, to tak wynika z tego, że mają kod pod przyciskiem Pobierz? TOMAS REIMERS: Tak, tak, podczas pobierania - MIKE RIZZO: Och, to jest wielka litera. Więc pytanie, jak zrobić faktycznie go pobrać? Jeśli więc kliknij link, widzimy że rzeczywiście pojawia się w kodzie źródłowym. Tak, aby to zrobić, co się dało nie jest po prostu kliknij przycisk Zapisz jako. Zapisz jako i że należy przywołać plik. A następnie możemy wybrać, aby zapisać to jak normalize.CSS. A potem trzeba by połączyć je w - TOMAS REIMERS: W ten sam sposób można odwołuje się w żadnym innym pliku. I po połączeniu go w to, co jest świetne o normalizacji jest to rzeczywiście dbać o wszystkich ciężko działać samodzielnie. Co oznacza, że ​​nie masz dodać jakieś zajęcia. Nie musisz robić nic dziwnego. Będzie normalizacji bez ciebie cokolwiek dalej. Tak, musisz umieścić go. Przeglądarka Google Chrome nie odpowiada. Po prostu na bok szybkie - Zauważyłem, że wskoczył do tego. Reszta tej prezentacji jest będzie krótki przegląd. Badanie bibliotek. Zasadniczo, co to jest. To, co robią. Jak są one użyteczne. Jak można je realizować. Jeśli chcesz zacząć patrzeć na nich, po wzdłuż i czytania im, gorąco zachęcają. Alternatywnie, zapraszamy również do ściągnij je i tym je w zasięgu wzroku, by zobaczyć, co oni wyglądają i co zrobić, jeśli masz twój laptop przed tobą. Jeśli nie, to serdecznie zapraszamy do utrzymania słuchając nas mówić. Mamy zamiar rozmawiać. I mamy czas na koniec, mam nadzieję, my rzeczywiście dostać się pokazując, co niektórzy z tych bibliotek wyglądać. MIKE RIZZO: Cool. Dobra, to teraz porozmawiajmy o czcionki Niesamowite. TOMAS REIMERS: Niesamowite jest to czcionki naprawdę miłe miejsce, szczególnie dla tych, z nas, którzy są mniej artystycznie utalentowana. Ignorowanie nazwę czcionki Niesamowite, daje Ci kilka ikon, które są bardzo użyteczne. Tak wiele razy będziesz realizować icon możesz się miłym X tak że można zamknąć coś. A może chcesz jakiś przycisk Edytuj z rysunkiem ołówkiem, jak wszyscy inni. I to jest, gdy dowiedzą się, że rysunek te ikony mogą być bardzo żmudne i trudne. Czcionki Awesome - jeśli rzeczywiście przejdź do strony - daje dużo ikon pod ikony na górze. Tak, tylko góry. To daje dużo ikon na darmo. Więc widzisz mamy takie rzeczy jak Gwiazdka, bary, piorun, kalendarz, błąd, książka, et cetera. Może to być bardzo użyteczne. Sposób obejmuje to uwzględnić dosłownie plik CSS. I po tym, jak zawarte w pliku CSS, co możesz zrobić, to stworzyć tag o nazwie I. satands dla ikona z klasy FA stojąca dla czcionki niesamowite. A następnie, niezależnie od klasy chcesz. Więc gdybym chciał ikonę tego plusa kwadratu tutaj, dałbym to klasa FA. A następnie FA myślnik oraz łącznik kwadratowy. MIKE RIZZO: Cool, OK. TOMAS REIMERS: I wtedy, w zeszłym CSS Biblioteka chcemy dotrzeć jesteśmy starając się zachować minimalne na CSS biblioteki, ponieważ zdajemy sobie sprawę, Tytuł tej prezentacji jest obsługa JavaScript Biblioteki. Ale myśleliśmy, że możemy również wprowadzenie do innych bibliotek podczas gdy rozmawialiśmy o bibliotekach. To Web Fonts Google. I Google Web Fonts, co pozwala Wystarczy dodać czcionki na swojej stronie, co jest naprawdę łatwy sposób to zrobić ładna i odróżnić swój zestaw od każdego innego jest jeśli ma ładne czcionki lub jeśli ma ładny Zbiór czcionek. Google Web Fonts jest ładna w przeciwieństwie do innych bibliotek w tym sensie, że jest naprawdę kierować instalacji. Więc jeśli w link, to google.com / czcionki, wierzę. Jeśli się, że ci Można wybrać czcionkę. Można wybrać się na lewo od Grubość, skos, et cetera. A następnie, po wybraniu jednego, można kliknąć przycisk szybkiego użycia. Tam. W prawym dolnym rogu okna. , A następnie przewiń w dół. Po pierwsze, daje ci CSS, które trzeba właściwie link do niego. To właśnie tam. Możesz po prostu skopiować i wkleić, że w. I miłą rzeczą jest to jeden w rzeczywistości nie trzeba nawet pobierz plik. , Co to będzie zrobić, to to będzie link do wersji to Google. Wracając do tego, co to znaczy. Oznacza to, że gdy użytkownik pobiera plik - pobiera strony HTML - Twój HTML strona będzie odwoływać się do tego pliku. Tak więc komputer będzie zobaczyć, Och, to jest raczej gościł na google.com niż na theirsite.com. Puść mnie poprosić Google dla tego pliku. A potem, to będzie obejmować to prawie tak, jakby były część swojej własnej strony. TOMAS REIMERS: Cool. I po to m.in., że wtedy umieścić go w CSS, to daje Rzeczywista linia. Tak ustawić własność rodziny czcionek równa nazwę swojej czcionki. MIKE RIZZO: OK. Tak właśnie skończyliśmy z CSS. A niektórzy z was mogą myśleć, dobrze, mieliśmy trochę CSS na CS50 Finansów. Ale biblioteka CSS był bootstrap. My rzeczywiście zawierają mało Bootstrap później, ponieważ z mocy JavaScript Biblioteka jest również CSS Bootstrap z dużo JavaScript, który Bootstrap lub Twitter - który uczynił Bootstrap - używa do zarządzania wszystkimi ich CSS. TOMAS REIMERS: Czy ktoś ma jakiekolwiek pytania do tej pory około CSS w ogóle? Jesteśmy dobrzy? Niesamowite. MIKE RIZZO: Niesamowite. TOMAS REIMERS: Więc w ruchu do JavaScript. MIKE RIZZO: Więc chcieliśmy porozmawiać o jQuery na początku. Czy ktoś słyszał o jQuery przed lub używał go? Tak, kilka? Więc jeśli po prostu pracować z rodzimych JavaScript, będziesz się znaleźć wpisując wiele długich selektorów dużo. To co robi to jest jQuery zapewnia ładny wrapper dla JavaScriptu język, który pozwala w prosty sposób wybrać i manipulować różnych elementów w dokumencie modelu obiektowego Strona WWW lub DOM, które myślę, że wy słyszeliście o w wykład w tym momencie. TOMAS REIMERS: Jeśli nie słyszałeś o to czy wykład jeśli nie oglądałem jednak dokument jest Object Model w zasadzie, jak rzeczy są reprezentowane. Więc HTML rodzaju wygląda jak drzewo kiedy rzeczywiście wyciągnąć go. Masz element HTML na górze. Masz głowę i ciało. A następnie, w terminie, który mają wszystko. To dalej DOM - Document Object Model. Więc model, który reprezentuje obiekty w Dokument jest prosty sposób, aby myśleć o tym. I jeden z wielkich rzeczy na temat jQuery jest to naprawdę robi referowania że i elementy manipulacji w obrębie że niezwykle proste. Takie proste, w rzeczywistości, że większość JavaScript biblioteki lub jeśli nie większość, większość z tych kawałków zobaczysz tak naprawdę wymaga jQuery że mogą się po prostu uruchomić bo jeśli nie ma jQuery, ci nie tracić czasu na próby dowiedzieć się, jak wybrać pewne elementy i jak robić inne rzeczy. I inne wielkie rzeczy na temat jQuery jest to, że krzyż przeglądarka zgodna. Więc pamiętaj, z powrotem, gdy powiedzieliśmy, że nie wszystkie przeglądarki realizacji rzeczy w ten sam sposób? Dzieje się tak nawet w JavaScript. I jednym z wielkich rzeczy na temat jQuery jest to, że wykrywa przeglądarka i wykrywania odpowiedni sposób. Więc jeśli chcesz, aby wybrać element, Internet Explorer może powiedzieć, że jesteś robić w ten sposób. Firefox może powiedzieć poprawne droga jest w ten sposób. jQuery nie obchodzi. Kiedy mówisz jQuery wybrać elementem będzie dowiedzieć się, jak to jest powinien zrobić to w przeglądarce Użytkownik jest obecnie, a następnie wykonaj to w ten sposób. MIKE RIZZO: Więc nie mówmy o Wykorzystanie jQuery trochę. Podobnie jak PHP, jQuery ma szczególnie sentyment do dolara. Więc można stwierdzić, że wszelkie jQuery - Cóż, nie wszyscy. Czasami można zastąpić dolara znak ze słowem jQuery. Ale ogólnie, tylko dlatego, że krótszy, gdy widzisz jQuery jest używane to będzie ze znakiem dolara. Więc tutaj mamy po prostu pokazując początek selektora dla elementu w DOM. Tutaj mamy znak dolara, a następnie otwartymi nawiasami a następnie notowań. Oraz w cudzysłowie iść nasze selektorów dla różnych elementów. Podobnie jak w CSS, co potrzebne do selektorów móc projektować inne elementy w stronę. Te różne selektory tłumaczeniu dokładnie do jQuery i JavaScript, w większości przypadków. Więc tutaj mamy foo kropka. Więc jeśli pamiętacie z wykładu, kropka oznacza po prostu klasę. Więc mamy wybór elementu z klasy foo. Jeśli więc śmiało i otwarcie naszego Konsola JavaScript tutaj naprawdę szybko tylko wykazać je, gdybym po prostu wpisz znak dolara, widzimy, że jest to część Funkcja, która pojawia się. I to jest po prostu zdefiniowane przez jQuery. TOMAS REIMERS: Dla tych z Was, znają, że konsola jest narzędziem w ciągu Chrome, który pozwala, w zasadzie, uruchomić JavaScript na Ta strona. To znajdziesz bardzo przydatne, gdy jesteś rzeczywiście i debugowania muszą być podobne, co jest obecny wartość jakiejś zmiennej globalnej lub co jest coś jeszcze? To trochę jak z wyjątkiem GDB że można rzeczywiście manipulować elementów na stronie z to w znacznie łatwiejszy sposób. A także, że nie, w zasadzie, sprawdź z wami, zanim nic nie robi. Tak więc mając na uwadze, GDB może być jak, jesteś na pewno chcesz uruchomić następny krok? Konsola jest w czasie rzeczywistym. Tak jak strona internetowa jest trójwymiarowa i robi to, co robi, Rada jest również uruchomiony obok niego. I można umieścić kod przypisać do że konsola, która będzie działać na stronie. MIKE RIZZO: Tak, aby wejść do konsoli, Myślę, że należy na krótko wspomnieć, jak to zrobić. W ostatnich problemów, które mogą mieć Używany Chrome elementu sprawdzić funkcje lub źródło - widok strony a te są dostępne tylko przez prawo kliknij na stronie lub określonego Element i robi albo skontrolować Element lub zobacz stronę źródła. Możemy również uzyskać dostęp do JavaScript Konsola bezpośrednio Wybierając sprawdzić element. Więc to po prostu hit konsoli po prawej stronie. Alternatywnie, można również zniknął w prawym górnym rogu, która jest odcięta na tym ekranie, gdzie ma trzy poziome paski. I udać się do narzędzi i następnie konsola JavaScript tutaj, gdzie można zobaczyć - przynajmniej w systemie Windows - Sterowanie jest skrót J. Więc przesuwne jeśli chcemy, aby wybrać element na tej stronie, tak jak pokazałem wcześniej, robimy znak dolara otwarte parens a następnie cytuje. Ciekawostką jest, na ogół, apostrofy i cudzysłowy są wymienialne. Tak wiele osób po prostu użyć pojedynczego cytaty, ponieważ są one szybciej wpisywać niż podwójny cudzysłów, ponieważ nie trzeba przytrzymać klawisz Shift. Więc ja po prostu to zrobić już teraz. Tak, chcę, aby wybrać coś z klasą. Pojemnik, tylko dlatego, że wiem, że to coś, co znajduje się na naszej strona internetowa teraz. I naciśnij Enter. I widzimy, że wybrany go. Więc to pokazuje się, że wrócił tego obiektu. Więc to jest podstawowy wybór. Jeśli chcemy rzeczywiście manipulować, trzeba by nazwać coś tego wyboru, który dostaniemy się później. TOMAS REIMERS: Więc po prostu patrzeć na to bardziej w głębi, nie ma różnicy niż funkcjach zrobiliśmy w C. Nazwa funkcji jest tu trochę dziwne. To znak dolara. To tylko nazwa funkcji. Nie ma nic specjalnego. Mamy otwarte nawiasy. Następnie mamy jeden argument, który w tym przypadku okazuje się być ciągiem znaków, który jest selektorem dla niego. A potem, mamy zamknięty nawias. To jest to. To nie jest tak bardzo różne. Mimo, że wygląda bardzo dziwnie. I to może być, w pewnym sensie, kłucia punkt dla wielu ludzi. MIKE RIZZO: Więc podobnie, jeśli chcemy , aby wybrać element, który ma identyfikator, teraz chcemy wybrać przez ID zamiast klasy. To byłoby coś podobnego, gdzie po prostu zrobić ostry znak dla ID. Więc mamy tu wszystko, wybierając Elementy, które mają pasek identyfikacyjny. TOMAS REIMERS: A ten wydłuża. Że CSS rozszerza. Podobnie jak w CSS, można wybrać wszystkie linki, które mają foo klasy. Tutaj, to jest to samo. Można zrobić a.foo, które wybrać wszystkie linki z klasy foo. Można zrobić ostry bar, które wybierz link z paska ID i tak dalej, i tak dalej. Wszelkie selektor CSS jest poprawny selektor jQuery. MIKE RIZZO: Tak. OK, więc teraz przejdźmy do trochę manipulacji, że możemy zrobić z nasza jQuery. Więc jQuery ma szczególny rodzaj notacji, gdzie po prostu wykorzystać kropka na końcu. A może myślisz o tym, jak w C jak mieliśmy różne przypisać struktury. I iść w tych strukturach, byś używać kropki, aby dostać się do nich. To jest, jakby, podobnie rzecz. Teraz mamy tylko w ramach tej funkcji Selektor, że możemy wywołać na nim. Więc tutaj, pierwszy przykład widać to selektor CSS. I w zasadzie, co to to nie jest dotyczy pierwszego elementu CSS do tego rzecz, która została wybrana - ten element, który został wybrany - z wartością tego. TOMAS REIMERS: Tak proste tłumaczenie że gdyby jQuery zasadniczo po prostu wziął foo. A następnie w CSS powiedział, kolor czerwony i blisko. To ten sam pomysł. Co to się robi jest to zaznaczone wszystkie elementy foo. A potem to stosowane. Rodzaj, kolor nieruchomości jest równa czerwony. MIKE RIZZO: Podobnie, możemy również zmienić Rzeczywista zawartość tego, co jest pokazano na HTML strony, co jest naprawdę fajne, bo to znaczy, że Strony internetowe mogą być teraz całkowicie dynamiczny i nie muszą być statyczne że drukowanie za pomocą PHP na początku Strona jest załadowany. Więc, jeśli chcemy zmienić Rzeczywisty HTML strony, bylibyśmy teraz wywołania funkcji HTML, które po prostu Wkładki cokolwiek określić na że elementem, który wybraliśmy. Więc tutaj mamy do wyboru elementu z class foo, a następnie mówi, że to HTML to teraz witaj świecie. TOMAS REIMERS: I kiedy myślisz o jakie są użyteczne aplikacje ta, to jeden CSS, pierwszą rzeczą, która możesz zacząć myśleć o w zakresie nawet menu rozwijanych. Można zacząć robić rzeczy, jak, kiedy najechaniu na górnej części of a down drop, chcesz, aby Dolna część widoczne. Prawda? Więc w CSS, mamy właściwości zrobić coś widocznego. Rzeczy, jak żaden wyświetlacz okrężnicy Pozwoliłoby to niewidoczne. Blok wyświetlacza stałaby się widoczna. Lub nawet jeśli chcesz iść prostsze, ci takie rzeczy jak równych sobie widoczności widoczne, a widoczność wynosi ukryty. I można zacząć realizować rzeczy jak menu rozwijanych prawo po odebraniu przez pomysł, jak można dowiedzieć się, kiedy to otwiera się, które dostaniemy za bardzo krótko. Ale możemy zacząć, aby zobaczyć Wnioski z tego. W podobnym sensie, jeśli były, aby spróbować i wdrożenia, powiedzmy, czat silnik i chcesz, aby trochę dymka wymyślić, gdy masz mam nową wiadomość, po uzyskaniu nowa wiadomość, możesz zrobić trochę dymka wymyślić zmieniając HTML strony, prawda? Dodając, że dodatkowe dymka z dodatkowym tekstem istnieje. Tak? PUBLICZNOŚCI: Tak byłoby umieścić to w ciągu Kod HTML w coś w rodzaju [Niesłyszalne]? MIKE RIZZO: Prawo. Tak, my się do tego, w trochę. Tak, to jest podobny trochę do PHP. Nie dokładnie podobny. Dobry do rozróżnienia tego, co jest faktycznie edycji, kiedy edytować strona, ponieważ nie będzie edycji rzeczywistej plik jest przechowywane na serwerze, ponieważ świat nie powinien mieć uprawnień edytować pliki. To jest po prostu edycji, co jest na stronie i to, co jest wyświetlane w Przeglądarka. Więc jeśli było po odświeżyć stronę, powiedzieć, usuwanie coś jak my zobaczyć, co możemy zrobić z wezwaniem usuń, że sprawa będzie wtedy ponownie. TOMAS REIMERS: Więc jeden sposób myślenia o to jest, czy jestem na komputerze i Mike jest, w pewnym sensie, serwer. Co się stanie, to będę zapytaj Mike, hej, mogę mieć kopię ta strona? A on da mi jego kopię. Nie, to nie jest oryginalna rzecz. To tylko kopia. I wtedy to będzie jak, och, jest obsługa JavaScript tutaj. Oczywiście, należy zmienić Strona tak być. A ja edycji kopię. Ale to nie dokonania rzeczywista kopia. I gdybym znowu go zapytać odśwież stronę, - hej, może mam inny czystej kopii - on da mi kolejna czysta kopia. A potem, mam zamiar zrobić to samo jak, och, ten mówi, że tutaj JS do edycji tego. I mam zamiar robić to. MIKE RIZZO: Tak naprawdę fajna rzecz , które można zrobić z jQuery jest faktycznie dodać różne rodzaje animacji na swojej stronie. Nie wiem, czy kiedykolwiek widział, gdzie starasz się o wypełnienie formularza online i nie wypełnić rzeczy prawidłowo. Tak mała rzecz ześlizguje u góry i mówi, że nie zrobić to poprawnie. Prosimy spróbować ponownie. A potem, to może nawet po prostu przesuń się. Okazuje się, jQuery ma wbudowane funkcje które sprawiają, że wszyscy animacja bardzo, bardzo proste. Więc nie jest pierwszy na blaknięcie z funkcji, które możesz zadzwonić na coś. I to jest sposób na zmianę z CSS ten element w animowanym sposób. Tak więc niezależnie od elementu trwa nazywasz to fade out na. A potem, powoli zmienia To krycie dopóki nie idzie całkowicie przezroczysty. TOMAS REIMERS: inny popularny jest zjechać w dół, co uczyni coś wydaje się, przesuwając go w dół. Tak więc w przypadku menu drop down, ponownie, gdy dowiedzieliśmy się, jak wykrywać kiedy to został unosił się nad, można po prostu powiedzieć to dno część przesuń w dół teraz. A potem, wydaje się, przesuwając w dół. MIKE RIZZO: A potem, jeśli tylko mają jakiś rodzaj animacji na uwadze, że jQuery nie musi dostarczyć. Na przykład, powiedzmy, że jQuery daje Ci ze zjeżdżalnią w dół i przesuń w górę. Cóż, powiedzmy, że chcesz przesunąć coś się z lewej lub z prawda trochę jak CS50 strona główna robi, gdy idziesz do nowego panelu. Będziesz wtedy prawdopodobnie do wdrożyć go samodzielnie za pomocą funkcji animowania ciągu jQuery. Podobnie więc, po prostu animować. A następnie, w nim trwa Słownik różnych wartościach że masz się przejść. Więc, jeśli chcemy animować Element foo taki sposób, że jego szerokość bądź rozszerza lub umowy do 80 pikseli, w zależności od tego, co to jest obecnie. Chcemy po prostu przekazać, że jak Argument w nim. Animować też kilka innych argumentów że można przekazać go, na przykład, szybkość animacji że chcesz dać. I aby to zrobić, chciałbym tylko powiedzieć, szybko Google jQuery animować. A następnie, wychowywanie stronę, można zobaczyć, że ma kilka różnych właściwości, że można go przejść. I zachęcam was - gdy przyjdziesz na coś, że nie wiedzą lub po prostu chcesz dowiedzieć się więcej o zwłaszcza sposób, że można zadzwonić na coś - tylko google. jQuery jest bardzo dobrze udokumentowane. I często są dużo przykłady, które świadczą, że dla Ciebie. Jeśli będziemy przewijać - droga w dół - że możemy użyć, jak również. Ponownie, gdy deweloper faktycznie idzie sobie trud pisania Biblioteka, zazwyczaj chcą ktoś go używać. Tak dzieje się obok być dokumentacja. I to zazwyczaj można dokumentacja znaleźć na stronie projektu, który jest dlaczego dał ci tę oryginalną witrynę w początek, który łączy do Strony projektu, dzięki czemu można zobaczyć, że dokumentacja. Zazwyczaj strona projektu w przypadku z [niesłyszalne], to mówiłem o Nazwy klas. W przypadku języka JavaScript, daje Ci nazwę funkcji. Nawiasem mówiąc, jeżeli przewijania do góry Uwaga na boczne szybki funkcji jest gdy widzisz funkcji realizowanych jak to się ciężko wsporniki w środku, to znaczy, że właściwość jest opcjonalna. Wystarczy się głowy. Widziałem wiele pytań o tym. Więc widzimy, że animacja trwa właściwości jako konieczny argument. I wszystko inne jest opcjonalne. Notatka - można myśleć o tym, sortowania o, jak strony man. Strony man są Dokumentacja C i na wiele innych rzeczy, jak również. MIKE RIZZO: Więc nauczyłem się zmienić inny CSS na stronie, animować i wyjmij dodać HTML. Ale jeden z naprawdę najpotężniejszym rzeczy o JavaScript a szczególnie jQuery - co pozwala zrobić to odpowiedzieć na Poszczególne elementy tego. Na przykład, tutaj mamy obsługi zdarzeń. I to po prostu oznacza, w przypadku gdy jest zdarzenie, załatwiamy to w pewien sposób. Więc tutaj, generic zdarzenie jQuery Ładowarka jest kropka. A następnie, pierwszą rzeczą, którą umieszczono Wydarzenie to jest to, co powinno nasłuchiwać. Więc, jest to, że kliknięcie czekamy. TOMAS REIMERS: Alternatywnie, można mieć przy aktywowaniu, który jest bardzo popularny. Wracając do mojego pomysłu rozwijanego menu. To masz górną jeden przy aktywowaniu. A następnie można zmienić. MIKE RIZZO: Prawo. A potem, kiedy tak się dzieje, to po prostu wykonuje tę funkcję, że dajemy mu jako argumentu, a ostrzega, że ​​cześć i cześć. TOMAS REIMERS: Tak więc w przypadku JavaScript, jest to miejsce, musimy usunąć się od C. Możemy rzeczywiście podjęcia funkcji jako argumenty. I istnieje wiele naprawdę skomplikowane sposoby, aby to zrobić. Zamierzamy promować w jedną stronę, który można zdefiniować funkcjonować tam. Więc kiedy pytasz o funkcji jako parametrów, jesteś w zasadzie tylko zamiar określenia funkcji na miejscu. I sposób definiowania funkcji Jest pan w JavaScript dosłownie powiedzieć funkcji. Następnie zazwyczaj nazwą funkcji. Ale my nigdy nie będziemy odwoływać funkcja ta ponownie. Więc zostaw to bezimienny. Następnie nawiasy, to kręcone szelki, a następnie kod wewnątrz tego. Więc rozumiem, może to być trochę mylące. Więc daje ogólną formę co wygląda obsługi zdarzeń dołu, który jest na zdarzenia. A następnie, że kod wewnątrz. MIKE RIZZO: Czy istnieje Pytania na ten temat? To może być trochę mylące pierwszy raz go zobaczyć. TOMAS REIMERS: Ty rzeczywiście chcesz otworzyć plik i pokazać im kilka jQuery w tej chwili? MIKE RIZZO: Tak, zróbmy to. OK. TOMAS REIMERS: Więc teraz jesteśmy w urządzeniu. I co zrobiliśmy jest podjęliśmy wolność tworzenia zarówno index.html Plik, który prowadzi do plik JavaScript. I możemy otworzyć - tak. Cóż, to dwie rzeczy. Pierwszym z nich jest to linki do plik JavaScript. I zobaczymy, że się tutaj. Widzimy, że w głowie Dokument HTML, w szczególności. Więc można tam zobaczyć, że my w zasadzie powiedzieć, SRC, co oznacza źródło. I to jest adres URL. Więc można powiedzieć, mamy zawarte jQuery. I my także skrypty. Innym sposobem jest włączenie JavaScript że można to skrypt inline Znacznik jak już w dolnej, gdzie mówi, jest tekst typu skrypt JavaScript. Więc mówisz, posłuchaj, jesteśmy o włączenie skryptu. I rodzaj tego skryptu jest JavaScript, który jest typu tekst. Bardzo proste. MIKE RIZZO: Więc to, rodzaj, dostaje się do pytanie o tym, jak m.in. JavaScript w naszych aktach, ponieważ kiedy nie PHP, możemy coś takiego zrobić. A potem, mamy swoje funkcje PHP - powiedzmy zapasy zrobić coś z tym - idzie tam. Jednak teraz mamy tagów skryptu że dajemy to, co w rzeczywistości częścią samego języka HTML, ponieważ nie jest udaje jest plik HTML, jak to jest w PHP, bo jeśli faktycznie go w i spojrzeć na źródło strony, zobaczysz te znaczniki SCRIPT tam z JavaScript związane z im w tym. Tak więc, jeśli chcemy napisać JavaScript - powiedzmy, że chcemy zmienić ciało bo teraz nie mam inne znaczniki, które mogę naprawdę edycji oprócz ciała. Powiedzmy, że chciałem zmienić CSS tego. Więc będziemy iść do przodu i zmiana Kolor to czerwony. Więc zapisać plik. Wróćmy do naszej strony internetowej, odświeżanie, i robi to automatycznie dlatego, że nie wydaje się, że czekał w ogóle, bo nie słuchałeś wydarzeń lub coś podobnego. TOMAS REIMERS: Tak, jeśli wrócimy do tego złożyć w szczególności - HTML plik - co masz zamiar aby zobaczyć to mamy - przypomnieć, że jest załadowane rodzaj, chronologicznie. Więc musimy najpierw głową. ładuje te dwa pliki. Następnie udajemy się do ciała. I widzimy, Hello World. Więc uczynić Hello World. A następnie ostatnią rzeczą mamy to mamy znacznik script. Tak to działa tag skryptu, ponieważ jest to Nie mówiąc to na nic czekać. I to jest najbardziej podstawowa sposób uruchomić JavaScript. Z powiedział, że można umieścić skrypt tag w nagłówku tylko pokazać ten punkt? I uruchomić to. Jedziemy do zauważyć, że nie zmieni koloru. Jest to jeden z problemów JavaScript jest to, że rzeczy są załadowane w porządku chronologicznym. Tak więc w tym momencie, że kod został uruchomiony, wybraliśmy - wrócić - tag ciała. Tag ciało jeszcze nie istnieje, ponieważ JavaScript jest zgodna z HTML. Więc przeglądarka jest jak select ciała. Jest jeszcze coś takiego. Więc możemy zignorować. A my dalej. A następnie definiujemy tag ciała. Ale to nigdy nie jest aktualizowany. Więc kiedy wdrożenie skryptu tagi, upewnij się, że miejsce po tagu ciała. Następny slajd. MIKE RIZZO: OK. Więc zmieniliśmy coś. Ale to nie wygląda tak, jak odpowiedział na nam w ogóle, bo to po prostu rodzaj zrobił to tak szybko, jak to załadowane strony. Więc teraz, zamiast robić to, dlaczego Nie możemy dodać obsługę zdarzenia. Więc zróbmy coś do korpusu ponownie. I powiedzmy, że robimy to na - kliknij. Dodamy funkcję. Miejmy zmiana: Tomas Reimers to znów kolor na czerwony. Dlaczego nie? Zmiana Tak, niech: MIKE RIZZO jego "kolor na czerwony ponownie. Dobrze. Warto więc odświeżyć stronę. OK, zobaczymy - zgodnie z oczekiwaniami, to nie włącza jeszcze czerwone. Ale to możemy iść do przodu, a następnie kliknij go. TOMAS REIMERS: I to nie zmieni się na czerwony. MIKE RIZZO: I to robi zmieni kolor na czerwony, jak oczekiwano. TOMAS REIMERS: I możemy zobaczyć, jak możemy zacząć budować bardzo podstawowe interakcja. Inne rzeczy może chcemy zrobić to, jeśli nie chcemy, aby ciało kolor czerwony, zróbmy HTML czerwony kolor tła. Tak to jest ten sam CSS. A kiedy go zmienić, możemy to zobaczyć bardzo dramatyczny efekt zmiany cała strona. Więc znowu, jeśli rzeczy wykonawczych, możesz mieć jeden składnik który ma być kliknął. Powiedzmy przycisk Zakończ i Cały drugi składnik, która jest przeznaczona do reagowania. Więc można usunąć okno kiedy to się stanie. MIKE RIZZO: OK. Tylko jako przykład - nie udało nam się zobaczyć to wcześniej - Ja po prostu pokazać, jak to wygląda lubię, gdy coś ukryć. Więc śmiało i nie ślizgać się. TOMAS REIMERS: Chcesz zawijać, że w Typ pkt przed zrobimy? MIKE RIZZO: OK. Tak, dlaczego nie robimy tak możemy wybrać go trochę więcej. TOMAS Reimers: i niech to nadać jej klasę. MIKE RIZZO: Tak. OK, więc zobaczymy. Zamiast wybierania faktyczne ciało teraz, po prostu wybierz wszystko z Klasa komentarzy, które tutaj tylko jedną rzecz. Więc nie powinno się martwić. Więc będę ją odświeżyć. Pójdę dalej i kliknij go. I to, w pewnym sensie, nie dziwne slide się coś, co nie wyglądało, że atrakcyjne. Ogólnie rzecz biorąc, to nie wygląda całkiem ładnie. Myślę, że to - dla niektórych Powód - nie. Ja po prostu zrobić tak Fade Out można spojrzeć na to zbyt. O wiele ładniejsza. A potem, jeśli otwarcie JavaScript pocieszyć ponownie i chcemy zobaczyć, co wygląda na to, kiedy znikną go w. Teraz, po prostu zadzwoń blakną na nim. I zanika widok Podobnie, możemy faktycznie również przekazać Argument zanikać lub fade out, który jest typu, prędkość niego. Więc śmiało powiedzieć, że chcemy to iść powoli zanikać w. Więc myślę, że to nadal wydawało dość szybko. Ale to był wolniejszy niż wcześniej. TOMAS REIMERS: A jeśli chcesz znaleźć Więcej informacji na temat tych rzeczy, znowu, po prostu pójść do dokumentacji jQuery, które daliśmy wam i czytaj przez nich. Dokumentują oni swoje funkcje bardzo dobrze. MIKE RIZZO: OK. Więc myślę, wracajmy do tego. I możemy mówić o naszej ostatniej stronie. Cóż, możemy skończyć z Bootstrap. A potem będziemy go otworzyć na niektóre pytania. A jeśli macie jakieś pomysły, które chcesz spróbować rzucić się i patrz czy możemy wdrożyć je JavaScript szybko. Więc bardzo szybko o Bootstrap, który została automatycznie włączone Twój ostatni problem ustawić w folderze CSS i faktycznie połączone w swoje header.php. Więc można klas, które zostały dodane Bootstrap są zdefiniowane w nim. I to byłby automatycznie stylu te rzeczy się odpowiednio. TOMAS REIMERS: Więc jest bardzo Bootstrap magiczna rzecz stworzona przez ludzi na Twitterze. I co to miał zrobić, to - przed strony naprawdę ciężko, aby wyglądają ładnie, zwłaszcza gdy mieliśmy wiele wspólnych elementów. Tak wiele przycisków internetowej wyglądał tak samo. Wiele pól tekstowych mogą być wykonane do wyglądają lepiej niż standardowy tekst Pole pewnie wiesz od bardzo Stare strony internetowe lub bardzo słabo wykonane strony internetowe, które tylko wyglądają jak dosłowne pola tekstowe bez jakiejkolwiek formie tekstu cień lub wszelkiego rodzaju miłej zarysie. Więc co Bootstrap nie było powiedziane, dobrze, Mamy wiele wspólnych stylów. Dlaczego nie zrobić jeden wspólny zestaw CSS i wspólny zestaw JavaScriptu dobrze, co może projektować je tak jest i który może dać ludziom takie rzeczy jak spadek w dół menu, które może dać ludziom rzeczy, jak czasowniki modalne. Modal jest to, co pojawia się na stronie gdy jest to ściśle rzecz biorąc coś, co hamuje dalszy interakcja, dopóki nie współdziałają z nim. Coś w tym jest, to na pewno chcesz usunąć tę rzecz? Naprawdę nie można zrobić nic innego dopóki nie powiedzieć tak lub nie. Zajęło to wszystko i pakuje go razem i powiedział, jedziemy. Ludzie mogą teraz korzystać z tego. I można go znaleźć na w getbootstrap.com. Został on automatycznie objęte ustawić twój ostatni problem. I jesteś bardziej niż mile widziane używać go na końcowym projektu. A jeśli chcesz iść, że aby pobrać startowej. Zobaczysz tu jest Bootstrap witryny CSS. Zobaczysz startowej. A jeśli przewijać, zobaczysz jak go ściągnąć, jak zainstalować go, et cetera. MIKE RIZZO: A można też, Co ciekawe, dostosować go do się niezależnie od rodzaju tematów że chcesz. Wiem, że coś zrobiłem dla mojego Ostateczny projekt, gdy wziąłem klasę było go dostosować. Inna wersja Bootstrap, że miał inny schemat kolorów i Różne kształty niektórych różne rzeczy. Tak więc zachęcam do zabawy z tym. To rodzaj zabawy zrobić. TOMAS REIMERS: Patrząc na górze ponownie, jest to bardzo podobne do Font Niesamowite miejsce. Wiele dokumentacji rozpocznie wydawać się podobne, gdy masz widziałem dosyć. Więc tutaj mamy CSS elementem tego. , A zobaczysz, jak to Można projektować rzeczy. Więc jeśli klikniesz na stołach, na przykład, można tam zrobić Tabela całkiem po prostu dodając Tabela klasy do niego. Same rzeczy dla przycisków. Jeśli po prostu dodać klasę BTN i BTN domyślnych lub BTN podstawowym, można dostać jeden z tych przycisków z tych gotowych stylów. A potem, jeśli szukasz coś bardziej skomplikowane niż po prostu restyling co w już, w ciągu dnia Zakładka JavaScript w całej górnej my mają kilka elementów. Więc tutaj mamy przejść, czasowniki modalne, Dropdowns, zakładki i podpowiedzi. Podpowiedź, co pojawia się pod twoim po najechaniu kursorem myszy na coś. Popovers, alerty, przyciski, składany akordeony, co są one zwykle nazywane. Karuzele, które klapka przez takich jak obrazy. To są elementy z Bootstrap. Chciałbym zachęcić was do bardzo go patrzeć. Jest składnikiem JavaScript i składnik CSS. Zapraszam do korzystania z nich, jak chcesz. Nie zamierzamy iść w nich zbyt wiele ponieważ czujemy się z dokumentacją jest naprawdę dobrze zrobione. I tak. Czy masz jakieś pytania dotyczące tego? MIKE RIZZO: Więc jak to naprawdę szybkie z boku, projekt strony internetowej, szybko ułożyła dla Niniejsza prezentacja jest rzeczywiście zrobić za pomocą startowej. Jak widać, po kliknięciu na nich różne karty, nigdy nie jesteśmy w rzeczywistości pozostawiając tę ​​bieżącą stronę index.html. Tak więc to, co mamy, jest różne DIV w tym index.html. A potem, gdy klikamy różne Zakładka, to tylko zmiana Który z nich jest pokaz. Więc odpowiednio pozycjonuje je, zmienia HTML strony, aby Zakładka prąd jest oznaczona jako aktywna tak wydaje się inaczej i wygląd naprawdę ładne. TOMAS REIMERS: Tak, że wszystko było zrobione bez nas pisanie niemal każdego CSS. Widzimy także nagłówek na górze, które kolory są przez nas. Jednakże rzeczywiste umieszczenie go na do góry strony i dokonywania to przewijania był startowej. A potem nawet do innej biblioteki - to nie jest jednym rozmawialiśmy ale możesz Google, jeśli chcesz. Nazywa się to prettify.js. I to podświetlanie składni kodu ci z wykorzystaniem zarówno CSS i JavaScript. Ostatnią rzeczą, chcemy mówić o Zanim wydamy cię w świat szukać w bibliotekach, aby dowiedzieć się, jak z nich korzystać i, miejmy nadzieję, przeczytaj dokumentację i znaleźć to, czego Potrzeba jest, jak znaleźć bibliotek. Więc pierwsze jesteśmy tylko będzie naciskać Google. Idź Google. To jest dosłownie to, co robimy, gdy trzeba coś zrobić to my Google. Czy jest biblioteką JavaScript, która pozwala mi manipulować czasem w skuteczny sposób? Tak więc, jeśli wiem, że niektóre stworzenia użytkownika konto tutaj, i to aktualny czas, w jaki sposób można obliczyć Różnica z tym bez konieczności obliczyć to sam? Więc to jest rzeczywiście coś wspólnego, JavaScript biblioteka czas. I tu Moment.js-- najbardziej popularny. Jeśli potrzebujemy biblioteki do manipulowania coś jak kolor, aby móc wygenerować kilka losowych kolorów - ewentualnie, w celu wytworzenia styl lub coś - możemy coś jak Google JavaScript biblioteki kolorów. I jestem pewien, że pojawi się z tysiąc i jeden z nich. Zapraszamy do zapoznanie się z nimi. Tak więc większość rzeczy - kiedy je znaleźć - będą znajdować się na jednym z Kod miejsca, które gospodarz. Są kilka popularne. Najbardziej popularne, przez daleko, jest github.com. I jeśli pójdziesz do GitHub to faktycznie gdzie normalizacja była gospodarzem. Tak więc, jeśli chcesz wrócić do tego. Pokaż im, że. MIKE RIZZO: I to jest naprawdę, gdzie to jest na serwerze też, jeśli zauważyłeś. TOMAS REIMERS: Tak. Więc jeśli pójdziesz do normalizacji i przejść do GitHub. Było to, że? MIKE RIZZO: To trochę kota rzeczą jest symbolem GitHub. TOMAS REIMERS: Och. Więc GitHub wykorzystuje metodę o nazwie Git do kodu sklepu. Czy nie wiesz, co to jest lub to cię przeraża, to w porządku. Nie musisz wiedzieć, co jest git ponieważ GitHub ma przycisk Pobierz w prawym dolnym rogu. Inne przydatne rzeczy wiedzieć o GitHub jest większość produktów będzie musiał mnie czytać. A jeśli nie masz strony internetowej, czytaj mi opowie o tym, jak zainstalować go, jak go używać, co to robi, et cetera, et cetera, et cetera. Co mamy w zasadzie było was przez. MIKE RIZZO: Rzuca Internet jest. TOMAS REIMERS: To dobrze. Ostatnie dwie rzeczy, które chcieliśmy mówić o - rozmawialiśmy o Git - jest rozwiązywanie problemów. I to nie jest tak istotne dla Produkt końcowy, jak to jest po opuszczeniu 50. A gdy napotkasz produktów wykonawczych bibliotek lub wykonawczych swój projekt, będziesz mają pytania lub jesteś będzie wyglądać na pytania. Ponownie, to google. To jest dosłownie tym, co robimy. To zabrzmi głupio. Ale dosłownie, że Google to. I znowu, jedną z pierwszych miejscach będziesz zazwyczaj jest prowadzony w stackoverflow.com, który jest wspaniałym pytanie i odpowiedź widok. To wspaniałe, bo można zarówno odpowiedzieć na pytania i szukać odpowiedzi, ale także dlatego już zawiera dużo wstępnie wypełnione treści tam. Tak zazwyczaj, gdy Google jest programowanie pierwsze pytanie w ciągu para uderza można już uruchomić w tym czasie swoich zbiorów problemowych. A następnie, ostatnio bardzo krótki, co jest JSFIDDLE, który jest - dziś mamy robi dużo pracy z JavaScript HTML CSS. JSFIDDLE jest aplikacją internetową, która w zasadzie pozwala na wykonanie kodu HTML, twój JavaScript dolny lewy, i Twój CSS na górze po prawej. A następnie może stworzyć szybkie renderowanie z nich i zobaczyć, jak to oddziałuje. Jest to bardzo przydatne, gdy ludzie próbują zrobić dowód pojęcie jak to jak byś zrobić rozwijane menu. Może szybkie Odkryć lub cokolwiek. MIKE RIZZO: Więc chodźmy przed i kliknij to. Szybka uwaga - mając na uwadze, zanim byliśmy robi na kliknięcia. Okazuje Korea JCorey posiada również wbudowany w procedurze obsługi zdarzenia click, że używa tylko dlatego, że rysunki jesteś będzie chciał zrobić wiele rzeczy, jeśli chcesz kliknij coś. Podobnie ma też hover. Jednak, aby uzyskać pełny zakres ci, spójrz na jQuery Dokumentacja i to zrobić. Zrobiłem coś głupiego tutaj. TOMAS REIMERS: Więc mam bardzo szybkie Program tutaj, które mówi, przycisk na kliknięcie. Następnie mamy do pętli. Dla i jest mniejsza niż 404. To po prostu się do pop-up Te komunikaty ostrzegawcze. MIKE RIZZO: A co było Kod 404 stał w HTML? Czy ktoś pamięta? Nie znaleziono, prawda. Chrome dodaje również to schludny co, gdzie można - TOMAS REIMERS: Bo ludzie jak Mike zaczął robić to dużo i irytujące użytkowników, co pozwala , aby zobaczyć informacje. MIKE RIZZO: Tak. TOMAS REIMERS: Czy mamy jakieś pytania o tym, o JavaScript biblioteki, biblioteki, lub znalezienie wygląd, co tworzenie stron internetowych jak w świecie rzeczywistym? Kończy nam się z czasem. Więc nie jestem pewien, że będziemy mieć czas na wdrożenie chyba że jest to naprawdę szybkie. Jesteśmy dobrze? MIKE RIZZO: wszystko, co faceci chcieliby zobaczyć naprawdę szybkie w, jak dwa minut lub mniej? TOMAS REIMERS: Wszystko możemy wyjaśnić? Jak pisać - PUBLICZNOŚCI: [niesłyszalne]? MIKE RIZZO: Tak, tak that's - TOMAS REIMERS: Możesz po prostu naciśnij Control-U na stronie internetowej. MIKE RIZZO: Och, nie wiedziałem, że. TOMAS REIMERS: Myślę, że tak. Control-U. Tak. MIKE RIZZO: Och, tak, to jest kod na stronie. Ale jeśli rzeczywiście chcą ściągnąć nasze plików i wszystko, jest gospodarzem na github.com TOMAS REIMERS: slash moje imię - Tomas Reimers - ukośnik Seminarium CS50 myślnik. MIKE RIZZO: I można wszystko tam. TOMAS REIMERS: To jest to, co GitHub Wygląda na to, przy okazji. Więc znowu, gdy widzisz otwartego źródła Projekt, zazwyczaj, będą czytać mi tam, że można odczytać. A jeśli wrócisz, można zauważyć, że masz zip do pobrania, które będą pozwala pobrać źródła Kod do włączenia Produkt w swoim własnym rzeczy. MIKE RIZZO: Tak, a jeśli po prostu kliknij na index.html bardzo szybko - TOMAS REIMERS: Zobaczysz tutaj Kod źródłowy dla naszej strony internetowej. MIKE RIZZO: Również zapomniałem wcisnąć prawy zanim z wielkim stole to włączone, ale jest tam również tabela z chmods że zawarte tylko dla jasności. Ale jeśli przewiń w dół, aby dno, nie faktycznie bardzo wiele z JavaScript rzeczy w ogóle się z tym. To wyłącznie od wszystkiego jeszcze, że mieliśmy. Więc dziękuję wam za przybycie i słuchania. Mamy nadzieję, że to był bardzo pomocny. Jeśli masz jakiekolwiek JavaScript powiązany pytania lub po prostu chcesz porozmawiać o co innego jak to, co innych fajnych rzeczy można to zrobić za pomocą JavaScript, chcielibyśmy z tobą porozmawiać. TOMAS REIMERS: Jeśli masz pytanie o projekcie lub jeśli może to być istotne, będziemy prawdopodobnie trzymać się Trochę po tym. Ale poza tym, mają udany weekend. MIKE RIZZO: Tak, cieszyć. Do zobaczenia. TOMAS REIMERS: Do zobaczenia.