Ściągawka JavaScript

PDF Ściągawka PDFPoniżej znajduje się ściągawka Javascript w .pdf, a także w tekście.


Ściągawka JavaScript

  • Link do pobrania

Podstawy JavaScript

Zacznijmy od podstaw – jak włączyć JavaScript w witrynie.

Dołączanie JavaScript na stronie HTML

Aby dołączyć JavaScript do strony, musisz go owinąć

Dzięki temu wprowadzeniu przeglądarka może poprawnie zidentyfikować i wykonać kod.

Wywołaj zewnętrzny plik JavaScript

Możesz także umieścić JavaScript w swoim własnym pliku i nazwać go w swoim HTML. W ten sposób możesz oddzielić różne typy kodu od siebie, tworząc lepiej zorganizowane pliki. Jeśli Twój kod znajduje się w pliku o nazwie myscript.js, nazwałbyś to:

W tym komentarze

Komentarze są ważne, ponieważ pomagają innym osobom zrozumieć, co dzieje się w twoim kodzie lub przypominają, jeśli sam o czymś zapomniałeś. Pamiętaj, że muszą być odpowiednio oznaczone, aby przeglądarka nie próbowała ich wykonać.

W JavaScript masz dwie różne opcje:

  • Komentarze jednowierszowe - Aby dołączyć komentarz, który jest ograniczony do jednego wiersza, poprzedz go //
  • Komentarze wieloliniowe - Jeśli chcesz pisać dłuższe komentarze między kilkoma wierszami, zawiń je / * i * / aby uniknąć jego wykonania

Zmienne w JavaScript

Zmienne to wartości stand-in, których można używać do wykonywania operacji. Powinieneś się z nimi zapoznać na lekcjach matematyki.

var, const, pozwolić

Masz trzy różne możliwości zadeklarowania zmiennej w JavaScript, każda z własnymi specjalizacjami:

  • var - Najczęstsza zmienna. Można go przypisać ponownie, ale można uzyskać do niego dostęp tylko w ramach funkcji. Zmienne zdefiniowane za pomocą var przesuń na górę po uruchomieniu kodu.
  • const - Nie można go ponownie przypisać i nie jest dostępny, zanim pojawią się w kodzie.
  • pozwolić - Podobny do const,  pozwolić Zmienna może zostać przypisana ponownie, ale nie może być ponownie zadeklarowana.

Typy danych

Zmienne mogą zawierać różne typy wartości i typy danych. Używasz = przypisać je:

  • Liczby - var age = 23
  • Zmienne - var x
  • Tekst (ciągi) - var a = "init"
  • Operacje - var b = 1 + 2 + 3
  • Prawdziwe lub fałszywe stwierdzenia - var c = true
  • Liczby stałe - const PI = 3,14
  • Obiekty - var name = {firstName: „John”, lastName: „Doe”}

Jest więcej możliwości. Zauważ, że w zmiennych rozróżniana jest wielkość liter. To znaczy nazwisko i nazwisko będą obsługiwane jako dwie różne zmienne.

Obiekty

Obiekty są pewnymi rodzajami zmiennych. Są to zmienne, które mogą mieć własne wartości i metody. Te ostatnie to czynności, które można wykonać na obiektach.

var person = {
firstName: „John”,
lastName: „Doe”,
wiek: 20,
narodowość: „niemiecka”
};

Następny poziom: tablice

Następne w naszym ściągawce JavaScript są tablice. Tablice są częścią wielu różnych języków programowania. Są sposobem organizowania zmiennych i właściwości w grupy. Oto, jak utworzyć jeden w JavaScript:

var fruit = [„Banan”, „Jabłko”, „Gruszka”];

Teraz masz tablicę o nazwie owoc który zawiera trzy elementy, których możesz użyć do przyszłych operacji.

Metody tablicowe

Po utworzeniu tablic możesz z nimi zrobić kilka rzeczy:

  • concat () - Połącz kilka tablic w jedną
  • indeks() - Zwraca pierwszą pozycję, w której dany element pojawia się w tablicy
  • Przystąp() - Połącz elementy tablicy w jeden ciąg i zwróć ciąg
  • lastIndexOf () - Podaje ostatnią pozycję, w której dany element pojawia się w tablicy
  • Muzyka pop() - Usuwa ostatni element tablicy
  • Pchać() - Dodaj nowy element na końcu
  • odwrócić() - Sortuj elementy w kolejności malejącej
  • Zmiana() - Usuń pierwszy element tablicy
  • plasterek() - Wyciąga kopię części tablicy do nowej tablicy
  • sortować() - Sortuje elementy alfabetycznie
  • splatać() - Dodaje elementy w określony sposób i pozycji
  • toString () - Konwertuje elementy na ciągi
  • unshift () - Dodaje nowy element na początku
  • wartość() - Zwraca pierwotną wartość określonego obiektu

Operatorzy

Jeśli masz zmienne, możesz ich użyć do wykonywania różnego rodzaju operacji. Aby to zrobić, potrzebujesz operatorów.

Podstawowe operatory

  • + - Dodawanie
  • - - Odejmowanie
  • * - Mnożenie
  • / - Podział
  • (...) - Operator grupujący, operacje w nawiasach wykonywane są wcześniej niż na zewnątrz
  • % - Moduł (pozostała część)
  • ++ - Numery przyrostowe
  • -- - Liczby malejące

Operatory porównania

  • == - Równy
  • === - Równa wartość i taki sam typ
  • != - Nie równe
  • !== - Nie równa wartość lub nierówny typ
  • > - Lepszy niż
  • < - Mniej niż
  • > = - Większe bądź równe
  • <= - Mniejszy lub równy
  • ? - Operator trójskładnikowy

Operatory logiczne

  • I & - Logiczne i
  • || - Logiczne lub
  • ! - Nie logiczne

Operatory bitowe

  • I - ORAZ oświadczenie
  • | - oświadczenie LUB
  • ~ - NIE
  • ^ - XOR
  • << - Lewy shift
  • >> - Prawa zmiana
  • >>> - Zero shift prawe przesunięcie

Funkcje

Funkcje JavaScript to bloki kodu, które wykonują określone zadanie. Podstawowa funkcja wygląda następująco:

nazwa funkcji (parametr1, parametr2, parametr3) {
// co robi funkcja
}

Jak widać, składa się z funkcjonować słowo kluczowe plus nazwa. Parametry funkcji znajdują się w nawiasach, a nawiasy klamrowe wokół tego, co funkcja wykonuje. Możesz tworzyć własne, ale aby ułatwić sobie życie - jest też wiele domyślnych funkcji.

Wyprowadzanie danych

Powszechnym zastosowaniem funkcji jest wyprowadzanie danych. W przypadku danych wyjściowych masz następujące opcje:

  • alarm() - Dane wyjściowe w polu alertu w oknie przeglądarki
  • potwierdzać() - Otwiera okno dialogowe tak / nie i zwraca wartość prawda / fałsz w zależności od kliknięcia użytkownika
  • console.log () - Zapisuje informacje w konsoli przeglądarki, dobre do celów debugowania
  • document.write () - Napisz bezpośrednio do dokumentu HTML
  • skłonić() - Tworzy dialog do wprowadzania danych przez użytkownika

Funkcje globalne

Funkcje globalne to funkcje wbudowane w każdą przeglądarkę obsługującą JavaScript.

  • decodeURI () - Dekoduje a Uniform Resource Identifier (URI) stworzone przez encodeURI lub podobne
  • decodeURIComponent () - Dekoduje komponent URI
  • encodeURI () - Koduje URI do UTF-8
  • encodeURIComponent () - To samo, ale dla komponentów URI
  • eval () - Ocenia kod JavaScript reprezentowany jako ciąg
  • isFinite () - Określa, czy przekazana wartość jest liczbą skończoną
  • isNaN () - Określa, czy wartość jest NaN, czy nie
  • Numer() —- Zwraca liczbę skonwertowaną z jej argumentu
  • parseFloat () - Analizuje argument i zwraca liczbę zmiennoprzecinkową
  • parseInt () - Analizuje argument i zwraca liczbę całkowitą

Pętle JavaScript

Pętle są częścią większości języków programowania. Pozwalają na wykonywanie bloków kodu żądaną liczbę razy z różnymi wartościami:

for (przed pętlą; warunek dla pętli; wykonaj po pętli) {
// co robić podczas pętli
}

Masz kilka parametrów do tworzenia pętli:

  • dla - Najczęstszy sposób tworzenia pętli w JavaScript
  • podczas - Ustawia warunki wykonywania pętli
  • zrobić na chwilę - Podobny do podczas pętli, ale wykonuje się co najmniej raz i sprawdza na końcu, czy warunek jest spełniony, aby wykonać ponownie
  • złamać —Używany do zatrzymania i wyjścia z cyklu w określonych warunkach
  • kontyntynuj - Pomiń części cyklu, jeśli zostaną spełnione określone warunki

Gdyby - Jeszcze Sprawozdania

Tego rodzaju stwierdzenia są łatwe do zrozumienia. Korzystając z nich, możesz ustawić warunki wykonania kodu. Jeśli mają zastosowanie określone warunki, coś jest robione, jeśli nie - wykonywane jest coś innego.

if (warunek) {
// co zrobić, jeśli warunek jest spełniony
} else {
// co zrobić, jeśli warunek nie jest spełniony
}

Podobna koncepcja do Jeśli inaczej jest przełącznik komunikat. Jednak za pomocą przełącznika wybierasz jeden z kilku bloków kodu do wykonania.

Smyczki

Ciągi znaków nazywane są przez JavaScript tekstem, który nie wykonuje żadnej funkcji, ale może pojawić się na ekranie.

var person = "John Doe";

W tym przypadku, nieznany z nazwiska jest ciąg.

Escape Characters

W JavaScript ciągi są oznaczone pojedynczymi lub podwójnymi cudzysłowami. Jeśli chcesz używać cudzysłowu w ciągu, musisz użyć znaków specjalnych:

  • \ - Pojedynczy cytat
  • \ ” - Cudzysłów

Oprócz tego masz także dodatkowe znaki ucieczki:

  • \\ - Ukośnik wsteczny
  • \b - Backspace
  • \fa - Formularz
  • \ n - Nowa linia
  • r - Zwrot karetki
  • \ t - Tabulator poziomy
  • \ v - Tabulator pionowy

Metody ciągów

Istnieje wiele różnych sposobów pracy z ciągami:

  • charAt () - Zwraca znak z określonej pozycji w ciągu
  • charCodeAt () - Daje ci Unicode postaci w tej pozycji
  • concat () - Łączy (łączy) dwa lub więcej ciągów w jeden
  • fromCharCode () - Zwraca ciąg znaków utworzony z określonej sekwencji jednostek kodu UTF-16
  • indeks() - Zapewnia pozycję pierwszego wystąpienia określonego tekstu w ciągu
  • lastIndexOf () - Taki sam jak indeks() ale z ostatnim wystąpieniem, wyszukiwanie do tyłu
  • mecz() - Pobiera dopasowania ciągu znaków do wzorca wyszukiwania
  • zastąpić() - Znajdź i zamień określony tekst w ciągu
  • Szukaj() - Wykonuje wyszukiwanie pasującego tekstu i zwraca jego pozycję
  • plasterek() - Wyodrębnia sekcję ciągu i zwraca go jako nowy ciąg
  • rozdzielać() - Dzieli obiekt łańcuchowy na tablicę łańcuchów w określonej pozycji
  • substr () - Podobny do plasterek() ale wyodrębnia podciąg w zależności od określonej liczby znaków
  • substring () - Również podobny do plasterek() ale nie akceptuje ujemnych wskaźników
  • toLowerCase () - Konwertuj ciągi znaków na małe litery
  • toUpperCase () - Konwertuj ciągi znaków na wielkie litery
  • wartość() - Zwraca pierwotną wartość (która nie ma właściwości ani metod) obiektu łańcuchowego

Składnia wyrażeń regularnych

Wyrażenia regularne to wzorce wyszukiwania używane do dopasowania kombinacji znaków w ciągach. Wzorzec wyszukiwania może być używany do wyszukiwania tekstu i tekstu zastępującego operacje.

Modyfikatory wzorców

  • mi - Oceń wymianę
  • ja - Wykonuj dopasowanie bez rozróżniania wielkości liter
  • sol - Wykonaj globalne dopasowanie
  • m - Wykonaj dopasowanie wielu linii
  • s - Traktuj ciągi jako pojedynczą linię
  • x - Zezwalaj na komentarze i białe znaki we wzorze
  • U - Niegrzeczny wzór

Wsporniki

  • [ABC] - Znajdź dowolny znak między nawiasami
  • [^ abc] - Znajdź dowolny znak, którego nie ma w nawiasach
  • [0–9] - Służy do znajdowania dowolnej cyfry od 0 do 9
  • [A-z] - Znajdź dowolną postać od dużej litery A do małej litery z
  • (a | b | c) - Znajdź jedną z alternatyw oddzielonych |

Metaznaki

  • . - Znajdź pojedynczy znak, z wyjątkiem znaku nowej linii lub zakończenia linii
  • \ w - Znak słowny
  • \ W - Znak inny niż słowo
  • \re - cyfra
  • \RE - Znak inny niż cyfry
  • \ s - Znak białych znaków
  • \ S - Znak niebiałych znaków
  • \b - Znajdź dopasowanie na początku / na końcu słowa
  • \B - Dopasowanie nie na początku / na końcu słowa
  • \ 0 - znak NUL
  • \ n - Nowy znak linii
  • \fa - Znak w formularzu
  • r - Znak powrotu karetki
  • \ t - Znak tabulacji
  • \ v - Znak tabulacji pionowej
  • \ xxx - Znak określony liczbą ósemkową xxx
  • \ xdd - Znak określony liczbą szesnastkową dd
  • \ uxxxx - Znak Unicode określony liczbą szesnastkową XXXX

Kwantyfikatory

  • n+ - Pasuje do dowolnego ciągu zawierającego co najmniej jeden n
  • n * - Dowolny ciąg znaków, który zawiera zero lub więcej wystąpień n
  • n? - Ciąg znaków, który zawiera zero lub jedno wystąpienie n
  • n {X} - Ciąg zawierający sekwencję X n
  • n {X, Y} - Ciągi zawierające sekwencję X do Y n
  • n {X,} - Pasuje do dowolnego ciągu zawierającego sekwencję co najmniej X n
  • n $ - Dowolny ciąg z n na końcu
  • ^ n - Ciąg z n na początku
  • ?= n - Dowolny ciąg, po którym następuje określony ciąg n
  • ?!n - Ciąg, po którym nie następuje określony ciąg ni

Liczby i matematyka

W JavaScript możesz także pracować z liczbami, stałymi i wykonywać funkcje matematyczne.

Liczba właściwości

  • MAKSYMALNA WARTOŚĆ - Maksymalna wartość liczbowa reprezentowana w JavaScript
  • MIN_VALUE - Najmniejsza dodatnia wartość liczbowa reprezentowana w JavaScript
  • NaN - Wartość „Brak liczby”
  • NEGATIVE_INFINITY - Ujemna wartość nieskończoności
  • POSITIVE_INFINITY - Dodatnia wartość nieskończoności

Metody numeryczne

  • toExponential () - Zwraca ciąg z zaokrągloną liczbą zapisaną jako notacja wykładnicza
  • toFixed () - Zwraca ciąg liczby z określoną liczbą miejsc po przecinku
  • toPrecision () - Ciąg liczby zapisany o określonej długości
  • toString () - Zwraca liczbę jako ciąg
  • wartość() - Zwraca liczbę jako liczbę

Właściwości matematyczne

  • mi - liczba Eulera
  • LN2 - Logarytm naturalny 2
  • LN10 - Logarytm naturalny 10
  • LOG2E - Podstawowy logarytm 2 E
  • LOG10E - Podstawowy 10 logarytm E
  • Liczba Pi - liczba PI
  • SQRT1_2 - Pierwiastek kwadratowy z 1/2
  • SQRT2 - Pierwiastek kwadratowy z 2

Metody matematyczne

  • abs (x) - Zwraca wartość bezwzględną (dodatnią) x
  • acos (x) - Arcus cosinus x, w radianach
  • asin (x) - Arcsine z x, w radianach
  • atan (x) - Arktangens x jako wartości liczbowej
  • atan2 (y, x) - Arcus tangens ilorazu jej argumentów
  • Ceil (x) - Wartość x zaokrąglona w górę do najbliższej liczby całkowitej
  • cos (x) - Cosinus x (x jest w radianach)
  • exp (x) - Wartość Ex
  • podłoga (x) - Wartość x zaokrąglona w dół do najbliższej liczby całkowitej
  • log (x) - Logarytm naturalny (podstawa E) z x
  • max (x, y, z, ..., n) - Zwraca liczbę o najwyższej wartości
  • min (x, y, z, ..., n) - To samo dla liczby o najniższej wartości
  • pow (x, y) - X do potęgi y
  • losowy() - Zwraca losową liczbę od 0 do 1
  • okrągły (x) - Wartość x zaokrąglona do najbliższej liczby całkowitej
  • sin (x) - Sinus x (x jest w radianach)
  • sqrt (x) - Pierwiastek kwadratowy z x
  • tan (x) - Styczna kąta

Radzenie sobie z datami w JavaScript

Możesz także pracować i modyfikować daty i godziny za pomocą JavaScript. To jest następny rozdział w skrypcie JavaScript.

Ustawianie dat

  • Data() - Tworzy nowy obiekt daty z bieżącą datą i godziną
  • Data (2017, 5, 21, 3, 23, 10, 0) - Utwórz niestandardowy obiekt daty. Liczby przedstawiają rok, miesiąc, dzień, godzinę, minuty, sekundy, milisekundy. Możesz pominąć wszystko, co chcesz, z wyjątkiem roku i miesiąca.
  • Data („2017-06-23”) - Deklaracja daty jako ciąg

Wyciąganie wartości daty i godziny

  • getDate () - Uzyskaj dzień miesiąca jako liczbę (1-31)
  • getDay () - Dzień tygodnia jako liczba (0–6)
  • getFullYear () - Rok jako czterocyfrowy numer (rrrr)
  • getHours () - Uzyskaj godzinę (0-23)
  • getMilliseconds () - Milisekunda (0–999)
  • getMinutes () - Zdobądź minutę (0-59)
  • getMonth () - Miesiąc jako liczba (0-11)
  • getSeconds () - Zdobądź drugi (0-59)
  • uzyskać czas() - Uzyskaj milisekundy od 1 stycznia 1970 r
  • getUTCDate () - Dzień (data) miesiąca w określonej dacie zgodnie z czasem uniwersalnym (dostępny również dla dnia, miesiąca, pełnego roku, godzin, minut itp.)
  • analizować - Analizuje ciąg reprezentujący datę i zwraca liczbę milisekund od 1 stycznia 1970 r

Ustaw część daty

  • ustawić datę() - Ustaw dzień jako liczbę (1-31)
  • setFullYear () - Ustawia rok (opcjonalnie miesiąc i dzień)
  • setHours () - Ustaw godzinę (0–23)
  • setMilliseconds () - Ustaw milisekundy (0-999)
  • setMinutes () - Ustawia minuty (0–59)
  • setMonth () - Ustaw miesiąc (0-11)
  • setSeconds () - Ustawia sekundy (0-59)
  • setTime () - Ustaw czas (w milisekundach od 1 stycznia 1970)
  • setUTCDate () - Ustawia dzień miesiąca dla określonej daty zgodnie z czasem uniwersalnym (dostępny również dla dnia, miesiąca, pełnego roku, godzin, minut itp.)

Tryb DOM

DOM to Dokumentowy model obiektowy strony. Jest to kod struktury strony internetowej. JavaScript oferuje wiele różnych sposobów tworzenia i manipulowania elementami HTML (zwanymi węzłami).

Właściwości węzła

  • atrybuty - Zwraca kolekcję na żywo wszystkich atrybutów zarejestrowanych dla elementu
  • baseURI - Zapewnia bezwzględny podstawowy adres URL elementu HTML
  • childNodes - Daje kolekcję węzłów potomnych elementu
  • pierworodny - Zwraca pierwszy węzeł potomny elementu
  • ostatnie dziecko - Ostatni węzeł potomny elementu
  • nextSibling - Daje ci następny węzeł na tym samym poziomie drzewa węzłów
  • nodeName —Zwraca nazwę węzła
  • nodeType - Zwraca typ węzła
  • nodeValue - Ustawia lub zwraca wartość węzła
  • ownerDocument - Obiekt dokumentu najwyższego poziomu dla tego węzła
  • parentNode - Zwraca węzeł nadrzędny elementu
  • previousSibling - Zwraca węzeł bezpośrednio poprzedzający bieżący
  • textContent - Ustawia lub zwraca treść tekstową węzła i jego potomków

Metody węzłowe

  • appendChild () - Dodaje nowy węzeł potomny do elementu jako ostatni węzeł potomny
  • cloneNode () - Klonuje element HTML
  • CompareDocumentPosition () - Porównuje pozycję dokumentu dwóch elementów
  • getFeature () - Zwraca obiekt, który implementuje interfejsy API określonej funkcji
  • hasAttributes () - Zwraca true, jeśli element ma jakieś atrybuty, w przeciwnym razie false
  • hasChildNodes () - Zwraca true, jeśli element ma jakieś węzły potomne, w przeciwnym razie false
  • insertBefore () - Wstawia nowy węzeł potomny przed określonym, istniejącym węzłem potomnym
  • isDefaultNamespace () - Zwraca true, jeśli określona przestrzeń nazwURI jest domyślna, w przeciwnym razie false
  • isEqualNode () - Sprawdza, czy dwa elementy są równe
  • isSameNode () - Sprawdza, czy dwa elementy są tym samym węzłem
  • jest wspierany() - Zwraca true, jeśli określona funkcja jest obsługiwana w elemencie
  • lookupNamespaceURI () - Zwraca identyfikator URI przestrzeni nazw powiązany z danym węzłem
  • lookupPrefix () - Zwraca ciąg DOMString zawierający prefiks dla danego identyfikatora URI przestrzeni nazw, jeśli jest obecny
  • normalizować() - Łączy sąsiednie węzły tekstowe i usuwa puste węzły tekstowe w elemencie
  • removeChild () - Usuwa węzeł potomny z elementu
  • replaceChild () - Zastępuje węzeł potomny w elemencie

Metody elementowe

  • getAttribute () - Zwraca określoną wartość atrybutu węzła elementu
  • getAttributeNS () - Zwraca wartość ciągu atrybutu o określonej przestrzeni nazw i nazwie
  • getAttributeNode () - Pobiera określony węzeł atrybutu
  • getAttributeNodeNS () - Zwraca węzeł atrybutu dla atrybutu o podanej przestrzeni nazw i nazwie
  • getElementsByTagName () - Zapewnia zbiór wszystkich elementów potomnych o określonej nazwie znacznika
  • getElementsByTagNameNS () - Zwraca bieżącą kolekcję HTMLC elementów z określoną nazwą znacznika należącą do danej przestrzeni nazw
  • hasAttribute () - Zwraca true, jeśli element ma jakieś atrybuty, w przeciwnym razie false
  • hasAttributeNS () - Podaje wartość prawda / fałsz wskazującą, czy bieżący element w danej przestrzeni nazw ma określony atrybut
  • removeAttribute () - Usuwa określony atrybut z elementu
  • removeAttributeNS () - Usuwa określony atrybut z elementu w określonej przestrzeni nazw
  • removeAttributeNode () - Usuwa określony węzeł atrybutu i zwraca usunięty węzeł
  • setAttribute () - Ustawia lub zmienia określony atrybut na określoną wartość
  • setAttributeNS () - Dodaje nowy atrybut lub zmienia wartość atrybutu o podanej przestrzeni nazw i nazwie
  • setAttributeNode () - Ustawia lub zmienia określony węzeł atrybutu
  • setAttributeNodeNS () - Dodaje nowy element atrybutu z przestrzenią nazw do elementu

Praca z przeglądarką użytkownika

Oprócz elementów HTML JavaScript może również uwzględniać przeglądarkę użytkownika i włączać jej właściwości do kodu.

Właściwości okna

  • Zamknięte - Sprawdza, czy okno zostało zamknięte, i zwraca wartość true lub false
  • defaultStatus - Ustawia lub zwraca domyślny tekst na pasku stanu okna
  • dokument - Zwraca obiekt dokumentu dla okna
  • ramki - Zwraca wszystko