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. 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 7. 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 8. 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 9. 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 10. 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>

 

Deja un comentario

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies ACEPTAR

Aviso de cookies