[MUZYKI] 

DOUG LLOYD: Więc teraz jesteśmy starzy plusy w programowaniu WWW, prawda? I omówiliśmy kilka języki w poszczególnych filmów. A teraz zróbmy jedną więcej, JavaScript. 

Pierwsza dobra wiadomość, JavaScript to nowoczesny programowania język podobnie jak PHP, którego Składnia pochodzi z C, tak, że to dobre miejsce, aby rozpocząć. Chodzi o tak stare jak PHP, jak również, że już około 20 lat. Wynaleziony wokół w tym samym czasie, jak PHP. I JavaScript jest rzeczywiście bardzo podstawą doświadczenia użytkownika z sieci. W rzeczywistości istnieją trzy języki, że powiedziałbym rodzaju składają się na doświadczenie użytkownika do interakcji ze strony internetowej, html, CSS i JavaScript. A więc teraz porozmawiajmy Trochę o JavaScript. 

Zła wiadomość, chociaż, z JavaScript jest że ustawia wiele przepisów dla siebie, a następnie rozkłada je. I JavaScript w rzeczywistości może być rodzaju wyzwanie, aby dowiedzieć się, bo to w przeciwieństwie do C i PHP, które są bardzo zorganizowany i mają bardzo sztywne zasady na jak rzeczy mogą pracować. JavaScript ma rodzaj od zdobyć tak elastyczne że być może sprawy nie idą do działa tak spodziewamy się, a może tak naprawdę nie może się nauczyć nasz pierwszy język programowania jako JavaScript. Więc może dlatego, że nie postawiła sobie jakieś zasady, i to naprawdę nie robi egzekwowania dobrych nawyków kodowania. Ale mam nadzieję, że teraz mamy opracowane kilka dobrych nawyków kodowania, i tak możemy zacząć wypad w JavaScript trochę. 

Aby napisać JavaScript, podobny do otwarcia się w pliku C z kropką C rozszerzenia lub plik z rozszerzeniem PHP dot PHP, wszystko, co musisz zrobić, to otworzyć plik z kropką js rozszerzenia pliku. Nie musimy mieć jakieś specjalne ograniczniki jak my w PHP. Tego rodzaju kąta Uchwyt znak zapytania PHP że jesteśmy przyzwyczajeni do z, że, w drodze opowiemy naszą przeglądarkę, że to, co mamy jest JavaScript jest tym że w tagu html, i zobaczymy trochę o jak to zrobić za chwilę. 

Inną rzeczą, która sprawia, JavaScript inaczej, jednak jest to, że działa po stronie klienta. Więc przypomnieć w PHP, które nie mogliśmy naprawdę zobaczyć PHP, który podkreślił, stronę internetową. Jeśli kiedykolwiek oglądane źródło strony, my by tylko zobacz html, który był generowane przez ten PHP. Ale JavaScript działa po stronie klienta. JavaScript działa na komputerze. I dlatego możesz zrobić rzeczy jak dodać blokery. Dobrze? Blokowanie reklam jest zwykle wykonywane przez zabijając wszystkich JavaScript która działa na danej stronie. A ponieważ to musiałoby uruchomić na swojej stronie klienta maszyna, można po prostu zatrzymać JavaScript do prowadzenia w całości. Oznacza to również, że podczas korzystania z strona internetowa, która zawiera JavaScript, musisz wysłać źródło JavaScript Kod jako część odpowiedzi http do klienta, gdy o to poproszą. A więc nie może chcesz używać JavaScript zrobić naprawdę delikatne rzeczy jak informacje przechodzącej o hasła użytkowników tyłu i dalej, bo są naprawdę będzie otrzymywać wszystkie kodu źródłowego, nie tylko html, który jest generowany, takich jak byłoby w przypadku powiedzmy PHP. 

Jak więc to JavaScript w naszym html zacząć? Cóż, podobnie jak CSS, w rzeczywistości, jest swego rodzaju, jak to zrobić tutaj. Z CSS mamy tagów stylu. I wewnątrz tych tagów stylu, możemy zdefiniować arkusz stylów CSS. Podobnie z JavaScript możemy otworzyć tagów skryptu, kolejny tag html my nie rozmawiać w naszym html wideo i pisać JavaScript w między tymi tagami skryptu. Także jednak, jak CSS, możemy może łączyć się poza plików CSS i pociągnij je do naszego programu w ten sposób. Z CSS możemy również, przepraszam, z JavaScript możemy również określić źródło atrybutem tagu script połączyć w JavaScript oddzielnie, więc nie napisać go w między znaczniki skryptów, możemy można połączyć go za pomocą że tagu skrypt, jak również. I tak jak w przypadku z CSS gdzie zalecamy, że to był prawdopodobnie w najlepszym interesie, aby napisać Twój CSS w oddzielnym pliku w przypadku trzeba go zmienić, podobnie nie polecamy że piszesz swoje JavaScript w osobnych plikach i używać źródło tagów skryptu przypisują zawiązać JavaScript do swojej html, strony internetowej. 

Zmienne tak JavaScript, będziemy zacząć mówić o składni tutaj. A my przejść tego rodzaju szybko, ponieważ zrobiliśmy to w PHP, więc to powinny być całkiem znajomo. Tak więc zmienne w JavaScript są Bardzo podobny do PHP zmienne. Nie ma specyfikacja typu, oraz kiedy wprowadzić zmienną, można poprzedzić je słowa kluczowego var. W PHP chcemy coś zrobić tak, znak dolara x. To, jak wskazano zmienna, ale nie, nie wspominając o typ zmiennej w ogóle. Chcemy powiedzieć coś takiego Znak dolara x równa 44 w PHP. Jeśli byliśmy robi samo w JavaScript, powiedzielibyśmy var x jest równa 44. Więc var jest rodzaj naszej drodze wprowadzania zmiennej. To może nieco bardziej intuicyjny niż dolara zmiennej znak. 

Ponownie, ponieważ nie ma typy danych, możemy to zrobić z dowolnego typu danych, łańcuchy, coś jeszcze w całości byłoby var. Warunkowe, wszystkie nasze starzy przyjaciele z C i PHP są nadal dostępne, więc mamy, jeśli, else if, else, switch i pytanie znak dwukropka. Przełącznik pozostała tak elastyczne, jak to był w PHP, ale wszystkie z nich jesteś zaznajomieni z teraz. I podobnie z pętli są stare faworyci chwilę, Do While, i wciąż dla nas dostępne. Więc już wiemy, wiele z Podstawowym rodzajem JavaScript od podstaw tylko z racji konieczności sporo wiedzy teraz o C i PHP. 

Co z funkcji w JavaScript? Cóż, podobna do PHP każda funkcja jest wprowadzone z kluczowych funkcji. Mówisz funkcję, a następnie zaczynają definiować swoją funkcję. Co znajduje się w trochę inny o JavaScript, choć jest zdolność do co nazywa anonimowa funkcja. Tak można zdefiniować funkcje że nie mają nazwy. To jest coś, czego naprawdę nie widział. Będziemy naprawdę używają pojęcia anonimowego funkcji nieco później w tym wideo, ponieważ będziesz zrobić trochę więcej sensu w kontekście kiedy widzimy go w danej sytuacji że już wykonane tutaj. Ale niech tylko spojrzeć na jakim prostego kodu JavaScript Funkcja może wyglądać. 

Więc Poszedłem dalej i otworzyłem CS50 IDE i już uruchomić Apache aby rozpocząć mój serwer działa. I mam tego pliku otwarte nazywa home.html. I będę powiększyć trochę tutaj. A w zasadzie, można zobaczyć Home.html jest tylko kilka przycisków. A ja twierdzę na szczycie tutaj że jest to sekcja JavaScript przybory. Więc jest kilka przycisków tutaj, ale co te przyciski rzeczywiście zrobić? 

Cóż, musimy udać się do mojego IED, i ja home.html otworzyć tutaj. Na samym początku, tutaj gdzie jestem powiązanie we wszystkich moich plików źródłowych JavaScriptu. Dobrze? Więc mam anonymous.js, clock.js, Używam atrybut źródłowy z tagu skrypt do łączenia się w pliku. Więc nie pisałem żadnej JavaScript bezpośrednio w tym pliku, ale ja wyciągnął we wszystkich JavaScript pisałem osobno. A jeśli przewijać tutaj, to powinno wszystko wyglądać nieco znajomo z odrobiną nowej składni. Mamy tu tag nagłówek funkcje, a następnie przycisk. Mam wejście, które jest przycisk typu, i najwyraźniej po kliknięciu go, Mam zamiar zadzwonić niektóre funkcję alarmu datę. I w ten sposób możemy coś w rodzaju pomieszania trochę JavaScript i HTML. Oni rzeczywiście odgrywają bardzo ładnie razem, a więc wyraźnie, gdy I kliknij na ten przycisk, zamierzam wywołać jakąś datę alarmu funkcja. I podobnie mają zdefiniowałem zachowań dla wszystkich innych przycisków, są na tej stronie home.html, które będziemy wracać aby w trakcie tego obrazu. Ale wróćmy się tu i spójrz w clock.js, który jest Plik JavaScript że napisał, że ma tę pierwszą funkcję mamy zamiar przyjrzeć. Jak widać, zaczynam mój JavaScript funkcjonować w funkcję słów kluczowych, i dałem to można sobie nazwa, to się nazywa alert data. Wewnątrz tam, podobno stworzyć Nowa zmienna lokalna o nazwie aktualna data. A ja zamierzam przypisywać równego z nową datą. I mogliśmy dostać się do wielu szczegółowo, co jest data, i naprawdę JavaScript jest tak duże, że nie możemy ewentualnie pokrycie wszystko w jednym filmie. Ale wystarczy powiedzieć, to będzie aby powrócić do mnie element danych, które oddaje aktualną datę i godzinę. Jestem przechowywania, że ​​w zmiennej, że jestem najwyraźniej zamiar ostrzec aktualną datę. 

Cóż, co robi alert data aktualna wyglądać? Rzućmy okiem na samym pliku kopii w ciągu w oknie przeglądarki. Więc znowu, jest to przycisk, że są związane z tym, o nazwie funkcji. I kliknij go tam i zobacz, co się stało, jest informowany. To pojawiło się tego rodzaju skrzynki z informacją mi, że obecny czas jest najwyraźniej to 4 listopada w 10:43:43 rano. A jeśli kliknij go ponownie, teraz to kilka sekund później, prawda? Więc to wszystko, ta funkcja działa. Po kliknięciu tego przycisku, to wyskakuje komunikat ostrzegawczy do mnie. Więc tak naprawdę nie zbyt wiele funkcji że różni się od PHP, tylko trochę nowej składni że pochodzi z pracy z JavaScript. 

Tablice w JavaScript są całkiem proste. Aby zadeklarować tablicę, należy użyć składnia nawiasy kwadratowe że jesteśmy zaznajomieni z z PHP. I podobnie jak PHP, możemy Można również mieszać typów danych. Więc ta tablica, zarówno z tych tablic byłoby być w pełni uzasadnione JavaScript. Jeden to wszystkie liczby całkowite, i jeden, który Miesza się różne typy danych. 

Co znajduje się w coś zupełnie innego w JavaScript, mimo? To pojęcie obiektu. Więc być może słyszałeś o programowania obiektowego. Nie robimy go dużo w CS50, ale zrobimy trochę nim tutaj w kontekście JavaScript. Teraz JavaScript ma zdolność do zachowywać się jako programowania obiektowego język, ale to nie to samo wyłącznie obiekt zorientowany język programowania. A to znów przychodzi z powrotem, dlaczego powiedziałem, może być bardzo trudne, aby dowiedzieć się, JavaScript jako pierwszy programowania język, ponieważ nie bardzo pasuje do konkretnego paradygmatu. 

C Z drugiej strony jest funkcjonalny język programowania. Jeśli chcemy, funkcje są rodzaj wielkiego bossa człowieka, prawda? Dyktować, co dzieje się wszystko inne. Chcemy zmienić zmienne, możemy wywoływać funkcje. Robimy rzeczy do funkcji. Przedmioty zamiast w sposób języka obiektowego, obiekty rodzaj stać się gwiazdą i funkcje stają się jakby drugorzędne. Ale to, co jest obiektem, co Jest to pojęcie obiektu? Cóż, jeśli to pomoże, myślę o tym w pierwszym rodzaju od jak struktura C lub struktury że nauczyliśmy się wcześniej. W C, struktura zawiera liczba pól, a może teraz może zacząć zadzwoń do tych pól właściwości. Ale właściwości nigdy nie stanąć na własnych, prawda? Jeśli I określają strukturę samochodu tak z następujących dwóch pola lub właściwości, jeden an całkowita za rok samochodu a kolejne 10 znaków Łańcuch do modelu samochodu, Mogę powiedzieć coś takiego, Mogę zadeklarować nową zmienną typu struct samochodu herbie. I wtedy mogę coś powiedzieć jak herbie.year równa jeden tysięcy dziewięćset sześćdziesięciutrzy, i herbie.model równa Beetle. Dobrze. Używam pól w Kontekst strukturze ale nigdy nie mogłem po prostu powiedzieć coś takiego. Dobrze? Nie mogę korzystać z nazwy pola niezależnie od konstrukcji. To coś w rodzaju podstawowej rzeczy. 

Więc pola jest podstawą struktur C są bardzo podobne do właściwości bycia fundamentalne znaczenie dla obiektów JavaScript. Ale co sprawia, że ​​ich szczególnie interesujące jest to, że obiekty mogą również mieć co nazywane są metody, które są naprawdę tylko wyobraźnia słowo funkcji są właściwe do obiektu, jak również. Więc jest to funkcja, która może być tylko nazywa się w ramach przedmiotu. Tylko obiekt, który został zdefiniowany ta funkcja wewnątrz ITS, jeśli uważasz, że około struktura, funkcja jest zdefiniowana wewnątrz tych definiowania nawiasy klamrowe struktury. Więc to oznacza tylko coś ze strukturą. I to jest coś w rodzaju tego, co robimy tutaj z obiektów i metod. Jest to w zasadzie to, że jesteśmy określanie funkcję ma sens tylko na zasadzie dany obiekt, a więc nazwać sposobu przedmiotu. I nigdy nie możemy nazwać Funkcja niezależna od obiektu, podobnie jak nie możemy powiedzieć, rok lub modelu niezależna od struktury w C 

Programowania, tak funkcjonalne paradygmaty wyglądać tak. Funkcji, a następnie, gdy mijamy w obiekcie jako parametr. W programowania obiektowego języków, ten rodzaj wystąpią odwrócone, i myślimy o to tak, object.function. Więc to rodzaj tej kropki Operator ponownie sugerując że jest to jakiś rodzaj nieruchomości lub atrybut samego obiektu. Ale to, co obiekt zorientowany język programowania może zrobić, aby funkcję zadzwonić na metodzie, ponownie, co jest po prostu specjalne słowo dla funkcji które jest nieodłącznym obiektu. To co, że składnia może wyglądać. A więc zaczynamy widzieć niektórzy W tym kontekście JavaScript. 

Można również pomyśleć o obiekcie coś w rodzaju tablicy asocjacyjnej, których nie znamy z PHP. Pamiętaj tablica asocjacyjna pozwala nam na pary wartość klucza, zamiast posiadania indeksy 0, jeden, dwa, trzy i tak dalej, jak jesteśmy przyzwyczajeni z C tablice. Tablice asocjacyjne mogą map słowa, takie jak w filmie, PHP, rozmawialiśmy o polewy pizzy. I tak mieliśmy tablicę zwane pizze, a my miał ser był kluczowy i $ 8.99 był wartość, a następnie był kluczowym pepperoni, $ 9.99 była wartość, i tak dalej. I tak, możemy również pomyśleć o obiekt rodzaj podobny do stowarzyszeniowej szyk. I tak ta składnia tutaj by utworzyć nowy obiekt nazywa herbie z dwoma Właściwości środku. Rok, który ma wartość 1963, i model, który jest przypisany ciąg Chrząszcz. 

I tutaj odnotować, że używam pojedyncze cudzysłowy w JavaScript. Możesz użyć pojedyncze lub podwójne cudzysłowy kiedy mówisz strun. To tylko konwencjonalnie zdarza się, że większość czasu kiedy piszesz JavaScript, po prostu użyć apostrofów. Ale mogę użyć cudzysłowia tutaj, i to byłoby perfekcyjnie, jak również. 

Tak, pamiętam, jak w PHP mieliśmy tego pojęcia z pętli For Each, która nam pozwoli do przechodzenia przez wszystkie wartości klucza pary asocjacyjną tablica, bo nie ma tego zdolność do iterację przez 0, jeden, dwa, trzy, cztery, i tak dalej? JavaScript ma coś bardzo podobnego, ale to nie nazywa się dla każdej pętli, to się nazywa w pętli. Więc gdybym powiedział do mnie tego, na klucz var w obiekcie, to jakby podobna do stwierdzenia, dla każdego coś jako coś. Ale ja tu robię jest iteracji przez wszystkie klucze mojego obiektu. Wewnątrz i kręcone szelki tam, chciałbym używać obiektów klucz nawiasach kwadratowych odnieść wartości w tym klucza lokalizacji. 

Alternatywnie istnieje jeszcze inne podejście. Jeśli po prostu tylko dbają o wartości, co mogę powiedzieć o klucz obiektu, i wystarczy użyć przycisku wewnątrz. Tak na klucz var w obiekcie, mam używać nawiasów kwadratowych obiektu Klucz wewnątrz pętli. Aby uzyskać klucz var obiektu, mogę wystarczy użyć przycisku wewnątrz pętli, bo jestem po prostu specjalnie mówić o tam wartości. 

Więc być może bierze spojrzeć na różnicę wystarczy, aby szybko pokazać, Różnica między czterema i za razem z bardzo specyficznym tablica, które tu mamy, tydzień tablica. Więc muszę znaleźć nową tablicę że wypełnione siedmiu strunach, Poniedziałek wtorek środa, Czwartek, piątek, sobota, niedziela. I chcę teraz iteracji dzięki tej tablicy, drukowanie pewne informacje. Jeśli używam w pętli wydrukować informacje, co myślicie mam zamiar dostać? Cóż, rzućmy okiem. I zanim się przeskoczyć z okna mojej przeglądarki, po prostu wiem, że console.log jest jakby jednym sposób robi druku F w JavaScript. Ale co to jest konsola? Dobrze, że to, co mamy zamiar iść przyjrzeć się teraz. 

OK, więc wracamy tutaj w oknie mojej przeglądarki, i mam zamiar otworzyć do moich narzędzi programistycznych. Ponownie, jestem po prostu uderzając F12 otwarcie narzędzia programistyczne. I zauważ, że tu, w top wybrałem konsolę. Jest to więc pojęcie z konsoli dewelopera, i pozwoli nam drukowania informacji na zewnątrz, coś jak terminal, ale jak zobaczymy nieco później, możemy również wpisać informacje współdziałać z naszej strony internetowej. Mam zamiar przybliżyć trochę tu, i będę teraz kliknij w teście. I cztery w test-- nie będę pokazać kod dla niego w tej chwili, ale dostaniesz go, jeśli pobrać kod źródłowy, który wiąże się z tym video-- jest tak, że w pętli że widzieliśmy tylko Drugi temu na slajdzie. 

Więc będę kliknięcie, że przycisk, a tu, oto co jest drukowane w Konsola, 0, jeden, dwa, trzy, cztery, pięć, sześć. Nie drukuje informacje wewnątrz tych miejscach tablicy, dlatego, że zastosowano w pętli. I wewnątrz ciała pętli, I po prostu wydrukować klucz klucz nie sprzeciwiają. Ale jeśli teraz wyczyścić konsolę, a ja przełączyć się do testu, a cztery z testu Mówię używać do pętli zamiast i wydrukować klucz, gdy klikam, że teraz jestem uzyskiwanie Rzeczywiste elementy wewnątrz mojego obiektu czy moja tablica w tym przypadku. Moja tablica dni tygodnia. I drukowane poniedziałek, Wtorek środa. Tak, że jest różnica między W pętli for, które wypisuje tylko klucze, jeśli po prostu użyć klawisza Wewnątrz korpusu pętli i do pętli, która drukuje na wartości, jeśli używasz tylko Kluczem do wnętrza ciała pętli. 

Dobrze, jak możemy teraz zacząć łączenia ciągów i może mieszać niektóre zmienne z interpolacją jak byliśmy w stanie zrobić w PHP? Cóż, jesteśmy całkiem znajomo z tego z PHP. To w jaki sposób to zrobić przy użyciu kropka łączenia ciągów. W JavaScript, chociaż, faktycznie użyć czegoś zwany operator plus, które to może nawet trochę więcej Intuicyjny, prawda? Dodajemy kilka strun razem. Warto więc wrócić i zobaczyć, co to będzie drukować, jeśli chcemy, aby wydrukować wszystkie informacje, w tym tygodniu tablicy. W porządku, więc w ramach tutaj w ramach łańcuchów znaków, Mam dwie opcje, budynek ciąg V1 i V2 to ciąg budynków. I zobaczymy, dlaczego trzeba V2 w drugim. Ale będę kliknij Ciąg budynku V1, które jest kod byliśmy po prostu przyjrzeć się, console.log z wszystkich plusów. Zobaczymy, czy tym wydruków z czego oczekujemy. 

Poniedziałek jest dniem numer 01 tygodnia, Wtorek jest dzień numer 11 tygodnia. Cóż, co starałem zrobić tam dostać to wydrukować poniedziałek jest liczba dni jeden, wtorek jest dzień numer dwa. Ale wydaje się, że jestem Zawsze wydrukowanie jednego. Cóż, to dlaczego? Cóż, okazuje się, przyjrzeć w tym małym fragmencie kodu tutaj. Zauważ, że używamy plus operator w dwóch kontekstach. 

I tak oto, gdzie być może rzeczy że mamy rodzaju mówili, Och, to jest tak wielki. My nie zajmujemy się już typów danych. Ale tu, gdzie fakt, że tracimy typy danych w rzeczywistości może być nieco problem dla nas. Teraz, operator Plus służy do łączenia ciągów i dodać numery razem JavaScript ma aby jego najdokładniej co do tego, co chcę to zrobić dla mnie. I w tym przypadku, to domyślacie źle. Po prostu łączone dni, co byłoby 0, jeden, dwa, trzy, cztery, pięć lub sześć a potem po prostu łączone które następnie łączone jeden i. To faktycznie nie dodać je razem. I tak te języki, PHP i JavaScript, że abstrahuje się to pojęcie typów, nie masz do czynienia z nim już. Nie mają jeszcze typy pod maską. I możemy, w sytuacjach, w ten sposób, wykorzystać ten fakt mówiąc coś jak może być to, co mówi JavaScript, przez sposób traktują to jako liczba całkowita, nie traktować go jako ciąg znaków, nawet choć jesteśmy zmieszanie sznurki i całkowite tutaj. 

To tylko jedna z tych rzeczy że wydaje się tak wielka, w kontekście że nie mamy do już do czynienia z typami, ale czasem będziesz uruchomić w sytuacji dokładnie tak, jak to, gdzie fakt, że nie masz kontroli nad typów może obrócić się przeciwko tobie jeśli nie jesteś ostrożny. I tak, jeśli wracamy na IDE, jestem zamierza usunąć konsolę ponownie, i mam zamiar kliknąć ciąg Budynek wersja dwa, które gdzie używam tego parse int funkcji. Teraz jest drukowanie informacje, że spodziewam. Numer jeden dzień w poniedziałek, wtorek Jest dni liczba dwóch, i tak dalej. 

Więc porozmawiajmy o funkcji ponownie. Obiecałam, że mówimy o anonimowość funkcje, a teraz kontekst, że nadeszła. Zanim więc zrobić, porozmawiajmy ponownie o macierzach tylko na sekundę. Więc tablice są specjalne Przypadek obiektu. W rzeczywistości, wszystko w JavaScript jest rzeczywiście obiekt. Więc funkcje są Szczególnym przypadkiem obiektu, liczby całkowite są specjalnym Sprawa obiektu, ale tablice specjalnie mają szereg metod. Pamiętaj, dlatego, że są przedmioty, mogą one mieć właściwości i metody. Mają szereg metod mogą być stosowane do tych przedmiotów. Jest to metoda o nazwie rozmiar, array.size, który powróci do Ci jak można się spodziewać liczba elementów w tablicy. Array.pop, coś jak nasze pojęcie pstrykaliśmy stosu, jeśli przypomnieć z naszej stosy wideo usuwa ostatni element tablicy. Array.push dodaje nowy element do końca tablicy. Array.shift jest rodzajem jak DQ, to spawów się to pierwszy element tablicy. 

Ale jest też inny szczególny Metoda tablicy nazywa mapę. I to jest swego rodzaju ciekawa koncepcja. Więc co jest idea mapie? Będziesz w rzeczywistości zobaczyć w kilku innych językach a my nie mówimy o rodzaj kartografów map tutaj, mówimy o funkcję mapowania. W kontekście jesteśmy mówić o tutaj, mapa Jest to specjalny nam praca może wykonywać na tablicy do zastosowania szczególną funkcję na każdy element tablicy. i tak powiedzielibyśmy w w tym przypadku, może array.map, i wewnątrz niego, przekazujemy na mapie jest funkcją, że chcemy do stosowania do każdego elementu. Więc jest to rodzaj analogiczne do korzystania z pętla iteracyjne nad każdym elementem i zastosowanie konkretnego funkcję do każdego elementu Ten właśnie JavaScript został zbudowany w Pojęcie odwzorowania, które mogą być stosowane. I to jest wielki kontekst do mówić o funkcji anonimowej. 

Więc powiedzmy, że mamy ta tablica liczb całkowitych. To się nazywa Nums, i to ma pięć rzeczy w nim, jeden, dwa, trzy, cztery, pięciu. Teraz chcę map niektóre Funkcja na tej tablicy. Chcę mieć funkcja zastosowanie dla każdego elementu macierzy. Cóż, powiedzmy, że to, co chcę zrobić, to po prostu podwoić wszystkie elementy. Co mogę zrobić, to użyć pętli dla var I jest równa 0, to jest mniej niż lub równy 4, I plus plus, oraz następnie dwukrotnie każdy numer. Ale mogę też zrobić coś takiego. Mogę powiedzieć Nums dawniej jeden dwa trzy cztery pięć, Teraz jednak chciałbym do zastosowanie mapowania na tej tablicy gdzie będę taki jak ty podwoić każdy numer. I to jest dokładnie co sie tu dzieje. Zauważmy jednak, co mi przechodzi jako argument do map. To jest anonimowa funkcja. I zauważyć, że nie dały funkcja ta nazwa, Mam tylko dałeś mu listę parametrów. I tak to jest przykład anonimowego funkcji. 

Zazwyczaj nie nazwałbym tego Funkcja poza kontekstem mapie. Jesteśmy określając ją jako parametr mapować, i tak naprawdę nie trzeba mieć nazwę dla niego, jeśli Jedyną rzeczą, która dba o to mapa i jest to zdefiniowane w prawo tam w środku mapy. I tak to jest anonimowa funkcja. Nie byliśmy w stanie to zrobić wcześniej. Mapa niektórych funkcji, które przyjmuje jeden parametr, num, i to, co robi, że funkcja jest powrót Num razy 2. I tak, po tym mapowania został zastosowany, to co teraz Nums wygląd jak, dwa, cztery, sześć, osiem, dziesięć. A my pop do mojego okno przeglądarki i po prostu spójrz na to bardzo szybko, jak dobrze. 

Więc mam tu inny przycisk na mojej stronie internetowej o nazwie dwukrotnie. A kiedy kliknij dwukrotnie, i to mówi mnie, zanim to był jeden, dwa, trzy, cztery, pięć po dwa, cztery, sześć, osiem, 10. A jeśli wrócę i kliknij dwukrotnie raz, dwa, cztery, sześć, osiem, 10. A potem, cztery, Osiem, 12, 16, i 20. I co ja robię w tej funkcji? Cóż, jeśli tylko pojawi się na IDE, oraz I wyciągnąć moją anonimową funkcję, tutaj na linii siedmiu do 13, jestem robi trochę fantazyjne pracy tutaj, ale ja tylko drukowanie co jest obecnie w tablicy. Następnie na linii 16, 17, i 18, nie moja mapa. To gdzie ja stosowania tego podwojenie Funkcja do każdego elementu. A potem trochę dalej w dół, Jestem po prostu robi to samo Robiłem wcześniej, lecz teraz jestem drukowanie zawartości tablicy potem. Ale to wszystko zrobiłem tutaj jest wystarczy użyć anonimową funkcję do mapowania w ramach całej tablicy. 

Więc jeszcze jeden duży temat rozmawiać w JavaScript jest pojęcie zdarzenia. Zdarzenie to coś, co po prostu się dzieje gdy użytkownik wchodzi w interakcję z sieci Strona, więc może coś się kliknąć, a może zakończeniu ładowania strony, a może oni przeniesione ich myszy nad czymś, lub ich wpisaniu czegoś w polu wprowadzania. Wszystkie te rzeczy są wydarzenia które występują na naszej stronie internetowej. I JavaScript ma Możliwość wspierania coś nazywany obsługi zdarzeń, które jest funkcja zwrotna, że reaguje na zdarzenia html. A co to jest funkcja zwrotna? Cóż, to na ogół tylko kolejny nazwa dla funkcji anonimowej. Jest to funkcja, która reaguje na zdarzenie. I tu dochodzimy do Pomysł wiązania pewnych funkcji do konkretnego atrybutu html. Większość elementów html mają Wsparcie dla atrybutu że nie mówić o w html wideo czegoś takiego na kliknięcie lub przy aktywowaniu lub na obciążenia, wszystkie z tych zdarzeń które można następnie napisać funkcje że umowa z tych wydarzeń gdy te zdarzenia wystąpić na swojej stronie internetowej. 

I tak może twój html wygląda tak. I mam tutaj dwa przyciski, jeden przycisk i przycisk dwa, i tu mam obecnie zdefiniowane nic, ale to jest, gdy atrybut kliknięcie jest najwyraźniej częścią mojego tagu html. Więc najwyraźniej kiedy zdefiniować, co jest dzieje się wewnątrz tego atrybutu, to będzie jakiś JavaScript Funkcja, która reaguje na zdarzenie przypuszczalnie z kliknięciu na Przycisk przycisk jeden lub dwa. 

Co to za fajne jest to, my może napisać ogólny obsługi zdarzeń. I tego zdarzenia będzie utworzyć obiekt zdarzenia. A obiekt zdarzenia powie nam który z dwóch przycisków został kliknięty. Teraz, jak to działa? Cóż, może to wyglądać mniej więcej tak. Więc będziemy najpierw zdefiniować nasze przyciski mieć odpowiedź na oddzwonienie Funkcja, która będzie nazywana po kliknięciu przycisku, zadzwonimy alert zdarzeń nazwę. I zawiadomienia w obu przypadkach których jesteśmy przekazując w ten parametr zdarzenia. Tak nazywamy tę funkcję lub gdy funkcja ta jest wyzwalany przez zaistnienia zdarzenia, to będzie stworzyć ten obiekt zdarzenia i przekazać ją jako Parametr ostrzega nazwę. I że obiekt zdarzenia jest będzie zawierać informacje o który przycisk został kliknięty. A jak to zrobić? Cóż, może to wyglądać mniej więcej tak. Więc teraz, w moim oddzielne Plik JavaScript, mógłbym znaleźć tego Funkcja ostrzegania Nazwa, która ponownie przyjmuje ten parametr zdarzenia. I to tutaj jest, gdzie jestem wykrywania który przycisk został wyzwolony, var spustu wynosi imprezę Element źródłowy kropka. Co było źródłem, które stworzył Ten obiekt zdarzenia, który został przekazany w? Czy to był jeden przycisk czy był to przycisk dwa? 

I to tutaj wszystko robię to drukowanie trigger.innerhtml. No cóż, w tym przypadku, w tym Kontekst, trigger.innerhtml jest tylko to, co jest napisane na przycisku. Tak się składa, jeśli skaczemy powrót na sekundę, które za co w między tymi tagami przycisków. To będzie jeden przycisk lub przycisk dwa. I rzućmy okiem na jak to będzie obsługi zdarzeń wyglądać, gdybyśmy mieli to działa w praktyce. 

Więc przede wszystkim, masz otworzyły events.js, które jest plik JavaScript, gdzie Mam zdefiniowane tej funkcji. I jak widać, jest to prawie dokładnie to, co właśnie zobaczyłem na slajdzie drugi temu. I pójdę ponad do Strona główna używaliśmy. I tu mam przycisk jeden przycisk i dwa. A ja kliknąć jeden przycisk. Kliknąłeś przycisk jeden, jeśli Ciebie widać tu, w pogotowiu. OK. Kliknij przycisk dwa, ci kliknięciu na przycisk dwa. 

Więc oba przyciski mają samo wywołanie funkcji, prawda? Oboje byli alert Nazwa wydarzenie, ale to obiekt zdarzenia które zostanie utworzone, gdy klikamy na mówi nam, który przycisk został kliknięty. Nie trzeba pisać dwóch oddzielnych funkcje lub umowa o konieczności do przekazania żadnych dodatkowych informacji. My tylko opierając się na co JavaScript będzie zrobić dla nas, która jest stworzenie, które rodzaj obiektu zdarzenia w naszym imieniu. Jest dużo więcej do JavaScriptu niż co omówiliśmy w tym filmie, ale o nich fundamentalna powinna cię dość długi sposoby uczenia się wszystko, co będzie musisz wiedzieć o tym ciekawy język. Jestem Doug Lloyd. To CS50.