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