Fundamentos de Desarrollo Web: HTML, CSS y JavaScript

Tecnologías de desarrollo web

HTML, CSS y JavaScript son los tres pilares fundamentales para el desarrollo de páginas web:

• HTML: El lenguaje de marcado de hipertexto que define la estructura y el contenido.
• CSS: El lenguaje de hojas de estilo en cascada que aporta diseño, color y posicionamiento.
• JavaScript: El lenguaje de programación que brinda dinamismo y funcionalidad.

JavaScript contiene múltiples palabras reservadas que permiten realizar acciones como declarar variables o funciones.

El DOM (Document Object Model)

Una de las características clave de JavaScript es la capacidad de modificar la estructura de las páginas mediante el DOM, el cual se despliega de forma virtual en el navegador al cargar el sitio. Este modelo utiliza nodos que simulan una estructura de "árbol" con raíces, ramas y hojas.

Para manipular el DOM, podemos utilizar diversas funciones que pertenecen al objeto document.

Estructuras de control

Las estructuras de control en JavaScript se dividen en tres categorías: condicionales, iterativas y funcionales.

Estructuras condicionales

Permiten ejecutar código dependiendo de si se cumple una condición específica. Las principales son if-else y switch.

if(condicion) {
    // Código a ejecutar si se cumple la condición
} else {
    // Código a ejecutar si no se cumple la condición
}

switch(dato) {
    case posiblevalor1:
        // Código si el dato es valor 1
        break;
    case posiblevalor2:
        // Código si el dato es valor 2
        break;
    default:
        // Código por defecto
        break;
}

El switch permite añadir múltiples casos, siempre que los valores sean únicos.

Estructuras iterativas

Permiten ejecutar el mismo bloque de código de forma repetitiva. Las más comunes son for, while y do-while.

Ejemplo con for (imprimir del 1 al 5):

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

Ejemplo con while (imprimir del 1 al 5):

let i = 1;
while (i <= 5) {
    console.log(i);
    i++;
}

Ejemplo con do-while (imprimir del 1 al 5):

let i = 1;
do {
    console.log(i);
    i++;
} while (i <= 5);

Funciones

Una función es un bloque de código reutilizable que encapsula instrucciones para realizar una tarea específica, facilitando la modularización del programa.

Se definen con la palabra reservada function, seguida de un nombre, parámetros opcionales entre paréntesis y el cuerpo de la función entre llaves. La palabra return se utiliza para devolver un valor.

function nombreFuncion(parametro1, parametro2) {
    // Bloque de código
    return resultado;
}

Programa 1: Realiza un programa que solicite ingresar tu nombre y devuelva el mensaje "Bienvenid@ name".

Programa 4