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>