Podstawy JavaScript

Ten artykuł wyjaśnia podstawy JavaScript.

YouTube Video

Wykonanie Hello World!

Przegląd JavaScript

JavaScript to jeden z najczęściej używanych języków programowania w tworzeniu stron internetowych. Jest głównie używany do dodawania dynamicznych elementów do stron internetowych, umożliwiając manipulację interfejsem użytkownika, przesyłanie danych i tworzenie animacji. Może działać po stronie klienta (w przeglądarce) i po stronie serwera za pomocą technologii takich jak Node.js. Dzięki prostocie i elastyczności jest łatwy do nauki dla początkujących i szeroko używany przez profesjonalnych programistów.

Zmienne w JavaScript

Zmienne w JavaScript są jak pojemniki służące do przechowywania i ponownego używania danych. Używając zmiennych, można przechowywać i manipulować wartościami w programie.

Deklarowanie zmiennych

W JavaScript istnieją trzy słowa kluczowe do deklarowania zmiennych.

• var: Stara metoda deklarowania zmiennych, ale zarządzanie jej zakresem jest skomplikowane i wymaga ostrożności. Opiera się na zasięgu funkcji.

1var x = 10;

• let: Wprowadzony w ES6, sposób deklarowania zmiennych z zasięgiem blokowym. Można go ponownie przypisać, ale nie można ponownie zadeklarować w tym samym zasięgu.

1let y = 20;

• const: Używane do deklarowania zmiennych, które są niezmienne (stałe). Ma zakres blokowy i nie może być ponownie przypisana ani zadeklarowana po deklaracji.

1const z = 30;

Zakres

Zmienne mają pojęcie zakresu.

Zakres globalny

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"

• Zmienne w zakresie globalnym są dostępne z dowolnego miejsca. Zmienne zadeklarowane za pomocą var mają zakres globalny lub funkcji, ale let i const mają zakres blokowy.

Zakres blokowy

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

• Zakres blokowy: Zmienne zadeklarowane za pomocą let lub const są ważne tylko w obrębie {} (nawiasów klamrowych).

• Występuje błąd podczas uzyskiwania dostępu spoza {} (nawiasów klamrowych).

Zakres funkcji

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

• Zakres funkcji: Zmienne i funkcje zdefiniowane wewnątrz funkcji nie mogą być dostępne spoza niej. Zmienne zadeklarowane wewnątrz funkcji za pomocą var należą do tego zakresu.

• W tym przykładzie zmienna functionVar może być dostępna spoza {} (nawiasów klamrowych), o ile znajduje się w zakresie funkcji. Z drugiej strony, próba uzyskania dostępu do zmiennej functionScoped spoza zakresu funkcji skutkuje błędem.

Tak więc zmienne zadeklarowane za pomocą var mają tylko zakres funkcji i brak zakresu blokowego, co niesie ryzyko ich użycia w nieoczekiwanych obszarach. Wskazane jest używanie const dla zmiennych, które się nie zmieniają, oraz zazwyczaj używanie let, unikając stosowania var w miarę możliwości.

Typy danych

Zmiennie w JavaScript mogą przechowywać wartości różnych typów danych. Istnieją string do obsługi tekstu oraz number do obsługi wartości numerycznych.

Główne typy danych są następujące:.

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);

• Typy prymitywne:
  • number: Obsługuje wartości liczbowe (liczby całkowite i zmiennoprzecinkowe).
  • string: Obsługuje ciągi znaków.
  • boolean: Obsługuje wartości logiczne true lub false.
  • null: Wyraźnie reprezentuje wartość 'niczego'.
  • undefined: Wartość automatycznie przypisana zmiennym, które nie zostały zainicjalizowane.
  • Symbol: Typ danych używany do tworzenia unikalnych wartości.

 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));

• Typy obiektów:
  • Obiekt: Struktura danych posiadająca wiele właściwości.
  • Array: Lista zawierająca wiele wartości.
  • Function: Obiekt funkcji.

Przypisywanie i ponowne przypisywanie zmiennym

Zmiennym zadeklarowanym za pomocą let lub var można przypisywać wartości ponownie, natomiast const nie można ponownie przypisać po zadeklarowaniu.

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

Podnoszenie zmiennych (hoisting)

W JavaScript istnieje zjawisko, w którym deklaracje zmiennych są 'podnoszone' (hoisted) na początek ich zasięgu. Zmiennym zadeklarowanym za pomocą var przypisywane są wartości na początku ich zasięgu, ale używanie let lub const przed ich deklaracją powoduje błąd.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• W tym przypadku zmienne zadeklarowane za pomocą var są podnoszone, a ich wartości są wyświetlane.

1console.log(b); // ReferenceError
2let b = 20;

• Zmienna zadeklarowana za pomocą let nie jest podnoszona, co powoduje błąd.

Prawidłowe używanie zmiennych

Rozważ następujące punkty dotyczące prawidłowego używania zmiennych.

• Preferuj używanie const i unikaj używania var.
• Przestrzegaj konwencji nadawania nazw zmiennym.
  • Używaj camelCase, takich jak userName lub totalPrice.
  • Unikaj niejasnych nazw, takich jak data lub value, i używaj wymownych nazw, aby poprawić czytelność.
  • Nazwa zmiennej nie może zaczynać się od cyfry, więc nazwy takie jak 1variable są niedozwolone.
• Nadmierne używanie zmiennych globalnych może powodować niejasności w zakresie i prowadzić do błędów, dlatego unikaj ich używania, ilekroć to możliwe.

Podsumowanie

• var: Starsza metoda deklarowania zmiennych, która ma zakres funkcji.
• let: Zmienna o zakresie bloku, która może być ponownie przypisana.
• const: Zmienna o zakresie bloku, która nie może być ponownie przypisana (stała).
• Ważne jest, aby używać zmiennych odpowiednio do ich typów danych i zwracać uwagę na ich zakres.

Czym są znaki ucieczki w JavaScript?

Znaki ucieczki to metoda przedstawiania znaków o specjalnym znaczeniu w zwykłych literałach ciągów znaków. W JavaScript znaki ucieczki są wprowadzane za pomocą ukośnika odwrotnego \, aby dodać specjalne efekty do ciągu znaków lub uwzględnić znaki sterujące. Znaki ucieczki są przydatne do wstawiania elementów takich jak nowe linie, tabulatory lub cudzysłowy w ciągu znaków.

Przykłady użycia znaków ucieczki

Poniżej znajdują się przykładowe kody wykorzystujące znaki ucieczki.

Użycie znaków ucieczki dla podwójnych i pojedynczych cudzysłowów

Użyj znaków ucieczki, aby przedstawić podwójne lub pojedyncze cudzysłowy w ciągu znaków.

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

Użycie znaków ucieczki dla ukośników odwrotnych

Aby uwzględnić sam ukośnik odwrotny w ciągu znaków, użyj znaku ucieczki \.

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

Użycie znaków ucieczki dla nowych linii i tabulatorów

Możesz wstawić nowe linie i tabulatory, aby długie ciągi znaków były bardziej czytelne.

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

Użycie znaków ucieczki dla znaków Unicode

Używanie sekwencji ucieczki Unicode pozwala na przedstawienie określonych znaków za pomocą kodów szesnastkowych.

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

Notatki

Nadmierne użycie znaków ucieczki może zaszkodzić czytelności

Nadmierne używanie znaków ucieczki może zmniejszyć czytelność kodu. Szczególnie ważne jest ostrożne używanie znaków ucieczki w długich ciągach znaków.

Rozważ użycie literałów szablonowych

W JavaScript literały szablonowe używające odwrotnych apostrofów pozwalają na uwzględnienie nowych linii lub osadzonych wyrażeń bez użycia znaków ucieczki.

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

Podsumowanie

Znaki ucieczki są niezbędne do przedstawiania znaków specjalnych lub sterujących w ciągach znaków. Używając znaków ucieczki dla pojedynczych lub podwójnych cudzysłowów oraz dodając nowe linie lub tabulatory, możesz tworzyć bardziej elastyczne ciągi znaków. Jednakże nadmierne użycie znaków ucieczki może utrudniać czytanie kodu, dlatego warto rozważyć używanie literałów szablonowych tam, gdzie jest to odpowiednie.

Wersje JavaScript

JavaScript posiada standardową specyfikację nazywaną ECMAScript (ES). JavaScript rozwijał się na podstawie tego standardu. Poniżej znajduje się krótki opis jego głównych wersji.

• ES3 (1999)

  Pierwsza szeroko przyjęta wersja. Ustanowiono podstawową składnię i funkcje.

• ES5 (2009)

  Wprowadzono strict mode oraz dodano nowe funkcje, takie jak Array.prototype.forEach, Object.keys, itp.

• ES6 / ES2015 (2015)

  Wprowadzono istotną aktualizację JavaScript. Wprowadzono wiele funkcji podstawowych dla nowoczesnego JavaScript, takich jak let, const, funkcje strzałkowe, klasy, promises, moduły, itd.

• ES7 / ES2016 (2016)

  Dodano Array.prototype.includes oraz Operator potęgowania (**).

• ES8 / ES2017 (2017)

  Wprowadzono async/await, co uprościło pisanie procesów asynchronicznych.

• ES9 / ES2018 (2018)

  Dodano asynchroniczne iteratory oraz Właściwości Rest/Spread.

• ES10 / ES2019 (2019)

  Dodano flatMap oraz Object.fromEntries.

• ES11 / ES2020 (2020)

  Dodano Opcjonalne wiązanie (?.) oraz Operator łagodnego scalania (??), co pozwala pisać kod w prostszy i bardziej bezpieczny sposób.

• ES12 / ES2021 (2021)

  Dodano między innymi String.prototype.replaceAll i Promise.any.

• ES13 / ES2022 (2022)

  Dodano między innymi Array.prototype.at i private pola klas (#field).

• ES14 / ES2023 (2023)

  Dodano między innymi Array.prototype.toSorted i Symbol.prototype.description.

• ES15 / ES2024 (2024)

  Dodano między innymi Promise.withResolvers dla łatwiejszego zarządzania Promise i elastyczny ArrayBuffer.

Obecny JavaScript jest aktualizowany co roku, a nowe funkcje są dodawane nawet w najnowszej wersji.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video