Podremos añadir código JavaScript a nuestro proyecto:
Directamente en el archivo HTML
En un archivo JavaScript externo
De ambas maneras
1. Añadir JavaScript a nuestro proyecto
Para añadir JavaScript directamente a nuestro documento HTML, tenemos que hacer uso del elemento <script> indicando como atributo que tipo de script se va a usar:
<script type="text/javascript">
...
</script>Es la manera mas utilizada aunque en algún caso no podemos encontrar con el tipo:
<script type="text/ecmascript">O simplemente un script sin el uso del atributo "type":
<script>Podremos incluir este elemento tanto en la parte de la cabeza <head>, como en la parte del cuerpo <body> de nuestro documento HTML.
Por otro lado podremos añadir JavaScript a nuestro proyecto a través de un archivo externo. En este caso se utiliza el mismo concepto de uso que una hoja de estilo externa CSS.
Para añadir un archivo externo simplemente usamos el atributo "src" indicando el nombre o la ruta del archivo JavaScript.
<script type="text/javascript" src="archivo.js></script>En este caso no podremos añadir nada dentro de las etiquetas <script>. En el caso de ser necesario añadir mas código JavaScript, crearíamos unas nuevas etiquetas <script> como las del primer ejemplo.
A continuación se muestra un ejemplo que primero ejecutara el código JavaScript del archivo externo "archivo.js" y luego continuara ejecutando el código incluido en las etiquetas <script>
<!doctype html> <html> <head> <title>Pagina web basica</title> <script type="text/javascript" src="archivo.js"></script> <script type="text/javascript"> // Codigo JavaScript </script> </head> <body> <script type="text/javascript"> // Codigo JavaScript </script> </body> </html>
2. Programar en JavaScript
2.1 Crear diálogos de alerta
Para crear un dialogo de alerta simplemente tendremos que usar la función "alert(...)" indicando entre los paréntesis el mensaje de alerta que se mostrara.
<script type="text/javascript"> alert("HOLA"); </script>
2.2 Añadir comentarios
La forma mas común y usada es utilizar dos barras seguido del comentario:
// Esto es un comentario javascript
Aunque también podremos indicarlo de la siguiente manera:
/* Esto es otro comentario javascript */
2.3 Variables
Para crear una variable JavaScript usaremos la palabra clave "var" seguido del nombre de la variable, (RECUERDA: que JavaScript es sensible a mayúsculas):
var myVariable;
2.3 Arrays
var myArray = ["Toni", "Maria", "Sonia", "Daniel"];
Con la propiedad "length" podremos consultar el total de elementos del array. Nos devuelve un numero entero con el total de items del array:
myArray.length
2.4 Cadenas de texto
Podemos crear cadenas de texto sencillas o enlazar varias cadenas de texto:
var myCadena1 = "Esto es una cadena de texto"; var myCadena2 = "Esto es otra cadena de texto"; var myCadena3 = myCadena1 + myCadena2;
2.5 Números
A parte de almacenar texto y números en una variable, podremos realizar operaciones como: suma(+), resta(-), dimisión(/) o multiplicación(*):
var numeros1 = 4 + 4; var numeros2 = 8 - 4; var numeros3 = numeros1 / numeros2; var numeros4 = numeros2 * numeros1;
2.6 Condicionales
Los condicionales son usados frecuentemente ya que dan muchas posibilidades. Para crear un condicional usaremos la función "if (condición)", la condición podrá ser verdadero o falso. En caso de ser verdadero se ejecutara el código expuesto dentro de la función.
Para crear una segunda condición tendremos que usar la función "else if (condición)".
En el caso de que no queramos indicar ninguna condición mas y crear una condición general, terminaremos la función con "else"
if (temperatura > 50) { alert("Demasiado calor"); } else if (tiempo == "lloviendo") { alert("Esta lloviendo"); } else { alert("Dia soleado"); }
2.7 Bucles
Tenemos dos tipos de bucles principales:
for (var i = 0; i < 10; i++) { // Codigo a repetir }
while (condicion) { // Codigo a repetir }
El bucle "for" se divide en tres partes: Variable, Condición, Operador. La variable se suele iniciar a 0, la condición del ejemplo es de 0 hasta 10. Y el operador ira sumando 1 a la variable por cada repetición.
Por otro lado el bucle "while" tiene entre paréntesis una condición que mientras sea verdadero el bucle va a seguir repitiéndose hasta que la condición sea false.
3. Crear funciones en JavaScript
Todo programador debería saber una regla de oro a la hora de programar nuestro código, siempre que sea posible debemos reutilizar nuestro código consiguiendo con ello no repetir funciones o fragmentos de código.
3.1 Crear una función
Para crear una función se debe utilizar la palabra clave "function"
function sumar() { // Codigo a ejecutar }
3.2 Añadir argumentos a la función
Cogiendo el ejemplo anterior, podemos añadir argumentos a nuestra función dentro de los paréntesis:
function sumar(num1, num2) {
alert(num1 + num2);
}
Cuando llamemos a la función pasándole como argumento dos números, se mostrara un dialogo de alerta con la suma de los dos números.
3.3 Llamar a una función
Para utilizar una función simplemente usamos su nombre y colocamos los argumentos si los tuviera:
sumar(21, 4);
3.4 Mejorar la función "sumar"
Si nos paramos a observar la función "sumar", se utiliza como argumentos dos números. En el caso de que tuviera como argumento un texto nos daría error. Para corregir esto, JavaScript incluye la función "isNaN" que nos permite comprobar si una variable "no es un numero". En el siguiente ejemplo se muestra como comprobar los argumentos a través de condicionales:
function sumar(num1, num2) { if (isNaN(num1)) { alert(num1 + " no es un numero"); } else if (isNaN(num2)) { alert(num2 + " no es un numero"); } else { alert(num1 + num2); } }
4. Crear Objetos
Para crear un objeto lo haremos de la siguiente manera:
var coche = { "color": "rojo", "tipo": "automovil" };
De esta forma creamos un objeto "coche" con dos propiedades: "color" y "tipo". Podremos acceder a cualquier propiedad de la siguiente manera:
coche.color;
coche.tipo;
4.1 Añadir mas propiedades al objeto
En cualquier momento del código podremos añadir mas propiedades a nuestro objeto de la siguiente manera:
coche.ruedas = 4;
Para terminar podremos recorrer todas las propiedades de nuestro objeto con el siguiente bucle "for":
for(var i in coche) { alert(coche[i]); }
5. Acceder a elementos HTML
Podremos acceder a cualquier elemento HTML a través de su "id" utilizando la función "GetElementById". En el siguiente ejemplo se vera mas claro:
<!doctype html> <html> <head> <title>Pagina web basica</title> </head> <body> <div id="myDIV">Hola</div> <div class="divClass">Segunda Linea</div> <div class="divClass"> <p class="pClass">Esto es un parrafo</p> </div> <div class="divClass">Ultima linea</div> <script type="text/javascript"> var DIV = document.getElementById("myDIV"); alert("El contenido es: " + DIV.innerHTML); DIV.style.border = "3px solid black"; DIV.innerHTML = "Ahora se cambia el texto"; </script> </body> </html>
En el código JavaScript lo primero que hacemos es almacenar el elemento <div> que muestra un "Hola" en la variable "DIV". Y Para ello usamos la función "GetElementById".
Lo siguiente que hacemos es mostrar un dialogo de alerta con el contenido del elemento <div>.
Y automáticamente cuando cerremos el dialogo de alerta entraran en acción las dos ultimas lineas de código JavaScript. Que simplemente le estamos diciendo que aplique un borde a ese elemento <div> y que cambie el texto.
6. Trabajar con el navegador web
6.1 Detectar navegador
JavaScript tiene un objeto llamado "navigator" que nos permite detectar cosas sobre el navegador web que se esta utilizando, como por ejemplo la versión. En este caso el objeto navigator posee una propiedad llamada "userAgent" que nos permite conocer la versión del navegador.
<!doctype html> <html> <head> <title>Pagina web basica</title> </head> <body> <div id="salida"></div> <script type="text/javascript"> var salidaDIV = document.getElementById("salida"); var userAgent = navigator.userAgent; salidaDIV.innerHTML = "Estas usando: " + userAgent; </script> </body> </html>
Con el código anterior conseguimos que muestre un texto mas la versión del navegador en el elemento <div>.
Para ello almacenamos en una variable el elemento <div>, como en el ejemplo anterior.
Seguidamente creamos otra variable en la que almacenamos lo que nos devuelve el objeto "navigator.userAgent".
Y por ultimo cambiamos el texto del elemento <div> y mostramos un texto mas lo almacenado en la variable "userAgent".
6.2 Redireccionar a otra pagina web
De vez en cuando nos encontramos webs que nos muestran un texto similar a este: "Haga click aquí si usted no esta siendo redirigido". Normalmente si tu navegador tiene activado JavaScript no hace falta pulsarlo ya que te redirecciona automáticamente. Pero habrá casos en que el navegador no disponga de JavaScript y para ello se usa esta característica.
El objeto "location" nos ofrece la posibilidad de redirigir a otras paginas web y su uso es muy simple:
<!doctype html> <html> <head> <title>Pagina web basica</title> </head> <body> <div> <a href="http://elbauldeandroid.blogspot.com.es/"> Haz click aqui si no eres redirigido... </a> </div> <script type="text/javascript"> window.location.replace("http://elbauldeandroid.blogspot.com.es/"); </script> </body> </html>
Lo primero que hacemos en el ejemplo es crear un enlace a otra pagina, necesario ya que puede haber usuarios que en su navegador no tengan activado JavaScript.
El siguiente paso es crear un script para que acceda al enlace de forma automática sin la acción del usuario. Para ello utilizamos la función "location.replace" indicando entre paréntesis la pagina web que va a ser redirigida.
Con esto concluimos la iniciación a JavaScript. Podremos encontrar información mas detallada sobre todo lo expuesto en el articulo buscando un poco en Google.
No hay comentarios:
Publicar un comentario