El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

JavaScript per a Interfícies d'Usuari Interactives

Següent ►
►

En aquest tema, explorarem com JavaScript pot transformar una interfície d'usuari estàtica en una experiència interactiva i dinàmica. JavaScript és un llenguatge de programació essencial per al desenvolupament web, que permet manipular el Document Object Model (DOM), gestionar esdeveniments i crear efectes visuals.

Conceptes Clau

  1. Manipulació del DOM

    • El DOM és una representació estructurada del document HTML.
    • JavaScript pot accedir i modificar elements del DOM per canviar el contingut, l'estil i l'estructura de la pàgina web.

  2. Gestió d'Esdeveniments

    • Els esdeveniments són accions que tenen lloc en la pàgina web, com ara clics, desplaçaments o tecles pressionades.
    • JavaScript pot escoltar aquests esdeveniments i executar codi en resposta.

  3. Efectes i Animacions

    • JavaScript pot crear animacions i transicions per millorar l'experiència de l'usuari.
    • Les animacions poden ser utilitzades per guiar l'usuari o per fer la interfície més atractiva.

Exemples Pràctics

Manipulació del DOM

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de Manipulació del DOM</title>
</head>
<body>
    <h1 id="titol">Hola, Món!</h1>
    <button id="canviarTitol">Canvia el Títol</button>

    <script>
        document.getElementById('canviarTitol').addEventListener('click', function() {
            document.getElementById('titol').textContent = 'Títol Canviat!';
        });
    </script>
</body>
</html>

Explicació:

  • Aquest exemple canvia el text d'un element <h1> quan es fa clic en un botó.
  • Utilitzem getElementById per accedir als elements del DOM i addEventListener per escoltar l'esdeveniment de clic.

Gestió d'Esdeveniments

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de Gestió d'Esdeveniments</title>
</head>
<body>
    <input type="text" id="entrada" placeholder="Escriu aquí">
    <p id="sortida"></p>

    <script>
        document.getElementById('entrada').addEventListener('input', function(event) {
            document.getElementById('sortida').textContent = event.target.value;
        });
    </script>
</body>
</html>

Explicació:

  • Aquest exemple mostra com actualitzar el contingut d'un paràgraf en temps real mentre l'usuari escriu en un camp de text.
  • L'esdeveniment input es dispara cada vegada que l'usuari modifica el valor del camp de text.

Efectes i Animacions

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple d'Animació</title>
    <style>
        #caixa {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="caixa"></div>
    <button id="moureCaixa">Mou la Caixa</button>

    <script>
        document.getElementById('moureCaixa').addEventListener('click', function() {
            let caixa = document.getElementById('caixa');
            let posicio = 0;
            let interval = setInterval(function() {
                if (posicio >= 300) {
                    clearInterval(interval);
                } else {
                    posicio++;
                    caixa.style.left = posicio + 'px';
                }
            }, 5);
        });
    </script>
</body>
</html>

Explicació:

  • Aquest exemple mou una caixa de color blau cap a la dreta quan es fa clic en un botó.
  • Utilitzem setInterval per crear una animació suau movent la caixa un píxel cada 5 mil·lisegons.

Exercicis Pràctics

Exercici 1: Canvi de Color

Objectiu: Crea un botó que canviï el color de fons d'un element <div> cada vegada que es fa clic.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici de Canvi de Color</title>
    <style>
        #colorDiv {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="colorDiv"></div>
    <button id="canviarColor">Canvia el Color</button>

    <script>
        document.getElementById('canviarColor').addEventListener('click', function() {
            let div = document.getElementById('colorDiv');
            div.style.backgroundColor = div.style.backgroundColor === 'red' ? 'green' : 'red';
        });
    </script>
</body>
</html>

Exercici 2: Llista Dinàmica

Objectiu: Implementa un formulari que permeti a l'usuari afegir elements a una llista de manera dinàmica.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici de Llista Dinàmica</title>
</head>
<body>
    <input type="text" id="nouElement" placeholder="Nou Element">
    <button id="afegirElement">Afegeix a la Llista</button>
    <ul id="llista"></ul>

    <script>
        document.getElementById('afegirElement').addEventListener('click', function() {
            let nouElement = document.getElementById('nouElement').value;
            if (nouElement) {
                let llista = document.getElementById('llista');
                let element = document.createElement('li');
                element.textContent = nouElement;
                llista.appendChild(element);
                document.getElementById('nouElement').value = '';
            }
        });
    </script>
</body>
</html>

Conclusió

En aquesta secció, hem après com utilitzar JavaScript per fer que les interfícies d'usuari siguin més interactives i dinàmiques. Hem explorat la manipulació del DOM, la gestió d'esdeveniments i la creació d'efectes visuals. Aquests conceptes són fonamentals per a qualsevol desenvolupador web que vulgui crear experiències d'usuari riques i atractives. En el següent tema, explorarem com utilitzar frameworks i llibreries per simplificar i millorar el desenvolupament d'interfícies d'usuari.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats