Ejercicios Iniciación JavaScript

Ejercicio 1. Variables

Javascript es un lenguaje NO tipado. No es necesario definir el tipo de dato que va a contener la variable, es decir, no hace falta indicar si el contenido de la variable es de tipo entero, decimal, texto, …

  • var es variable global.
  • let es variable local.
<script>
var a=1;
let pepito=2;
var b="Hola";
alert (a);
alert(pepito);
alert (b);
</script>

En JavaScript NO es necesario declarar las variables, pero es recomendable para nuestra mejor comprensión, es decir, el código podría quedar así.

<script>
a=1;
pepito=2;
b="Hola";
alert (a);
alert(pepito);
alert (b);
</script>

Ejercicio 2. Bucle For

<script>
// en el bucle for no es necesario declarar i como var
for(i=0;i<10;i++) //i=i+1  es lo mismo que i++
{
    alert(i);
}
</script>

Si en el ejemplo anterior queremos llegar a 10, se escribiría el siguiente código.

<script>
for(i=0;i<11;i++) //i=i+1  es lo mismo que i++
{
    alert(i);
}
</script>

O bien,

<script>
for(i=0;i<=10;i++) //i=i+1  es lo mismo que i++
{
    alert(i);
}
</script>

Ejercicio 3. prompt, document.write

<script>
var i;
i=prompt("Introduce un número");
document.write("El número que has introducido es: "+i);
</script>

Ejercicio 4. Sumar 2 números enteros.

<script>
//Hay que declarar siempre las variables
var num1, num2, suma;
num1=prompt("Introduce el número 1: ");
num2=prompt("Introduce el número 2: ");
suma=num1+num2;
document.write("La suma de número 1 y número 2 es: "+suma);
</script>

Para que no lo muestre como una cadena de caracteres, se pone ParseInt, y así forzamos a que sean 2 números enteros.

<script>
//Hay que declarar siempre las variables
var num1, num2, suma;

num1=parseInt(prompt("Introduce el número 1: "));
num2=parseInt(prompt("Introduce el número 2: "));
suma=num1+num2;
document.write("La suma de número 1 y número 2 es: "+suma);
</script>

Ejercicio 5. onmouseover

Muestra un cuadro de alerta con un mensaje al poner el ratón encima de un vínculo.

<meta charset="UTF-8">
<a href="#" onmouseover="javascript:alert('Mensaje a mostrar')">Enlace</a>

Ejercicio 6. onclick

Muestra un mensaje de alerta al hacer clic sobre un vínculo, antes de enviar al usuario al destino.

<meta charset="UTF-8">
<a href="https://tu-sitio.com" onclick="javascript:alert('Mensaje a mostrar');">Enlace</a>

Ejercicio 7. DOM (getElementById)

Aumenta el tamaño del texto del vínculo al poner el ratón encima, al quitarlo restaura el texto a su tamaño original.

<div id="vinc"><a href="https://tu-sitio.com" 
onmouseover="javascript: void(document.getElementById('vinc').style.fontSize='3em')" 
onmouseout="javascript: void(document.getElementById('vinc').style.fontSize='1em')">
Enlace</a></div>

Si quieres aprender más acerca del DOM, lee el siguiente artículo, https://jesusfernandeztoledo.com/ejercicios-resueltos-iniciacion-javascript/

Ejercicio 8. DOM (Formularios)

formulario

Realiza el siguiente formulario, si introducimos un valor inferior a 1 y superior a 10 mostrar el texto “Entrada No válida”, en cambio, si introducimos un número entre 1 y 10 mostrar “Entrada válida”

 formulario_entada_no_valida

C:\Users\Administrador\Desktop\formulario_entrada_valida.html.png

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validación</h2>

<p>Por favor introduce un número entre 1 y 10:</p>

<input id="numero">

<button type="button" onclick="Funcion()">Submit</button>

<p id="parrafo"></p>

<script>
function Funcion() {
  // Obtiene el valor del campo con id="numero"
  let x = document.getElementById("numero").value;
  // Si x no es un número(NaN) o es menor de 1 o mayor de 10
  let text;
  if (isNaN(x) || x < 1 || x > 10) {
    text = "Entrada NO válida";
  } else {
    text = "Entrada válida";
  }
  document.getElementById("parrafo").innerHTML = text;
}
</script>

</body>
</html>

 

Ejercicio 9. confirm

Mensaje de confirmación antes de enviar el usuario a una página.

<a href="javascript:if (confirm('Quieres entrar a Marca?')) {parent.location='https://marca.com';};">Enlace</a>

Ejercicio 10. random

Usted es el visitante 42019 de esta página.

<meta charset="UTF-8">
<script>
var ran
ran = Math.round(Math.random()*50000)
document.write("Usted es el visitante " + ran + " de esta página.")
</script>

Ejercicio 11. Botón para imprimir página

boton_imprimir

<meta charset="UTF-8">
<input type="button" value="Imprime esta página" onclick="window.print()">

Ejercicio 12. Deshabilitar el uso del clic derecho por completo.

<script>
document.oncontextmenu = function(){return false}
</script>

Ejercicio 13. Impedir la selección y la copia de texto en una página.

<script>
window.onload = function()
{document.onmousedown = function(){return false;}}
</script>

hola

Ejercicio 14. Mostrar fecha.

fecha

<style>
#fechahoy{
    font-size:1.2em;
    color:green;
    margin:12px;
}
</style>

<div id="fechahoy"></div>		
<script>
var d=new Date();
var month=new Array(12);
month[0]='Enero';
month[1]='Febrero';
month[2]='Marzo';
month[3]='Abril';
month[4]='Mayo';
month[5]='Junio';
month[6]='Julio';
month[7]='Agosto';
month[8]='Septiembre';
month[9]='Octubre';
month[10]='Noviembre';
month[11]='Diciembre';
var todaysDate=+d.getDate()+' de '+month[d.getUTCMonth()]+' del '+d.getUTCFullYear();
document.getElementById('fechahoy').innerHTML='Hoy es: '+todaysDate;
</script>

Ejercicio 15. Audio

<audio id="audio" width="700" height="350">  
    <source src="La_botella.mp3">   
 </audio> 
<input type="button" id="boton" value="Cuidado"> 

<script> 
function iniciar() { 
   var boton=document.getElementById('boton'); 
   boton.addEventListener('click', presionar, false); 
} 
function presionar() { 
   var audio=document.getElementById('audio'); 
   audio.play(); 
} 
window.addEventListener('load', iniciar, false); 
</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