JavaScript Basics – Twoje Pierwsze Kroki w Świecie JS!

JavaScript to jeden z najważniejszych języków programowania na świecie, używany do tworzenia dynamicznych stron internetowych, aplikacji webowych i nie tylko. Jeśli chcesz nauczyć się podstaw tego języka i zobaczyć praktyczne "JavaScript Basics przykłady", to ten artykuł jest dla Ciebie! Zanurzmy się w świat JS i zobaczmy, jak łatwo można rozpocząć swoją przygodę z programowaniem w JavaScript.

Co to jest JavaScript?

JavaScript (w skrócie JS) to język programowania, który pozwala na dodawanie interaktywności do stron internetowych. Dzięki niemu możemy np. tworzyć animacje, dynamicznie zmieniać zawartość strony czy obsługiwać formularze użytkowników. JavaScript działa w przeglądarce użytkownika, co oznacza, że nie wymaga dodatkowego oprogramowania po stronie serwera.

Jak rozpocząć pracę z JavaScript?

JavaScript można dodać do dowolnej strony internetowej na kilka sposobów:

• Bezpośrednio w pliku HTML wewnątrz tagu <script>.
• Jako zewnętrzny plik z rozszerzeniem .js.
• W konsoli przeglądarki do testowania kodu na żywo.

Oto podstawowy przykład dodania JavaScript do strony:

<script>
    console.log("Witaj w świecie JavaScript!");
</script>

Jeśli otworzysz konsolę przeglądarki (klawisz F12 lub Ctrl + Shift + I), zobaczysz komunikat "Witaj w świecie JavaScript!".

Zmienne w JavaScript

W JavaScript możemy przechowywać dane w zmiennych. Istnieją trzy sposoby deklarowania zmiennych:

• var – starszy sposób, obecnie rzadko używany.
• let – nowoczesny sposób, zmienna może być zmieniana.
• const – zmienna nie może być ponownie przypisana.

Przykłady deklaracji zmiennych:

let imie = "Anna";
const wiek = 25;
var miasto = "Warszawa";

console.log(imie, wiek, miasto);

Typy danych w JavaScript

JavaScript obsługuje różne typy danych:

• String (ciąg znaków): "Hello, World!"
• Number (liczby): 10, 3.14
• Boolean (wartości logiczne): true, false
• Array (tablice): [1, 2, 3, "tekst"]
• Object (obiekty): { klucz: "wartość" }

Przykładowe użycie:

let osoba = {
    imie: "Jan",
    wiek: 30,
    miasto: "Kraków"
};

console.log(osoba.imie + " ma " + osoba.wiek + " lat.");

Instrukcje warunkowe w JavaScript

Instrukcje warunkowe pozwalają na wykonywanie różnych operacji w zależności od spełnienia określonych warunków.

let wiek = 18;

if (wiek >= 18) {
    console.log("Jesteś pełnoletni.");
} else {
    console.log("Nie masz jeszcze 18 lat.");
}

Pętle w JavaScript

JavaScript obsługuje różne rodzaje pętli do wykonywania powtarzających się operacji:

for (let i = 0; i < 5; i++) {
    console.log("Iteracja nr " + i);
}

Pętla for wykona się 5 razy, wypisując numer iteracji.

Funkcje w JavaScript

Funkcje to bloki kodu, które można wielokrotnie wykorzystywać. Możemy je deklarować na kilka sposobów:

function przywitaj(imie) {
    return "Cześć, " + imie + "!";
}

console.log(przywitaj("Kasia"));

Inny sposób – funkcja strzałkowa:

const dodaj = (a, b) => a + b;
console.log(dodaj(5, 3));

Manipulacja DOM w JavaScript

JavaScript pozwala dynamicznie zmieniać elementy na stronie internetowej. Przykład:

document.getElementById("naglowek").innerText = "Nowy tytuł strony!";

JavaScript Basics – Przykłady Interakcji

Dodajmy prostą interakcję, np. zmiana tekstu po kliknięciu przycisku:

<button onclick="zmienTekst()">Kliknij mnie!</button>
<p id="tekst">Stary tekst</p>

<script>
function zmienTekst() {
    document.getElementById("tekst").innerText = "Nowy tekst po kliknięciu!";
}
</script>

Podsumowanie

To tylko wstęp do fascynującego świata JavaScript! Poznaliśmy podstawowe pojęcia, takie jak zmienne, instrukcje warunkowe, pętle, funkcje i manipulację DOM. JavaScript jest potężnym narzędziem, które pozwala na tworzenie dynamicznych stron internetowych i interaktywnych aplikacji.

Teraz Twoja kolej! Zacznij pisać własny kod, eksperymentuj i odkrywaj, jak wiele możliwości daje JavaScript. Powodzenia!