Javascript

1.  ¿Qué es Javascript?

•  Es un lenguaje de programación interpretado, es decir, no necesita ser compilado y se ejecuta en tiempo real, está orientado a objetos (variables y métodos) y es gratuito.

•  Desarrollado por Brendan Eich (Netscape) y bajo la marca Oracle Corporation, usado para hacer scripts en la web actualmente. Javascript es una implementación del estándar ECMA-262. Es case-sensitive.

•  Java y Javascript no están relacionados y tienen semántica y propósitos diferentes. Java es un lenguaje de

programación de propósito general mientras que Javascript lo es de propósito específico.

•  Interfaces de programación de aplicaciones (APIs - librerías) se introdujeron en los navegadores web para asistir al lenguaje y así poder construir funciones complejas a partir de funciones elementales con sencillas técnicas de programación.

Javascript Francesc Përez Fdez.

2.  Técnicas y métodos de referencia •  Las técnicas de referencia son técnicas que permiten incorporar código Javascript al código HTML5. Existen

tres técnicas, igual que para el código CSS3:

Ø  En línea: incorporamos el código Javascript como atributo del elemento HTML5. Esta clase de práctica no es recomendable, el código HTML se extiende y es difícil de mantener y actualizar.

Ø  Embebido: incorporamos el código Javascript entre

etiquetas <script> en la cabecera del documento HTML5 <head>. Actúa exactamente igual que con el elemento <style> para incorporar estilos. Del mismo modo que con el elemento <style>, en HTML5 no debemos usar el atributo type para el elemento <script>.


2.  Técnicas y métodos de referencia

Ø  Archivos externos: los códigos embebidos incrementan el tamaño del documento HTML5. Para reducir el tiempo de descarga, incrementar la productividad y poder distribuir y reusar el código Javascript se recomienda utilizar esta técnica.

•  Los métodos de referencia permiten referenciar elementos HTML en el código JS. Son:

Ø  getElementByTagName Ø  getElementById Ø  getElementByClassName Ø  querySelector Ø  querySelectorAll


micodigo.html

micodigo.js

En la cabecera del documento HTML hemos insertado una línea de código que indica al navegador en qué archivo se encuentran las funciones externas declaradas con Javascript. El elemento <script> carga los códigos Javascript desde un archivo externo.


Ø  getElementByTagName: referencia a un elemento por su etiqueta o palabra clave

Ø  getElementById/getElementByClassName: referencia a un elemento por su valor de atributo id


En este ejemplo, el método está referenciando al primer elemento <p> de la lista.


Ø  querySelector: permite referenciar un elemento HTML5 aplicando toda clase de selectores CSS. Este método retorna el primer elemento del documento HTML que concuerde con el selector declarado entre paréntesis. Devuelve el primer elemento elemento que coincide con el grupo de selectores.

Ø  querySelectorAll: permite referenciar elementos HTML5 aplicando toda clase de selectores CSS. Todos los elementos del documento HTML5 que concuerden con el grupo de selectores declarados entre paréntesis serán devueltos. El valor retorno es un array conteniendo cada elemento encontrado en el orden en que aparecen en el documento HTML5.


Combinando métodos

1r elemento array

Todos los elementos del array

3.  Manejadores de eventos

•  Generalmente, el código Javascript se ejecuta después de que el usuario haya realizado una acción, un evento. Además de los eventos producidos por los usuarios existen también otros eventos producidos por el sistema. El código que responde al evento es llamado manejador y es donde se define la respuesta al evento. Los manejadores de eventos más usados son: click, mouseover, mouseout, mouseup, mousedown, load, unload, change,

•  Formas de registrar un evento para un elemento HTML:

Ø  Manejadores de eventos en línea: utilizamos los atributos provistos por HTML para registrar eventos para un elemento en particular. Es una técnica es desuso pero práctica en ciertas circunstancias.

Ø  Manejadores de eventos como propiedades: usando selectores Javascript podemos referenciar un

elemento y asignarle el manejador de eventos como si fuese una propiedad. No es una técnica muy común para las aplicaciones HTML5.


Cuando el usuario pulsa con el ratón sobre el primer elemento <p> de la lista, el manejador de eventos de ratón onclick llama a la función definida alert que muestra un mensaje por pantalla. Sustituya la función alert por confirm(“text”) o prompt(“text”) y verá otro tipo de notificaciones.

3.  Manejadores de eventos

Ø  El método addEventListerner: es la técnica ideal y la que es considerada como estándar por la especificación de HTML5. El método tiene tres argumentos: ü  El nombre del evento ü  La función a ser ejecuta ü  Un valor booleano que indica el orden en que será ejecutado un mismo evento asignado a

varios elemento. El valor más común es false.


4.  APIs •  JS es un lenguaje de programación interpretado con un conjunto de librerías (APIs – Interfaz de

Programación de Aplicación) que permite al programador configurar actividades complejas, como elementos gráficos, motores 3D para videojuegos o interfaces para acceder a base de datos, con funciones predefinidas: Ø  Canvas: API gráfica que provee una básica pero poderosa superficie de dibujo. Permite generar e

imprimir gráficos en pantalla, crear animaciones y manipular imágenes y vídeo. Ø  Drag and Drop: incorpora la posibilidad de arrastrar y soltar elementos (imagen, texto, enlaces,

archivos, etc) en la pantalla como lo haríamos comúnmente en aplicaciones de escritorio. Ø  Geolocation: usada para establecer la posición física del dispositivo mediante información de red o

GPS. Permite la integración con otras librerías externas como Google Maps o acceder a información de localización específica para aplicaciones que trabajan en tiempo real.

Ø  Storage: dos APIs fueron creadas con propósitos de almacenamiento de datos: Web Storage y Index Database. Estas APIs transfieren la responsabilidad del almacenamiento de datos del servidor al ordenador del usuario.

Ø  File: API para operar con archivos en el ordenador del usuario. Ø  Communication: grupo de cuatro APIS responsable de la transferencia de datos entre aplicaciones:

XMLHttpRequest Level 2, Cross Document Messaging y Web Sockets. Ø  Web Workers: Javascript no es un lenguaje multitarea. Esta API provee esta característica. Permite al

navegador procesar código en background sin interrumpir la actividad de la web. Ø  History: adapta las aplicaciones modernas a la forma en que los navegadores hacen seguimiento de

la actividad del usuario. Ø  Offline: con la combinación de atributos HTML, eventos de controlados por JS y archivos de texto,

permitirá a las aplicaciones trabajar en línea o desconectados según la situación del usuario.

•  Librerías externas de JavaScript: jquery, jquerymobile, google maps, …


Javascript

Education

Transcript of Javascript