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.

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