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)
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”
<!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
<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>