tutorial de jquery
TRANSCRIPT
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:
<html xmlns="http://www.w3.org/1999/xhtml"> <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:
<html xmlns="http://www.w3.org/1999/xhtml">
<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>"); //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:
Nombre del efecto
Descripcion Descripcion de los parámetros
Show (Mostrar)
Modifica los atributos alto, ancho y transparencia, partiendo de 0.
$(objeto).show("velocidad")
Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser "slow" (lento), "normal", o "fast" (rápido).
Hide (Ocultar)
Modifica los atributos alto, ancho y transparencia, partiendo de los valores actuales hasta llegar a 0.
$(objeto).hide("velocidad")
Slide Down (Aparecer hacia abajo)
Modifica los atributos alto y transparencia, partiendo de 0. Es similar a "show", salvo que no modifica el ancho, creando un efecto de "cortinilla".
$(objeto).slideDown("velocidad")
Slide Up Modifica los atributos alto y transparencia, partiendo de
(Aparecer hacia arriba)
los actuales, hasta llegar a 0. Es similar a "show", salvo que no modifica el ancho, creando un efecto de "cortinilla".
$(objeto).slideUp("velocidad")
Fade In(Aparecer)
Modifica el atributo transparencia desde 0.
$(objeto).fadeIn("velocidad")
Fade Out(Desapare
Modifica el atributo transparencia desde el valor actual, hasta llegar a 0.
$(objeto).fadeOut("velocidad")
Center (Centrar)
Centra un elemento con respecto a su "parent".
$(objeto).center("velocidad");
Fade To(Cambiar transparencia)
Modifica el atributo transparencia a un valor especifico.
$(objeto).fadeTo("velocidad", transparencia)
Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser "slow" (lento), "normal", o "fast" (rápido).
Transparencia: Un numero de 0 a 100 que indica que tan visible es el elemento.
Animate (Animar)
Modifica un atributo especifico.
$(objeto).animate("propiedades","velocidad");
Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser "slow" (lento), "normal", o "fast" (rápido).
Propiedades: Una o más propiedades con valor numérico en CSS, por ejemplo width y height. La llamada seria:
$(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>
<script type="text/javascript">
// 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 ello son HTML y 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 embebido 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 so 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, request, etc, son 12), tambien se pueden insertar objetos xml, javascript, y con tecnologia nueva de microsoft.NET tambien se pod an pon r objetos de C#, java, etc,
c, como que las pobres paginas html del futuro van a estar muy cargaditas. Regresando a lo nuestro par
onstruir el ejemplo del area del triangulo se deberan construir dos cosas: a) Un 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 esta 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 los datos, hara lo
rocesos y construira una pagina de res
ta que
le mandara al usuario.
digo de la forma de datos prog4.html <HTML> <P> FORMA HTML PROG 4</
<FORM ACTION=http://programacionfacil
m/tusitio/PROG4.ASP METHOD=POST> BASE.
<INPUT TYPE=TEXT NAME=BASE><BR>
LTURA:<
UT TYPE
XT NAME=ALTURA><BR> <BR><INPUT TYPE=SUBMIT VALUE=OK> </FORM> </HTML>
abarla como prog4.html, subirla a tu
io en LUNAR AGES y activarla con : http://tudominioLUNARPAGES/prog4.html Se le llama forma porque dentro lleva el tag <form /form>, contiene dos componentes de texto propios de html y un com onente de orden de tipo submit tambien propio de html, form lleva una acción es decir cuando el usuario haga clik en el boton ok, se le pide al servidor que eje
e el prog4.
, 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(), per 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