>> 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.