Javascript

1,444 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,444
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
60
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript

  1. 1.
  2. 2. 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.<br />
  3. 3. Todos los navegadores modernos interpretan el código JavaScript integrado dentro de las páginas web. <br />
  4. 4. <script type="text/javascript"><br />Para escribir un Hola mundo:<br />document.write ( '¡Hola mundo!' ); <br />Para mostrar un mensaje de alerta:<br />window.alert ( 'Hola mundo!'); <br />
  5. 5. ¿Qué podemos hacer con javascript?<br /> Páginas dinámicas (DHTML) <br /> Comprobación de datos (Formularios) <br /> Uso de los elementos de la página web <br /> Intercambiar información entre páginas web en distintas ventanas <br /> Manipulación de gráficos, texto, etc...<br /> Comunicación con plug-ins: Flash, Java, Shockwave.<br />
  6. 6. El siguiente ejemplo escribe un heading y dos parrafos a una pagina HTML: <br /> <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> <br />
  7. 7. 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:<br /><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><br />
  8. 8. 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>.<br />
  9. 9. <html><head><script type="text/javascript">functiondisplaymessage(){alert("HelloWorld!");}</script></head><body><form><input type="button" value="Clickea!" onclick="displaymessage()" /></form></body></html><br />
  10. 10.
  11. 11.
  12. 12. Qué es jQuery?<br />jQuery es un framework de Javascript.<br />En pocas palabras son librerías de código que contienen procesos o rutinas ya listos para usar.<br />La Competencia de jQuery (MooTools, Farbtastic)<br />jQuery<br />
  13. 13. PORQUE USARLA?<br />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. <br />jQuery<br />
  14. 14. 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.<br />incluir en nuestras páginas un script Javascript que contiene el código de jQuery.<br />Acceder a los elementos de la página es sencillo pues se usa la misma nomenclatura que en CSS.<br />jQuery<br />
  15. 15. Se cuenta con una variedad de:<br /><ul><li>Selectores
  16. 16. Eventos
  17. 17. Interacciones ajax
  18. 18. Efectos visuales</li></ul>jQuery<br />
  19. 19. Se maneja en …<br />HTML elementselections<br />HTML elementmanipulation<br />CSS manipulation<br />HTML eventfunctions<br />JavaScriptEffects and animations<br />HTML DOM traversal and modification<br />AJAX<br />Utilities<br />jQuery<br />
  20. 20. Importanterecordar<br />$(selector).action()<br />Signo de dollar paradefinirquees: jQuery<br />Un (selector) para “busqueda” en elementos HTML.<br />En jQueryaction() paracrearelementos.<br />
  21. 21. $ = es un alias de la clase jQuery<br />$() = un constructor<br />$(this).hiden(“slow”); = objeto actual<br />jQuery<br />
  22. 22. INICIANDO<br />Para utilizar jQuery, solamente es necesario descargar la librería y enlazar en nuestras páginas el único archivo JavaScript que la forma: <br /><script type="text/javascript" src="jquery.js"></script> <br />O<br /><script language=“javascript” src=jquery-1.3.2.js></scrpt><br /><script language=“javascript”><br /></script><br />jQuery<br />
  23. 23. La siguiente instrucción permite ejecutar el código JavaScript una vez que la página se ha cargado por completo.<br />window.onload = function() { ... } <br />Para iniciarlizarjQuery:<br />$(document).ready(function(){     //Aqui el codigo});<br />jQuery<br />
  24. 24. OtrosEjemplos<br />Añadir o retirar clases:<br />$("a").addClass("boton");<br />$("a").removeClass("boton");<br />jQuery<br />
  25. 25. Javascript vs. jQuery<br />window.onload=function()<br />{<br />alert(“Bienvenido a la pagina”);<br />}<br />$(document).ready(function()<br />{<br />alert(“Hola y Bienvenido”);<br />});<br />jQuery<br />
  26. 26. AJAX<br /> AJAX = es una abreviatura de JavaScript asíncrono y XML.<br /> En lugar de esperar a que la paginacargue, este solo cargue lo quenecesite.<br />Ejemplo: Google y Yahoo.<br />Ajax y jQuery<br />
  27. 27.
  28. 28. Ajax<br />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: <br />$(document).ready(function(){         $.ajax({         }); }); <br />Ajax y jQuery<br />
  29. 29. Interacciones Ajax<br />// 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"); <br />// Petición GET al servidor con parámetros y función de respuesta<br /> // La petición POST es idéntica, salvo que se cambia <br />$.get por $.post <br />$.get("/ruta/hasta/el/scriptDelServidor.php", { idProducto: "AX00342", cantidad: "3" }, function(data){ alert("Se ha añadido al carrito: " + data); } ); <br />Ajax y jQuery<br />
  30. 30. Comandos<br />Async, beforesSend, complete, contentType, data, dataType, error, global, ifModified, processData, success, timeout, type, url<br />Ejemplo:<br />$.ajax({       type: "GET",       url: "test.js",       dataType: "script"       async:false; });<br />Ajax y jQuery<br />
  31. 31. Videos<br />http://webcloud.se/log/AJAX-in-Django-with-jQuery/<br />http://www.youtube.com/watch?v=gZ9Km3bPte0&feature=related<br />http://www.youtube.com/watch?v=MhNhElcG-JY&feature=related<br />
  32. 32. Otros FrameWorks en JavaScripts y sus comparaciones<br />
  33. 33. DojoToolkit<br />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.<br />http://www.java2s.com/Tutorial/JavaScript/0570__Dojo-toolkit/CreateEllipse.htm<br />
  34. 34. ExtJS<br />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. <br />http://www.sencha.com/<br />
  35. 35. Moo Tools<br />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.<br />
  36. 36. Prototype<br />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<br />
  37. 37. Scriptaculous<br />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.<br />
  38. 38. Comparación JQuery, MooTools, YUI, Prototype+Scriptaculous<br />Estos son los resultados por navegadores:<br />
  39. 39. Estos son los resultados por Framework:<br />

×