Poniżej pokazuję najbardziej typowe fragmenty skryptów JS z zadań wraz z odpowiadającymi im kodami HTML i ich wyglądem. Kody napisane są tak, by były jak najbardziej powtarzalne i łatwe do zapamiętania. Zestawienie ma pomóc w porównaniu i usystematyzowaniu. Zapamiętanie powinno odbyć się przez rozwiązanie wystarczającej liczby zadań 🙂
Pobieranie danych
<input type="text"
id="username"
placeholder="Wpisz nazwę użytkownika">
let dane =
document.getElementById("username").value;
console.log(dane);<input type="number"
id="wiek" min="0" max="120"
placeholder="Wpisz wiek">
let age =
parseInt(document.getElementById("wiek").value);
console.log(age);
Mężczyzna
Kobieta
<input type="radio" name="gender"
id="male" value="male"> Mężczyzna
<input type="radio" name="gender"
id="female" value="female"> Kobieta
let on =
document.getElementById("male").checked;
let ona =
document.getElementById("female").checked;
console.log("Mężczyzna zaznaczony:", on);
console.log("Kobieta zaznaczona:", ona);
Sport
Muzyka
Podróże
<input type="checkbox" name="hobby"
id="sport" value="sport"> Sport
<input type="checkbox" name="hobby"
id="muzyka" value="muzyka"> Muzyka
<input type="checkbox" name="hobby"
id="podroze" value="podróże"> Podróże
let s =
document.getElementById("sport").checked;
let m =
document.getElementById("muzyka").checked;
let p =
document.getElementById("podroze").checked;
console.log("Sport zaznaczony:", s);
console.log("Muzyka zaznaczona:", m);
console.log("Podróże zaznaczone:", p);
<select id="kraj">
<option value="pl">Polska</option>
<option value="de">Niemcy</option>
<option value="us">USA</option>
</select>
let k =
document.getElementById("kraj").value;
console.log(k);<input type="date" id="urodziny">
let data =
document.getElementById("urodziny").value;
console.log(data);<input type="time" id="czas">
let meetingTime =
document.getElementById("czas").value;
console.log(meetingTime);<input type="range" id="suwak"
min="0" max="100" value="70">
let s =
document.getElementById("suwak").value;
console.log(s);Wyświetlanie wyników
<button onclick="wykonaj()">Uruchom</button>
<p id="wynik"></p>
function wykonaj() {
let a = 10;
document.getElementById("wynik").innerHTML
= "Wynik: " + a;
}dane z pola powyżej pojawią się zamiast tego tekstu po „odkliknięciu”
<input type="text" id="poleFormularza"
onchange="wykonaj()">
<p id="wynik">dane z pola powyżej pojawią się
zamiast tego tekstu po "odkliknięciu"</p>
function wykonaj() {
let trescFormularza =
document.getElementById("poleFormularza").value;
document.getElementById("wynik").innerHTML =
"Wynik: " + trescFormularza;
}
