JavaScript Essentials in Polish
Wprowadzenie do JavaScript
Czym jest JavaScript?
Wyobraź sobie, że strona internetowa to dom. HTML jest jego szkieletem i ścianami, czyli całą strukturą. CSS to farba, tapety i meble, które nadają mu wygląd i styl. Ale co sprawia, że w tym domu można włączyć światło, otworzyć okno albo uruchomić dzwonek do drzwi? To właśnie rola JavaScript.
JavaScript to język programowania, który ożywia strony internetowe, dodając do nich interaktywność.
Dzięki niemu formularze sprawdzają, czy wpisałeś poprawny e-mail, mapy reagują na przesuwanie, a galerie zdjęć pozwalają na przeglądanie kolejnych obrazków bez przeładowywania całej strony. Został stworzony w 1995 roku przez Brendana Eicha w firmie Netscape i początkowo miał być prostym językiem do drobnych animacji. Dziś jest potęgą, która napędza nie tylko strony, ale też aplikacje mobilne i serwery.
Jak dodać JavaScript do strony?
Kod JavaScript umieszcza się w dokumencie HTML. Istnieją dwa główne sposoby, aby to zrobić: bezpośrednio w pliku HTML lub poprzez dołączenie zewnętrznego pliku z kodem.
Osadzanie kodu bezpośrednio w HTML jest dobre na początek lub do małych, prostych skryptów.
Używamy do tego znacznika <script>. Wszystko, co znajduje się pomiędzy tagiem otwierającym a zamykającym, jest traktowane przez przeglądarkę jako kod JavaScript. Zazwyczaj umieszcza się go tuż przed zamykającym znacznikiem </body>.
<!DOCTYPE html>
<html>
<head>
<title>Moja strona</title>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<script>
alert('Witaj w świecie JavaScript!');
</script>
</body>
</html>
Lepszą praktyką, szczególnie przy większych projektach, jest trzymanie kodu JavaScript w osobnym pliku z rozszerzeniem .js. Taki plik podłączamy do naszego HTML-a za pomocą tego samego znacznika <script>, ale tym razem z atrybutem src (source), który wskazuje ścieżkę do pliku.
<!-- W pliku index.html -->
<script src="moj-skrypt.js"></script>
// W pliku moj-skrypt.js
console.log('Ten kod pochodzi z zewnętrznego pliku!');
Takie podejście ułatwia zarządzanie kodem i pozwala przeglądarce zapisać plik w pamięci podręcznej, co przyspiesza ładowanie strony przy kolejnych odwiedzinach.
Podstawowa składnia i typy danych
Każdy język ma swoje zasady. W JavaScript instrukcje kończymy średnikiem, chociaż nie zawsze jest on wymagany. Podstawowym elementem są zmienne, czyli pojemniki na dane.
zmienna
noun
Nazwany kontener w pamięci, który przechowuje wartość. Wartość ta może być zmieniana w trakcie działania programu.
Do tworzenia zmiennych używamy słów kluczowych let (dla wartości, które mogą się zmieniać) i const (dla wartości stałych).
// Zmienna, której wartość możemy zmienić
let wiek = 30;
wiek = 31; // OK
// Stała, której wartości nie można zmienić po przypisaniu
const imie = 'Anna';
// imie = 'Kasia'; // To spowoduje błąd!
Zmienne mogą przechowywać różne typy danych. Oto najważniejsze z nich:
| Typ danych | Opis | Przykład |
|---|---|---|
String | Ciąg znaków, czyli tekst. Zapisywany w cudzysłowach lub apostrofach. | 'Witaj świecie' lub "JavaScript" |
Number | Dowolna liczba, całkowita lub dziesiętna. | 25, 3.14, -100 |
Boolean | Wartość logiczna, która może być tylko true (prawda) lub false (fałsz). | true, false |
null | Reprezentuje celowy brak wartości. | let uzytkownik = null; |
undefined | Oznacza, że zmienna została utworzona, ale nie ma przypisanej wartości. | let miasto; |
Dzięki tym podstawom możesz zacząć tworzyć proste skrypty, które dodadzą dynamiki Twoim stronom internetowym. W kolejnych lekcjach dowiesz się, jak manipulować elementami na stronie i reagować na działania użytkownika.