Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Clase06

596 views

Published on

Introducción al uso de scripts en páginas HTML. Explicación del concepto de contenido dinámico. Principales USOS. DHMTL y DOM. Estructura de las instrucciones, ejemplos. Flujo de ejecución con scripts.

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

Clase06

  1. 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. 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. 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. 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>&nbsp;</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. 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. 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. 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. 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. 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>&nbsp;</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. 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. 11. Poder de los Scripts <ul><li>Else </li></ul><ul><li>Pars = Replace(Pars,&quot;?&quot;,&quot;&quot;) </li></ul><ul><li>Pars = Replace(Pars,&quot;Fils=&quot;,&quot;&quot;) </li></ul><ul><li>Pars = Replace(Pars,&quot;Cols=&quot;,&quot;&quot;) </li></ul><ul><li>Pars = Replace(Pars,&quot;%26&quot;,&quot;&&quot;) </li></ul><ul><li>Pos = InStr(Pars,&quot;&&quot;) </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. 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>&nbsp;</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

×