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>.

Ø  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

Más contenido relacionado

Similar a Javascript

Más de Francesc Perez

Último

Javascript