¿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. 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. Nosotros vamos a crear una página web muy 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>
Crea una carpeta con el nombre JavaScript y Guarda dentro el archivo con el nombre web.html
Ahora abre el archivo (botón derecho abrir con...) con tu navegador. Verás una web que pone "Hola Mundo". No necesitamos más. 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> de la web. No es el más recomendable.
- Creando un archivo .js y crear un enlace desde la web en html para que vaya a leerlo cuando se visualice la 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:
<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 ;.
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>
¿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 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 = 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, 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, por ejemplo.
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 y nos da como resultado escrito el valor de la variable de texto Edad. OJO 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 variabel Edad. Fíjate que Edad solo la declaramos con var una vez al principio. Borra del archivo web.html el texto para que no aparezca más y no nos moleste.
¿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);
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.
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:
- 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.
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 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 que 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.
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í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)
¿Estas preparado para crear tu primer juego con JavaScript?.
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.
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 preguntarla, 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.
Estructuras Repetitivas en JavaScript
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 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 o que hay dentro de los corchetes.
La última línea dentro de los corchetes 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 final cambia el valor de i, se le suma 1 al valor que tenía y pasará a ser de 2 (i = i +1). ¿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.
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!!!! 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:
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.
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 algo 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.
Abre el archivo nuestrojavascript.js y escribe lo siguiente:
function mifuncion() {document.write("¡¡¡Estupendo el Boton Hace lo que Queremos!!" )}
Hemos creado una función llamada mifuncion(), siempre hay que poner () detrás del nombre de la función. Una función no es más que un trozo de código que hace algo.
Ahora vamos a decirle al boton, en la web en html, que lea esa función cuando apretemos el boton (onclick)
<input type="button" value="Click Aquí" name="boton1" onclick="mifuncion()"" />
¿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. ¡Ya estas preparado para empezar andar por tu mismo!. En internet tienes muchos ejemplos que podrás hacer y entender.
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 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!!!
No hay comentarios:
Publicar un comentario