otwarty
Zamknąć

Gdzie generowany jest obiekt danych js. Jak mogę uzyskać dostęp do zagnieżdżonych obiektów, tablic lub JSON i je przetwarzać? Co zrobić, jeśli nie jest mi znana „głębokość” struktury danych

07.12.2023 -
Analityka

W JavaScript istnieją trzy typy obiektów: obiekty wbudowane, obiekty przeglądarki oraz obiekty, które programista tworzy samodzielnie (rysunek 2.1).

Ryż. 2.1. Obiekty w JavaScript

Każdy z tych typów ma swój własny cel i swoje własne cechy.

Wbudowane obiekty

Poniżej wymieniliśmy obiekty wbudowane, których właściwości i metody są dostępne w skryptach JavaScript bez konieczności wcześniejszego definiowania tych obiektów:

Tutaj * oznacza wbudowane obiekty zdefiniowane w Microsoft JScript w wersji 3.0. Ta wersja jest zaimplementowana w przeglądarce Microsoft Internet Explorer w wersji 4.0.

Wbudowane obiekty są bardzo wygodne do wykonywania różnych operacji na ciągach znaków, datach kalendarzowych, tablicach, liczbach i tak dalej. Uwalniają programistę od wykonywania różnych rutynowych operacji, takich jak konwertowanie ciągów znaków lub obliczanie funkcji matematycznych.

Jak pracować z wbudowanymi obiektami?

Wystarczająco proste. Program tworzy instancje obiektów, a następnie uzyskuje dostęp do właściwości i metod obiektów.

Jako praktyczny przykład rozważmy dokument HTML, który wyświetla bieżącą datę i godzinę. Tekst źródłowy tego dokumentu można znaleźć na Listingu 2.1.

Listowanie 2.1. Plik rozdział2/data/data.html

Pokaż datę i godzinę Pokaż datę i godzinę

Tutaj skrypt JavaScript tworzy obiekt Data przy użyciu nowego słowa kluczowego, znanego wszystkim fanom C++ i konstruktora Date bez parametrów:

var dt; dt = nowa data();

Utworzony w ten sposób obiekt Data jest inicjowany bieżącą lokalną datą użytkownika (a nie serwerem WWW, z którego został pobrany odpowiedni dokument HTML).

Poniższa linia generuje ciąg tekstowy daty:

szDate = "Data: " + dt.getDate() + "." + dt.getMonth() + „.” +dt.getYear();

Wartość daty kalendarzowej, numeru miesiąca i numeru roku uzyskuje się tutaj odpowiednio metodami getDate, getMonth i getYear. Metody te wywoływane są dla obiektu dt zawierającego bieżącą datę.

Ciąg tekstowy daty jest wyprowadzany do dokumentu HTML przy użyciu metody zapisu zdefiniowanej w obiekcie dokumentu:

dokument.write(szDate);

Metodę tę zastosowaliśmy już w przykładowych scenariuszach podanych w pierwszym rozdziale naszej książki.

Należy pamiętać, że obiekt Date zawiera również informację o bieżącym czasie. Informacje te są pobierane do wyświetlania za pomocą metod getHours, getMinutes i getSeconds (odpowiednio godziny, minuty i sekundy):

document.write("Czas: " + dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds());

Wygląd dokumentu HTML oglądanego w oknie przeglądarki Microsoft Internet Explorer w wersji 4.0 pokazano na rys. 2.2.

Ryż. 2.2. Wyświetl lokalną datę i godzinę

Później, w trakcie studiowania materiału, zademonstrujemy wykorzystanie innych wbudowanych obiektów.

Obiekty przeglądarki

Z perspektywy JavaScriptu przeglądarka wydaje się być hierarchicznie zorganizowanym zbiorem obiektów. Korzystając z właściwości i metod tych obiektów, można wykonywać różne operacje na oknie przeglądarki, dokumencie HTML wczytanym do tego okna, a także na poszczególnych obiektach umieszczonych w dokumencie HTML. Można na przykład tworzyć nowe okna przeglądarki, ładując do nich dokumenty HTML, dynamicznie generować tekst dokumentu HTML, uzyskiwać dostęp do pól formularzy zdefiniowanych w dokumencie HTML i tak dalej.

Obiekty przeglądarki to interfejs, za pośrednictwem którego JavaScript wchodzi w interakcję z użytkownikiem i dokumentem HTML ładowanym w oknie przeglądarki, a także z samą przeglądarką. W JavaScript nie można tworzyć nowych klas na podstawie klas odpowiadających tym obiektom, ale dostępne są właściwości i metody obiektów przeglądarki.

Hierarchia obiektów przeglądarki

Hierarchię obiektów przeglądarki pokazano schematycznie na rys. 2.2.

Ryż. 2.2. Hierarchia obiektów przeglądarki

Obiekt okna znajduje się w korzeniu hierarchii. Kiedy dokument HTML jest ładowany do okna przeglądarki, w tym obiekcie tworzone są inne obiekty - dokument, element nadrzędny, ramka, lokalizacja i góra.

Jeśli do okna przeglądarki zostanie załadowany dokument HTML z ramkami, dla każdej ramki tworzone jest osobne okno, które jest tworzone jako obiekt okna.

Obiekt dokumentu zawiera inne obiekty, których skład jest całkowicie określony przez dokument HTML załadowany do okna przeglądarki. Mogą to być formularze, łącza do innych dokumentów HTML lub łącza lokalne w tym samym dokumencie, obiekty definiujące adres URL dokumentu i tak dalej.

Jeśli dokument zawiera formularze, są one również reprezentowane jako hierarchiczny zbiór obiektów. Obiekt formularza może zawierać obiekty, takie jak przyciski, przełączniki i pola do wprowadzania informacji tekstowych.

Uzyskując dostęp do właściwości wymienionych powyżej obiektów, skrypt JavaScript może określić różne cechy dokumentu HTML, takie jak tytuł. Ma dostęp do wszystkich linków umieszczonych w dokumencie, a także zawartości pól formularza zdefiniowanych w dokumencie HTML.

Zdarzenia związane z obiektami

Zróbmy jeszcze jedną bardzo ważną uwagę dotyczącą obiektów przeglądarki.

Każdy taki obiekt jest powiązany z konkretnym zestawem zdarzeń, których przetwarzanie możliwe jest w skrypcie JavaScript.

Na przykład zdarzenia onLoad i onUnload są powiązane z obiektem okna. Pierwsze z tych zdarzeń ma miejsce, gdy przeglądarka zakończy ładowanie okna i wszystkich znajdujących się w nim ramek (o ile te ramki są zdefiniowane w oknie). Drugie zdarzenie ma miejsce, gdy użytkownik zakończy dokument zamykając okno przeglądarki lub przechodząc do innego dokumentu.

Skrypt JavaScript może na przykład wyświetlić użytkownikowi wiadomość powitalną lub poprosić o dodatkowe informacje podczas obsługi zdarzenia onLoad. Gdy okno zostanie zakończone (po wywołaniu zdarzenia onUnload), skrypt może zwolnić wszelkie zasoby powiązane z tym oknem lub wyświetlić komunikat na ekranie monitora.

Zdarzenia są także powiązane z innymi obiektami przeglądarki. Porozmawiamy o nich przy opisie tych obiektów.

Obiekty bazujące na klasach stworzonych przez programistę

Liczne książki dla początkujących na temat języka programowania C++ sugerują wyobrażenie sobie klasy jako struktury danych, w której oprócz zwykłych pól zdefiniowano metody funkcyjne do pracy z tymi danymi. Zatem w języku JavaScript do tworzenia własnych klas używana jest metoda dokładnie odwrotna.

Klasa JavaScript jest tworzona jako funkcja definiująca właściwości, które działają jak dane. Jeśli chodzi o metody, są one również definiowane jako funkcje, ale osobno.

Podajmy konkretny przykład.

Załóżmy, że musimy utworzyć klasę przechowującą wyimaginowany wpis w bazie danych telefonu. W tej klasie musimy zapewnić właściwości umożliwiające przechowywanie imienia, nazwiska, numeru telefonu, adresu, a także specjalny atrybut dla rekordów, które są chronione przed nieuprawnionym dostępem. Dodatkowo konieczne jest opracowanie metod umożliwiających wyświetlanie zawartości obiektu w formie tabelarycznej, jak pokazano na rys. 2.3.

Ryż. 2.3. Przeglądanie treści postów

Na początek utwórzmy własną klasę o nazwie myRecord. Być może nie ma jeszcze żadnych metod, dodamy je później.

Wymagana klasa jest tworzona w następujący sposób:

funkcja mójRekord(imię i nazwisko, rodzina, telefon, adres) ( this.name = imię; this.family = rodzina; this.phone = telefon; this.address = adres; this.secure = false; )

Łatwo zauważyć, że opis naszej klasy to nic innego jak funkcja konstruktora. Parametry konstruktora mają na celu ustawienie właściwości obiektu tworzonego na podstawie klasy.

Właściwości definiuje się poprzez proste odniesienia do ich nazw, po których następuje słowo kluczowe this. To słowo kluczowe wskazuje tutaj, że instrukcja odwołuje się do właściwości obiektu, dla którego wywoływany jest konstruktor, czyli tworzonego obiektu.

Zauważ, że nasz konstruktor inicjuje właściwość o nazwie secure na false. Odpowiedni parametr nie jest podany w konstruktorze, co jest całkiem akceptowalne.

Jak korzystać z określonej klasy?

W oparciu o tę klasę można utworzyć dowolną liczbę obiektów. Poniżej podaliśmy fragment skryptu JavaScript, w którym tworzone są dwa obiekty rec1 i rec2 w oparciu o klasę myRecord:

var rec1; var rec2; rec1 = new myRecord("Ivan", "Ivanov", "000-322-223", "Malaya Bolshaya st., 225, m. 226"); rec2 = new myRecord("Petr", "Petrov", "001-223-3334", "Bolshaya Malaya st., 552, m. 662"); rec2.secure = prawda;

Obiekty tworzone są za pomocą operatora new, znanego osobom piszącym programy w C++ i Javie. Tutaj przekazujemy parametry do konstruktora, aby zainicjować właściwości tworzonych obiektów.

Jeśli chodzi o właściwość o nazwie secure, w obiekcie rec2 jest ona inicjowana po utworzeniu tego ostatniego. Zapisana jest w nim wartość true. Nie zmieniliśmy bezpiecznej właściwości obiektu rec1, więc jest ona przechowywana jako fałszywa.

Teraz naszym zadaniem jest dodanie do zdefiniowanej przez nas klasy nowych metod o nazwach printTableHead, printTableEnd i printRecord. Dwie pierwsze z tych metod wyprowadzają do dokumentu HTML odpowiednio początkowy i końcowy fragment tabeli, zaś trzecia – wiersze tabeli odzwierciedlające zawartość rekordów.

Poniżej podsumowano nową definicję klasy myRecord:

funkcja printTableHead() ( . . . ) funkcja printTableEnd() ( . . . ) funkcja printRecord() ( . . . ) funkcja mójRekord(imię i nazwisko, rodzina, telefon, adres) ( this.name = name; this.family = rodzina ; ten.telefon = telefon; ten.bezpieczny = fałsz;

Tutaj, przed definicją konstruktora, umieściliśmy definicje metod-funkcji naszej klasy. Dodatkowo do konstruktora dodana została definicja nowych właściwości:

this.printRecord = printRecord; this.printTableHead = printTableHead; this.printTableEnd = printTableEnd;

Po zdefiniowaniu klasy w ten sposób możesz tworzyć obiekty i wywoływać określone metody:

rec1.printTableHead(); rec1.printRecord(); rec1.printTableEnd(); rec2.printTableHead(); rec2.printRecord(); rec2.printTableEnd();

Wracając do dokumentu pokazanego powyżej na ryc. 2.3, prezentujemy jego pełny tekst źródłowy (Listing 2.2).

Listowanie 2.2. Plik rozdział2/NewObject/NewObject.html

Zobacz wpisy Zobacz wpisy

Definicję nowej klasy myRecord i jej metod umieściliśmy, jak to zwykle bywa, w obszarze nagłówka dokumentu HTML.

Metoda printTableHead drukuje nagłówek tabeli w dokumencie HTML. Wygląd tego nagłówka zależy od zawartości właściwości obiektu.

Najpierw metoda printTableHead sprawdza właściwość secure, uzyskując jej wartość za pomocą słowa kluczowego this:

var szSec = ""; if(this.secure) szSec = " (Bezpieczny)"; else szSec = " (Niezabezpieczony)".fontcolor("czerwony");

Tutaj słowo kluczowe oznacza, że ​​konieczne jest skorzystanie z właściwości obiektu, dla którego wywołano metodę printTableHead.

Jeśli zawartość właściwości secure ma wartość true, do zmiennej tekstowej szSec zapisywany jest ciąg „(Secure)”. Jeśli ma wartość false, do tej zmiennej zapisywany jest ciąg „(Niezabezpieczony)”, a kolor ciągu jest ustawiany na czerwony.

Ponieważ w JavaScript wszystkie ciągi tekstowe (w tym literały) są obiektami wbudowanej klasy String, można wywoływać dla nich metody zdefiniowane w tej klasie. W szczególności metoda Fontcolor pozwala ustawić kolor linii, i tego właśnie użyliśmy.

Następnie metoda printTableHead wysyła instrukcję do dokumentu HTML

z parametrem BORDER, który rozpoczyna definicję tabeli posiadającej obramowanie. Napis nad tabelą jest określony za pomocą dynamicznie generowanego operatora. Etykieta ta zawiera imię i nazwisko pobrane z odpowiednich właściwości obiektu, na którym została wywołana metoda printTableHead. Ta metoda następnie wyświetla etykiety kolumn tabeli.

Metoda printTableEnd drukuje instrukcję do dokumentu HTML

, kończący definicję tabeli, a także pusty akapit oddzielający tabele następujące po sobie:

funkcja printTableEnd() ( dokument.write(""); dokument.zapis("

"); }

Ostatnia metoda zdefiniowana w naszej klasie nazywa się printRecord. Wypisuje zawartość pierwszych czterech właściwości obiektu jako wiersz z tabeli zdefiniowanej w dokumencie HTML za pomocą opisanej właśnie funkcji printTableHead.

Należy pamiętać, że zawartość właściwości obiektu jest pisana kursywą, dla czego nazywamy metodą kursywy:

dokument.zapisz(" Nazwa:" + this.name.italics() + "");

Definicję klasy myRecord opisaliśmy już powyżej.

Przejdźmy teraz do drugiej części naszego skryptu, która znajduje się w treści dokumentu HTML.

Tutaj tworzymy dwa obiekty rec1 i rec2 w oparciu o klasę myRecord, a następnie ustawiamy właściwość secure obiektu rec2 na true.

Jak widać, użycie naszej własnej klasy znacznie uprościło zadanie inicjowania i wyświetlania zawartości rekordów w naszej wyimaginowanej bazie telefonicznej. W rzeczywistości ograniczyliśmy to zadanie do wywołania kilku metod zdefiniowanych wcześniej w naszej klasie.

W tym rozdziale:

JavaScript posiada wiele predefiniowanych obiektów, których można używać podczas pisania skryptów. Należą do nich obiekty takie jak Array, Boolean, Date, Function, Math, Number, RegExp i String, a także prymitywny obiekt Object. We wcześniejszych wersjach języka uwzględniane były w nim także obiekty dokumentów (okno, dokument), jednak obecnie są one wyłączone z jądra języka JavaScript i należą do definicji obiektowego modelu dokumentu (DOM), który będzie omówione później. Jednak niektóre właściwości tych obiektów (dokument i okno) są nam już znane.

Wróćmy jednak do wbudowanych obiektów JavaScript w nowoczesnej koncepcji. Wszystkie wbudowane obiekty, z wyjątkiem Math i Date, mają właściwości takie jak konstruktor i prototyp. Służą do dodawania nowych właściwości do istniejących obiektów i są opisywane w kontekście obiektu Function.

Obiekt

Wszystkie obiekty JavaScript są potomkami obiektu Object. Dlatego wszystkie właściwości i metody tego obiektu są również dostępne dla dowolnego innego obiektu JavaScript.

Dla obiektu Object zdefiniowano tylko 2 właściwości – konstruktor i prototyp. Właściwość konstruktora definiuje funkcję, która tworzy prototyp obiektu - całą funkcję, a nie tylko jej nazwę. Innymi słowy, rozważ opcję, gdy zdefiniowano jakiś obiekt testowy i utworzono instancję tego obiektu tmp:

Test funkcji(wersja) ( this.version = wersja; ) tmp = nowy test(1);

W tym przypadku za pomocą właściwości konstruktora można zobaczyć kod źródłowy obiektu testowego (ryc. 4.6):

Alert(tmp.konstruktor);

Ryż. 4.6.

Właściwość ta ma jednak jedno ograniczenie: nie może drukować kodu wbudowanych obiektów JavaScript: w takich przypadkach informacja wyjściowa ogranicza się do nazwy funkcji prototypowej i ciągu znaków „”.

Jeśli chodzi o właściwość prototype, umożliwia ona dostęp do funkcji prototypu bieżącego obiektu. Wykorzystanie tej właściwości umożliwia zmianę charakterystyki prototypu obiektu. Na przykład możesz dodać nową właściwość dla obiektu testu typu, używając właściwości prototype:

Test.prototype.comment = "Nowa właściwość komentarza";

Teraz wszystkie obiekty typu test, w tym już utworzona instancja tmp, będą miały właściwość komentarza, którą łatwo zweryfikować, stosując następujące sprawdzenie:

Alert(tmp.komentarz);

Co więcej, w podobny sposób można modernizować wbudowane obiekty JavaScript. Na przykład, jeśli potrzebujemy dodać do tablic właściwość taką jak opis, możemy to zrobić (oczywiście tylko w bieżącym scenariuszu!), odwołując się do prototypu obiektu Array i dodając do niego odpowiednią właściwość:

Array.prototype.description = "";

Jeśli chodzi o metody, to dla obiektu Object zdefiniowanych jest ich nieco więcej - aż 5. Są to toSource, toString, watch, unwatch i valueOf, ich krótki opis znajduje się w tabeli 4.10.

Metody toString i valueOf mają zastosowanie do prawie wszystkich wbudowanych obiektów JavaScript i zazwyczaj są wywoływane automatycznie przez interpreter, gdy konieczna jest konwersja. Jeśli chodzi o metodę toSource, w rzeczywistości wykonuje ona pracę tylko dla właściwości konstruktora.

Pozostałe metody watch i unwatch, będące zastrzeżonymi rozszerzeniami wprowadzonymi w przeglądarce Netscape 4 (obecnie obsługiwanej także przez Mozillę), przeznaczone są do debugowania skryptów. Ponieważ problematyka debugowania programów nie będzie rozpatrywana w ramach tej publikacji, nie ma sensu opisywać tych metod. Ale na wszelki wypadek możesz zauważyć, że Sea Monkey (ale nie przeglądarka Firefox) ma debuger skryptów - Debugger JavaScript.

Obiekt tablicowy

Zmienne tablicowe zawierają uporządkowane zestawy wartości, reprezentowane dla wygody jako pojedyncza zmienna. Z tablicami spotykaliśmy się już nie raz (pamiętajcie tylko o tablicach argumentów), teraz czas poznać wszystkie ich właściwości i subtelności zastosowania.

W przeciwieństwie do innych języków programowania, JavaScript nie ma typu danych tablicowych. Ale to ograniczenie zostaje przezwyciężone dzięki temu, że można użyć predefiniowanego obiektu tablicowego - Array. Aby utworzyć obiekt tablicowy, możesz użyć jednej z następujących składni:

ArrayName = new Array(element1, element2, ... elementN) ArrayName = new Array(ArrayLength)

W pierwszym przypadku wymienione są wszystkie elementy tablicy, w drugim po prostu wskazana jest liczba elementów. Podczas deklarowania tablicy można również używać literałów:

Komputery = ["PC", "Mac", "Słońce"];

Aby wypełnić elementy tablicy wartościami, a także ogólnie uzyskać dostęp do elementów tablicy, możesz użyć indeksu elementu. Należy wziąć pod uwagę, że indeks elementów tablicy zaczyna się od zera:

Var kolory = nowa tablica(3); kolory = „Czerwony”; kolory = „Niebieski”; kolory = „Zielony”;

Dość często wygodnie jest skorzystać z możliwości, jakie zapewnia język JavaScript, do bezpośredniego wypełnienia tablicy podczas jej deklarowania:

Var kolory = nowa tablica("Czerwony","Niebieski","Zielony");

Aby poznać długość tablicy (liczbę elementów tworzących tablicę), należy skorzystać z właściwości długości:

Var NumColors = kolory.długość;

Oprócz właściwości długości JavaScript udostępnia także szereg innych właściwości i metod pracy z tablicami. W szczególności właściwości obiektu Array oprócz długości obejmują konstruktor i prototyp, które są uniwersalne dla wszystkich obiektów, a także właściwości indeksu i wejścia przeznaczone do stosowania tablic wraz z wyrażeniami regularnymi.

Jeśli chodzi o metody, oprócz standardowych toSource, toString i valueOf, tablice wyposażone są w kilkanaście własnych, które wymieniono w tabeli 4.11.

Tabela 4.11. Metody obiektów tablicowych Opis metody
konkatŁączy dwie tablice i zwraca nową
dołączy棹czy wszystkie elementy tablicy w jeden ciąg
Muzyka popUsuwa ostatni element z tablicy i zwraca go
naciskaćDodaje jeden lub więcej elementów na końcu tablicy i zwraca jej nową długość
odwracaćPrzenosi elementy tablicy w taki sposób, że pierwszy staje się ostatnim i odwrotnie
zmianaUsuwa pierwszy element tablicy i zwraca go
plasterekUsuwa część elementów tablicy i zwraca nową tablicę
splataćDodaje i/lub usuwa element z tablicy
sortowaćSortuje elementy tablicy alfabetycznie
cofnij przesunięcieDodaje jeden lub więcej elementów na początek tablicy i zwraca nową długość tablicy (w MSIE 5.5 i 6 ta metoda nic nie zwraca)

Przyjrzyjmy się niektórym metodom bardziej szczegółowo. Tak więc, używając metody concat, możesz połączyć 2 tablice w jedną:

Var a = nowa tablica("A1", "A2"); var b = nowa tablica("B1", "B2"); var ab = a.concat(b);

Tutaj zmienna ab stanie się tablicą zawierającą wszystkie 4 elementy z dwóch sklejonych ze sobą tablic. Jeśli teraz do takiej tablicy zastosujemy metodę Join, efektem będzie ciąg znaków zawierający wszystkie elementy tej tablicy oddzielone przecinkami:

Str = ab.join(); // pobierz str = "A1, A2, B1, B2"

Jeśli chodzi o metodę pop, jeśli zastosujemy ją do tej samej tablicy, jako odpowiedź otrzymamy „B2”, a tablica zostanie przycięta do pierwszych trzech wartości. Metoda shift natomiast zwraca pierwszy element (w naszym przypadku „A1”) i robi to samo z tablicą, z tą tylko różnicą, że pozostałe elementy są przesuwane do przodu.

Aby lepiej zrozumieć działanie tych i innych metod tablicowych, rozważ następujący przykład z Listingu 4.3.

Listowanie 4.3. Praca z tablicami

Ten sam przykład można obejrzeć w pliku array.html, jednocześnie możesz przeglądać wszystkie wyniki jego pracy w przeglądarce (patrz rys. 4.7).

Ryż. 4.7. Wynik zastosowania metody splice: zwrócona tablica i zmiany

Tablice mogą być również wielowymiarowe, tj. elementem tablicy może być inna tablica. W takim przypadku, aby uzyskać dostęp do elementu tablicy, użyj następującej składni:

Array2D="Element 0,0" Array2D="Element 0,1" ... Array2D[N][N]="Element N,N"

Przykład wypełniania i wyprowadzania tablicy dwuwymiarowej można znaleźć w pliku arrays.html, istnieje także interaktywny przykład dla prawie wszystkich metod tablicowych.

Obiekt logiczny

Obiekt Boolean jest opakowaniem dla typu danych o tej samej nazwie. Aby zdefiniować obiekt typu Boolean, należy zastosować następującą składnię:

BooleanObj = nowy Boolean(wartość)

Tutaj wartość jest wyrażeniem inicjującym, które w razie potrzeby zostanie rzutowane na wartość true lub false. Jeśli określisz wartość taką jak 0, null, false, NaN, undefinied lub pusty ciąg znaków, wynikiem inicjalizacji obiektu Boolean będzie fałsz, a w przypadku dowolnej innej wartości wynik będzie prawdziwy.

Prymitywnych wartości logicznych true i false nie należy mylić z prawdziwymi i fałszywymi typami danych obiektu Boolean. Na przykład, jeśli zadeklarujesz zmienną x i przypiszesz jej wartość obiektu logicznego zainicjowanego na wartość false, po porównaniu nadal będzie ona miała wartość true:

X = nowa wartość logiczna (fałsz); // porównując if (x) otrzymamy prawdę

Jednocześnie, jeśli po prostu przypiszesz zmiennej prymitywny typ danych false, otrzyma ona dokładnie to:

X = fałsz; // porównując if (x) otrzymamy fałsz

Jeśli chodzi o praktyczne zastosowanie tego obiektu, można go użyć jako funkcji do konwersji wartości dowolnego innego typu na Boolean:

A = 100; x = wartość logiczna(a); // x zostanie spełnione, jeśli (x) (...)

Ale tak naprawdę raczej tego nie zrobisz, ponieważ w razie potrzeby takie przekształcenia są wykonywane automatycznie przez interpreter JavaScript - w powyższym przykładzie możesz od razu napisać „if (a) ...”, a transformacja jest konieczna w tym przypadku zostanie to zrobione w każdym przypadku.

Obiekt daty

JavaScript nie zapewnia specjalnego typu danych do pracy z datami, jednakże, podobnie jak w przypadku tablic, istnieje specjalny obiekt Data. Aby utworzyć obiekt daty, możesz użyć dowolnej z następujących metod:

Nowa data() nowa data (milisekundy) nowa data("Data_as_string")

W pierwszym przypadku tworzony jest obiekt Date z aktualnym czasem, w drugim należy podać liczbę milisekund, jakie upłynęły od 1 stycznia 1970 roku. Jeśli data jest podana w formie ciągu znaków, powinna mieć postać „28 lutego 2005”. Możliwe jest również ustawienie daty przy użyciu wartości całkowitych dla roku, miesiąca, dnia itp.:

Nowa data (rok, miesiąc, dzień [, godzina, minuta, sekunda, milisekunda])

Oczywiście w tym przypadku można uniknąć podawania sekund i milisekund, zwłaszcza, że ​​milisekundy nie były nawet obsługiwane w starszych wersjach przeglądarek. Ponadto JavaScript wcześniejszy niż wersja 1.3 nie obsługuje dat wcześniejszych niż 1 stycznia 1970 r. Jeśli chodzi o format wartości wskazanych w wierszu, rokiem jest dowolna liczba 4-cyfrowa (jeśli podasz liczbę 2-cyfrową, zostanie do niej dodana 1900), numer miesiąca wynosi od 0 ( styczeń) do 11 (grudzień), a dzień wynosi od 0 do 31. W związku z tym wartości czasu są również ograniczone: dla godzin będzie to liczba całkowita od 0 do 23, dla sekund i minut - od 0 do 59, a dla milisekund - od 0 do 999. Zatem aby jako wartość obiektu typu Date podać 9 maja 2005 należy wpisać:

Var anyday = nowa Data (2005, 5, 9);

A jeśli chcesz uzyskać aktualną wartość daty i godziny, nie są wymagane żadne parametry:

Zmień teraz = nowa data();

Od wersji JavaScript 1.3 zakres dat może wynosić do 100 milionów dni przed i po 01.01.1970 (w sumie to prawie 550 tysięcy lat!). W tej samej wersji istniał wymóg podawania roku zawsze w formacie czterocyfrowym, aby uniknąć błędów związanych ze zmianą stuleci.

Do pracy z obiektem Date dostępne są 2 właściwości - konstruktor i prototyp, a także wiele metod, które pozwalają wybrać żądaną część daty (rok, miesiąc, dzień, godzina), wyświetlić ją w takim czy innym formacie, itp. Wszystkie zestawiono w tabeli 4.12.

Tabela 4.12. Metody obiektu daty Metoda i jej składnia Opis
pobierzDatę()Zwraca dzień miesiąca w czasie lokalnym
getDay()Zwraca dzień tygodnia w czasie lokalnym
pobierz pełny rok()Zwraca rok w czasie lokalnym
pobierz godziny()Zwraca bieżący czas (godziny) w czasie lokalnym
pobierzMillisekundy()Zwraca bieżący czas (w milisekundach) w czasie lokalnym
pobierz minuty()Zwraca bieżący czas (minuty) w czasie lokalnym
getMiesiąc()Zwraca bieżący czas (miesiąc) w czasie lokalnym
getSeconds()Zwraca bieżący czas (w sekundach) w czasie lokalnym
uzyskać czas()Zwraca bieżący czas jako ilość w czasie lokalnym
getTimezoneOffset()Zwraca przesunięcie czasu w minutach względem czasu GMT w czasie lokalnym
pobierzUTCDate()Zwraca dzień miesiąca według czasu uniwersalnego
getUTCDay()Zwraca dzień tygodnia według czasu uniwersalnego
pobierz UTCFullYear()Zwraca rok według czasu uniwersalnego
pobierzUTCHours()Zwraca bieżący czas (godziny) według czasu uniwersalnego
pobierzUTCMilisekundy()Zwraca bieżący czas (w milisekundach) w formacie czasu uniwersalnego
pobierzUTCMinutes()Zwraca bieżący czas (w minutach) w formacie czasu uniwersalnego
pobierzUTCMonth()Zwraca bieżący czas (miesiąc) według czasu uniwersalnego
pobierz UTCSeconds()Zwraca bieżący czas (w sekundach) według czasu uniwersalnego
pobierz rok()Przestarzały. Zwraca rok w krótkim (dwucyfrowym) formacie czasu uniwersalnego
parse(data_string)Zwraca liczbę milisekund, które upłynęły od 1 stycznia 1970 r. do wartości określonej w parametrze, w czasie lokalnym
ustawDatę(dzień)Ustawia dzień miesiąca według czasu lokalnego
zestawPełny rok (rok)Ustawia rok według czasu lokalnego
ustaw godziny (godziny)Ustawia czas (godziny) w czasie lokalnym
setMillisekundy (milisekundy)Ustawia czas (milisekundy) w czasie lokalnym
setMinuty (minuty)Ustawia czas (minuty) w czasie lokalnym
zestawMiesiąc (miesiąc)Ustawia godzinę (miesiąc) w czasie lokalnym
setSeconds (sekundy)Ustawia czas (sekundy) w czasie lokalnym
setTime (milisekundy)Ustawia czas w milisekundach dla określonej daty w czasie lokalnym
setUTCData(dzień)Ustawia dzień miesiąca według czasu uniwersalnego
setUTCFullYear (rok)Ustawia rok według czasu uniwersalnego
setUTCHours(godziny)Ustawia czas (godziny) według czasu uniwersalnego
UstawUTCMilisekundy (milisekundy)Ustawia czas (w milisekundach) według czasu uniwersalnego
setUTCMinutes (minuty)Ustawia czas (w minutach) według czasu uniwersalnego
setUTCMiesiąc (miesiąc)Ustawia czas (miesiąc) według czasu uniwersalnego
setUTCSekund (sekund)Ustawia czas (w sekundach) według czasu uniwersalnego
zestawRok (rok)Przestarzały. Ustawia rok w czasie lokalnym. W przypadku wartości roku dopuszczalny jest format dwucyfrowy
doGMTString()Przestarzały. Konwertuje datę na ciąg znaków odpowiadający czasowi GMT
doLocaleString()Zwraca datę i godzinę w postaci ciągu znaków odpowiadającego formatowi lokalnym ustawieniom systemowym
toLocaleDateString()Zwraca datę jako ciąg znaków odpowiadający formatowi ustawień systemu lokalnego
toLocaleTimeString()Zwraca czas jako ciąg znaków sformatowany zgodnie z lokalnymi ustawieniami systemu
do źródła()Zwraca obiekt daty w reprezentacji dosłownej
doString()Zwraca obiekt daty w postaci ciągu znaków
toUTCString()Konwertuje datę na ciąg znaków w formacie czasu uniwersalnego
UTC (parametry)Zwraca liczbę milisekund, które upłynęły od 1 stycznia 1970 r. według czasu uniwersalnego. Parametry wskazują rok, miesiąc i dzień, a także (opcjonalnie) godziny, minuty, sekundy i milisekundy
wartość()Zwraca datę jako wartość pierwotną

Pomimo tak dużej liczby metod praca z obiektem Date jest dość prosta: wystarczy zrozumieć zasadę nazewnictwa metod:

  • metody rozpoczynające się od „set” służą do ustawiania daty i godziny w obiektach Date;
  • metody rozpoczynające się od „get” służą do pobierania daty, czasu lub ich części z obiektów Date;
  • metody zaczynające się od „to” zwracają datę i godzinę (lub ich części) jako wartości łańcuchowe;
  • metody zawierające „UTC” różnią się od podobnych jedynie tym, że działają z formatem czasu uniwersalnego (tj. wyświetlają czas średni Greenwich z uwzględnieniem przesunięcia względem bieżącej strefy czasowej).

Zatem pozostaje tylko dodać lub ustawić nazwę niezbędnej części daty lub godziny, aby uzyskać lub ustawić żądany parametr, jeśli to konieczne, również przy użyciu czasu UTC. Cóż, jeśli chcesz uzyskać wynik w „ludzkiej” formie, użyj metod to. Należy także pamiętać, że do pracy z rokiem należy zawsze używać wyłącznie funkcji pełnoformatowych (czyli getFullYear lub getUTCFullYear, a nie getYear).

Ciąg reprezentujący datę w JavaScript ma następujący format:

Dzień tygodnia Miesiąc Data Rok Godziny: minuty: sekundy GMT±przesunięcie

Aby wyraźnie zobaczyć reprezentację dat, a jednocześnie zastanowić się, jak działają funkcje takie jak toString, przyjrzyjmy się, co zwracają one jako dane wyjściowe. W tym przypadku pierwszą rzeczą, która może przyjść na myśl, aby zobaczyć działanie określonej funkcji, jest użycie tekstu wyjściowego do dokumentu:

Dokument.writeln(DateObject.toString()); dokument.writeln(DateObject.toGMTString()); //itd.

Ale tak naprawdę, ponieważ funkcji jest wiele, dobrze byłoby napisać z góry, jaki rodzaj akcji został wykonany:

Document.writeln("DateObject.toString()" + DateObject.toString());

Teraz zastanówmy się jeszcze raz, ile linii faktycznie chcemy wyprowadzić w ten sposób. Nawet jeśli weźmiesz pod uwagę metodę kopiowania i wklejania obsługiwaną przez wszystkie edytory tekstu, nie ochroni to przed takimi błędami:

Document.writeln("DateObject.toLocaleString()" + DateObject.toString());

Ale zgodnie z mottem IBM: ludzie powinni myśleć, a maszyny powinny działać. Zastanówmy się zatem, jak sprawić, by komputer działał, oszczędzając jednocześnie konieczności wpisywania dodatkowych bajtów kodu, po co odsyłamy do Listingu 4.4.

Listowanie 4.4. Wysyłanie różnych typów dat i funkcji eval

Metody obiektu daty

Przede wszystkim definiuje funkcję printDate, która tak naprawdę wyświetla datę w dokumencie w takiej czy innej formie. Dokładniej, w naszym przypadku wyświetla datę, ale w zasadzie może wypisać wszystko, o ile akceptowanym argumentem jest kompletny fragment kodu JavaScript. W tym przypadku najpierw wyświetlany jest kod w niezmienionej postaci (tzn. zmienna łańcuchowa jest drukowana w oryginalnej postaci), a następnie wyświetlany jest wynik wykonania, do którego wykorzystana została funkcja eval. Dzięki temu po jednorazowym napisaniu takiej funkcji można później odwoływać się do niej w całym dokumencie, oszczędzając sobie konieczności dwukrotnego wpisywania niemal tego samego tekstu.

Po funkcji wyjściowej następuje utworzenie obiektu typu Date, któremu przypisuje się wartość 2005, 3 miesiąc (kwiecień, bo styczeń wynosi zero), 1 dzień, 14 godzin, 30 minut, 45 sekund. Następnie dokument jest otwierany do zapisu i kolejno wywoływana jest funkcja printDate dla 6 różnych metod obiektu Date. Wynikiem tego skryptu będzie 6 linii zawierających pary wartości z metody i wynik jej pracy, oddzielone dwukropkiem (ryc. 4.8).

Ryż. 4.8. Wyprowadzanie tej samej daty przy użyciu różnych metod

Należy zaznaczyć, że metoda toSource, która wyświetla datę w wewnętrznej reprezentacji programu, obsługiwana jest wyłącznie przez przeglądarki Mozilla. Ponadto format wyświetlania dat wszystkimi innymi metodami może również nieznacznie różnić się w różnych przeglądarkach. Możesz załadować taki przykład do różnych programów przeglądających i zobaczyć na własne oczy, co wygenerują (plik date.html).

Obiekt funkcyjny

Predefiniowany obiekt Function definiuje wiersz kodu JavaScript, który powinien zostać wykonany jako funkcja. Aby zadeklarować obiekt Function, użyj następującej składni:

NazwaFunkcji = nowa Funkcja([argument1, argument2, ...argumentN], Treść Funkcji)

W takim przypadku jako nazwę funkcji można użyć nazwy dowolnej zmiennej lub właściwości istniejącego obiektu. Możliwe jest również określenie obiektu typu Function jako wartości procedury obsługi zdarzeń obiektu. Powiedzmy, że jeśli chcemy stworzyć własną procedurę obsługi zdarzeń, na przykład „ładowanie dokumentu zakończone” (document.onload), możemy napisać to:

Document.onload = nowa funkcja([Argument1, ...argumentN], FunctionBody);

Argumentami w tym przypadku są parametry przekazywane do funkcji, a treścią funkcji jest rzeczywisty kod, który należy wykonać podczas uzyskiwania dostępu do tego obiektu funkcji. Na przykład możesz napisać tę wersję obiektu, który będzie używany do kwadratu liczby:

Var SquareObj = nowa funkcja("x", "powrót x*x");

Tutaj SquareObj jest nazwą zmiennej, x jest otrzymanym argumentem, a „return x*x” jest treścią funkcji. Zwróć uwagę na to, że nie tylko ciało funkcji, ale także akceptowane przez nią argumenty są ujęte w cudzysłów, a także, że nazwa typu obiektu, jak to jest w JavaScript, pisana jest dużą literą (Funkcja) .

Korzystanie ze zmiennych utworzonych w ten sposób jest podobne do używania zmiennych dowolnego innego typu:

Var a = 5 + SquareObj(2); // zdobądź 9

W rzeczywistości obiekt typu Function można zawsze przedstawić jako zwykłą funkcję zadeklarowaną przy użyciu słowa kluczowego Function. Zatem to samo podniesienie do drugiej potęgi można opisać w następujący sposób:

Funkcja SquareFunc(x) ( return x*x; )

W podobny sposób można zatem użyć funkcji zadeklarowanej taką metodą (w tym przypadku funkcji w „czystej” postaci, a nie procedury):

Var a = 5 + Funkcja Kwadratowa(2); //otrzymujemy również 9

Zatem przypisanie wartości do zmiennej jako funkcji przy użyciu obiektu Function jest równoznaczne z zadeklarowaniem samej funkcji. Ale jednocześnie podejścia te różnią się: jeśli SquareObj jest zmienną, której wartość jest odniesieniem do obiektu utworzonego przy użyciu obiektu Function, to SquareFunc jest nazwą funkcji. W związku z tym zachowują się one również inaczej podczas wykonywania programu: w przypadku obiektu typu funkcja interpreter przeanalizuje cały kod funkcji za każdym razem, gdy napotka zmienną (w naszym przypadku SquareObj), a w przypadku funkcji zadeklarowanych w zwykły sposób kod jest oceniany tylko w pierwszym przejściu Różnica ta może nie być znacząca, jeśli funkcja wykonuje pracę jednorazową, jednak użycie zmiennych utworzonych z obiektu Function znacznie zmniejsza wydajność programu w pętlach. Dlatego w praktyce użycie obiektów funkcyjnych jest bardzo rzadkie, czasami jednak mogą być wygodne, na przykład do dodawania metod do innych obiektów.

Obiekt Function ma standardowy konstruktor i prototyp właściwości JavaScript, a także kilka własnych:

Argumenty – tablica odpowiadająca parametrom funkcji. arguments.callee – odpowiada treści funkcji. arguments.caller (przestarzałe) – wskazuje nazwę funkcji, z której wywołano obiekt; arguments.length – wskazuje liczbę parametrów funkcji. długość – wskazuje liczbę argumentów oczekiwanych przez funkcję (a nie liczbę otrzymaną, jak ma to miejsce w przypadku argument.length);

UWAGA
Wszystkie właściwości argumentów można zobaczyć jedynie „od wewnątrz” funkcji i począwszy od JavaScript 1.4 argumenty nie są już właściwością obiektu Function, ale są niezależną zmienną lokalną, domyślnie obecną w dowolnej funkcji. Tak naprawdę dla funkcji pozostała tylko jedna właściwość – długość.

Oprócz właściwości obiekt Function posiada kilka metod. Zatem metoda Apply umożliwia zastosowanie metody jednego obiektu do drugiego, a metoda call pozwala wywołać metodę innego obiektu w kontekście bieżącego. Niestety, realizacja tych metod w praktyce wyraźnie pozostawia wiele do życzenia. Pozostaje więc wspomnieć o standardowych metodach JavaScriptu toString, toSource i valueOf, które są również dostępne dla obiektu Function.

Obiekt matematyczny

Math to wbudowany obiekt JavaScript, który zawiera podstawowe stałe matematyczne oraz funkcje jako metody i właściwości. Na przykład właściwość PI obiektu Math zawiera wartość Pi (π), która jest w przybliżeniu równa 3,1416, a metoda sin zwraca sinus określonej liczby.

Oprócz liczby π obiekt Math ma następujące właściwości:

  • E – podstawa logarytmów naturalnych (około 2,718)
  • LN10 – logarytm naturalny liczby 10 (około 2,302)
  • LN2 – logarytm naturalny liczby 2 (około 0,693)
  • LOG10E – logarytm dziesiętny E (około 0,434)
  • LOG2E – logarytm binarny E (około 1,442)
  • SQRT1_2 – pierwiastek kwadratowy z 0,5 (około 0,707)
  • SQRT2 – pierwiastek kwadratowy z 2 (około 1,414)

Ponieważ wszystkie właściwości obiektu Math są predefiniowanymi stałymi, tworzenie innych obiektów typu Math jest nie tylko niepotrzebne, ale także niedopuszczalne i dostęp do nich należy zawsze uzyskać w ten sam sposób, na przykład:

Var CircleLength = średnica * Math.PI;

Oprócz właściwości obiekt Math definiuje także metody odpowiadające podstawowym funkcjom matematycznym. Wszystkie zestawiono w tabeli 4.13.

Tabela 4.13. Metody matematyczne JavaScript Metoda i jej składnia Opis
abs(liczba)Zwraca wartość bezwzględną argumentu
atan2(y, x)Zwraca liczbę z zakresu od -? do?, reprezentujący kąt (w radianach) między osią x a punktem (x, y). Zauważ, że pierwszym argumentem jest współrzędna Y
exp(liczba)Zwraca E do określonej potęgi (logarytm wykładniczy)
sufit(liczba), piętro(liczba)Zwraca wartość będącą najbliższą większą (sufitową) lub mniejszą (podłogową) liczbą całkowitą
min(liczba1, liczba2), maks(liczba1, liczba2)Zwraca mniejszą (min.) lub większą (maks.) liczbę dwóch porównywanych argumentów
sin(liczba),cos(liczba), tan(liczba),asin(liczba), acos(liczba),atan(liczba)Zwraca wynik standardowych funkcji trygonometrycznych — sinus, cosinus, tangens, arcsinus, arccosinus i arcustangens
pow(podstawa, wykładnik)Zwraca podstawę do potęgi wykładniczej
losowy()Zwraca liczbę pseudolosową z zakresu od 0 do 1
okrągła liczba)Zwraca wartość zaokrągloną do najbliższej liczby całkowitej
sqrt(liczba)Zwraca pierwiastek kwadratowy z liczby

Podobnie jak w przypadku właściwości, aby użyć metod obiektu Math, należy odwołać się do samego obiektu, a nie do jego kopii. Na przykład napiszmy funkcję, która zwróci średnicę na podstawie pola koła:

Funkcja CircleDiam(Square) ( Promień = Math.sqrt(Square / Math.PI) ; )

Aby wykorzystać to w praktyce, możesz skorzystać z metod podpowiedzi i alertów:

Var sq = zachęta("Podaj obszar",1); var di = średnica okręgu(kwadrat); alert("Średnica okręgu: "+di);

Działanie tych i innych metod obiektu Math można zobaczyć w pliku math.html.

Obiekt numeryczny

Obiekt Number jest obiektową reprezentacją prostych typów liczbowych. Ma specjalne właściwości dla stałych numerycznych, takie jak „liczba maksymalna”, „nie liczba” i „nieskończoność”. Aby utworzyć nowy obiekt typu Number, użyj następującej składni:

Nowy numer (wartość)

W praktyce najczęstszym zastosowaniem obiektu Number jest użycie jego stałych do sprawdzania poprawności argumentów i śledzenia błędów w czasie wykonywania. Na przykład, aby sprawdzić, czy wartość zmiennej jest liczbą, czy nie, możesz użyć tej metody:

Jeśli (x!=Numer.NaN);

W tym przypadku warunek będzie spełniony, jeśli zmienna x zawiera liczbę, ponieważ jest porównywana ze specjalną wartością - NaN, co oznacza „nie liczbę”. Oprócz NaN możesz użyć innych wartości specjalnych - wszystkie są właściwościami obiektu Number:

  • MAX_VALUE – maksymalna możliwa liczba
  • MIN_VALUE – minimalna możliwa liczba
  • NaN – nie liczba
  • NEGATIVE_INFINITY – „ujemna nieskończoność”, specjalna wartość zwracana w przypadku przepełnienia
  • POSITIVE_INFINITY – „dodatnia nieskończoność”, specjalna wartość zwracana w przypadku przepełnienia

Wszystkie te właściwości są stałymi, więc nie trzeba tworzyć nowego obiektu Number, aby z nich korzystać. Oprócz powyższych właściwości dla Number zdefiniowano także standardowe właściwości konstruktora i prototypu

Oprócz właściwości obiekt Number posiada oczywiście także metody. Oprócz standardowych metod toSource, toString i valueOf, JavaScript 1.5 wprowadził 3 nowe natywne metody obiektu Number - toExponential, toFixed i toPrecision. Wszystkie są przeznaczone do konwersji liczb na ciągi znaków w oparciu o ten czy inny format. Zatem metoda toExponential konwertuje liczbę na ciąg znaków jako liczbę z wykładnikiem, metoda toFixed konwertuje ją na ciąg znaków zawierający liczbę ze stałą liczbą miejsc po przecinku, a metoda toPrecision wykorzystuje jedną z tych metod, w zależności od liczbę i liczbę przydzielonych miejsc po przecinku.

Przyjrzyjmy się tym metodom bardziej szczegółowo, dla których rozważymy ich składnię:

Metoda([Liczba znaków])

Oczywiście dla wszystkich metod liczba cyfr wskazuje liczbę miejsc po przecinku, ale jeśli dla metody toFixed wartość domyślna (tzn. jeśli nic nie jest określone) to 0, to dla toExponential i toPrecision jest to wymagana liczba miejsc dziesiętnych aby wyświetlić cały numer. Aby lepiej zrozumieć działanie i różnice wszystkich tych metod, przyjrzyjmy się im na przykładzie Listingu 4.5:

Listowanie 4.5. toExponential, toFixed i toPrecision

Metody obiektu Number

Tutaj ponownie (jak na Listingu 4.4) użyliśmy funkcji, która najpierw wypisuje wyrażenie, a następnie wynik jego interpretacji, ale w tym przypadku nazwaliśmy ją printNumber. Następnie następuje właściwa deklaracja zmiennej, na której będą wykonywane obliczenia. W tym przypadku zadeklarowaliśmy go jako obiekt typu Number, chociaż tak naprawdę mogliśmy ograniczyć się do prostej deklaracji zmiennej (x = 12,45678). Na koniec dokument jest otwierany do zapisu i najpierw drukowana jest do niego wartość zmiennej x bez jawnych konwersji (ale wiemy już, że tak naprawdę metoda toString() jest tu automatycznie stosowana), po czym wszystkie trzy omawiane metody wywoływane są najpierw bez podania znaków liczby, a następnie z parametrami 2 i 4. Wynikiem działania tego skryptu będzie 10 linii zawierających pary „wyrażenie: wynik przetwarzania” (rys. 4.9).

Ryż. 4.9.

Podsumowując, należy jeszcze raz zauważyć, że metody te pojawiły się dopiero w JavaScript 1.5 i dlatego nie działają w przeglądarkach Netscape 4, MSIE 4/5 i Opera aż do wersji 7.0. Jednocześnie zapewniają większą elastyczność w formatowaniu liczb na wyjściu niż, powiedzmy, metoda round() obiektu Math.

2011-08-01 // Masz pytania, sugestie, uwagi? Możesz

Już w czasach XHTML/HTML4 programiści mieli tylko kilka opcji, których mogli użyć do przechowywania dowolnych danych związanych z DOM. Mógłbyś wymyślić własne atrybuty, ale było to ryzykowne – Twój kod byłby nieprawidłowy, przeglądarki mogłyby zignorować Twoje dane i mogłoby to powodować problemy, gdyby nazwa pasowała do standardowych atrybutów HTML.

Dlatego większość programistów trzymała się atrybutów class lub rel, ponieważ były one jedynym rozsądnym sposobem przechowywania dodatkowych wierszy. Załóżmy na przykład, że tworzymy widżet do wyświetlania wiadomości, takich jak oś czasu wiadomości na Twitterze. W idealnym przypadku JavaScript powinien być konfigurowalny bez konieczności przepisywania kodu, dlatego definiujemy identyfikator użytkownika w atrybucie class w następujący sposób:

Nasz kod JavaScript będzie szukał elementu o identyfikatorze msglist . Za pomocą skryptu będziemy szukać klas rozpoczynających się od user_ , a „bob” w naszym przypadku będzie identyfikatorem użytkownika i wyświetlimy wszystkie wiadomości tego użytkownika.

Załóżmy, że chcielibyśmy również ustawić maksymalną liczbę wiadomości i pominąć wiadomości starsze niż sześć miesięcy (180 dni):

Nasz atrybut klasy bardzo szybko ulega zaśmieceniu - łatwiej jest popełnić błąd, a analizowanie ciągów znaków w JavaScript staje się coraz trudniejsze.

Atrybuty danych HTML5

Na szczęście HTML5 wprowadził możliwość korzystania z niestandardowych atrybutów. Możesz użyć dowolnej nazwy z małej litery poprzedzonej data-, na przykład:

Niestandardowe atrybuty danych:

  • są to ciągi znaków - można w nich przechowywać dowolne informacje, które można przedstawić lub zakodować jako ciąg znaków, np. JSON. Rzutowanie typów musi odbywać się przy użyciu JavaScript
  • należy stosować w przypadkach, gdy nie ma odpowiednich elementów lub atrybutów HTML5
  • patrz tylko na stronę. W przeciwieństwie do mikroformatów powinny być ignorowane przez systemy zewnętrzne, takie jak wyszukiwarki i roboty indeksujące
Przykład przetwarzania JavaScript nr 1: getAttribute i setAttribute

Wszystkie przeglądarki umożliwiają pobieranie i zmianę atrybutów danych za pomocą metod getAttribute i setAttribute:

Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("rozmiar-listy-danych"); msglist.setAttribute("rozmiar-listy-danych", +show+3);

To działa, ale powinno być używane tylko w celu zachowania zgodności ze starszymi przeglądarkami.

Przykład nr 2 przetwarzania w JavaScript: metoda data() biblioteki jQuery

Od wersji jQuery 1.4.3 metoda data() obsługuje atrybuty danych HTML5. Nie musisz jawnie określać prefiksu data-, więc taki kod będzie działał:

Var msglist = $("#msglist"); var show = msglist.data("rozmiar-listy"); msglist.data("rozmiar listy", show+3);

Należy jednak pamiętać, że jQuery próbuje konwertować wartości takich atrybutów na odpowiednie typy (booleany, liczby, obiekty, tablice lub null) i będzie to miało wpływ na DOM. W przeciwieństwie do setAttribute metoda data() nie zastąpi fizycznie atrybutu data-list-size - jeśli sprawdzisz jego wartość poza jQuery - nadal będzie to 5.

Przykład nr 3 przetwarzania JavaScript: API do pracy ze zbiorami danych

Wreszcie mamy interfejs API do pracy ze zbiorami danych HTML5, który zwraca obiekt DOMStringMap. Należy pamiętać, że atrybuty danych są mapowane na obiekt bez przedrostków danych, z nazw usuwane są łączniki, a same nazwy konwertowane są do postaci camelCase, na przykład:

Nazwa atrybutu Nazwa interfejsu API zbioru danych
użytkownik danych użytkownik
data-maxage maks
rozmiar listy danych listaRozmiar

Nasz nowy kod:

Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +pokaż+3;

Ten interfejs API jest obsługiwany przez wszystkie nowoczesne przeglądarki, ale nie IE10 i starsze. Istnieje obejście dla tych przeglądarek, ale prawdopodobnie bardziej praktyczne jest użycie jQuery, jeśli piszesz dla starszych przeglądarek.

Pracując z datą i godziną w JavaScript, używasz obiektu Date. Myślę, że nie trzeba wyjaśniać, jak często trzeba pracować z datą i godziną. W tym artykule dowiesz się, jak to zrobić w JavaScript.

Zacznijmy tradycyjnie od konstruktorów obiektu Date. Jest ich czterech. Pierwszy to konstruktor bez parametrów, który zwraca bieżącą godzinę i datę:

Zmienna data = nowa data();
dokument.zapis(data);

W rezultacie zobaczysz coś takiego: „Czw. 14 października 2010 11:42:06 GMT+0400”.

Drugi konstruktor obiektu Date jest konstruktorem jednoparametrowym. Ten parametr zawiera liczbę milisekund, które upłynęły od 01.01.1970 (narodzin ery Uniksa). Na przykład tak:

Var data = nowa data (135253235);
dokument.zapis(data);

W rezultacie zobaczysz następujący komunikat: „Piątek 02 stycznia 1970 16:34:13 GMT+0300”.

Poniższy konstruktor umożliwia utworzenie obiektu Date z następującymi parametrami: rok, miesiąc i dzień:

Var data = nowa data (2010, 0, 12);
dokument.zapis(data);

Wynik: „wtorek 12 stycznia 2010 r. 00:00:00 GMT+0300”. Należy również pamiętać, że miesiąc 0 to styczeń, a miesiąc 11 to grudzień.

Ostatni konstruktor klasy Date w JavaScript umożliwia utworzenie obiektu Date ze wszystkimi parametrami daty i godziny: rok, miesiąc, dzień, godziny, minuty i sekundy.

Var data = nowa data (2010, 0, 12, 23, 45, 12);
dokument.zapis(data);

Otrzymasz następujący wiersz: „Wtorek 12 stycznia 2010 23:45:11 GMT+0300”. To wszystkie konstruktory obiektów JavaScript Date, które udostępnili nam programiści.

Klasa Date nie posiada żadnych specjalnych właściwości, zatem przejdźmy od razu do metod. Zacznijmy od razu z grupą metod, które działają dokładnie tak samo, ale każda z nich zwraca własny element daty i godziny:

Zmienna data = nowa data();
document.write("Rok - " + date.getFullYear() + "
");
document.write("Miesiąc - " + data.getMonth() + "
");
document.write("Numer - " + data.getDate() + "
");
document.write("Dzień tygodnia - " + date.getDay() + "
");
document.write("Godzina - " + data.getHours() + "
");
document.write("Minuta - " + data.getMinutes() + "
");
document.write("Drugi - " + date.getSeconds() + "
");
document.write("Milisekunda - " + data.getMillisekundy() + "
");
document.write("Liczba milisekund, które upłynęły od 01.01.1970 - " + date.getTime() + "
");

Uruchamiając ten skrypt, natychmiast zrozumiesz, co robi każda z tych metod. Jedyne, na co chciałbym zwrócić uwagę, to to, że numeracja dni tygodnia również zaczyna się od zera. Co więcej, niedziela ma indeks 0, a sobota ma indeks 6.

Istnieją podobne metody, ale wyświetlanie daty i godziny w formacie czasu Greenwich. Napiszmy ten kod:

Zmienna data = nowa data();
document.write("Rok - " + data.getUTCFullYear() + "
");
document.write("Miesiąc - " + data.getUTCMonth() + "
");
document.write("Numer - " + data.getUTCDate() + "
");
document.write("Dzień tygodnia - " + date.getUTCDay() + "
");
document.write("Godzina - " + data.getUTCHours() + "
");
document.write("Minuta - " + data.getUTCMinutes() + "
");
document.write("Druga - " + data.getUTCSekundy() + "
");
document.write("Milisekunda - " + data.getUTCMillisekundy() + "
");

Uruchamiając ten skrypt, dowiesz się aktualnej daty i godziny w Greenwich.

Przeciwieństwem metod get() są metody set(). Jeśli te pierwsze zwrócą pewne wartości, to drugie, wręcz przeciwnie, je zmienią. Właściwie mógłbym nie dawać tego skryptu, ale żeby nie było już pytań, zróbmy to:

Zmienna data = nowa data();
data.setFullYear(1990);
data.setMonth(11);
data.setData(15);
data.setHours(9);
data.setMinuty(20);
data.setSeconds(0);
data.setMillisekundy(10);
dokument.zapis(data);

Mam nadzieję, że zauważyłeś, że metoda setDay() nie istnieje. Oznacza to, że dzień tygodnia dobierany jest w zależności od roku, miesiąca i dnia.

Istnieją również podobne metody dla Greenwich. Dodawany jest tylko przedrostek UTC, np. w celu zmiany miesiąca, w którym używana jest metoda setUTCMonth().

Ostatnią metodą jest setTime() . Przyjmuje jako parametr liczbę milisekund, które upłynęły od 01.01.1970:

Date.setTime(39293012);
dokument.zapis(data);

W rezultacie zobaczysz następujący komunikat: „Czw. 01 stycznia 1970 13:54:53 GMT+0300”.

To wszystkie konstruktory i metody obiektu Date w JavaScript.

Lekcja obejmie tematykę obiektów JavaScript. Porozmawiamy o obiektach niestandardowych: tworzeniu obiektu w JavaScript, pracy z właściwościami i metodami obiektów, a także prototypami javascript. Krótko opisuje pracę z obiektami Lokalizacja, Nawigator, Ekran


Celem serwisu jest wyposażenie użytkowników w praktyczne umiejętności pracy z językiem. Praca laboratoryjna nad JavaScriptem, przedstawiona w miarę wzrostu jego złożoności i poparta przejrzystymi, rozwiązanymi przykładami, pozwoli Ci łatwo zrozumieć studiowany materiał i nauczyć się samodzielnego tworzenia „żywych”, dynamicznych stron internetowych.


W JavaScript istnieje kilka typów obiektów:

  • wbudowane obiekty
  • obiekty przeglądarki
  • obiekty, które programista tworzy samodzielnie (zdefiniowane przez użytkownika)

Obiekty wbudowane to obiekty predefiniowane... Większość z nich została już omówiona w poprzednich lekcjach.

O obiektach przeglądarki w JavaScript porozmawiamy w kolejnych lekcjach.

Teraz czas na zapoznanie się z niestandardowymi obiektami w JavaScript.

  • Obiekt
  • Liczba (przetwarzanie liczb)
  • Ciąg (przetwarzanie ciągu)
  • Szyk
  • Matematyka (wzory matematyczne, funkcje i stałe)
  • Data (praca z datami i godzinami)
  • RegExp
  • Globalny (jego właściwości Infinity, NaN, niezdefiniowane)
  • Funkcjonować
Tworzenie obiektów JavaScript

Istnieją 2 sposoby tworzenia obiektów:

  • Używanie inicjatora obiektu (lub tworzenie obiektów kolekcji)
  • Korzystanie z konstruktora obiektów()
  • Tworzenie obiektów kolekcji

    • var nazwa_obiektu = nowy obiekt(); nazwa_obiektu.właściwość = wartość;// zapis z kropką nazwa_obiektu["właściwość"] = wartość;// zapis w nawiasie

    Ważne: Warto zauważyć, że nie można używać liczby jako wartości: myObg.rost = 2 // NIEMOŻLIWE! myObg.rost = "2" // możliwe

    Przykład: Utwórz obiekt myBrowser z nazwą właściwości (wartość ) i wersja (wartość „ 9.0 »)


    ✍ Rozwiązanie 1:

      var myBrowser = nowy obiekt(); myBrowser.name= "Microsoft Internet Explorer"; mojaPrzeglądarka["wersja"]= "9.0";

    Przykład: Utwórz dwa obiekty kolekcji (samochód i motocykl) z właściwościami koloru i marki. Wydrukuj wartość właściwości kolor przy obiekcie samochód i właściwości marka przy obiekcie motor.


    ✍ Rozwiązanie:
      var samochód = nowy obiekt(); car.color = "Biały" ; car.maxSpeed ​​​​= 220 ; samochód.brand = "Nissan" ; document.write („Samochód ma kolor: „ + car.color ) ; var moto = (kolor: „niebieski”, moc konia: 130, marka: „Yamaha” ) ; document.write („Wyprodukował motocykl: „ + moto.brand ) ;

      var samochód = nowy obiekt(); samochód.color = "Biały"; samochód.maxSpeed=220; samochód.brand = "Nissan"; document.write("Samochód ma kolor: " + car.color); var moto = (kolor: „niebieski”, moc konia: 130, marka: „Yamaha” ); document.write("Motocykl ma producenta: " + moto.brand);

    Pętla „dla każdego” podczas pracy z obiektami w javascript

    O tym projekcie powiedziano już sporo.
    Pętla for in w JavaScript została zaprojektowana do iteracji po tablicach, kolekcjach i obiektach.

    Spójrzmy na przykład użycia for w:

    1 2 3 4 5 6 7 8 var myBrowser = nowy obiekt(); myBrowser.name = "Microsoft Internet Explorer" ; mojaPrzeglądarka["wersja"] = "9.0"; for (var a in myBrowser) ( alert(a) ; // Iteruje po właściwościach obiektu myBrowser. Zwróci nazwę, wersję alert(myBrowser[ a] ) ; // Zwraca wartości właściwości)

    var myBrowser = nowy obiekt(); myBrowser.name= "Microsoft Internet Explorer"; mojaPrzeglądarka["wersja"]= "9.0"; for (var a in myBrowser) ( alert(a); // Iteruje po właściwościach obiektu myBrowser. Zwróci nazwę, wersję alert(myBrowser[a]); // Zwraca wartości właściwości)

  • Tworzenie klas konstruktorów

    • Tworzenie klas konstruktorów odbywa się dwuetapowo:

  • najpierw tworzona jest klasa przy użyciu konstruktora;
  • następnie tworzony jest nowy obiekt w oparciu o konstruktor.

    • Tworzenie klasy obiektów za pomocą konstruktora (tworzenie klas konstruktorów):

    funkcja nazwa_klasy_obiektu(sv1, sv2)( this.sv1 = wartość; this.sv2 = wartość; )

    Tworzenie nowego obiektu na podstawie konstruktora klasy obiektu:

    var nazwa_obiektu = nowa nazwa_klasy("wartość_stosu1","wartość_personelu2");

    var nazwa_obiektu = nowa nazwa_klasy(); nazwa_obiektu.stv1="wartość_stv1"; nazwa_obiektu.stv2="wartość_stv2";

    Zwyczajowo nazwę klasy konstruktora pisze się wielką literą!


    Spójrzmy na przykład:

    Przykład: Tworzenie konstruktora dla klasy obiektów i tworzenie obiektu na podstawie tej klasy: utwórz obiekt myBrowser z właściwościami nazwa (wartość "Microsoft Internet Explorer") i wersja (wartość „ 9.0 »)

    Otwarte rozwiązanie

    1 2 3 4 5 6 7 8 funkcja Przeglądarka (nazwa, wersja) ( this .name = nazwa; this .version = wersja; ) var myBrowser = new Browser("Microsoft Internet Explorer" , "9.0" ) ; alert(nazwa.mojej przeglądarki) ; alert(myBrowser.version) ;

    funkcja Przeglądarka (nazwa, wersja)( this.name = nazwa; this.version = wersja; ) var myBrowser = new Browser("Microsoft Internet Explorer","9.0"); alert(nazwa.mojejprzeglądarki); alert(myBrowser.version);

    Porównajmy więc ponownie z pierwszą metodą tworzenia obiektów:

    // obiekt kolekcji var myBrowser = (nazwa: „Microsoft Internet Explorer”, wersja: „7.0”); alert(nazwa.mojejprzeglądarki); alert(myBrowser.version); // poniższa linia jest nieprawidłowa! var myBrowser1 = new myBrowser("MozillaFirefox","3.5"); // NIE PRAWDA! !!

    Ważne: Podczas tworzenia obiektu kolekcji nie można utworzyć instancji klasy, ponieważ nie jest ona klasą


    js zadanie 6_1. Utwórz obiekt Pracownik zawierający informacje o pracownikach danej firmy, takie jak Imię i nazwisko, Dział, Telefon, Wynagrodzenie (użyj funkcji konstruktora i słowa kluczowego this). Utwórz instancję obiektu

    Dostęp do właściwości obiektu w javascript

    Nazwa_obiektu. Nazwa właściwości

    1 2 agent007.Name = "Więź" ; alert(agent007.Nazwa) ;

    agent007.Name = "Więź"; alert(agent007.Nazwa);

    Co to jest właściwość domyślna

    Funkcja konstruktora umożliwia przypisanie domyślnych właściwości do obiektu. Każde wystąpienie utworzonego obiektu będzie miało te właściwości.

    1 2 3 4 5 6 7 8 9 10 funkcja Student(imię, telefon) ( this .name = name; this .phone = "22-22-22" ; // właściwość domyślna! ) var ivanov = new Student("Ivan" , "33-33-33" ) ; alert (ivanov.name) ; // wygeneruje alert „Ivan” (ivanov.phone ) ; // wyświetli „22-22-22” ivanov.phone = „33-33-33” ; //zmień domyślny alert właściwości (ivanov.phone ) ; // zwróci „33-33-33”

    funkcja Student(imię, telefon) ( this.name=name; this.phone="22-22-22"; // właściwość domyślna! ) var ivanov = new Student("Ivan","33-33-33" ) ; alert(ivanov.name); // wygeneruje alert „Ivan” (ivanov.phone); // wyświetli „22-22-22” ivanov.phone="33-33-33"; //zmień domyślny alert właściwości (ivanov.phone); // zwróci „33-33-33”

    Dodawanie właściwości do klasy obiektu

    Wartość właściwości można dodać dla:

    • konkretna instancja obiektu;
    • całą klasę obiektów

    Dodawanie właściwości do konkretnego(instancja) obiekt:

    nazwa_obiektu. nazwa_właściwości = wartość

    ivanov.biology = "doskonały";

    Ważne: W przykładzie właściwość jest ustawiona dla konkretnego obiektu, a nie dla klasy obiektów!

    Dodawanie właściwości do klasy obiekty:

    nazwa_klasy.prototyp. nazwa_właściwości = wartość

    Student.prototype.biology = "doskonały";

    Ważne: W przykładzie właściwość (domyślnie) jest ustawiona dla klasy obiektów! Odbywa się to za pomocą prototype; prototyp - obiekt definiujący konstrukcję

    1 2 Student.prototype.email = " [e-mail chroniony]" ; alert(ivanov.email ) ; // wyświetli " [e-mail chroniony]"

    Student.prototype.email=" [e-mail chroniony]"; alert(ivanov.email); // wyświetli " [e-mail chroniony]"

    Przykład: Przykład wyświetlenia wszystkich właściwości obiektu wraz z wartościami

    1 2 3 4 5 6 7 8 9 var SummerTour= (Turcja: 2000, Hiszpania: 3000, Egipt: 1000); opcja var; for (opcja w SummerTour) ( document.write (opcja + ":" + SummerTour[ opcja] + "
    " ) ; }

    var SummerTour=( Turcja: 2000, Hiszpania: 3000, Egipt: 1000); opcja var; for (opcja w SummerTour)( document.write(opcja + ":" + SummerTour + "
    "); }

    Prototypy JavaScript (wprowadzenie)

    Przyjrzyjmy się przykładowi budowania klas JavaScript przy użyciu prototypów

    Przykład: Utwórz klasę obiektu Samochód (samochód) z trzema właściwościami: nazwa (nazwa), model (model), kolor (kolor). Utwórz instancję klasy z określonymi wartościami właściwości. Następnie poprzez utworzoną instancję dodaj do klasy właściciel z określoną wartością domyślną ( Iwanow). Wydrukuj wszystkie wartości właściwości utworzonej instancji

    funkcja Samochód(nazwa, model, kolor) ( /* konstruktor obiektu samochodu*/ this .name = nazwa; this .model = model; this .color = kolor; ) var myCar= nowy samochód; myCar.name = "Mercedes" ; mójsamochód.model = "600" ; myCar.color = "zielony" ; Car.prototype .owner = "Iwanow" ; /* dodaj nową właściwość*/ alert(myCar.name + " " + myCar.model + " " + myCar.color + " " + myCar.owner ) ;

    funkcja Samochód(nazwa, model, kolor) ( /* konstruktor obiektu samochodu*/ this.name = nazwa; this.model = model; this.color = kolor; ) var myCar=nowy samochód; myCar.name="Mercedes"; mójsamochód.model="600"; myCar.color="zielony"; Car.prototype.owner = "Iwanow"; /* dodaj nową właściwość*/ alert(myCar.name+" "+myCar.model+" "+myCar.color+" "+myCar.owner);

    js zadanie 6_2. Dla zadania js 6_1 poprzez utworzoną instancję obiektu Pracownik dodaj nową właściwość adresu do klasy obiektu

    Metody obiektowe JavaScript

    Tworzenie metody obiektowej

    Przykład: Dodaj metodę aboutBrowser do konstruktora obiektu Browser, która wyświetli na ekranie przeglądarki informację o właściwościach tego obiektu

    1 2 3 4 5 6 7 8 9 10 11 12 13 funkcja showBrowser() ( document.write("Przeglądarka: " + ta .nazwa + " " + ta .wersja ) ; ) funkcja Przeglądarka(nazwa, wersja) ( ta .name = nazwa; ta .wersja = wersja; ta .aboutBrowser = showBrowser; ) var myBrowser= nowa przeglądarka("Microsoft Internet Explorer" , 8.0 ) ; mojaPrzeglądarka.aboutBrowser();

    funkcja showBrowser() ( document.write("Przeglądarka: " + ta.nazwa + " " + ta.wersja); ) funkcja Przeglądarka(nazwa, wersja) ( this.name = nazwa; this.version = wersja; this.aboutBrowser = showBrowser; ) var myBrowser=nowa przeglądarka("Microsoft Internet Explorer",8.0); myBrowser.aboutBrowser();

  • Metody obiektowe tworzone są na podstawie funkcji i dodawane do konstruktora klasy

    • funkcja Przeglądarka(nazwa, wersja) ( this.name = nazwa; this.version = wersja; this.aboutBrowser = funkcja())( document.write("Przeglądarka: " + nazwa + " " + wersja); ) ) var myBrowser = nowa przeglądarka("Microsoft Internet Explorer",8.0); mojaPrzeglądarka.aboutBrowser();

    js zadanie 6_3. Utwórz klasę obiektu (Wycieczka) dla działalności biura podróży z metodą kalkulacji kosztu wycieczki w oparciu o: Liczba ludzi * ilość dni * taryfa krajowa. Utwórz instancję obiektu turkeyTour z wartościami właściwości. Wyświetl wszystkie właściwości obiektu na ekranie. Utwórz metodę obiektu obliczeniowego w oparciu o funkcję.

    Prototypy JavaScript (Prototype) wbudowanych obiektów

    Dodawanie właściwości i metod do wbudowanych obiektów (prototyp)

    JavaScript to prototypowy język OOP (programowanie obiektowe).
    Prototyp – obiekt definiujący konstrukcję

    Przyjrzyjmy się pracy z prototypami na przykładzie:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 /* Zmiana prototypu */ // Dodanie domyślnej właściwości do wbudowanego obiektu String .prototype .color = "black" ; // Dodaj (zmień) metodę do wbudowanego obiektu String .prototype .write = stringWrite; funkcja stringWrite() ( document.write („” ) ; document.write (this .toString () ) ; document.write („” ) ; ) // użyj zmodyfikowanej klasy var s = new String („To jest ciąg znaków "); s.color = "czerwony" ; s.write();

    /* Zmiana prototypu */ // Dodanie domyślnej właściwości do wbudowanego obiektu String.prototype.color = "black"; // Dodanie (zmiana) metody do wbudowanego obiektu String.prototype.write = stringWrite; funkcja stringWrite())( document.write(""); document.write(this.toString()); document.write(""); ) // użyj zmodyfikowanej klasy var s = new String("To jest strunowy"); s.color = "czerwony"; s.write();

    Ważne: Nie można dodawać właściwości ani metod do obiektu Math.


    js zadanie 6_4. Dodaj kod programu, aby zakończyć zadanie: Dodaj metodę printMe() do wbudowanej klasy String, która wypisuje słowo „Brawo!” jako nagłówek (znacznik h...), poziom określony przez użytkownika ().
    Poziom nagłówka (1, 2...6) można dodać jako właściwość klasy String.
    Przypomnijmy, jak powinny wyglądać tagi nagłówków w HTML:

    Nagłówek

    Uzupełnij kod:

    1 2 3 4 5 6 7 8 String .prototype .uroven = "1" ; ... funkcja printZagolovok () ( ... ... ) var s= nowy ...; ...

    String.prototype.uroven="1"; ... funkcja printZagolovok ()( ... ... ) var s=nowy ...; ...

    Podsumowanie: Porównajmy ponownie dwie opcje użycia obiektów niestandardowych w JavaScript:

  • Tworzenie obiektów kolekcji
    • 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var myBook= nowy obiekt () ; myBook.title = "książka" ; myBook.price = "200" ; alert(myBook[ "title" ] ) ; // 1-й вариант обращения к свойствам alert(meBook.price ) ; // 2-й вариант обращения к свойствам function myBookShow() { for (var i in myBook) { document.write (i+ ": " + myBook[ i] + "!}
    " ); // Iteracja po właściwościach ) ) myBook.show = myBookShow; myBook.show () ;

    var myBook=nowy obiekt(); myBook.title="książka"; myBook.price="200"; alert(myBook["title"]); // 1-й вариант обращения к свойствам alert(meBook.price); // 2-й вариант обращения к свойствам function myBookShow() { for (var i in myBook) { document.write(i+": "+myBook[i]+"!}
    "); // Iteruj po właściwościach ) ) myBook.show=myBookShow; myBook.show();

  • Tworzenie klas konstruktorów
    • 1 2 3 4 5 6 7 8 9 10 11 12 13 14 funkcja myBook(title, cena) ( // zdefiniowanie właściwości this .title = title; this .price = cena; // zdefiniowanie metody this .show = show; funkcja show() ( document.write („Tytuł: „ + this .tytuł ) ; dokument.write ( "Cena: " + ta .cena ) ) var książka = nowa mojaBook ( "Książka" , 200 ) ; książka.pokaż();

    funkcja myBook(title,cena)( // definicja właściwości this.title = title; this.price = cena; // definicja metody this.show = show; funkcja show() ( document.write("Tytuł: " + this .tytuł); dokument.write("Cena: " + ta.cena var książka = nowa mojaKsiążka("Książka", 200); książka.pokaż();> Wróć do strony głównej ... ...

  • Wróć do strony głównej
  • ...
  • ...

    • *Złożony: liczba pozycji menu, ich nazwy i adres URL należy zażądać od użytkownika

    Wskazówka: aby wyświetlić ciąg znaków na ekranie w metodzie show(), użyj metody document.write().

    JavaScript Lokalizacja, Nawigator, Ekran Obiekty Nawigatora JavaScript

    Przyjrzyjmy się użyciu obiektu Navigator w JavaScript na przykładzie:

    Przykład: Napisz funkcję, która wyświetli:

    • nazwa przeglądarki
    • język przeglądarki
    • Nazwa systemu operacyjnego
    • czy włączona jest obsługa plików cookie
    • czy użytkownik jest podłączony do Internetu?
    • rozdzielczość ekranu
    • głębia koloru
    • załadowany adres strony
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 opcja var; // wyświetl wszystkie właściwości obiektu nawigatora dla (opcja w nawigatorze) ( document.write (opcja + " : " + navigator[ opcja] + "
    " ) ; ) // funkcja wyszukiwania określonych właściwości nawigatora obiektów funkcja userDetails () ( document.write ("

    Nazwa przeglądarki: „+navigator.userAgent+”
    " ); document.write ("Język przeglądarki: " + navigator.language + "
    " ); document.write("Nazwa systemu operacyjnego: " + navigator.oscpu + "
    " ); document.write (" Czy pliki cookie są włączone: " + navigator.cookieEnabled + "
    " ); document.write ("Czy Internet jest podłączony: " + navigator.nLine + "
    " ) ; ) Dane użytkownika() ;

    opcja var; // wyświetl wszystkie właściwości obiektu nawigatora dla (opcja w nawigatorze)( document.write(opcja + " : " + navigator+ "
    "); ) // funkcja wyszukiwania określonych właściwości nawigatora obiektów funkcja userDetails ()( document.write("

    Nazwa przeglądarki: „+navigator.userAgent+”
    "); document.write("Język przeglądarki: " + navigator.language + "
    "); document.write("Nazwa systemu operacyjnego: " + navigator.oscpu + "
    "); document.write("Czy włączone są pliki cookie: " + navigator.cookieEnabled + "
    "); document.write("Czy Internet jest podłączony: " + navigator.nLine + "
    "); ) Dane użytkownika();

    Obiekt ekranu JavaScript

    Przyjrzyjmy się użyciu obiektu Screen w JavaScript na przykładzie:

    funkcja userDetails ()( document.write("Rozdzielczość: " + szerokość.ekranu + " x " + wysokość.ekranu + "
    "); document.write("Głębia kolorów: " + screen.colorDepth + " x " + screen.height + "
    "); ) Dane użytkownika();

    obiekt lokalizacji JavaScript

    Przyjrzyjmy się użyciu obiektu Location w JavaScript na przykładzie:

    1 2 3 4 funkcja userDetails() ( document.write("Adres załadowanej strony: " + lokalizacja.href + "
    " ) ; ) Dane użytkownika() ;

    funkcja userDetails ()( document.write("Adres załadowanej strony: " + lokalizacja.href + "
    "); ) Dane użytkownika();

    Wnioski:

    • Używając wyrażeń ze słowem kluczowym new, możesz tworzyć instancje obiektów, czyli ich konkretne instancje.
    • Co więcej, dzięki właściwości prototypu javascript, możliwe jest dodawanie nowych właściwości i metod do obiektów, które zostały wymyślone przez użytkownika i nie występowały w oryginalnych wbudowanych obiektach.
    • Tworzenie obiektów można wykorzystać do tworzenia baz danych.
    Sieci i komunikacja
    Usługi online