Clase07

615 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
615
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×