Sesión práctica 4 javascript

Práctica 4: Primeros pasos con JavaScript

A partir de la práctica 4 dejamos atrás el diseño con CSS y nos centramos en dar interactividad a la web usando JavaScript. El objetivo es que la página deje de ser estática y pueda reaccionar a las acciones del usuario.

¿Qué hay que hacer en la práctica 4?

• Insertar código JavaScript en la web, ya sea dentro de la propia página (con la etiqueta <script>) o enlazando un archivo externo.
• Mostrar mensajes al usuario usando alert() o prompt().
• Modificar el contenido de la página (DOM) en respuesta a eventos, como hacer clic en un botón.
• Practicar variables, operadores, condicionales y bucles en pequeños scripts.
• Crear funciones que realicen tareas sencillas y las puedas llamar desde botones o eventos.

Ejemplo básico de interactividad

Aquí tienes un ejemplo sencillo que puedes probar en tu web:

Algunos ejercicios típicos de la práctica 4

• Mostrar un mensaje de bienvenida automáticamente al cargar la página:

  
  <script>
  window.onload = function() {
    setTimeout(function() {
      alert('Bienvenido a la web. Este mensaje aparece a los 5 segundos.');
    }, 5000);
  }
  </script>
        

• Cambiar el estilo de un elemento con un botón:

  
  <button onclick="cambiarEstilo()">Cambiar estilo del título</button>
  <h2 id="titulo">Título de ejemplo</h2>
  
  <script>
  function cambiarEstilo() {
    var t = document.getElementById("titulo");
    t.style.color = "red";
    t.style.fontSize = "28px";
  }
  </script>
        

• Solicitar datos al usuario y hacer cálculos:

  
  <button onclick="calcularArea()">Calcular área de un círculo</button>
  <p id="resultado"></p>
  
  <script>
  function calcularArea() {
    var radio = prompt("Introduce el radio del círculo:");
    if(radio && !isNaN(radio)) {
      var area = Math.PI * radio * radio;
      document.getElementById("resultado").textContent = "El área es: " + area.toFixed(2);
    }
  }
  </script>
        

¿Qué se aprende en la práctica 4?

• Cómo insertar y ejecutar código JavaScript en tu página.
• Cómo manipular el contenido y los estilos desde JS.
• Cómo responder a eventos del usuario (clic, carga, etc).
• Cómo usar variables, operadores, condicionales, bucles y funciones.

¿Cómo lo hago en mi blog?

• Pega el código JavaScript entre <script>...</script> en el editor HTML de Blogger o de tu web.
• Asegúrate de que los elementos que quieres modificar (por ejemplo, <p id="saludo">) existen en tu HTML.
• Puedes crear botones o enlaces que llamen a tus funciones JS con onclick="...".

A partir de aquí, en las siguientes prácticas se avanza usando JavaScript para hacer operaciones más complejas, trabajar con arrays, funciones avanzadas, y más lógica de programación we

Pulsa aquí para ver mi página