Hasta ahora hemos visto como crear una página web con HTML y como darle estilo con CSS, con JavaScript nuestra página web va a tomar “movimiento”, vamos a poder interactuar con el navegador (abrir ventanas, ir adelante o atrás en el histórico…) e interactuar con los elementos de nuestra página web (verificar formularios, añadir/eliminar contenido, …).
JavaScript es el lenguaje de script de más amplio uso en la web y con las últimas tendencias de aplicaciones cliente se está convirtiendo en el lenguaje de programación más importante para el entorno web. En los últimos años han salido librerías como jQuery y framewoks como AngularJS o Node.js con lo que está adquiriendo un gran potencial.
Aunque su nombre lo sugiere, nada tiene que ver con Java. Su nombre es una táctica comercial de Netscape cuando allá por el año 1995 lo introdujo en su navegador. Por lo que ni es una versión reducida de Java ni es un lenguaje simple.
JavaScript es un lenguaje orientado a objetos, aunque con distinta filosofía que C++ y Java, no existen las clases y los objetos son colecciones de métodos y propiedades (más adelante veremos lo que es un objeto de este lenguaje).
Su sintaxis es similar a C++ o Java, aunque es menos restrictiva, no es obligatorio poner ; al final de la sentencia (aunque recomendable), no es obligatorio declarar variables …
Su léxico diferencia entre mayúsculas y minúsculas, los comentarios son como C/C++, el ; es opcional si cada sentencia está en una línea (aunque nosotros recomendamos ponerlo siempre), las declaración de variables no es obligatoria, aunque aconsejable y estas no tienen tipo. Por lo que JavaScript es un lenguaje no tipado, es decir, si declaramos una variable esta puede almacenar tanto números como caracteres. Una gran diferencia con otros lenguajes de programación:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//Esto es un comentario en JavaScript var i; // declaramos la variable i i = 5; // i vale ahora 5 i = “Hola”; // i vale ahora Hola j = i; // j sin declarar y vale Hola /* Esto es un comentario multilinea */ alert(j); //muestra en un pop-up Hola |
Los tipos de datos en JavaScript pueden ser numéricos, booleanos, cadenas y objetos (función, array, fecha, expresión regular). Los operadores y sentencias son iguales que en C++ y Java. Os mostramos un ejemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var numero1, numero2; var cadena1, cadena2; var resultado; numero1 = 5; numero2 = 4; resultado = numero1 + numero2; //Resultado vale 9 cadena1 = “Hola”; cadena2 =”Mundo”; resultado = cadena1 +” “+cadena2; //Resultado vale Hola Mundo |
Las funciones en JavaScript son objetos, y como tales, se pueden usar como cualquier otro valor. Las funciones se crean con la palabra clave function junto a los parámetros sin tipo rodeados por una pareja de paréntesis. Para devolver cualquier valor dentro de una función se usa la instrucción return:
|
1 2 3 4 5 6 |
function suma(alfa, beta) { //instrucciones return alfa + beta; } ret = suma(2,4); //ret tomara el valor de 6 |
Todo en JavaScript es un objeto. Un objeto es un contenedor de propiedades (cada propiedad tiene un nombre y un valor), y por tanto, son útiles para coleccionar y organizar datos.
|
1 2 3 4 |
var persona = new Object(); persona.nombre = "Paco"; persona.apellido = "Jones"; |
Los Arrays, son otro tipo de objeto, se trata de un medio para guardar un conjunto de datos que mantienen una relación. En JavaScript pueden contener datos de diferente tipo:
|
1 2 3 4 |
var aux = new Array(); aux[1] = 5; aux[2] = “Hola”; |
Como hemos dicho al principio, con JavaScript podemos interactuar con el navegador, a través del BOM (Browser Object Model) y con los elementos de la página web, a través del DOM (Document Object Model).
Para interactuar con el navegador (BOM) nos servimos de una serie de objetos:
- Window (todo lo relacionado con ventanas y mensajes)
- Navigator (propiedades del navegador)
- Location (propiedades sobre la URL)
Un archivo HTML al final es un árbol de nodos, con etiquetas, atributos y contenido. A través del DOM podemos acceder a ellos. Para interactuar con los elementos de la página web tenemos diversos métodos que recorren los nodos como parentNode y childNodes. También disponemos de métodos más usuales que son los que utilizamos para obtener valores de nuestros elementos en nuestra página web:
- getElementByID() – Accede al elemento con id especifico
- getElementsByTagName() – Devuelve un lista de nodos con el name especifico
También a través del DOM podemos modificar por ejemplo el CSS utilizando la propiedad style.
Para insertar el código JavaScript en nuestra página web, lo podemos insertar en el mismo HTML, pero al igual que pasaba con CSS no es la mejor forma ya que no es reutilizable y por lo tanto pierde eficacia. La forma más eficiente es con un archivo aparte para así poder reutilizar el código. Lo enlazaríamos de la siguiente forma:
|
1 2 3 |
<head> <script type="text/javascript" src="script.js"></script> </head> |
También podríamos poner código JavaScript directamente en el manejador de evento:
|
1 |
<button value="Mide pH" onclick="alert('Arduino no está preparado')"> |
Recordamos que los eventos son acciones que ocurren generalmente porque el usuario hace algo sobre un elemento de la pagina web (pulsa un botón, modifica un desplegable, mueve el ratón…). JavaScript los utiliza y los maneja para interactuar con la página. Por ejemplo tenemos un formulario y al darle al botón enviar llamamos a una función JavaScript que nos verifica que los campos estén rellenos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<form id="Formulario" onSubmit="AccionFormulario()"> <table> <tr> <th id="UsuText" align="left">Usuario:</th> <th><input id="Usuario" type="text"></input></th> </tr> <tr> <th id="PassText" align="left">Contraseña:</th> <th><input id="pass" type="password"></input></th> <th><input type="submit" value="Enviar"></input></th> </tr> </table> </form> |
|
1 2 3 4 5 6 7 8 9 10 11 |
function AccionFormulario() { if (document.getElementById("Usuario").value == "" || document.getElementById("pass").value == "") { alert("Rellena los campos son obligatorios"); return false; } else{ return true; } } |
Como podéis ver en el anterior código en el evento onSubmit llamamos a la función JavaScript AccionFormulario() que con los métodos del DOM getElementById comprobamos si los campos del formulario están vacios.
Antes de acabar, mencionaros una técnica para realizar peticiones HTTP al servidor desde JavaScript, AJAX (Asynchronous JavaScript And XML), muchos de vosotros ya la habréis oído. Con ella podemos recibir respuestas de un servidor sin necesidad de recargar la página ni cambiar a otra distinta. Esta técnica la veremos con más detenimiento en próximos artículos.
Y ya para terminar, recordaros que existen librerías como jQuery que nos hacen más fácil el acceso y la manipulación a los elementos de nuestra página web y frameworks como AngularJS que facilitan un patrón de diseño MVC en la parte del cliente. Nuestra recomendación es que primero conozcáis y practiquéis con JavaScript puro y duro y luego os paséis a una librería más avanzada. Por nuestra parte, os presentaremos estas tecnologías en los próximos podcast y también escribiremos artículos sobre ellas.
