javascript
DESCRIPTION
TRANSCRIPT
![Page 1: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/1.jpg)
![Page 2: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/2.jpg)
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.
![Page 3: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/3.jpg)
Todos los navegadores modernos interpretan
el código JavaScript integrado dentro de
las páginas web.
![Page 4: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/4.jpg)
<SCRIPT TYPE="TEXT/JAVASCRIPT">
Para escribir un Hola mundo:document.write ( '¡Hola mundo!'
);
Para mostrar un mensaje de alerta:
window.alert ( 'Hola mundo!');
![Page 5: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/5.jpg)
¿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.
![Page 6: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/6.jpg)
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>
![Page 7: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/7.jpg)
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>
![Page 8: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/8.jpg)
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>.
![Page 9: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/9.jpg)
<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>
![Page 10: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/10.jpg)
![Page 11: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/11.jpg)
![Page 12: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/12.jpg)
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
![Page 13: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/13.jpg)
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
![Page 14: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/14.jpg)
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
![Page 15: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/15.jpg)
Se cuenta con una variedad de: Selectores Eventos Interacciones ajax Efectos visuales
jQuery
![Page 16: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/16.jpg)
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
![Page 17: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/17.jpg)
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.
![Page 18: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/18.jpg)
$ = es un alias de la clase jQuery$() = un constructor$(this).hiden(“slow”); = objeto actual
jQuery
![Page 19: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/19.jpg)
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
![Page 20: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/20.jpg)
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
![Page 21: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/21.jpg)
OTROS EJEMPLOS
Añadir o retirar clases:$("a").addClass("boton");
$("a").removeClass("boton");
jQuery
![Page 22: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/22.jpg)
JAVASCRIPT VS. JQUERY
window.onload=function()
{
alert(“Bienvenido a la pagina”);
}
jQuery
$(document).ready(function(){
alert(“Hola y Bienvenido”);});
![Page 23: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/23.jpg)
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
![Page 24: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/24.jpg)
![Page 25: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/25.jpg)
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
![Page 26: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/26.jpg)
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
![Page 27: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/27.jpg)
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
![Page 28: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/28.jpg)
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
![Page 29: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/29.jpg)
OTROS FRAMEWORKS EN JAVASCRIPTS Y SUS COMPARACIONES
![Page 30: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/30.jpg)
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
![Page 31: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/31.jpg)
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/
![Page 32: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/32.jpg)
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.
![Page 33: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/33.jpg)
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
![Page 34: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/34.jpg)
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.
![Page 35: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/35.jpg)
COMPARACIÓN JQUERY, MOOTOOLS, YUI, PROTOTYPE+SCRIPTACULOUS
Estos son los resultados por navegadores:
![Page 36: Javascript](https://reader035.vdocuments.co/reader035/viewer/2022062616/54b43f0b4a7959903f8b4604/html5/thumbnails/36.jpg)
Estos son los resultados por Framework: