Javascript

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

¿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">functionshow_alert(){alert("I am analert 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">functiondisplaymessage(){alert("HelloWorld!");}</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: ,[object Object]

Se maneja en … HTML elementselections HTML elementmanipulation CSS manipulation HTML eventfunctions JavaScriptEffects and animations HTML DOM traversal and modification AJAX Utilities jQuery

Importanterecordar $(selector).action() Signo de dollar paradefinirquees: jQuery Un (selector) para “busqueda” en elementos HTML. En jQueryaction() paracrearelementos.

$ = 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 iniciarlizarjQuery: $(document).ready(function(){ //Aqui el codigo}); jQuery

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

Javascript vs. jQuery window.onload=function() { alert(“Bienvenido a la pagina”); } $(document).ready(function() { alert(“Hola y Bienvenido”); }); jQuery

AJAX AJAX = es una abreviatura de JavaScript asíncrono y XML. En lugar de esperar a que la paginacargue, este solo cargue lo quenecesite. 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

DojoToolkit 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

Javascript

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

En vedette

En vedette (7)

Similaire à Javascript

Similaire à Javascript (20)

Javascript