Programowanie po stronie klienta (JavaScript)

<!-- 1. Skrypt wewnetrzny (inline) -->
<script>
document.getElementById("tytul").textContent = "Witaj!";
</script>

<!-- 2. Skrypt zewnetrzny - atrybut src, znacznik MUSI byc zamkniety -->
<script src="js/skrypt.js"></script>

<!-- 3. Odroczenie wykonania -->
<script src="js/skrypt.js" defer></script>
<script src="js/analityka.js" async></script>

// Zasieg blokowy kontra funkcyjny
if (true) {
var a = 10;
let b = 20;
}
console.log(a);   // 10  - var "wycieka" poza blok
console.log(b);   // ReferenceError: b is not defined

// const chroni PRZYPISANIE, nie zawartosc obiektu
const lista = [1, 2, 3];
lista.push(4);          // OK - tablica sie zmienia
console.log(lista);     // [1, 2, 3, 4]
lista = [9];            // TypeError: Assignment to constant variable

"2" + 3     // "23"   - plus sklada teksty (konkatenacja)
"2" - 3     // -1     - minus wymusza liczby
"6" * "2"   // 12     - mnozenie tez wymusza liczby
Number("2") + 3   // 5   - poprawnie

const cena = Number(document.getElementById("cena").value);
const ile  = parseInt(document.getElementById("ilosc").value, 10);
console.log(cena * ile);

// Instrukcja warunkowa
const ocena = 4;

if (ocena >= 5) {
console.log("bardzo dobry");
} else if (ocena >= 4) {
console.log("dobry");
} else if (ocena >= 3) {
console.log("dostateczny");
} else {
console.log("niedostateczny");
}

// switch - porownuje SCISLE (jak ===)
const dzien = 3;
switch (dzien) {
case 1:
case 2:
case 3:
case 4:
case 5:
  console.log("dzien roboczy");
  break;
case 6:
case 7:
  console.log("weekend");
  break;
default:
  console.log("bledny numer dnia");
}

// for - gdy znasz liczbe powtorzen
let suma = 0;
for (let i = 1; i <= 10; i++) {
suma += i;
}
console.log(suma);        // 55

// while - warunek sprawdzany PRZED wykonaniem
let n = 5;
while (n > 0) {
console.log(n);
n--;
}

// do...while - blok wykona sie CO NAJMNIEJ RAZ
let x = 100;
do {
console.log("wykonalo sie mimo falszywego warunku");
} while (x < 10);

// for...of - po WARTOSCIACH tablicy
const oceny = [3, 4, 5];
for (const o of oceny) {
console.log(o);         // 3, 4, 5
}

// for...in - po KLUCZACH / INDEKSACH
const uczen = { imie: "Ala", klasa: "3A" };
for (const klucz in uczen) {
console.log(klucz + " = " + uczen[klucz]);   // imie = Ala, klasa = 3A
}

// break przerywa cala petle, continue pomija jeden obieg
for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) continue;   // pomin parzyste
if (i > 7) break;            // zakoncz przy 9
console.log(i);              // 1, 3, 5, 7
}

// 1. Deklaracja funkcji - podlega hoistingowi,
//    mozna ja wywolac PRZED miejscem definicji
console.log(pole(3, 4));    // 12 - dziala

function pole(a, b) {
return a * b;
}

// 2. Wyrazenie funkcyjne - przypisane do zmiennej,
//    wywolanie przed definicja konczy sie bledem
const obwod = function (a, b) {
return 2 * (a + b);
};

// 3. Funkcja strzalkowa (arrow function)
const podwoj = (x) => x * 2;          // krotki zapis: return domyslny
const suma = (a, b) => {
return a + b;
};

// Parametr domyslny - uzywany, gdy argument nie zostal podany
function powitaj(imie = "gosciu") {
return "Witaj, " + imie + "!";
}
console.log(powitaj());        // Witaj, gosciu!
console.log(powitaj("Ala"));   // Witaj, Ala!

// return NATYCHMIAST konczy funkcje
function sprawdzWiek(wiek) {
if (wiek < 0) {
  return "bledna wartosc";
}
return wiek >= 18 ? "pelnoletni" : "nieletni";
}

const owoce = ["jablko", "gruszka", "sliwka"];

console.log(owoce.length);   // 3
console.log(owoce[0]);       // jablko
console.log(owoce[2]);       // sliwka
console.log(owoce[3]);       // undefined - nie ma bledu!

// METODY ZMIENIAJACE ORYGINAL
owoce.push("banan");         // dodaje na KONIEC, zwraca nowa dlugosc
owoce.pop();                 // usuwa OSTATNI, zwraca usuniety element
owoce.unshift("wisnia");     // dodaje na POCZATEK
owoce.shift();               // usuwa PIERWSZY, zwraca usuniety element
owoce.splice(1, 1);          // usuwa 1 element od indeksu 1
owoce.splice(1, 0, "malina");// wstawia bez usuwania

// METODY ZWRACAJACE NOWA TABLICE (oryginal bez zmian)
const liczby = [5, 12, 8, 130, 44];
console.log(liczby.slice(1, 3));   // [12, 8] - od 1 do 3 BEZ 3
console.log(liczby.indexOf(8));    // 2
console.log(liczby.indexOf(99));   // -1 - nie znaleziono
console.log(liczby.includes(44));  // true
console.log(liczby.join(" - "));   // "5 - 12 - 8 - 130 - 44"

// PRZEBIEG PO ELEMENTACH
liczby.forEach(function (el, i) {
console.log(i + ": " + el);      // nic nie zwraca (undefined)
});

const podwojone = liczby.map((el) => el * 2);       // [10, 24, 16, 260, 88]
const duze = liczby.filter((el) => el > 10);        // [12, 130, 44]
const razem = liczby.reduce((a, b) => a + b, 0);    // 199

// OBIEKT - pary klucz: wartosc
const uczen = {
imie: "Jan",
nazwisko: "Kowalski",
klasa: "3A",
oceny: [4, 5, 3],
srednia: function () {
  let s = 0;
  for (const o of this.oceny) s += o;
  return s / this.oceny.length;
}
};

console.log(uczen.imie);        // Jan   - notacja z kropka
console.log(uczen["klasa"]);    // 3A    - notacja z nawiasem kwadratowym
uczen.wiek = 17;                // dodanie nowej wlasciwosci
delete uczen.klasa;             // usuniecie wlasciwosci
console.log(uczen.srednia().toFixed(2));   // 4.00

// TABLICA OBIEKTOW - typowa struktura w zadaniach
const uczniowie = [
{ imie: "Ala", punkty: 45 },
{ imie: "Bartek", punkty: 78 },
{ imie: "Celina", punkty: 61 }
];
const zdali = uczniowie.filter((u) => u.punkty >= 50);
console.log(zdali.length);      // 2

const tekst = "  Programowanie w JavaScript  ";

console.log(tekst.length);              // 30 - razem ze spacjami
console.log(tekst.trim());              // "Programowanie w JavaScript"
console.log(tekst.trim().length);       // 26
console.log(tekst.toUpperCase());       // wszystko wielkimi literami
console.log(tekst.toLowerCase());       // wszystko malymi literami

const s = "JavaScript";
console.log(s.substring(0, 4));         // "Java"  - od 0 do 4 BEZ 4
console.log(s.charAt(0));               // "J"
console.log(s[0]);                      // "J"
console.log(s.indexOf("Script"));       // 4
console.log(s.replace("Java", "Type")); // "TypeScript" - zwraca NOWY tekst

const dane = "Kowalski;Jan;3A";
const czesci = dane.split(";");         // ["Kowalski", "Jan", "3A"]
console.log(czesci[1]);                 // Jan

// Sprawdzenie poprawnosci adresu e-mail bez wyrazen regularnych
const mail = "ala@example.com";
const ok = mail.includes("@") && mail.indexOf(".") > mail.indexOf("@");
console.log(ok);                        // true

// WYSZUKIWANIE
const naglowek = document.getElementById("tytul");
const pierwszy = document.querySelector("#tytul");      // to samo, selektor CSS
const menu     = document.querySelector("nav .menu");
const wszystkie = document.querySelectorAll("li.produkt");
console.log(wszystkie.length);

// ZMIANA TRESCI
naglowek.textContent = "Nowy tytul";                // wstawia CZYSTY TEKST
naglowek.innerHTML   = "Nowy <strong>tytul</strong>"; // interpretuje HTML

// ZMIANA ATRYBUTOW
const obrazek = document.querySelector("img");
obrazek.src = "grafika/logo.png";
obrazek.setAttribute("alt", "Logo firmy");
console.log(obrazek.getAttribute("alt"));

// POLA FORMULARZA
const pole = document.getElementById("login");
console.log(pole.value);          // tresc wpisana przez uzytkownika
pole.value = "";                  // czyszczenie pola
const zgoda = document.getElementById("regulamin");
console.log(zgoda.checked);       // true / false dla checkboxa

// STYLE - wlasciwosci CSS pisane camelCase
naglowek.style.color = "red";
naglowek.style.backgroundColor = "#eee";   // nie background-color!
naglowek.style.fontSize = "24px";

// KLASY CSS - czystszy sposob niz recznie ustawiane style
naglowek.classList.add("aktywny");
naglowek.classList.remove("ukryty");
naglowek.classList.toggle("zaznaczony");
console.log(naglowek.classList.contains("aktywny"));   // true

// TWORZENIE NOWEGO ELEMENTU - trzy kroki
const lista = document.getElementById("lista");

const nowy = document.createElement("li");   // 1. utworz
nowy.textContent = "Nowy produkt";           // 2. wypelnij
nowy.classList.add("produkt");
lista.appendChild(nowy);                     // 3. dolacz do DOM

// Wstawienie PRZED istniejacym elementem
const pierwszyEl = lista.firstElementChild;
lista.insertBefore(nowy, pierwszyEl);

// USUWANIE
nowy.remove();                    // element usuwa sam siebie
lista.removeChild(lista.lastElementChild);   // rodzic usuwa dziecko
lista.innerHTML = "";             // szybkie wyczyszczenie calej zawartosci

// Wypelnienie listy z tablicy - czesty motyw w zadaniach
const produkty = ["Mysz", "Klawiatura", "Monitor"];
produkty.forEach(function (nazwa) {
const li = document.createElement("li");
li.textContent = nazwa;
lista.appendChild(li);
});

// Skladnia: element.addEventListener("nazwa", funkcja);
// UWAGA: nazwa zdarzenia BEZ przedrostka "on"

const przycisk = document.getElementById("start");

przycisk.addEventListener("click", function (event) {
console.log("Kliknieto element:", event.target);
console.log("Typ zdarzenia:", event.type);
});

// To samo funkcja strzalkowa
przycisk.addEventListener("click", (e) => alert("Klik!"));

// Odnosnik, ktory ma NIE przechodzic pod adres
document.querySelector("a.pomoc").addEventListener("click", function (e) {
e.preventDefault();      // anuluje domyslne dzialanie przegladarki
console.log("Zablokowano przejscie");
});

// Kod uruchamiany po zbudowaniu drzewa DOM
document.addEventListener("DOMContentLoaded", function () {
console.log("Strona gotowa");
});

<!-- HTML -->
<form id="rejestracja" novalidate>
<label for="login">Login:</label>
<input type="text" id="login">
<span class="blad" id="bladLogin"></span>

<label for="email">E-mail:</label>
<input type="text" id="email">
<span class="blad" id="bladEmail"></span>

<label for="wiek">Wiek:</label>
<input type="text" id="wiek">
<span class="blad" id="bladWiek"></span>

<button type="submit">Zarejestruj</button>
</form>
<p id="komunikat"></p>

// JavaScript - plik dolaczony z atrybutem defer
const formularz = document.getElementById("rejestracja");
const poleLogin = document.getElementById("login");
const poleEmail = document.getElementById("email");
const poleWiek  = document.getElementById("wiek");
const komunikat = document.getElementById("komunikat");

formularz.addEventListener("submit", function (e) {
e.preventDefault();          // BEZ TEGO strona sie przeladuje

// 1. czyszczenie poprzednich komunikatow
document.querySelectorAll(".blad").forEach(function (el) {
  el.textContent = "";
});
komunikat.textContent = "";

let poprawny = true;

// 2. login - niepusty, co najmniej 3 znaki
const login = poleLogin.value.trim();
if (login === "") {
  document.getElementById("bladLogin").textContent = "Pole jest wymagane";
  poprawny = false;
} else if (login.length < 3) {
  document.getElementById("bladLogin").textContent = "Minimum 3 znaki";
  poprawny = false;
}

// 3. e-mail - musi zawierac @ oraz kropke PO malpie
const email = poleEmail.value.trim();
const malpa = email.indexOf("@");
const kropka = email.lastIndexOf(".");
if (email === "") {
  document.getElementById("bladEmail").textContent = "Podaj adres e-mail";
  poprawny = false;
} else if (malpa < 1 || kropka < malpa + 2 || kropka === email.length - 1) {
  document.getElementById("bladEmail").textContent = "Nieprawidlowy adres";
  poprawny = false;
}

// 4. wiek - liczba z zakresu 1-120
const wiek = Number(poleWiek.value);
if (poleWiek.value.trim() === "" || isNaN(wiek)) {
  document.getElementById("bladWiek").textContent = "Wpisz liczbe";
  poprawny = false;
} else if (wiek < 1 || wiek > 120) {
  document.getElementById("bladWiek").textContent = "Zakres od 1 do 120";
  poprawny = false;
}

// 5. wynik
if (poprawny) {
  komunikat.style.color = "green";
  komunikat.textContent = "Formularz wyslany poprawnie";
  formularz.submit();        // dopiero teraz realne wyslanie
} else {
  komunikat.style.color = "red";
  komunikat.textContent = "Popraw zaznaczone pola";
}
});

// Kasowanie komunikatu w trakcie pisania
poleLogin.addEventListener("input", function () {
document.getElementById("bladLogin").textContent = "";
});

// LOCAL STORAGE - cztery metody, wszystko na TEKSTACH
localStorage.setItem("motyw", "ciemny");
const motyw = localStorage.getItem("motyw");    // "ciemny"
localStorage.removeItem("motyw");               // usuwa jeden klucz
localStorage.clear();                           // czysci wszystko

// Klucza, ktorego nie ma, to null - stad typowy warunek startowy
if (localStorage.getItem("licznik") === null) {
localStorage.setItem("licznik", "0");
}

// Liczby trzeba konwertowac RECZNIE - w pamieci sa jako tekst
let licznik = Number(localStorage.getItem("licznik"));
licznik++;
localStorage.setItem("licznik", licznik);

// Obiekty i tablice zapisujesz przez JSON
const koszyk = [
{ nazwa: "Mysz", cena: 79 },
{ nazwa: "Monitor", cena: 899 }
];
localStorage.setItem("koszyk", JSON.stringify(koszyk));   // obiekt -> tekst
const wczytany = JSON.parse(localStorage.getItem("koszyk"));  // tekst -> obiekt
console.log(wczytany[1].nazwa);      // Monitor

// SESSION STORAGE - identyczne metody, inny czas zycia
sessionStorage.setItem("krok", "2");
console.log(sessionStorage.getItem("krok"));

// CIASTECZKA - jedna wlasciwosc tekstowa document.cookie
// Zapis: nazwa=wartosc, po srednikach atrybuty
document.cookie = "jezyk=pl; max-age=2592000; path=/";   // 30 dni w sekundach

// Odczyt zwraca WSZYSTKIE ciasteczka w jednym tekscie
console.log(document.cookie);    // "jezyk=pl; zgoda=tak"

// Dlatego odczyt pojedynczego wymaga rozbicia tekstu
function pobierzCookie(nazwa) {
const pary = document.cookie.split("; ");
for (const para of pary) {
  const czesci = para.split("=");
  if (czesci[0] === nazwa) return czesci[1];
}
return null;
}
console.log(pobierzCookie("jezyk"));    // pl

// Usuniecie = ustawienie daty waznosci w przeszlosci
document.cookie = "jezyk=; max-age=0; path=/";