Post on 13-Jan-2015
description
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: