Tutorial de Jquery

Tutorial de jQuery
Por Lunatic Lycanthrop el 08 de Marzo de 2007 con 417,283 visitas.

HTML, CSS y Javascript Otros tutoriales por Lunatic Lycanthrop.
jQuery es una liviana libreria de JavaScript, pensada para interactuar con los elementos de una web por
medio del DOM. Lo que la hace tan especial es su sencillez y su reducido tamaño.
¿Por que debería usarlo?
La sencillez de su sintaxis y la poca extension del codigo que necesitas escribir son las caracteristicas
más notables. Si hicieras lo que hace jQuery con getElementById y window.onload no solo tendrias que
escribir mucho, si no que podrian haber diversos problemas.
¿Como empiezo a usarlo?

Lo primero que debes hacer, es descargarlo de la web oficial: jQuery. Una vez descargada la libreria
(son más o menos 16k) puedes proceder a tu primer script:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prueba de jQuery</title>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Lo primero que hacemos es linkear el jQuery a nuestro documento. Facil, no?
Ejecución y sintaxis básica

jQuery tiene una sintaxis muy sencilla. Los comandos se reconocen por comenzar con el simbolo "$".
Ahora, la forma de una sentencia es la siguiente:
$(elemento).evento(funcion-o-parametro);
La manera de inicializar jQuery es muy util:
$(document).ready(function(){
//Aqui tu codigo
});
Ready es un método propio de jQuery, que revisa si el DOM está listo para usarse. Es más util que el
window.onload, pues este debe esperar a que todos los elementos de la pagina esten cargados (como
scripts e imagenes) paa ejecutar. El "ready", en cambio, espera solo a la estructura.
Acceso a elementos y eventos
Acceder a los elementos de la página es sencillo pues se usa la misma nomenclatura que enCSS:
Tipo de elemento Modo de llamado
Etiqueta Nombre de la etiqueta. Ejemplos: "a", "strong", "div"
Elemento con un Id Id precedido por el signo "#". Ejemplos: "#principal","#texto"
Elemento con una clase (class) Clase precedida por un punto (.). Ejemplos: ".codigo", ".titulo"
Nota: Tambien funcionan muchos de los selectores de CSS como ">", "*", etc. Un ejemplo de su uso
seria:
$("* > a").click( function(){alert("nada");});
Los eventos que se pueden usar son los mismos que usariamos normalmente. El unico cambio es la
supresión del "on" inicial: mouseover, click, focus, etc
Veamos todo junto

Veamos un ejemplo de lo visto hasta ahora:
<head>
<title>Prueba de jQuery</title>
<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function (){
//Aqui asignamos el click al elemento <a>
$("a").click(function (){
alert("Presionaste un <a>");
});
});
</script>
</head>
<body>
<a href="#"> Presioname! </a>
</body>
</html>
Al presionar cualquier etiqueta "a" del documento, se ejecutaria el alert.
Añadir o retirar clases

Cuando queremos que un elemento pueda interactuar con un css ya establecido, usamos las clases. Con
jQuery, estas pueden ser asignadas dinamicamente:
$("a").addClass("boton");
O tambien removidas:
$("a").removeClass("boton");
Ahora, podemos añadirle CSS a esa determinada clase, y ver como se comporta:
<head>
<title>
Prueba de jQuery
</title>
<script src="jquery.js" type="text/javascript">
</script>
$(document).ready(function (){
//Aqui asignamos el click al elemento <a>
$("a").click(function (){
alert("Presionaste un <a>");
//Aqui removemos la clase!
$("a").removeClass("boton");
});
//Aqui añadimos la clase a los elementos <a>
$("a").addClass("boton");
});
</script>
<style type="text/css">
.boton{
color:#f00;
display:block;
width:100px;
text-align:center;
border:#f00 solid 1px;
}
</style>
</head>
<body>
<a href="#" class="algo">Presioname!</a>
</body>
</html>
Al ejecutarse el script, todos los "a", tomarán la clase "boton", que tiene propiedades de CSS. Sin
embargo, al oprimir el elemento, la clase es removida.
Efectos especiales
Esta librería también esta compuesta por algunos efectos, que resultan muy útiles. Son livianos y faciles
de llamar. A continuación, una breve descripcion de cuales son, que hacen y como se usan:
e del
Descripcion Descripcion de los parámetros
Modifica los atributos alto, ancho y transparencia, partiendo de 0. Velocidad: Determina el tiempo en el que se realizará el
efecto. Puede ser "slow" (lento), "normal", o "fast" (rápid
Mostrar)
$(objeto).show("velocidad")
Modifica los atributos alto, ancho y transparencia, partiendo de los

valores actuales hasta llegar a 0.
Ocultar)
$(objeto).hide("velocidad")
Modifica los atributos alto y transparencia, partiendo de 0. Es similar a

"show", salvo que no modifica el ancho, creando un efecto de
"cortinilla".
own
cer hacia
$(objeto).slideDown("velocidad")
Modifica los atributos alto y transparencia, partiendo de los actuales,

hasta llegar a 0. Es similar a "show", salvo que no modifica el ancho,
creando un efecto de "cortinilla".
p
cer hacia
$(objeto).slideUp("velocidad")
Modifica el atributo transparencia desde 0.
(Aparecer)
$(objeto).fadeIn("velocidad")
Modifica el atributo transparencia desde el valor actual, hasta llegar a 0.
saparecer)
$(objeto).fadeOut("velocidad")
(Centrar) Centra un elemento con respecto a su "parent".

$(objeto).center("velocidad");
Modifica el atributo transparencia a un valor especifico.

Velocidad: Determina el tiempo en el que se realizará el
o(Cambiar
rencia)
$(objeto).fadeTo("velocidad", transparencia) Transparencia: Un numero de 0 a 100 que indica que ta
visible es el elemento.
Velocidad: Determina el tiempo en el que se realizará el

Modifica un atributo especifico.
Propiedades: Una o más propiedades con valor numéric
e (Animar) CSS, por ejemplo width y height. La llamada seria:
$(objeto).animate("propiedades","velocidad");
$(objeto).animate({width:20,height:200
"slow");
"Callbacks", llamar funciones y pasar parametros

Despues de un evento se pueden llamar otras funciones JavaScript y jQuery, de la forma tradicional:
funcion();
Hay eventos que permiten, acabada su ejecución, llamar funciones. Los efectos, por ejemplo, permiten
un parámetro opcional, el de "callback". De modo que la sintaxis para un efecto con callback, sería (por
ejemplo) la siguiente:
$(objeto).show("velocidad", funcion);
Nota: La funcion debe colocarse sin los parentesis y sin comillas
Como no se pueden usar parentesis en un callback, el modo de pasar los parametros seria el siguiente:
$(objeto).show("slow", function(){
lafuncion("parametro1","parametro2");
});
Conclusiones
Este tutorial es a modo de introduccion. Depende de ti explorar jQuery para explotar todas sus
funcionalidades. Para conocer más a fondo esta librería, puedes visitar los siguientes vinculos:
 Descarga los ejemplos de este tutorial

 Página principal de jQuery
 Documentación de jQuery
 Tutoriales de jQuery
 Descargas de jQuery
 Blog de jQuery

1.- INTRODUCCION

Información y Conocimiento son los dos elementos claves del nuevo milenio ninguna sociedad
podrá alcanzar ni puede ignorar este nuevo esquema ya las naciones no se
miden por su riqueza industrial, ni sus activos físicos, ni por su poder militar, sino por la cantidad
de información que produce y consume, así como por la recombinación de información nueva en un
conocimiento de grado superior.
Nuevos sistemas de información, tienden a ser cada vez de mayor alcance y

complejidad sobre todo cuando se toman encuenta la nuevas necesidades de información que
demandan las nuevas organizaciones.
Nuevos sistemas de información son costosos en tiempos y recursos, la solución moderna de

sistemas de información exigen herramientas y metodología que resuelvan, económica, eficiente y
global problemas de información planteados por las organizaciones.
Ademas el pleno potencial del hardware tampoco es aprovechado plenamente y existe un

considerable retraso con el software y sus aplicaciones generando lo que se conoce como “crisis del
software”.
Actualmente el paradigma de programación se ha enfocado a las nuevas necesidades de modernos

y globales sistemas de información, basados en redes y mas aun en la red global
de internet actualmente es mas importante poder concebir y construir sistemas de información con
estas nuevas tecnologias de programación.
JAVASCRIPT es un lenguaje de programación desarrollado por Netscape muy apropiado para

construir sistemas de información basados en red o mejor aun en internet .
2.- MODELO DE SOLUCION
En general un problema de información es posible entenderlo, analizarlo y descomponerlo en todos

sus componentes o partes que de una u otra manera intervienen tanto en su planteamiento como
en su solución.
Una herramienta rápida que nos permite descomponer en partes un problema para su solución es

el llamado modelo de solución, este consiste de una pequeña caja que contiene
los tres elementos más básicos en que se puede descomponer cualquier problema sencillo de
información, estas tres partes son:
LA PRIMERA PARTE son todos los datos que el computador ocupa para resolver el problema, estos
datos son almacenados internamente en la memoria del computador en las llamadas variables
de entrada.
LA SEGUNDA PARTE son todas las operaciones generalmente algebraicas necesarias para
solucionar el problema, generalmente esta parte del modelo es una formula (o igualdad
matemática, ej. X= y + 5).
LA TERCERA PARTE es el resultado o solución del problema que generalmente se obtiene de la

parte de operaciones del modelo y dichos datos están almacenados en las llamadas variables
de salida.
En resumen para todo problema sencillo de información es necesario plantearse las siguientes
preguntas:
Que datos ocupa conocer el computador para resolver el problema y en cuales variables de entrada
se van a almacenar?
Que procesos u operaciones debe realizar el computador para resolver el problema planteado?
Que información o variables de salida se van a desplegar en pantalla para responder al problema

planteado originalmente?
Como nota importante no confundir los términos datos, variables e información:
Datos se refiere a información en bruto no procesada ni catalogada, por ejemplo “Tijuana”,

“calle primera # 213”,”15 años”, ” $2,520.00”, etc.
Variables es el nombre de una localidad o dirección interna en la memoria del computador donde

se almacenan los datos, ejemplo de variables para los casos del inciso anterior, CIUDAD,
DIRECCIÓN, EDAD, SUELDO, ETC.
Información son datos ya procesados que resuelven un problema planteado.
3.- VARIABLES
Identificadores son conjuntos de letras y/o números que se utilizan para simbolizar todos los

elementos que en un programason definibles por el usuario (programador o ingeniero de software)
del mismo como son las variables donde se almacenan datos, funciones( pequeños módulos con
código), etiquetas, clases, objetos, etc.
Una variable se define como un identificador que se utiliza para almacenar todos los datos
generados durante la ejecución de un programa.
Existen ciertas reglas en cuanto a variables:
*
Claras y con referencia directa al problema.
*
No espacios en blanco, ni símbolos extraños en ellas.
*
Se pueden usar abreviaturas, pero solo de carácter general.
*
No deben ser palabras reservadas del lenguaje.
Ejemplos de buenas variables:
Nombre, Edad, SdoDiario, IngMensual, Perímetro, Calif1, etc.�?
4.- DECLARACION Y TIPOS DE DATOS
A toda variable que se use en un programa, se debera declarar de preferencia al principio del

programa.
En javascript existen los siguientes tipos de variables:
a) tipos de datos primitivos:
String
Number
Boolean
b) tipos de datos compuestos :
Object
Array
c) tipos de datos especiales:
Null
Undefined
Para declarar un variable en un script o programa solo usar la palabra reservada var, ejemplo:
Var nombre, edad, sueldo;

Var ciudad=“tijuana”;
Var pi=3.1416;
Recordar que jscript es case-sensitive, es decir reconoce la diferencia que hay entre mayusculas y
minusculas, en otras palabras no declarar alfa e intentar capturar o desplegar ALFA.
Para convertir numeros a strings no hay problema, solo cargar o asignar el numero o variable
numerica a la variable string, pero para convertir strings a numeros existen y deberan usarse las
funciones parseInt() y parseFloat(), ejemplo;
Var alfa, beta=“100”;
Beta = parseInt(beta);
5.- OPERADORES ARITMETICOS
TEMA 5: OPERADORES ARITMÉTICOS JAVASCRIPT
En programacion un operador es un símbolo especial que indica al compilador que debe efectuar

una operación matemática o lógica.
JAVASCRIPT reconoce los siguientes operadores aritméticos:

OPERADOR OPERACION
+ SUMA
- RESTA
* MULTIPLICACION
/ DIVISION
% MODULO O RESIDUO
El operador (%) devuelve el residuo entero de una división entre enteros, ejemplo;
// área de declaración
var alfa;
// área de operaciones
alfa = 23 % 4;
// área de despliegue
desplegar alfa; ---> El resultado en pantalla es 3
Otro ejemplo;
alfa = 108 % 10;
desplegar alfa; → El resultado en pantalla es 8
Para resolver los problemas de potencias y raíces se usan ciertas instrucciones especiales que

proporciona el lenguaje llamadas funciones matemáticas, en Jscript existe toda una librería o mas
correctamente dicho un OBJETO especializado en instrucciones o funciones matemáticas.
Recordar que todas las funciones reciben uno o más datos o valores y regresan siempre un
resultado, una de estas funciones matemáticas es:
a) Potencias por ejemplo 5² se resuelve usando el objeto MATH y su metodo pow(base,exp).(ver

apendice final capitulo)
Esta función ocupa dos valores o datos( base y exp) ambos de tipo double y regresa un resultado
también de tipo double, ejemplo;
var pot;
pot = Math.pow(5,2);
desplegar pot;
6.- JERARQUIA DE OPERACIONES
El problema de no tomar en cuenta la jerarquía de los operadores al plantear y resolver una

operación casi siempre conduce aresultados muchas veces equivocados como estos:
Ejemplos: a) 2 + 3 * 4 = 20 (incorrecto)
…………………..= 14 (correcto)
b) si calif1=60 y calif2=80
entonces si en programa se usa
promedio=calif1 + calif2/2
da como resultado promedio = 100
Recordar siempre que antes de plantear una formula en un programa se deberá evaluar contra el
siguiente:
Orden de operaciones:
1.- Paréntesis
2.- Potencias y raíces
3.- Multiplicaciones y divisiones
4.- Sumas y restas
5.- Dos o más de la misma jerarquía u orden entonces resolver de izquierda a derecha
Nota: Si se quiere alterar el orden normal de operaciones entonces usar paréntesis.
Nota: Tampoco es bueno usar paréntesis de mas en una operación esto solo indica que no se
evalúo bien la formula como en el siguiente ejemplo;
área = ( base * altura ) / 2
7.- CONCEPTOS BASICOS DE OOP
Para nuestro propósito en general un objeto puede definirse como cualquier ente o entidad física o
lógica de información.
En este sentido todos los elementos materiales o inmateriales pueden clasificarse como objetos.
En particular cualquier objeto considerado presenta los siguientes tres elementos:
a) Propiedades: Son las características propias de un objeto estos atributos son los que permiten
diferenciar o individualizar un objeto de otro objeto ya sea de la misma o diferente clase o
categoría.
Las propiedades mas generales son forma, color, tamaño, peso, etc., pero ya en particular:
Chamarra → Marca, material, precio, color, tamaño, etc
Alumno → Matricula, nombre, edad, domicilio, etc.
Gato → Raza, nombre, color, edad, etc.
VentanaWindows–>Tamaño, Color, font, etc.
b) Métodos: Son las conductas propias de la naturaleza del objeto.
Así como las propiedades son el ser (que es) del objeto, los métodos son el hacer (que hacer) del
objeto.
ejemplo de métodos:
Gato —> Maullar(), comer(), correr(), saltar(), etc.
Alumno—> Estudiar(), comer(), asistir clase(), pintear()
Cuaderno–>Esescrito(), esrayado(), esborrado(), etc.
VentanaWindows–> Abrir(), cerrar(), maximizar(), etc….
c) Eventos: Es la relación (de varias maneras) que se puede dar entre dos objetos ya sean de la
misma o diferente clase.
Un evento se manifiesta como un interacción entre dos objetos, en general al momento de la

relación al mismo tiempo se dará una reacción o respuesta por parte de los dos objetos, que se
manifiestan como una serie, cadena o conjuntos de métodos propios que se activan.
ejemplo:
Evento……………. relación.. métodos que se activan
gato detecta gata….. detectar.. maullar(), correr(), oler()
gato detecta perro…. detectar.. bufar(), saltar(), correr()
maestro enseña alumno. Enseñar… pasar lista(), preguntar(), tc
Windows click ratón… click….. maximizar(), cerrar()
Windows dblclk ratón.. dblclk…. minimizar(), etc…
Un Programa o un SCRIPT como JavaScript, se puede considerar como un conjunto de una o mas
formas, donde cada una de ellas, contiene un conjunto de objetos, componentes o controles.
Un componente o propiamente dicho un control es un objeto que se especializa en una tarea

especifica por ejemplo hay controles especializados en desplegar textos o mensajes, otros controles
se especializan en desplegar imágenes o vídeos, otros en manipular directorios o archivos
en disco, etc.
Pero en general tanto las formas como los controles, no dejan de ser objetos en programación y
por tanto tienen sus propiedades, métodos y están sujetos a eventos.
8.- MODELOS DE PROGRAMACION EN INTERNET
JavaScripts (de momento lo entenderemos como miniprogramas en javascript) y ASP (active server
pages) son programashechos para ejecutarse en la red de redes es decir en internet y mas
apropiado en servidores de paginas(web server).
En este modelo minimo se ocupan dos computadoras a la primera le llamaremos servidor y es su
mision proporcionar paginas y algunos servicios a las segundas maquinas, este servidor tiene en
ejecución constante un programa llamado servidor de paginas (web server).
La segunda maquina, le llamamos cliente y el unico programa que tiene en ejecución es un

programa llamado browser de los cuales el mas comun es el internet explorer, mediante el browser
el cliente sube a una maquina servidora para bajar una pagina.html almacenada en la servidora y
esta pagina.html la despliega dentro del browser en la maquina cliente.
En uno de los modelo de programación que se sigue en este curso, se construiran programas de

tipo ASP (ACTIVE SERVER PAGES).
Para entender ASP, tenemos que entender algunas cosas elementales de esta tecnologia de
MicroSoft.
En principio ASP es un programa que es ejecutado por un servidor de paginas y sus resultados son
enviados a el browser de la maquina cliente.
Este programa que por cierto tiene por extensión asp (ejemplo prog15.asp) es un conjunto de
objetos que pueden provenir de varias fuentes distintas, las mas comunes son:
A) Objetos HTML.- Son los objetos mas elementales que puede contener o construirse en
cualquier pagina o forma html en internet, por ejemplo los input text, input submits, etc, (recordar
que como objetos tienen sus propiedades y metodos que hay que cargar o programar ver apendice
a final del capitulo).
B) Objetos ASP.- Son objetos propios de esta tecnologia y generalmente estan especializados en
comunicacion entre formas o paginas html, pero tambien tiene objetos especializados en archivos,
directorios, etc ver apendice al final.
C) Objetos ACTIVEX.- Componentes o controles especializados en muchas tareas hechos por

MicroSoft para sus lenguajes visuales de programacion, ejemplos textbox, combobox, grids, etc ver
apendice al final de la unidad.
D) Objetos ADO.- Active Data Object, componentes, controles u objetos especializados en la

manipulación de bases de datos, entre ellas sqlserver, access, etc.
E) Objeto DOM.- Document objetct model, un objeto estandar y especializado en manipular una
pagina html.
Sin embargo recordar que todos estos objetos de distinta clase deberan ser manipulados por algun
lenguaje de programación, es mediante instrucciones en este lenguaje que se puede cargar
propiedades o activar metodos o programar eventos.
Los lenguajes basicos que microsoft incluyo en su primera versión de ASP, son los llamados
LENGUAJES SCRIPTS, y los mas comunes fueron al principio VisualBasicScript, JavaScript y por
esfuerzos de personas y compañias muy responsables PERLSCRIPT y actualmente JSCRIPT.
Como ultima mala noticia, en enero del 2002 microsoft libero su nueva tecnologia que denomino
ASP.NET que a diferencia de los 7 objetos del asp viejo, incorpora mas de 3700 objetos y a
diferencia de los tres lenguajes scripts que soportaba el asp viejo, asp.net soporta muchos
lenguajes de programación incluyendo cobol (estarse pendiente de www.programacionfacil.com
que pronto incluira muchos cursos de asp.net en muchos lenguajes de programación diferentes)
8.5.- REQISITOS WEB PROGRAMACION
1.1.- Recomiendo Ampliamente LYPHA.COM CLICK AQUI o tambien brinkster PARA COMPRAR EL
HOSPEDAJE, cualquier tarjetade debito o credito se puede usar, excepto las electron
1.2.- DEPENDIENDO DEL CURSO YA SEA EN LYPHA.COM CLICK AQUI O BRINKSTER SELECCIONAR
UN PAQUETE WINDOWS O LINUX APROPIADO PARA QUE PUEDAN ALMACENAR Y CARGAR TODOS
LOS PROGRAMAS Y EJEMPLOS DE ESTE SITIO DE PROGRAMACIONFACIL.
1.3.- RECORDAR QUE ESTE WEB HOSTING INCLUYE UN DOMINIO GRATIS DE POR VIDA, NO
PONERSE CREATIVOS CON EL NOMBRE DE DOMINIO, LES RECOMIENDO PRIMERO
SELECCIONAR:
A) TU NOMBRE Y APELLIDO COMUN POR EJEMPLO www.laurosoto.com
B) SI YA ESTA TOMADO POR ALGUN HOMONIMO, ENTONCES TOMAR COMO NOMBRE DE DOMINO
PROFESION+NOMBRE POR EJEMPLO www.ingenierolaurosoto.com o www.liclaurosoto.com
C) SI TAMBIEN ESTA OCUPADO INTENTAR CON www.sistemaslaurosoto.com
D) Si estan de malas y no hay ninguna de las opciones anteriores usar www.SISTEMAS+algun

nombre tecnico.com
4.3.- NO OLVIDAR DENTRO DEL CONTROL PANEL ( PLESK ) CAMBIAR LA OPCION DE ASP 1.0 A
ASP 2.0
OTRA VEZ ES NECESARIO QUE TENGAN A LA MANO LA SIGUIENTE INFORMACION PARA PODER
PLANTAR LOS PROGRAMAS:
TU SITIO WEB: HTTP://LUCAS.COM
TU SERVIDOR DE FTP:// LUCAS.COM
MAS EL USER Y PASWWORD CORRESPONDIENTE.
9.- JAVASCRIPT (1): HTML Y DOM

Tomar nota que el modelo de programación que vamos a seguir, indica que un programa es un
conjunto de objetos provenientes de cualquier fuente ( html, activex, asp, ado y dom) y se utiliza el
lenguaje basic para programar sus propiedades, metodos y eventos.
El primero modelo a aprender y programar, es el mas sencillo de todos solo contiene, CODIGO

HTML, un objeto dom ( ver apendice al final del capitulo) y un poco de codigo en basic, para
programar objetos y solucionar el problema.
Codigo prog1.html:
<HTML>
<H1>BIENVENIDO A JAVASCRIPT </H1>
<B>MI PRIMER SCRIPT<BR>
// comentando y declarando
var edad, meses;
edad=20;
meses = edad * 12;

document.write("edad="+edad+"<br>" ;
document.write("meses="+meses)
</script
<BR
SALUDOS Y DESPEDID
</HTML
Notas
1.- Lo primero y mas importante a recordar que los scripts deberan estar embebidos o empotrados
en una pagina html
2.- Este codigo mezcla instrucciones de dos lenguajes de programación diferentes ellos son HTML
javascript
En otras palabras aparte de aprender el lenguaje de programación basic, tambien por el mismo
precio van a aprender el lenguaje de programacion HTML, en ninguna parte de mund se les da
est oferta
3.- Par crea este programa deberan usar el mejo edito de programas del mundo el NOTEPAD o
el WORDPAD DE WINDOWS cargarlo escribi el programa y grabarlo como
prog1.html tene much cuidad que la extención sea .html o .htm, notepad y wordpad tienen la
costumbre de agregarles aparte la extension .txt o .doc, es decir si el programa queda grabado
como prog1.html.txt, DICHO PROGRAMA NO SE VA A EJECUTAR, revisarlo desde
un consol desde el MSDOS con una orden DIR y si es necesario usar RENAME
4.- Entendemos que Scripts son miniprogramas en javascript que deben ser embebidos o
empotrados dentro de una pagina html
5.- El script o miniprograma empieza con <script y termina con </script> observa que son
minusculas
6.- Todo el resto de instrucciones o objetos, tanto en la PAGINA, como en la FORMA son
instrucciones de HTML, asi que a conseguirse un tutorial basico de html y deberan estudiarlo y
aprenderlo
7.- Tambien se esta usando el objeto DOCUMENT (proviene de DOM) y su metodo WRITE,
observar la notacion que se debe usar al manipular objetos y metodos, es decir OBJETO.METODO
8.- Los + en document.write, se estan usando para enlazar strings
9.- Para ejecutar este programa, solo basta crear un folder donde se almacenaran todas sus tareas
o programas, crearlo con el wordpad o notepad, grabarlo como prog1.html y para verlo en
ejecución existen dos maneras:
Solo click en el y el browser internet explorer lo abre compila y despliega la pagina resultante, tal
como lo muestra la corrida grafica mas abajo de este parrafo.
Como no tiene ningun sentido que solo nosotros nos admiremos de “nuestro” programa, es mejor
subirlo a tu sitio en LUNARPAGEScon el ftp del internet explorer y llamarlo desde cualquier parte
del mundo con la dirección: http://LUNARPAGES/tusitio/prog1.html
10.- JAVASCRIPT (2): HTML
En este segundo modelo de JAVASCRIPT, se manipulan objetos html con codigo JAVASCRIPT.
Recordar que en este modelo de programación es de tipo cliente, es decir es la maquina del cliente
quien lo baja de un servidor de paginas, lo compila y lo ejecuta.
La primera ventaja de este modelo es que ya se podra comunicar directamente con el usuario del
programa, para que sea el propio usuario quien proporcione los datos, como lo muestra el siguiente
ejemplo:
Prog2.html
<HTML>
<H1>BIENVENIDO A JAVASCRIPT </H1>
<B>MI SEGUNDO SCRIPT<BR>
<FORM NAME=prog2>
BASE..:<INPUT TYPE=TEXT NAME=base><BR>
ALTURA:<INPUT TYPE=TEXT NAME=altura><BR>
AREA..:<INPUT TYPE=TEXT NAME=area><BR>
<INPUT TYPE=BUTTON NAME=calculo VALUE=OK>
<script for=calculo event=onclick languaje=javascript>
prog2.area.value=prog2.base.value * prog2.altura.value /2;
</script> </FORM> </HTML>

1.- Lo primero y mas importante a recordar que los scripts deberan estar embebidos o empotrados
en una pagina html y deben ir entre los tags <script>codigobasic</script>.
2.- Este codigo mezcla instrucciones y objetos de dos lenguajes de programación diferentes ellos
son HTML y javascript.
3.- Considerar la pagina como una sola forma o ventana de windows empotrada en el browser,

esta forma contiene cuatro objetos, controles o componentes provenientes del lenguaje de
programacion html (ellos son los input type), tres controles(los de tipo text) se usan para capturar
y desplegar datos, el ultimo control (tipo button) se usa para contener el codigo o script del
programa.
4.-Como se observa todos estos controles son objetos y por tanto tienen propiedades y metodos,
que son los que usamos dentro del programa, observar el formato para procesarlos, es decir:
forma.objeto.propiedad o metodo.
5.- De los controles de tipo TEXT estamos usando su propiedad value para procesar los datos, del
control BUTTON estamos usando su evento onclick, para pegarle el proceso u operación.
6.- Observar que los primero que hace javascript, es detectar el evento onclick del boton calculo y
realizar directamente las operaciones con los objetos html.
7.- Observar con cuidado todas las partes en minusculas.
Para ejecutarlo, existen dos maneras:
1.- Solo abrirlo con el internet explorer en tu propia maquina y si tu internet explorer ya
esta actualizado, deberas ver la imagende arriba.
2.- Por supuesto que hacer un javascript y ejecutarlo en nuestra propia maquina no tiene ningun
sentido, la idea es que sean los usuarios quien lo bajen (la pagina.html o prog1.html) y lo ejecuten
en sus maquinas, para esto deberas subir prog2.html a tu sitio web en LUNARPAGES (anuncio
arriba) y para verlo, pedirlo desde una maquina cliente, solo usar la siguiente dirección:
http://tudominioenLUNARPAGES/tusitio/prog2.html
11.- JAVASCRIPT (3) : ACTIVEX
Tercer modelo de script en este modelo se usan controles activex.
Este modelo es tambien de tipo cliente, es decir puede ser ejecutado directamente en la maquina
del cliente o bajado, compilado y ejecutado.
En el tema anterior el script se construyo para que usara los componentes o controles(los input text
o input button) que tiene integrado el lenguaje de programación html, el codigo en javascript solo
se limito a detectarlos y usar algunas propiedades(value) de ellos.
12.- ASP ACTIVE SERVER PAGES
ASP o active server pages como ya se explico anteriormente en este caso una pagina.asp es puesta
en un servidor de paginas, este servidor de paginas compila las instrucciones html y de javascript y
le manda la pagina resultante a la maquina cliente.
Codigo ejemplo:
<HTML>
HOLA MUNDO ASP
<HTML>
Si se observa bien el ejemplo, se daran cuenta que es puro codigo html, la diferencia es que se
debera grabar con extension asp, se debera subir a su sitio de programacionfacil.com y pedirla
remotamente con la direccion:
http://tudominioenLUNARPAGES/susitio/PAG200.asp
corrida:
Otra vez la diferencia principal es que ahora es la maquina servidora quien ejecuta el codigo
javascript (cuando lo tenga, no en este ejemplo) y manda resultados al cliente.
Los objetos asp que estaremos usando, con sus propiedades y metodos propios son:
RESPONSE, REQUEST, APPLICATION, SESSION, SERVER, ERROR, FILESYSTEM, TEXTSTREAM,

DRIVE, FILES, FOLDER, DICTIONARY.
Es necesario entender que una pagina.html normal podra incluir o mezclar objetos propios de html
(los input text, button, etc, son como 10), tambien podra incluir o mezclar objetos o componentes
ACTIVE los labels, textboxs, comboboxs, etc, son como 100) aunque su nombre correcto es
ACTIVEX CONTROLS, tambien ahora podra incluir estos objetos propios de asp (response, reques
t, etc, son 12), tambien se pueden insertar objetos xml, javascript, y con tecnologia nueva de m
crosoft. ET tam ien se podran poner objetos
C#, java, etc, etc, como que las pobres paginas html del futuro van a estar muy cargaditas. Reg
resand
lo nuestro para construir el ejemplo del area del triangulo se deberan construir dos cosas:
a) Una pagina html o mas correctamente dicho una forma que contendra los elementos necesarios para
capturar los datos, esta pagina o forma html es la que pedira el usuario, llenara los datos y est
a pagina o forma html primero le mandara los datos al servidor y segundo le pedira al servidor
que ejecute el programa asp, esta pagina o programa asp tomara
datos, hara los procesos y construira
pagin
e respuesta que se le man
a al usuario. Codigo de la forma de datos prog4.html <HTML> <P> F
A HTML PROG 4</P> <FORM ACTION=http:/
ogramacionfacil.com/tusitio/PROG4.ASP ME
D=POST> BASE...:<INPUT TYPE=TE
NAME=BA
<BR>
URA:<INPUT TYPE=TEXT NAME=ALTURA><BR> <BR><INPUT TYPE=SUBMIT

VALUE=OK> <
RM> </HTML> Grabarla como prog4.h
, sub rla a tu sitio en LUNARPAGES y activarla con : http://tudominioLUNARPAGES/prog4.html

Se le llama forma porque dentro lleva el tag <form /form>, contiene dos componentes de te
xto propio de html y un componente de orden de tipo submit tambien propio de html, form lleva una acc
ión es decir cuando el usuario haga clik en el boton ok, se le pide a
ervidor que

te el prog4.asp, el metodo post que usa es para pasar los datos a prog4.asp
Su corrida:
El segundo programa a construir es prog4.asp, su codigo es:
<% @LANGUAGE = JavaScript %>
<HTML>
<H1>MI PRIMER ASP</H1>
<%
// declarando
var base, altura, area;
// cargando variables desde la forma
// usando objeto REQUEST

base=parseInt(Request.Form("BASE" );
altura=parseInt(Request.Form("ALTURA" );
//operacione
area= base * altura /2
//desplegando y usando objeto RESPONS
Response.Write("AREA="+area)
%
</HTML
Notas
1.- Empieza definiendo el lenguaje script (javascript) que debe usar el servidor de paginas (web
server) para compilar el programa, por default los servidores de paginas usan el visualbasicscript
2.- Observar que se puede mezclar codigo html y codigo javascript
3.- Todo el codigo javascript debe ir entre los tags <% codigo %
4.- Tambien es valido irse intercambiando entre html y javascript, pero recordar que cada unidad
de codigo javascript debe ir entre sus propios tags <% codigo %
5.- Comentarios en javascript usar simbolo ///
6.- Declaramos nuestras variables con la palabra reservada VAR y siguen siendo de tipo VARIANT
7.- Para cargar los datos que llegarón de prog4.html, en nuestras variables usamos el objeto
REQUEST y el metodo FORM(“NAME DEL INPUT TEXT”), observar que para asegurarse
d recibi u dat numerico usar los metodos parseInt() y parseFloat(), pero para recibir datos
strings no es necesario usar ningun metodo
8.- Para Mandar datos a una nueva pagina de salida, se usa el objeto RESPONSE y el metodo
WRITE STRING
9.- Para Encadenar strings se usa el simbolo + como ya se vio en ejemplos anteriores
10.- Si quieren un brinco de renglon, en la pagina a construir usen un response.write ”<br>” que
tambien les puede servir para mandar cualquier tag de html
9.- Grabarlo como prog4.asp y subirlo a su sitio en LUNARPAGES no hay necesidad de ejecutarlo,
porque quien lo llama y activa es el form action del prog4.htm

Tutorial de Jquery

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tutorial de Jquery

Uploaded by

Copyright:

Available Formats

Tutorial de jQuery

Por Lunatic Lycanthrop el 08 de Marzo de 2007 con 417,283 visitas.

¿Como empiezo a usarlo?

Lo primero que hacemos es linkear el jQuery a nuestro documento. Facil, no?

Ejecución y sintaxis básica

La manera de inicializar jQuery es muy util:

Veamos todo junto

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

Al presionar cualquier etiqueta "a" del documento, se ejecutaria el alert.

Añadir o retirar clases

Modifica los atributos alto, ancho y transparencia, partiendo de los

Modifica los atributos alto y transparencia, partiendo de 0. Es similar a

Modifica los atributos alto y transparencia, partiendo de los actuales,

Modifica el atributo transparencia desde 0.

Modifica el atributo transparencia desde el valor actual, hasta llegar a 0.

(Centrar) Centra un elemento con respecto a su "parent".

Modifica el atributo transparencia a un valor especifico.

Velocidad: Determina el tiempo en el que se realizará el

"Callbacks", llamar funciones y pasar parametros

Nota: La funcion debe colocarse sin los parentesis y sin comillas

 Descarga los ejemplos de este tutorial

Nuevos sistemas de información, tienden a ser cada vez de mayor alcance y

Nuevos sistemas de información son costosos en tiempos y recursos, la solución moderna de

Ademas el pleno potencial del hardware tampoco es aprovechado plenamente y existe un

Actualmente el paradigma de programación se ha enfocado a las nuevas necesidades de modernos

JAVASCRIPT es un lenguaje de programación desarrollado por Netscape muy apropiado para

2.- MODELO DE SOLUCION

En general un problema de información es posible entenderlo, analizarlo y descomponerlo en todos

Una herramienta rápida que nos permite descomponer en partes un problema para su solución es

LA TERCERA PARTE es el resultado o solución del problema que generalmente se obtiene de la

Que procesos u operaciones debe realizar el computador para resolver el problema planteado?

Que información o variables de salida se van a desplegar en pantalla para responder al problema

Como nota importante no confundir los términos datos, variables e información:

Datos se refiere a información en bruto no procesada ni catalogada, por ejemplo “Tijuana”,

Variables es el nombre de una localidad o dirección interna en la memoria del computador donde

Información son datos ya procesados que resuelven un problema planteado.

Identificadores son conjuntos de letras y/o números que se utilizan para simbolizar todos los

Ejemplos de buenas variables:

Nombre, Edad, SdoDiario, IngMensual, Perímetro, Calif1, etc.�?

4.- DECLARACION Y TIPOS DE DATOS

A toda variable que se use en un programa, se debera declarar de preferencia al principio del

En javascript existen los siguientes tipos de variables:

a) tipos de datos primitivos:

b) tipos de datos compuestos :

c) tipos de datos especiales:

Var nombre, edad, sueldo;

Var alfa, beta=“100”;

5.- OPERADORES ARITMETICOS

TEMA 5: OPERADORES ARITMÉTICOS JAVASCRIPT

En programacion un operador es un símbolo especial que indica al compilador que debe efectuar

JAVASCRIPT reconoce los siguientes operadores aritméticos:

desplegar alfa; ---> El resultado en pantalla es 3

desplegar alfa; → El resultado en pantalla es 8

Para resolver los problemas de potencias y raíces se usan ciertas instrucciones especiales que

a) Potencias por ejemplo 5² se resuelve usando el objeto MATH y su metodo pow(base,exp).(ver

6.- JERARQUIA DE OPERACIONES

El problema de no tomar en cuenta la jerarquía de los operadores al plantear y resolver una

entonces si en programa se usa

da como resultado promedio = 100

2.- Potencias y raíces

3.- Multiplicaciones y divisiones

4.- Sumas y restas

Nota: Si se quiere alterar el orden normal de operaciones entonces usar paréntesis.