ALLISON Buchholtz-AU: Dobrze wszyscy. Witamy z powrotem do sekcji. Jest to nasz przedostatni odcinek. To takie smutne. Nie wiem, co mam zamiar zrobić nie widząc was w każdy poniedziałek. Myślę, że powinniśmy just-- Może moglibyśmy po prostu tu spotkać i zjeść kolację czy coś. Nie wiem. Przyniosę jedzenie zamiast. Będziemy po prostu porozmawiać. Ale tak, w przyszłym tygodniu będzie ostatni odcinek. W tym pamiętać, masz quiz w przyszłym tygodniu. Wiem, że zapomniałem zrobić mój, jak, dwa tygodnie wyprzedzeniem w zeszłym tygodniu, ale miejmy nadzieję, że chłopaki Wiedziałem, że to nadchodzi. Mam nadzieję, że jest to jeden z ostatnich midterms dla was za semestr. Ale to będzie obejmować wszystkie Materiał, że posunęliśmy się. Więc to nie jest tak, jak można po prostu zapomnieć o cztery pętle lub zmienne. Ponieważ dowiedzieliśmy się, te na początku te są oczywiście uczciwa gra dla quizu. To będzie ten sam format, sam Długość, więc was już są do tego przyzwyczajeni. Nie będzie kodowania problemy ręcznie, może jakaś prawda, fałsz, może jakaś krótka odpowiedź. Tak powinno być zapoznanie się z formatem, zwłaszcza jeśli wziąć testy praktyczne. Ale tak jak mówię tutaj, że to skumulowany, ale jesteśmy na pewno będzie skupienie się na rzeczy z dalszego tygodniu sześć. Tak, jesteśmy prawdopodobnie nie będzie zapytać o ile bajtów są w każdym rodzaju lub te różne rzeczy, ale pewnie będzie zainteresowany rzeczy jak połączonych listach, lub różnych struktur danych, lub różne algorytmy że rozmawialiśmy o. Więc upewnij się, że jesteś naprawdę się na tych, a jeśli potrzebuje żadnych środków, tutaj jest wiele zasobów. Dałem wam rodzaju z szybkiej listy tam. W przyszłym tygodniu będzie quizu przeglądu w tym czasie. Więc jeśli masz jakiekolwiek pytania lub określone tematy, konkretne rzeczy w quizie, który chcesz przejść, proszę wysłać je do mnie z wyprzedzeniem, więc mogę rodzaj przygotować jakiś materiał do tego. I oprócz tego Przegląd sekcji, my będziemy również trzyma całego kursu opisz jak my ostatnio. I to będzie wykonywane przez tych samych ludzi. Nie wiem, czy to sprawia, że ​​lepiej lub gorzej, ale to będzie mnie, Hannah, Davan i Gabe ponownie. Więc jeśli chcesz przyjść zobaczyć nas wszystkich ze sobą przekomarzanie i przejść przez quizu ocena, należy zdecydowanie dojść do tego następnego poniedziałku również. Więc po prostu masz poniedziałek dżem pakowane recenzji quizu, co jest dobre bo wtedy trzeba Wtorek na przetwarzanie przez wszystko. Ale na pewno to sprawdzić z tych środków. Study.csv.net jest zdecydowanie, ja uważają, jeden najbardziej użyteczne przede wszystkim dlatego, że posiada Wiele przykładowy kod, ma wszystkie punkty zasilania ze wszystkimi uwagami na jej temat, które są naprawdę, co rysuję najbardziej z moich materiałów odcinku od. Jeśli jest coś, w ostatnich sekcje, które mogą Wysłałem że nie może mieć zdobyć, po prostu daj mi znać. Podobnie jak w ubiegłym tygodniu przykładowy kod, jeśli ktoś nie dostał, że po prostu napisz do mnie lub przyjść ze mną rozmawiać, a ja upewnij się, że masz to. Więc z tym, dziś mamy zamiar będzie mówić o JavaScript. Mamy tu więc Tommy, kim jestem tylko mówić do ciebie w nocy. Uwielbiam Tommy. JavaScript jest jego ulubiona język, jak mówi tutaj. Spróbują i powiedzieć, że jest to nie najlepsze, i będą się mylić. Więc Tommy jest mistrzem JavaScript. Nie jestem w jego poziom, ale ja na to: "Tommy, jak mogę nauczyć te dzieci JavaScript? " Więc mam kilka wskazówek, więc miejmy nadzieję, że wyszło. Tak więc kilka rzeczy wiedzieć jest to, że JavaScript jest skryptów po stronie klienta język, więc podczas gdy PHP jest coś że za bardziej po stronie serwera, było przesłać do serwera, opracowany i wykonany tam. Ten jest wykonywane na własnym komputerze. OK? Więc załadować jakąś stronę JavaScript, i wykonuje na komputerze. Składnia jest bardzo podobna do C i PHP. Mamy zamiar przejść przez kilka przykładów JavaScript, i masz zamiar zobaczyć, że sposób mówimy o zmiennych, pętle, i warunki są bardzo podobne. OK? Fakt, że są one tak podobne, jest prawdopodobnie będzie do wyłączenia niektórych z was w górę, w niektórych przypadkach, tylko dlatego musisz włączyć trochę C w których nie należy. Może spróbuj i wpisz coś kiedy nie należy pisać. I na tym, jedna rzecz wiedzieć, jest to, że JavaScript jest dynamicznie wpisane języka, takich jak PHP. Więc jeśli faceci pamiętam z sekcji w zeszłym tygodniu, kiedy byliśmy rodzaj robi Crash Course nasz PHP, widzieliśmy, jak jeden łańcuch może być zamienił się w jednym int, i tak dalej. Typ zmiennych są ustalane w czasie wykonywania, więc mogą one się zmieniać w Przebieg programu, w ten sam sposób, że nigdy Naprawdę zadeklarować typy zmiennych PHP, będziemy robić to samo co tu, gdzie my naprawdę nie jesteśmy do zwalczania rodzajów naszych zmiennych że tak powiem, jak my w C. I wtedy jedna rzecz że jest całkiem fajny jest że można błędu sprawdzić za pomocą konsoli, z tym wielkim funkcji console.log, które pozwala wydrukować różne zmienne lub obiektów, które my będziemy rozmawiać. Podobnie jak w zeszłym tygodniu, kiedy byłem jak "używać tej funkcji," z wysypiska z pset Funkcja ta jest chcesz używać, console.log. Byłem tak zaskoczony, jak wiele studenci w godzinach pracy nie wiedział o funkcji zrzutu. A ja na to: "chłopaki, to wola Twoje życie jest o wiele łatwiejsze. " W porządku, tak aby był rodzaj tylko krótki rzeczą, jak zawsze, mamy przykłady. Wiem, że wy miłujecie tych. Więc tutaj jest przykładem bardzo złożyć tutaj prosta obsługa JavaScript. Więc nie jest to po prostu się do tworzenia Wyskakujące ta, która mówi, "Hello world", gdy ci wejść na stronę, ale niech spróbować przejść przez to trochę. Tak oczywiście jest to tylko jak normalnego index.html. Tak, tylko nasz normalny szablon tutaj i mamy HTML, mamy głowę, i podobnie jak z CSS, jak zawiera jakiś plik zewnątrz, prawda? Mamy pewne script type tekst jest obsługa JavaScript. A źródłem jest hello.js, co jest tutaj. To jest cały plik z hello.js. A potem mamy jedne tytuł i niektóre HTML ciała że tak naprawdę nie obchodzi. Co się dzieje, kiedy możemy otworzyć tej strony, automatycznie wykonuje skrypt. OK? Więc JavaScript będzie wykonywać automatycznie. Więc to, co zamierza zrobić, to będzie natychmiast pójść i wykonać to. I to się mówi, "alert. Witaj świecie ". Który alert to funkcja faktycznie generuje to pole. OK? Tak więc jest to rodzaj wszystkie Encompass. Nie ma nic ekstra mieliśmy zrobić oprócz tylko czujny, a następnie, co chcieliśmy w naszym Alert polu. OK? Tak, że po prostu super proste przykładem tego, co może zrobić JavaScript. Jeden z naprawdę fajne rzeczy, jak zobaczymy, jest to, że obsługa JavaScript, pozwala manipulować stron internetowych, bez konieczności załaduj je za każdym razem. Tak więc, jeśli want-- na przykład, jeśli Ci są unoszące się nad czymś, jeśli wy kiedykolwiek widziałem jak paski menu, lub gdy po najechaniu na niektóre Temat pojawia się menu rozwijane, to dlatego, że z JavaScript. OK? Więc nie jesteś przeładowywania całej Strona dostać to menu, aby pokazać się, jesteś po prostu patrząc na niektóre specyficzne działania, które użytkownik podjął, które nazywane są wydarzenia, które dostaniemy się, a gdy widzisz, że można powiedzieć, "OK, edytować coś na ten temat Strona i sprawiają, że wygląda inaczej, ale tylko edytować te konkretne rzeczy. Nie należy ponownie całą sprawę. " Tak jest w rzeczywistości o wiele ładniejszy, i nie masz przeładowania strony, i to jest naprawdę fajne. Więc deklaracje zmiennych, więc można trochę zobaczyć, I umieścić na górze tutaj, luźno wpisane. Więc to jest bardzo podobne do PHP. Nie musimy powiedzieć JavaScript jaki rodzaj jesteśmy spodziewa się każdej z tych zmiennych być. Mogą to być cokolwiek typy chcemy. Tak więc można zauważyć, w tym przypadku, deklarujemy je bardzo prosto, tylko z "var" a następnie co chcemy nasza nazwa zmiennej być. Należy zwrócić uwagę, że kiedy cię umieścić var ​​przed nazwą zmiennej, to lokalnie celownicze go. OK? Jest to całkowicie uzasadnione dla Ciebie całkowicie wystarczy usunąć var i po prostu s równa CS50 i że będzie tylko zmienna globalna. OK? Więc można zainicjować to w obie strony, Wszystko zależy od tego, jak chcesz. Jeśli więc inicjowanie że wewnątrz funkcji, i chcesz tę zmienną pobyt w tym o zasięgu funkcji, będziesz chciał zrobić coś jak var nazwa zmiennej, kontra, jeśli chcesz o zasięgu globalnym, to może po prostu zrobić nazwę Zmienna a następnie co chcesz, to równy. OK? To jest rodzaj chłodnym rzeczy tutaj, bo jeśli zauważymy nasza zmienna b zaczyna się jak prawdziwe. A co to does-- może ktoś mi powiedzieć co to robi? Tak więc mamy pewne ostrzeżenie. Co typu b się na początku? PUBLICZNOŚCI: Boolean. ALLISON Buchholtz-AU: Boolean. Prawo. A potem przypisać b do tego ciągu, prawda? Więc tutaj, jaki typ b być? To byłby ciąg, prawda? Więc co jest ważne dla Ogłoszenie jest to, że w C, to prawie nigdy nie może zrobić coś w tym stylu. Musielibyśmy mieć zmienną, rzucić go jako coś innego, Może zrobić z dwóch funkcji ja, iść z opłaty do liczby całkowitej. Ale jeśli widzimy tutaj, b bardzo łatwo zmienia typ. PUBLICZNOŚCI: Czekaj, więc można po prostu być jak "dokonać b liczby całkowitej?" ALLISON Buchholtz-AU: Tak. Możesz po prostu przypisać b do liczby całkowitej. PUBLICZNOŚCI: Naprawdę? ALLISON Buchholtz-AU: Tak. I to byłoby int. Więc twoje zmienne mogą się zmieniać w Przebieg programu też. Nie są one ściśle wpisane. To jest bardzo luźno wpisane. OK? Zasadniczo swoje zmienne mogą robić, co chcą, a my niby widział w PHP. Mogą zrobić jakieś szalone rzeczy, więc ważne jest, aby być bardzo ostrożnym. Imię i zmienne. Jeśli nie, to się nagle masz zamiar być jak, "Czekaj, myślałem, że to ciąg, a teraz to int, i nie jestem pewien, co tu się dzieje. " Więc jest to tylko prosty przykład pokazując, jak zmienna może łatwo zmienić jego typ na Przebieg programu. OK. Tak to powinno wyglądać super, super znane. To są nasze pętle w JavaScript. Są one dokładnie takie same, za wyjątkiem zamiast czterech int i jest równa zero, możemy tylko powiedzieć, var i jest równa zeru. A potem może mamy ten sam rodzaj stanu, sam rodzaj aktualizacji, i Plus Plus działa dobrze. Więc czwórki są takie same, whiles są same, i zrobić chwilami są dokładnie takie same. Sam rodzaj formacie ogólnym. Zauważamy, cztery, nawiasy, wsporniki, to wszystko sam. Również nie będzie średniki gdy mamy do przykładu kodu. Zobaczysz, że to całkiem wiele same jak C. Do deklaracji funkcji, Ponownie, bardzo podobne. Mamy kilka funkcji, które po prostu mówi, że jest to funkcja, a następnie Nazwa naszego Funkcja i wejścia. I znowu, jeśli zauważymy, my mają tutaj żadnych rodzaje ogóle. Prawda? Mamy nic nie mówiąc, że te muszą być ints lub dwuosobowe lub pływaków. Mogą one być co chcą. Ważne jest zauważyć, że musimy wcześniej funkcję zapisu niech wiedzą, że JavaScript jest to rzeczywiście działa. Więc to jest tylko niektóre proste suma Funkcja, która zwraca X lub Y, a następnie, co też fajne jest to, że można rzeczywiście przypisanie funkcji do zmiennej. A więc w tym przypadku, suma jest teraz Funkcja, która faktycznie nie sumę. Więc jeśli zauważysz tutaj mamy stanowisko, nazwa funkcji, wejścia. Prawda? Tutaj musimy po prostu funkcję i wejść. Tak to się nazywa anonimowa funkcja. I to jest coś, co powinno być nowe dla większości z was, chłopaki, jeśli nie wszystkie z was. Więc w zasadzie, co to oznacza to, że nie robimy muszą imię naszego Funkcja tego przypadku. Możemy po prostu powiedzieć: "OK, będę mają tę funkcję wykonywaną tutaj są jego wejścia, i tu jest to, co zamierza zrobić. " A zwłaszcza, gdy przypisujesz Funkcja do jakiejś zmiennej że masz zamiar manipulować, Nie koniecznie trzeba wymienić, bo będziesz mieć na myśli mu przez tę zmienną imię i nazwisko, a nie co Funkcja faktycznie nazywa. OK? Jeśli więc widzimy tutaj, że jakieś zmiennej sumę teraz która jest równa suma trzech do pięciu. A my się tego. A to po prostu jakiś wpis, trzy oraz pięć równa liczbie. To będzie po prostu złączyć oraz co nasza odpowiedź była na łańcuchu. Również fajne, plus można łączenia ciągów. Dla JavaScript, jak w PHP, HTML i CSS, jak powiedzieliśmy, Wiele z tego, że jesteśmy rodzaj podejmowania koła szkolenia off tutaj a faceci mają dużo wiedzą jak naprawdę zrozumieć te rzeczy. Są nieco inne, ale nie są one tak obce i że nie można Google rzeczy lub szukać ich w Internecie ze szkołami W3. A tak naprawdę czeka na ciebie Chłopaki do, rodzaj, eksperyment i uczyć się na własną rękę. Tak, wiem, że to może wydawać się trochę mniej dokładne niż niektóre z rzeczy, c robimy, ale to właściwie bez powodu. Ale mam nadzieję, że nie jest to zbyt inny, a to nie jest przytłaczająca. Więc tablic w JavaScript, znowu bardzo, bardzo podobne. Prawda? Mamy pewne zmiennej tablicy to równa pustych nawiasów, i to tylko pusta tablica. Jest to często nazywane dosłowna notacja tablica. To tylko jedna rzecz, my to nazywamy. Jeśli widzimy tablicę dwóch tutaj, mamy jedne dosłowne tablica ma trzy elementy, prawda? A potem mamy jedne var Trzeci element to niektóre zmienne to tylko będzie posiadać ten ciąg, JS. Elementy, dobre zauważyć, są oddzielone przecinkami, tak jak byśmy się spodziewali. I można również uzyskać dostęp do nich, jak my w C, z tym zapisie indeksu, prawda? Tak różne od PHP Teraz wracamy po prostu rodzaj odnosząc do rzeczy przez indeks. Podobnie jak C, to również wskaźnik zera. Czuję, że to będzie naprawdę okrutne jeśli nagle się jedną JavaScript Indeks, i trzeba było całkowicie zastanowić się, jak myślisz o tablicach. Jeden fajne jest to, że zamiast konieczności do-- Jeśli kiedykolwiek chciał długość tablicy, Może iterację niego aż znajdziesz jakiś koniec, lub to po prostu wiedzieć, co to jest. Ponieważ JavaScript jest bardzo luźny w więcej sposoby niż tylko rodzaju, jak widzimy tutaj, możemy po prostu zrobić tę tablicę większe, ponieważ my decydujemy. Jeśli zauważamy tablicę trzy ma trzy rzeczy, na początek, ale potem nagle, jesteśmy jak "Och, to tylko żart. Jesteśmy rzeczywiście będzie do 101 rzeczy. " Więc jeśli kiedykolwiek chcesz wiedzieć Rzeczywista długość tablicy, możesz zrobić to w ten sposób. I mamy zamiar zobaczyć wiele w tym zapisie, w przykładach ale z JavaScript to zazwyczaj co Obiekt, który mówisz kropka niezależnie od rodzaju funkcji które mają być stosowane. OK? Więc w tym przypadku, nasze Obiekt jest tablica dwa, i mówimy, że chcemy długość tablicy dwa. Tak to właśnie nazywa się jak długość na to. I że zwróci długość. Również coś, aby pamiętać, że jeśli widzimy nasze tablice, w przeciwieństwie do C, nie mają być wszystkie tego samego typu. Jest to o wiele bardziej jak PHP. JavaScript jest w zasadzie tak samo jak to ciekawe Meld C i PHP. Tak więc zajmiemy się tym. Na razie, niech po prostu założyć, że twoje tablice są w zasadzie jak tablice w C, w które są zerowe indeksowane. OK, więc to jest wszystko. Możesz też po prostu przedłużyć Tablica na cokolwiek Indeks chcesz. Niniejsza prawdopodobnie seg winy na siebie lub dać jakiś błąd, JavaScript jest jak, "Nie, jest w porządku. Mam to. Będziemy po prostu iść prosto gdzie chcesz. " OK, więc obiekty są bardzo ważne. Wy będzie używać dużo tych w P zestawu, jeśli dobrze pamiętam. Więc rzeczy, że są to podobne w C są elemencie. Więc można myśleć about-- kiedy idziemy na przykład w prawo po to myślę, że będziesz zrobić dużo więcej sense-- ale w zasadzie korzystać z obiektów do organizowanie zajęć związanych informacji. Kiedy rozmawialiśmy o elemencie w C, często mówić o studenta, który miał jakąś nazwę, ID, dom, wiesz, koncentracja. A to niby to samo że używamy obiektów tutaj. To jest po prostu zorganizować podobne informacje. Można również pomyśleć o nich jako bardziej podobny do tablic asocjacyjnych w PHP. Więc będzie to rodzaj rzeczy gdzie mamy trochę klucz z jakąś wartość, bardzo podobne do PHP. Więc można zainicjować niektóre pusty obiekt, jak widzimy tutaj, tylko w klamrach. Tak więc tablice są nawiasy kwadratowe. Puste obiekty są nawiasy klamrowe. Dobry rozróżnienie mieć. A to tylko dwa różne sposoby, aby ustawić właściwości. Jest to więc rodzaj dużo bardziej sposób jest podobna do PHP, z naszym tablice asocjacyjne, z nasz klucz, i nasza wartość, podczas gdy ten is-- będziesz zobaczyć wiele więcej w JavaScript. To wydaje się być konwencja. W ten sam sposób, w jaki zrobiła Tablica dwie długości kropka, to mówi, "OK, daj mi to atrybutów tego obiektu. " Prawda? Tak samo było jak, "daj mi Długość atrybutem tablicy dwóch " ten mówi: "daj mi własnością naszej pusty obiekt. " Czy w tym przypadku jesteśmy przypisanie go do jakiejś wartości tutaj. Ale można również uzyskać dostęp do tego w ten sposób. A to tutaj to tylko pokazano dwa różne alarmy. Więc byłoby to pokazać powiadomienia będzie dokładnie taki sam, to tylko dwa różne sposoby dostęp do elementu, który chcemy. Czy to ma sens dla każdego? Czuję się jak ten prawdopodobnie ma więcej sensu, tylko dlatego, że jesteśmy spadając z PHP. Ale jak to zrobić, więcej przykładów, w tym jest dosłownie tak samo. Wiele z nich jest po prostu zmienić w składni. OK, więc przykłady. Kocham przykłady. Więc tutaj jest kilka CS50 zmienna, która jest przedmiotem, i przechowywać wszystko Informacje o tym. Mamy więc oczywiście, instruktor, TFS, psets i taśmą. Tak więc widzimy, są to prawie wszystkie z różnych typów. Prawda? Więc można przechowywać przedmioty cech różnych typów. Możemy myśleć o this-- to bardzo podobna do naszej tablicy asocjacyjnej w PHP. Więc klucz, wartość, klucz, wartość, Klucz, wartość, tak dalej, i tak dalej. Co jest interesujące także w taki sam sposób że możemy mieć tablic w obrębie macierzy, możemy także obiekty w obiekty lub tablice w obiektach. Nigdy tak naprawdę ogranicza się do tylko jednym rzeczy. Możemy bardzo Inceptionesque, po prostu nie poddawać się w dół króliczej nory tam. Więc jeśli zauważymy, my jakiś kurs, który jest ciągiem znaków, instruktor to ciąg, i tablica, int i logiczna. Tak więc wszystkie z tych różnych miejscach. W porządku, więc, mamy jeszcze jednego. Więc w tym przypadku, mamy Tablica obiektów. Więc tak jak obiekt może mieć tablicę w nim. Możemy również tablicę obiektów. Może to być przydatne do myśleć o podobny do rodzaju o tym, jak mieliśmy hash Stół, mieliśmy tablicę wszystkim te różne rodzaju strukturach, które były wskaźniki do inaczej węzły i etażerka. Jednak w tym przypadku, tablicę obiektów. Tak to jest jak tablica asocjacyjnych. Tak więc mamy pewne pierwszy element będzie być obiekt o nazwie James i domu Winthrop. Chłopaki mogą pamiętać coś bardzo podobny do tego z ostatniego pset, gdzie, jeśli Ciebie wyciągnął coś z bazy danych, Pierwszy rodzaj rzecz w swojej tablicy było wszystkie informacje o Pierwszy użytkownik, który ją spotkał, a potem trzeba było się, że wskaźnik aby ich akcji lub ich pamięci podręcznej lub cokolwiek. Więc to jest bardzo podobne rzeczą, tylko mała zmiana składni, zmień trochę w słowa używamy, aby je opisać. Więc jeśli chcemy, może ktoś powiedzieć Alarm mi, co to by tu zrobić? Albo co to trochę kod będzie dla nas zrobić? PUBLICZNOŚCI: To da Ci wszystkie nazwy. ALLISON Buchholtz-AU: Tak, tak, to po prostu ostrzec wszystkich nazwisk bo to przejść domek i tak, że to zaczynają się od zera. Tak że to powiedzieć, OK, szukamy Ten pierwszy obiekt, który jest pierwszym gniazdo w naszej tablicy. I mówi: "daj mi atrybut, nazwę tego obiektu. " Więc idziemy tutaj, my skanowania, że ​​znajdziemy nazwę, i chcemy wydrukować James, Molly i Carl. Wszelkie pytania do tej pory? JavaScript niestety masz zamiar być robi dużo patrząc na swojej własna, zastanawianie się, składni, zmagają się z nim. Ale oczywiście zawsze jestem tutaj, godziny pracy są zawsze tutaj. Mogę być we wtorki w tym tygodniu. Więc jeśli jesteś tam, można przyszedł mnie odwiedzić w tym tygodniu. Byłoby wspaniale. OK, więc DOM Document-Object Model. Więc to jest tylko sposób że lubimy myśleć o tym, jak nasz HTML i wszystko w nim jest zorganizowane. Leży to coś prawdopodobnie pojawią się na quiz. Wiem, że mój rok, to było jak tu jest Plik HTML, wypełnić DOM dla niego. I po prostu wypełnić w małych rzeczach. Powinny być łatwe punkty z nadzieją. Mam nadzieję, że będziesz see-- PUBLICZNOŚCI: [niesłyszalne] ALLISON Buchholtz-AU: Tak widzisz to drzewo tutaj? Publiczność: Tak. ALLISON Buchholtz-AU: Więc będą prosić korzystania wypełnić, co się dzieje w organizmie. Może w organizmie, mamy jedne div lub mamy kilka akapitów, i poprosimy Cię o wypełnienie Drzewo bardzo podobnie jak ten. Więc będziemy chodzić przez to. Więc Dokument-Object Model jest po prostu sposobem struktury i myślę o naszej HTML graficznie. A także, gdy mamy do bardziej JavaScript, to będzie sposób, że my rzeczywiście manipulować różne elementów na stronie. Musimy znaleźć sposób, aby uzyskać dostęp rzeczy w naszym HTML, i tak to daje nam bardzo betonu standaryzowany sposób w różnych stronach internetowych, aby to zrobić. Więc jeśli tylko przejść przez to tutaj oczywiście nasz dokument jest jak cały nasz plik. To oczywiście ma sens że jest to najwyższa rzeczą, a następnie mamy rzeczywisty HTML, która odpowiada tej zmiennej tutaj. Także, jeśli w tiret tagi prawidłowo, a następnie stworzenie tego drzewa DOM staje się bardzo proste. Tak więc mamy tu trochę głowę. Mamy pewne ciało, które widzimy macierzystych off HTML, dlatego mają głowy i ciała. W obrębie głowy, mamy jedne tag tytuł, tytuł znacznik końcowy, więc wiemy, że przychodzi po głowie. A w naszej tagu tytułu, mamy Hello, world. OK? Więc to jest ta cała gałąź lewa. A potem na prawej gałęzi strony tutaj widzimy, że mamy HTML, OK zrobiliśmy tę część głowy, patrzymy tylko na ciele, więc mamy jakiś obszar ciała. Oraz w tym, jedynie co mamy jest hello, world. OK? Gdybyśmy mieli takie rzeczy jak niektóre Uchwyt p, a następnie witam, świat, a potem jeszcze Wspornik str pożegnanie, świat, mielibyśmy dwa pęcherzyki spadając tutaj. Ponieważ oboje są w ciele, ale są oddzielne akapity tym przypadku. Jest zdecydowanie praktyka na które w poprzednich konkursach, jak również dużą online w nim. OK, tak, to tylko pozwala nam zobaczyć wszystko ładnie i manipulować rzeczy bardzo systematycznie. OK? Mamy dokładnie wiedzieć, jak przechodzić przez to drzewo, więc wiemy, co chcemy, aby uzyskać dostęp. OK, więc to dlatego chcemy mieć tego rodzaju modelu, tak, że możemy korzystać z rzeczy, jak to, i rozumiemy, co one oznaczają, i są znormalizowane we wszystkich rzeczy, które robimy. Więc tytuł dokumentu kropka jest po prostu Tytuł our-- wszystkie te są dość wymowne, Lubię myśleć. Więc pierwsze trzy przykłady są tylko powiedzieć, "OK, po prostu daj mi Tytuł tej strony. " Więc to daje, co Odpowiada to w tytule. Dokument dot ciało będzie Ci to, co jest w tych tagów ciała. Więc można manipulować, że. Oraz dokument ciała dot dot wprowadzić HTML jest bardzo fajny, a może nie jest takie jak Super intuicyjne, ale wewnętrzna HTML odpowiada to tutaj. Więc jeśli kiedykolwiek chcesz manipulować tekstu na stronie, zazwyczaj masz zamiar robić coś z ciała dot wewnętrznej HTML. OK? Tak więc wewnętrzna HTML zwykle patrz to, co jest w rzeczywistości między tymi tagami. OK? A potem przydatne funkcje. Więc jeśli chcesz dostać każda z nich, każdy element mamy pewne Id, klasa Nazwisko lub nazwa znacznika. Jest to bardzo podobne do rzeczy zrobiliśmy z CSS, prawda? W przypadku, gdy mamy kilka selektorów, że odpowiadają zarówno tagu, klasa że je, lub Id dać. To jest bardzo podobny sposób. Jeśli masz coś, co ma jakąś klasę psów, i mówisz uzyskać elementy o nazwie znacznika, i umieścić psa w there-- lub przykro, nazwa klasy. Możesz umieścić kropkę tam. To będzie powrót wszystkich tych, elementy do was, które mają tę klasę. Więc można manipulować tylko tych. W ten sam sposób, może po prostu chcą manipulować jakiś nagłówek, więc nagłówek h1 niektóre, tak jak my. Możesz nie dostać elementy po tagu wymienić, bo h1 jest nazwa znacznika. I w ten sam sposób, jeśli chcesz uzyskać niektóre unikalne rzeczy, możesz zrobić tag dostać. Pobierz elementu przez Id. A w rzeczywistości są dużo tych. Są to tylko trzy z bardzo jak wielu. Więc jeśli w trybie online, jak Będę zachęcać można zrobić, i zrobić kilka badania na własną rękę, Zdecydowanie polecam patrząc na wszystkie z nich. Mogą one być super przydatna, zwłaszcza w przypadku chcesz po prostu rodzaj manipulacji bardzo konkretne rzeczy, bez konieczności przejść i spróbować analizować się wszystkiego. OK, więc ostatnią rzeczą, jest zdarzeń JavaScript. Więc kiedy rozmawiałem wcześniej o pójściu na stronie internetowej, a po najechaniu na coś, lub myszy znajdzie się nad czymś, jeszcze coś się dzieje. To jest to, co chcemy myśleć o jako wydarzenie. Tak więc to, co mamy, które mogą być przydatna tutaj jest onclick. Więc mój był przy aktywowaniu, które, jestem całkiem pewien, to tylko przy aktywowaniu. Również ton z nich że można szukać. Istnieje cała lista w Internecie różnych rzeczy że można słuchać. Ale są zdarzeń JavaScript w zasadzie tylko reagować na rzeczy że użytkownik robi. Prawda? Więc użytkownik nie coś, że to wydarzenie, i JavaScript odpowie jednak chcesz go lubić. Będzie to odpowiednio zareagować. Więc w tym przypadku, mamy niektóre onload okna kropka. Więc co to mówi, jest "czekać aż do załadowania okna. " OK? Kiedy więc wszystko jest załadowany, onload, Następnie można wykonać tej funkcji. Więc kiedy wszystko jest załadowany, będziesz mieć jakiś przycisk wyszukiwania że dostaje element przez Id, i drukuje cokolwiek to elementem jest przycisk Szukaj. A potem mamy tę zmienną, mówimy: "OK, onclick". Tak więc, gdy usłyszysz kliknięcie na przycisk Szukaj, wykonania tej funkcji, która jest Alarm, kliknąłeś przycisk Szukaj. Więc co się dzieje is-- to miłe Trochę graficzne przedstawienie tutaj. Tak więc nasze ładunki dokumentów, to nasz onload, odnajdziemy Szukaj przycisk, jest następująca. Szukamy dla naszej przycisk Szukaj. I wtedy, gdy przycisk Szukaj jest kliknięciu, odpowiada tutaj. Onclick. Potem w końcu ostrzec naszych użytkowników, co jest to ostatnia linia tutaj. OK? Tak więc każdy z tych czterech kroków wystarczy odpowiada czterech pól na dół na dole. Czy to ma sens dla każdego? I wtedy jedna rzecz, że jestem po prostu wspominając o bardzo, bardzo krótko, że ja zachęcić was do idź się bardziej w to jQuery, który jest po prostu biblioteki który jest zbudowany na szczycie JavaScript. Jest to bardzo użyteczne, ponieważ w większości bibliotek. Istnieje wiele funkcji. Tak więc jeśli jest coś, co kiedyś chcesz zrobić w JavaScript, Twój pierwszy instynkt Nie należy pomyśleć z ", jaką funkcję powinna I kodować? "Powinno być, "Niech mi ktoś to zrobiła to za mnie. " Because dziewięć razy na dziesięć, ktoś to zrobić już, i prawdopodobnie to zrobić lepiej. Ludzie spędzają dużo czasu robi to, i JavaScript jest bardzo szeroko stosowane, więc ludzie są stale starając się zrobić to lepiej. I jQuery ma wiele funkcji że prawdopodobnie będzie przydatna w ostatecznym projekcie, jeśli jesteś cokolwiek z projektowania stron internetowych. Jak chciałbym powiedzieć, "praca mądrzej, a nie ciężej. " Jeśli faceci to zrobić, to będzie świetnie. Kiedy jesteśmy na hackathon ja nie Chcemy was wszystkich zestresowany. Chcę, aby być w stylu: "Mam tego. jQuery dostał moje plecy. Nie muszę pisać te funkcje. " Tak tylko dwie rzeczy do pamiętam, będę niech chłopaki wyglądają bardziej w jQuery na własną rękę. Wszystko, co mam do powiedzenia to to robi niesamowite rzeczy całkiem i może mieć swoje życie dużo łatwiejsze. Ale to, co chcesz mają to, co plik że masz zamiar używać go, będziesz chciał te dwie linie. Będziesz chciał Scenariusz jQuery js dot js. I rzeczywiście źródło będzie jakiś URL. Jeśli Google jQuery, Google faktycznie organizuje wszystkie pliki. Więc na pewno chcesz Wejście, że adres URL zamiast. Ja po prostu umieścić to tutaj dla uproszczenia. Wszystko to oznacza, gdzie znaleźć biblioteki jQuery. To ogromny, więc nie chcesz gościć go na własnym komputerze czy można go uniknąć, dlatego mają tendencję do po prostu umieścić w Google, że adres URL organizuje wszystkie pliki dla Ciebie. OK? Google go, obiecuję będzie tam. A następnie co Plik JavaScript, który jesteś za pomocą, więc jest to tylko niektóre zewnętrzne JavaScript plik, który używasz. W ten sam sposób, że link do naszej CSS plików, jest to ten sam rodzaj rzeczy. To po prostu linki do pliku gdzie twój JavaScript jest. I mam kilka przykładów z prostych JavaScript. Tak więc będziemy przez niego przechodzi. A potem w indeksie JavaScript, co jest złożyć tutaj JavaScript, jest to rodzaj owijki że masz dla jQuery. Jesteś już prawie 99,9 procent będzie mieć to w pliku index.js. Bo co to mówi się, "Nic nie wykonuje dopóki dokument jest w rzeczywistości gotowe ", który jest dokładnie to, co chcesz. Bo jeśli dokument nie jest gotowy, i jQuery zaczyna robić rzeczy, to jest po prostu bałagan. Więc zawsze chcą mieć to opakowanie. A następnie za rzeczy, które go tam, ja pozostawiają własnym uważne swoich chłopaków. OK, więc są jakieś pytania w prawo teraz o JavaScript w ogóle? Lub model DOM? Jeśli nie, mamy jakieś fajne przykłady, że możemy przejść, że chłopaki mogą mi pomóc w kod. Ale mam też będzie bardzo ładne, a jeśli nie chcę nic mówić dla nich, że jest w porządku. Mogę też po prostu dać przykłady. Ale wszystko na PowerPoint, zanim przejdziemy? Cool. Czuję się jak faceci muszą energii. Więc myślę, że mamy zamiar zacząć z pierwszym moim przykładzie partii. Mamy trzy przykłady, masz wybór. Więc mamy zegar, gdzie jedziemy do wdrożenia rzeczywistej zegar, który jest będzie aktualizować w miarę upływu czasu. Mamy tę świetną funkcję Twitter. This-- wiesz co, trzymaj się. Mamy zamiar zrobić to odejść. Bam. OK. Mamy tę świetną funkcję Twitter tutaj, that-- Wiem, prawda? To będzie wspaniałe. Czy faceci podekscytowany? To będzie policzyć znaków, które zostały pozostawione, więc jeśli napiszę teraz, Oczywiście wciąż mówi 140, ale wiemy, że nie jest to przypadek. A potem z naszej ostatniej tutaj, kliknij tutaj, aby bawić. Co się stanie, gdy jest klikamy, w tle na będzie zmieniać kolory. Więc macie swoje opcje co chcesz zrobić w pierwszej kolejności. Obiecuję wezmę, że bardzo łatwo się na was. Czuję się jak każdy trochę po prostu bardzo niski dzisiaj kluczem. Więc będę musiał przejść przez jak będziemy realizować wszystkie z nich. Jeśli chcesz gongu w, to świetnie, ale poczuć się jak każdy jest trochę zmęczony. Więc ja po prostu Cię przez te przykłady. Czy mamy coś, co chcielibyśmy zrobić w pierwszej kolejności? Każdy, kto? Brak preferencji? OK. Wiesz co? Jesteśmy na imprezie. Czuję się jak chłopaki potrzebują little-- tak, zrobimy najpierw jedna strona. OK. Więc co mamy here-- to nie powinien tam być. Teraz to jest dobre. OK. Tak więc to, co mamy tutaj tylko proste strony HTML że chłopaki powinni wszyscy być super znane z ostatnich dwóch psets firmy. Mamy tu do naszego typu doc. Czy każdy może zobaczyć? OK. Cool. Mamy HTML oczywiście. Mamy jakiś nagłówek, który jest związane z arkuszem stylów, które po prostu się mój czcionki ładne i duże i odważne. Więc nie martw się o to. Mamy pewne ciało z tła Id, OK? Ponieważ mamy zamiar być zmiana tła. Więc kiedy zmieniamy tło naszego ciała, pamiętamy z dwa tygodnie temu gdy mamy do czynienia ze stron internetowych. Więc dobrze, że, że. I mamy pewne Id równa imprezę. Ten h sędzią funta po prostu oznacza, że to będzie iść do tej samej strony. I tutaj się bawić, dlatego też, kiedy kliknij go, powinien zmienić kolory, na szczęście. A potem mamy kilka skrypt tutaj jest po prostu związana z tej partii js kropka Plik, który jest pusty, ponieważ nie mamy jeszcze nic zrobić. I to jest tak smutne. Ale bardzo szybko, to się zmieni kolory, i to będzie super. Więc jestem po prostu chodzić was przez jaki możemy podejść do tego. Więc pierwszą rzeczą, która Może chcemy zrobić, jeśli zmieniamy tło ciała, pierwszą rzeczą, możemy chcieć zrobić, to rzeczywiście chwycić co ciało jest, prawda? Więc chcemy mieć sumę, nasze tło, i jeśli zauważysz, Ja po prostu automatycznie po prostu zacznij pisać. Nie ma nic specjalnego, że my trzeba zrobić dla naszych plików JavaScript. Mogę zacząć deklarowania zmiennych, i deklarując losowe funkcje. I jest to o wiele bardziej wolna postać. To tak jak z C, daliśmy wszyscy te twarde zasady, a dorastał, więc jesteśmy jak "iść naprzód. Bądź wolny. Rób, co chcesz. " I to właśnie jest obsługa JavaScript. Tak więc mamy tu jakieś tło. Z naszego modelu DOM, wiemy, że może zrobić dokument dot uzyskać elementu, a jeśli zauważymy tutaj nasz organizm ma Id. Prawda? Możemy więc rozumiem dokument Id, i tu jest prosty. Jaki jest nasz Id, że chcemy tutaj? PUBLICZNOŚCI: Tło. ALLISON Buchholtz-AU: Tło. Doskonałe. I średnik na końcu. To nie zniknął jeszcze. Trzeba jeszcze swoich średników. OK. Więc to jest nasza pierwsza. A kiedy kliknij coś, my chcesz coś się stało, prawda? Więc może chcemy niektóre zmienne że czeka na kliknięcie. Co zamierzamy zrobić, to będziemy sprawić, by nasz związek bardziej podobna do przycisku. Więc będziemy mieć jakieś przycisk, który równa udokumentować dot uzyskać elementu przez Id. A jeśli mówię kliknij link, lub kliknij tutaj, aby bawić Link, co może być tutaj mój Id? Party. Poprawne. OK, nie jest tak źle jak na razie. Wszyscy się to, co robimy? OK, więc teraz mamy nasze przycisk, a my chcemy rzeczy zmienić, gdy klikamy na nią. Więc jeśli pamiętamy z naszego programu PowerPoint, bardzo prosty, co możemy zrobić jest tylko przycisk dot onclick, prawda? I to będzie równe niektórych funkcji. To jest anonimowa funkcja. I to właśnie as-- rzeczywiście jestem zamiar zrobić to trochę większy. Więc to, co właśnie zrobił tu mówię, OK, gdy kliknij przycisk, który naszym jest link, który po prostu, o których mowa, mamy zamiar wykonać ta anonimowa funkcja. Nie potrzebujemy żadnych nakładów. Nie obchodzi mnie, co mówi użytkownika. Po kliknięciu na tym, że jesteśmy zamiar robić, co chcemy, który jest zmienić kolor tła. OK? To dlatego, że nie mamy żadnych wejść, musimy po prostu anonimowych funkcji. A teraz jesteśmy naprawdę dzieje do napisania tej funkcji. Więc jest kilka sposobów, można może wygenerować losowy kolor. Sposób, że zrobiłem to było generowania trzech liczb losowych i konwertować je do potrójnego RGB. Więc to tylko pokazuje jakieś fajne rzeczy, że jeśli jesteś jak "Och, Muszę wygenerować losowy liczba. "jeśli go Googled, jest to, co można znaleźć. Mamy więc trzy różne rzeczy, var, znowu czerwony, zielony. Prawda? To są trzy rzeczy, które składają się na kolor. Niebieski, czerwony i zielony. Cool. I co możemy zrobić, jest to, że wiemy, że musi być pomiędzy 255 a jeśli spojrzał niektóre Generator liczb losowych, można dostać coś w matematyce dot losowe, które jeśli spojrzeć to się powraca do pewnej liczby od zera do jeden. OK? A co zrobić, nasze numery Trzyosobowe RGB przejść pomiędzy? Zero i co z tego? Co oni mogą przejść do? 255. Więc jeśli matematyka dot losowo idzie od zera do jednego, jak możemy chcesz przekonwertować to? PUBLICZNOŚCI: Czas? ALLISON Buchholtz-AU: Tak, dokładnie. Więc czas jest 255. PUBLICZNOŚCI: [niesłyszalne] To jak [niesłyszalne]. ALLISON Buchholtz-AU: Matematyka dot losowo. PUBLICZNOŚCI: Spoko. ALLISON Buchholtz-AU: Tak. JavaScript po prostu troszczy się o ciebie. OK. Tak więc możemy zrobić dla nich wszystkich. Prawda? Matematyka dot losowych razy 255. Zrozumiałem. Cool. Więc jest to, może to nie zwraca liczbę całkowitą. Prawda? Może trochę numer od zera do jednej, i powoduje, że jest lekko off, a nasze RGBS nie może być pływaki. Muszą być ints. Więc jeśli próbowałem, to pewnie jakieś złe zachowanie. Byłoby trochę odjazdowe. Więc co możemy zrobić, to chcemy, aby upewnić się, że są one zaokrąglone i można zaokrąglić w obu kierunkach. I zaokrąglone piętrze. Więc zawsze się że zaokrągla się w dół. Ale dzieje się z jak łatwo było po prostu liczbę losową, jak myślisz, mógłby piętrze ten numer? Jest bardzo podobny. Każdy pomysł? Więc jeśli losowo tylko matematyka kropka losowo, więc myślisz, że robimy podłogę? Matematyka dot piętrze. I można to zrobić również matematyki dot sufit. Okrągłe jest rodzaj niejednoznaczne dlatego, że nie wiedzieć, czy zaokrąglić w górę lub zaokrąglić w dół. Więc zazwyczaj zawsze robimy matematyki Kropka podłoga, sufit matematyki kropka. Ale honestly-- PUBLICZNOŚCI: Czy rundę piętro w dół? ALLISON Buchholtz-AU: Piętro zaokrągla w dół. A to tylko wybór z mojej strony. Więc teraz mamy nasze trzy numery które zostały losowo generowany i to, co mamy zamiar zrobić to teraz jesteśmy po prostu się zmienić tło. OK? Więc już mamy nasze tło rodzaj przechowywane w tym elemencie zwanego tła. Więc co można zauważyć to, że jeżeli Ci bawił się tym, chcemy zmienić styl. I to jest coś, że rodzaj byś Google i dowiedzieć się, lubię jak zmienić kolor. Ale sposób, w jaki ten kolor jest dostęp tło dot stylu dot tle. Więc to jest powiedzenie podano ten obiekt, tło, który odnosi się do tego, Element Id tam, mamy zamiar spojrzeć na Styl w stylu, mamy zamiar spojrzeć na tle. OK? A jeżeli i sprawdzić to, może warto trochę więcej sensu, ale to jest w zasadzie tylko powiedzieć, "Daj mi to bardzo specyficzny atrybut z tego, co określono wcześniej. " Więc co mamy zmienić go na to niektóre RGB, bo to ma sens. Używamy RGB trzyosobowe, prawda? A my have-- chcę się upewnić, że uzyskać odpowiednią liczbę cytatów tutaj. Więc co możemy zrobić, to mamy RGB, i będziemy to-- to jest jak konkatenacji, który jest czerwony. A potem chcemy jakiś przecinek. A potem chcemy Plus zielony, wtedy jakiś przecinek, a niektóre niebieskie. Więc te plusy po prostu na myśli łączenie. Więc to jest tylko tworzenie tego Ciąg, który będzie w ramach RGB. OK? PUBLICZNOŚCI: [niesłyszalne] oraz następnie zielone oraz następnie czerwony. ALLISON Buchholtz-AU: Tak, bo zawiedli, że się. Że jeden jest w porządku. Och, trzymaj się. Nie. Bo muszę się upewnić, że mam wszystkie te prawa. Więc wyjaśnię w uno momento. Zielony, niebieski, doskonały. Teraz skończę. Wierzę. OK. Więc co to jest, to, że w tle zostanie ustawiony na jakimś sznurkiem. Prawda? Czyli to, co my tu mamy. To będzie trochę RGB 255 przecinkami 255 przecinek zero, czy cokolwiek ci numer mają tam. Więc tutaj robimy, mamy jakiś ciąg. A to, co chcemy zrobić, to jesteśmy rodzaj dynamicznego tworzenia że kiedy faktycznie uruchomić ten program. Więc to jest jakiś ciąg. Plus skleja je Wartość, która ma czerwone, które skleja je przecinek, który skleja je z tego, co jest zielone, a tak dalej, i tak dalej. OK? Aż do samego końca, co jest zamykanie nawiasów tego RGB tutaj. OK? Więc co to będzie generować pewne polecenia naprawdę czyli RGB z trzech liczb że tło będzie teraz. OK? Zobaczmy więc, czy to działa. Mam nadzieję, że tak, bo jeśli to nie, mam zamiar być naprawdę smutne. O nie. OK, trzymaj się. Zdecydowanie tle dot stylu dot tle. Jestem zdecydowanie brakuje coś, co po prostu małe. Czy nie macie w nienawiści, że? Gdy jest to tylko mały mały błąd? Wszechmogący tle. RGB. PUBLICZNOŚCI: [niesłyszalne] ALLISON Buchholtz-AU: Nie Próbowałem to przed klasą. Mam wszystko, co robiłem wcześniej Klasa w przypadku ja na to: "Czekać, co zrobiłem źle?" Bo ja na to: "Prawdopodobnie będę bałagan to się w pewnym momencie. " Plus zielony. Wszystko wygląda na to, że to łączone prawidłowo. OK. PUBLICZNOŚCI: [niesłyszalne] ALLISON Buchholtz-AU: Och, proszę. To jest to, co potrzebne. Spójrz na to. Tiffany, aby uratować. Doskonałe. OK. Teraz zobaczmy, czy to działa. O mój Boże. OK. Trzymaj się. PUBLICZNOŚCI: Przestrzeń po drugim plus. ALLISON Buchholtz-AU: Który? Oh wait, trzymaj się. Zużycie miejsca? PUBLICZNOŚCI: drugie oraz w zielone konkatenacji. ALLISON Buchholtz-AU: Och. PUBLICZNOŚCI: Nie ma miejsca po plusie, tak. ALLISON Buchholtz-AU: Ty nie trzeba, że, ale- PUBLICZNOŚCI: Och, nie wiesz? ALLISON Buchholtz-AU: To wygląda całkiem. PUBLICZNOŚCI: OK. OK. ALLISON Buchholtz AU: Zobaczymy, czy to działa. OK. Ja oczywiście w przypadku braku na to demo, które przypomina mi wykładu drugi tydzień, ale wiem, że to będzie działać. Wiem, że to będzie działać. Tak blisko. Chyba, że ​​przypadkowo usunięte mój skrypt na ten jeden. Nie, to jest kropka firm js. OK, trzymaj się. Mam zamiar skopiować, a ja też jestem po prostu się usunąć wszystko, bo miałem to działa wcześniej. Obiecuję, że działa. Jeśli nie, pokażę ci, co Tommy jest. I tam. PUBLICZNOŚCI: Jesteś odwołanie imprezy Kropka CSS, i jest to js stron dot. ALLISON Buchholtz-AU: Ach, dobrze tutaj jest firm js kropka. OK, co zrobiłem inaczej? OK, zobaczymy, czy to działa teraz. Bam. Tak więc, nie wiem, co zrobiłem inaczej, ale to jest to, co powinno się zdarzyć. Fajne. Kliknąłem na ten temat, tak jak zawsze. Ale możemy spróbować i zobaczyć, co zrobiłem inaczej, że ten miał. Nie wiem o was, ale to Wygląda w zasadzie to, co właśnie napisałem. Nie było chyba brakuje średnik gdzieś jest moja sprawa. Właściwie po, myślę, że mi brakuje średnik tutaj naprawdę. Ale ja nie mogę zobaczyć, bo to było na ekranie. Ale jeśli widzimy, jest to dość bardzo dokładnie, co właśnie napisałem. Myślę, że chyba najtrudniejsze jest to po prostu rodzaj tej rzeczy w prawo tutaj, zrozumienie co tam robi. Tego rodzaju rzeczy można się nauczyć tak naprawdę tylko przez Googling i uczciwie tylko próbuje. Jeśli uważasz, że jest jakiś atrybut, prawdopodobnie istnieje. Więc spróbuj. Zobacz, co się dzieje. Jak powiedziałem, jest dużo eksperymenty z JavaScript, i PHP, a wszystko, co rzeczy, i CSS w szczególności. To jedyna prawdziwa sposób, żeby to zrozumieć. OK, więc po tym fiasku z partii dot js, mamy dwie inne opcje. Mamy zegar lub Twitter. Oboje są interesujące. Może nie jest tak zabawne, jak strony, który miał fajny mały stroboskopowym co w końcu. Czy faceci preferują? PUBLICZNOŚCI: Zegar? ALLISON Buchholtz-AU: Zegar? OK. Cool. Więc znowu, mamy pusty plik JavaScript. I jak tu widzimy, że mają kilka bardzo prostego HTML. Mamy arkusz stylów, które po prostu formatach, co to ma wyglądać. Mamy div z Id zegara, które po prostu mówi, "to powinno być zegar." I mamy nasz link do naszego pliku JavaScript że rzeczywiście będzie generować nasz zegar dla nas. Bo fajne rzeczy, jest to, że można ustawić JavaScript do automatycznego odświeżania Sam. OK? Więc zamiast czekać na Użytkownik trafić Refresh na stronie tak, że można dostać aktualizacja czasu, JavaScript może aktualizować go jednak lubi. Tak, jak w przypadku naszej ostatniej, chcieliśmy dostęp do naszego tła, prawda? Więc co myślisz może być Pierwszą rzeczą, którą chcemy zrobić tutaj? Jeśli mamy trochę schodzili ten rodzaj paradygmatu tutaj? Prawdopodobnie chcą dostęp do naszego zegara, prawda? Tak, mamy kilka var Zegar, który equals-- co o tym myślimy, że będzie? Dokument dot uzyskać elementu by-- I również kocham Sublime-- Id i nasz Id jest zegar. Średnik. Muszę się upewnić, aby uzyskać te średniki tym czasie, bo czuję, że Problem był ostatni raz. OK, tak, jak mi tylko, że z próby mieć JavaScript odświeżyć się, nie ma to wielkie funkcji, ja Wiem, że przyszedł w poręcznej ubiegłego roku, Nie jestem pewien, że jest przydatna do tego zbior, ale to się nazywa odmierzanie czasu. I to jest rzeczywiście bardzo fajne, jeśli wy nic zrobić z czasem lub coraz zaktualizowane informacje. Na stronie internetowej w finale projektu, jest to prawdopodobnie Funkcja chcesz uzyskać bardzo znane. Więc co ustawić interwał nie jest to, że mamy zamiar dać mu funkcji, i jak często powinien wywołać tę funkcję. OK? Więc w tym przypadku, mamy po prostu będzie ponownie stworzyć jakąś anonimową funkcję, OK, że będzie się nasz dzień i nasz czas, a następnie zaktualizować rzeczy i wyświetlić go. Więc będziemy się tym martwić. Będziemy jak generować zegar tutaj. Ale to, czego potrzebujemy jest jak Często, aby go odświeżyć. Więc w tym przypadku, to tylko milisekund. Tak więc jesteśmy po prostu będzie to 100 milisekund. Oczywiście całkowicie arbitralne. Jeśli chcesz go zaktualizować znacznie wolniej, można. Możemy poeksperymentować z ustawionym czasem, jak duża jest nasza przerwa po otrzymujemy Zegar działa, które mam nadzieję, że będę dostać. Więc to jest po prostu, mówiąc: "OK, rozmowa funkcja ta co 100 milisekund. " OK? To wszystko, co robi. Więc to, co chcemy naszą funkcję zrobić, to chcemy mieć jakieś daty i jest co jakiś czas będziemy mieć. Więc możemy zacząć nasze Data równa coś, i nasz czas równy coś że my jeszcze nie wiemy. Albo rzeczywiście, musimy tylko datę, ponieważ Data będzie obejmować wszystko. Ponownie, jeśli tylko nic o Google to, co chcesz zrobić, jeśli piszesz, "OK, Chcę uzyskać czas za pośrednictwem JavaScript "To daje to wielkie Funkcja o nazwie Data get. Dosłownie, większość rzeczy , że chcesz to zrobić, JavaScript będzie musiał to zrobić dla Ciebie już. Więc to jest dosłownie jak nowy się data, która jest creating-- lub nowa data, rather-- który generuje niektóre obiekt reprezentujący datę. A co mamy zamiar zrobić tutaj jest to is-- Zamierzam napisać to, a następnie wyjaśnić, co robi. Więc będę mieć pewność, że się tego prawa. OK, więc to, co ta funkcja nie, to jesteśmy po prostu tworzenia kodu HTML, który jest w rzeczywistości pójdzie w naszej div id zegara. Więc co to będzie robić jest po prostu generowania sznurek, OK? Który następnie będzie przeniesione do naszego HTML. W zasadzie to, co zamierza zrobić to co we-- co pokażę ci jest to, że cokolwiek powiemy HTML jest, mamy zamiar zastąpić ten tekst tutaj z niezależnie HTML jest. Tak to się dzieje, aby umożliwić nam zmienić nasz zegar kropka HTML od bycia po prostu tego tekstu powinien być zegar, faktycznie pokazano numery i rzeczy, które nam zależy o, i rzeczywiście być godzina. Tak więc to, co mamy zamiar zrobić, to jesteśmy zamiar rozpocznie generowanie kodu HTML. Tak więc w taki sam sposób, użyliśmy zrobić Plus wynosi dla liczb całkowitych, można teraz zrobić na smyczki, chyba to się je złączyć. Prawda? Jak widzieliśmy z kropek i zabawy js, to tylko skleja wszystkie te rzeczy razem. Więc można łączyć różne bity Kopiuj ze zmiennych, lub bitów strun że piszesz się samodzielnie, a to po prostu naprawdę pozwala dynamicznie generowanie kodu HTML, który jest całkiem fajne. Więc jeśli masz coś bardzo łatwy specyficzne, może to pozwoli Ci zrobić. Więc mamy HTML, aby zamierzam spróbować i upewnić się uzyskać to prawo. Tak więc mamy zamiar zrobić nagłówek h1. Więc co jest ważne, aby uświadomić sobie, tutaj jest to, że jest to właściwie tylko HTML. Prawda? Piszemy rzeczywista Kod HTML, który w tym przypadku jest to nie tylko ciąg w normalnym sposób, że będziemy o tym myśleć. Mamy więc niektóre HTML. Uważa się to za ciąg tu jednak. A my datę zrobienia dot-- my chcą się nasze godziny. Ponownie, jeśli były szukać nic o dacie się, to powiedzieć, to wszystko atrybuty data ma. A oto co można użyć na nim. Więc to chyba ma takie rzeczy jak uzyskać godzin, i dostać minut, i dostać sekund i uzyskać milisekund, i kto wie co jeszcze mają. Ale jeśli spojrzeć na dokumentacja, wszystko będzie tam. Więc musimy się godzina, i wtedy chcemy złączyć, że with-- jestem zamiar przenieść to tutaj. Więc jeśli mamy generowania teraz jesteśmy faktycznie generuje czas, prawda? Mamy godzin, a następnie co pomiędzy godzinami i minutami? Musisz średnik, prawda? Dlatego chcemy, aby zrobić kilka średnik tutaj. A potem chcemy dostać nasze minuta, a więc w taki sam sposób, że mamy datę dot uzyskać godzin, jak możemy dostać nasze minut? Jest to dosłownie Data kropka się minut, co ja niby lubią. To jak, "och, jak mogę dostać moje minut? " Ja po prostu moje minut. OK. A potem mamy tu kolejny dwukropek. A potem, jeśli chcemy uzyskać nasze sekund, w jaki sposób możemy uzyskać naszą sekund? Data dot uzyskać sekund. Myślę, że to całkiem fajne. I co ważne, aby sobie sprawę, że my również należy zamknąć nasz znacznik HTML tutaj, ponieważ w dalszym ciągu powinno być ważne HTML, więc h1. Cool. Więc po tym, co możemy zrobić zegar Kropka wewnętrzna HTML jest równa HTML. OK? Więc pamiętam, jak powiedziałem, Wewnętrzna HTML zasadzie ma wszystko, co jest między dwa tagi, że rozmawialiśmy o i wkładki lub manipuluje to, co jest w środku? Więc co to robi, jeśli wracamy do naszego zegara, jest to, że odnosi się do zegara wszystko w tym div. To wewnętrzne HTML tego zegara Id div. I tak to się zmienić na HTML właśnie generowane, które, które, miejmy nadzieję, mam nadzieję, mam nadzieję, pokaże czas teraz. Zobaczymy. Oczywiście. Tak wiele problemów technicznych. Just-- Allison jestem z moich gier współczesnych facetów. OK, to działa. Zegar dot wewnętrzną HTML. Było HTML Naprawdę? Również to, co się dzieje. Kiedy nie można zobaczyć coś cię, wystarczy spojrzeć na kodzie źródłowym. OK. Czy chcesz wiedzieć fajne prace wokół że będziemy robić tutaj? PUBLICZNOŚCI: Czy można zrobić wielkie litery? Wielkie litery? Bo trzeba uzyskać godzin, a następnie dostać minut. ALLISON Buchholtz-AU: To jest uzyskać godzin i get-- och. Ty are-- Gold Star. To wszystko testy, chłopaki. Obiecuję, że pracuje przed klasą. OK, ale coś fajnego wiedzieć, że można also-- jeśli czasem zewnętrzne pliki się nieco szalony, można też po prostu je prosto tu, który ma tendencję do naprawić rzeczy. Poza tym jest jak naprawdę brzydki. Oczywiście sformatować wszystko. Upewnij się, że to wszystko jest dość. OK. Chciałem zrobić wszystkie fajne dema, a oni po prostu nie pracuje. OK. Skrypt var zegara. W każdym razie, co ważne jest że jest to sposób ogólny że można sformatować JavaScript. Jak widać, może być bardzo wybredny czasami, nawet wtedy, gdy to było dosłownie pracy dwóch sekund temu. Albo nie dwa sekundy temu, ale bardzo, bardzo niedawno. Tak więc, aby pokazać, co to powinno wyglądać, i pokazać, że nie jestem szalony, i że wszystko jest dokładnie samo, to jest to, co powinno wyglądać. Jesteś po prostu zrobić to górną część tutaj, a jeśli zobaczyć źródło strony, jeśli zauważysz, zrobił kilka bardziej szalone rzeczy, ja uprościć go. Ponadto, kredyt Tommy'ego McWilliam, którzy rzeczywiście pomógł mi stworzyć te przykłady, , dlatego wiem, że działa. Ponieważ Tommy jest mistrzem JavaScript. Ale jeśli zauważymy, mamy kilka set. Mamy tu naszą funkcję zegara. To wszystko jest JavaScript, który po prostu napisał, albo niektóre z nich. Właśnie napisał ten jeden tutaj. A on ma dodatkowy Klocki funkcji, które po prostu go przez umieszczenie zera przed List lub przed numerem, jeśli jest to tylko jeden z nich. Więc jeśli zauważysz, jest to dość bardzo dokładnie, co właśnie napisałem. Masz jakąś zmienną zegar że ma nasze elementu, uzyskać elementu przez ID, co jest zegar. Mamy odmierzanie czasu Funkcja, która jest Funkcja anonimowy który wykonuje wszystko. Mamy pewne począwszy ciąg HTML, które następnie dynamicznie generowanie przez jedne h1 nagłówek, złączenie z uzyskać godzin plus nasze jelita grubego, a także coraz minuty, plus inny jelita grubego, a także nasze sekund, i ostatecznie kończąc HTML dla niego. A następnie aktualizujemy nasz zegar dot wewnętrzną HTML do HTML, i aktualizujemy co 100 milisekund. OK? Zobacz Obiecuję, że nie jestem szalony. Nie wiem. Nie wiem, dlaczego mnie nie lubi. Czuję, że wygląda tak samo, ale najwyraźniej mnie nienawidzi. Zobaczmy więc, czy okrągłe trzy idzie lepiej. Mamy zamiar zobaczyć. Nie jestem pewien, jak to pójdzie. Czy wszyscy się co najmniej minusy, jak tylko ogólny temat JavaScriptu, chociaż? Mam nadzieję, że to co najmniej użyteczna, bardziej nie pokazuje, że jest to trochę wybredny. Ale twój zestaw problemem będzie bardzo zabawne. To będzie wspaniałe. Nie będzie już tak uciążliwe jak ten, nie sądzę. Będziesz rzeczywiście dostać się do zobacz naprawdę fajne rzeczy. Tak więc ostatni, ale nie najmniej, postaramy się jedną Twitter. Jestem naprawdę przerażona teraz, chłopaki. Nie wiem, jak to pójdzie. Ale tylko dać trochę bardziej smak, co jest w rzeczywistości łańcuchy i manipulacji Wejścia, co będziemy robić jest, jeśli widzimy tu z HTML-- ten ma trochę more-- mamy pewne pole tekstowe, które odpowiada tym obszarze tekstu tutaj. OK? I że ma Id tekstu. Mamy odnowiony mu trochę z pewną szerokość i wysokość że mamy z góry określone, a my h1, która po prostu jest, że nasz jeden nagłówek reprezentuje nasze pozostało znaków. Daliśmy mu trochę Id Pozostało znaków, i wtedy mamy trochę skrypt tu, z którego jestem bardzo nadzieję, że trzeci raz na Urok tutaj, chłopaki. Więc to, co chcemy zrobić, W tym samym ogólnym żyły że zrobiliśmy z js zegar kropka i kropka firm js jak zauważyliśmy, jest Zaczęliśmy od rzeczywistości chwytając rzeczy, które nam zależy, prawda? W tym wypadku istnieją dwie rzeczy, na których nam zależy, OK? Jedną z rzeczy, które jesteśmy w rzeczywistości rodzaj patrząc i dane z rysunku, i jedna rzecz, która my rzeczywiście się zmienia. Więc jest nasz HTML. Jeśli to jest nasza strona internetowa tutaj, co jest Dane, które patrzymy? To będzie cokolwiek Tekst w naszych oknach, prawda? Więc co mam wpisać tutaj. To jest to, co chcę wiedzieć, czy to jest to, co chcę patrzeć. A co będzie zmienia się na naszej stronie internetowej? Znaki pozostałe. Tak więc w taki sam sposób, chcemy zacząć od inicjalizacji zmiennych które rzeczywiście trzymać tych elementów. OK? Więc jeśli mamy jakiś var to jest nasz obszar tekstu, i mamy trochę var, że jest pozostały. Prawda? Więc te będą posiadać te dwie rzeczy. Więc sam rodzaj rzeczy, Dokument dot-- OK, jestem będzie upewnić się, że jest będzie działać tym razem. Jestem bardzo stanowczy. OK, więc jeśli chcemy nasze obszar tekstu, zgodnie do naszego HTML, co nasz identyfikator? Jaki jest nasz Id? To będzie tylko tekst, ponieważ tworzy naszą obszar tekstu, OK, a nasz Id jest tekst, więc to jak możemy chwycić, co tam jest. OK, średnik. Zamierzam być super precyzyjna o tym, bo chcę to do pracy i tym razem. OK, to samo, uzyskać elementu przez Id. Jestem naprawdę zastanawiasz się, co ma spowodował dwa pozostałe do bałagan. OK, to w tym jednym, co chcemy, aby uzyskać dostęp? Jaki jest nasz Id tutaj? Mamy inny identyfikator w nasz HTML, co to jest? PUBLICZNOŚCI: Pozostało znaków. ALLISON Buchholtz-AU: Pozostało znaków. OK. Cool. Więc jestem po prostu będzie Napisać to naprawdę szybko. Mam zamiar po prostu napisać to w sekundę. Tak więc pole tekstowe. Co ciekawe B nie function-- wiele funkcji, które nie tylko spełnia Twoje myszy, ale klawiatura. OK? Więc można powiedzieć, kiedy dowolny klawisz jest wciśnięty, można zrobić takie rzeczy. Tak więc ten, który mamy przy użyciu nazywa się kluczem do góry, które mówi: "jeśli już naciśnięciu dowolnego klawisza klawiatury, gdy użytkownik podniósł ich palca przy tym przycisku, a kluczem stała unpressed, Następnie idziemy coś zrobić. " OK? Więc to ma sens, prawda? Ponieważ każdy znak wpisujemy, jedziemy aby podnieść nasze palce się o tym, więc, gdy klucz idzie w górę, możemy wiedzieć, aby zmniejszyć nasi bohaterowie pozostałe. Mamy więc trochę na klucz górę i w taki sam sposób, będziemy mówić, "OK, jeśli to zrobimy, możemy zamiar stworzyć jakąś funkcję, która zajmie e ", w tym przypadku, i to, co chcemy zrobić, to obliczyć liczbę pozostałych. OK, więc niech po prostu zacząć tworząc zmienne. Tak więc mamy pewne zmiennej r, że idzie do reprezentowania ile znaków zostawiliśmy. OK? Wiemy, że możemy zacząć 140, a jeśli chcemy wiedzieć, powiedzmy, długość tego Ciąg, który był wejście, Czy macie jakiś pomysł w jaki sposób możemy to zrobić? Tylko w oparciu off oczywiste rzeczy, jak gdybyśmy chcieli godzin, użyliśmy uzyskać godzin. Wiemy, że nasz obiekt jest obszar tekstu, ale może wy myśleć, co może przyjść po nim? Jakieś pomysły? Więc to czyjaś rodzaju mniej intuicyjne, ale to wartość długości kropki. Więc po prostu daj mi wartość atrybutu, że jest rzeczywiście długość tego łańcucha. Tak to się mówi: "OK, szukam na cały ten ciąg w polu tekstowym, a ja powiem Ci, jak długo to jest. " Bo jeśli pamiętamy, ciągi są naprawdę tylko tablice, więc możemy po prostu wziąć długość nich. Mamy więc, że. Cool. Wtedy to, co chcemy zrobić, to mamy Nigdy nie chcesz, aby umożliwić użytkownikowi aby wprowadzić więcej niż 140 znaków, prawda? Bo jeśli mówimy, jak "Och, ty tylko tyle pozostałe " a następnie pozwolić im robić tak czy inaczej, byliśmy leżącego. I to jest kolejny rzecz, która JavaScript może być naprawdę dobry na, jest walidacja użytkownika i upewnić się, że twój Użytkownik wpisuje się w jakichkolwiek zasad które zostały im przekazane. Więc jeśli chcesz robić takie rzeczy jak co że ktoś wejścia ich adres e-mail, albo upewniając się, że gdy wprowadzenie dwóch haseł, ale dopasowane. JavaScript może zrobić. Można by zrobić coś takiego ", gdy formularz jest składany "lub podobnych, ", Gdy formularz jest przycisk Prześlij kliknięciu, sprawdzić wszystkie te rzeczy. " I możemy zrobić JavaScript. Więc to jest tylko to, co mamy zamiar zrobić tutaj. Więc co może być sposobem na sprawdzenie, czy ich już nie ma ponad 140 znaków? Co się stało nasza wartość r, jeśli starają? To będzie negatywny, prawda? Albo to będzie mniej lub równa zeru. Tak więc możemy użyć, jeżeli jest to tak jak wszystko inne. OK? I mamy jakiś obszar tekstu kropki wartość i co tu robimy to jesteśmy po prostu cutting-- co to jest? Przepraszam. Ten jeden, po prostu chcemy return false. Ja się irytować. Wszystko trochę wypompowani od rzeczy nie działa. OK, po prostu chcemy return false, a potem Aby wyświetlić Pozostałe znaki, prawda? Więc z zegarem, zrobiliśmy coś z wewnętrznym HTML, prawda? Gdzie możemy ustawić to równe części zmienna, więc co możemy zrobić tutaj? Co mamy zmianę wewnętrzną kodu HTML? PUBLICZNOŚCI: Pozostały? ALLISON Buchholtz-AU: Zmieniamy pozostałe. Wszystko w porządku, a co my Aby ustawić równe? To będzie r, ponieważ powinny być nasze Pozostało znaków. OK? Więc jestem bardzo zdenerwowany, aby sprawdzić, czy to działa teraz, ale zobaczymy. Zostaw to. To naprawdę szybko. [Niesłyszalne] OK. Ponownie, jestem po prostu pokazać. Z jakiegoś powodu, moje nie decyduje się pracować, ale co pokażę wam, że ta is-- oh Miałem umieścić, że w. OK, widzimy ten sam rodzaj co tu się obszar tekstu. Ponadto, jeśli zauważysz facet, jeśli istnieje zawsze coś chcesz zrobić, i nie wiesz, jak to zrobić to, po prostu kliknij Pokaż źródło strony, a oni zamiar powiedzieć. Czasami będzie to być szyfrowane. Dla Państwa pset, kodujemy wszystko, tak to właśnie wygląda jak bełkot. Ale czy jest tak naprawdę nigdy fajna strona, że ​​lubisz, jeśli po prostu kliknij Pokaż źródło strony, to powiem ci, jak to zrobić. Więc jeszcze raz, pracować mądrzej, a nie ciężej. I jak tu widzicie, wszystkie te rzeczy są same. tym tutaj po prostu ma jakiś podciąg że nie pamiętam dokładnie, co to robi. Ale to oczywiście wymaga trochę podciąg wartości od zera do dziesięciu i zwraca false, co powinno zatrzymać Użytkownik od wprowadzania już, i to oczywiście uaktualnia Wewnętrzna HTML nie. Cool. Tak duże uwielbiacie brać od dzisiaj, Eksperyment, spojrzeć na kodzie źródłowym bo to pomoże Ci dużo, i wszyscy, czasem JavaScript może być trudne do pracy i nie zawsze działa zgodnie z oczekiwaniami go, ale po prostu próbować bo ja obiecuję, że będzie. Obiecuję wszystkie te przykłady pracowali przed klasą. Nie rozumiem, co się stało. Dosłownie wszystko sam. Jeszcze jedna rzecz, że po prostu chcę pokazać wam, że może być bardzo przydatne jest in-- co pracował wcześniej? Mamy partię do pracy, nie? Myślę, że tak. Tak. Zrobiliśmy. Niesamowite. OK, więc jedna rzecz, która faceci powinni wiedzieć jest dziennik konsoli, że rozmawialiśmy. Więc pocieszyć dziennik punktowy cześć. Jest to więc rodzaj Równoważne JavaScript printf. Więc jeśli kiedykolwiek chcesz sprawdzić zmienne lub zobaczyć, co się tam dzieje, co można zrobić to, jeśli będziemy sprawdzać elementu, jest to, co chcesz iść się, a ty go pocieszyć, zobaczysz, że drukowane komentarzy. Więc możemy go mieć druku, co chcieliśmy. Jeśli chcieliśmy wydrukować tło Styl dot dot tło, powinniśmy być w stanie zobaczyć RGB potrójne, że wyjdzie. Albo nie. Nie pamiętam dokładnie, jak ci wydrukować zmiennej takiego, ale powinieneś być w stanie wydrukować takie rzeczy. To będzie bardzo przydatne dla pset kiedy to starasz się manipulować koordynuje lub cokolwiek. Więc oni też zmienić ten kawałek w klasie. Różni się to od ostatnich lat, aby po prostu być miły dla swoich TF, lub TF w godzinach pracy urzędu, a raczej dlatego, że jesteśmy rodzaj uczenia się wraz z wami. Ale dziennik konsoli było super, super przydatne dla JavaScriptu w zeszłym roku. Tak kocham. Dowiedz się, jak go używać. Jest to łatwiejsze w użyciu niż GDB, tak aby powinna wynosić co najmniej plusem. Ale dziękuję faceci mając ze mną. Przykro mi, że mój Przykładami pewnych powodów po prostu nie chcą współpracują ze mną, ale ja nadzieję, że to pomogło rodzaj Ci trochę bardziej w strefie JavaScript. I wysłać mi wszystkie swoje pytania w przyszłym tygodniu, więc mogę być bardzo naprawiona, a ja przynieść słodycze i nawet extra cukierki, bo to było śmieszne. Ale faceci są świetne, i mają niesamowite tygodniu.