Javascript

Javascript es un lenguaje de programación

interpretado dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.

Todos los navegadores modernos interpretan

el código JavaScript integrado dentro de

las páginas web.

<SCRIPT TYPE="TEXT/JAVASCRIPT">

Para escribir un Hola mundo:document.write ( '¡Hola mundo!'

);

Para mostrar un mensaje de alerta:

window.alert ( 'Hola mundo!');

¿QUÉ PODEMOS HACER CON JAVASCRIPT?

Páginas dinámicas (DHTML) Comprobación de datos (Formularios) Uso de los elementos de la página web Intercambiar información entre

páginas web en distintas ventanas Manipulación de gráficos, texto, etc... Comunicación con plug-ins: Flash, Java,

Shockwave.

El siguiente ejemplo escribe un heading y dos parrafos a una pagina HTML:

<script type="text/javascript">document.write("<h1>Esto es Heading</h1>");document.write("<p>Esto es un parrafo</p>");document.write("<p>Yuca con Chicharron</p>");</script>

Generalmente se usan mensajes de alerta para asegurarse que el usuario recibe cierta info. Así se crea un mensaje de alerta en el que se requiere clickear OK:

<html><head><script type="text/javascript">function show_alert(){alert("I am an alert box!");}</script></head><body>

<input type="button" onclick="show_alert()" value="Show alert box" />

</body></html>

Para impedir que n navegador ejecute un script cuando se carga la pagina, se puede insertarle en una función. Se puede llamar a la función desde cualquier punto de la pagina y pueden ser definidas tanto en el <head> como en el

<body>.

<html><head><script type="text/javascript">function displaymessage(){alert("Hello World!");}</script></head>

<body><form><input type="button" value="Clickea!" onclick="displaymessage()" /></form></body></html>

QUÉ ES JQUERY?

jQuery es un framework de Javascript.

En pocas palabras son librerías de código que contienen procesos o rutinas ya listos para usar.

La Competencia de jQuery (MooTools, Farbtastic)

jQuery

PORQUE USARLA? Los programadores utilizan los frameworks para no tener

que desarrollar ellos mismos las tareas más básicas, puesto que en el propio framework ya hay implementaciones que están probadas, que funcionan y no se necesitan volver a programar.

jQuery

jQuery nos puede ayudar, puesto que implementa una serie de clases (de programación orientada a objetos) que nos permiten programar sin preocuparnos del navegador.

incluir en nuestras páginas un script Javascript que contiene el código de jQuery.

Acceder a los elementos de la página es sencillo pues se usa la misma nomenclatura que en CSS.

jQuery

Se cuenta con una variedad de: Selectores Eventos Interacciones ajax Efectos visuales

jQuery

SE MANEJA EN …

HTML element selections HTML element manipulation CSS manipulation HTML event functions JavaScript Effects and animations HTML DOM traversal and modification AJAX Utilities

jQuery

IMPORTANTE RECORDAR

$(selector).action() Signo de dollar para definir que es: jQuery Un (selector) para “busqueda” en elementos

HTML. En jQuery action() para crear elementos.

$ = es un alias de la clase jQuery$() = un constructor$(this).hiden(“slow”); = objeto actual

jQuery

INICIANDO

Para utilizar jQuery, solamente es necesario descargar la librería y enlazar en nuestras páginas el único archivo JavaScript que la forma:

<script type="text/javascript" src="jquery.js"></script>

O

<script language=“javascript” src=jquery-1.3.2.js></scrpt>

<script language=“javascript”></script>

jQuery

La siguiente instrucción permite ejecutar el código JavaScript una vez que la página se ha cargado por completo.

window.onload = function() { ... }

Para iniciarlizar jQuery:

$(document).ready(function(){ //Aqui el codigo});

jQuery

OTROS EJEMPLOS

Añadir o retirar clases:$("a").addClass("boton");

$("a").removeClass("boton");

jQuery

JAVASCRIPT VS. JQUERY

window.onload=function()

{

alert(“Bienvenido a la pagina”);

}

jQuery

$(document).ready(function(){

alert(“Hola y Bienvenido”);});

AJAX

AJAX = es una abreviatura de JavaScript asíncrono y XML.

En lugar de esperar a que la pagina cargue, este solo cargue lo que necesite.

Ejemplo: Google y Yahoo.

Ajax y jQuery

AJAX

jQuery trae incorporado un "módulo" de AJAX, que hace muy facil la utilización de este. Accedemos a la funcion de la siguiente manera:

$(document).ready(function(){ $.ajax({ }); });

Ajax y jQuery

INTERACCIONES AJAX

// Cargar el contenido de una página HTML en un elemento $("div#noticias").load("noticias.html"); // Descargar un script desde el servidor y ejecutarlo $.getScript("/ruta/hasta/miScript.js");

// Petición GET al servidor con parámetros y función de respuesta

// La petición POST es idéntica, salvo que se cambia

$.get por $.post $.get("/ruta/hasta/el/scriptDelServidor.php",

{ idProducto: "AX00342", cantidad: "3" }, function(data){ alert("Se ha añadido al carrito: " + data); } ); Ajax y jQuery

COMANDOS

Async, beforesSend, complete, contentType, data, dataType, error, global, ifModified, processData, success, timeout, type, url

Ejemplo:$.ajax({ type: "GET", url: "test.js",

dataType: "script" async:false; });

Ajax y jQuery

VIDEOS

http://webcloud.se/log/AJAX-in-Django-with-jQuery/

http://www.youtube.com/watch?v=gZ9Km3bPte0&feature=related

http://www.youtube.com/watch?v=MhNhElcG-JY&feature=related







OTROS FRAMEWORKS EN JAVASCRIPTS Y SUS COMPARACIONES

DOJO TOOLKIT

Está compuesto por Widgets que son componentes de código en Javascript pre-empaquetados que puede ser utilizados para enriquecer sitios web con varias caracterí sticas que trabajan a través de la mayoría de los navegadores, tales como: Menúes, Tabs, Tooltips y Tablas ordenables.

http://www.java2s.com/Tutorial/JavaScript/0570__Dojo-toolkit/CreateEllipse.htm

EXTJS

Originalmente fue construido como una extensión de YUI. Incluye interporalidad con JQuery y Prototype. Posee controles para Campos de Textos, incluyendo Areas de Texto. Controladores selectores de fecha, Campos Numéricos, para Radiobox y Checktbox.

http://www.sencha.com/

MOO TOOLS

Liviano, modular y orientado a objetos, la meta es ser un intermediador para los desarrolladores ayudándolos a crear código JavaScript en una manera elegante, flexible y eficiente. Contiene un gran número de componentes, pero no todos necesitan ser cargados en cada aplicación. Consta de un Core, que es una colección de librerí as que el resto de sus componentes necesitan, Class, que es la librerí a básica.

PROTOTYPE

Prototype es una simple implementación de un solo archivo de código en Javascript que provee un framework para Ajax y otras herramientas. Contiene varias funciones para programar en Javascript que van desde accesos directos a funciones, elementos y objetos Javascript, hasta funciones para lidiar con XMLHttpRequest

SCRIPTACULOUS

Scriptaculous es una librerí a javascript basada en Prototype que agrega efectos visuales dinámicos y una interface para elementos a través de DOM. Viene incluido en Seaside y Ruby on Rails.

COMPARACIÓN JQUERY, MOOTOOLS, YUI, PROTOTYPE+SCRIPTACULOUS

Estos son los resultados por navegadores:

Estos son los resultados por Framework:

Javascript

Documents

Transcript of Javascript