Javascript

395 views

Published on

Ver más en http://www.francescperez.net/templates/original/html/si/articulos/art_3_js.html

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
395
On SlideShare
0
From Embeds
0
Number of Embeds
105
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript

  1. 1. 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. 2. 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>. Javascript Francesc Përez Fdez.
  3. 3. 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 Javascript Francesc Përez Fdez. 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.  
  4. 4. 2.  Técnicas y métodos de referencia Ø  getElementByTagName: referencia a un elemento por su etiqueta o palabra clave Ø getElementById/getElementByClassName: referencia a un elemento por su valor de atributo id Javascript Francesc Përez Fdez. En este ejemplo, el método está referenciando al primer elemento <p> de la lista.  
  5. 5. 2.  Técnicas y métodos de referencia Ø  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. Javascript Francesc Përez Fdez. Combinando métodos 1r elemento array Todos los elementos del array
  6. 6. 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. Javascript Francesc Përez Fdez. 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.
  7. 7. 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. Javascript Francesc Përez Fdez.
  8. 8. 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 Francesc Përez Fdez.                                                                                    

×