JavaScript: Metody przeszukiwania drzewa DOM
od Podstaw
10 godz. 55 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Wstep do programowania oraz najwazniejsze konstrukcje jezyka
- Liczne “smaczki” zwiazane z kazda z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich trescia, atrybutami, stylami CSS
- Odczytywanie wspólrzednych polozenia elementu i jego wymiarów
- Obsluga zdarzen i debugowanie kodu
- Praktyczne projekty
- I wiele, wiele wiecej!
Witaj w kursie JavaScript od Podstaw!
Jeśli poznałeś już wymienione wyżej technologie, to zapewne zdajesz sobie sprawę z ich ograniczeń. Za pomocą języka HTML tworzymy bowiem strukturę dokumentu, dodajemy treść tekstową, obrazy czy wideo. Aby jednak strona internetowa wyglądała perfekcyjnie, korzystamy z arkuszy stylów CSS, które pozwalają nam opisać wygląd wszystkich elementów HTML, ustawić wielkość tekstu czy dodać tło strony. No właśnie, ale gdzie tutaj interakcyjność?Zapewne już wiesz, że język CSS oferuje tzw. pseudoklasy, które pozwalają nam np. przypisać zmianę koloru elementu po najechaniu na niego kursorem myszy. I to tak naprawdę wszystko, na co możemy zareagować. A co gdybyśmy chcieli po wciśnięciu jakiegoś przycisku wysunąć ukryty panel, sprawdzić poprawność wypełnianego właśnie formularza lub pobrać dane z serwera i wyświetlić je na stronie bez przeładowywania witryny? Dobra wiadomość jest taka, że to wszystko jest możliwe z użyciem języka JavaScript, który “rozumie” każda przeglądarka internetowa.Choć język JavaScript powstał jako język skryptowy na potrzeby stron internetowych, to już dawno temu “wyszedł” z przeglądarek internetowych i może być używany tak naprawdę gdziekolwiek. W kursie, który masz przed sobą, poznasz język JavaScript jako niezależny język programowania, a dopiero później dowiesz się, jak wykorzystywać go do wzbogacania stron internetowych. Dzięki postawieniu grubej linii pomiędzy samym językiem, a Obiektowym Modelem Dokumentu dostępnym w przeglądarkach internetowych, będziesz nie tylko bardzo dobrze rozumiał sam język, ale w przyszłości wykorzystasz go do innych zastosowań.Na początku omówimy ciekawą historię języka JavaScript, a chwilę później rozpoczniemy poznawanie najważniejszych jego konstrukcji. I tak dowiesz się czym są zmienne, jakie typy danych dostępne są w tym języku, czym są liczne operatory, instrukcje warunkowe, pętle, tablice, obiekty i funkcje. Wszystkie te zagadnienia są bardzo podobne w innych językach programowania, dlatego kurs ten jest również świetnym wstępem do programowania w ogóle. Każda z przedstawianych konstrukcji języka jest bardzo dokładnie tłumaczona z myślą osobach początkujących. Nie zmienia to jednak faktu, że nawet osoby znające już podstawy języka JavaScript znajdą tutaj coś dla siebie, gdyż na każdym etapie przedstawiane są również liczne ciekawostki odnośnie danej konstrukcji.Kiedy zrozumiesz już jak działa język JavaScript, przejdziemy do drugiej połowy kursu, gdzie dokładnie omówimy Obiektowy Model Dokumentu, dostępny w przeglądarkach internetowych. Zobaczysz jak przeglądarka tworzy z kodu HTML drzewo dokumentu, jak reprezentowane są poszczególne jego węzły, a także jak język JavaScript potrafi z tym “wewnętrznym światem” współpracować. Dowiesz się jak wyszukiwać na stronie interesujących nas elementów HTML, a także jak tworzyć nowe elementy, przypisywać im treść i wstawiać je na stronę. Popracujemy również z atrybutami elementów, ich klasami i wreszcie ze stylami CSS, abyśmy mogli wpływać dynamicznie na wygląd naszej strony.Zobaczysz również, jak możemy w dowolnym momencie odczytać współrzędne położenia elementu na stronie, a także jego wysokość czy szerokość. Tę wiedzę wykorzystamy później w praktycznym przykładzie.Jeden z rozdziałów kursu poświęcony został zdarzeniom, a więc możliwości reagowania na zachowania użytkownika. Dzięki temu zobaczysz, jak możemy przypisać np. zdarzenie kliknięcia do wybranego elementu, a kiedy zostanie on kliknięty, wykona się przygotowany przez nas kod. Poznasz kilka różnych sposobów na przypisywanie oraz usuwanie zdarzeń, a także dowiesz się czym jest tzw. “bubbling” oraz “capturing” czy jak zablokować domyślną akcję przeglądarki.Przy pisaniu jakiegokolwiek kodu, zawsze pojawiają się błędy, dlatego i tutaj Twoje wątpliwości nie pozostaną bez odpowiedzi. Poznasz wszystkie typu błędów, które mogą się pojawić podczas wykonywania naszego kodu, a także wiele sposobów ich wykrycia i wyeliminowania.W kursie nie brakuje oczywiście praktycznych przykładów, które celowo zostały ułożone tak, aby wykorzystać w nich jak najwięcej zdobytej wcześniej wiedzy. Nie zostaniesz więc sam z poczuciem, że co prawda rozumiesz jak działa dana konstrukcja, ale nie masz pomysłu, kiedy z niej skorzystać. Na początek wykonamy praktyczny projekt losowania liczb z wybranego przedziału tak, aby nie mogły się powtórzyć. Już przy tym projekcie poznasz wiele ciekawych technik i sztuczek.Następnie przejdziemy do nieco bardziej zaawansowanego przykładu i napiszemy skrypt, który pozwoli nam sortować dane w tabeli po wybranych kolumnach, kiedy któraś z nich zostanie kliknięta. Zobaczysz jak sortować dane zarówno malejąco jak i rosnąco, a także jak zmieniać kolejność elementów HTML na stronie.W kolejnym projekcie zajmiemy się walidacją danych wpisywanych do formularza, by ten nie mógł zostać wysłany do serwera tak długo, jak zawiera jakiekolwiek błędy. Zobaczysz tutaj zdarzenia związane z polami formularza, a także sposoby na pobieranie z nich wartości i sprawdzanie czy są one poprawne. Zadbamy także o wrażenia użytkownika i wyświetlimy na stronie stosowne błędy, a także podświetlimy źle uzupełnione pola na czerwono.W przedostatnim projekcie wstawimy na stronę przycisk, który będzie się pojawiał po przewinięciu strony w dół, a znikał po odwrotnej akcji. Co jednak ciekawe, po jego kliknięciu, strona zostanie automatycznie, płynnie przewinięta do samej góry.W ostatnim projekcie stworzymy bardzo efektowny dymek z podpowiedzią, który będzie się pojawiał nad elementem po najechaniu na niego kursorem myszy. Wykorzystamy tutaj mnóstwo ciekawych technik. Dowiesz się również jak swój kod przygotować w taki sposób, abyś mógł go udostępnić innym osobom, by w łatwy sposób skorzystały z przygotowanego Tooltipa na swoich stronach.Kurs kończy się sekcją Tips & Tricks, w której znajdziesz 10 krótkich lekcji. W każdej z nich została omówiona jedna sztuczka. Każda z nich pozwoli Ci jeszcze lepiej zrozumieć język JavaScript, ale przede wszystkim zaoszczędzić czas i kilka linijek często niepotrzebnego kodu.Podsumowując, kurs ten jest nie tylko wprowadzeniem do samego języka JavaScript, ale także do Obiektowego Modelu Dokumentu. Dzięki wyraźnemu rozdzieleniu tych dwóch zagadnień, będziesz mógł w przyszłości wykorzystać język JavaScript także do innych zastosowań, poza przeglądarką internetową.
Kurs JavaScript od Podstaw to między innymi:
- Wstęp do programowania
- Najważniejsze konstrukcje języka
- Liczne “smaczki” związane z każdą z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich treścią, atrybutami, stylami CSS
- Odczytywanie współrzędnych położenia elementu i jego wymiarów
- Obsługa zdarzeń
- Debugowanie kodu
- Praktyczne projekty
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript czy programowania nie jest wymagana, gdyż wszystkie konstrukcje są starannie tłumaczone. Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej, z kursem JavaScript w Praktyce, który powstał jako dopełnienie tego kursu i porusza nieco bardziej zaawansowane tematy, na które tutaj zabrakło już czasu.
W tej lekcji już zagłębimy się w drzewo DOM, czyli w obiektowy model dokumentu i pokażę ci jak możemy
elementy HTML wyszukiwać na naszej stronie.
W tym celu przygotowałem taką prostą strukturę jak możesz tutaj zobaczyć.
Pokażę ci teraz jak to wygląda w kodzie HTML.
Mamy tutaj h1 i standardowo tytuł. Następnie mamy div'a z identyfikatorem container.
Wewnątrz dwa elementy P z klasą text, jakiś formularz, który również ma id.
Mamy w środku pola input, które mają type text, mają również name.
Mamy przycisk i mamy jeszcze na dole na przykład taki element jak a, czyli po prostu link. Pokaże ci teraz
jak każdy z tych elementów pobrać.
W kodzie JavaScript i jakie do tego są dostępne w obiektowym modelu dokumentu metody, więc przejdźmy od
razu do skryptu i na początek powiedzmy, że chcemy pobrać ten element container, więc zmienną możemy oczywiście
dowolnie nazwać, ale ja nazwę container.
I teraz, z uwagi na to, że ten element ma id, to mamy taką metodę, która nazywa się
getElementById.
I teraz chcę ci ją pokazać.
Natomiast ta metoda dostępna jest poprzez document.
W ten sposób, a document jest to taki specjalny obiekt, który również jest dla nas udostępniany i pod
którym również znajdziemy różne ciekawe metody.
Natomiast document to jest tak jakby najwyższy obiekt. Mówiłem ci, że najwyżej jest window, ale w samym
obiektowy modelu dokumentu, czyli w strukturze naszej strony najwyżej jest document, a później mamy takie
elementy jak html body itd.
Do HTML moglibyśmy się odwołać poprzez document, documentElement.
Możemy to zrobić np. w ten sposób. Natomiast teraz nie jest to istotne. Wiedz, że document posiada pewne
metody.
Jedną z nich jest wspomniana przeze mnie getElementById, która wygląda następująco.
Ważne jest tutaj, że d jest małe.
Niektórzy czasem piszą to w ten sposób i mamy wtedy błąd.
Metoda jest to, a więc funkcja,
czyli możemy ją wywołać w ten sposób. Ona przyjmuje tutaj string.
I tymże string'iem jest właśnie id, którego szukamy, czyli container. Wpiszmy sobie
to tutaj. No i w tym momencie na naszej stronie, jeżeli zostanie znalezione zostanie nam zwrócony container.
Gdyby nie został znaleziony to null zostanie tutaj zwrócone.
Możemy to sprawdzić wpisując tutaj na przykład container.
Przejdźmy na naszą stronę i zobaczymy.
Container, jak widzisz ma to wartość null, ale jeżeli wpisze tutaj poprawne id, to mamy tutaj po odwołaniu
się do container, czyli w tej zmiennej.
Tego oto div'a po najechaniu konsola od razu pokazuje mi go pokazuje na stronie.
Natomiast, gdybym chciał się do niego odwołać normalnie jak do obiektu, to mógłbym napisać console.dir,
container i zobaczyć na czym możemy operować w języku JavaScript.
Więc jak widzisz, są tutaj różne właściwości tego obiektu i różne również metody, o których jeszcze w
tym kursie będziemy mówić.
Ale to jest to o czym ci mówiłem, że za pomocą języka JavaScript, czyli zapisując to w JavaScript'cie.
Możemy pobrać jakiś obiekt, który zostaje zwrócony.
No i on ma swoje właściwości oraz metody, na których możemy operować.
To jest jedna z metod wyszukiwania elementów.
Ona dobrze działa, jest często wykorzystywana i szukamy wówczas jednego konkretnego elementu, który ma
takie właśnie id.
Teraz pokażę ci jeszcze inne metody.
Będziemy chcieli sobie pobrać na przykład element firstName, który znajduje się tutaj i pokażę ci jak
możemy to zrobić.
Otóż mamy taką metodę. Ona jest rzadko wykorzystywana, ale chciałbym abyś ją znał, więc nazwiemy sobie ją zmienną firstName.
Następnie znowu document i metoda nazywa się getElement, S czyli wszystkie elementy ByName.
Bo wiele elementów może posiadać jedno imię, czyli atrybuty name.
Po prostu i wpiszemy tutaj firstName. Okay, czyli właśnie name, firstName powinno nam zostać tutaj zwrócone.
No i sprawdźmy co to w ogóle jest.
Jeżeli teraz tutaj wpisze firstName, to jak widzisz została nam zwrócona jak gdyby tablica.
Jest to niezwykle istotne, że jeżeli będziemy korzystać z metod, które wyszukują wielu elementów, bo
getElementById zawsze zwraca jeden tylko jeden element w HTML może mieć takie id, musi być unikalne.
Natomiast inne metody, które zwracają wiele elementów, będą nam zwracać coś co wygląda jak tablica i możemy
tutaj się odwołać do firstName 0, czyli do pierwszego elementu tej tablicy i wtedy już ten obiekt został
dla nas znaleziony.
Natomiast nie do końca jest to tablica, bo ja pokazywałem ci że w JavaScript'cie na tablicach, czyli tutaj moglibyśmy
korzystać z metod takich jak forEach na przykład.
A jak widzisz, tutaj taka metoda nie jest dostępna.
Więc jest to obiekt tablicopodobny, a nie tablica.
Niemniej jednak, jeżeli chcemy właśnie znaleźć pierwszy taki element, to od razu mogę tu napisać 0,
bo tu zostanie zwrócona tablica i odwołamy się do pierwszego jej elementu, który zostanie tutaj zapisany,
czyli teraz pod firstName będziemy mieli właśnie ten oto element.
Przejdźmy sobie do kolejnych metod.
Kolejna metoda już trochę bardziej popularna niż getElementsByName,
jest to getElementsByTagName, więc teraz będę chciał znaleźć wszystkie
elementy p,
właśnie te, które tutaj się znajdują.
Stworzę sobie
zatem zmienną paragraphs i znowu document i tym razem getElementsByTagName.
Znowu przekazujemy tutaj string, czyli nazwę tego tag'u, ten tag jest to p
i znowu zwróci nam tutaj obiekt
tablicopodobny jeżeli się odwołam to paragraphs, dokładnie tak się dzieje, czyli paragraphs 0, to będzie
ten element.
Paragraf 1 to ten.
No i moglibyśmy się jak możesz się domyślić pętlą for iterować
po takich paragrafach, tak jak ci pokazywałem w czystym JavaScript'cie, gdzie możemy korzystać z pętli for,
tutaj również możemy z tego korzystać.
Kolejna z metod, którą chcę Ci pokazać Jest to metoda getElementsByClassName i będziemy chcieli znaleźć
wszystkie elementy, które mają daną klasę w tym przypadku text.
Więc znowu tworze sobie zmienną nazwę ją
text. Znowu poprzez document się tam odwołujemy, getElementsByClassName.
I znowu przekazujemy string, czyli klasę. Nie przekazujemy tego w żaden sposób jak w CSS, czyli z kropką.
Tak samo Id nie przekazujemy w ten sposób, ale właśnie normalnie jako string.
No i zobaczymy czy nam zostanie to znalezione.
Jak widzisz dokładnie w ten sam sposób to zadziałało.
Przejdźmy zatem do kolejnej metody.
Zobaczmy, co my tu jeszcze mamy.
Teraz będę chciał przejść do tych nowych metod, które już są od dosyć dawna dostępne.
Natomiast te, które pokazałem ci teraz to są metody bardzo stare.
Można z nich korzystać często z tej metody ludzie korzystają.
Ja tez z niej czasami korzystam i ewentualnie z tej, inne są nieużywane, ale chciałem Ci je pokazać. Natomiast
teraz ci pokaże nowe metody, które są dostępne w HTML5.
Jest to querySelector i querySelectorAll, więc teraz będziemy chcieli sobie znaleźć np. element h1,
więc napiszę tutaj h1 i document i tym razem metoda nazywa się
querySelector.
Ona zawsze zwróci nam tylko jeden element, bo mówimy tutaj querySelector. Nieważne ile paragrafów czy h1
będzie na stronie, ona nam zwróci tylko 1.
I tutaj już podajemy Selector znany nam z CSS, więc jeżeli pisałeś kod HTML i CSS to wiesz, że jeżeli chcemy
h1 stargetować w CSS'ie, to piszemy h1.
Jeżeli chcemy taki element container stargetować, to piszemy containter,
w ten sposób, więc tutaj podajemy właśnie Selector CSS, co jest bardzo istotne i podam sobie h1.
Sprawdźmy, co będzie teraz
pod h1.
Dokładnie ten element został stargetowany.
Tak samo mógłby być np. z container.
Natomiast co jest mega istotne w tym przypadku, to gdybym tutaj napisał p, to mamy na stronie dwa paragrafy.
Odwołajmy się do tego h1, ale tylko pierwszy zostanie znaleziony. Z tego powodu, że querySelector zawsze
zwraca tylko jeden element.
I teraz ja zazwyczaj korzystam z tej metody zamiast metod np. getElementById
i podaje tutaj Selector np. container,
w ten oto sposób.
Zostawmy tutaj jednak h1. Teraz pod spodem znowu korzystając z metody querySelector chciałbym pobrać formularz,
który tutaj mamy id mają form, więc napiszę sobie form.
I znowu document.querySelector myForm w ten sposób, tak jak ci pokazywałem przed momentem, mamy zapisany
formularz.
Dlaczego to zrobiłem? Dlatego, że chcę Ci pokazać iż te metody nie są dostępne jedynie na dokumencie, ale
również na każdym innym elemencie.
Czyli jeżeli teraz tutaj mamy referencje do formularza, który znajduje się tutaj to teraz na form, możemy
skorzystać z querySelector i wewnątrz tego formularza wyszukać kolejnego elementu.
Będę chciał znaleźć button, który ma type submit i pokażę ci bardziej zaawansowany selector CSS3.
Więc teraz będziemy chcieli sobie napisać submit równa się i już nie piszę document, ale form querySelector
więc teraz wyszukujemy
tylko w tym formularzu i napiszemy button,
być może w CSS3 korzystałeś z takiego zapisu, type równa się submit.
Jak widzisz, jest to dosyć zaawansowany selector, jeżeli tylko przeglądarka wspiera selectory CSS3, to
również wspiera taki zapis.
Teraz jeżeli sobie przejdziemy tutaj i wpisze form, mamy nasz formularz onSubmit.
Jest to przycisk, który w tym formularzu się znalazł.
Teraz pokażę ci drugą metodę querySelector zwraca nam zawsze tylko jeden element, natomiast mamy jeszcze
metodę querySelectorAll i napiszę tutaj links.
Chciałbym pobrać wszystkie linki z naszej strony. Mamy tylko jeden ale nie szkodzi.
Napiszę dokument.querySelectorAll i a, czyli tutaj znowu podajemy selector, gdyby ten element miał jakąś
klasę, no to moglibyśmy napisać klasa
text i tak dalej. Podajemy, a dokładnie tak samo jak w CSS'ie i będziemy mieli tutaj wszystkie linki.
Zobaczmy links, dokładnie tak, obiekt tablicopodobny, w którym mamy jeden element a.
A teraz chciałem ci powiedzieć szybko o jednej bardzo istotnej różnicy pomiędzy metodami takimi jak
np. getElementsByTagName, a querySelectorAll.
Bo w tym przypadku ona działa tak samo.
Jeżeli tutaj z niej korzystamy. Natomiast w tych metodach nie możemy przekazywać selektorów takich jak klasa,
czy takich jak tutaj, button.
W żaden sposób.
Tutaj musimy przekazać nazwę tagu, czyli było to p.
Natomiast paragrafy, które zostały tutaj zwrócone są jakby żywą listą.
Co to oznacza?
Odwołajmy się raz jeszcze do paragraphs. Mamy tutaj dwa paragrafy,
ale jeżeli teraz klikę na jeden z nich. Przejdziemy do drzewa DOM i nacisnę sobie backspace, czyli jak ze strony
usunę, on tutaj zniknął.
Jeżeli teraz odwołam się do paragraphs, to zauważysz że jest tam tylko jeden element, czyli na tym etapie
utworzyliśmy zmienną.
Kiedy dwa paragrafy były na stronie kiedy ja jeden z nich usunąłem i znowu się odwołałem do tej zmiennej,
nie odwoływaniem się od nowa do tej metody.
To jak widzisz mamy tutaj jeden paragraf. Natomiast w querySelectorAll jest inaczej.
Dodajmy sobie tutaj jeszcze jeden link pod spodem, w ten sposob i w links mamy dwa elementy a, natomiast jeżeli
jeden z nich usunę, w ten sposób i znowu odwołamy się do links, to znowu mamy tutaj dwa elementy, chociaż
jeden z nich został już ze strony usunięty,
czyli nie jest to żywa lista.
Natomiast moglibyśmy się teraz do tego elementu, czyli links 1 0 1 odwołać i wstawić go z powrotem na
stronę. Jak wstawiać elementy na stronę będę jeszcze w tym kursie mówił.
Więc to jest taka różnica, że ta lista nie jest tutaj żywa.
No i na sam koniec chcę jeszcze pokazać kilka metod, z których niekoniecznie będziesz korzystał, ale
chciałbym żebyś wiedział, że istnieją w zasadzie nawet nie są to metody, ale już gotowe właściwości, ja
je może od razu wkleję. Wrzucę je tutaj.
Otóż możemy odwołać się do np. document.all i zwróci nam to wszystkie elementy, które są na stronie.
Możemy odwołać się do document kropka forms i zwróci nam wszystkie formularze.
Document images zwróci nam wszystkie elementy img, a document links zwróci nam wszystkie linki,
więc gdybyśmy chcieli znaleźć pierwszy formularz na naszej stronie, to możemy sobie napisać firstForm,
równa się document.forms, 0, czyli będzie to obiekt z tablicopodobny.
Nieważne ile tam będzie tych formularzy.
Jeżeli odwołamy się do 0, to będziemy mieli pierwszy formularz i pokażę ci rzeczywiście to działa.
firstForm, mamy tutaj ten oto formularz,
czyli są to takie bardziej archaiczne zapisy, które od bardzo dawna były dostępne w przeglądarkach, ale
również możemy z nich korzystać. Z tej lekcji chciałbym, abyś wyniósł tyle, że mamy wiele metod do wybierania
konkretnych elementów, że możemy ich wyszukiwać całym dokumencie lub tak jak tutaj w konkretnym już elemencie
i że najczęściej będziemy korzystać z querySelector, która zwraca jeden element, a możemy tutaj przekazać Selector
CSS isquareSelectorAll, która zwraca nam obiekt tablicopodobny, zawierający wszystkie elementy, które
pasowały do tego selectora.
Chciałbym jeszcze tutaj zauważyć tylko jedną bardzo istotną rzecz, że możemy tutaj nie podawać od razu
sektora a, ale moglibyśmy podać np. div'a, czyli dokładnie tak samo jak w przypadku CSS, kiedy chcemy znaleźć
wszystkie elementy a, które są w div'ach, to możemy zapisać i tutaj zostaną właśnie te a, zwrócone.
A gdybym to zrobił przecinek, to tak samo jak w CSS chcemy zwrócić zarówno wszystkie elementy div, jak
i wszystkie elementy a, które na stronie się znajdują.
Kod
Metody przeszukiwania drzewa DOM · 1 min
var container = document.getElementById("container");
var firstName = document.getElementsByName("firstName")[0];
var paragraphs = document.getElementsByTagName("p");
var texts = document.getElementsByClassName("text");
var h1 = document.querySelector("h1");
var form = document.querySelector("#myForm");
var submit = form.querySelector("button[type='submit']");
var links = document.querySelectorAll("a");
document.all;
document.forms;
document.images;
document.links;
var firstForm = document.forms[0];