Máster Universitario Online en SEO, SEM, Social Media y Web Analytics

Inicio » B11 Fundamentos en Tecnologías Web » Artículo 1.25 Introducción a Javascript

Artículo 1.25 Introducción a Javascript

Artículo 1.25 Introducción a JavaScript

Rubén Alcaraz

Rubén Alcaraz. Artículo 1.25 Introducción a JavaScript. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Información Digital. Barcelona: UPF Barcelona School of Management.

 

Sumario

1.Introducción

2. JavaScript

2.1. JavaScript en un documento HTML

2.2. Sintaxis y elementos principales

2.2.1. Variables

2.2.2 Operadores

2.3. Estructuras de control de flujo

2.3.1. Estructura if

2.3.2 Estructura if… else

2.3.3 Estructura for

2.3.4 Estructura while

2.3.5 Estructura do while

2.4 Funciones

2.5 Métodos

2.6. Objetos predefinidos del lenguaje

2.6.1. El objeto String

2.6.2. El objeto Date

2.6.3. El objeto Array

2.6.4. El objeto Math

2.6. Bibliotecas y APIs de JavaScript

3. JavaScript y SEO

4. JavaScript y usabilidad

5. JavaScript y accesibilidad

6. Conclusiones

7.Bibliografía

Nota sobre la evaluación: bien de forma intercalada en el texto, bien al final del artículo, encontrará el enunciado de una o diversas actividades. Para superar esta unidad didáctica deberá realizar estas actividades redactando un informe con comentarios y si resulta pertinente una captura de pantalla de cada actividad para ilustrar su realización. Para entregar este informe deberá crear un documento en formato PDF y usar el espacio de entrega del aula virtual perteneciente a esta unidad didáctica.

1. Introducción

JavaScript es uno de los lenguajes de programación más utilizados para añadir dinamismo a las páginas web. Una página web dinámica es aquella que incorpora ciertos efectos como elementos que aparecen y desaparecen, animaciones, eventos que se disparan cuando el usuario pulsa un botón, etc. En el manejo de formularios, JavaScript también es útil para la validación de los datos introducidos por el usuario, procurando de esta manera, que los datos que llegan al servidor sean correctos, con independencia de posibles segundas validaciones que se puedan realizar en este otro entorno. En definitiva, podemos asegurar que, actualmente, es muy difícil encontrar páginas web en las que JavaScript no esté presente de una u otra manera.

El objetivo de esta unidad no es que el estudiante aprenda a programar en JavaScript, cosa a la que podríamos dedicar todo un curso, pero sí realizar un primer acercamiento a este lenguaje de programación, ser capaz de identificar sus principales elementos, conocer la sintaxis básica y practicar con algunos de los principales métodos y funciones del lenguaje. Pero, sobre todo, saber cuáles son sus implicaciones en las distintas disciplinas tratadas en el máster (SEO, usabilidad, accesibilidad…). Para aquellos alumnos que deseen profundizar en el tema, al final de la unidad se propone bibliografía especializada y una selección de tutoriales gratuitos en acceso abierto que no son obligatorios para superar la unidad.

Los ejemplos de código vistos a lo largo de la unidad pueden descargase de: https://drive.google.com/file/d/0B1EYQqPQ5CqNRk1fX1VNNUVBLWs/view?usp=sharing

Para visualizarlos, simplemente deberéis abrir los diferentes documentos HTML en vuestro navegador.

2. JavaScript

JavaScript es un lenguaje de programación definido como orientado a objetos basado en prototipos (classless, o no basado en clases como otros lenguajes como Java). Los lenguajes de programación orientados a objetos usan los objetos en sus interacciones para diseñar aplicaciones y programas informáticos. Un objeto es una unidad dentro de un programa informático que consta de un estado y de un comportamiento, que a su vez constan respectivamente de datos almacenados y de tareas realizables durante el tiempo de ejecución. En JavaScript, todos los elementos se tratan como objetos (los datos, las variables, las funciones, etc.).

Javascript tiene una sintaxis parecida a C y adopta nombres y convenciones de Java, ambos también lenguajes de programación. A menudo, JavaScript es confundido con Java. Aunque los dos presentan una sintaxis parecida y en ambos casos están orientados a objetos, su propósito y ámbito de aplicación son diferentes. Java, como lenguaje compilado, encuentra su uso más habitual en el desarrollo de aplicaciones que se ejecutan en el servidor o en entornos de escritorio. En cambio, JavaScript se ejecuta normalmente en el lado del cliente, es decir en el navegador del usuario. Esto permite a los programadores crear pequeños programas, también conocidos como scripts, capaces de consultar las propiedades del navegador, inspeccionar y modificar la estructura de la página que se ha cargado, o reaccionar a eventos disparados por el usuario (por ejemplo, al pulsar un botón, al rellenar o enviar un formulario, al arrastrar un objeto, etc.), sin necesidad de enviar datos al servidor de origen. Todo esto añade dinamismo a las páginas web estáticas creadas con HTML. Aunque como hemos comentado anteriormente JavaScript se utiliza fundamentalmente en el lado del cliente, en los últimos años el uso de este lenguaje de programación también se ha empezado a utilizar en el lado del servidor gracias a frameworkscomo Node.js o RingoJS.

El DOM (Document Object Model), responsabilidad del W3C, es una de las tecnologías que más ha aportado a la creación de páginas web dinámicas. Esta API permite a los programadores acceder a las páginas HTML y a sus elementos para manipularlos. En la actualidad, se puede utilizar desde prácticamente cualquier lenguaje de programación (PHP, JavaScript, Java, etc.). En la práctica, manipular el DOM permite a los programadores transformar las páginas estáticas, por ejemplo, añadiendo nuevos elementos cuando ésta carga, modificando elementos cuando el usuario interactúa con ellos o cuando se cumple una condición determinada (cada 5 segundos, cuando el valor de un formulario no es correcto, etc.).

2.1. JavaScript en un documento HTML

La integración de JavaScript en un documento HTML es muy flexible. Tanto, que existen tres maneras diferentes de incluirlo en nuestras páginas web.

La primera de estas maneras consiste en incluir el programa escrito en JavaScript dentro del mismo documento HTML. Para ello, debemos utilizar la etiqueta , la cual contendrá el código de nuestro programa. Esta etiqueta se puede incluir en cualquier sección de la página, aunque lo más recomendable es ubicarla en la cabecera del documento. En los últimos años, se ha tendido a ubicar ciertos programas en la parte inferior del documento, justo antes de la etiqueta de cierre , con el objetivo de optimizar el tiempo de carga de las páginas. Se trata de una buena solución, aunque se ha de tener en cuenta que, en algunos casos, es posible que el hecho de que los elementos HTML carguen antes que el programa puede provocar que éste no funcione hasta que la página cargue totalmente.

En el ejemplo siguiente, podemos ver la integración de código JavaScript dentro de la cabecera del documento HTML, entre las etiquetas <script type=”text/javascript”></script>:

 

<!DOCTYPE html>

<html lang=»es»>

<head>

<script type=«text/javascript»>

function miFuncion() {

document.getElementById(«demo»).innerHTML = «Aquí un nuevo contenido!»;

}

</script>

</head>

<body>

<p id=«demo»>Pulsa el botón para cambiar el contenido de esta frase.</p>

<button onclick=«miFuncion()»>Pulsa!</button>

</body>

</html>

 

El ejemplo anterior puede probarse en la siguiente dirección: https://jsfiddle.net/ralcaraz/z0gkn6h2/

 

La segunda manera de añadir un programa en JavaScript a nuestra página es escribiendo el código de nuestro programa en un fichero externo con extensión .js, y enlazarlo a nuestro documento mediante una etiqueta <script>. Como en el caso anterior, lo más habitual es encontrar estas etiquetas en la cabecera del documento, aunque también se pueden ubicar en otras partes del mismo.

 

<script type=«text/javascript» src=»js/mi-programa.js»></script>

Por último, también es posible incluir JavaScript dentro de un elemento HTML. Para ello se utilizan diferentes eventos que definidos en un elemento HTML, y asociados a una determinada función, crean un efecto cuando el usuario interactúa con ese elemento.

<button onclick=«FuncionX()»>Pulsa</button>

En el siguiente vídeo te explico cómo añadir JavaScript a una página HTML.

2.2. Sintaxis y elementos principales

La sintaxis de un lenguaje de programación es el conjunto de reglas a seguir cuando escribimos un programa para que éste pueda considerarse correcto. Como hemos comentado anteriormente, la sintaxis de JavaScript es muy similar a la de otros lenguajes de programación. Sus principales características son:

  • No define el tipo de variables. Es decir, no necesitamos indicar qué tipo de datos almacena cada una de ellas.
  • Es sensible a mayúsculas y minúsculas (“var num”, “var Num” i “var NUM”) serán interpretadas como tres variables diferentes).
  • No tiene en cuenta los espacios en blanco ni las nuevas líneas.
  • Admite comentarios. Para escribir un comentario de una línea usaremos // texto del comentario, y /* texto del comentario */ para los comentarios de varias líneas.

2.2.1. Variables

Una variable es un elemento encargado de almacenar un valor en un espacio de memoria. Un valor al cual podremos hacer referencia a partir del nombre con el que hayamos definido esa variable. En JavaScript, las variables se crean mediante la palabra reservada “var”. Por ejemplo:

var numeroA = 2;

var numeroB = 3;

En el ejemplo anterior, observamos dos variables “numeroA” y “numeroB”, a las que hemos asignado los valores numéricos 2 y 3 respectivamente. Para acceder a ese valor y utilizarlo, basta con referirnos a ellas mediante su nombre. Por ejemplo:

var suma = numeroA + numeroB

El valor de la variable “suma” es 5.

Entre los diferentes tipos de variables encontramos:

  • Variables numéricas encargadas de almacenar valores numéricos enteros o decimales (se expresan con puntos, no con comas). Por ejemplo:

var precio = 20;

var precio = 19.95;

  • Cadenas de texto en las que podemos almacenar caracteres, palabras o frases. Por ejemplo:

var tituloLibro = «La ventana siniestra»;

  • Arrays, también llamados vectores o matrices, que son colecciones de variables del mismo tipo o diferente. Son una alternativa a la creación de múltiples variables para almacenar varios valores relacionados. Por ejemplo:

var dias = [«Lunes», «Martes», «Miércoles», «Jueves», «Viernes», «Sábado», «Domingo»];

  • Booleanos que almacenan el valor true o false y pueden servir, por ejemplo, para definir estados (encendido/apagado, usuario registrado/usuario no registrado, etc.). Por ejemplo:

 

var esSocio = true;

El acceso a uno de los valores de un array es algo diferente al del resto de variables. En este caso, además de referirnos a él mediante su nombre, también debemos indicar la posición del valor en el índice del array. Por ejemplo, para acceder al valor “lunes” del ejemplo anterior, usaremos “dias[0];”, para acceder al valor martes, usaremos “dias[1];”, y así sucesivamente. Es importante recordar que la primera posición del índice es la posición 0 y no la posición 1.

Por ejemplo, para acceder al valor Miércoles del siguiente array:

var dias = [«Lunes», «Martes», «Miércoles», «Jueves», «Viernes», «Sábado», «Domingo»];

 

Utilizaremos:

dias[2];

 

Si lo que queremos es recorrer todo el array para extraer todos sus valores, debemos utilizar un bucle (explicado con más detalle en el apartado 2.3.3 de este documento):

for (i = 0; i < dias.length; i++){

document.write(dias[i] + »
«);

}

2.2.2 Operadores

Los operadores sirven para manipular el valor de las variables, realizar operaciones con ellas o compararlas. Algunos de los operadores disponibles en JavaScript son:

  • Asignación (=) con el que podemos guardar un valor en una variable. No confundir con el igual que en JavaScript se expresa mediante un doble igual “==”. Por ejemplo:

var precio = 20;

  • Incremento y decremento (++ y –) que se utiliza para incrementar o decrementar el valor de una variable. Por ejemplo:

var precio = 20;

++precio; //el resultado de precio es 21

  • Matemáticos (+, -, *, /) con los que podemos sumar, restar, multiplicar y dividir. Por ejemplo:

var numero1 = 30;

var numero2 = 2;

var resultado = numero1 / numero2; //el valor de resultado es 15

El operador “+” también se utiliza para concatenar cadenas de texto con otros elementos como, por ejemplo, variables. Por ejemplo:

var precio = 20;

var producto = «Camiseta Star Wars»;

var mensaje = «La » + producto + » tiene un coste de » + precio +»€»;

En el ejemplo anterior, creamos una variable (precio) para almacenar un valor numérico (20). Otra (producto) para almacenar una cadena de caracteres (camiseta Star Wars). Y una tercera en la que concatenamos una nueva cadena de caracteres con las variables anteriores. El resultado por pantalla, si imprimieramos la variable mensaje sería:

La Camiseta Star Wars tiene un coste de 20€

donde los valores “Camiseta Star Wars” y “20” se obtienen de sus respectivas variables y se concatenan con el texto almacenado en la variable “mensaje”.

  • Relacionales (>, =, <=, ==, !=) que equivalen a mayor que, menor que, mayor o igual que, menor o igual que, igual y distinto de. Por ejemplo:

var numero1 = 30;

var numero2 = 2;

var resultado = numero1 > numero2; //el valor del resultado es true

  • Lógicos (!, &&, ||) que equivalen a NOT (negación o exclusión), AND (intersección) y OR (unión) respectivamente. Por ejemplo:

var numero1 = 30;

var numero2 = 2;

var numero3 = 10;

numero1 > numero2 && numero1 > numero3 //devuelve true

o lo que es lo mismo:

numero1 es mayor que numero2 AND (Y) numero1 es mayor que numero3.

En el siguiente vídeo te muestro algunos ejemplos del uso de variables.

2.3. Estructuras de control de flujo

Las estructuras de control de flujo nos permiten controlar el flujo de ejecución de un programa, ejecutando unas acciones u otras. A continuación, veremos algunas de las más importantes.

2.3.1. Estructura if

Utilizada para tomar decisiones en función de una condición dada. Su sintaxis es:

if(condición) {
código a ejecutar
}

En el siguiente ejemplo, se declara una variable (x) a la que se le asigna el valor 10. A continuación, se inicia una estructura if en la que, si 12 es mayor que el valor almacenado en la variable x, el programa devolverá el mensaje “12 es mayor que [el valor de x]”. Para imprimir el mensaje en pantalla, se utiliza el método write del objeto document.

 

var x = 10;

if(12 > x){

document.write(«12 es mayor que «+x);

}

Si queremos que el programa sea algo más dinámico, podemos pedir al usuario que nos proporcione el mismo el valor de x. Para ello, utilizamos el método prompt del objeto window, con el objetivo de almacenar en la variable x el valor introducido por el usuario. En este caso, pediremos la nota de un alumno, y evaluaremos la condición para determinar si ha aprobado o no. Es decir, si la nota es mayor a 5.

 

var x = prompt(«Introduce la nota del alumno»);

if(x > 5){

document.write(«El alumno ha aprobado con un «+x);

}

Captura.PNG

Fig. 2. Como resultado del uso del método prompt, al usuario le aparecerá un pequeño formulario en una ventana modal en el que podrá introducir datos.

Esta estructura se puede complicar un poco más añadiendo nuevas condiciones. A continuación, podemos ver un ejemplo en el que se controla también la posibilidad de que la nota introducida sea menor a 5.

 

var x = prompt(«Introduce la nota del alumno»);

if(x > 5){

document.write(«El alumno ha aprobado con un «+x);

}

if(x < 5){

document.write(«El alumno ha suspendido con un «+x);

}

2.3.2 Estructura if… else

Continuando con el ejemplo anterior, si la nota introducida por el usuario fuera igual a 5, el programa no haría nada. Generalmente, en cualquier programa necesitaremos controlar todas las posibilidades que pudieran darse. La estructura if… else, nos permite trabajar con decisiones del tipo “si se cumple la condición, pasa esto; si no se cumple, pasa esto otro”.

var x = prompt(«Introduce la nota del alumno»);

if(x > 5 || x == 5){

document.write(«El alumno ha aprobado con un «+x);

}

else{

document.write(«El alumno ha suspendido con un «+x);

}

En el ejemplo anterior, también utilizamos un OR (x>5 || x==5) en el if, para mostrar el mensaje de aprobado tanto si la nota es superior o igual (==) a 5. En cualquier otro caso, el programa ejecutará la sentencia del else. La primera condición se podría simplificar con el uso del “>=” (mayor o igual).

En el caso de que sea necesario, podemos añadir nuevas condiciones utilizando una cláusula variante el “else if”. Por ejemplo:

var sueldo = prompt(«Introduce el sueldo del trabajador»);

if(x > 1000){

document.write(«El sueldo del trabajador es superior a 1000€”);

}

else if (x < 1000){

document.write(«El sueldo del trabajador es inferior a 1000€”);

}else{

document.write(«El sueldo del trabajador es igual a 1000€”);

}

2.3.3 Estructura for

Cuando lo que queremos es ejecutar una sentencia un determinado número de veces, lo que necesitamos es un bucle. En un bucle for, mientras la condición a evaluar se cumpla, la ejecución de la/s instrucciones que se encuentran dentro del bucle, se ejecutarán en cada iteración (repetición del proceso). Su sintaxis es:

for(inicialización del contador; condición a evaluar; incremento del contador) {

…

}

Por ejemplo:

 

for(i = 1; i < 5; i++){

document.write(«

Iteración número «+i+»

«);

}

En el ejemplo anterior, inicializamos la variable i con el valor 1. A continuación, establecemos como condición para que el bucle se siga ejecutando, que el valor de i sea inferior a 5. Finalmente, incrementamos el valor de i en 1 (i++). Mientras la condición sea cierta, se irá ejecutando el código ubicado dentro de las llaves. En la siguiente imagen podemos ver el resultado de nuestro bucle.

Captura.PNG

Fig. 3. Resultado del bucle for visto en el navegador.

2.3.4 Estructura while

Otro tipo de bucle es el bucle while. Aunque con un bucle while podríamos realizar lo mismo visto con el bucle for, lo normal es utilizar este otro tipo de bucle en aquellas situaciones en las que no sabemos cuándo finalizará el bucle o, en otras palabras, cuántas iteraciones tendrá.

Veamos el ejemplo anterior, implementado con un bucle while:

 

var i = 1;

while(i < 5){

document.write(«

Iteración número «+i+»

«);

i++;

}

En el siguiente ejemplo, mientras el valor de “e” sea igual a “n”, el programa continuará preguntando al usuario si quiere cerrar o no la aplicación. Cuando introduzca una “s”, el bucle finalizará, y con él el programa. Es decir, el bucle no finalizará en un número concreto de iteraciones, sino cuando el usuario así lo indique.

 

var e = «n»;

while(e == «n»){

var e = prompt(«¿Desea cerrar la aplicación? s/n»);

}

2.3.5 Estructura do while

El bucle do while es muy similar al anterior. La diferencia entre ambos radica en que, en el caso del bucle do while, la condición se ejecuta al menos una vez. Supongamos que en el ejemplo anterior el valor de la variable e, lo hubiésemos inicializado en blanco o con una letra diferente a “s” o “n”. En tal caso, al no cumplirse la condición del while (e == “n”) nunca se llegaría a realizar la pregunta. En cambio, con un bucle do while sí porque la evaluación de la condición se realiza al final. Veamos un ejemplo:

 

var e = «»;

do{

var e = prompt(«¿Desea cerrar la aplicación? s/n»);

}while(e == «n»);

 

En el siguiente vídeo te muestro diferentes ejemplos de estructuras de control de flujo.

2.4 Funciones

Una función es un bloque de código pensado para ejecutar una acción. Las funciones se ejecutan cuando algo las “invoca” (un botón pulsado, la carga de una página HTML, un enlace, etc.). Las funciones en JavaScript se definen mediante la palabra reservada “function”, seguida del nombre de la función y un paréntesis de apertura y otro de cierre en el que se podrán incluir, si es necesario, parámetros para esa función. El último elemento de una función es el código que deben ejecutar dentro de dos { }. Su definición formal es:

function nombre_de_la_funcion() {
… // aquí dentro el código que debe ejecutar la función
}

Dentro de la función podemos encontrar variables, operadores, etc., con los que deseamos hacer algo. En el momento que invocamos la función, todo lo que se encuentra en su interior se ejecutará.

function sumar(){

var numero1 = 30;

var numero2 = 2;

var resultado = numero1 + numero2;

alert(«El resultado es » + resultado);

}

En el ejemplo anterior, cada vez que se ejecute la función sumar, se sumarán los valores de las variables “numero1” y “numero2”. A continuación, se mostrará mediante el método “alert” (del que hablaremos más adelante) la cadena de caracteres “El resultado es ”, seguida (concatenada) del valor de la variable “resultado” (32).

Si asociamos esa función, por ejemplo, a un evento onload en la etiqueta , la función se ejecutará justo en el momento en que cargue la página HTML Por ejemplo:

La idea detrás de una función es la de disponer de una porción de código que hace algo, y que podemos reutilizar en diferentes situaciones, en lugar de tener que escribir todas las instrucciones una y otra vez de manera recurrente.

En el siguiente vídeo te muestro algunos ejemplos de funciones.

2.5 Métodos

Al combinar funciones con objetos, obtenemos los métodos. Los métodos son acciones que ejecutamos sobre los datos de un objeto.

Además de los objetos que podemos crear en nuestro programa, el intérprete de JavaScript que incorporan todos los navegadores modernos (Firefox, Chrome, Microsoft Edge, Opera…) crea una serie de objetos que podemos utilizar al programar en JavaScript. De entre esos objetos generados automáticamente destacan los objetos Window y Document. El objeto Window es el objeto principal del que cuelgan el resto de objetos. Y el objeto Document es el contenedor de todos los objetos que hemos insertado en la página web creada (imágenes, enlaces, formularios, párrafos, etc.).

http://docs.oracle.com/cd/E19957-01/816-6409-10/graphics/nav_hier.gif

Fig. 1. Jerarquía de los objetos creados por el navegador al cargar una página web.

Cada uno de los objetos que podemos ver en el diagrama anterior, tienen asignados una serie de métodos. Por ejemplo, para el objeto Window, encontramos el método “alert()”, que nos permite mostrar el típico cuadro de alerta en el navegador, o el método “print()” que nos permite imprimir el contenido de la página activa, entre otros muchos. En el caso del objeto Document, disponemos de métodos como el “getElementById()”, que nos permite hacer referencia a un elemento HTML (<p>, <div>, <span>, etc.) a partir de su ID, para luego hacer con él otras cosas, o el método “document.createElement()”, que nos permite añadir dinámicamente, nuevos elementos a nuestra página HTML cuando el usuario lo activa.

 

<!DOCTYPE html>

<html lang=»ca»>

<head>

<script type=«text/javascript»>

function miFuncion(){

document.getElementById(«demo»).innerHTML = «Aquí un nuevo contenido»;

}

</script>

</head>

<body>

<p id=«demo»>Pulsa el botón para cambiar el contenido de esta frase.</p>

<button onclick=«miFuncion()»>Pulsa!</button>

</body>

</html>

En el fragmento de código anterior, podemos observar un ejemplo de uso del método “getElementById()”, en el que una vez identificado un párrafo con el id con valor “demo”, se le asocia una función que a través de la propiedad “innerHTML” permite establecer dinámicamente un nuevo contenido para él.

Es posible ver el ejemplo en acción en el siguiente URL:

http://jsfiddle.net/ralcaraz/z0gkn6h2/embedded/result/

Los diferentes elementos HTML también disponen de una colección de métodos propia, que nos permite interactuar con ellos.

Además de los métodos definidos en el lenguaje JavaScript, es posible crear nuevos métodos según nuestras necesidades.

Actividad 1. Analiza el siguiente programa escrito en JavaScript y localiza en él los siguientes elementos:

  • Una variable.
  • Una función.
  • Un operador.
  • Un método.

¿Qué crees que realizará la función?

function Sumar(){

var x = 5;

document.getElementById(«suma»).innerHTML = x + 2;

}

 

2.6. Objetos predefinidos del lenguaje

Como decíamos anteriormente, un objeto es un tipo estructurado de dato que contiene propiedades y métodos. Las propiedades son valores asociados al objeto y los métodos son acciones que pueden ser evaluadas sobre los objetos.

Más allá de los objeto propios del DOM, JavaScript también cuenta con otros objetos predefinidos. Estos son:

  • String (cadenas de texto)
  • Date (fechas)
  • Array (vectores o arreglos)
  • Boolean (lógicos)
  • Math (matemáticos)
  • RegExp (expresiones regulares)

2.6.1. El objeto String

El objeto String se utiliza para manipular cadenas de texto. Todas las cadenas de texto en JavaScript se consideran un objeto String, por lo que no es necesario ningún proceso específico para crearlos.

Lista de propiedades:

  • length: devuelve la longitud del objeto String.

var texto = «Lorem ipsum»;

var longitud = texto.length;

document.write(longitud);

 

El programa anterior, devuelve la longitud del string almacenado en la variable “texto”. Es decir, 11.

Lista de métodos:

  • toLowerCase(): devuelve la cadena sobre la que se instancia el método poniendo en minúscula el objeto String.

var texto = «LOREM IPSUM»;

var minus = texto.toLowerCase();

document.write(minus);

 

El programa anterior, devuelve: lorem ipsum.

  • toUpperCase(): devuelve la cadena sobre la que se instancia el método poniendo en mayúscula el objeto String.

var texto = «lorem ipsum»;

var mayus = texto.toUpperCase();

document.write(mayus);

 

El programa anterior, devuelve: LOREM IPSUM.

  • concat(): concatena el objeto String con las diferentes cadenas de texto que se pasen como argumentos del método.

var texto = «lorem ipsum»;

var texto2 = «dolor sit»;

var concatenado = texto.concat(texto2);

document.write(concatenado);

 

El programa anterior devuelve: lorem ipsumdolor sit.

  • charAt(): devuelve el carácter del objeto String que ocupa la posición en el índice indicada como argumento del método. Es importante recordar que el índice empieza por 0.

var texto = «lorem ipsum»;

var posicion = texto.charAt(2);

document.write(posicion);

 

El programa devuelve: r.

  • indexOf(): devuelve la posición de la primera ocurrencia de la cadena de texto pasada como argumento. Es posible indicar como segundo argumento la posición en el índice que indica al programa desde dónde debe empezar a buscar. Por defecto, empieza a buscar desde el inicio.

var texto = «lorem ipsum ipsum»;

var indice = texto.indexOf(«ipsum»);

document.write(indice);

 

El programa devuelve: 6 (posición en la que empieza la primera palabra ipsum).

var texto = «lorem ipsum ipsum»;

var indice = texto.indexOf(«ipsum»,7);

document.write(indice);

 

El programa devuelve: 12 (posición en la que empieza la segunda palabra ipsum).

  • lastIndexOf(): devuelve la posición de la última ocurrencia de la cadena de texto pasada como argumento. Es posible indicar como segundo argumento la posición en el índice que indica al programa desde dónde debe empezar a buscar. Por defecto, empieza a buscar desde el final.

var texto = «lorem ipsum ipsum»;

var indice = texto.lastIndexOf(«ipsum»);

document.write(indice);

 

El programa devuelve: 12 (posición en la que empieza la segunda palabra ipsum).

var texto = «lorem ipsum ipsum»;

var indice = texto.lastIndexOf(«ipsum»,7);

document.write(indice);

 

El programa devuelve: 6 (posición en la que empieza la primera palabra ipsum).

 

  • substring(): devuelve la subcadena del objeto String desde la posición dada como primer argumento hasta la posición dada como segundo argumento. Si no se indica un segundo argumento se considera como tal la posición final.

var texto = «lorem ipsum»;

var subcadena = texto.substring(2,5);

document.write(subcadena);

 

El programa devuelve: rem.

 

  • substr(): Devuelve la subcadena del objeto String desde la posición dada por inicio y con la longitud dada.

var texto = «lorem ipsum»;

var subcadena = texto.substr(0,5);

document.write(subcadena);

 

El programa devuelve: lorem.

 

  • replace(): devuelve la cadena de texto obtenida, reemplazando la primera ocurrencia coincidente con el primer argumento por la cadena de texto indicada como segundo argumento.

var texto = «lorem ipsum»;

var nuevoTexto = texto.replace(«lorem»,»ipsum»);

document.write(nuevoTexto);

 

El programa devuelve: ipsum ipsum.

 

  • split(): devuelve un array de subcadenas de texto resultado de la división en trozos en objeto String.

var texto = «lorem ipsum dolor sit amet»;

var resultado = texto.split(» «);

document.write(resultado);

 

El programa devuelve: lorem,ipsum,dolor,sit,amet.

var texto = «lorem ipsum dolor sit amet»;

var resultado = texto.split(«o»);

document.write(resultado);

 

El programa devuelve: l,rem ipsum d,l,r sit amet.

2.6.2. El objeto Date

El objeto Date se utiliza para trabajar con fechas en JavaScript. Si lo instanciamos (“new Date()”) toma como valor la fecha actual. Por ejemplo:

var fecha = new Date();

document.write(fecha);

El programa devuelve: Wed Oct 12 2016 22:28:27 GMT+0200 (Hora de verano romance)

 

Lista de métodos:

  • getFullYear(), getMonth(), getDay(), getHours(), getMinutes(), getSeconds(): devuelven el año completo, mes, dia, horas, minutos y segundos del objeto Date(), respectivamente.

var fecha = new Date();

var hora = fecha.getHours();

document.write(hora);

 

Si la fecha fuese igual a la obtenida anteriormente, el programa devuelve: 22.

  • setFullYear(), setMonth(), setDate(), setHours(), SetMinutes(), setSecontds(): cambia el año, mes, día del mes, hora, minutos y segundos del objeto Date().

var fecha = new Date();

fecha.setHours(23);

document.write(fecha);

El programa devuelve Wed Oct 12 2016 23:28:27 GMT+0200 (Hora de verano romance).

2.6.3. El objeto Array

El objeto Array se utiliza para almacenar un conjunto de valores en una misma variable. La construcción del objeto se puede realizar de cualquier de las siguientes formas:

  • new Array() (vacío y sin indicar el tamaño del array).
    • Por ejemplo: var datos = new Array();
  • new Array(5) (indicando el tamaño del array)
  • new Array(2,4,6,8,10…) (indicando los valores que almacena el array)

Lista de propiedades:

  • length: devuelve el tamaño del array. También, aunque menos utilizado, permite modificar el tamaño del array.

var alumnos = new Array(«Antonio»,»Luisa»,»Elisabet»,»Pablo»);

var tamano = alumnos.length;

document.write(tamano);

 

El programa devuelve: 4.

Lista de métodos:

  • concat(): concatena los diferentes arrays que se pasan como argumentos.

var grupoA = new Array(«Antonio»,»Luisa»);

var grupoB = new Array(«Elisabet»,»Pablo»);

var grupoTotal = grupoA.concat(grupoB);

document.write(grupoTotal);

 

El programa devuelve: Antonio,Luisa,Elisabet,Pablo.

  • pop(): elimina y devuelve el último elemento del objeto Array.

var alumnos = new Array(«Antonio»,»Luisa»,»Elisabet»,»Pablo»);

var alumnoEliminado = alumnos.pop();

document.write(alumnoEliminado);

document.write(alumnos);

 

El programa devuelve:

  • Pablo
  • Antonio,Luisa,Elisabet

 

  • push(): añade en la última posición del objeto array los elementos que se pasan como argumentos.

var alumnos = new Array(«Antonio»,»Luisa»,»Elisabet»,»Pablo»);

alumnos.push(«Enrique»,»Marta»);

document.write(alumnos);

 

El programa devuelve: Antonio,Luisa,Elisabet,Pablo,Enrique,Marta

  • shift(): elimina y devuelve el primer elemento del objeto Array.

var alumnos = new Array(«Antonio»,»Luisa»,»Elisabet»,»Pablo»);

var alumnoEliminado = alumnos.shift();

document.write(alumnos);

document.write(alumnoEliminado);

 

Al final del programa, la variable alumnos es igual a: Luisa,Elisabet,Pablo, mientras que la variable alumnoEliminado almacena el nombre del alumno borrado: Antonio.

  • unshift(): añade en la primera posición del objeto array los elementos que se pasan como argumentos.

var alumnos = new Array(«Antonio»,»Luisa»,»Elisabet»,»Pablo»);

alumnos.unshift(«Enrique»,»Marta»);

document.write(alumnos);

 

El programa devuelve: Enrique,Marta,Antonio,Luisa,Elisabet,Pablo.

  • sort(): ordena alfabéticamente los elementos del objeto Array.

var alumnos = new Array(«Antonio»,»Luisa»,»Elisabet»,»Pablo»);

alumnos.sort();

document.write(alumnos);

 

El programa devuelve: Antonio,Elisabet,Luisa,Pablo.

2.6.4. El objeto Math

Lista de propiedades:

  • Math.PI: el número π.
  • Math.E: el número e.
  • Math.sqrt2: la raíz cuadrada de 2.
  • Math.sqrt1_2: la raíz cuadrada de ½.
  • Math.ln2: el logaritmo de 2.
  • Math.ln10: el logaritmo de 10.

Lista de métodos:

  • floor(): devuelve el entero inmediatamente anterior al pasado como argumento.
  • ceil(): devuelve el entero inmediatamente posterior al pasado como argumento.
  • round(): devuelve el entero más cercano al pasado como argumento (hacia arriba o hacia bajo.
  • max(): devuelve el máximo entre los dos número pasados como argumentos.
  • min(): devuelve el mínimo entre los dos número pasados como argumentos.
  • pow(): devuelve el resultado de elevar a la potencia indicada como segundo argumento, el número pasado como primer argumento.
  • sqrt(): devuelve la raíz del número pasado como argumento.
  • random(): devuelve un número pseudoaleatorio entre 0 y 1.

Actividad 2. Escribe un programa que solicite al usuario dos números y muestre por pantalla un mensaje indicando cuál de los dos es mayor.

 

Actividad opcional. Escribe un programa que realice lo siguiente:

  • Solicite al usuario su nombre, año de nacimiento (sólo el año, por ejemplo, 1983) y su profesión. Almacena cada uno de estos datos en su propia variable: “nombre”, “fecha” y “profesion” (puedes utilizar el método prompt una vez para cada uno de los valores).
  • A partir del año de nacimiento, calcula su edad actual y guárdala en una variable con el nombre “edad”.
  • Inicializa una variable con el nombre “datos” con un array vacío. A continuación, introduce con el método adecuado los valores de las variables “nombre”, “fecha” y “profesion” en el array “datos”.
  • Recorre el array “datos” con un bucle para mostrar en pantalla (document.write) los tres valores.
  • Crea una estructura condicional en la que si la edad del usuario es mayor o igual a 18 años, el programa le devuelva la frase: “Tienes [edad] años y eres mayor de edad”, y si es menor de 18 años le devuelva la frase: “Tienes [edad] años y eres menor de edad”. [edad] debe recoger el valor obtenido como edad del usuario.

2.6. Bibliotecas y APIs de JavaScript

En el contexto de la ciencia informática, una biblioteca es una colección o conjunto de recursos o subprogramas utilizados por otros programas, generalmente para crear un nuevo producto o añadir nuevas funcionalidades a un producto existente. En español también se utiliza y está igualmente aceptado el término librería, menos preciso, resultado de una traducción incorrecta de library. La más importante de las bibliotecas de JavaScript es jQuery. Se trata de una biblioteca liberada bajo licencia de software libre, que permite simplificar la manera de interactuar con los documentos HTML, manipular el DOM, manejar eventos, desarrollar animaciones y agregar interacción mediante AJAX a las páginas web. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requerirían de mucho más código. Es decir, con las funciones propias de esta biblioteca, se logran grandes resultados en menos tiempo y espacio. Además, se trata de una biblioteca con un altísimo nivel de adopción, lo que asegura su futuro mantenimiento, algo muy importante en informática.

Además de jQuery, en el mercado encontramos una gran cantidad de bibliotecas de JavaScript que nos permiten añadir nuevas funcionalidades a nuestras páginas web de una forma rápida y sencilla. Por poner sólo un par de ejemplos en diferentes ámbitos:

  • Modernizr: una biblioteca que nos permite detectar las capacidades del navegador del usuario y, en el caso de que sea muy antiguo o no soporte las características de nuestra web (etiquetas HTML5, clases CSS3, etc.), ofrecerle alternativas.
  • Colorbox: una biblioteca para añadir un efecto lightbox a las imágenes de nuestro web, poder agruparlas en carruseles, etc.

Una API, en español Interfaz de Programación de Aplicaciones, es un conjunto de funciones y procedimientos o métodos que nos permiten interactuar con una plataforma o servicio determinado. Gracias a las API, podemos crear o integrar software y servicios de terceros en nuestras aplicaciones o páginas web. Algunas APIs son libres y gratuitas y otras son privadas y de pago. Actualmente, podemos encontrar miles de APIs disponibles en Internet, muchas de las cuales basadas en JavaScript. Un par de ejemplos:

En el siguiente vídeo te explico cómo añadir una biblioteca de JavaScript a tu página web.

 

Actividad 3. Busca en Internet 1 biblioteca de JavaScript (o Jquery) para cada una de las siguientes funcionalidades :

  • Carruseles de imágenes o slideshows.
  • Calendarios o selectores de fecha (datepicker).
  • Imágenes o galerías de imágenes.

De cada una de las 3 bibliotecas encontradas, indica su nombre y URL ,y redacta un párrafo explicando sus principales características.

3. JavaScript y SEO

Los primeros buscadores de Internet eran incapaces de interpretar el lenguaje JavaScript. Actualmente, esto ya no es así, y tanto Google como el resto de buscadores pueden navegar por el contenido de webs que incorporan JavaScript e indexar su contenido. Aún así, Google ha reconocido ciertos límites en este sentido, por lo que tras cualquier implementación en la que intervenga JavaScript (menús desplegables, carruseles de imágenes, etc.), es importante ir revisando periódicamente el estado de la indexación de esos contenidos para asegurarnos de que el robot es capaz de interpretarlos.

Por sí mismo, JavaScript no mejorará el SEO de nuestras páginas web. No obstante, sí se puede utilizar para mejorar diferentes aspectos de nuestro web que, indirectamente, nos pueden ayudar a alcanzar mejores posiciones en el ranking. Entre esos aspectos podemos destacar el tiempo de carga de las páginas. Un tiempo de carga reducido es aconsejable tanto, para mejorar la experiencia de usuario, como para mejorar nuestro posicionamiento. La velocidad del sitio no es el único factor en el posicionamiento, ni mucho menos, pero sí uno de los muchos ingredientes en esa gran receta que es el SEO. Un factor, no obstante, especialmente relevantes en los últimos años con cambios algunos de las actualizaciones de su algoritmo (mobilegeddon, mobile-first index).

Existen muchas maneras de mejorar la velocidad de nuestro sitio. Con JavaScript podemos, por ejemplo, cargar imágenes dinámicamente sólo cuando el usuario las solicita o cuando alcanza la zona de la pantalla en la que aparecen. Para ello, podemos utilizar bibliotecas como Lightbox o Lazy load, pensadas para ello. De esta manera, el tiempo de carga inicial de la página se verá reducido considerablemente.

Las ventajas que puede aportar el uso de JavaScript también se pueden convertir en inconvenientes si:

  • Incluimos tanto JavaScript en nuestras páginas que su tiempo de carga aumenta.
  • Utilizamos menús creados con JavaScript tan complejos o mal diseñados, que el robot de Google no es capaz de interpretarlos, no pudiendo seguir de esta manera, los enlaces que presentan.
  • Si generamos enlaces automáticamente en determinadas partes de nuestras páginas como el
    y no les añadimos un anchor text adecuado.
  • Si utilizamos JavaScript para poner en marcha técnicas de Black Hat SEO, como ofrecer contenidos diferentes a los humanos y a los buscadores, ocultar contenido, entre otras.

Google Analytics, el servicio de analítica ofrecido por Google nos ofrece una gran cantidad de información sobre la interacción de los visitantes con nuestras páginas, de gran utilidad para el SEO. Este es el caso, entre otros muchos, de las palabras clave que nos proporcionan tráfico, del porcentaje de rebote de nuestras páginas, su tiempo medio de carga, etc.

Este servicio se implementa en nuestras páginas añadiendo el llamado Google Analytics Tracking Code, que no es otra cosa que un pedazo de código JavaScript.

Fig. 4. Ejemplo de un Tracking Code de Google Analytics.

Cuando damos de alta una nueva cuenta y su respectivo perfil asociado a una página web determinada, Google nos proporciona un Tracking Code que simplemente debemos añadir a las páginas del sitio que deseamos seguir. No obstante, si tenemos conocimientos de JavaScript, este código se puede personalizar. Entre otros aspectos, podemos:

  • Cargar el plugin de comercio electrónico que por defecto no se incluye para reducir el tamaño de la biblioteca de Analytics.
  • Hacer seguimiento de eventos como, por ejemplo, medir cuántas veces se ha pulsado un botón o cuántas veces se ha usado un elemento en un juego web.
  • Poner en marcha los informes sociales para medir de una manera más eficaz el número de veces que nuestros usuarios interactúan con los botones sociales.
  • Realizar el seguimiento de los usuarios en diferentes dominios (seguimiento multidominio).

Algunas de las opciones anteriores también se pueden implementar sin conocimientos de JavaScript, gracias al servicio Google Tag Manager.

4. JavaScript y usabilidad

Como hemos visto en apartados anteriores, mediante JavaScript podemos añadir un sin fin de funcionalidades a nuestras páginas web. Muchas de estas funcionalidades se pueden utilizar para mejorar la usabilidad de nuestros sitios web. A continuación, se citan sólo algunas funcionalidades implementadas con JavaScript que pueden ser de utilidad para mejorar la usabilidad de un sitio web.

Mediante JavaScript podemos crear los llamados “acordeones”, una especie de botones que al ser pulsados por los usuarios se despliegan y muestran un determinado contenido relacionado con el texto de ese botón.

Fig. 5. Ejemplo de acordeón creado con la biblioteca JQuery.

Fuente: http://jqueryui.com/accordion/

Se trata de una buena solución para acortar páginas demasiado largas y evitar así que nuestros lectores tengan que hacer demasiado scroll para encontrar aquello que están buscando. Los acordeones resultan de interés en páginas tipo “FAQ” (Preguntas más frecuentes) que reúnen un gran volumen de contenido agrupado bajo diferentes secciones temáticas, de las cuales sólo unas pocas interesan al usuario, evitando así que tenga que recorrer toda la página hasta encontrar la respuesta que necesita. No obstante, de acuerdo con Loranger (2014), debemos ser prudentes con el uso de los acordeones ya que, a pesar de los beneficios expuestos, incrementan el coste de interacción con la página, al tener los usuarios que analizar los diferentes encabezados para descubrir bajo cual se encuentra el contenido que necesitan. También es importante asegurarnos de que el acordeón que implementamos es accesible, y pueda ser abierto y cerrado tanto con el ratón, como con el teclado. Finalmente, debemos evitar ocultar a los usuarios la información más importante ya que podría pasar desapercibida para ellos.

En el siguiente ejemplo http://jsfiddle.net/ralcaraz/w8pvdL0z/5/, Saul González nos muestra una manera de mejorar la usabilidad en tablas con muchas columnas y filas. Gracias a JavaScript, el estilo de la celda con el foco del ratón, así como el del resto de celdas de su columna y fila, cambian para facilitar la lectura de los datos.

Fig. 6. Al pasar el ratón por la tabla el estilo de las celdas cambia para facilitar la lectura de los datos.

En algunos formularios web como los de reservas de vuelos, trenes, hoteles, etc., en los que se nos solicitan determinadas fechas, uno de los problemas de usabilidad frecuentes lo encontramos en la multitud de formatos de fecha que los distintos usuarios pueden llegar a introducir. Generalmente, cada formulario sólo acepta un formato de fecha y devuelve como errores el resto de formatos. Para evitar que los usuarios tengan que conocer previamente cuál es el formato adecuado en cada caso, además de posibles errores de tecleado, muchos webs añaden un selector de fechas que aparece automáticamente cuando el usuario se sitúa sobre el campo en cuestión. De esta manera, el usuario sólo debe navegar por el calendario de forma visual (o mediante el teclado si es compatible con éste), pulsar sobre el día deseado y automáticamente, el programa traduce esa acción en forma de texto en el formato aceptado por el formulario. La mayoría de estos selectores de fechas se crean con JavaScript.

Fig. 7. Selector de fechas de la biblioteca JQuery.

 

Actividad 4 Busca 2 ejemplos de páginas web en las que mediante alguna biblioteca o implementación propia de JavaScript, se haya mejorado su la usabilidad. No tiene porqué ser necesariamente ejemplos similares a los vistos en este apartado (acordeones, mejoras en tablas y selectores de fecha). Para cada ejemplo, haz una captura de pantalla y explica brevemente la razón de su elección.

5. JavaScript y accesibilidad

Las WCAG o Directrices de accesibilidad para el contenido web (Web Content Accessibility Guidelines, WCAG) son un documento elaborado por el W3C que marca las condiciones que ha de cumplir un contenido web para poder ser considerado accesible y proporciona mecanismos y estrategias para conseguirlo. Se trata del documento de referencia internacional en el campo de la accesibilidad, hasta el punto que su segunda versión, se ha llegado a convertir en la norma ISO/IEC 40500:2012.

Como hemos visto anteriormente, JavaScript es una tecnología que permite añadir dinamismo a nuestras páginas web. Mientras que en la primera versión de las WCAG, JavaScript no era bienvenido, la actual versión de las directrices del W3C sí contempla el uso de JavaScript y otras tecnologías como AJAX, recomendándolas incluso en diferentes técnicas para evitar la apertura de ventanas de manera no intrusiva o cambiar el estilo de una página dinámicamente, entre otras. El problema para el W3C ha dejado de ser el uso de JavaScript y se ha trasladado a la manera en cómo utilizamos esta tecnología. De esta manera, ya no es necesario proporcionar una alternativa accesible sin JavaScript para nuestras páginas o aplicaciones web, sino que lo que se espera es que el código JavaScript sea accesible de manera nativa (no intrusivo, independiente del dispositivo, accesible para las ayudas técnicas, etc.). Sólo si utilizamos JavaScript de manera no accesible, deberemos proporcionar una alternativa al contenido sin esta tecnología.

Los problemas que generalmente provoca el uso de JavaScript de manera inadecuada tienen que ver según WebAIM (2013) con:

  • La navegación, incapacitando o dificultando la posibilidad de navegar usando el teclado o las ayudas técnicas (lectores de pantalla, líneas braille, lupas, etc.).
  • El contenido oculto, es decir, partes del contenido que no son accesibles para las ayudas técnicas.
  • El control del usuario, o la incapacidad de éstos para actuar sobre los cambios de contenido automatizados.
  • La confusión/desorientación, al alterarse o deshabilitarse la manera de actuar por defecto de los navegadores, o desencadenando eventos que pueden pasar desapercibidos para determinados usuarios.

El concepto de “JavaScript no intrusivo” es un paradigma relativamente nuevo en el ámbito de la programación con JavaScript en el que se procura separar la funcionalidad ofrecida por JavaScript del contenido y estructura de la página HTML que lo contiene. De esta manera, se procura evitar escribir código JavaScript como parte del contenido HTML, puesto que la función del segundo sólo es la de describir la estructura del documento y no su comportamiento programático.

Por ejemplo, podríamos asociar a una imagen en nuestro código HTML una función de JavaScript que haga que, al pulsar sobre ella (evento “onclick”), se muestre un mensaje en la pantalla del usuario. Imaginemos que a esa función la hemos definido en la cabecera del documento y la hemos llamado “mensajeAlerta()”. Para referirnos a ella podríamos llamarla a través del siguiente evento de clic:

<img src=«imagen.jpg» onclick=«mensajeAlerta();»/>

Pero esto sería considerado intrusivo, al estar describiendo desde el código HTML la funcionalidad asociada a la interacción del usuario con la imagen. En cambio, si identificamos esa imagen con un ID, y nos llevamos el código Javascript fuera, haciendo referencia a ella desde éste, conseguiremos separar funcionalidad, estructura y contenido:

<img src=«imagen.jpg» id=«boton»/>

 

<script type=«text/javascript»>

window.onload = function(){

document.getElementById(«boton»).onclick = mensajeAlerta;

}

function mensajeAlerta(){

alert(«Este es un mensaje de alerta»);

}

</script>

 

A continuación, se incluyen algunas prácticas habituales en el diseño de webs con JavaScript que pueden provocar problemas de accesibilidad.

    • La asociación exclusiva de funciones de JavaScript a eventos de ratón (onclick, onmouseover, ondblclick, etc.) en lugar de asociarse de manera simultánea con eventos de teclado (por ejemplo, onkeypress). Si una funcionalidad de una página web sólo se puede activar pulsando sobre ella con el ratón, los usuarios que no son capaces de usar el ratón y utilizan exclusivamente el teclado (personas ciegas, con baja visión pronunciada, o con discapacidades motrices, entre otras), no las podrán utilizar.
    • El uso de popups. Los popups, o ventanas emergentes, son ventanas que aparecen de manera automática sobre el contenido del web, generalmente sin que el usuario las haya solicitado. Estas ventanas pueden pasar desapercibidas para los usuarios ciegos o con baja visión. En el caso de usuarios con una discapacidad cognitiva puede provocar confusión, al no entender por qué el comportamiento por defecto de un enlace se ha modificado. Pueden ser difíciles o imposibles de cerrar para usuarios que dependan exclusivamente del teclado, o incluso imposible de aumentar el tamaño de su texto con lupas.
    • La creación de carruseles de imágenes que se activan automáticamente y que no disponen de botones de pausa. Este tipo de animaciones hacen que el foco del contenido cambie provocando que los usuarios ciegos no sean conscientes de ello. En el caso de los usuarios con discapacidades cognitivas o de aprendizaje, este tipo de animaciones suponen una carga cognitiva adicional y pueden provocar distracciones en lugar de cumplir su función de destacar un contenido importante. En el caso de que se utilicen se debe proporcionar como mínimo la posibilidad de pausarlos.
  • Validaciones pobres en formularios web que muestran mensajes con pocas indicaciones, que sólo se pueden cerrar mediante el ratón, o que incluso no identifican a nivel de programación qué campos contienen el error o errores.

Aunque JavaScript es uno de los principales lenguajes de programación para añadir dinamismo a las páginas web, la evolución del estándar CSS, especialmente desde la llegada de su versión CSS3, permite a los diseñadores utilizarlo como alternativa a JavaScript en determinadas circunstancias. En blogs especializados (Andrew, 2010) es posible ver alternativas puras con CSS para implementar acordeones, gráficos dinámicos, imágenes con ciertos efectos, etc. Todas ellas, si se implementan adecuadamente, pueden resultar más accesibles que sus homólogas en JavaScript.

6. Conclusiones

Después de sus más de 20 años de existencia, JavaScript se ha afianzado como uno de los lenguajes de programación imprescindibles para cualquier diseñador web. Parte de su éxito se debe al soporte y compatibilidad con todos los navegadores web modernos, a la aparición de diferentes bibliotecas que facilitan su uso o integración en nuestros proyectos, y sobre todo a su gran nivel de adopción por parte de la comunidad de programadores.

Como hemos podido ver a lo largo de este artículo, JavaScript puede ser la solución a determinados problemas de usabilidad y accesibilidad de nuestras páginas, o incluso ayudarnos de manera indirecta a mejorar nuestro posicionamiento web. Al mismo tiempo, también hemos visto, que si no se usa de manera correcta, estos posibles beneficios pueden convertirse en inconvenientes.

Dado el nivel de adopción de JavaScript en la actualidad, y su similitud a otros muchos lenguajes de programación, es recomendable que cualquier profesional relacionado con la Web tenga unas nociones mínimas de este lenguaje, del mismo modo que debería tenerlas de otros estándares como HTML o CSS.

7.Bibliografía

Monografías

Ferguson, Russ; Heilmann, Christian. Beginning JavaScript with DOM scripting and AJAX. 2nd ed. [Berkeley, Calif.], Apress, 2013.

Flanagan, David. JavaScript: the definitive guide. 6th ed. Sebastopol : O’Reilly, cop. 2011.

Sitios web

Accessible Javascript. WebAIM, 2013.

http://webaim.org/techniques/javascript/

Andrew, Paul. “30 Pure CSS Alternatives to Javascript”. Specky boy design magazine (April 2010)

http://speckyboy.com/2010/04/26/30-pure-css-alternatives-to-javascript/

Carreras, Olga. “Respuesta a 25 dudas habituales sobre accesibilidad web”. Usable y accesible. 2012.

http://olgacarreras.blogspot.com.es/2011/01/respuesta-25-dudas-habituales-sobre.html

“Client-side Scripting Techniques for WCAG 2.0”. En: Techniques for WCAG 2.0. W3C,2012.

http://www.w3.org/TR/WCAG20-TECHS/client-side-script.html

“Configuración avanzada: seguimiento web (analytics.js)”. En: Google Analytics. 2014.

https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced?hl=es

Eguiluz, Javier. Introducción a JavaScript. Librosweb, 2014.

http://librosweb.es/javascript/

Introducción a JavaScript orientado a objetos. Mozilla Developer Network, 2014.

https://developer.mozilla.org/es/docs/Web/JavaScript/Introducci%C3%B3n_a_JavaScript_orientado_a_objetos

JavaScript tutorial. W3C.

http://www.w3schools.com/js/default.asp

Loranger, Hoa. “Accordions are not always the answer for complex content on desktops”. Nielsen Norman Group (May 2014)

http://www.nngroup.com/articles/accordions-complex-content/

© Texto: autor/es del documento

© Presente edición: Máster en Información Digital. UPF Barcelona School of Management

Esta obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported

Por en B11 Fundamentos en Tecnologías Web el .