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.

Clase07

618 views

Published on

Elementos de los scripts. Contenido de las marcas <script>. Concepto de algoritmo, ejemplos. Refinamiento. Conversión del algoritmo en código. Características de los buenos algoritmos. Concepto de variable, ejemplos en código y en algoritmos. Concepto de constante, ejemplos. Algoritmo para dibujar un círculo. Ejercicios.

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

  • Be the first to like this

Clase07

  1. 1. Elementos de Scripts 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. 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>Document.Write “</TR>” </li></ul><ul><li>Next </li></ul><ul><li></Script> </li></ul><ul><li></Table></Div></Body></HTML> </li></ul>ej036.html
  3. 3. Algoritmo <ul><li>Conjunto ordenado y finito de operaciones </li></ul><ul><li>Que solucionan un problema </li></ul>
  4. 4. Algoritmo <ul><li>Tabla de 20 x 40 </li></ul><ul><ul><li>Hacer 20 filas </li></ul></ul><ul><ul><li>En cada fila hacer 40 celdas </li></ul></ul><ul><li>Da la idea pero ... </li></ul><ul><li>... Muy general ... </li></ul>
  5. 5. Algoritmo <ul><li>Hacer 20 veces lo siguiente: </li></ul><ul><ul><li>Dibujar el inicio de la fila </li></ul></ul><ul><ul><li>Hacer 40 veces lo siguiente: </li></ul></ul><ul><ul><ul><li>Dibujar una celda </li></ul></ul></ul><ul><ul><li>Dibujar el final de la fila </li></ul></ul><ul><li>Mejor, pero... </li></ul><ul><ul><li>... No es fácil codificarlo ... </li></ul></ul>
  6. 6. Algoritmo <ul><li>Poner i en 0 </li></ul><ul><li>Hacer el siguiente bloque si i < 20 </li></ul><ul><ul><li>Dibujar inicio de fila </li></ul></ul><ul><ul><li>Poner j en 0 </li></ul></ul><ul><ul><li>Hacer el siguiente bloque si j < 40 </li></ul></ul><ul><ul><ul><li>Dibujar una celda </li></ul></ul></ul><ul><ul><ul><li>Hacer j = j + 1 </li></ul></ul></ul><ul><ul><li>Dibujar el final de la fila </li></ul></ul><ul><ul><li>Hacer i = i + 1 </li></ul></ul>
  7. 7. Algoritmo <ul><li>Poner i en 0 </li></ul><ul><li>Hacer el siguiente bloque si i < 20 </li></ul><ul><ul><li>Dibujar inicio de fila </li></ul></ul><ul><ul><li>Poner j en 0 </li></ul></ul><ul><ul><li>Hacer el siguiente bloque si j < 40 </li></ul></ul><ul><ul><ul><li>Dibujar una celda </li></ul></ul></ul><ul><ul><ul><li>Hacer j = j + 1 </li></ul></ul></ul><ul><ul><li>Dibujar el final de la fila </li></ul></ul><ul><ul><li>Hacer i = i + 1 </li></ul></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>Document.Write “</TR>” </li></ul><ul><li>Next </li></ul>
  8. 8. Algoritmo <ul><li>Poner i en 0 </li></ul><ul><li>Hacer el siguiente bloque si i < 20 </li></ul><ul><ul><li>Dibujar inicio de fila </li></ul></ul><ul><ul><li>Poner j en 0 </li></ul></ul><ul><ul><li>Hacer el siguiente bloque si j < 40 </li></ul></ul><ul><ul><ul><li>Dibujar una celda </li></ul></ul></ul><ul><ul><ul><li>Hacer j = j + 1 </li></ul></ul></ul><ul><ul><li>Dibujar el final de la fila </li></ul></ul><ul><ul><li>Hacer i = i + 1 </li></ul></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>Document.Write “</TR>” </li></ul><ul><li>Next </li></ul>
  9. 9. Algoritmo <ul><li>Poner i en 0 </li></ul><ul><li>Hacer el siguiente bloque si i < 20 </li></ul><ul><ul><li>Dibujar inicio de fila </li></ul></ul><ul><ul><li>Poner j en 0 </li></ul></ul><ul><ul><li>Hacer el siguiente bloque si j < 40 </li></ul></ul><ul><ul><ul><li>Dibujar una celda </li></ul></ul></ul><ul><ul><ul><li>Hacer j = j + 1 </li></ul></ul></ul><ul><ul><li>Dibujar el final de la fila </li></ul></ul><ul><ul><li>Hacer i = i + 1 </li></ul></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>Document.Write “</TR>” </li></ul><ul><li>Next </li></ul>
  10. 10. Algoritmo <ul><li>Poner i en 0 </li></ul><ul><li>Hacer el siguiente bloque si i < 20 </li></ul><ul><ul><li>Dibujar inicio de fila </li></ul></ul><ul><ul><li>Poner j en 0 </li></ul></ul><ul><ul><li>Hacer el siguiente bloque si j < 40 </li></ul></ul><ul><ul><ul><li>Dibujar una celda </li></ul></ul></ul><ul><ul><ul><li>Hacer j = j + 1 </li></ul></ul></ul><ul><ul><li>Dibujar el final de la fila </li></ul></ul><ul><ul><li>Hacer i = i + 1 </li></ul></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>Document.Write “</TR>” </li></ul><ul><li>Next </li></ul>
  11. 11. Algoritmo <ul><li>Poner i en 0 </li></ul><ul><li>Hacer el siguiente bloque si i < 20 </li></ul><ul><ul><li>Dibujar inicio de fila </li></ul></ul><ul><ul><li>Poner j en 0 </li></ul></ul><ul><ul><li>Hacer el siguiente bloque si j < 40 </li></ul></ul><ul><ul><ul><li>Dibujar una celda </li></ul></ul></ul><ul><ul><ul><li>Hacer j = j + 1 </li></ul></ul></ul><ul><ul><li>Dibujar el final de la fila </li></ul></ul><ul><ul><li>Hacer i = i + 1 </li></ul></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>Document.Write “</TR>” </li></ul><ul><li>Next </li></ul>
  12. 12. Algoritmo <ul><li>Poner i en 0 </li></ul><ul><li>Hacer el siguiente bloque si i < 20 </li></ul><ul><ul><li>Dibujar inicio de fila </li></ul></ul><ul><ul><li>Poner j en 0 </li></ul></ul><ul><ul><li>Hacer el siguiente bloque si j < 40 </li></ul></ul><ul><ul><ul><li>Dibujar una celda </li></ul></ul></ul><ul><ul><ul><li>Hacer j = j + 1 </li></ul></ul></ul><ul><ul><li>Dibujar el final de la fila </li></ul></ul><ul><ul><li>Hacer i = i + 1 </li></ul></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>Document.Write “</TR>” </li></ul><ul><li>Next </li></ul>
  13. 13. Algoritmo <ul><li>Debe ser independiente del lenguaje </li></ul><ul><li>Debe ser general </li></ul><ul><li>Puede ser: </li></ul><ul><ul><li>Subalgoritmo: si no funciona para todos los casos </li></ul></ul><ul><ul><li>Algoritmo: si funciona para todos los casos </li></ul></ul><ul><li>Entendible por una “máquina” </li></ul><ul><ul><li>En el lenguaje de la máquina </li></ul></ul>
  14. 14. Ejemplo <ul><li><HTMl><Head><Title>Crea una tabla dinámicamente</Title></Head> </li></ul><ul><li><Body> </li></ul><ul><li><Table Border=1 Width=80%> </li></ul><ul><li><Script Language=&quot;javascript&quot;> </li></ul><ul><li>With(document) { </li></ul><ul><li>for (var i=0;i<20;i++) { </li></ul><ul><li>write(&quot;<TR>&quot;); </li></ul><ul><li>for (var j=0;j<40j++) { </li></ul><ul><li>write(&quot;<TD>&nbsp;</TD>&quot;); </li></ul><ul><li>} </li></ul><ul><li>write(&quot;</TR>&quot;); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li></Script> </li></ul><ul><li></Table></Center></Body> </li></ul>ej039.html
  15. 15. Algoritmo <ul><li>Poner i en 0 </li></ul><ul><li>Hacer el siguiente bloque si i < 20 </li></ul><ul><ul><li>Dibujar inicio de fila </li></ul></ul><ul><ul><li>Poner j en 0 </li></ul></ul><ul><ul><li>Hacer el siguiente bloque si j < 40 </li></ul></ul><ul><ul><ul><li>Dibujar una celda </li></ul></ul></ul><ul><ul><ul><li>Hacer j = j + 1 </li></ul></ul></ul><ul><ul><li>Dibujar el final de la fila </li></ul></ul><ul><ul><li>Hacer i = i + 1 </li></ul></ul><ul><li>with(document) { </li></ul><ul><li>for (var i=0;i<20;i++) { </li></ul><ul><li>write(&quot;<TR>&quot;); </li></ul><ul><li>for (var j=0;j<40j++) { </li></ul><ul><li>write(&quot;<TD>&nbsp;</TD>&quot;); </li></ul><ul><li>} </li></ul><ul><li>write(&quot;</TR>&quot;); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  16. 16. Algoritmos <ul><li>Dibujar un círculo en una cuadrícula </li></ul><ul><li>Resolver un laberinto </li></ul><ul><li>Ordenar un conjunto de números </li></ul><ul><li>Encontrar un nombre en el directorio </li></ul><ul><li>Resolver un sudoku </li></ul><ul><li>Jugar al ahorcado </li></ul>
  17. 17. Variables <ul><li>Posiciones de memoria </li></ul><ul><li>Para almacenamiento de datos </li></ul><ul><li>En nuestra memoria pueden ser </li></ul><ul><ul><li>Un número (teléfono, dinero, carné) </li></ul></ul><ul><ul><li>Una frase (slogan, de un libro, una dirección) </li></ul></ul><ul><ul><li>Una imagen (una foto, una herramienta) </li></ul></ul><ul><ul><li>Un sonido (canción, sonido de celular) </li></ul></ul><ul><li>Pueden cambiar su valor (varían) </li></ul>
  18. 18. Variables <ul><li>En la computadora </li></ul><ul><ul><li>Tienen nombre </li></ul></ul><ul><ul><li>Tipo de dato </li></ul></ul><ul><ul><ul><li>Numérico: entero, real, fecha, hora, etc. </li></ul></ul></ul><ul><ul><ul><li>Alfanumérico: caracteres, cadenas de caracteres. </li></ul></ul></ul><ul><ul><ul><li>Binario: imágenes, objetos, archivos, etc. </li></ul></ul></ul>
  19. 19. Variables <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>Document.Write “</TR>” </li></ul><ul><li>Next </li></ul><ul><li></Script> </li></ul><ul><li></Table></Div></Body></HTML> </li></ul>
  20. 20. Variables <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>
  21. 21. Variables <ul><li>Document.Write “<TD>&nbsp;</TD>” </li></ul>¿Es variable?
  22. 22. Constantes <ul><li>Valores que no cambian </li></ul><ul><li>También tienen tipo </li></ul><ul><ul><li>Enteros, reales, cadenas de caracteres </li></ul></ul><ul><li>Sirven para: </li></ul><ul><ul><li>Inicializar variables </li></ul></ul><ul><ul><li>Construír fómulas </li></ul></ul><ul><ul><li>Construír expresiones </li></ul></ul><ul><li>Pueden tener nombre </li></ul><ul><ul><li>Ej.: Pi = 3.141592654 </li></ul></ul>
  23. 23. Algoritmo: construír un cículo <ul><li>Construír un cículo coloreando cuadrados de un arreglo o tabla de n*n posiciones. </li></ul><ul><li>Ej. 11*11: </li></ul>
  24. 24. Construír un círculo <ul><li>Dibujar la cuadrícula </li></ul>
  25. 25. Construír un círculo <ul><li>Dibujar la cuadrícula </li></ul><ul><li>Establecer sistema de coordenadas </li></ul>(0,0) (0,10) (10,0) (10,10)
  26. 26. Construír un círculo <ul><li>Dibujar la cuadrícula </li></ul><ul><li>Establecer sistema de coordenadas </li></ul><ul><li>Calcular el radio R </li></ul>(0,0) (0,10) (10,0) (10,10) R
  27. 27. Construír un círculo <ul><li>Dibujar la cuadrícula </li></ul><ul><li>Establecer sistema de coordenadas </li></ul><ul><li>Calcular el radio R </li></ul><ul><li>Establecer el centro </li></ul>(0,0) (0,10) (10,0) (10,10) R
  28. 28. Construír un círculo <ul><li>Dibujar la cuadrícula </li></ul><ul><li>Establecer sistema de coordenadas </li></ul><ul><li>Calcular el radio R </li></ul><ul><li>Establecer el centro </li></ul><ul><li>Calcular los pares (X,Y) en un cuadrante </li></ul>(0,0) (0,10) (10,0) (10,10) R
  29. 29. Construír un círculo <ul><li>Dibujar la cuadrícula </li></ul><ul><li>Establecer sistema de coordenadas </li></ul><ul><li>Calcular el radio R </li></ul><ul><li>Establecer el centro </li></ul><ul><li>Calcular los pares (X,Y) en un cuadrante </li></ul><ul><li>Para cada par (X,Y) colorear los puntos </li></ul><ul><ul><li>(X,Y) (-X,Y) </li></ul></ul><ul><ul><li>(X,-Y) (-X,-Y) </li></ul></ul>(0,0) (0,10) (10,0) (10,10) R
  30. 30. Construír un círculo <ul><li>Calcular los pares (X,Y) en un cuadrante </li></ul><ul><ul><li>Tomar valores para X desde 0 hasta R </li></ul></ul><ul><ul><li>Para cada valor de X calcular Y por Pitágoras </li></ul></ul>(0,0) (0,10) (10,0) (10,10) R
  31. 31. Construír un círculo <ul><li>Calcular los pares (X,Y) en un cuadrante </li></ul><ul><ul><li>Tomar valores para X desde 0 hasta R </li></ul></ul><ul><ul><li>Para cada valor de X calcular Y por Pitágoras </li></ul></ul>(0,0) (0,10) (10,0) (10,10) R X Y
  32. 32. Construír un círculo <ul><li>Calcular los pares (X,Y) en un cuadrante </li></ul><ul><ul><li>Tomar valores para X desde 0 hasta R </li></ul></ul><ul><ul><li>Para cada valor de X calcular Y por Pitágoras </li></ul></ul>(0,0) (0,10) (10,0) (10,10) R X Y
  33. 33. Construír un círculo <ul><li>Calcular los pares (X,Y) en un cuadrante </li></ul><ul><ul><li>Tomar valores para X desde 0 hasta R </li></ul></ul><ul><ul><li>Para cada valor de X calcular Y por Pitágoras </li></ul></ul>(0,0) (0,10) (10,0) (10,10) R X Y
  34. 34. Construír un círculo <ul><li>Preguntas </li></ul><ul><ul><li>¿Es un algoritmo? ¿Un subalgoritmo? </li></ul></ul><ul><ul><li>¿Qué pasa con tablas de número par de columnas o filas? </li></ul></ul><ul><ul><li>¿Qué pasa cuando N = 0? </li></ul></ul>(0,0) (0,10) (10,0) (10,10) R X Y ej040.html
  35. 35. Construír un círculo <ul><li>Proyecto </li></ul><ul><ul><li>Resolver el problema de los lados </li></ul></ul><ul><ul><li>Resolver el problema de las cuadrículas con número par de columnas </li></ul></ul><ul><ul><li>Puntos extra si viene también en Javascript </li></ul></ul><ul><ul><li>Puntos extra si funciona en FireFox </li></ul></ul><ul><ul><li>¡¡¡ No sean ambiciosos !!! </li></ul></ul>(0,0) (0,10) (10,0) (10,10) R X Y ej040.html

×