IMPORTANTE: por comodidad he puesto el código Javascript junto al HTML5, pero lo correcto sería que el código HTML5 fuera en un fichero, y el código Javascript en otro distinto, y en el archivo HTML5 en el <head> pusiéramos el siguiente código, que indica que el fichero Javascript se encuentra en un archivo llamado script.js dentro de una carpeta js.
<script type="text/javascript" src="js/script.js"></script>
Ejercicio 1. DOM.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio 1</title>
<script>
function lanzar_alerta(){
alert("JESÚS FERNÁNDEZ TOLEDO");
}
</script>
</head>
<body>
<p>
<span onclick="lanzar_alerta()">Haz Click Aquí</span>
</p>
</body>
</html>
Ejercicio 2. DOM.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio 2</title>
<script>
function lanzar_alerta(){
document.getElementById("lanzar_alerta").onclick=alert("JESÚS FERNÁNDEZ TOLEDO");
}
</script>
</head>
<body>
<p>
<span id="lanzar_alerta" onclick="lanzar_alerta()">Haz Click Aquí</span>
</p>
</body>
</html>
Ejercicio 3. DOM.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio 2</title>
<script>
function lanzar_alerta(){
document.getElementById("lanzar_alerta").style.color="red";
}
</script>
</head>
<body>
<p>
<span id="lanzar_alerta" onclick="lanzar_alerta()">Haz Click Aquí</span>
</p>
</body>
</html>
Ejercicio 4. DOM.
Colores en hexadecimal –> #rrggbb (r-red, g-green, b-blue). Por lo tanto si ponemos #0000ff, no ponemos nada de rojo, nada de verde y 100% de azul.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio 4</title>
<script>
function lanzar_alerta(){
/*rrggbb*/
document.getElementById("lanzar_alerta").style.color="#0000ff";
}
</script>
</head>
<body>
<p>
<span id="lanzar_alerta" onclick="lanzar_alerta()">Haz Click Aquí</span>
</p>
</body>
</html>
Ejercicio 5. Funciones.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio 2</title>
<script> function Calcular_Area(b,a){
alert( (b*a)/2); }
</script>
</head>
<body>
<p>
<span onclick="Calcular_Area(3,4);">Haz Click Aquí</span>
</p>
</body>
</html>
Ejercicio 6. DOM y Funciones
<h1>Introduce un número mayor a 5 </h1>
<h2> Si número >5 "Biennnn" sino "Ohhhhh"</h2>
<input type="text" id="numero">
<input type="button" value="Enviar" onclick="funcion()">
<p id="parrafo"></p>
<script>
function funcion(){
var1=document.getElementById("numero").value;
if (var1>5) document.getElementById("parrafo").innerHTML="Biennn";
else document.getElementById("parrafo").innerHTML="Ohhhh";
}
</script>
Ejercicio 7. DOM y Funciones
<h1>Introduce un número mayor a 5 </h1>
<h2> Si número >=1 y número <=10 "Biennnn" sino "Ohhhhh"</h2>
<input type="text" id="numero">
<input type="button" value="Enviar" onclick="funcion()">
<p id="parrafo"></p>
<script>
function funcion(){
var1=document.getElementById("numero").value;
if ((var1>=1)&&(var1<=10)) document.getElementById("parrafo").innerHTML="Biennn";
else document.getElementById("parrafo").innerHTML="Ohhhh";
}
</script>
Ejercicio 8. Objetos sin Clase.
<script>
//Objetos en Javascript
//Objeto 1
let objeto1=new Object();
objeto1.nombre="Jesús";
objeto1.apellidos="Fernández Toledo";
objeto1.edad=39;
function edad1(persona){
persona.edad=persona.edad+1;
}
edad1(objeto1);
document.write(objeto1.nombre);
document.write(" ");
document.write(objeto1.apellidos);
document.write(" ");
document.write(objeto1.edad);
document.write(".</hr></br>");
//Objeto 2
let objeto2={nombre:"Jesús", apellidos:"Fernández Toledo", edad:39};
function edad2(persona){
persona.edad=persona.edad+1;
}
edad2(objeto2);
document.write(objeto2.nombre);
document.write(" ");
document.write(objeto2.apellidos);
document.write(" ");
document.write(objeto2.edad);
document.write(".</hr>");
</script>
Ejercicio 9. Clases y Objetos.
<script>
//Clases en Javascript
class Persona{
constructor(nombre, apellidos, edad){
this.nombre=nombre;
this.apellidos=apellidos;
this.edad=edad;
}
Incrementa_edad(){
this.edad++;
}
Mostrar_nombre(){
return this.nombre;
}
Mostrar_apellidos(){
return this.apellidos;
}
Mostrar_edad(){
return this.edad;
}
};
let objeto=new Persona("Jesús","Fernández Toledo", 39);
objeto.Incrementa_edad();
document.write(objeto.Mostrar_nombre());
document.write(" ");
document.write(objeto.Mostrar_apellidos());
document.write(" ");
document.write(objeto.Mostrar_edad());
document.write("<hr><br>");
</script>
Ejercicio 10. Arrays. Crear array.
<script>
let provincias=new Array("Albacete", "Ciudad Real", "Cuenca", "Guadalajara", "Toledo");
for(i=0;i<provincias.length;i++){
document.write(+i+". " +provincias[i]+"</br>");
}
</script>
Ejercicio 11. Arrays – push() y pop().
push() –> Añade elementos al array.
pop() –> Quita el último elemento del array
<meta charset="UTF-8">
<script>
let provincias=new Array("Albacete", "Ciudad Real", "Cuenca", "Guadalajara", "Toledo");
provincias.push("Alicante","Castellón","Valencia"); //añade al array Alicante, Castellón, Valencia
provincias.pop(); //Quita del array el último elemento, es decir, Valencia.
for(i=0;i<provincias.length;i++){
document.write(+i+". " +provincias[i]+"</br>");
}
</script>
Ejercicio 12. Arrays – splice()
splice() –> modifica el array añadiendo/borrando/reemplazando contenido.
<meta charset="UTF-8">
<script>
let provincias=new Array("Albacete", "Valencia", "Guadalajara", "Toledo", "Castellón", "Alicante");
provincias.splice(1,0,"Ciudad Real"); //Añadimos a la posición 1 del array Ciudad Real.
provincias.splice(2,1,"Cuenca");//Reemplaza Valencia por Cuenca.
provincias.splice(5,2); //Elimina Castellón y Alicante.
for(i=0;i<provincias.length;i++){
document.write(+i+". " +provincias[i]+"</br>");
}
</script>
