INF.03 HUB - JS

getElementById()

Co robi?

Pobiera element HTML po jego id.

const pole = document.getElementById("pole");

Typowe zastosowanie:

Pobieranie inputów i przycisków.

Częstotliwość: ~95%

.value

Pobiera wartość wpisaną przez użytkownika.

let liczba = document.getElementById("liczba").value;

Częstotliwość: ~90%

innerHTML

Zmienia zawartość elementu.

document.getElementById("wynik").innerHTML = "Witaj";

Częstotliwość: ~95%

onclick

Uruchamia funkcję po kliknięciu.

button onclick="policz()">Kliknij
/button>

Częstotliwość: ~80%

function

Tworzenie funkcji.

function policz(){
    alert("Działa");
}

addEventListener()

Nowoczesna obsługa zdarzeń.

document.getElementById("btn").addEventListener(
    "click",

    function(){
        alert("Klik");
});

Częstotliwość: ~60%

parseInt()

Konwersja tekstu na liczbę całkowitą.

let a = parseInt(
    document.getElementById("a").value
);

parseFloat()

Konwersja na liczbę dziesiętną.

let cena = parseFloat(
    document.getElementById("cena").value
);

if

Instrukcja warunkowa.

if(wiek >= 18){
    alert("Pełnoletni");
}

Częstotliwość: ~70%

for

Pętla wykonywana określoną liczbę razy.

for(
    let i=0;i<10;i++){
        console.log(i);
}

querySelector()

Pobiera pierwszy element.

document.querySelector(".blok");

querySelectorAll()

Pobiera wiele elementów.

document.querySelectorAll(".blok");

.style

Zmiana stylu przez JavaScript.

document.getElementById("box").style.background = "red";

classList

Dodawanie i usuwanie klas CSS.

element.classList.add("aktywny");

element.classList.remove("aktywny");

alert()

Wyświetla okno komunikatu.

alert(
    "Witaj"
);

Math.random()

Losowanie liczby.

let liczba = Math.random();

Gotowiec egzaminacyjny #1

Przykładowe polecenie CKE:

Po kliknięciu przycisku oblicz sumę dwóch liczb.

function licz(){

let a = parseInt(
    document.getElementById("a").value
);

let b = parseInt(
    document.getElementById("b").value
);

document.getElementById("wynik").innerHTML = a + b;
}

Gotowiec egzaminacyjny #2

Przykładowe polecenie CKE:

Sprawdź czy użytkownik podał wiek większy od 18 lat.

let wiek = parseInt(
    document.getElementById("wiek").value
);

if(wiek >= 18){
    alert("Pełnoletni");

}else{
    alert("Niepełnoletni");
}

Gotowiec egzaminacyjny #3

Przykładowe polecenie CKE:

Po kliknięciu przycisku zmień tekst w elemencie.

document.getElementById("wynik").innerHTML = "Nowy tekst";

Gotowiec egzaminacyjny #4

Przykładowe polecenie CKE:

Po kliknięciu zmień obraz na drugi.

document.getElementById("foto").src = "kot2.jpg";