JS

JavaScript

JS con eje.visualizables: http://www.javascriptya.com.ar/
Link: efectos dinámicos JS,CSS: http://www.dynamicdrive.com/
Link: líneadecodigo.
Ejemplo javascript del factorial de un número: http://lineadecodigo.com/javascript/factorial-javascript/

Link: añadir javascript en html : javascriptkit.com
Link: videotutorial inglés dreamweaver y javascript: http://computing.training/index.php/ict
Tutoriales HTML,JavaScript,CSS,..con edición: http://www.w3schools.com/default.asp
VideoTutorial inglés del DreamWeaver y JavaScript: computing.training.
Editor Html, CSS, javaScript online:   http://www.htmlinstant.com/


1.- ¿QUÉ ES JS?
JavaScript es un lenguaje de programación Script, creado por la empresa Netscape, que se utiliza principalmente para crear páginas web dinámicas (su contenido cambia en el tiempo), 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.

Existen al menos tres formas de incluir código JavaScript en las páginas web:
  1. Incluyéndo el script dentro del mismo documento HTML. Metiendo el código JavaScript entre las etiquetas <script> 
  2. Incluir trozos de javascript en cada una de las etiquetas del HTML que queramos. Este método es el menos utilizado porque "ensucia" mucho el código fuente.
  3. En un archivo externo. Enlazando dicho archivo con el código HTML de la página web a través de etiquetas que también están incluidas dentrod de la etiqueta <script> con la dirección del archivo creado bajo extensión "js" (src="archivo.js"). Este último método es el más recomendable puesto que si tenemos un sitio web con muchas páginas,solo sería necesario modificar el JS una sóla vez y no en cada una de las páginas. 




ACTIVIDADES:

1º) Vamos a poner nuestro primer código JavaScript dentro de la web. La primera instrucción que vamos aprender es la siguiente:  
alert("Esto es JavaScript"); 

Muestra una alerta con el texto que hay entre las comillas en el navegador. Vamos a incluirla dentro del HTML:

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




2º) Si usamos el otro método (crear un archivo a parte) lo  primero crearemos nuestro archivo .js con la instrucción. Para ello, abrimos el editor de textos y escribimos:

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

Ahora vamos a decirle a nuestra web anterior que nos lee el archivo nuestrojavascript.js que estará en la misma carpeta. 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 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>



3º) Vamos a añadir otra instrucción a nuestro JS.  Escribamos un texto. Copia esto en el archivo nuestro javascript.js
document.write("texto"); 

Esta instrucción escribe lo que pongamos entre paréntesis en la web.Si tenemos un texto muy largo y queremos dividirlo en dos líneas tenemos que hacer lo siguientes  dependiendoe 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.


4º) Botón que al ser pulsado vuelve a la página anterior de la que hubiera en ese momento.



Se trata de un botón para volver hacia atrás, a semejanza del que tenemos en la barra de herramientas del navegador. Al pulsar el botón se realiza una instrucción Javascript.

Dicha instrucción Javascript, llamada history.go(-1), se encuentra dentro de un atributo de HTML, onclick, lo cual indica que esa instrucción SOLAMENTE se ejecutará cuando se realice la pulsación del botón, representado por la etiqueta HTML . 
Un poco más técnico, el evento es pulsar el botón (onclick) y la acción (history.go(-1)) es volver a la página anterior en el historial de navegación.
Para verlo correctamente, ejecuta primero Ejemplo01.html! (Necesita el Ejemplo02 alguna página para volver para atrás).






5º) Visualiza por pantalla el nombre introducido por teclado



En muchas ocasiones será de gran utilidad recoger un dato por teclado y guardarlo para posteriormente tomar decisiones según lo que se haya introducido (muy útil por ejemplo para los accesos de los usuarios a las páginas). En este ejemplo, la variable que definimos, nom nos servirá para guardar lo que introduzcamos por teclado a través de la función prompt de Javascript.


6º) Ejemplo que pide confirmación para visitar una página.




En algunas páginas Webs cuando accedemos a ellas nos piden que confirmemos que somos mayores de edad para que podamos entrar en ellas. Esta confirmación lo podemos hacer con Javascript. La función confirm visualiza una ventana emergente de confirmación (con el texto que le indiquemos) cuyas opciones que nos da son Aceptar o Cancelar dicha confirmación. Devolverá dicha función un “trae” (si pulsamos Aceptar) o un “false” (si pulsamos Cancelar) y en el ejemplo solamente visitaremos la página oficial de la saga tan famosa de Star Wars cuando al pulsar sobre el enlace hayamos pulsado Aceptar.



7º) Ejemplo que visualiza un reloj digital.


Este ejemplo es muy útil para visualizar en una página html un reloj dígital que se va actualizando cada 500 milisegundos. Como se puede apreciar, se crea un intervalo de ejecución de 500 milisegundos de la función “Ver_Hora.” Ver_Hora() recoge la hora, la formatea con la representación hh:mm:ss (hora, minutos, segundos) y la visualiza dentro del objeto del html, identificado con el nombre de “mireloj”. Dicho objeto, se encuentra dentro del documento de html, a su vez en el único formulario existente y definitivamente en un botón en forma de texto .

Es por esto que al referenciarlo para escribir en él la hora Javascript lo haga de la siguiente forma:
document.forms[0].mireloj.value

Si hubiera otro formulario en la página que lo contuviera sería de la siguiente manera:
document.forms[0].mireloj.value

Esto es lo que se denomina anidamiento de objetos (dentro de unos hay otros).


8º)  Ejemplo que muestra una galería de imágenes.


Este es un ejemplo práctico de cómo crear una galería de imágenes con Javascript. 

Tenemos una etiqueta <img> en html denominada también con el nombre “img” que iremos cambiando, según lo que elijamos dentro del formulario imágenes en las opciones de selección <select> llamados conjuntamente imagen.
 
Al cambiar (onChange) de selección, se ejecutará la función ver_imagen() que cargará en el objeto llamado img ( document.images.img.src) el contenido del valor (value, en este caso contienen ficheros de imágenes – 1.jpg,2.jpg…) de la opción que en ese momento hayamos seleccionado (document.imagenes.imagen.selectedIndex) del objeto imagen:
document.imagenes.imagen.options[document.imagenes.imagen.selectedIndex].value



9º) Ejemplo que construye un correo electrónico para ser mandado.



Un ejemplo muy práctico. Podemos construir un correo electrónico en Javascript simplemente generando un string con la estructura siguiente:

mailto:correo@destino?subject=Asunto del correo&body=Cuerpo

Y después asignar a la siguiente función de Javascript location.href el string que hubiésemos construido. Al ejecutar esto último, se abrirá nuestro gestor de correo predeterminado con el correo que quisiésemos mandar, ya totalmente completado y listo para ser enviado.


10º)  Cambiar el color del fondo dinámicamente
 
En este ejemplo, lo que haremos es cambiar el color de fondo de la página dinámicamente, es decir, mientras se está viendo la página, a través de unos botones situados en ella.

Al pulsar cada botón se llama a la función creada en Javascript llamada poner_color_fondo(), pasándole como parámetro el nombre de un color.

Poner_color_fondo(color) asigna a la propiedad document.bgColor (que representa el color de fondo de la página) el valor del parámetro color.


Este ejemplo aunque sencillo pone de manifiesto la potencia de Javascript y abre la gran idea de la personalización de las páginas por parte de los usuarios como ellos gusten (claro está, siempre añadiendo una interfaz sencilla, como muestra la del ejemplo, con botones), ya que Javascript no solo permite modificar el color de fondo, sino que cualquier elemento que esté presente en dichas páginas.



11º) Emplazar a diferentes páginas según la resolución del monitor




A veces, los diseñadores de páginas realizan una misma web con diferentes resoluciones, para que se pueda adaptar a diferentes tamaños de monitores y resoluciones de pantalla y de esta manera, se consiga un mayor número de público para la misma, es lo que se conoce como accesibilidad.


Con Javascript, se puede preguntar que resolución tenemos actualmente en la pantalla y así realizar diferentes acciones según la que tengamos. Las instrucciones en Javascript que indican la resolución son las siguientes:

screen.width: para la resolución del ancho de la pantalla en píxeles.
screen.height: para la resolución del alto de la pantalla en píxeles.
 



12º) Abrir una ventana pop-up cada cierto tiempo
 
Ejemplo que    abre una ventana emergente cada 3 segundos. Pulsando el botón no se abren más. A  continuación mostramos un ejemplo de cómo abrir ventanas emergentes (o también    llamadas pop-up) cada cierto tiempo automáticamente. 
Este ejemplo es muy útil  para abrir ventanas de publicidad aparte de la principal.    
En el    ejemplo se define un intervalo de ejecución en Javascript con la función setInterval que lo que hará es ejecutar la función abrir_ventana() cada 3 segundos (3000 milisegundos). 

La función    abrir_ventana() contiene la función window.open que lo que hará es abrir una nueva página conteniendo la web del Ministerio de    Educación. 
Al pulsar sobre el botón se ejecutará el código Javascript clearTimeout que detendrá el intervalo    de ejecución de abrir ventanas continuamente.




2.- MAS SOBRE JAVASCRIPT.

Las Variables
Una variable es como una caja donde metemos cosas (datos). 
Estos datos los podemos ir cambiando, ahora meto un 3, ahora lo quito y meto un 5.
 
Una variable tiene 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. 
Ojo las mayúsculas y minúsculas son muy importantes en las variables, no es la misma variable numero que Numero, son dos diferentes. OJO tampoco se pueden poner acentos en el nombre de las variables.
Las variables también tienen un valor que es lo que hay dentro de ella (en la caja) en ese momento y que puede ir variando según se vaya desarrollando el programa, por eso se llama variable.
 
Una variable dependiendo de su valor puede ser numérica, si solo puede tener un valor numérico, de texto, si solo puede contener texto (letra, palabra o frase (string).
En las variables de texto, su valor (el texto), debe ir entre 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 otras variables que se llaman booleanas que 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ón siempre 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.
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.
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
 

EJERCICIOS:
  1. - Intenta hacer una calculadora que sea capaz de multiplicar dos o tres números.
  2. - Haz un programa que calcule la raiz cuadrada de un número dado.
  3. - 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.
  4. - 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 
  1. - 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 CONDICIONAL 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
  1. - Crea un programa que introduzcamos 2 números y el programa nos diga cual es el mayor de los dos.
  2. - 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
  1. - 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ía si 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. 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 puesta en dirección URL. Mira el siguiente programa:
if (confirm ("¿Quieres ir a la Página de Tecnologia?"))
{window.open("http://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?.
  1. Intenta hacer un juego en el que el usuario tenga que adivinar un número entre 0 y 5 elegido por el programa (aleatorio).
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
Una estructura repetitiva permite ejecutar una instrucción o un conjunto de instrucciones varias veces.
Primero empecemos por algo sencillo. Queremos que se repita una frase varias veces. Fíjate en el programa 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 parte de un valor 1, escribirá la frase la primera vez por que 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.
  1. Creemos un programa que nos escriba los números del 1 al 100.
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;
}
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: 

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")};
Vamos a mejorarlo:
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!!!! 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:

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("http://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:
  1. - document es para decirle que queremos recoger algo que está dentro del documento html.
  2. - 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.
  3. - [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.
  4. - 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';}

Suscribirse a: Entradas (Atom)