JAVASCRIPT TUTORIAL CURSO BASICO
¿Qué es JavaScript?
Javascript es un lenguaje de programación cuyas instrucciones se ejecutan en cualquier navegador, es por eso que para probar y realizar nuestros programas solo necesitamos un editor de textos (notepad por ejemplo) y un navegador (Explorer, Chrome, etc.).
No necesita ser descargado ni tampoco instalado en nuestro ordenador.
Todos los navegadores lo interpretan.
En el editor de textos escribiremos las instrucciones y posteriormente, para probar lo que hace nuestro programa, lo haremos o veremos en un navegador mediante nuestra página web.
Nuestra página web también la escribiremos con el editor de textos.
JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas, texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario, operaciones matemáticas en la web, formularios, preguntas al usuario, etc.
Pero empecemos...
Lo primero que necesitaremos es crear nuestra página web que contendrá nuestro javascript.
Nosotros vamos a crear una página web muy simple, la más simple, ya que solo la usaremos para probar nuestros programas en JavaScript, pero si no tienes conocimientos de HTML y quieres ampliar los que aquí damos, te recomendamos visites el siguiente enlace: HTML Desde Cero.
Creamos Nuestra Web y Nuestro JavaScript
Lo primero que tenemos que hacer es crear nuestra web y decirle que cuando la abrimos con el navegador vaya a buscar el programa en Javascript a la ruta donde lo tengamos y lo ejecute en la web.
Recomendamos para hacer prácticas guardar el archivo de la pagina web y el del código de JavaScript en la misma carpeta, así no tendremos problemas para que la web encuentre el archivo JavaScript.
El archivo de la página hay que guardarlo con la extensión .html (extensión de las webs) y el archivo con el código JavaScript de nuestro programa con la extensión .js
Vamos a crear nuestra web básica. Abre notepad y escribe:
<html>
<head>
<title>Esta es mi página web sin Javascript</title>
</head>
<body>
"Hola Mundo"
</body>
</html>
Guardalo con el nombre web.html
Explicación del código web:
<html> </html> Etiqueta de apertura y cierra donde decimos que es un archivo escrito en html, código usado en las páginas web.
Todo lo que hay entre estas dos etiquetas es la página web. Ahora el navegador lo interpreta como una página web.
<head> </head> Etiquetas de apertura y cierra de la cabecera.
Aqui se pone el título (<title> </title>) de la web que aparecerá en la pestaña del navegador y algunas cosas más.
<body> </body> Entre estas dos etiquetas se pone el contenido de la página web. En nuestro caso el texto "Hola Mundo" solamente.
Bien ahora crea, si no la tienes ya, una carpeta con el nombre JavaScript y Guarda dentro el archivo creado con el nombre web.html. Recuerda esta es la web, no el javascript.
OJO con algunos editores de texto. A veces la extensión html no la guarda como extensión, solo como parte del nombre del archivo.
Fíjate en el tipo de archivo antes de guardar, si tienes archivo de texto te guardará el archivo así: web.html.txt.
Lo que quiere decir que no es un archivo con extensión html, sino de texto con extensión .txt.
Esto mismo puede pasarnor más adelante cuando guardemos nuestro archivo .js.
Repito OJO con esto, si no lo hacemos bien no conseguiremos nada.
Ahora abre el archivo (botón derecho abrir con...) con tu navegador.
Verás una web que pone "Hola Mundo". No necesitamos más. ¡Ya tenemos nuestra web sobre la que actuará nuestro programa en javascript.
Esta web no tiene JavaScript, por eso solo muestra el texto dentro de la etiqueta <body>.
Vamos a poner nuestro primer código JavaScript dentro de la web.
Introducir JavaScript dentro de la Web
Para meter código Javascript dentro de una web se puede hacer de 2 formas diferentes.
- Poniendo el código directamente entre dos etiquetas llamadas <script> y </script> (marcan el inicio y el fin del código JavaScript) y entre las etiquetas <head> y </head> del código de la página web. No es el más recomendable.
- Creando un archivo .js y crear un enlace desde la página web en html, para que vaya a leerlo cuando se visualice la página web en un navegador. Método que recomendamos.
La primera instrucción que vamos aprender es la siguiente:
alert("Esto es JavaScript"); ¿Qué hace?
Pues muy simple muestra una alerta con el texto que hay entre las comillas en el navegador.
Si usamos el primer método en nuestra web sería (modifica la página web creada antes):
<html>
<head>
<title>Esta es mi página web con Javascript Interno</title>
<script>
alert("Esto es JavaScript");
</script>
</head>
<body>
"Hola Mundo"
</body>
</html>
Ahora abre la web y verás el texto de alerta que has creado tu solito.
Si usamos el segundo método, método que usaremos a partir de ahora, primero crearemos nuestro archivo .js con la instrucción.
Abre el editor de textos y escribe:
alert("Esto es JavaScript");
Guárdalo con el nombre y la extensión nuestrojavascript.js dentro de la carpeta que creamos antes llamada JavaScript.
OJO en el archivo externo las instrucciones no van dentro de las etiquetas <script> y </script>. Solo se ponen las instrucciones separadas por ; y nada más.
Ahora vamos a decirle a nuestra web (web.html) anterior que nos lea el archivo nuestrojavascript.js que estará en la misma carpeta (los dos en el mismo sitio).
Esta es la forma de hacerlo, escribiendo dentro del head de nuestra web lo siguiente:
<script type="text/JavaScript" src="nuestrojavascript.js"></script>
Esta etiqueta es muy sencilla, primero dice que es un programa escrito en JavaScript y luego dentro de src y entre comillas, le dice donde tiene que ir a leerlo, en nuestro caso al archivo nuestrojavascript.js, que estará dentro de la misma carpeta que la web. Veamos como quedaría nuestra web:
<html>
<head>
<title>Esta es mi página web con Javascript Externo</title>
<script type="text/JavaScript" src="nuestrojavascript.js"></script>
</head>
<body>
"Hola Mundo"
</body>
</html>
Ojo está en negrita para destacarlo pero no se escribe en negrita realmente.
¿Por qué recomendamos esta método? Vamos a verlo con ejemplo muy sencillo.
Imagina que tienes un sitio web con 1.000 páginas web.
Incrusta en cada página el código <script type="text/JavaScript" src="nuestrojavascript.js"></script> y posteriormente creo al archivo .js. Pasado un tiempo quieres añadir más JavaScript en tus páginas.
Solo tendrás que ampliar el archivo .js y automáticamente el nuevo JavaScript aparecerá en todas las páginas.
Si uso el método de escribir directamente el código en la página tendría que ir copiando de una en una en cada web el nuevo código, es decir 1.000 veces.
Nuevo código...otras 1.000 veces a copiarlo y así sucesivamente.
Definitivamente mucho mejor el método de archivo externo.
Escribamos en Nuestra Web Con JavaScript un texto. Copia esto en el archivo nuestrojavascript.js
document.write ("texto");
documento.write le dice que escriba lo que pongamos entre paréntesis en la web.
Si tenemos un texto muy largo y queremos dividirlo en dos líneas dependerá si es para una alerta o para un texto en la web. Veamos como se hace para cada caso:
document.write("Cabecera del <br> documento"); ==> salto de línea para textos dentro de la web.
alert('Esto que lo escriba en la 1ª línea, \n y esto en la 2ª') ; ==> salto de línea para textos en las alertas.
Las Variables
Una variable es como unacaja donde metemoscosas (datos). Estos datoslos podemos ir cambiando, ahora meto un 3, ahora lo quito y meto un 5.
Una variabletiene un nombre, que puede ser una letra, una palabra, varias palabras unidas por el guión bajo o varias palabras sin separar pero la primera letra de cada palabra en mayúsculas ejemplo.: VidasPerdidas, vidaperdidas, vidas_perdidas.Ojolas mayúsculas y minúsculas son muy importantes en las variables, no es la misma variablenumeroqueNumero, son dos diferentes.OJOtampoco se pueden poner acentos en el nombre de las variables.
Las variables tambiéntienen un valorque eslo que hay dentro de ella(en la caja)en ese momentoy quepuede ir variandosegún se vaya desarrollando el programa, por eso se llama variable.
Una variable dependiendo desu valor puede sernumérica, si solo puede tener un valor numérico,de texto, si solo puede contener texto (letra, palabra o frase (string).
En lasvariables de texto, su valor (el texto), debe irentre comillas, para diferenciar que el texto es texto y no es el nombre de otra variable. Por ejemplos vidas = "Cinco" o vidas = "5". En los dos casos el valor es un texto, nunca el valor de 5.
Las numéricas no llevan comillas en su valor. Por ejemplo: vidas = 5. En este caso su valor si que es el número 5.
Hay otrasvariablesque se llamanbooleanasque solo pueden tener dos valores true o false. Normalmente true se puede sustituir por el valor 1 y false por el 0.
Veamos como definimos o declaramos una variable en JavaScript. Para declarar una variable siempre se empieza poniendo la palabra var y seguido el nombre de la variable. Seguidamente ponemos un igual y detrás del igual el valor de la variable.
Veamos algunos ejemplos:
var edad=3;//la variable edad la declaramos como una variable numérica. Fíjate que esto en negrita es un comentario, va precedido de // y no hace nada, solo nos sirve de ayuda cuando revisemos el programa.
var texto= "Tengo 14 años"; //fíjate que va entre comillas, es decir la declaramos como una variable de texto
var textoNumero= Edad + 2 ; //su valor es el valor de la variable Edad (numérica) +2; en este caso sería = 5 (3+2).
var booleana = true; en este caso sería de valor 1.
¿Te has dado cuenta que hemos puesto un punto y coma (;) al acabar de definir cada variable?. En programaciónsiempre que se acaba una instrucción o grupo de instrucciones se debe poner ";"para decir al programa que pasamos a otra instrucción diferente. Pero sigamos con las variables.
OJO una vez declarada la variable, normalmente al principio del programa o la primera ve que la escribamos, a partir de ese momento cuando queramos llamar a la variable para cualquier cosa, por ejemplo cambiar su valor, ya no necesitaremos volver a poner la palabra var, solo el nombre de la variable. Conclusión: var solo se utiliza una vez para declarar la variable, es decir para decirle al programa, a partir de ahora esto es una variable numérica, de texto, etc.
Imagina que quieres cambiar el valor de la variable texto anterior por otro valor. Solo pondríamos los siguiente:
texto = "Ahora tengo 15 años";
A partir de ahora en el programa su valor será este, y fíjate que no pusimos var delante.
¿Preparado para seguir programando?
Abrimos nuestro archivo nuestrojavascript.js, borramos todo lo que tengamos y ponemos lo siguiente:
var Edad= "Tengo 14 años"; //fíjate que va entre comillas, la declaramos como una variable de texto y Ahora que nos escriba su valor.
document.write (Edad);
Como ves en el resultado no aparece el comentario que pusimos detrás de // . El código nos da como resultado escrito el valor de la variable de texto Edad. OJO el nombre de las variables, aunque sean de texto no van entre comillas.
Cambiemos el valor de la variable Edad por otro texto. ¿Que pasaría en el siguiente programa?
var Edad= "Tengo 14 años";
Edad = "Ahora Tengo 15 años";
document.write (Edad);
Pues el resultado será el último valor de la variable Edad. Fíjate que Edad solo la declaramos con var una vez al principio.
Para seguir borra del archivo web.html el texto "Hola Mundo" para que no aparezca más y no nos moleste. Ahora solo queremos ver lo que programemos en javascript.
¿Cómo concateno (junto) dos variables?
La forma de obtener el resultado de dos variables de texto sería:
var Edad= "Tengo 14 años";
var Pelo = "y tengo el pelo rubio";
document.write (Edad + Pelo);
¿Fácil NO?
Ves que solo necesitamos poner el símbolo +. ¿Te diste cuenta que nos junta el final de la primera frase con el principio de la segunda? La solución es sencilla, pon un espacio en blanco al principio de la segunda frase dentro de las comillas.
var Edad= "Tengo 14 años";
var Pelo = " y tengo el pelo rubio";
document.write (Edad + Pelo);
Ahora esta perfecto.
Trabajemos un poco con las numéricas. Escribe esto en tu archivo JavaScript:
var x= 14;
var y = 3;
document.write (x + y);
Como son numéricas nos suma el valor de cada una de las variables. Ahora mezclemos todo un poco:
var x= 14;
var Edad= "Tengo " + x + " años";
document.write (Edad);
He construido un frase con dos variables, una numérica y otra de texto. Las frases en programación se llaman String.
Recuerda x no va entre comillas por que es una variable, no es un texto. Para separar las palabras en el texto y que nos nos queden todas juntas, solo es necesario que dejes un espacio en blanco entre el + y las dos palabras.
Volvamos a la suma anterior. Me gustaría que los números de la suma no sean fijos, quiero que el usuario introduzca dos números cualquiera y el programa me los sume.
Lo primero que necesitamos es que aparezca una ventana diciéndonos que introduzcamos el primer número y otra para el segundo.
Para crear una ventana para introducir texto o números se hace así poniendo:
prompt("Texto de la Ventana"); Esto crea una ventana para introducir texto o número y con dos botones "Aceptar" y "Cancelar"·
Si solo ponemos eso nos aparecerá la ventana, introduciremos el texto o el número y no hará nada. Tenemos que decirle al programa que lo que introduzcamos en el cajetín de la ventana es el valor de nuestra variable.
var nombre = prompt("Dime tu nombre");
document.write( nombre );
Ahora si, le hemos dicho que el valor de la variable nombre es lo que aparezca en la ventana. Luego que nos lo escriba.
Si quisiéramos ahora hacer la suma de dos números de esta forma:
var x = prompt("Dime un número");
var y = prompt("Dime otro");
var suma = x + y;
var resultado = "La suma de los dos número es " + suma;
document.write(resultado);
Si hacemos este programa y vemos el resultado, tenemos un problema.
Como las variable x e y no las hemos declarado ni como numéricas ni como de texto, el recogerlas del cajetín generado con prompt no sabría si es número o texto (recuerda que 5 puede ser un número o un texto). En este caso no sabría si sumar o concatenar los dos valores.
Por defecto JavaScript considera lo que pongamos dentro del cajetín como texto, por lo tanto con el programa anterior salen los dos números concatenados (juntos), pero no sumados. Por ejemplo si pones 3 y luego 4 el resultado será 34, no 7. Si queremos que los sume le tendremos que decir que vamos a introducir números, o que la variable es numérica, poniendo la palabra parseIn delante del prompt. Fíjate como quería el programa que suma números definitivo:
var x = parseInt(prompt("Dime un número"));
var y = parseInt(prompt("Dime otro"));
var suma = x + y;
var resultado = ("La suma de los dos número es " + suma);
document.write(resultado);
Hemos puesto parseIn antes del prompt, y con eso le decimos que introduciremos números, a partir de aquí, ya los tratará como números y los sumará en lugar de unirlos.
Otra opcíon sería declarar las variables con un número cualquiera antes del prompt.
Igual que sumamos podemos hacer muchas más operaciones matemáticas.
Operadores Matemáticos con JavaScript
+ para Suma
- para Resta
* para multiplicar (asterisco)
/ para la división
% Nos da como resultado el resto de la división entre dos números. por ejemplo 10 % 3 resultado será 1, el resto de la división.
Math.sqrt(x); calcula la raiz del número o de la variable x.
> Mayor que
< Menor que
>= Mayor o igual
<= Menor o igual
== Igual a; OJO no es lo mismo una igualdad de una ecuación que esta igualdad. Esta igualdad es para comparar si dos cosas son iguales, por ejemplo dos textos, dos números, etc.
Ejercicios:
- Intenta hacer una calculadora que sea capaz de multiplicar dos o tres números.
- Haz un programa que calcule la raiz cuadrada de un número dado.
- Crea un programa que nos muestre el resultado del área de un círculo sabiendo su radio. Recuerda el área de un circulo es 3.14159*radio.
- Realiza un programa para calcular el IVA de un producto para una tienda. Nos preguntará cuanto cuesta el producto sin IVA. Si introducimos el precio sin iva nos tiene que dar como resultado el precio del producto con el IVA. ¿Facil NO?.
Números Aleatorios Con JavaScript
Math.random() Genera un número aleatorio entre 0 y 1. Podría ser el 0, el 1, el 0.23, el 0.53....En JavaScript los decimales se escriben con punto y no con coma.
Si queremos generar un número aleatorio, por ejemplo entre 0 y 10 deberemos multiplicar el resultado del random por 10 de la siguiente forma:
Math.random()*10;
El problema sería que nos daría un número aleatorio entre 0 y 10 pero con decimales. ¿Cómo solucionarlo si queremos solo números enteros? Pues muy sencillo, diciéndole que que queremos redondear el número que nos salga. Eso lo hace la orden el Math.round. Nos quedaría así:
var aleatorio = Math.round(Math.random()*10); //Variable cuyo valor es un número entero aleatorio entre 0 y 10.
Ejercicio:
- Crea un programa que nos escriba un número aleatorio entre 0 y 3 con decimales.
Con número enteros sería este:
var aleatorio = Math.round(Math.random()*3);
var resultado = ("El número aleatorio es " + aleatorio);
document.write(resultado);
Refresca la página web y verás como cada vez sale un número diferente.
La sentencia IF
If es una condicional que significa literalmente SI....En definitiva es para formar una estructura para tomar decisiones o también llamada Selectiva. Realmente lo que hace es lo siguiente:
SI (se cumple una cosa) Entonces (se hace esto).
En Javascript se escribe de la siguiente forma:
if (expresión) {acciones a realizar en caso positivo}
Si se cumple la expresión entre paréntesis, por ejemplo que x < 10; entonces el programa hace lo que pongamos entre los corchetes.
Veamos un ejemplo:
var edad = parseInt(prompt("Dime tu edad"));
if (edad > 18) {document.write("Eres mayor de edad")}
Le decimos que salga una ventana para que introduzcas tu edad, Si tu edad es mayor de 18 saldrá la frase "Eres mayor de edad" pero.... ¿Qué pasa si ponemos una edad de 14?. Tal y como está el programa no pasaría nada, por eso una expresión muy usada con IF es ELSE.
if (expresión) {acciones a realizar en caso positivo }
else {acciones a realizar en caso negativo}
Poniendo else podemos poner entre corchetes lo que pasaría si no se cumple la condición. Sigamos con el ejemplo anterior y vamos a mejorarlo:
var edad = parseInt(prompt("Dime tu edad"));
if (edad > 18) {document.write("Eres mayor de edad")}
else {document.write("Eres menor de edad")};
Ahora si, tenemos un programa que realiza una cosa en función de como sea lo que introduzcamos, tanto para mayores, como para menores de edad.
Ejercicios:
- Crea un programa que introduzcamos 2 números y el programa nos diga cual es el mayor de los dos.
- Crea un programa que nos calcule la raiz de un número. OJO solo los número mayores de 0 tiene raiz cuadrada, por lo tanto si el usuario introduce un número menor que 0 tenemos que decirle que ese número no tiene raiz antes de ejecutar la raiz del número.
Es muy probable que tengamos la necesidad de incluir en nuestros programas alternativas con muchas opciones posibles (varias IF). Veamos un ejemplo:
Creamos la variableOpciones = un valor a elegir, por ejemplo desde el teclado o desde una ventana que marque el usuario;
if (variableOpciones=0) {lo que corresponda};
if (variableOpciones=1) {lo que corresponda};
if (variableOpciones=2) {lo que corresponda};
Podemos poner tantas if como queramos.
Ejercicio:
- Crea un juego sorpresa tipo tómbola. El usuario tendrá elegir entre los números 0, 1, 2 y 3. Dependiendo el número que elija le tocará una cosa u otra. simplemente escribe lo que le toca en función del número elegido.
También existe la posibilidad de que deban de cumplirse dos condiciones a la vez:
if (condición1 && condición2) {Se cumple esto}
También con else:
if (condición1 && condición2) {Se cumple esto} else {se cumple esto otro}
Los símbolos && significan "y", es decir si se cumple la condición1 y la condición2 a la vez (las dos).
Otro caso seríasi se cumple una cualquiera de las dos condiciones:
if (condición1 | condición2) {Se cumple esto}
Como ves es el símbolo | (barra recta vertical del teclado = AltGr + 1)
Ahora que conocemos la condicional vamos a ver una instrucción nueva, se llama confirm y es similar a alert, la diferencia es que en la ventana de alerta saldrán dos botones en lugar de uno solo. Este tipo de ventanas se llaman "ventanas de confirmación". Un botón OK o Aceptar para confirmar el mensaje y otro para Cancelar si no se está de acuerdo con la petición expresada.
Escribe esto en el archivo javascript:
confirm ("Acepta o Cancela");
Ves que salen los dos botones. Lógicamente tendremos que decirle al programa que hacer en un caso o en otro. Para eso tenemos las condicionales. Veamos un ejemplo:
if (confirm ("Acepta o Cancela"))
{document.write("Aceptaste")}
else
{document.write("Cancelaste")}
La primera opción es lo que hará el programa si pulsas el botón aceptar y la segunda su pulsas cancelar.
Esta instrucción window.open("direccion URL"); sirve para llevarte a una página web que será la que pongamos en "dirección URL". Mira el siguiente programa:
if (confirm ("¿Quieres ir a la Página de Tecnologia?"))
{window.open("https://www.areatecnologia.com")}
else
{alert("Esta bien nos quedamos aqui")}
A veces los navegadores bloquean la opción de llevarte a otro sito (son los llamados pop-ups). Si no te funciona desbloquealos.
¿Estas preparado para crear tu primer juego con JavaScript?.
- Crea un programa que sea un juego de 10 preguntas con respuestas cortas (una palabra o un número). El juego debe tener un marcador donde veamos la puntuación, si se falla una pregunta se restan puntos, si se acierta se suman.
Ahora uno un poco más dificil que iremos explicando poco a poco.
Intenta hacer un juego en el que el usuario tenga que adivinar un número entre 0 y 5 elegido por el programa (aleatorio).
Yo te doy la solución, pero primero intenta hacerlo por ti mismo.
Ayuda: Piensa que primero tenemos que elegir el número aleatorio, después le preguntamos que introduzca el número, y por último tenemos que decirle si acertó o no mediante IF.
Solución al juego básico:
var aleatorio = Math.round(Math.random()*5);
var numeroElegido = parseInt(prompt("¿Qué Número Es?"));
if (aleatorio == numeroElegido) {document.write("¡¡¡Eres un Fenómeno Acertaste!!")}
else {document.write("Has Fallado")};
OJO recuerda que cada vez que refresques la página el ordenador elegirá un número distinto.
Vamos a mejorar nuestro juego. Queremos darle 4 oportunidades de acertar el número al jugador. Tendremos que decirle que si no acierta vuelva a preguntarnos, pero ojo que el número elegido o random sea el mismo las 4 veces.
Necesitamos repetir "var numeroElegido = parseInt(prompt("¿Qué Número Es?"));" cuatro veces en caso de que no acierte ninguna vez, es decir necesitamos crear una estructura repetitiva. Veamos como se hace.
Estructuras Repetitivas en JavaScript
Una estructura repetitiva permite ejecutar una instrucción o un conjunto de instrucciones un número de veces determinado. En programación se llaman "Bucles".
Primero empecemos por algo sencillo. Queremos que se repita una frase varias veces. Para eso creamos un bucle. Fíjate en la siguiente estructura, que se utiliza siempre para bucles, y luego lo explicamos:
var i; i=1; while (i<=5)
{
document.write("Esto Se Repite");
i=i+1;
}
Veamos la primera línea. En esta línea le decimos que declaramos la variable i; y luego le decimos que su valor inicial es 1. A continuación la decimos que mientras (while) la variable i tenga un valor menor o igual a 5 se haga lo que hay dentro de los corchetes document.write("Esto Se Repite");.
La última línea dentro de los corchetes (i=i+1;) es para decirle que al llegar el programa a esa línea aumente en 1 el valor de i. Es decir si "i" parte de un valor 1, escribirá la frase la primera vez porque se cumple que i<=5.
Al llegar al i=i+1; cambia el valor de i ya que le suma 1 al valor que tenía y pasará a ser de 2 (i = i +1). Ahora el programa vuelve al principio y vuelve a preguntarse ¿Se cumple la condición i<=5? Si se cumple, por lo tanto se volverá a repetir el ciclo (el bucle), pero ojo ahora el valor de i será 2. Escribe de nuevo la frase y el valor de i pasará a ser 3. ¿Se cumple la condición? Si pues otra vez se repetirá el bucle.
Así hasta que i valga 5, en ese caso deja de cumplirse la condición y el programa saldrá del bucle para hacer lo que tengamos a continuación, es decir, en nuestro caso nada.
Normalmente la variable de los bucles de repetición se llaman "i".
Bueno, hemos conseguido repetir algo varias veces. Ahora ya sabemos crear un bucle.
Creemos un programa que nos escriba los números del 1 al 100. Se puede llamar contador de números.
var x = 1;
var i; i=1; while (i<=100)
{
document.write(x);
x = x+1
i=i+1;
}
Fíjate que el valor x lo ponemos fuera del bucle para que su valor inicial sea 1 y luego dentro del bucle vaya cambiando.
Queda un poco feo por que nos escribe los valores todos seguidos uno detrás de otro. Para mejorarlo solo tenemos que decirle que nos escriba cada valor en una fila. ¿Te acuerdas? Hay poner <br>
var x = 1;
var i; i=1; while (i<=100)
{
document.write(x );
document.write('<br>'); //crea un salto de línea.
x = x+1
i=i+1;
}
¿Serías capaz de escribir un programa para una cuenta atrás, por ejemplo de 10 hasta 0.?
Ya estamos preparados para seguir con nuestro juego de adivinar un número con 4 posibilidades, recuerda necesitábamos repetir 4 veces que el usuario teclee un número. ¿Lo hacemos? Este era el programa que teníamos anteriormente:
var aleatorio = Math.round(Math.random()*5);
var numeroElegido = parseInt(prompt("¿Qué Número Es?"));
if (aleatorio == numeroElegido) {document.write("¡¡¡Eres un Fenómeno Acertaste!!")}
else {document.write("Has Fallado")};
Ahora vamos a mejorarlo con el bucle:
var numeroElegido = parseInt(prompt("¿Qué Número Es?"));
if (aleatorio == numeroElegido) {document.write("¡¡¡Eres un Fenómeno Acertaste!!")}
else {document.write("Has Fallado")};
var aleatorio = Math.round(Math.random()*5);
var i; i=1; while (i<=4)
{
var numeroElegido = parseInt(prompt("¿Qué Número Es?"));
if (aleatorio == numeroElegido) {document.write("¡¡¡Eres un Fenómeno Acertaste!!" )}
else {document.write("Has Fallado")};
i=i+1;
}
Pero...¡¡¡Esto es un Churro de Programa!!!! Pues si jajajaj. El problema es que repite 4 veces que hemos fallado o hemos acertado. ¿Lo mejoramos? Es muy sencillo, la primera mejora será decirle que si acertamos no nos siga preguntando más. Solo tenemos que decirle al programa que si acierta le de un valor a i mayor de 4 para que salga del bucle y no nos pregunte más.
var aleatorio = Math.round(Math.random()*5);
var i; i=1; while (i<=4)
{
var numeroElegido = parseInt(prompt("¿Qué Número Es?"));
if (aleatorio == numeroElegido) {document.write("¡¡¡Eres un Fenómeno Acertaste!!" )}
else {document.write("Has Fallado")};
if (aleatorio == numeroElegido) {i = 5}
i=i+1;
}
Primera parte solucionada. Pero si fallamos se sigue repitiendo la frase "Has Fallado". Una posible solución es poner cada frase de fallo en un fila diferente con <br>:
var aleatorio = Math.round(Math.random()*5);
var i; i=1; while (i<=4)
{
var numeroElegido = parseInt(prompt("¿Qué Número Es?"));
if (aleatorio == numeroElegido) {document.write("¡¡¡Eres un Fenómeno Acertaste!!" )}
else {document.write("Has Fallado" + "<br>")};
if (aleatorio == numeroElegido) {i = 5};
i=i+1;
}
Al cuarto fallo el programa se para. Sería bueno que a la cuarta vez saliera una frase que dijera "Ya no tienes más Intentos". ¿Te atreves a intentarlo por ti mismo? Necesitamos un operador que compruebe si algo es desigual, Igual es ==, pero desigual es !=.
Aquí tienes la solución total y correcta:
var z = 0
var aleatorio = Math.round(Math.random()*1);
var i; i=1; while (i<=4)
{
var numeroElegido = parseInt(prompt("¿Qué Número Es?"));
if (aleatorio == numeroElegido) {document.write("¡¡¡Eres un Fenómeno Acertaste!!" )}
else {document.write("Has Fallado" + "<br>")};
if (aleatorio == numeroElegido) {i = 5};
if (aleatorio != numeroElegido) { z = z + 1};
if (z == 4) {document.write("¡¡¡Volviste a fallar y ya no tienes más intentos!!" )};
i=i+1;
}
Analiza la variable z que hemos introducido y entiendo lo que hace. ¡¡¡Ya tenemos nuestro juego limpio y bonito!!!.
Botones en Javascript
Podemos introducir botones que realicen alguna cosa, pero OJO los botones tenemos que ponerlos en el código de nuestra web en html y en el sitio que queramos que aparezcan. Luego podremos decir que hacen desde el archivo JavaScript.
Un botón se crea de la siguiente manera:
<input type="button" value="texto dentro del boton" name="boton1" onclick="lo que hace al hacer click sobre el boton" />
Desglosemos cada parte:
input type="button" Nos crea un boton
value="texto dentro del boton" Para el texto que aparecerá dentro del boton
name="boton1" el nombre que identifica a nuestro boton. Si tenemos más de una podemos llamarles boton1, boton2, etc.
onclick="lo que hace al hacer click sobre el boton" Pues eso, lo que hará cuando lo pulsemos.
Borra todo lo que tengas en los archivos javascript.js y web.html. Abre el archivo web.html y escribe dentro del <body> (cuerpo)
<input type="button" value="Click Aquí" name="boton1" onclick="alert('Hola ¿Que tal?')"" />
Ahora guarda y abre la página a ver que pasa.
Si queremos que un boton realice alguna parte del programa que tengamos en el archivo JavaScript, lo que queremos que haga debemos escribirlo en JavaScript dentro de una función. Tranquilo, no te asustes, es muy fácil.
En el onclick de un boton se suele poner o hacer referencia para que vaya a una función del archivo javascript, por eso el siguiente paso es aprender las funciones.
Funciones en JavaScript
Una función es un conjunto de instrucciones que se agrupan para realizar una tarea concreta y que se pueden reutilizar fácilmente.
Hay veces que dentro de un programa varias instrucciones se repiten muchas veces, sobre en todo en programas muy largos. Para no tener que repetirlas una y otra vez las agrupamos dentro de una función y cada vez que queramos activarlas solo tendremos que "llamar" o "invocar" a la función donde estén.
Resumiendo, una función es un trozo de código que hace algo concreto y que podemos utilizarlo en cualquier parte de nuestro programa y las veces que queramos.
Veamos como se crea una función.
function nombre_funcion() {
instrucciones de la función
}
El nombre de la función se utiliza para llamar o invocar a esa función cuando queramos que se ejecute. El concepto es el mismo que con las variables, a las que se les asigna un nombre único para poder utilizarlas dentro del código. Después del nombre de la función, se incluyen dos paréntesis cuyo significado se detalla más adelante. Por último, los símbolos { } se utilizan para encerrar todas las instrucciones que pertenecen a la función (de forma similar a como se encierran las instrucciones en las estructuras if ).
Veamos un ejemplo:
var numero1 = 5;
var numero2= 9;
function suma_y_muestra() {
resultado = numero1 + numero2;
alert("El resultado es " + resultado);
}
Para "llamar" o "invocar" a la función dentro del programa solo tendremos que escribir su nombre de la siguiente forma:
suma_y_muestra();
Fijate que hemos declarado las variables que usará la función antes de la función. También podríamos ponerlas después de la función, pero siempre antes de llamarla.
Cada vez que el programa lea suma_y_muestra(); realizará la función. Normalmente las funciones que vamos a utilizar en el programa se definen al principio del programa, para eso debemos tener muy claro qué funciones necesitaremos.
¿Recuerdas los botones que decíamos que dentro de onclick se especificaba la función que queríamos que realizara al apretarlo? Vamos hacerlo.
Abre el archivo nuestrojavascript.js y escribe la función siguiente:
function mifuncion() {document.write("¡¡¡Estupendo el Boton Hace lo que Queremos!!" )}
Ahora vamos a decirle al boton, en la web en html, que lea esa función cuando apretemos el boton (onclick). Escribe lo siguiente en el archivo web.html:
<input type="button" value="Click Aquí" name="boton1" onclick="mifuncion()"" />
Abre el archivo web.html y aprieta el botón creado. ¿Esta chulo NO?.
Ahora tenemos controlado lo que queremos que haga un botón, dentro del html, mediante JavaScript. Solo tenemos que escribir lo que queremos que haga el botón dentro de nuestra función en JavaScript.
Sigamos con las funciones. La mayoría de las veces si las variables solo se usan y existen dentro de la función se ponen dentro de los paréntesis (que hasta ahora no usamos). Esto se llama poner "argumentos" a la función. Las variables (pueden ser constantes) que necesitan las funciones para trabajar se llaman "los argumentos de la funcion". OJO estas varibales solo existen dentro de la función y no las podremos utilizar en otra parte del programa, por eso se llaman variables locales. Mira el ejemplo:
function sumar(x,y){
var total = x + y;
alert(total);
}
sumar(1,2);
sumar(5,7);
Primero realiza la suma dando valores x=1 e y=2 y luego hace otra suma con diferentes valores para x e y (5 y 7).
En este caso las variables no las declaramos antes de la función (ni en ningún sitio), son variables que solo contiene la función. Para cambiar el valor de las variables se hace llamando a la función y poniendo sus valores.
OJO las varibales x,y y total no se podrán utilizar en otra parte del programa, ya que sol locales.
Imagina que ponemos esto:
function sumar(x,y){
var total = x + y;
}
sumar(1,2);
var sumaNueva = total + 5;
alert(sumaNueva);
El programa NO funciona porque la variable total en sumaNueva no la reconoce, es local de la función sumar.
El problema es que muchas veces usamos funciones para realizar una operación y lo que nos interesa (solo) de la función es el resultado final, como el caso anterior, solo nos interesa el resultado de la variable total. ¿Qué podemos hacer para usar esto es otra función o en cualquier parte del programa? Usar return.
Entendiendo RETURN
return sirve para recoger un valor de una función, es decir que la función la usemos solo para recoger un resultado, sin que sea necesario abrir una ventana para que nos lo muestre ni nada parecido, solo queremos el resultado.
Veamos un ejemplo:
function cubo (x) {
alert(x * x * x);
}
cubo(3);
Esta función nos muestra el resultado del cubo de x. si ahora hacemos. En el ejemplo se nos muestra una alerta con el número 27.
Pero lo que queremos es solo recoger el resultado de x al cubo, no que nos lo muestre. Normalmente eso sucede cuando queremos ese resultado usarlo en otro sitio del programa. Pare eso hacemos:
function cubo (x) {
return(x * x * x);
}
cubo(3);
Si ejecuto el programa no saldrá nada, pero si que tenemos guardado el valor de 27 en la función. ¿Qué hacemos con él? Pues lo normal es guardarlo en una variable para usarlo después. Por ejemplo:
var resultado = cubo(3);
Ahora tenemos una variable llamada resultado cuyo valor es el cubo de 3, operación que se hace en la función. Ahora esa variable la podemos usar en cualquier otra parte del programa.
Apliquemos return en la función anterior de la suma.
function sumar(x,y){
return (x + y);
}
var primeraSuma = sumar(1,2);
var total = primeraSuma + 5
alert(total);
Fijate que ahora sí que se muestra el resultado de la suma de los 3 números. 2 de ellos salen sumados de la función sumar. Si la suma de esos dos números los hubieramos recogido en una variable dentro de la función no podríamos usarlos fuera de la función, ya que son locales, pero ahora con return si podemos. ¿Entendendido?.
Funciones Definidas Control del Tiempo en JavaScript
También tenemos funciones ya definidas por el propio lenguaje javascript, es decir que hacen algo y siempre lo mismo, que nos pueden ser muy útiles en nuestros programas. Normalmente van dentro de otra función. Veamos alguna.
La función "setTimeout" se ejecutará (o "llamará a una función) una sola vez pasados x segundos.
setTimeout("nombreFuncion()",tiempo en milisegundos); Un ejemplo:
setTimeout("reloj()",1000);
Aqui la función reloj se llamará ejecutándose pasados 1000 milisegundos (1 segundo) desde que el programa lee el setTimeout.
setTimeout("mostrarAviso()",3000);
function mostrarAviso(){
alert("Han pasado los tres segundos");
}
A los 3 segundos llamará a la función mostrarAviso, es decir a los 3 segundos saldrá un mensaje que nos dirá que pasaron 3 segundos.
Podemos poner en lugar de llamar a una función, llamar a una variable.
En un juego puede ser muy útil para especificar el tiempo que tiene el jugador para acabar el juego o realizar alguna acción.
¿Te acuerdas del juego de adivinar un número? ¿Sabrías utilizar esta función para especificar que el jugador tiene 20 segundos para adivinar el número? Inténtalo.
Esta instrucción window.open("direccion URL"); sirve para llevarte a una página web (¿Lo recuerdas?). Mira lo que hacemos.
setTimeout("iraweb()",1000);
function iraweb(){
alert("Ha pasado 1 segundo, te llevamos a la web");
window.open("https://www.areatecnologia.com");
}
Cuando pasa 1 segundo sale un aviso y al pulsar aceptar se abre una ventana nueva hacia la web especificada. Fíjate que el nombre de la función va entre comillas
La función setInterval sirve para especificar cada cuanto tiempo tiene que "llamarse" a una función, pero se llamará una y otra vez cada tiempo especificado, es decir se repite la llamada cada x tiempo. Imagina que queremos que se repita lo que hay dentro de una función cada 1000 milisegundos, ojo estará repitiendose contínuamente hasta que no especifiquemos que se pare.
setInterval("nombreFuncion()",1000);
En este caso nombreFuncion se repetiría cada 1000 milisegundos (1 segundo). El segundo parámetro (argumento) es el tiempo en milisegundos.
¿Que hace el siguiente programa?
setInterval("repetir()",1000);
function repetir () {
alert ("Ha pasado 1 segundo")
}
Siii, sale un mensaje cada segundo. Pero casa segundo vuelve a salir el mismo mensaje. Imagina que queremos que se pare el mensaje a los 3 segundos.
Con clearInterval(nombreVariable); detendremos o pararemos la función que está en marcha con setInterval. Fijate que entre paréntesis va el nombre e una variable, por eso es necesario asiganar el setInterval a una variable, para luego pararlo con clearInterval.
Como ves solo se repetirá una vez, ya que después está clearInterval. Podríamos usar un botón en la página web que al pulsarlo activara clearInterval, es decir que parese de repetir el mensaje solo cuando pulsemos el boton.
Abre el archivo web.html y escribe dentro del <body> (cuerpo)
<input type="button" value="Parar el Mensaje" name="botonParar" onclick="clearInterval(bucleRepetir)" />
En el javascript escribe:
var bucleRepetir = setInterval("repetir()",1000);
function repetir () {
alert ("Ha pasado 1 segundo");
}
Ahora siii. se repite la alerta cada segundo, pero si queremos parar que salga la alerta solo tendremos que pulsar el botón creado.
Muchas veces verás estas funciones escritas así: window.setInterval (funcion, 500); Se pueden poner con la palabra window o sin ella. Simplemente lo que le decimos al poner la palabra window delante es que es una función definida del navegador. Es igual que cuando escribiamos write de la forma document.write ("Hola"), lo que le deciamos es que usara la funcion write (escribir) dentro el documento. Si write era una función definida.
Cuadros de Texto en JavaScript
Los cuadros de texto son unos espacios en la página web donde podemos introducir texto, números o cualquier caracter. Para crearlos se hace como los botones, desde la página web en html. La instrucción es (escribela en tu archivo html):
<input type="text" size="10" name="pepe" value="">
Ves que es como un botón pero en type ponemos text para especificar que es un cuadro de texto. Value es para poner un texto inicial dentro del cuadro si queremos, en este caso vacio.
Lógicamente podremos escribir pero no hace nada más. Tendríamos que decirle que hacer con lo que el usuario introduce en el texto. Para recoger el texto de un cuadro necesitamos meter en contenido del cuadro dentro de una variable de la siguiente forma:
var contenidoCuadro = document.getElementsByName('pepe')[0].value;
Veamos las partes de la nueva instrucción:
- document es para decirle que queremos recoger algo que está dentro del documento html.
- getElementsByName es para decirle que el elemento ha recoger lo recogeremos por su nombre que lo identifica (recuerda que en los cuadros y botones los identificamos por su name). En nuestro caso el nombre del elemento que queremos recoger es pepe.
- [0] La mayoría de las veces en un documento html hay varios elementos con el mismo nombre, es por eso que tenemos que decirle de todos los que existen el lugar que ocupa el que nosotros queremos recoger. Imagina que hay 3 elementos que se llaman pepe, si ponemos [0] le decimos que queremos recoger lo que hay dentro del primer elemento pepe que encuentre. Si ponemos [1] será el segundo y así sucesivamente.
- value significa que queremos recoger el valor que tenga en ese momento ese elemento. En el caso de un cuadro de texto el valor que tiene será lo escrito dentro de él en ese momento.
Ahora que ya sabemos como recoger lo que hay dentro de un cuadro de texto solo nos queda que hacer con lo recogido. Recuerda que lo recogemos dentro de una variable, por lo tanto especificaremos que hacer con la variable, en nuestro caso. que hacer con contenidoCuadro.
Vamos hacer un ejemplo. Queremos crear un programa que podamos escribir dentro de un cuadro de texto y cuando pulsemo un boton se escriba en la página lo mismo que hay dentro del cuadro de texto. Borra todo lo que tengas en los archivos javascript.js y web.html.
En el archivo javascript.js escribe:
function escribe(){
var rellena = document.getElementsByName('cuadro1')[0].value;
document.write(rellena);
}
En el web.html escribe:
<html>
<head>
<title>Cuadro de Texto</title>
<script type="text/JavaScript" src="nuestrojavascript.js"></script>
</head>
<body>
Hola ¿Como te llamas? <input type="text" size="10" name="cuadro1" value=""><br /><br />
<input type="button" value="Pulsa Aqui" name="escribirTexto" onclick="escribe()" />
</body>
</html>
Abrelo, escribe dentro del cuadro de texto y después pulsa el boton.
Con todos estos conocimientos ya estas preparado para inventar tus propios JavaScript. De todas formas antes de acabar tenemos que decirte algo que te hará la vida en JavaScript mucho más fácil. ¡¡¡Hay muchos códigos en JavaScript escritos en la web que puedes usar para crear tus programas!!! Solo copiar y pegar en tus archivos .js y .html. Buscalos en internet como "codigos javascript", ya verás que fácil y divertido. La mayoría son para pegar el código directamente en tu página web.
Un ejemplo:
copia en el body de tu página web esto:
<div id="blink">Hola!</div>
<div id="blink" onclick="BlinkIt ()"></div>
Ahora copia en el archivo nuestrojavascript.js esto:
window.setInterval (BlinkIt, 500);
var color = "red";
function BlinkIt () {
var blink = document.getElementById ("blink");
color = (color == "#ffffff")? "red" : "#ffffff";
blink.style.color = color;
blink.style.fontSize='36px';}
Abre la web. ¡¡¡Parpadea!!!
Y no te olvides si quieres ampliar conocimientos con el Fantástico libro "Fundamentos de Programación" aprender a programar muy fácil, que incluye un Curso Básico de JavaScript Para practicar lo que aprendas: Informatica Básica y JavaScript
Si te ha gustado haz click en Compartir, Gracias:
© Se permite la total o parcial reproducción del contenido, siempre y cuando se reconozca y se enlace a este artículo como la fuente de información utilizada.
Javascript es un lenguaje de programación cuyas instrucciones se ejecutan en cualquier navegador, es por eso que para probar y realizar nuestros programas solo necesitamos un editor de textos (notepad por ejemplo) y un navegador (Explorer, Chrome, etc.).
No necesita ser descargado ni tampoco instalado en nuestro ordenador.
Todos los navegadores lo interpretan.
En el editor de textos escribiremos las instrucciones y posteriormente, para probar lo que hace nuestro programa, lo haremos o veremos en un navegador mediante nuestra página web.
Nuestra página web también la escribiremos con el editor de textos.
JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas, texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario, operaciones matemáticas en la web, formularios, preguntas al usuario, etc.
Pero empecemos...
Lo primero que necesitaremos es crear nuestra página web que contendrá nuestro javascript.
Nosotros vamos a crear una página web muy simple, la más simple, ya que solo la usaremos para probar nuestros programas en JavaScript, pero si no tienes conocimientos de HTML y quieres ampliar los que aquí damos, te recomendamos visites el siguiente enlace: HTML Desde Cero.
Creamos Nuestra Web y Nuestro JavaScript
Lo primero que tenemos que hacer es crear nuestra web y decirle que cuando la abrimos con el navegador vaya a buscar el programa en Javascript a la ruta donde lo tengamos y lo ejecute en la web.
Recomendamos para hacer prácticas guardar el archivo de la pagina web y el del código de JavaScript en la misma carpeta, así no tendremos problemas para que la web encuentre el archivo JavaScript.
El archivo de la página hay que guardarlo con la extensión .html (extensión de las webs) y el archivo con el código JavaScript de nuestro programa con la extensión .js
Vamos a crear nuestra web básica. Abre notepad y escribe:
<html>
<head>
<title>Esta es mi página web sin Javascript</title>
</head>
<body>
"Hola Mundo"
</body>
</html>
Guardalo con el nombre web.html
Explicación del código web:
<html> </html> Etiqueta de apertura y cierra donde decimos que es un archivo escrito en html, código usado en las páginas web.
Todo lo que hay entre estas dos etiquetas es la página web. Ahora el navegador lo interpreta como una página web.
<head> </head> Etiquetas de apertura y cierra de la cabecera.
Aqui se pone el título (<title> </title>) de la web que aparecerá en la pestaña del navegador y algunas cosas más.
<body> </body> Entre estas dos etiquetas se pone el contenido de la página web. En nuestro caso el texto "Hola Mundo" solamente.
Bien ahora crea, si no la tienes ya, una carpeta con el nombre JavaScript y Guarda dentro el archivo creado con el nombre web.html. Recuerda esta es la web, no el javascript.
OJO con algunos editores de texto. A veces la extensión html no la guarda como extensión, solo como parte del nombre del archivo.
Fíjate en el tipo de archivo antes de guardar, si tienes archivo de texto te guardará el archivo así: web.html.txt.
Lo que quiere decir que no es un archivo con extensión html, sino de texto con extensión .txt.
Esto mismo puede pasarnor más adelante cuando guardemos nuestro archivo .js.
Repito OJO con esto, si no lo hacemos bien no conseguiremos nada.
Ahora abre el archivo (botón derecho abrir con...) con tu navegador.
Verás una web que pone "Hola Mundo". No necesitamos más. ¡Ya tenemos nuestra web sobre la que actuará nuestro programa en javascript.
Esta web no tiene JavaScript, por eso solo muestra el texto dentro de la etiqueta <body>.
Vamos a poner nuestro primer código JavaScript dentro de la web.
Introducir JavaScript dentro de la Web
Para meter código Javascript dentro de una web se puede hacer de 2 formas diferentes.
- Poniendo el código directamente entre dos etiquetas llamadas <script> y </script> (marcan el inicio y el fin del código JavaScript) y entre las etiquetas <head> y </head> del código de la página web. No es el más recomendable.
- Creando un archivo .js y crear un enlace desde la página web en html, para que vaya a leerlo cuando se visualice la página web en un navegador. Método que recomendamos.
La primera instrucción que vamos aprender es la siguiente:
alert("Esto es JavaScript"); ¿Qué hace?
Pues muy simple muestra una alerta con el texto que hay entre las comillas en el navegador.
Si usamos el primer método en nuestra web sería (modifica la página web creada antes):
<html>
<head>
<title>Esta es mi página web con Javascript Interno</title>
<script>
alert("Esto es JavaScript");
</script>
</head>
<body>
"Hola Mundo"
</body>
</html>
Ahora abre la web y verás el texto de alerta que has creado tu solito.
Si usamos el segundo método, método que usaremos a partir de ahora, primero crearemos nuestro archivo .js con la instrucción.
Abre el editor de textos y escribe:
alert("Esto es JavaScript");
Guárdalo con el nombre y la extensión nuestrojavascript.js dentro de la carpeta que creamos antes llamada JavaScript.
OJO en el archivo externo las instrucciones no van dentro de las etiquetas <script> y </script>. Solo se ponen las instrucciones separadas por ; y nada más.
Ahora vamos a decirle a nuestra web (web.html) anterior que nos lea el archivo nuestrojavascript.js que estará en la misma carpeta (los dos en el mismo sitio).
Esta es la forma de hacerlo, escribiendo dentro del head de nuestra web lo siguiente:
<script type="text/JavaScript" src="nuestrojavascript.js"></script>
Esta etiqueta es muy sencilla, primero dice que es un programa escrito en JavaScript y luego dentro de src y entre comillas, le dice donde tiene que ir a leerlo, en nuestro caso al archivo nuestrojavascript.js, que estará dentro de la misma carpeta que la web. Veamos como quedaría nuestra web:
<html>
<head>
<title>Esta es mi página web con Javascript Externo</title>
<script type="text/JavaScript" src="nuestrojavascript.js"></script>
</head>
<body>
"Hola Mundo"
</body>
</html>
Ojo está en negrita para destacarlo pero no se escribe en negrita realmente.
¿Por qué recomendamos esta método? Vamos a verlo con ejemplo muy sencillo.
Imagina que tienes un sitio web con 1.000 páginas web.
Incrusta en cada página el código <script type="text/JavaScript" src="nuestrojavascript.js"></script> y posteriormente creo al archivo .js. Pasado un tiempo quieres añadir más JavaScript en tus páginas.
Solo tendrás que ampliar el archivo .js y automáticamente el nuevo JavaScript aparecerá en todas las páginas.
Si uso el método de escribir directamente el código en la página tendría que ir copiando de una en una en cada web el nuevo código, es decir 1.000 veces.
Nuevo código...otras 1.000 veces a copiarlo y así sucesivamente.
Definitivamente mucho mejor el método de archivo externo.
Escribamos en Nuestra Web Con JavaScript un texto. Copia esto en el archivo nuestrojavascript.js
document.write ("texto");
documento.write le dice que escriba lo que pongamos entre paréntesis en la web.
Si tenemos un texto muy largo y queremos dividirlo en dos líneas dependerá si es para una alerta o para un texto en la web. Veamos como se hace para cada caso:
document.write("Cabecera del <br> documento"); ==> salto de línea para textos dentro de la web.
alert('Esto que lo escriba en la 1ª línea, \n y esto en la 2ª') ; ==> salto de línea para textos en las alertas.
Las Variables
Una variable es como unacaja donde metemoscosas (datos). Estos datoslos podemos ir cambiando, ahora meto un 3, ahora lo quito y meto un 5.
Una variabletiene un nombre, que puede ser una letra, una palabra, varias palabras unidas por el guión bajo o varias palabras sin separar pero la primera letra de cada palabra en mayúsculas ejemplo.: VidasPerdidas, vidaperdidas, vidas_perdidas.Ojolas mayúsculas y minúsculas son muy importantes en las variables, no es la misma variablenumeroqueNumero, son dos diferentes.OJOtampoco se pueden poner acentos en el nombre de las variables.
Las variables tambiéntienen un valorque eslo que hay dentro de ella(en la caja)en ese momentoy quepuede ir variandosegún se vaya desarrollando el programa, por eso se llama variable.
Una variable dependiendo desu valor puede sernumérica, si solo puede tener un valor numérico,de texto, si solo puede contener texto (letra, palabra o frase (string).
En lasvariables de texto, su valor (el texto), debe irentre comillas, para diferenciar que el texto es texto y no es el nombre de otra variable. Por ejemplos vidas = "Cinco" o vidas = "5". En los dos casos el valor es un texto, nunca el valor de 5.
Las numéricas no llevan comillas en su valor. Por ejemplo: vidas = 5. En este caso su valor si que es el número 5.
Hay otrasvariablesque se llamanbooleanasque solo pueden tener dos valores true o false. Normalmente true se puede sustituir por el valor 1 y false por el 0.
Veamos como definimos o declaramos una variable en JavaScript. Para declarar una variable siempre se empieza poniendo la palabra var y seguido el nombre de la variable. Seguidamente ponemos un igual y detrás del igual el valor de la variable.
Veamos algunos ejemplos:
var edad=3;//la variable edad la declaramos como una variable numérica. Fíjate que esto en negrita es un comentario, va precedido de // y no hace nada, solo nos sirve de ayuda cuando revisemos el programa.
var texto= "Tengo 14 años"; //fíjate que va entre comillas, es decir la declaramos como una variable de texto
var textoNumero= Edad + 2 ; //su valor es el valor de la variable Edad (numérica) +2; en este caso sería = 5 (3+2).
var booleana = true; en este caso sería de valor 1.
¿Te has dado cuenta que hemos puesto un punto y coma (;) al acabar de definir cada variable?. En programaciónsiempre que se acaba una instrucción o grupo de instrucciones se debe poner ";"para decir al programa que pasamos a otra instrucción diferente. Pero sigamos con las variables.
OJO una vez declarada la variable, normalmente al principio del programa o la primera ve que la escribamos, a partir de ese momento cuando queramos llamar a la variable para cualquier cosa, por ejemplo cambiar su valor, ya no necesitaremos volver a poner la palabra var, solo el nombre de la variable. Conclusión: var solo se utiliza una vez para declarar la variable, es decir para decirle al programa, a partir de ahora esto es una variable numérica, de texto, etc.
Imagina que quieres cambiar el valor de la variable texto anterior por otro valor. Solo pondríamos los siguiente:
texto = "Ahora tengo 15 años";
A partir de ahora en el programa su valor será este, y fíjate que no pusimos var delante.
¿Preparado para seguir programando?
Abrimos nuestro archivo nuestrojavascript.js, borramos todo lo que tengamos y ponemos lo siguiente:
var Edad= "Tengo 14 años"; //fíjate que va entre comillas, la declaramos como una variable de texto y Ahora que nos escriba su valor.
document.write (Edad);
Como ves en el resultado no aparece el comentario que pusimos detrás de // . El código nos da como resultado escrito el valor de la variable de texto Edad. OJO el nombre de las variables, aunque sean de texto no van entre comillas.
Cambiemos el valor de la variable Edad por otro texto. ¿Que pasaría en el siguiente programa?
var Edad= "Tengo 14 años";
Edad = "Ahora Tengo 15 años";
document.write (Edad);
Pues el resultado será el último valor de la variable Edad. Fíjate que Edad solo la declaramos con var una vez al principio.
Para seguir borra del archivo web.html el texto "Hola Mundo" para que no aparezca más y no nos moleste. Ahora solo queremos ver lo que programemos en javascript.
¿Cómo concateno (junto) dos variables?
La forma de obtener el resultado de dos variables de texto sería:
var Edad= "Tengo 14 años";
var Pelo = "y tengo el pelo rubio";
document.write (Edad + Pelo);
¿Fácil NO?
Ves que solo necesitamos poner el símbolo +. ¿Te diste cuenta que nos junta el final de la primera frase con el principio de la segunda? La solución es sencilla, pon un espacio en blanco al principio de la segunda frase dentro de las comillas.
var Edad= "Tengo 14 años";
var Pelo = " y tengo el pelo rubio";
document.write (Edad + Pelo);
Ahora esta perfecto.
Trabajemos un poco con las numéricas. Escribe esto en tu archivo JavaScript:
var x= 14;
var y = 3;
document.write (x + y);
Como son numéricas nos suma el valor de cada una de las variables. Ahora mezclemos todo un poco:
var x= 14;
var Edad= "Tengo " + x + " años";
document.write (Edad);
He construido un frase con dos variables, una numérica y otra de texto. Las frases en programación se llaman String.
Recuerda x no va entre comillas por que es una variable, no es un texto. Para separar las palabras en el texto y que nos nos queden todas juntas, solo es necesario que dejes un espacio en blanco entre el + y las dos palabras.
Volvamos a la suma anterior. Me gustaría que los números de la suma no sean fijos, quiero que el usuario introduzca dos números cualquiera y el programa me los sume.
Lo primero que necesitamos es que aparezca una ventana diciéndonos que introduzcamos el primer número y otra para el segundo.
Para crear una ventana para introducir texto o números se hace así poniendo:
prompt("Texto de la Ventana"); Esto crea una ventana para introducir texto o número y con dos botones "Aceptar" y "Cancelar"·
Si solo ponemos eso nos aparecerá la ventana, introduciremos el texto o el número y no hará nada. Tenemos que decirle al programa que lo que introduzcamos en el cajetín de la ventana es el valor de nuestra variable.
var nombre = prompt("Dime tu nombre");
document.write( nombre );
Ahora si, le hemos dicho que el valor de la variable nombre es lo que aparezca en la ventana. Luego que nos lo escriba.
Si quisiéramos ahora hacer la suma de dos números de esta forma:
var x = prompt("Dime un número");
var y = prompt("Dime otro");
var suma = x + y;
var resultado = "La suma de los dos número es " + suma;
document.write(resultado);
Si hacemos este programa y vemos el resultado, tenemos un problema.
Como las variable x e y no las hemos declarado ni como numéricas ni como de texto, el recogerlas del cajetín generado con prompt no sabría si es número o texto (recuerda que 5 puede ser un número o un texto). En este caso no sabría si sumar o concatenar los dos valores.
Por defecto JavaScript considera lo que pongamos dentro del cajetín como texto, por lo tanto con el programa anterior salen los dos números concatenados (juntos), pero no sumados. Por ejemplo si pones 3 y luego 4 el resultado será 34, no 7. Si queremos que los sume le tendremos que decir que vamos a introducir números, o que la variable es numérica, poniendo la palabra parseIn delante del prompt. Fíjate como quería el programa que suma números definitivo:
var x = parseInt(prompt("Dime un número"));
var y = parseInt(prompt("Dime otro"));
var suma = x + y;
var resultado = ("La suma de los dos número es " + suma);
document.write(resultado);
Hemos puesto parseIn antes del prompt, y con eso le decimos que introduciremos números, a partir de aquí, ya los tratará como números y los sumará en lugar de unirlos.
Otra opcíon sería declarar las variables con un número cualquiera antes del prompt.
Igual que sumamos podemos hacer muchas más operaciones matemáticas.
Operadores Matemáticos con JavaScript
+ para Suma
- para Resta
* para multiplicar (asterisco)
/ para la división
% Nos da como resultado el resto de la división entre dos números. por ejemplo 10 % 3 resultado será 1, el resto de la división.
Math.sqrt(x); calcula la raiz del número o de la variable x.
> Mayor que
< Menor que
>= Mayor o igual
<= Menor o igual
== Igual a; OJO no es lo mismo una igualdad de una ecuación que esta igualdad. Esta igualdad es para comparar si dos cosas son iguales, por ejemplo dos textos, dos números, etc.
Ejercicios:
- Intenta hacer una calculadora que sea capaz de multiplicar dos o tres números.
- Haz un programa que calcule la raiz cuadrada de un número dado.
- Crea un programa que nos muestre el resultado del área de un círculo sabiendo su radio. Recuerda el área de un circulo es 3.14159*radio.
- Realiza un programa para calcular el IVA de un producto para una tienda. Nos preguntará cuanto cuesta el producto sin IVA. Si introducimos el precio sin iva nos tiene que dar como resultado el precio del producto con el IVA. ¿Facil NO?.
Números Aleatorios Con JavaScript
Math.random() Genera un número aleatorio entre 0 y 1. Podría ser el 0, el 1, el 0.23, el 0.53....En JavaScript los decimales se escriben con punto y no con coma.
Si queremos generar un número aleatorio, por ejemplo entre 0 y 10 deberemos multiplicar el resultado del random por 10 de la siguiente forma:
Math.random()*10;
El problema sería que nos daría un número aleatorio entre 0 y 10 pero con decimales. ¿Cómo solucionarlo si queremos solo números enteros? Pues muy sencillo, diciéndole que que queremos redondear el número que nos salga. Eso lo hace la orden el Math.round. Nos quedaría así:
var aleatorio = Math.round(Math.random()*10); //Variable cuyo valor es un número entero aleatorio entre 0 y 10.
Ejercicio:
- Crea un programa que nos escriba un número aleatorio entre 0 y 3 con decimales.
Con número enteros sería este:
var aleatorio = Math.round(Math.random()*3);
var resultado = ("El número aleatorio es " + aleatorio);
document.write(resultado);
Refresca la página web y verás como cada vez sale un número diferente.
La sentencia IF
If es una condicional que significa literalmente SI....En definitiva es para formar una estructura para tomar decisiones o también llamada Selectiva. Realmente lo que hace es lo siguiente:
SI (se cumple una cosa) Entonces (se hace esto).
En Javascript se escribe de la siguiente forma:
if (expresión) {acciones a realizar en caso positivo}
Si se cumple la expresión entre paréntesis, por ejemplo que x < 10; entonces el programa hace lo que pongamos entre los corchetes.
Veamos un ejemplo:
var edad = parseInt(prompt("Dime tu edad"));
if (edad > 18) {document.write("Eres mayor de edad")}
Le decimos que salga una ventana para que introduzcas tu edad, Si tu edad es mayor de 18 saldrá la frase "Eres mayor de edad" pero.... ¿Qué pasa si ponemos una edad de 14?. Tal y como está el programa no pasaría nada, por eso una expresión muy usada con IF es ELSE.
if (expresión) {acciones a realizar en caso positivo }
else {acciones a realizar en caso negativo}
Poniendo else podemos poner entre corchetes lo que pasaría si no se cumple la condición. Sigamos con el ejemplo anterior y vamos a mejorarlo:
var edad = parseInt(prompt("Dime tu edad"));
if (edad > 18) {document.write("Eres mayor de edad")}
else {document.write("Eres menor de edad")};
Ahora si, tenemos un programa que realiza una cosa en función de como sea lo que introduzcamos, tanto para mayores, como para menores de edad.
Ejercicios:
- Crea un programa que introduzcamos 2 números y el programa nos diga cual es el mayor de los dos.
- Crea un programa que nos calcule la raiz de un número. OJO solo los número mayores de 0 tiene raiz cuadrada, por lo tanto si el usuario introduce un número menor que 0 tenemos que decirle que ese número no tiene raiz antes de ejecutar la raiz del número.
Es muy probable que tengamos la necesidad de incluir en nuestros programas alternativas con muchas opciones posibles (varias IF). Veamos un ejemplo:
Creamos la variableOpciones = un valor a elegir, por ejemplo desde el teclado o desde una ventana que marque el usuario;
if (variableOpciones=0) {lo que corresponda};
if (variableOpciones=1) {lo que corresponda};
if (variableOpciones=2) {lo que corresponda};
Podemos poner tantas if como queramos.
Ejercicio:
- Crea un juego sorpresa tipo tómbola. El usuario tendrá elegir entre los números 0, 1, 2 y 3. Dependiendo el número que elija le tocará una cosa u otra. simplemente escribe lo que le toca en función del número elegido.
También existe la posibilidad de que deban de cumplirse dos condiciones a la vez:
if (condición1 && condición2) {Se cumple esto}
También con else:
if (condición1 && condición2) {Se cumple esto} else {se cumple esto otro}
Los símbolos && significan "y", es decir si se cumple la condición1 y la condición2 a la vez (las dos).
Otro caso seríasi se cumple una cualquiera de las dos condiciones:
if (condición1 | condición2) {Se cumple esto}
Como ves es el símbolo | (barra recta vertical del teclado = AltGr + 1)
Ahora que conocemos la condicional vamos a ver una instrucción nueva, se llama confirm y es similar a alert, la diferencia es que en la ventana de alerta saldrán dos botones en lugar de uno solo. Este tipo de ventanas se llaman "ventanas de confirmación". Un botón OK o Aceptar para confirmar el mensaje y otro para Cancelar si no se está de acuerdo con la petición expresada.
Escribe esto en el archivo javascript:
confirm ("Acepta o Cancela");
Ves que salen los dos botones. Lógicamente tendremos que decirle al programa que hacer en un caso o en otro. Para eso tenemos las condicionales. Veamos un ejemplo:
if (confirm ("Acepta o Cancela"))
{document.write("Aceptaste")}
else
{document.write("Cancelaste")}
La primera opción es lo que hará el programa si pulsas el botón aceptar y la segunda su pulsas cancelar.
Esta instrucción window.open("direccion URL"); sirve para llevarte a una página web que será la que pongamos en "dirección URL". Mira el siguiente programa:
if (confirm ("¿Quieres ir a la Página de Tecnologia?"))
{window.open("https://www.areatecnologia.com")}
else
{alert("Esta bien nos quedamos aqui")}
A veces los navegadores bloquean la opción de llevarte a otro sito (son los llamados pop-ups). Si no te funciona desbloquealos.
¿Estas preparado para crear tu primer juego con JavaScript?.
- Crea un programa que sea un juego de 10 preguntas con respuestas cortas (una palabra o un número). El juego debe tener un marcador donde veamos la puntuación, si se falla una pregunta se restan puntos, si se acierta se suman.
Ahora uno un poco más dificil que iremos explicando poco a poco.
Intenta hacer un juego en el que el usuario tenga que adivinar un número entre 0 y 5 elegido por el programa (aleatorio).
Yo te doy la solución, pero primero intenta hacerlo por ti mismo.
Ayuda: Piensa que primero tenemos que elegir el número aleatorio, después le preguntamos que introduzca el número, y por último tenemos que decirle si acertó o no mediante IF.
Solución al juego básico:
var aleatorio = Math.round(Math.random()*5);
var numeroElegido = parseInt(prompt("¿Qué Número Es?"));
if (aleatorio == numeroElegido) {document.write("¡¡¡Eres un Fenómeno Acertaste!!")}
else {document.write("Has Fallado")};
OJO recuerda que cada vez que refresques la página el ordenador elegirá un número distinto.
Vamos a mejorar nuestro juego. Queremos darle 4 oportunidades de acertar el número al jugador. Tendremos que decirle que si no acierta vuelva a preguntarnos, pero ojo que el número elegido o random sea el mismo las 4 veces.
Necesitamos repetir "var numeroElegido = parseInt(prompt("¿Qué Número Es?"));" cuatro veces en caso de que no acierte ninguna vez, es decir necesitamos crear una estructura repetitiva. Veamos como se hace.
Estructuras Repetitivas en JavaScript
Una estructura repetitiva permite ejecutar una instrucción o un conjunto de instrucciones un número de veces determinado. En programación se llaman "Bucles".
Primero empecemos por algo sencillo. Queremos que se repita una frase varias veces. Para eso creamos un bucle. Fíjate en la siguiente estructura, que se utiliza siempre para bucles, y luego lo explicamos:
var i; i=1; while (i<=5)
{
document.write("Esto Se Repite");
i=i+1;
}
Veamos la primera línea. En esta línea le decimos que declaramos la variable i; y luego le decimos que su valor inicial es 1. A continuación la decimos que mientras (while) la variable i tenga un valor menor o igual a 5 se haga lo que hay dentro de los corchetes document.write("Esto Se Repite");.
La última línea dentro de los corchetes (i=i+1;) es para decirle que al llegar el programa a esa línea aumente en 1 el valor de i. Es decir si "i" parte de un valor 1, escribirá la frase la primera vez porque se cumple que i<=5.
Al llegar al i=i+1; cambia el valor de i ya que le suma 1 al valor que tenía y pasará a ser de 2 (i = i +1). Ahora el programa vuelve al principio y vuelve a preguntarse ¿Se cumple la condición i<=5? Si se cumple, por lo tanto se volverá a repetir el ciclo (el bucle), pero ojo ahora el valor de i será 2. Escribe de nuevo la frase y el valor de i pasará a ser 3. ¿Se cumple la condición? Si pues otra vez se repetirá el bucle.
Así hasta que i valga 5, en ese caso deja de cumplirse la condición y el programa saldrá del bucle para hacer lo que tengamos a continuación, es decir, en nuestro caso nada.
Normalmente la variable de los bucles de repetición se llaman "i".
Bueno, hemos conseguido repetir algo varias veces. Ahora ya sabemos crear un bucle.
Creemos un programa que nos escriba los números del 1 al 100. Se puede llamar contador de números.
var x = 1;
var i; i=1; while (i<=100)
{
document.write(x);
x = x+1
i=i+1;
}
Fíjate que el valor x lo ponemos fuera del bucle para que su valor inicial sea 1 y luego dentro del bucle vaya cambiando.
Queda un poco feo por que nos escribe los valores todos seguidos uno detrás de otro. Para mejorarlo solo tenemos que decirle que nos escriba cada valor en una fila. ¿Te acuerdas? Hay poner <br>
var x = 1;
var i; i=1; while (i<=100)
{
document.write(x );
document.write('<br>'); //crea un salto de línea.
x = x+1
i=i+1;
}
¿Serías capaz de escribir un programa para una cuenta atrás, por ejemplo de 10 hasta 0.?
Ya estamos preparados para seguir con nuestro juego de adivinar un número con 4 posibilidades, recuerda necesitábamos repetir 4 veces que el usuario teclee un número. ¿Lo hacemos? Este era el programa que teníamos anteriormente:
var aleatorio = Math.round(Math.random()*5);
var numeroElegido = parseInt(prompt("¿Qué Número Es?"));
if (aleatorio == numeroElegido) {document.write("¡¡¡Eres un Fenómeno Acertaste!!")}
else {document.write("Has Fallado")};
Ahora vamos a mejorarlo con el bucle:
var numeroElegido = parseInt(prompt("¿Qué Número Es?"));
if (aleatorio == numeroElegido) {document.write("¡¡¡Eres un Fenómeno Acertaste!!")}
else {document.write("Has Fallado")};
var aleatorio = Math.round(Math.random()*5);
var i; i=1; while (i<=4)
{
var numeroElegido = parseInt(prompt("¿Qué Número Es?"));
if (aleatorio == numeroElegido) {document.write("¡¡¡Eres un Fenómeno Acertaste!!" )}
else {document.write("Has Fallado")};
i=i+1;
}
Pero...¡¡¡Esto es un Churro de Programa!!!! Pues si jajajaj. El problema es que repite 4 veces que hemos fallado o hemos acertado. ¿Lo mejoramos? Es muy sencillo, la primera mejora será decirle que si acertamos no nos siga preguntando más. Solo tenemos que decirle al programa que si acierta le de un valor a i mayor de 4 para que salga del bucle y no nos pregunte más.
var aleatorio = Math.round(Math.random()*5);
var i; i=1; while (i<=4)
{
var numeroElegido = parseInt(prompt("¿Qué Número Es?"));
if (aleatorio == numeroElegido) {document.write("¡¡¡Eres un Fenómeno Acertaste!!" )}
else {document.write("Has Fallado")};
if (aleatorio == numeroElegido) {i = 5}
i=i+1;
}
Primera parte solucionada. Pero si fallamos se sigue repitiendo la frase "Has Fallado". Una posible solución es poner cada frase de fallo en un fila diferente con <br>:
var aleatorio = Math.round(Math.random()*5);
var i; i=1; while (i<=4)
{
var numeroElegido = parseInt(prompt("¿Qué Número Es?"));
if (aleatorio == numeroElegido) {document.write("¡¡¡Eres un Fenómeno Acertaste!!" )}
else {document.write("Has Fallado" + "<br>")};
if (aleatorio == numeroElegido) {i = 5};
i=i+1;
}
Al cuarto fallo el programa se para. Sería bueno que a la cuarta vez saliera una frase que dijera "Ya no tienes más Intentos". ¿Te atreves a intentarlo por ti mismo? Necesitamos un operador que compruebe si algo es desigual, Igual es ==, pero desigual es !=.
Aquí tienes la solución total y correcta:
var z = 0
var aleatorio = Math.round(Math.random()*1);
var i; i=1; while (i<=4)
{
var numeroElegido = parseInt(prompt("¿Qué Número Es?"));
if (aleatorio == numeroElegido) {document.write("¡¡¡Eres un Fenómeno Acertaste!!" )}
else {document.write("Has Fallado" + "<br>")};
if (aleatorio == numeroElegido) {i = 5};
if (aleatorio != numeroElegido) { z = z + 1};
if (z == 4) {document.write("¡¡¡Volviste a fallar y ya no tienes más intentos!!" )};
i=i+1;
}
Analiza la variable z que hemos introducido y entiendo lo que hace. ¡¡¡Ya tenemos nuestro juego limpio y bonito!!!.
Botones en Javascript
Podemos introducir botones que realicen alguna cosa, pero OJO los botones tenemos que ponerlos en el código de nuestra web en html y en el sitio que queramos que aparezcan. Luego podremos decir que hacen desde el archivo JavaScript.
Un botón se crea de la siguiente manera:
<input type="button" value="texto dentro del boton" name="boton1" onclick="lo que hace al hacer click sobre el boton" />
Desglosemos cada parte:
input type="button" Nos crea un boton
value="texto dentro del boton" Para el texto que aparecerá dentro del boton
name="boton1" el nombre que identifica a nuestro boton. Si tenemos más de una podemos llamarles boton1, boton2, etc.
onclick="lo que hace al hacer click sobre el boton" Pues eso, lo que hará cuando lo pulsemos.
Borra todo lo que tengas en los archivos javascript.js y web.html. Abre el archivo web.html y escribe dentro del <body> (cuerpo)
<input type="button" value="Click Aquí" name="boton1" onclick="alert('Hola ¿Que tal?')"" />
Ahora guarda y abre la página a ver que pasa.
Si queremos que un boton realice alguna parte del programa que tengamos en el archivo JavaScript, lo que queremos que haga debemos escribirlo en JavaScript dentro de una función. Tranquilo, no te asustes, es muy fácil.
En el onclick de un boton se suele poner o hacer referencia para que vaya a una función del archivo javascript, por eso el siguiente paso es aprender las funciones.
Funciones en JavaScript
Una función es un conjunto de instrucciones que se agrupan para realizar una tarea concreta y que se pueden reutilizar fácilmente.
Hay veces que dentro de un programa varias instrucciones se repiten muchas veces, sobre en todo en programas muy largos. Para no tener que repetirlas una y otra vez las agrupamos dentro de una función y cada vez que queramos activarlas solo tendremos que "llamar" o "invocar" a la función donde estén.
Resumiendo, una función es un trozo de código que hace algo concreto y que podemos utilizarlo en cualquier parte de nuestro programa y las veces que queramos.
Veamos como se crea una función.
function nombre_funcion() {
instrucciones de la función
}
El nombre de la función se utiliza para llamar o invocar a esa función cuando queramos que se ejecute. El concepto es el mismo que con las variables, a las que se les asigna un nombre único para poder utilizarlas dentro del código. Después del nombre de la función, se incluyen dos paréntesis cuyo significado se detalla más adelante. Por último, los símbolos { } se utilizan para encerrar todas las instrucciones que pertenecen a la función (de forma similar a como se encierran las instrucciones en las estructuras if ).
Veamos un ejemplo:
var numero1 = 5;
var numero2= 9;
function suma_y_muestra() {
resultado = numero1 + numero2;
alert("El resultado es " + resultado);
}
Para "llamar" o "invocar" a la función dentro del programa solo tendremos que escribir su nombre de la siguiente forma:
suma_y_muestra();
Fijate que hemos declarado las variables que usará la función antes de la función. También podríamos ponerlas después de la función, pero siempre antes de llamarla.
Cada vez que el programa lea suma_y_muestra(); realizará la función. Normalmente las funciones que vamos a utilizar en el programa se definen al principio del programa, para eso debemos tener muy claro qué funciones necesitaremos.
¿Recuerdas los botones que decíamos que dentro de onclick se especificaba la función que queríamos que realizara al apretarlo? Vamos hacerlo.
Abre el archivo nuestrojavascript.js y escribe la función siguiente:
function mifuncion() {document.write("¡¡¡Estupendo el Boton Hace lo que Queremos!!" )}
Ahora vamos a decirle al boton, en la web en html, que lea esa función cuando apretemos el boton (onclick). Escribe lo siguiente en el archivo web.html:
<input type="button" value="Click Aquí" name="boton1" onclick="mifuncion()"" />
Abre el archivo web.html y aprieta el botón creado. ¿Esta chulo NO?.
Ahora tenemos controlado lo que queremos que haga un botón, dentro del html, mediante JavaScript. Solo tenemos que escribir lo que queremos que haga el botón dentro de nuestra función en JavaScript.
Sigamos con las funciones. La mayoría de las veces si las variables solo se usan y existen dentro de la función se ponen dentro de los paréntesis (que hasta ahora no usamos). Esto se llama poner "argumentos" a la función. Las variables (pueden ser constantes) que necesitan las funciones para trabajar se llaman "los argumentos de la funcion". OJO estas varibales solo existen dentro de la función y no las podremos utilizar en otra parte del programa, por eso se llaman variables locales. Mira el ejemplo:
function sumar(x,y){
var total = x + y;
alert(total);
}
sumar(1,2);
sumar(5,7);
Primero realiza la suma dando valores x=1 e y=2 y luego hace otra suma con diferentes valores para x e y (5 y 7).
En este caso las variables no las declaramos antes de la función (ni en ningún sitio), son variables que solo contiene la función. Para cambiar el valor de las variables se hace llamando a la función y poniendo sus valores.
OJO las varibales x,y y total no se podrán utilizar en otra parte del programa, ya que sol locales.
Imagina que ponemos esto:
function sumar(x,y){
var total = x + y;
}
sumar(1,2);
var sumaNueva = total + 5;
alert(sumaNueva);
El programa NO funciona porque la variable total en sumaNueva no la reconoce, es local de la función sumar.
El problema es que muchas veces usamos funciones para realizar una operación y lo que nos interesa (solo) de la función es el resultado final, como el caso anterior, solo nos interesa el resultado de la variable total. ¿Qué podemos hacer para usar esto es otra función o en cualquier parte del programa? Usar return.
Entendiendo RETURN
return sirve para recoger un valor de una función, es decir que la función la usemos solo para recoger un resultado, sin que sea necesario abrir una ventana para que nos lo muestre ni nada parecido, solo queremos el resultado.
Veamos un ejemplo:
function cubo (x) {
alert(x * x * x);
}
cubo(3);
Esta función nos muestra el resultado del cubo de x. si ahora hacemos. En el ejemplo se nos muestra una alerta con el número 27.
Pero lo que queremos es solo recoger el resultado de x al cubo, no que nos lo muestre. Normalmente eso sucede cuando queremos ese resultado usarlo en otro sitio del programa. Pare eso hacemos:
function cubo (x) {
return(x * x * x);
}
cubo(3);
Si ejecuto el programa no saldrá nada, pero si que tenemos guardado el valor de 27 en la función. ¿Qué hacemos con él? Pues lo normal es guardarlo en una variable para usarlo después. Por ejemplo:
var resultado = cubo(3);
Ahora tenemos una variable llamada resultado cuyo valor es el cubo de 3, operación que se hace en la función. Ahora esa variable la podemos usar en cualquier otra parte del programa.
Apliquemos return en la función anterior de la suma.
function sumar(x,y){
return (x + y);
}
var primeraSuma = sumar(1,2);
var total = primeraSuma + 5
alert(total);
Fijate que ahora sí que se muestra el resultado de la suma de los 3 números. 2 de ellos salen sumados de la función sumar. Si la suma de esos dos números los hubieramos recogido en una variable dentro de la función no podríamos usarlos fuera de la función, ya que son locales, pero ahora con return si podemos. ¿Entendendido?.
Funciones Definidas Control del Tiempo en JavaScript
También tenemos funciones ya definidas por el propio lenguaje javascript, es decir que hacen algo y siempre lo mismo, que nos pueden ser muy útiles en nuestros programas. Normalmente van dentro de otra función. Veamos alguna.
La función "setTimeout" se ejecutará (o "llamará a una función) una sola vez pasados x segundos.
setTimeout("nombreFuncion()",tiempo en milisegundos); Un ejemplo:
setTimeout("reloj()",1000);
Aqui la función reloj se llamará ejecutándose pasados 1000 milisegundos (1 segundo) desde que el programa lee el setTimeout.
setTimeout("mostrarAviso()",3000);
function mostrarAviso(){
alert("Han pasado los tres segundos");
}
A los 3 segundos llamará a la función mostrarAviso, es decir a los 3 segundos saldrá un mensaje que nos dirá que pasaron 3 segundos.
Podemos poner en lugar de llamar a una función, llamar a una variable.
En un juego puede ser muy útil para especificar el tiempo que tiene el jugador para acabar el juego o realizar alguna acción.
¿Te acuerdas del juego de adivinar un número? ¿Sabrías utilizar esta función para especificar que el jugador tiene 20 segundos para adivinar el número? Inténtalo.
Esta instrucción window.open("direccion URL"); sirve para llevarte a una página web (¿Lo recuerdas?). Mira lo que hacemos.
setTimeout("iraweb()",1000);
function iraweb(){
alert("Ha pasado 1 segundo, te llevamos a la web");
window.open("https://www.areatecnologia.com");
}
Cuando pasa 1 segundo sale un aviso y al pulsar aceptar se abre una ventana nueva hacia la web especificada. Fíjate que el nombre de la función va entre comillas
La función setInterval sirve para especificar cada cuanto tiempo tiene que "llamarse" a una función, pero se llamará una y otra vez cada tiempo especificado, es decir se repite la llamada cada x tiempo. Imagina que queremos que se repita lo que hay dentro de una función cada 1000 milisegundos, ojo estará repitiendose contínuamente hasta que no especifiquemos que se pare.
setInterval("nombreFuncion()",1000);
En este caso nombreFuncion se repetiría cada 1000 milisegundos (1 segundo). El segundo parámetro (argumento) es el tiempo en milisegundos.
¿Que hace el siguiente programa?
setInterval("repetir()",1000);
function repetir () {
alert ("Ha pasado 1 segundo")
}
Siii, sale un mensaje cada segundo. Pero casa segundo vuelve a salir el mismo mensaje. Imagina que queremos que se pare el mensaje a los 3 segundos.
Con clearInterval(nombreVariable); detendremos o pararemos la función que está en marcha con setInterval. Fijate que entre paréntesis va el nombre e una variable, por eso es necesario asiganar el setInterval a una variable, para luego pararlo con clearInterval.
Como ves solo se repetirá una vez, ya que después está clearInterval. Podríamos usar un botón en la página web que al pulsarlo activara clearInterval, es decir que parese de repetir el mensaje solo cuando pulsemos el boton.
Abre el archivo web.html y escribe dentro del <body> (cuerpo)
<input type="button" value="Parar el Mensaje" name="botonParar" onclick="clearInterval(bucleRepetir)" />
En el javascript escribe:
var bucleRepetir = setInterval("repetir()",1000);
function repetir () {
alert ("Ha pasado 1 segundo");
}
Ahora siii. se repite la alerta cada segundo, pero si queremos parar que salga la alerta solo tendremos que pulsar el botón creado.
Muchas veces verás estas funciones escritas así: window.setInterval (funcion, 500); Se pueden poner con la palabra window o sin ella. Simplemente lo que le decimos al poner la palabra window delante es que es una función definida del navegador. Es igual que cuando escribiamos write de la forma document.write ("Hola"), lo que le deciamos es que usara la funcion write (escribir) dentro el documento. Si write era una función definida.
Cuadros de Texto en JavaScript
Los cuadros de texto son unos espacios en la página web donde podemos introducir texto, números o cualquier caracter. Para crearlos se hace como los botones, desde la página web en html. La instrucción es (escribela en tu archivo html):
<input type="text" size="10" name="pepe" value="">
Ves que es como un botón pero en type ponemos text para especificar que es un cuadro de texto. Value es para poner un texto inicial dentro del cuadro si queremos, en este caso vacio.
Lógicamente podremos escribir pero no hace nada más. Tendríamos que decirle que hacer con lo que el usuario introduce en el texto. Para recoger el texto de un cuadro necesitamos meter en contenido del cuadro dentro de una variable de la siguiente forma:
var contenidoCuadro = document.getElementsByName('pepe')[0].value;
Veamos las partes de la nueva instrucción:
- document es para decirle que queremos recoger algo que está dentro del documento html.
- getElementsByName es para decirle que el elemento ha recoger lo recogeremos por su nombre que lo identifica (recuerda que en los cuadros y botones los identificamos por su name). En nuestro caso el nombre del elemento que queremos recoger es pepe.
- [0] La mayoría de las veces en un documento html hay varios elementos con el mismo nombre, es por eso que tenemos que decirle de todos los que existen el lugar que ocupa el que nosotros queremos recoger. Imagina que hay 3 elementos que se llaman pepe, si ponemos [0] le decimos que queremos recoger lo que hay dentro del primer elemento pepe que encuentre. Si ponemos [1] será el segundo y así sucesivamente.
- value significa que queremos recoger el valor que tenga en ese momento ese elemento. En el caso de un cuadro de texto el valor que tiene será lo escrito dentro de él en ese momento.
Ahora que ya sabemos como recoger lo que hay dentro de un cuadro de texto solo nos queda que hacer con lo recogido. Recuerda que lo recogemos dentro de una variable, por lo tanto especificaremos que hacer con la variable, en nuestro caso. que hacer con contenidoCuadro.
Vamos hacer un ejemplo. Queremos crear un programa que podamos escribir dentro de un cuadro de texto y cuando pulsemo un boton se escriba en la página lo mismo que hay dentro del cuadro de texto. Borra todo lo que tengas en los archivos javascript.js y web.html.
En el archivo javascript.js escribe:
function escribe(){
var rellena = document.getElementsByName('cuadro1')[0].value;
document.write(rellena);
}
En el web.html escribe:
<html>
<head>
<title>Cuadro de Texto</title>
<script type="text/JavaScript" src="nuestrojavascript.js"></script>
</head>
<body>
Hola ¿Como te llamas? <input type="text" size="10" name="cuadro1" value=""><br /><br />
<input type="button" value="Pulsa Aqui" name="escribirTexto" onclick="escribe()" />
</body>
</html>
Abrelo, escribe dentro del cuadro de texto y después pulsa el boton.
Con todos estos conocimientos ya estas preparado para inventar tus propios JavaScript. De todas formas antes de acabar tenemos que decirte algo que te hará la vida en JavaScript mucho más fácil. ¡¡¡Hay muchos códigos en JavaScript escritos en la web que puedes usar para crear tus programas!!! Solo copiar y pegar en tus archivos .js y .html. Buscalos en internet como "codigos javascript", ya verás que fácil y divertido. La mayoría son para pegar el código directamente en tu página web.
Un ejemplo:
copia en el body de tu página web esto:
<div id="blink">Hola!</div>
<div id="blink" onclick="BlinkIt ()"></div>
Ahora copia en el archivo nuestrojavascript.js esto:
window.setInterval (BlinkIt, 500);
var color = "red";
function BlinkIt () {
var blink = document.getElementById ("blink");
color = (color == "#ffffff")? "red" : "#ffffff";
blink.style.color = color;
blink.style.fontSize='36px';}
Abre la web. ¡¡¡Parpadea!!!
Y no te olvides si quieres ampliar conocimientos con el Fantástico libro "Fundamentos de Programación" aprender a programar muy fácil, que incluye un Curso Básico de JavaScript Para practicar lo que aprendas: Informatica Básica y JavaScript
Si te ha gustado haz click en Compartir, Gracias:
© Se permite la total o parcial reproducción del contenido, siempre y cuando se reconozca y se enlace a este artículo como la fuente de información utilizada.
TAMBIEN TE PUEDE INTERESAR
Fundamentos de Programacion
Programacion Informatica
Lenguajes de Programacion
Que es Software
Sistemas Operativos Moviles
Programar con ActionScript
Pseudocodigo y Ejemplos
