Descripción: Clase 10 A Programación, Prof. Gonzalo Müller,
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
