Hace un tiempo se creia que las aplicaciones web no eran tan potentes como una aplicacion de escritorio. Se decía que Javascript no era lo suficiente potente como para comparar una aplicación web con una aplicación de escritorio. La realidad es que Javascript es muy potente, y que el fallo no se debe a Js, sino a los motores que están dentro del navagador que procesan su código. Cuanto más rápido se procesa la información del script, más sotisficada suele ser la aplicación.

Desde 2009, los navegadores competían con mejorar el rendimiento de sus navegadores y poco a poco se ha conseguido un rendimiento bastante óptimo en la ejecución de scripts. Además los navegadores se han actualizado con funciones de edición de código que revisa que el código ejecutado del script se realice correctamente, mostrando en la administración de consola los errores ejecutados.

Entender javascript.

El lenguaje HTML5 soporta interfaces de programación de aplicaciones (Application Programming Interface, API) que permite integrar sistemas complejos en las páginas web. Las nuevas API´s como Web Workers, Geolocation y LocalStorage son complejas y requieren de un manejo sofisticado de javascript para su funcionamiento.

Javascript se remonta a 1993 cuando Nestcape Comnunications incluyó en su navegador web una tecnología llamada LiveScript. Por aquel entonces, el script de Microsoft Visual Basic Script, era lo que se llevaba hasta el momento, y la aparición de LiveScript puso compentencia al navegador de Microsoft.

Las versiones actuales de Javascript nada tiene que ver con las versiones iniciales de LiveScript. De hecho ahora Javascript rivaliza con las aplicaciones de escritorio sobre todo en el acceso a base de datos y archivos. Sin contar que Javascript es un lenguaje portable, que se ejecuta en cualquier máquina sin tener que diseñar una aplicación exclusiva a un sistema operativo como lo hacen las aplicaciones de escritorio. De hecho hoy en día Javascript, gracias a los motores de los navegadores modernos (Rhino y SquirrelFish) se ejecuta tan rápido como las aplicaciones de escritorio.

Hoy en dia aprende a programar Javascript no es dificil de aprender. Si tienes experiencia en C#, Java o ActionScript(Flash a extinguir), no tendrás problemas en aprender este lenguaje de programación con su propio estándar el famoso EcmaScript que ahablamos en la clase anterior.

Repaso general.

Aunque en la clase anterior ya avance algunos conceptos, en esta clase vamos a repasarlos para que queden bien cimentados.

● El script se escribe entre etiquetas <script> y </script>
● Se puede sacar mensajes por pantalla con document.write() y alert().
● Todas las instrucciones terminan con punto y coma (;).
● El script puede ir situado en HEAD o en el BODY.
● Puede ser ejecutado a través de eventos.
● Puede ejecutar funciones, clases y crear objetos.
● Trabaja con variables, constantes, bucles y condicionales como cualquier lenguaje de programación.
● Se pueden realizar operaciones aritméticas con los scripts.
● Se pueden diseñar juegos 2D con javascript.

Y muchas mas cosas que se pueden hacer. Pero en esta clase vamos a ir poco a poco.

Eventos.
Uno de los fuertes es que Javascript permite manipular eventos del DOM y realizar la acción en respuesta a dicho evento. Pero para actuar en consecuencia, necesita que el evento se lance dentro de una función o bloque para poder actuar. Es decir, cualquier evento producirá una respuesta que haya sido programada previamente.

En la actualidad podemos establecer los eventos de Window como los eventos ocurridos en el el objeto Window del DOM; y estos se clasifican en propiedades, métodos y controladores de eventos y que te enseño en la siguiente lista:

Tabla de propiedades y eventos de JS

Existen más propiedades y eventos que puedes ver en la imagen siguiente:

Tabla de propiedades y eventos de JS

Como puedes ver, estudiar Javascript tampoco es un recurso sencillo, ya que tiene mucho contenido y llevaría mucho tiempo estudiar cada propiedad, cada evento y cada controlador de evento. Por eso se estudiará lo básico y lo más conocido para evitar al estudiante el dolor de cabeza que yo tuve que coger por aprenderme todo.

innerHTML.

NOTA:Esta propiedad no aparece en la lista anterior porque pertenece a otra categoría diferente del objeto Window. De hecho existen otras propiedades en Javascript que no están en la lista anterior y eso se debe a que la anterior lista se basa en propiedades de las primeras versiones de Javascript, por lo que puede incluso que algunas de ellas no funcionen en navegadores modernos o en el futuro.

El atributo innerHTML pertenece al objeto Element, y sirve para establecer elementos HTML y sus descendientes dentro del documento mediante JS. Al establecerse se reemplaza la sintaxis del HTML por una nueva.

Podemos usar innerHTML para recuperar el contenido actual de un contenedor o insertar nuevo contenido en ese contenedor.

usos de innerHTML

En la imagen anterior puedes ver que asignamos el elemento caja al documento. Ten en cuenta que la caja en la etiqueta <DIV> la ocultamos por estilos. Así que solo se muestra un mesaje de "Hola mundo!!"

Por lo que también podemos usar la etiqueta innerHTML para añadir contenido a la Web.

añadir contenido a la Web con innerHTML

Los bueno de esta propiedad es que puede crear contenido dinámico (una vez cargada la página web) y añadir elementos al documento Web. Además, fijate que añado el contenido a la Web utilizando la asignación de la propiedad getElementByID().innerHTML. Ya veremos este método más adelante.

Establecer un formulario de opinión.
Para ver como funciona el programa vamos a crear un script que nos genere un formulario básico. Hay que tener en cuenta que cuando pulsemos el botón de mostrar se nos muestre un formulario que hasta entonces no existe. Todo ello lo haremos dentro de una etiqueta script.

Muestra un contenido adicional

Fijate que el control no existe en la página web hasta que lo creamos al pulsar el botón de Pulsa para mostrar que hay en pantalla.

funcionamiento de innerHTML

Como curiosidad, en la variable datos he usado la concatenación de string (+) para que el editor no me marque como un error del código en varias líneas.

outerHTML

Este atributo del objeto Element realiza las mismas funciones que el anterior, pero se centra en los nodos existentes.

sobreescribir un texto

Si con innerHTML agregabamos contenido a la Web, con outerHTML modificamos su contenido.

outerHTML sirve de modificación de contenido

En el anterior ejemplo, puedes ver que hay dos elementos, un padre y un hijo que depende del padre. Si modificamos el elemento padre con outerHTML, se modificará todo el contenido hacia abajo (es decir el contenido del elemento hijo <p>Hola mundo!!</p>). Pero como lo que hacemos es modificar el contenido del elemento hijo, solo se modifica su contenido sin importar lo que se expresa en el elemento padre.

Concatenación de texto.

Javascript al igual que cualquier otro lenguaje de programacion puede concatenar palabras utilizando el operador +. Pero existen ciertas reglas a utilizar para realizar la concatenación.

Observa el siguiente ejemplo:

ejemplo de concatenación sin codificación estándar

Puedes ver que se ha producido la concatenación de ambas variables nombre y edad en otra variable formulario. Y además puedes observar que no se ha mostrado correctamente la tilde del nombre y no se ha respetado los espacios.

EL primer error de los carácteres extraños se suprime utilizando la etiqueta <meta charset="UTF-8"> que como puedes ver yo tenía un error en dicha etiqueta:

Fallo en la codificación de la página

Pero aún así existen trucos para que no aparezcan los simbolos extraños, como utilizar la sintaxis del HTML para los acentos y tildes, es decir utilizar el &acute;

formas de engañar sin codificación

De todas formas tenemos que el espacio entre variables nos se respeta. Lo puedes solucionar de la misma forma, utilizando el espaciado en HTML (&nbsp;), al final de la primera variable, o introduciendo un espaciado manual con el teclado:

Introducir espacios en Javascript

Como puedes ver hemos concatenado dos variables en otra tercera. Y el tipo de las variables era, el primero era una cadena de texto, y el segundo un entero. Al realizar la concatenación hemos convertido explicitamente a cadena alfanumérica como puedes ver en la siguiente imagen:

typeof sirve para averiguar el tipo de dato

Cadenas.
Las cadenas pueden contener carácteres, incluidos los números (dígitos). Las cadenas de texto siempre se escriben entre comillas dobles (") o comillas simples ('). Son ejemplos de cadenas de texto:

"3miratosAra8es"
""acute"
'_espacio '
"250"

Pero, ¿qué ocurre si queremos escribir?: Nuestra estrella, "el Sol", es el rey del sistema solar.

error al concatenar con comillas dobles

Y es que si lo que queremos es utilizar énfasis en los textos, tendremos que utilizar o bien la simbología HTML (&quot;) con el texto de énfasis; o bien usar la comilla simple a modo de exclusión sin romper el texto:

utilizar comillas simples para evitar la rotura de la cadena

Existen otro tipos de datos que permiten almacenar los valores de otras variables conservando el tipo de datos, tal como los arrays, o las listas, que veremos en la práctica de esta clase.

Evitar solapamientos.

En el punto 3 hemos visto la propiedad innerHTML que agrega contenido a la página web. Sin embargo, el contenido que agrega elimina el contenido anterior.

funcionamiento de innerHTML

Esta forma de proceder es la forma que tiene Javascript de solapar el contenido, ya que según su organización del DOM, establece el documento como si fuesen capas, y al actuar esta propiedad, requiere que el nuevo contenido se superponga al anterior.

Para evitar esto, Javascript tiene un comodín usando el operador +=, con lo cual mantendrá el contenido original y añadirá el resto programado en innerHTML a continuación:

añadir el contenido sin pisar al anterior