Salta el contingut

Desenvolupament web dinàmic frontend amb Javascript

Una vegada s'ha après a formatar contingut web usant etiquetes HTML i aplicant estils CSS, el següent pas és aplicar dinamisme i control a les pàgines web.

Això ens permet que la interacció amb l'usuari de la interfície generada sigui més profitosa i proporcioni funcionalitats.

Què significa crear una pàgina web dinàmica frontend amb javascript?

Preguntem-li al ChatGPT!

Crear una pàgina web dinàmica frontend amb JavaScript significa dissenyar i implementar una interfície d'usuari on el contingut o el comportament de la pàgina canvien dinàmicament en funció de les interaccions de l'usuari, sense haver de recarregar tota la pàgina des del servidor. Això es fa utilitzant JavaScript, el llenguatge principal per a la programació del comportament en el frontend.

Característiques clau d'una pàgina web dinàmica amb JavaScript:

  1. Interacció amb l'usuari:

    • Les accions de l'usuari (clics, escriptura en formularis, moviments del ratolí, etc.) desencadenen canvis a la pàgina (UX, User experience).
    • Exemples: validació de formularis, menús desplegables, modificació de continguts, o efectes visuals.

  2. Actualització en temps real:

    • Es pot modificar el contingut de la pàgina sense recarregar-la completament, gràcies a l'ús de funcions com DOM manipulation (Manipulació del Document Object Model).
    • Exemples: afegir o eliminar elements, canviar estils, o actualitzar textos.

  3. Efectes visuals i animacions:

    • JavaScript permet crear animacions i transicions que milloren l'experiència visual de la interfície.
    • Exemples: sliders d'imatges, transicions suaus entre seccions o animacions personalitzades.

  4. Integració amb APIs o scripts externs:

    • Pot comunicar-se amb APIs o serveis externs utilitzant AJAX o Fetch API o Import/export per obtenir dades i mostrar-les de manera dinàmica.
    • Exemples: carregar resultats de cerca, mostrar dades meteorològiques, o implementar mapes interactius.

Per exemple, podem implementar:

  • Una calculadora: Podrem crear un formulari per escriure valors i que mostri el resultat d'una operació.
  • Un rellotge de compte enrere i que finalitzi.
  • Canviar el contingut d'una imatge al passar el cursos per sobre.
  • Validar formularis abans de ser enviats.
  • ...

Exemple Script

Per fer-ho, caldrà afegir codi de javascript a dins d'un <script>

<script>

    function validarFormulari() {
    var correu = document.forms["elMeuForm"]["correu"].value;
    if (correu == "") {
        alert("El camp de correu electrònic és obligatori!");
        return false;
        }
    }

</script>

Beneficis:

  • Millora l'experiència d'usuari.
  • Fa les pàgines més interactives i atractives.
  • Redueix la càrrega al servidor en evitar recarregues completes.