Clase Programación 10 A

July 23, 2017 | Author: gmullerb | Category: Java Script, Technology, World Wide Web, Computer Programming, Software Development
Share Embed Donate


Short Description

Descripción: Clase 10 A Programación, Prof. Gonzalo Müller, [email protected], Facultad de Ingeniería, UCV...

Description

Programación

Clase 10A. Javascript Modular 2 Prof. Gonzalo Müller [email protected]

Facultad de Ingeniería Universidad Central de Venezuela

Resumen

 Programación Modular 1. Declaración. 2. Definición. 3. Llamada.  Declaración y Definición en Javascript: function  Bloque de declaración en  Reglas para identificadores  Subrutina  Función: return 

Variable retorno Programación – Prof. Gonzalo Müller – Clase 10A – GM - 2

Resumen

 Llamada:  Subrutina: Sentencia de Llamada.  Función: Asignación, Expresión, Argumento.  Parámetros de entrada: variables, constantes o expresiones.

 Ámbito: Local y Global  local predomina sobre el global.

Programación – Prof. Gonzalo Müller – Clase 10A – GM - 3

Programación Modular en Javascript Ejemplo: Construir una pagina web con Javascript con acoplamiento de datos básicos para calcular f(x) para N puntos. f(x) = sen(2*x)+x4 ó |cos(x)| - ex versión 1: Calcular f(x) para un x dado versión 2: Calcular f(x) para N puntos

Fase 1: Diseño y Análisis: DES y DTD Llamada de un DES, DRE ó DF y LV de Módulos y TM. módulo dentro de DRE ó DF, LV y CF de Bloque Principal. otra módulo Fase 2: Codificación: pagina Web con Javascript. Programación – Prof. Gonzalo Müller – Clase 10A – GM - 4

Librerías

Librería Módulo1 Módulo2 Módulo3 Módulo4 Módulo5 Módulo6 Módulo7 Módulo8 Módulo9 … Programación – Prof. Gonzalo Müller – Clase 10A – GM - 5

Librerías

 La Librería es Conjunto de Módulos externos preprogramados

Librería

Módulo1 Módulo2 Módulo3 Módulo4 Módulo5 Módulo6 Módulo7 Módulo8 Módulo9 … Sólo se conoce la declaración del módulo Programación – Prof. Gonzalo Müller – Clase 10A – GM - 6

Librerías en JavaScript Las librerías en Javascript: Están en definidas en archivos *.js Se agregan utilizando la etiqueta que contiene un atributo src que indica el archivo de la correspondiente librería: Programación – Prof. Gonzalo Müller – Clase 10A – GM - 7

Librerías en JavaScript Las librerías deben ser agregadas antes de ser utilizados

Título DECLARACIÓN Y DEFINICIÓN DE MÓDULOS Contenido Original Programa Principal Programación – Prof. Gonzalo Müller – Clase 10A – GM - 8

Librerías de ensayo Librería

Funciones Definidas

funcion.js

reaFuncion(vars,funcion) userFuncion(…)

grafica.js

addGrafica(ancho,alto,linea) drawLinea(contenedor,x1,y1,x2,y2) drawCircle(contenedor,x,y,r,relleno) drawRect(contenedor,x,y,ancho,alto,relleno) drawPoint(contenedor,x,y) cambiaColorRelleno(contenedor,color) cambiaColorLinea(contenedor,color) cambiaAnchoLinea(contenedor,ancho)

librerías creadas para ensayar el uso de librerías en javascript Programación – Prof. Gonzalo Müller – Clase 10A – GM - 9

Librerías de ensayo Librería

Uso

funcion.js

if(creaFuncion("x,y","x+y")){ document.write("x+y="+userFuncion(3,4)); }

grafica.js

var n; n=addGrafica(300,300,true); if(n!=-1) { drawLinea(n,15,15,35,35); drawCircle(n,50,50,5,true); } ó if(addGrafica(300,300,true)!=-1) { drawLinea(0,15,15,35,35); drawCircle(0,50,50,5,true); } Programación – Prof. Gonzalo Müller – Clase 10A – GM - 10

contenedor ancho alto

Librerías de ensayo Librería

Uso

funcion.js

if(creaFuncion("x,y","x+y")){ document.write("x+y="+userFuncion(3,4)); }

grafica.js

var n; n=addGrafica(300,300,true); sistema de coordenadas del contenedor if(n!=-1) 0,0 { drawLinea(n,15,15,35,35); drawCircle(n,50,50,5,true); } ó if(addGrafica(300,300,true)!=-1) { drawLinea(0,15,15,35,35); drawCircle(0,50,50,5,true); } Programación – Prof. Gonzalo Müller – Clase 10A – GM - 11

Librerías de ensayo Librería

Funciones Definidas

funcion.js

/// Crea una función matemática en userFuncion /// \param vars lista de variables de la función matemática /// \param funcion texto que define a la función /// \return true si la función fue creada satisfactoriamente creaFuncion(vars,funcion) /// Función matemática creada con creaFuncion o NaN /// la cantidad de argumentos depende de la función mátemática userFuncion(…)

grafica.js

/// Agrega un contenedor de gráfica /// \param ancho ancho del contenedor /// \param alto alto del contenedor /// \param linea contenedor en nueva línea /// \return # del contenedor o -1 si hubo error addGrafica(ancho,alto,linea) /// Dibuja una línea /// \param contenedor # del contenedor donde se realizará el dibujo /// \param x1 x de extremo 1 /// \param y1 y de extremo 1 /// \param x2 x de extremo 2 /// \param y2 y de extremo 2 /// \return true si la operación fue realizada drawLinea(contenedor,x1,y1,x2,y2)

librerías creadas para ensayar el uso de librerías en javascript Programación – Prof. Gonzalo Müller – Clase 10A – GM - 12

Librerías de ensayo Librería

Funciones Definidas

funcion.js

/// Crea una función matemática en userFuncion /// \param vars lista de variables de la función matemática /// \param funcion texto que define a la función /// \return true si la función fue creada satisfactoriamente creaFuncion(vars,funcion) /// Función matemática creada con creaFuncion o NaN /// la cantidad de argumentos depende de la función mátemática userFuncion(…)

grafica.js

/// Dibuja un círculo /// \param contenedor # del contenedor donde se /// \param x x de centro del círculo /// \param y y de centro del círculo /// \param r radio del círculo /// \param relleno true si relleno, false de lo /// \return true si la operación fue realizada drawCircle(contenedor,x,y,r,relleno) /// Dibuja un rectángulo /// \param contenedor # del contenedor donde se /// \param x x de extremo superior izquierdo /// \param y y de extremo superior izquierdo /// \param ancho ancho del rectángulo /// \param alto alto del rectángulo /// \param relleno true si relleno, false de lo drawRect(contenedor,x,y,ancho,alto,relleno)

realizará el dibujo

contrario

realizará el dibujo

contrario

librerías creadas para ensayar el uso de librerías en javascript Programación – Prof. Gonzalo Müller – Clase 10A – GM - 13

Librerías de ensayo Librería

Funciones Definidas

funcion.js

/// Crea una función matemática en userFuncion /// \param vars lista de variables de la función matemática /// \param funcion texto que define a la función /// \return true si la función fue creada satisfactoriamente creaFuncion(vars,funcion) /// Función matemática creada con creaFuncion o NaN /// la cantidad de argumentos depende de la función mátemática userFuncion(…)

grafica.js

/// Cambia color de relleno de la figuras /// \param contenedor # del contenedor a modificar /// \param color nuevo color /// \return true si la operación fue realizada cambiaColorRelleno(contenedor,color) /// Cambia color de líneas de la figuras /// \param contenedor # del contenedor a modificar /// \param color nuevo color /// \return true si la operación fue realizada cambiaColorLinea(contenedor,color) /// Cambia ancho de líneas de figuras /// \param contenedor # del contenedor a modificar /// \param ancho nuevo ancho /// \return true si la operación fue realizada cambiaAnchoLinea(contenedor,ancho)

librerías creadas para ensayar el uso de librerías en javascript Programación – Prof. Gonzalo Müller – Clase 10A – GM - 14

Librerías en JavaScript Uso de Librería Función if(creaFuncion("x,y","x+y")) { document.write("x+y="+userFuncion(3,4)); } Programación – Prof. Gonzalo Müller – Clase 10A – GM - 15

Librerías en JavaScript Uso de Librería Gráfica if(addGrafica(300,300,true)!=-1) { drawLinea(0,15,15,35,35); drawCircle(0,50,50,5,true); } Programación – Prof. Gonzalo Müller – Clase 10A – GM - 16

Librerías en JavaScript Ejemplo: Construir una pagina web con Javascript con acoplamiento de datos básicos para calcular f(x) para N puntos. Utilizar la librería funcion.js

versión 1: Calcular f(x) para un x dado versión 2: Calcular f(x) para N puntos

Fase 1: Diseño y Análisis: DES y DTD DES, DRE ó DF y LV de Módulos y TM. DRE ó DF, LV y CF de Bloque Principal. Fase 2: Codificación: pagina Web con Javascript. Programación – Prof. Gonzalo Müller – Clase 10A – GM - 17

Ejercicio Construir una pagina web con Javascript para calcular el promedio de f(x) para N puntos. Utilizar la librería función.js Fase 1: Diseño y Análisis: DES, DTD DES, DRE ó DF y LV de Módulos y TM. DRE ó DF, LV y CF de Bloque Principal. 

Identificar parámetros, variables y variables de retorno

Fase 2: Codificación: pagina Web con Javascript. 

Notación, Documentación e Indentación. Programación – Prof. Gonzalo Müller – Clase 10A – GM - 18

Ejercicio Construir una pagina web con Javascript para graficar un conjunto de puntos x,y (enteros). versión 1: Graficar Utilizar la librería grafica.js 1 punto versión 2: Graficar N puntos Fase 1: Diseño y Análisis: DES, DTD DES, DRE ó DF y LV de Módulos y TM. DRE ó DF, LV y CF de Bloque Principal. 

Identificar parámetros, variables y variables de retorno

Fase 2: Codificación: pagina Web con Javascript. 

Notación, Documentación e Indentación. Programación – Prof. Gonzalo Müller – Clase 10A – GM - 19

Ejercicio Construir una pagina web con Javascript para graficar un conjunto de puntos x,y (reales). versión 1: Graficar Utilizar la librería grafica.js 1 punto versión 2: Graficar N puntos Fase 1: Diseño y Análisis: DES, DTD DES, DRE ó DF y LV de Módulos y TM. DRE ó DF, LV y CF de Bloque Principal. 

Identificar parámetros, variables y variables de retorno

Fase 2: Codificación: pagina Web con Javascript. 

Notación, Documentación e Indentación. Programación – Prof. Gonzalo Müller – Clase 10A – GM - 20

Librerías de ensayo Librería

Funciones Definidas

graficaCartesiana.js

Librería derivada de grafica.js, con la capacidad de recibir cual es la extensión real de los ejes y el origen en el extremo inferior derecho addGrafica(ancho,alto,anchoReal,altoReal,linea) drawLinea(contenedor,x1Real,y1Real,x2Real,y2Real) drawCircle(contenedor,xReal,yReal,rReal,relleno) drawRect(contenedor,xReal,yReal,anchoReal,altoReal,relleno) drawPoint(contenedor,xReal,yReal) cambiaColorRelleno(contenedor,color) cambiaColorLinea(contenedor,color) cambiaAnchoLinea(contenedor,anchoReal)

0,0 sistema de coordenadas del contenedor (La relación entre anchoRela y altoReal puede deformar círculos y rectángulos)

librerías creadas para ensayar el uso de librerías en javascript Programación – Prof. Gonzalo Müller – Clase 10A – GM - 21

Ejercicio Construir una pagina web con Javascript para graficar un conjunto de puntos x,y (reales). 1: Graficar Utilizar la librería graficaCartesiana.js versión 1 punto versión 2: Graficar N puntos Fase 1: Diseño y Análisis: DES, DTD DES, DRE ó DF y LV de Módulos y TM. DRE ó DF, LV y CF de Bloque Principal. 

Identificar parámetros, variables y variables de retorno

Fase 2: Codificación: pagina Web con Javascript. 

Notación, Documentación e Indentación. Programación – Prof. Gonzalo Müller – Clase 10A – GM - 22

Ejercicio Construir una pagina web con Javascript para graficar un conjunto de vectores x,y. 1: Graficar Utilizar la librería graficaCartesiana.js versión 1 punto versión 2: Graficar N puntos Fase 1: Diseño y Análisis: DES, DTD DES, DRE ó DF y LV de Módulos y TM. DRE ó DF, LV y CF de Bloque Principal. 

Identificar parámetros, variables y variables de retorno

Fase 2: Codificación: pagina Web con Javascript. 

Notación, Documentación e Indentación. Programación – Prof. Gonzalo Müller – Clase 10A – GM - 23

Ejercicio Construir una pagina web con Javascript para graficar un conjunto de puntos x,f(x). Utilizar las librerías funcion.js, graficaCartesiana.js Fase 1: Diseño y Análisis: DES, DTD DES, DRE ó DF y LV de Módulos y TM. DRE ó DF, LV y CF de Bloque Principal. 

Identificar parámetros, variables y variables de retorno

Fase 2: Codificación: pagina Web con Javascript. 

Notación, Documentación e Indentación. Programación – Prof. Gonzalo Müller – Clase 10A – GM - 24

Ejercicio Construir una pagina web con Javascript para graficar la curva f(x) entre A y B. Utilizar las librerías funcion.js, graficaCartesiana.js Fase 1: Diseño y Análisis: DES, DTD DES, DRE ó DF y LV de Módulos y TM. DRE ó DF, LV y CF de Bloque Principal. 

Identificar parámetros, variables y variables de retorno

Fase 2: Codificación: pagina Web con Javascript. 

Notación, Documentación e Indentación. Programación – Prof. Gonzalo Müller – Clase 10A – GM - 25

Ejercicio Construir una pagina web con Javascript para encontrar 1 Mínimo de f(x) por 1+1. Utilizar las librerías funcion.js Fase 1: Diseño y Análisis: DES, DTD DES, DRE ó DF y LV de Módulos y TM. DRE ó DF, LV y CF de Bloque Principal. 

Identificar parámetros, variables y variables de retorno

Fase 2: Codificación: pagina Web con Javascript. 

Notación, Documentación e Indentación. Programación – Prof. Gonzalo Müller – Clase 10A – GM - 26

View more...

Comments

Copyright ©2017 KUPDF Inc.