W JavaScript możesz łatwo dodać interaktywność do swojej strony za pomocą zdarzeń takich jak onhover (na najechanie myszką), onclick (na kliknięcie), a także stworzyć suwaki, które wpływają na wygląd i zachowanie strony. W tym artykule pokażę Ci, jak to zrobić.

1. onmouseover i onmouseout: Zmiana koloru po najechaniu myszką

Aby zmieniać styl elementu podczas najeżdżania myszką, możemy użyć onmouseover oraz onmouseout.

Przykład:

<div id="box" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='lightblue'" style="width:100px;height:100px;background-color:lightblue;"></div>

Gdy myszka znajdzie się nad kwadratem, zmieni on kolor na żółty. Gdy opuści element, kolor wróci do niebieskiego.

2. onclick: Działanie na kliknięcie

Najpopularniejszym zdarzeniem jest onclick, które uruchamia funkcję po kliknięciu na dany element.

Przykład:

<button onclick="alert('Przycisk został kliknięty!')">Kliknij mnie</button>

Po kliknięciu przycisku wyświetli się okno dialogowe z komunikatem „Przycisk został kliknięty!”.

3. Tworzenie suwaka (<input type="range">)

Suwak (<input type="range">) pozwala użytkownikowi na wybór wartości z danego zakresu. Możemy użyć go, aby zmieniać np. kolor tła strony w czasie rzeczywistym.

Przykład:

<input type="range" id="suwak" min="0" max="255" oninput="changeBackgroundColor()">

<script>
function changeBackgroundColor() {
let suwak = document.getElementById("suwak").value;
document.body.style.backgroundColor = `rgb(${suwak}, ${suwak}, ${suwak})`;
}
</script>

Ten kod tworzy suwak z wartościami od 0 do 255. Funkcja changeBackgroundColor() zmienia kolor tła strony na odcienie szarości, w zależności od aktualnej wartości suwaka.

4. Przykład z onclick zmieniającym rozmiar elementu

Czasami chcemy, aby element na stronie zmienił swój rozmiar po kliknięciu. Możemy to zrobić tak:

<div id="box" style="width:100px;height:100px;background-color:lightblue;"></div>
<button onclick="resizeBox()">Zmień rozmiar</button>

<script>
function resizeBox() {
let box = document.getElementById("box");
box.style.width = "200px";
box.style.height = "200px";
}
</script>

Po kliknięciu przycisku element o id „box” zmieni swoje wymiary na 200x200px.

5. Dynamiczne zmiany za pomocą oninput

Możemy też tworzyć bardziej zaawansowane elementy interaktywne, np. dynamiczną zmianę wielkości czcionki w elemencie div w zależności od wartości suwaka.

Przykład:

<input type="range" id="fontSuwak" min="10" max="100" oninput="changeFontSize()">
<div id="text" style="font-size:20px;">Przykładowy tekst</div>

<script>
function changeFontSize() {
let fontSize = document.getElementById("fontSuwak").value;
document.getElementById("text").style.fontSize = fontSize + "px";
}
</script>

Gdy przesuwasz suwak, zmienia się rozmiar czcionki tekstu w elemencie div.

Podsumowanie

Za pomocą prostych zdarzeń, takich jak onhover (onmouseover/onmouseout), onclick, czy suwaka (input range), możesz łatwo dodać interaktywność do swojej strony. To świetny sposób na uatrakcyjnienie jej wyglądu i zwiększenie zaangażowania użytkowników. Zachęcam do eksperymentowania z tymi zdarzeniami, aby zrozumieć, jak w pełni wykorzystać ich potencjał!