DOUG LLOYD: W tym filmie chcieliśmy zawołać osobną uwagę do bardzo szczególności elementem JavaScript które można znaleźć pod ręką kiedy zaczynasz do pracy na manipulowanie stron internetowych i zmianę treści swojej stronie internetowej w locie. I to jest pojęcie Document Object Model. Tak jak widzieliśmy w naszym wideo na JavaScript, obiekty są bardzo elastyczne. I mogą zawierać różne pola. I choć nie iść na wiele szczegóły, te pola lub właściwości, że prawdopodobnie więcej odpowiednio je nazwać w kontekście przedmiotu, nawet Właściwości te mogą być inne obiekty. I wewnątrz tych obiektów może być inne obiekty. 

Musisz to bardzo duży obiekt z wieloma innymi przedmiotami w jej wnętrzu, jakiego rodzaju tworzy ten pomysł wielkiego drzewa. Teraz obiekt dokument jest wyjątkowy obiekt w JavaScript która organizuje całą internecie Strona w ramach tego rodzaju parasolem przedmiotu. I tak wewnątrz dokumentu przedmiotem są obiekty prezentujące głowa i ciało swojej stronie internetowej. 

Wewnątrz tych są inne obiekty, et cetera, et cetera, aż cała strona ma organizowany w tym wielkim obiekcie. Co jest odwrotnie tutaj, prawda? Dobrze wiemy, jak pracować z obiektów w JavaScript. 

Więc jeśli mamy obiekt, który odnosi się do całej naszej stronie internetowej, że Oznacza dzwoniąc prawidłowe sposoby modyfikacji tego obiektu lub zmiany niektórych jego właściwości, to może zmieniać elementy Strona programowo przy użyciu JavaScript zamiast kodować rzeczy z, powiedzmy, HTML. Więc oto przykład bardzo prosta strona, prawda? To nie ma znaczników HTML, głowę. 

Wewnątrz znajduje się tytuł, hello world. Wtedy mam ciało. Wewnątrz, że mam trzy różne rzeczy. Mam tagu nagłówka h2, paragraf, a link. Jest to bardzo prosta strona internetowa. 

Cóż, co może dokument obiekt do tego wygląda? Cóż, to trochę przerażające może na początku. Ale to naprawdę tylko wielkie drzewo. A na samym korzeniu to jest dokument. 

Wewnątrz dokument jest inny Obiekt odnosząc się do HTML z mojej strony. I HTML z mojej strony to wszystko. A następnie wewnątrz HTML Obiekt, Mam obiekt głowy, która odnosi się do wszystkiego, co istnieje. 

I wewnątrz tam, Mam obiekt tytułu. I wewnątrz nie mam innego obiekt to tylko hello world. Mógłbym mieć moje ciało reprezentowane tak. 

Wewnątrz mojego ciała, mam h2 obiekt i obiekt p do ust oraz obiekt o link. A więc ta cała hierarchia może być reprezentowana jako duży drzewa z dużą ilością mniejszych niewiele rzeczy pochodzących od niego. Teraz, oczywiście, kiedy jesteśmy programowania, mamy nie myśl o takie rzeczy jak wielkie drzewo. Chcemy, aby zobaczyć rzeczywisty Kod rzeczy związane. 

I na szczęście, możemy korzystać z naszych narzędzi programistycznych rzeczywiście spojrzeć na Dokument przedmiotem niniejszej strony. I zróbmy to. Tak już otworzył kartę przeglądarki. 

A ja otworzył narzędzi dla programistów. I w moim wideo na JavaScript, ja wspomniał, że konsola nie jest tylko gdzieś, gdzie drukujemy informacji, jest to również miejsce, gdzie możemy informacje wejściowe. W związku z tym, co Mam zamiar powiedzieć to, Chciałbym wrócić obiekty na dokumenty, więc mogę zacząć, aby spojrzeć na niego. Więc jak mogę to zrobić? Cóż, jeśli chcę zorganizować naprawdę ładnie, Mam zamiar powiedzieć console.dir, D-I-R. Teraz używam tylko console.log do druku się coś bardzo prostego. Ale jeśli chcę, aby to zorganizować hierarchicznie jak przedmiot, Chcę to rodzaj zorganizowany jak struktury katalogów. 

Więc chcę console.dir dokument. Mam zamiar naciśnij Enter. A tuż pod nim teraz, a ja przybliżyć tutaj, Mam ten dokument odpowiedzi z małą strzałkę obok. Teraz, gdy otwieram tę strzałkę, nie będzie wiele rzeczy. 

Ale będziemy ignorować wiele o to i po prostu rodzaj ostrości na najważniejszej części, więc może zacząć poruszać tego dokumentu. Jest dużo więcej do DOM niż tylko rodzic węzłów i węzły potomne. Jest wiele rzeczy pomocniczy. 

Więc mam zamiar otworzyć tego. I jest o wiele rzeczy, które pojawia się. Ale wszystko zależy mi na to tu, węzły potomne. Otwórzmy, że się. 

Wewnątrz nie widzę coś znajomego, HTML. Więc wewnątrz naszego dokumentu jeden poziom w dół, HTML. Otwieram, że się. Co mamy spodziewa? 

Jeśli pamiętacie z naszego schematu, co powinno znaleźć się wewnątrz HTML? Co dwa węzły są poniżej w drzewie? Przekonajmy się. Otwieramy HTML. Schodzimy do jego węzłów potomnych. 

Pop, że otwarte. Nie ma głowy i ciała. I możemy otworzyć głowę. Idź do jego węzłów potomnych. Cóż, jest tytuł. 

I mogliśmy iść i on tak zawsze. Możemy to zrobić z ciałem, jak również. Ale jest na to sposób dla nas, aby spojrzeć na dokument zorganizowane jako duży obiekt. A jeśli spojrzymy na to duży obiekt, który wygląda dużo jak kod, to oznacza, że ​​możemy rozpocząć manipulować ten wielki obiekt za pomocą Kod zmienić co nasi strona wygląda i czuje się jak. 

Tak, że to dość potężne narzędzie mamy do dyspozycji teraz. Więc jak tylko zobaczył, Sam obiekt dokument i wszystkie przedmioty w jej wnętrzu mają właściwości i metody, po prostu jak każdy inny obiekt, który mamy Pracuję z w JavaScript. Ale możemy wykorzystać te właściwości i korzystać z tych metod rodzaj drążyć od wielkiego dokumentu i uzyskać coraz niżej i niżej, coraz bardziej rozdrobnionych ziaren szczegółów, dopóki nie dostać się do bardzo specyficzny kawałek naszego Strona internetowa, która chcemy zmienić. 

A kiedy aktualizować właściwości Document Object lub zadzwoń do tych metod, rzeczy mogą się zdarzyć na naszej stronie internetowej. I nie trzeba robić żadnej odświeżający mieć te zmiany odniosły skutek. 

I to jest całkiem fajna możliwość mają, gdy pracujemy z kodem. Więc jakie są niektóre z tych właściwości które są częścią obiektu dokumentu? Cóż, prawdopodobnie zobaczył Kilka z nich bardzo szybko jak byliśmy skompresowanie przez giganta dokumentu Obiekt po prostu zobaczyłem w przeglądarce internetowej. 

Ale kilka z tych właściwości może być takie rzeczy jak wewnętrznej HTML. A może nawet przypomnieć mnie za pomocą tego w filmie JavaScript na samym końcu, kiedy mówił o wydarzeniach. Jaki był ten wewnętrzny HTML? Cóż, to tylko to, co jest pomiędzy znacznikami. 

I tak wewnętrzna HTML, na przykład, tytułem tag, gdybyśmy kontynuowałem w że przykład przed chwilą, byłby hello world. To był tytuł naszej strony. Inne właściwości zawierać nazwę węzła, który to nazwa HTML Element taki, jak tytule. ID, który jest identyfikatorem atrybut elementu HTML. 

Przypomnijmy, że możemy specjalnie wskazują szczególne elementy naszej HTML z atrybutem ID, które zwykle jest przydatna w kontekście CSS, swoiście. Rodzic, który jest odniesieniem do co tylko się nade mną w DOM. I węzły potomne, który jest odniesienia do tego, co się pode mną. I widzieliśmy wiele, że po prostu pominie. Węzły potomne, to jak mamy niżej i niżej w drzewie. 

Atrybuty, to tylko tablicą z atrybutów elementu HTML. Więc przykład atrybutów może się jeśli masz znacznika obrazu, zwykle ma atrybut źródłowego, może na wysokość i szerokość atrybut. I tak, że będzie tylko tablicą wszystkich atrybutów związanych z tego elementu HTML. 

Styl jest inny, że nie stanowią CSS stylizacja konkretnego elementu. A później w tym wideo, będziemy specjalnie styl dźwigni, aby kilka o zmianach na naszej stronie internetowej. To są niektóre właściwości. 

I są też niektóre metod, które możemy wykorzystywać również szybciej może izolować elementy obiektu dokumentu. Być może, najbardziej uniwersalny z nich jest getElementById. Więc mogę powiedzieć coś takiego, bo pamiętać, że jest to metoda Dokumentu Obiekt, document.getElementById. 

A w środku tych nawiasów, określ element HTML z określonym ID atrybut, że mam wcześniej ustawić i będę zaraz idź w prawo do tego elementu ogólnej strony. Więc nie trzeba być może wiercić w dół każdej warstwie. Może po prostu użyć tej metody, aby znaleźć to, coś jak pocisk szukając ciepła, dobrze? To po prostu idzie i znajdzie dokładnie to, czego szuka. 

GetElementsByTagName jest bardzo podobne w duchu. Być może będzie to znaleźć wszystkie z śmiałe tagi lub wszystkie znaczniki p i daj mi tablicę wszystko że mogłem wtedy pracować. appendChild dodaje coś jeden poziom w dół w drzewie. 

Więc mogę dodać cały nowy Element o jeden poziom niżej. Albo mogę usunąć element, który jest jeden poziom niższy, a jeśli chcę usunąć coś z mojej strony internetowej. Teraz krótka notatka kodowanie i szybkie bóle głowy oszczędności notatkę, miejmy nadzieję. 

getElementById-- d jest małe. Nie mogę powiedzieć, ile razy mam Używane getElementById i kapitalizowane tam d. Ponieważ jest to bardzo powszechne. Jeśli piszemy identyfikator słowo, to Ja zwykle Kapitał Kapitał D. A mój kod po prostu nie działa. I nie mogę zrozumieć dlaczego. To jest naprawdę, naprawdę, naprawdę wspólny problem, że każdy robi, nawet ekspertów, którzy robi to na zawsze. Więc po prostu mieć świadomość, getElementById, że d jest małe. I miejmy nadzieję, że oszczędza kilka minut co najmniej bólu serca. 

Więc co to wszystko ma nam powiedzieć? Mamy tych metod. Mamy te właściwości. Teraz, jeśli zaczniemy od dokument, dokument. cokolwiek, możemy dostać się do dowolnego Pojedynczy kawałek naszej stronie internetowej że chcemy za pomocą JavaScript po prostu dzwoniąc do tych metod i wykorzystując właściwości że znajdujemy się w różnych miejscach. 

To może się rozwlekły, to document.getElementById, Może mają długą nazwę znacznika, może zrobić więcej połączeń później. Co może się nieco rozwlekły. I jak programistów, jak masz chyba widać w wielu z tych filmów, nie lubimy rozwlekły rzeczy. 

Chcemy być w stanie szybko zrobić rzeczy. Dlatego pragniemy bardziej zwięzły sposób, aby coś powiedzieć. Więc tego rodzaju prowadzi do Pojęcie coś o nazwie jQuery. Teraz jQuery nie jest JavaScript. To nie jest część JavaScript. 

Jest to biblioteka, że ​​został napisany przez niektórych programistów JavaScript około 10 lat temu. A jego celem jest uproszczenie tego, co jest po stronie klienta skryptów nazywa, które jest w zasadzie to, co my po prostu mówisz o manipulacji DOM. I tak, jeśli chciałem zmodyfikować Kolor tła mojej stronie internetowej, może specyficzny Div. 

Tutaj, mam podobno coraz ElementById colorDiv. I chcę, aby ustawić kolor tła. Jeśli jestem tylko przy użyciu czystego JavaScript przy użyciu Document Object Model, że jest wiele rzeczy, prawda? document.getElementById colorDiv.style.backgroundColor = zielony. 

Ufff. To było wiele do powiedzenia. To dużo, aby wpisać, też. I tak w jQuery, możemy być może powiedzieć, to trochę bardziej zwięźle. Kompromis jest, że to może trochę nieco bardziej tajemnicze się nagle, dobrze? 

Przynajmniej długo jest nieco bardziej wyjaśniający, co robimy. Ten znak dolara, nawiasy, apostrof, hash, colorDiv, prawda? Co to znaczy? Dobrze, że to w zasadzie tylko document.getElementById colorDiv. 

Ale to ten rodzaj stenografii sposób to zrobić przy użyciu jQuery. Miejmy tylko spojrzeć teraz na kilka różnych sposobów, że może faktycznie korzystać z tego obiektu Document Model manipulować kawałki mojej stronie. W szczególności, będziemy do pracy na manipulowanie kolor szczególny Div, colorDiv, na stronie internetowej. Warto więc spojrzeć na to. W porządku. Więc jestem na stronie. To się nazywa test.html podczas pobierania jeśli chcesz majstrować z tym. A ja mam kilka Przyciski na tej stronie. A ja mówię, że poszczególne funkcje na kolor tła, fioletowy, zielony, pomarańczowy, czerwony, niebieski, jedna funkcja na kolor tła, obsługi zdarzeń dla koloru tła i jQuery. Co ja mówię kiedy to robię? Tak więc widzieliśmy przycisków. Teraz rzućmy okiem na niektóre z kodu źródłowego tutaj. Zaczniemy test.html. Tak więc poszczególne funkcje w tle kolor to co ja wpisane tutaj. Pozwól mi przejść trochę. 

A zauważysz, że ja zdefiniowaniu tych przycisków powiedzieć, kiedy kliknięciu tego przycisku, wywołać funkcję włączyć fioletowy. Po kliknięciu tego przycisku, a raczej wywołania funkcji zmieni kolor na zielony, zmieni kolor na pomarańczowy, zmieni kolor na czerwony, zmieni kolor na niebieski. Można się domyślić, że to nie jest chyba najlepszy projekt sensu, prawda? 

Byłoby miło, gdybym mógł mają bardziej ogólne podejście. Cóż, po pierwsze my spojrzeć na co te pięć funkcje są document.getElementById colorDiv.style.background = fioletowy, zielony, pomarańczowy, czerwony, i niebieski, odpowiednio. Tak więc, nie jest szczególnie najlepszy projekt. 

Kolejny zestaw przycisków Mam się Pisałem pojedyncza funkcja nazywa zmienić kolor, który najwyraźniej akceptuje ciąg jako jego argument. Więc to jest trochę lepiej. Fioletowy, zielony, pomarańczowy, czerwony, niebieski jest argument. Więc pisałem bardziej ogólnego Sprawa funkcji JavaScript, co może wyglądać tak. Jestem przechodząc. Ta zmiana koloru funkcja jest spodziewa się argument o nazwie koloru. I mówię ustaw kolor tła do koloru. Więc tutaj reprezentuje to, co mam tutaj. Więc to jest nieco lepiej. 

Ale być może uda mi się coś lepszego. Jeśli idziemy w dół, aby przyjrzeć w sytuacji, obsługi zdarzeń, Teraz wszystkie te rozmowy wyglądają tak samo. Jeśli pamiętacie dla naszego dyskusja na temat obsługi zdarzeń, Można uzyskać informacje na temat, który z te przyciski został kliknięty i używać. 

I tak w event.JavaScript, mam napisane wydarzenie zmiana koloru, które domyśla się, który przycisk został kliknięty. To linia obiekt spust. I to tutaj, to robi się naprawdę rozwlekły. Ale to, co robię, to jestem ustawienie tła kolor triggerObject inner.HTML. To tekst pomiędzy znacznikami przycisków. 

A potem najwyraźniej mają aby ustawić go na małe litery. A to w jaki sposób mogę przekonwertować całej karty ciąg znaków na małe litery w JavaScript za pomocą metoda na małe litery. Bo kiedy ustawić kolor, jak staram się zrobić tutaj, kolor ma być pisane małymi literami. 

Ale przycisk, który miałem, jeśli przyjrzeć, zauważyć, że tekst jest napisane z P kapitałowego na fioletowy. A następnie w bardzo Dno tutaj, ja widocznie spróbuj zrobić to przy użyciu jQuery, jak również. I w tym przypadku, nie jestem w rzeczywistości wywołanie funkcji w ogóle. Właśnie powiedział uczniom, że jestem używając do tego przycisku jest przycisk JQ. To jest. 

Więc w jaki sposób jQuery wiem, co robię? No, to jedną z zalet slash wady jQuery. To może pozwoli mi robić rzeczy, bardzo zwięźle, ale może nie jak intuicyjnie. Może te pozostałe trzy zrobić nieco więcej sensu, co robię. Tu jednak, co się dzieje? 

Wydaje się, tworząc anonimowa funkcja który ładuje gdy mój dokument jest gotowy, więc document.ready, niektórych funkcji będzie się działo. Zasadniczo, gdy jest to dokument gotowy? To kiedy mój załadowaniu strony. 

Więc jak tylko moja strona była załadowaniu następujących funkcji jest zawsze gotowy. Mówi, jeśli obiekt typu jQButton, lub jeśli klasa jQButton został wciśnięty, wykonywania tej funkcji. Więc oto dwa anonimowe funkcje, zdefiniowany wewnątrz drugiej. 

Więc moim całym kontekście tutaj tak daleko jest moja strona podczas ładowania wywołuje tę funkcję. I ta funkcja czeka dla przycisku należy kliknąć. A kiedy kliknięciu przycisku, JQ Przycisk kliknięciu specjalnie, wywołuje ten drugi Funkcja ta, która będzie ustawić kontekst Kolor colorDiv się co tekst jest pomiędzy znacznikami. 

Jest to pojęcie który przycisk został kliknięty. Ale poza tym, to jest coś w rodzaju zachowuje się podobnie do zdarzenia. To tak samo jak ja by wyrazić to w jQuery. Ponownie, jest to prawdopodobnie dużo bardziej zastraszające. To nie jest tak oczywiste, jak coś event.js, co jest być może trochę więcej gadatliwy, ale trochę mniej zastraszające. 

Ale jeśli wracamy do mojego przeglądarce okno, jeśli zacznę clicking-- dobrze, że zmienił się fioletowy. To zielone przy użyciu metody. To jest pomarańczowy z wykorzystaniem obsługi zdarzeń. 

To jest czerwony przy użyciu jQuery, prawda? Wszyscy zachowują się tak samo. Oni po prostu zrobić to za pomocą inaczej podejście do rozwiązania problemu. Jest dużo więcej jQuery to my na pewno Porozmawiamy o tym w filmie. Ale jeśli chcesz dowiedzieć się więcej, można przejdź na jQuery rodzaj dokumentacji i dowiedzieć się nieco więcej na temat Biblioteka to bardzo elastyczny, co doskonale nadaje się do prowadzenia po stronie klienta skryptów, takich jak to, co robimy manipulować wygląd i czuć naszej stronie internetowej z Document Object Model. Jestem Doug Lloyd. To CS50.