Ejercicios Resueltos Iniciación Javascript |

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

dom_funciones_javascript

<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

dom_funciones_javascript

<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>