Składnia JavaScript

Składnia języka (eng. syntax) to zestaw reguł, który musimy spełnić, aby nasz kod został zrozumiany i wykonany w taki sposób, jaki chcemy. Składnia opisuje, w jaki sposób tworzyć komentarze, zmienne, struktury danych, instrukcje sterujące itd.

Komentarze w języku JavaScript

Komentarze to bardzo ważny element podczas pracy nad kodem. Dzięki komentarzom możemy lepiej zaplanować swoją pracę lub przekazać innym członkom zespołu istotne informacje na temat stworzonego przez nas kawałka kodu.

W jezyku JavaScript wyróżniamy dwa typy komentarzy:

• jednoliniowe (Rozpoczyna się od //)
• wieloliniowe (Rozpoczyna się od /* a kończy się na */)

// To jest komentarz jednoliniowy

/* To jest przykład
komentarza wieloliniowego */

Średnik na końcu linii

W programowaniu komputerowym średniki (;) są często wykorzystywane do oddzielenia od siebie poleceń.

Język JavaScript jest jednym z tych języków, dla których średnik na końcu linii jest zupełnie zbędny. Jeśli ktoś jest przyzwyczajony do stosowania średników, może to robić, ale nie musi.

console.log('Hello'); // jest średnik
console.log('Hello') // brak średnika

Przecinek na końcu tablicy

Tablice są jednym ze sposobów na przechowywanie danych w pewnej uporządkowanej strukturze. Można powiedzieć, że to taki poukładany kontener z pudełkami, które przechowują dane.

Tworząc tablicę w JS, musimy wiedzieć, że kolejne elementy oddzielamy od siebie przecinkiem. Przecinek ten możemy zostawić również po ostatnim elemencie, ale możemy go też pominąć. Dla JSa nie ma to znaczenia. Pozostawienie przecinka po ostatnim elemencie nie spowoduje również wystąpienia błędu SyntaxError.

Dobrą praktyką jest nie stawianie przecinka po ostatnim elemencie.

const numbers = [1,2,3]; // brak przecinka na końcu
const letters = ['a', 'b', 'c',]; // jest przecinek

Więcej o tablicach dowiesz się w lekcji: Czym są tablice.

Łańcuchy znaków

Łańcuchy znaków (eng. string) możemy deklarować przy pomocy pojedynczego znaku cudzysłów ('przykład') oraz podwójnego znaku cudzysłowu ("przykład"). To, w jaki sposób będziemy tworzyć łańcuchy znaków, zależy jedynie od osobistych preferencji, ponieważ dla silnika JavaScript nie ma to znaczenia.

let name = 'Piotr';
let domain = "podstawyjs.pl";

Należy jednak pamiętać, że czasami, gdy tworzymy naszą aplikację, będziemy używać wiadomości kierowanych do użytkownika w języku np. angielskim.

Jak większość z nas wie, w języku angielskim możemy używać znaku apostrofu (pojedynczy cudzysłów) w kontekście skrótu np. I’m Piotr.

Niepoprawne użycie może powodować pewne problemy.

Dzieje się tak, ponieważ dla silnika JavaScript apostrof (pojedynczy cudzysłów) jest znakiem rozpoczynającym i kończącym łańcuch tekstowy, a dla ludzi może być elementem tworzącym skrót językowy. Interpreter JavaScript nie wie, w jakim celu chcemy użyć konkretnego znaku więc zwraca nam błąd w postaci SyntaxError.

Rozwiązaniem takiego problemu jest wykluczenie (eng. escape) znaku który, może powodować problem z łańcuchem znaków.

Aby wykluczyć apostrof z łańcucha znaków, należy przed samym apostrofem umieścić znak backslash (\).

let one = 'I'm Piotr'; // Błąd
let two = 'I\'m Piotr'; // OK
let three = "I'm Piotr"; // OK

Oczywiście użycie podwójnego znaku cudzysłowu w celu stworzenia łańcucha tekstowego zawierającego apostrof nie wymaga wykluczania, ponieważ w tym kontekście string musi zakończyć się również podwójnym znakiem cudzysłowu.

Błąd SyntaxError

Jednym z najczęściej spotykanych błędów podczas pracy nad kodem JavaScript jest błąd SyntaxError. Błąd SyntaxError to nic innego jak błąd składni.

Błąd składni może wystąpić, gdy np. pominiemy nawias klamrowy zamykający funkcję, wstawimy średnik w złym miejscu, zapomnimy oddzielić elementy tablicy od siebie itd.

Błędy składni są wykrywane podczas kompilacji lub parsowania kodu źródłowego.

JavaScript to język case-sensitive

Case sensitive oznacza tyle, że wielkość liter ma znaczenie. Małe i wielkie litery są innymi znakami.

O case sensitive wspominałem również tu: Zmienne i stałe w JavaScript

let firstName = ‘Piotrek’;
let FirstName = ‘Patryk’;

console.log(firstName); // Piotrek
console.log(FirstName); // Patryk

Deklarowanie i definiowanie zmiennych

Deklarowanie zmiennych to czynność polegająca na stworzeniu zmiennej oraz nadaniu jej nazwy bez przypisania do niej wartości. Natomiast definiowanie zmiennej to czynność polegająca na przypisywaniu wartości do dane zjmiennej.

Zmienne w języku JavaScript możemy deklarowac za pomocą słów kluczoywch:

• var
• let
• const

Słowa kluczowe var, let i const są używane do deklarowania zmiennych w języku JavaScript. Różnica między nimi polega na zakresie widoczności zmiennej (scope) oraz na możliwości jej modyfikowania. Var służy do deklarowania zmiennych o globalnym lub lokalnym zakresie widoczności, które mogą być modyfikowane w dowolnym momencie. Let jest podobne do var, ale zmienne utworzone za jego pomocą mają zakres widoczności tylko w bloku, w którym zostały zadeklarowane. Const służy do deklarowania stałych, czyli niemodyfikowalnych zmiennych, których wartość nie może być zmieniona po ich utworzeniu.

Poniżej przedstawiam przykłady użycia słów kluczowych var, let i const w języku JavaScript:

// Użycie var
var x = 5;  // Deklaracja i definicja zmiennej x z wartością 5
console.log(x);  // Wyświetlenie zmiennej x
x = 10;  // Modyfikacja zmiennej x
console.log(x);  // Wyświetlenie zmiennej x

// Użycie let
let y = "Hello";  // Deklaracja i definicja zmiennej y z wartością "Hello"
console.log(y);  // Wyświetlenie zmiennej y
y = "World";  // Modyfikacja zmiennej y
console.log(y);  // Wyświetlenie zmiennej y

// Użycie const
const z = true;  // Deklaracja i definicja stałej z o wartości true
console.log(z);  // Wyświetlenie stałej z
z = false;  // Próba modyfikacji stałej z (powinien zostać wyświetlony błąd)
console.log(z);  // Wyświetlenie stałej z

Podsumowanie najważniejszych informacji dot. składni JavaScript

• JavaScript jest językiem skryptowym, który jest wykonywany przez interpreter (np. w przeglądarce internet internetowej)
• Składnia języka JavaScript jest podobna do składni innych języków programowania, takich jak C, Java czy Python
• Komentarze w JavaScript są oznaczane znakiem //, a bloki kodu są otoczone nawiasami klamrowymi {}
• Zmienne służą do przechowywania danych w pamięci komputera i są tworzone za pomocą słowa kluczowego var
• JavaScript jest językiem typowym, co oznacza, że każda zmienna ma określony typ danych (np. liczby, ciągi znaków, wartości logiczne, obiekty)
• Operatory służą do wykonywania różnych działań na zmiennych i danych (np. dodawanie, odejmowanie, porównywanie)
• Instrukcje warunkowe pozwalają na wykonywanie określonych fragmentów kodu w zależności od spełnienia określonego warunku (np. if, else, else if)
• Pętle służą do wielokrotnego wykonywania fragmentów kodu (np. for, while, do...while)
• Funkcje są fragmentami kodu, które można wielokrotnie wywoływać w różnych miejscach programu
• Obiekty są złożonymi typami danych, które składają się z właściwości (atrybutów) i metod (funkcji)