Clase06

1. Páginas dinámicas Leonel Morales Díaz Ingeniería Simple [email_address] Disponible en: http://www.ingenieriasimple.com/introprogra Copyright 2008 by Leonel Morales Díaz – Ingeniería Simple. Derechos reservados

2. Scripts en Páginas <ul><li><HTML> </li></ul><ul><li><Head> </li></ul><ul><li><Script Language=“VBScript”> </li></ul><ul><li>... </li></ul><ul><li></Script> </li></ul><ul><li></Head> </li></ul><ul><li><Body> </li></ul><ul><li><Script Language=“VBScript”> </li></ul><ul><li>... </li></ul><ul><li></Script> </li></ul><ul><li></Body> </li></ul><ul><li></HTML> </li></ul><ul><li><HTML> </li></ul><ul><li><Head> </li></ul><ul><li><Script Language=“javascript”> </li></ul><ul><li>... </li></ul><ul><li></Script> </li></ul><ul><li></Head> </li></ul><ul><li><Body> </li></ul><ul><li><Script Language=“javascript”> </li></ul><ul><li>... </li></ul><ul><li></Script> </li></ul><ul><li></Body> </li></ul><ul><li></HTML> </li></ul>

3. Uso de Scripts <ul><li>Construcción sobre la marcha </li></ul><ul><ul><li>En base a parámetros </li></ul></ul><ul><ul><li>Document.Write </li></ul></ul><ul><li>Modificación de la página </li></ul><ul><ul><li>DHTML: Dynamic HTML </li></ul></ul><ul><ul><li>DOM: Document Object Model </li></ul></ul><ul><li>Responder a acciones de usuario </li></ul>

4. Ejemplo <ul><li><HTML> </li></ul><ul><li><Head><Title>Esta página se construye dinámicamente</Title></Head> </li></ul><ul><li><Body> </li></ul><ul><li><H1>Esta tabla de 20x40 se construye dinámicamente</H1> </li></ul><ul><li><Div Align=Center><Table Border=1 Width=80%> </li></ul><ul><li><Script Language=“VBScript”> </li></ul><ul><li>Option Explicit </li></ul><ul><li>Dim i,j </li></ul><ul><li>For i=1 To 20 </li></ul><ul><li>Document.Write “<TR>” </li></ul><ul><li>For j=1 To 40 </li></ul><ul><li>Document.Write “<TD> </TD>” </li></ul><ul><li>Next </li></ul><ul><li>Next </li></ul><ul><li></Script> </li></ul><ul><li></Table></Div></Body></HTML> </li></ul>ej036.html

5. Una Página Sencilla <ul><li><HTML> </li></ul><ul><li><Head> </li></ul><ul><li><Title>Esta página se construye dinámicamente</Title> </li></ul><ul><li></Head> </li></ul><ul><li><Body> </li></ul><ul><li><Script Language=“VBScript”> </li></ul><ul><li>Document.Write “<P Align=Center><B>¡Hola a Todos!</B></P>” </li></ul><ul><li></Script> </li></ul><ul><li></Body></HTML> </li></ul>ej037.html

6. Elementos de la Instrucción Document.Write “<P Align=Center><B>¡Hola a Todos!</B></P>” <ul><li>Cadena de Caracteres: </li></ul><ul><li>AKA: String </li></ul><ul><li>Sucesión de caracteres </li></ul><ul><li>Entre comillas </li></ul><ul><li>Común en los lenguajes </li></ul><ul><li>Instrucción: </li></ul><ul><li>Método Write </li></ul><ul><li>Del objeto Document </li></ul><ul><li>Parte del DOM </li></ul><ul><li>Escribe en el documento </li></ul>

7. Elementos de la Instrucción Document.Write “<P Align=Center><B>¡Hola a Todos!</B></P>” <ul><li>Parámetros: </li></ul><ul><li>Con qué hacerlo </li></ul><ul><li>Instrucción: </li></ul><ul><li>Lo que hay que hacer </li></ul>

8. Flujo de la Ejecución <ul><li><HTML> </li></ul><ul><li><Head> </li></ul><ul><li><Title>Esta página se construye dinámicamente</Title> </li></ul><ul><li></Head> </li></ul><ul><li><Body> </li></ul><ul><li><Script Language=“VBScript”> </li></ul><ul><li>Document.Write “<P Align=Center><B>¡Hola a Todos!</B></P>” </li></ul><ul><li></Script> </li></ul><ul><li></Body></HTML> </li></ul>1. Se procesa lo “estático” 2. Se procesa el script 3. Se procesa lo “estático” de después del script

9. Ejemplo <ul><li><HTML> </li></ul><ul><li><Head><Title>Esta página se construye dinámicamente</Title></Head> </li></ul><ul><li><Body> </li></ul><ul><li><H1>Esta tabla de 20x40 se construye dinámicamente</H1> </li></ul><ul><li><Div Align=Center><Table Border=1 Width=80%> </li></ul><ul><li><Script Language=“VBScript”> </li></ul><ul><li>Option Explicit </li></ul><ul><li>Dim i,j </li></ul><ul><li>For i=1 To 20 </li></ul><ul><li>Document.Write “<TR>” </li></ul><ul><li>For j=1 To 40 </li></ul><ul><li>Document.Write “<TD> </TD>” </li></ul><ul><li>Next </li></ul><ul><li>Next </li></ul><ul><li></Script> </li></ul><ul><li></Table></Div></Body></HTML> </li></ul>

10. Poder de los Scripts <ul><li><Body> </li></ul><ul><li><Script Language=“VBScript”> </li></ul><ul><li>Option Explicit </li></ul><ul><li>Dim Pars,Fils,Cols,Pos </li></ul><ul><li>Pars = Document.Location.Search </li></ul><ul><li>If Pars = “” Then </li></ul><ul><li>Fils = 5 </li></ul><ul><li>Cols = 5 </li></ul><ul><li>Else </li></ul>

11. Poder de los Scripts <ul><li>Else </li></ul><ul><li>Pars = Replace(Pars,"?","") </li></ul><ul><li>Pars = Replace(Pars,"Fils=","") </li></ul><ul><li>Pars = Replace(Pars,"Cols=","") </li></ul><ul><li>Pars = Replace(Pars,"%26","&") </li></ul><ul><li>Pos = InStr(Pars,"&") </li></ul><ul><li>Fils = CLng(Left(Pars,Pos-1)) </li></ul><ul><li>Cols = CLng(Right(Pars,Len(Pars)-Pos)) </li></ul><ul><li>End If </li></ul><ul><li>Document.Write “<H1>Esta tabla de “ & Fils & “x” & Cols & “ se construye dinámicamente</H1>” </li></ul><ul><li></Script> </li></ul>

12. Poder de los Scripts <ul><li><Div Align=Center><Table Border=1 Width=80%> </li></ul><ul><li><Script Language=“VBScript”> </li></ul><ul><li>Option Explicit </li></ul><ul><li>Dim i,j </li></ul><ul><li>For i=1 To Fils </li></ul><ul><li>Document.Write “<TR>” </li></ul><ul><li>For j=1 To Cols </li></ul><ul><li>Document.Write “<TD> </TD>” </li></ul><ul><li>Next </li></ul><ul><li>Next </li></ul><ul><li></Script> </li></ul><ul><li></Table></Div></Body></HTML> </li></ul>ej038.html