Cuarto Semestre Introduccin a Javascript

Diseo Web
Dagoberto Cruz Sandoval
Clase Nm.10

Javascript
Javascript es un lenguaje interpretado usado para mltiples propsitos pero solo considerado un complemento hasta ahora.

Javascript
Una de las innovaciones que ayud a cambiar el modo en que vemos Jqvascript, fue el desarrollo de nuevos motores de interpretacin, creados para acelerar el procesamiento de cdigo.

Javascript
La clave de los motores ms exitosos fue transformar el cdigo Javascript en cdigo mquina para lograr velocidades de ejecucin similares a aquellas encontradas en aplicaciones de escritorio.

Javascript
Esta mejorada capacidad permiti superar viejas limitaciones y confirmar al lenguaje Javascript como la mejor opcin para la Web.

Javascript

Javascript
Para aprovechar esta prometedora plataforma de trabajo ofrecida por los nuevos navegadores, Javascript fue en relacin con portabilidad e integracin.

Javascript
A la vez interfaces de programacin de aplicaciones (APIs) fueron incorporadas por defecto en cada navegador para asistir al lenguaje en funciones elementales.

Javascript
Estas nuevas APIs (como Web Storage, Canvas) son interfaces para libreras contenidas en los navegadores. La idea es hacer disponible poderosas funciones a travs de tcnicas de programacin sencillas y estndares, expandiendo el alcance del lenguaje y facilitando la creacin de programas tiles para la Web.

JavaScript
Incorporando Javascript Siguiendo los lineamientos que en CSS, existen tres tcnicas para incorporar cdigo Javascript dentro de HTML. Sin embargo, al igual que en CSS, la inclusin de archivos externos es la recomendada.

Javascript
En lnea Esta es una tcnica simple para insertar Javascript en nuestro documento que se aprovecha de atributos disponibles en elementos HTML. Estos atributos son manejadores de eventos que ejecutan el cdigo de acuerdo a la accin del usuario.

Javascript
Los manejadores de eventos ms usados son, en general, los relacionados con el ratn, como por ejemplo onclick, onMouseOver, u onMouseOut. Sin embargo, existen sitios Web que implementan eventos de teclado y de la ventana, ejecutando acciones luego de que una tecla es presionada o alguna condicin de la ventana del navegador cambia (por ejemplo onload u onfocus)

Javascript
Usando el manejador de eventos onclick, un cdigo es ejecutado cada vez que el usuario hace clic con el ratn sobre el texto 'Hacer click!'
<div id="principal"> <p onclick="alert('Hizo click!!')">Hacer Click!</p> <p>No puede hacer click</p> </div>

Javascript
Embebido Para trabajar con cdigos extensos y funciones personalizadas debemos agrupar los cdigos en un mismo lugar entre etiquetas <script>.

Javascript
El elemento <script> acta exactamente igual que el elemento <style> usado para incorporar estilos CSS. Nos ayuda a organizar el cdigo en un solo lugar, afectando a los elementos HTML por medio de referencias.

Javascript
El elemento <script> y su contenido pueden ser posicionados en cualquier lugar del documento, dentro de otros elementos o entre ellos. Para mayor claridad, se recomienda colocar los cdigos en la cabecera del documento y luego referenciar los elementos a ser afectados usando mtodos Javascript para ese propsito.

Javascript

Javascript
Actualmente existen tres mtodos disponibles para referencias elementos HTML desde Javascript:
getElementsByTagName referencia un elemento por su nombre o palabra clave. getElementById referencia un elemento por su valor de atributo id. getElementsByClassName es una nueva incorporacin que nos permite referenciar un elemento por el valor de su atributo class.

Javascript
Una situacin debe ser considerada: el cdigo del documento es ledo de forma secuencial por el navegador y no podemos referenciar un elemento que an no ha sido creado.

Javascript
En el ejemplo anterior el cdigo es posicionado en la cabecera del documento y es ledo por el navegador previo a la creacin del elemento <p> que estamos referenciando. Si hubisemos intentado afectar al elemento <p> directamente con una referencia hubiramos recibido un mensaje de error, anunciando que el elemento no existe.

Javascript
Para evitar este problema, el cdigo fue convertido a una funcin llamada mostraralerta(), y la referencia al elemento <p> junto con el manejador del evento fueron colocados en una segunda funcin llamada hacerclick().

Javascript
Las funciones son llamadas desde la ltima lnea de cdigo usando otro manejador de eventos (en este caso asociado a la ventana) llamado onload. Este manejador ejecutar la funcin hacerclick() cuando el documento sea completamente cargado y todos los elementos creados.

Javascript
Primero las funciones Javascript son cargadas (declaradas) pero no ejecutadas. Luego los elementos HTML, incluidos en elementos <p>, son creados. Y finalmente, cuando el documento completo es cargado en la ventana del navegador, el evento load es disparado y la funcin hacerclick() es llamada.

Javascript
En la funcin hacerclick(), el mtodo getElementsByTagName referencia todos los elementos <p>. Este mtodo retorna un arreglo conteniendo una lista de los elementos del tipo especificado en el documento. Sin embargo, usando el ndice [0] al final del mtodo se indica que solo queremos que el primer elemento de la lista sea retornado.

Javascript
Una vez que este elemento es identificado, el cdigo registra el manejador de eventos onclick para el mismo. La funcin mostrarAlerta() ser ejecutada cuando el evento click es disparado sobre este elemento mostrado el mensaje hizo click!!!

Javascript
Archivos Externos Los cdigos Javascript crecen exponencialmente cuando agregamos funciones y aplicamos algunas de las APIs. Cdigos embebidos incrementan el tamao de nuestros documentos y los hacen repetitivos (cada documento debe volver a incluir los mismos cdigos).

Javascript
Para reducir los tiempos de descarga, incrementar nuestra productividad y poder distribuir y reusar nuestros cdigos en cada documento sin comprometer eficiencia, lo mejor es guardar todos los cdigos Javascript en uno o ms archivos externos y llamarlos usando el atributo src.

Javascript