Bloque
PROGRAMACIÓN Y DESARROLLO SOFTWARE
Edición de páginas web con
JavaScript
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
TABLA DE CONTENIDOS
1. INTRODUCCIÓN
2. VARIABLES Y TIPOS DE DATOS
3. OPERACIONES Y EXPRESIONES
4. CONDICIONALES Y BUCLES
5. FUNCIONES
6. EVENTOS
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
CUESTIONES PREVIAS
• A diario utilizas JavaScript, ¿Sabes lo que es?
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
1. INTRODUCCIÓN
¿Qué es Javascript?
Es un lenguaje de programación que nos permite añadir efectos especiales a
nuestras páginas en HTML.
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
CÓMO SE AÑADE EL CÓDIGO JAVASCRIPT A NUESTRA WEB EN HTML
El código JavaScript se debe incluir dentro de las etiquetas <script>.
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<p>Mi primera página web con JavaScript</p>
<script>
alert(“Buenos días”);
</script>
</body>
</html>
Tarea: Antes de profundizar más sobre el lenguaje de programación
JavaScript, vamos a comenzar a familiarizarnos con este nuevo lenguaje.
Entrad en la siguiente página y realizad los ejercicios.
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
2. VARIABLES Y TIPOS DE DATOS
Almacenamos la información en variables:
<script>
let edad = 18;
const pi = 3.141592;
var nombre = “Juan”;
</script>
Usaremos const para valores y tipos de datos que no van a cambiar y let
cuando nuestros valores van a cambiar a lo largo del programa.
El uso de var es el mismo que el de let, pero para versiones anticuadas de los
navegadores.
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
2. VARIABLES Y TIPOS DE DATOS
Podemos almacenar varios tipos de datos:
<script> NÚMEROS
let edad = 18; TEXTOS
let texto = “María”;
BOOLEANOS
let verdadero = true;
let persona = {nombre: “María”, edad: 18}; OBJETOS
let notas = [6, 7, 4]; ARRAYS
</script>
Los objetos son estructuras que pueden contener cualquier tipo de datos,
como cadenas, números, booleanos e incluso otras estructuras de datos.
Por otro lado, los arrays son listas
ordenadas de elementos del mismo tipo de datos, como números o cadenas.
•Aritméticos:==,
•Comparación: +, -,===,
*, /,!=,
% !==, <, >, <=, >=
•Comparación:
•Asignación: =, +=,==,
-=,===, !=, %=
*=, /=, !==, <, >, <=, >=
•Asignación: =, +=, -=, *=, /=, %=
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
3. OPERADORES Y EXPRESIONES
Los operadores nos permiten realizar operaciones matemáticas,
comparaciones y asignaciones en JavaScript.
• Aritméticos: +, -, *, /, %
• Comparación: ==, ===, !=, !==, <, >, <=, >=
• Asignación: =, +=, -=, *=, /=, %=
Las expresiones son combinaciones de valores, variables y operadores que
JavaScript evalúa para obtener un resultado.
<script>
let resultado = (5 * 5) + 2;
alert (“resultado”);
</script>
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
4. CONDICIONALES Y BUCLES
Los condicionales nos permiten ejecutar diferentes bloques de código
dependiendo de ciertas condiciones.
• Estructura if… else:
<script>
if (resultado >= 25) {
alert(“El resultado es mayor que 25”);
}
else {
alert(“El resultado es menor que 25”);
}
</script>
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
4. CONDICIONALES Y BUCLES
Los condicionales nos permiten ejecutar diferentes bloques de código
dependiendo de ciertas condiciones.
• Estructura switch:
<script>
let opcion = 2;
switch (opcion) {
case 1:
alert(“Ha seleccionado la opción 1”);
break;
case 2:
alert(“Ha seleccionado la opción 2”);
break;
case 3:
alert(“Ha seleccionado la opción 3”);
break;
default:
alert(“El valor seleccionado no es válido”);
</script>
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
4. CONDICIONALES Y BUCLES
Los bucles nos permiten repetir un bloque de código mientras se cumpla una
condición.
• Bucle for:
<script>
for (var i = 0; i < 5; i++) {
console.log(i); // Imprime los números del 0 al 4
}
</script>
• Bucle while:
<script>
let suma = 0;
let resultado = 1;
while (numero <=5 ) {
suma += numero;
numero++;
} console.log("La suma de los números del 1 al 5 es:", suma);
</script>
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
4. CONDICIONALES Y BUCLES
• Bucle do-while:
<script>
let numero = 1;
let suma = 0;
do {
suma += numero;
numero++;
} while (numero <= 10);
console.log('La suma de los números del 1 al 10 es:', suma);
</script>
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
5. FUNCIONES
Las funciones son bloques de código que podemos llamar múltiples veces
para realizar una tarea específica.
Para crear una función en JavaScript, utilizamos la palabra clave function,
seguida del nombre de la función, los parámetros y el cuerpo de la función.
<script>
function saludar(nombre) {
console.log("¡Hola, " + nombre + "!");
}
saludar("Juan"); // Imprime "¡Hola, Juan!"
</script>
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
6. EVENTOS
Con JavaScript, podemos manipular algunas de las etiquetas que forman
nuestra página HTML, por ejemplo, podemos cambiar el contenido, los
atributos y los estilos de los elementos.
1. Primero se debe seleccionar el elemento HTML al que se desea
agregar un evento.
2. Luego, se debe especificar el tipo de evento que se desea
detectar utilizando el método adecuado, como
addEventListener(). Este método permite especificar el tipo de
evento y la función que se llamará cuando se produzca ese
evento, como hacer clic en un botón.
3. Una vez que se ha detectado el evento, se puede realizar una
acción en respuesta a ese evento, como mostrar un mensaje o
cambiar el contenido de la página.
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
EJEMPLO 1: CAMBIAR EL COLOR DE FONDO AL HACER CLIC EN UN BOTÓN
Opción 1:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 1 de eventos en JavaScript</title>
</head>
<body>
<button id=“boton-id001">CLIC</button>
<script>
let boton = document.getElementById("boton-id001");
boton.addEventListener("click", function(){
document.body.style.backgroundColor="blue";
});
</body>
</html>
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
EJEMPLO 1: CAMBIAR EL COLOR DE FONDO AL HACER CLIC EN UN BOTÓN
Opción 2:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 1 de eventos en JavaScript</title>
</head>
<body>
<button id=“boton-id001”
onclick="document.body.style.backgroundColor=‘blue’">CLIC</button>
</body>
</html>
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
EJEMPLO 2: MOSTRAR UN MENSAJE DE ALERTA AL PASAR EL MOUSE POR
ENCIMA DE UN ELEMENTO
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 2 de eventos en JavaScript</title>
</head>
<body>
<div id="miDiv">Pasa el ratón por aquí</div>
<script>
var div = document.getElementById("miDiv");
div.addEventListener("mouseover", function() {
alert("¡Hola! Estás pasando el mouse por encima de mí.");
});
</script>
</body>
</html>
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
EJEMPLO 3: CAMBIAR EL CONTENIDO DE UN ELEMENTO AL PRESIONAR UNA
TECLA
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo 3 de eventos en JavaScript</title>
</head>
<body>
<p id="miParrafo">Presiona una tecla para cambiar el contenido de este
párrafo.</p>
<script>
let parrafo = document.getElementById("miParrafo");
document.addEventListener("keydown", function(event) {
parrafo.innerHTML = "Presionaste la tecla " + event.key;
});
</script>
</body>
</html>
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
EJEMPLO 4: CAMBIAR EL COLOR DE FONDO AL HACER CLIC EN UN BOTÓN
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de eventos en JavaScript</title>
</head>
<body>
<button id=“miBoton”>Cambia el color</button>
<script>
const btn = document.querySelector("button");
function random(number) {
return Math.floor(Math.random() * (number + 1));
}
btn.addEventListener("click", () => {
const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
document.body.style.backgroundColor = rndCol;
});
</script>
</body>
</html>
3. EDICIÓN DE PÁGINAS WEB CON JAVASCRIPT
TAREAS
Prueba todos los ejemplos que aparecen en las diapositivas. Para ello
utiliza el emulador de w3schools.
Referencias:
Manual JavaScript Oregoom.
Manual JavaScript w3schools.
Programación web con JavaScript. Computación y robótica. 3º de la ESO
