Samouczek JS

JS DOM Wprowadzenie do JS JS Dokąd Wyjście JS Oświadczenia JS Składnia JS Komentarze JS Zmienne JS JS Let JS Const Operatorzy JS Arytmetyka JS Zadanie JS Typy danych JS Funkcje JS Obiekty JS Wydarzenia JS JS Strings Metody ciągów JS Wyszukiwanie ciągów JS Szablony JS String Numery JS Metody liczbowe JS Tablice JS Metody macierzowe JS Sortowanie tablic JS Iteracja tablicy JS JS Array Const JS Daty Formaty daty JS JS Data Pobierz metody Metody ustawiania daty JS Matematyka JS JS losowo JS Booleans Porównania JS Warunki JS Przełącznik JS Pętla JS dla Pętla JS dla In Pętla JS dla Of Pętla JS, podczas gdy Przerwa JS Iterable JS Zestawy JS Mapy JS Typ JS Konwersja typu JS JS Bitwise JS RegExp Błędy JS Zakres JS JS Podnoszenie Tryb ścisły JS JS to słowo kluczowe Funkcja strzałki JS Klasy JS JS JSON Debugowanie JS Przewodnik po stylu JS Najlepsze praktyki JS Błędy JS Wydajność JS JS słowa zastrzeżone

Wersje JS

Wersje JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Krawędź Historia JS

Obiekty JS

Definicje obiektów Właściwości obiektu Metody obiektowe Wyświetlanie obiektów Akcesoria do obiektów Konstruktorzy obiektów Prototypy obiektów Iterowalne obiekty Zestawy obiektów Mapy obiektów Odniesienie do obiektu

Funkcje JS

Definicje funkcji Parametry funkcji Wywołanie funkcji Wywołanie funkcji Funkcja Zastosuj Zamknięcia funkcji

Klasy JS

Wprowadzenie do zajęć Dziedziczenie klas Klasa statyczna

JS Async

Oddzwaniania JS Asynchroniczny JS JS Obietnice JS Async/Oczekiwanie

JS HTML DOM

Wprowadzenie do DOM Metody DOM Dokument DOM Elementy DOM DOM HTML Formularze DOM DOM CSS Animacje DOM Wydarzenia DOM Odbiornik zdarzeń DOM Nawigacja DOM Węzły DOM Kolekcje DOM Listy węzłów DOM

Zestawienie komponentów przeglądarki JS

Okno JS Ekran JS Lokalizacja JS Historia JS JS Navigator Wyskakujący alert JS Czas JS Pliki cookie JS

JS Web API

Wprowadzenie do internetowego interfejsu API Interfejs API formularzy internetowych Interfejs API historii online API przechowywania danych w sieci Web Web Worker API Internetowy interfejs API pobierania Internetowy interfejs API geolokalizacji

JS AJAX

Wprowadzenie do AJAX AJAX XMLHttp Żądanie AJAX Odpowiedź AJAX Plik XML AJAX AJAX PHP ASP AJAX Baza danych AJAX Aplikacje AJAX Przykłady AJAX

JS JSON

Wprowadzenie do JSON Składnia JSON JSON a XML Typy danych JSON Analiza JSON JSON Obiekty JSON Tablice JSON Serwer JSON JSON PHP JSON HTML JSON JSONP

JS kontra jQuery

Selektory jQuery jQuery HTML jQuery CSS jQuery DOM

Grafika JS

Grafika JS JS płótno JS Działka JS Chart.js Wykres JS Google JS D3.js

Przykłady JS

Przykłady JS JS HTML DOM Wejście JS HTML Obiekty HTML JS Wydarzenia JS HTML Przeglądarka JS Edytor JS Ćwiczenia JS JS Quiz Certyfikat JS

Referencje JS

Obiekty JavaScript Obiekty HTML DOM


Zmienne JavaScript

4 sposoby zadeklarowania zmiennej JavaScript:

  • Za pomocą var
  • Za pomocą let
  • Za pomocą const
  • Używanie niczego

Czym są zmienne?

Zmienne to kontenery do przechowywania danych (przechowywania wartości danych).

W tym przykładzie , xi y, zsą zmiennymi zadeklarowanymi za pomocą varsłowa kluczowego:

Przykład

var x = 5;
var y = 6;
var z = x + y;

W tym przykładzie , xi y, zsą zmiennymi zadeklarowanymi za pomocą letsłowa kluczowego:

Przykład

let x = 5;
let y = 6;
let z = x + y;

W tym przykładzie , xi y, zto niezadeklarowane zmienne:

Przykład

x = 5;
y = 6;
z = x + y;

Ze wszystkich powyższych przykładów możesz się domyślić:

  • x przechowuje wartość 5
  • y przechowuje wartość 6
  • z przechowuje wartość 11

Kiedy używać JavaScript var?

Zawsze deklaruj zmienne JavaScript za pomocą var, letlub const.

Słowo varkluczowe jest używane we wszystkich kodach JavaScript od 1995 do 2015.

Słowa kluczowe i zostały dodane letdo constJavaScript w 2015 roku.

Jeśli chcesz, aby Twój kod działał w starszej przeglądarce, musisz użyć var.


Kiedy używać stałej JavaScript?

Jeśli chcesz mieć ogólną zasadę: zawsze deklaruj zmienne z const.

Jeśli uważasz, że wartość zmiennej może się zmienić, użyj let.

W tym przykładzie , price1i price2, totalsą zmiennymi:

Przykład

const price1 = 5;
const price2 = 6;
let total = price1 + price2;

Dwie zmienne price1i price2 są deklarowane za pomocą constsłowa kluczowego.

Są to wartości stałe i nie można ich zmienić.

Zmienna totaljest deklarowana za pomocą letsłowa kluczowego.

Jest to wartość, którą można zmienić.


Tak jak Algebra

Podobnie jak w algebrze, zmienne przechowują wartości:

let x = 5;
let y = 6;

Podobnie jak w algebrze, zmienne są używane w wyrażeniach:

let z = x + y;

Z powyższego przykładu możesz się domyślić, że suma jest obliczona na 11.

Notatka

Zmienne to pojemniki do przechowywania wartości.



Identyfikatory JavaScript

Wszystkie zmienne JavaScript muszą być identyfikowane unikalnymi nazwami .

Te unikalne nazwy nazywane są identyfikatorami .

Identyfikatory mogą być krótkimi nazwami (jak x i y) lub bardziej opisowymi nazwami (wiek, suma, całkowita objętość).

Ogólne zasady konstruowania nazw zmiennych (unikalnych identyfikatorów) to:

  • Nazwy mogą zawierać litery, cyfry, podkreślenia i znaki dolara.
  • Imiona muszą zaczynać się na literę
  • Nazwy mogą również zaczynać się od $ i _ (ale nie będziemy ich używać w tym samouczku)
  • W nazwach rozróżniana jest wielkość liter (y i Y to różne zmienne)
  • Zastrzeżone słowa (takie jak słowa kluczowe JavaScript) nie mogą być używane jako nazwy

Notatka

W identyfikatorach JavaScript rozróżniana jest wielkość liter.


Operator przydziału

W JavaScript znak równości ( =) jest operatorem „przypisania”, a nie operatorem „równa się”.

To różni się od algebry. W algebrze to nie ma sensu:

x = x + 5

W JavaScript ma to jednak sens: przypisuje wartość x + 5 do x.

(Oblicza wartość x + 5 i umieszcza wynik w x. Wartość x jest zwiększana o 5.)

Notatka

Operator "równa się" jest napisany jak ==w JavaScript.


Typy danych JavaScript

Zmienne JavaScript mogą przechowywać liczby takie jak 100 i wartości tekstowe, takie jak „Jan Kowalski”.

W programowaniu wartości tekstowe nazywane są ciągami tekstowymi.

JavaScript może obsługiwać wiele typów danych, ale na razie pomyśl tylko o liczbach i łańcuchach.

Ciągi są pisane w podwójnych lub pojedynczych cudzysłowach. Liczby są pisane bez cudzysłowów.

Jeśli umieścisz liczbę w cudzysłowie, będzie ona traktowana jako ciąg tekstowy.

Przykład

const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

Deklarowanie zmiennej JavaScript

Tworzenie zmiennej w JavaScript nazywa się „deklarowaniem” zmiennej.

Deklarujesz zmienną JavaScript za pomocą słowa kluczowego varlub let:

var carName;
lub:
let carName;

Po deklaracji zmienna nie ma wartości (technicznie jest to undefined).

Aby przypisać wartość do zmiennej, użyj znaku równości:

carName = "Volvo";

Możesz również przypisać wartość do zmiennej podczas jej deklarowania:

let carName = "Volvo";

W poniższym przykładzie tworzymy zmienną o nazwie carNamei przypisujemy jej wartość „Volvo”.

Następnie "wypisujemy" wartość wewnątrz akapitu HTML z id="demo":

Przykład

<p id="demo"></p>

<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

Notatka

Dobrą praktyką programistyczną jest deklarowanie wszystkich zmiennych na początku skryptu.


Jedno stwierdzenie, wiele zmiennych

W jednej instrukcji można zadeklarować wiele zmiennych.

Rozpocznij instrukcję od vari oddziel zmienne przecinkami :

Przykład

let person = "John Doe", carName = "Volvo", price = 200;

Deklaracja może obejmować wiele wierszy:

Przykład

let person = "John Doe",
carName = "Volvo",
price = 200;

Wartość = niezdefiniowana

W programach komputerowych zmienne są często deklarowane bez wartości. Wartość może być czymś, co należy obliczyć, lub czymś, co zostanie dostarczone później, na przykład dane wejściowe użytkownika.

Zmienna zadeklarowana bez wartości będzie miała wartość undefined.

Zmienna carName będzie miała wartość undefinedpo wykonaniu tej instrukcji:

Przykład

let carName;

Ponowne deklarowanie zmiennych JavaScript

Jeśli ponownie zadeklarujesz zmienną JavaScript zadeklarowaną za pomocą var, nie straci ona swojej wartości.

carNamePo wykonaniu tych instrukcji zmienna nadal będzie miała wartość „Volvo”:

Przykład

var carName = "Volvo";
var carName;

Notatka

Nie można ponownie zadeklarować zmiennej zadeklarowanej za pomocą letlub const.

To nie zadziała:

let carName = "Volvo";
let carName;

Arytmetyka JavaScript

Podobnie jak w przypadku algebry, możesz wykonywać arytmetykę ze zmiennymi JavaScript, używając operatorów takich jak =i +:

Przykład

let x = 5 + 2 + 3;

Możesz także dodać ciągi, ale ciągi zostaną połączone:

Przykład

let x = "John" + " " + "Doe";

Spróbuj też tego:

Przykład

let x = "5" + 2 + 3;

Notatka

Jeśli umieścisz liczbę w cudzysłowie, pozostałe liczby będą traktowane jako ciągi i połączone.

Teraz spróbuj tego:

Przykład

let x = 2 + 3 + "5";

Znak dolara JavaScript $

Ponieważ JavaScript traktuje znak dolara jako literę, identyfikatory zawierające $ są poprawnymi nazwami zmiennych:

Przykład

let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

Używanie znaku dolara nie jest zbyt powszechne w JavaScript, ale profesjonalni programiści często używają go jako aliasu dla głównej funkcji w bibliotece JavaScript.

Na przykład w bibliotece JavaScript jQuery główna funkcja $służy do wybierania elementów HTML. W jQuery $("p");oznacza "wybierz wszystkie elementy p".


Podkreślenie JavaScript (_)

Ponieważ JavaScript traktuje podkreślenie jako literę, identyfikatory zawierające _ są poprawnymi nazwami zmiennych:

Przykład

let _lastName = "Johnson";
let _x = 2;
let _100 = 5;

Używanie podkreślenia nie jest zbyt powszechne w JavaScript, ale wśród profesjonalnych programistów przyjęło się używać go jako aliasu dla „prywatnych (ukrytych)” zmiennych.


Sprawdź się za pomocą ćwiczeń

Ćwiczenie:

Utwórz zmienną o nazwie carNamei przypisz Volvodo niej wartość.

var  = "";