Clase Programación 10

Programacin
Clase 10. Javascript Modular

Prof. Gonzalo Mller
gmullerb@mail.com
Facultad de Ingeniera Universidad Central de Venezuela
Clase Anterior
Programacin estructurada. Programacin modular. Algoritmo: Bloque principal, llamadas, 20 lneas. Mdulos. Clases. Tipos: Subrutinas y Funciones. Representacin de Algoritmos Modulares Definicin: subrutinas, funciones. Llamada: subrutinas, funciones.
Programacin Prof. Gonzalo Mller Clase 10 GM - 2
Clase Anterior
Metodologa de la Programacin Modular Diseo Modular: Diagrama Top-Down. DRE, DF, PC y CF. Tabla de Mdulos. Caractersticas: Acoplamiento y Cohesin. Acoplamiento de datos bsico. Solo bloques terminales del DTD. Subrutinas: No generan resultado. Funciones: Generan 1 resultado. Beneficios: reutilizacin, cambios, errores y tiempo.
Programacin Modular
El uso de mdulos consta de tres pasos: 1. Declaracin. 2. Definicin. 3. Llamada.
Programacin Modular
1. Declaracin: hace pblico el modulo para su uso en programa.
Programacin Modular
1. Declaracin: hace pblico el modulo para su uso en programa. 2. Definicin: le da la forma al mdulo, es la que le da vida en el programa.
Programacin Modular
1. Declaracin: hace pblico el modulo para su uso en programa. 2. Definicin: le da la forma al mdulo, es la que le da vida en el programa. 3. Llamada: cuando se le da uso al modulo en el programa.
Programacin Modular
1. Declaracin: hace pblico el modulo para su uso en programa. Sin la declaracin, el modulo no podra ser utilizado por el programa 2. Definicin: le da la forma al mdulo, es la que le da vida en el programa. Sin la definicin, el modulo no funcionara 3. Llamada: cuando se le da uso al modulo en el programa. Sin llamadas, el modulo no tiene razn de existir
Declaracin
Presenta al programa el encabezado del mdulo, Nombre y Parmetros que recibe, lo que se conoce como prototipo. Nombre(parmetro1, parmetro2, ) Dando a conocer el mdulo para poder hacer uso de este a lo largo de todo el programa.
A igual que las variables, los mdulos deben ser declarados antes de ser utilizados.
Definicin
Constituye la Codificacin del Algoritmo del mdulo, es decir, el conjunto de sentencias necesarias para que ste realice la tarea a la que est destinado.
Nombre(parmetro1, parmetro2, ) Fin
Al igual que el programa principal un mdulo:

Puede declarar sus propias variables. Puede realizar llamadas a otros mdulos.
Declaracin y Definicin en Javascript

En Javascript la Declaracin y la Definicin se realizan juntas en un sola operacin

En Javascript la Declaracin y la Definicin se realizan juntas en un sola operacin utilizando la palabra clave function:
function nombre(parametro1, parametro2,) { }

Declaracin

Definicin

<html> <head> <title>Ttulo</title> Mdulos deben ser declarados antes de ser utilizados <script> DECLARACIN Y DEFINICIN DE MDULOS </script> </head> <body> Contenido Original </body> <script> Programa Principal </script> </html>

El nombre del mdulo constituye un identificador por lo que debe cumplir con las reglas de identificadores.
Identificador de la funcin

Reglas para definir un Identificador: 1. Se forma con un secuencia de los siguientes caracteres:
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRST UVWXYZ 0123456789 _


2. No puede contener espacios en blanco, ni ningn otro carcter diferente de los indicados en anteriormente. 3. El primer carcter no puede ser un dgito. 4. Hay distincin entre las letras maysculas y minsculas.
Recomendacin: utilizar nombres que tengan un significado para el dato mdulo que representan.

Ejemplo:
function mayor2(dato1, dato2) function Mayor2(dato1, dato2) function Mayor_2(dato1, dato2) function Mayor 2(dato1, dato2) function 2Mayor(dato1, dato2)
Correctos
Incorrectos

Ejemplo:
function mayor2(dato1, dato2) function Mayor2(dato1, dato2) function Mayor_2(dato1, dato2) function Mayor 2(dato1, dato2) function 2Mayor(dato1, dato2)
Diferentes

Declaracin y Definicin de una Subrutina:
function nombre(parametro1, parametro2, ) { // Declaraciones locales //
// Algoritmo //

Declaracin y Definicin de una Subrutina:
// Algoritmo //
} Los parmetros no se declaran como las variables, es decir, NO se debe colocar:

var parametro1, parametro2 ;

Ejemplo: Declarar y Definir una subrutina para escribir en la salida un resultado:
function escribeResultado(resultado) { document.write(Raiz:, resultado); }

Ejemplo: Declarar y Definir una subrutina para escribir en la salida un resultado:
function escribeResultado(resultado) { document.write(Raiz:, resultado); }
Ejemplo: Declarar y Definir subrutina para escribir en la salida el encabezado del programa:
Sin Parmetro function escribeEncabezado() { document.write(COLARA 1.0<br/>2080<br/>); }

Ejemplo: Construir una pagina web con Javascript con acoplamiento de datos bsicos para para leer y sumar dos nmeros.

Declaracin y Definicin de una Funcin: se utiliza la palabra clave return para el retorno
// Algoritmo //
// return valor; }

Declaracin y Definicin de una Funcin:
// Algoritmo //
// return valor; } Retorno


Variable retorno: Usualmente se define una variable local que contiene el valor a retornar.
function nombre(parametro1, parametro2, ) { // Declaraciones locales // var resultado; Variable retorno
// Algoritmo //
// return resultado; } Retorno

Ejemplo: Declarar y Definir una funcin que calcule la suma de dos nmeros y utilizar en el ejemplo anterior.

Ejemplo: Declarar y Definir una funcin que calcule el cubo de un nmero.

Ejemplo: Declarar y Definir una funcin que calcule el cubo de un nmero. n c c=n3

Ejemplo: Declarar y Definir una funcin que calcule el cubo de un nmero. n c
cubo(n)
c = n*n*n retorna c
c=n3

Modulo Parmetros Retorno Tipo
n c
cubo(n)
c = n*n*n retorna c
c=n3
cubo
Funcin
Variables
c

n c
cubo(n)
c = n*n*n retorna c
c=n3
cubo
Funcin
Encabezado de la funcin
Variables
c
<script> function cubo(n) {
} </script>

n c
cubo(n)
c = n*n*n retorna c
c=n3
cubo
Funcin
Variables
c
<script> function cubo(n) {

DECLARACIONES SECUENCIA DE SENTENCIAS
} </script>

n c
cubo(n)
c = n*n*n retorna c
c=n3
cubo
Funcin
Variables
c
<script> function cubo(n) { var c;
} </script>

n c
cubo(n)
c = n*n*n retorna c
c=n3
cubo
Funcin
Variables
c
<script> function cubo(n) { var c; c=n*n*n; } </script>


n c
cubo(n)
c = n*n*n retorna c
c=n3
cubo
Funcin
Variables
c
<script> function cubo(n) { var c; c=n*n*n; return c; } </script>


Ejemplo: Declarar y Definir una funcin que calcule el cubo de un nmero:
function cubo(n) { // Declaraciones locales // var c; // Algoritmo // c = n*n*n; // return c; }

function cubo(n) { // Declaraciones locales // var c; Variable retorno // Algoritmo // c = n*n*n; // return c; Retorno }

Es un parmetro y por lo function cubo(n) tanto NO SE DECLARA { // Declaraciones locales // var c; Variable retorno // Algoritmo // c = n*n*n; // return c; Retorno }
Llamada
Pone en ejecucin el mdulo. Se coloca el nombre del mdulo. Seguido de los argumentos separados por comas entre parntesis. Nombre(Argumento1, Argumento2, )
Llamada
Llamada de una Subrutina: se pone en ejecucin a travs una sentencia de llamada: Nombre(Argumento1, Argumento2, );
Llamada
Llamada de una Subrutina: se pone en ejecucin a travs una sentencia de llamada: Nombre(Argumento1, Argumento2, ); Ejemplo:
escribeEncabezado(); escribeResultado(s);
Llamada
Llamada de una Funcin: una funcin retorna un valor, por lo que la llamada formar parte de una: Sentencia a Asignacin:
Variable = Nombre(Argumento1, Argumento2, );
Llamada
Expresin Lgica:
(Nombre(Argumento1, Argumento2, ) != )
Llamada
Expresin Lgica:
Expresin Aritmtica:
+ Nombre(Argumento1, Argumento2, ) / 2
Llamada
Expresin Lgica:
Expresin Aritmtica:
+ Nombre(Argumento1, Argumento2, ) / 2
Otra Llamada (como Argumento):

Argumento
Nombre1(, Nombre(Argumento1, , ));

Llamada
Sentencia a Asignacin: Ejemplo:
s = cubo(a);
Llamada
Sentencia a Asignacin: Ejemplo: Ejemplo:
s = cubo(a);
Expresin Lgica:
(cubo(a) > 10)
Llamada
Sentencia a Asignacin: Ejemplo: Ejemplo: Ejemplo:
s = cubo(a);
Expresin Lgica:
(cubo(a) > 10)
Expresin Aritmtica:
(cubo(a) + 2)/cubo(b)
Llamada
Sentencia a Asignacin: Ejemplo: Ejemplo: Ejemplo: Ejemplo:
s = cubo(a);
Expresin Lgica:
(cubo(a) > 10)
Expresin Aritmtica:
(cubo(a) + 2)/cubo(b) Argumento cubo(a + cubo(b))
Otra Llamada (como Argumento):
Argumento escribeResultado(cubo(a))
Ejercicio
Construir una pagina web con Javascript con acoplamiento de datos bsicos para calcular el mximo Al menos 3 mdulos: de 2 nmeros. lectura, proceso y Fase 1: Diseo y Anlisis: DES, DTD escritura DES, DRE DF y LV de Mdulos y TM. DRE DF, LV y CF de Bloque Principal.
Identificar parmetros, variables y variables de retorno
Fase 2: Codificacin: pagina Web con Javascript.

Llamada
Funcionamiento de los parmetros de entrada: Suponga un mdulo con dos entradas:
Entrada 1
Mdulo
Caja Negra
Entrada 2
Declaracin y Definicin:
Modulo(parametro1, parametro2) ...
Llamada
Mdulo
parametro1 parametro2
Internamente
Llamada
El mdulo puede ser llamado con 2 constantes: 8 y 9
Mdulo
8 9
Llamada
Mdulo
8 9
Llamada:
Modulo(8, 9)
Llamada
Internamente, el mdulo maneja los parmetros 1 y 2, con los valores 8 y 9, respectivamente.
Mdulo
parametro1=8 parametro2=9
Llamada
Mdulo
Opera con parametro1 y parametro2
Llamada
El mdulo puede ser llamado con 2 variables: A y B
Mdulo
Variable A Variable B
Llamada
Mdulo
Variable A Variable B
Llamada:
Modulo(A, B)
Llamada
Internamente, el mdulo maneja los parmetros 1 y 2, con los valores de A y B, respectivamente.
Mdulo
parametro1=valor de A parametro2=valor de B
Llamada
Mdulo
Llamada
El mdulo puede ser llamado con 2 variables: X y Y
Mdulo
Variable X Variable Y
Llamada
Mdulo
Variable X Variable Y
Llamada:
Modulo(X, Y)
Llamada
Nuevamente, el mdulo maneja los parmetros 1 y 2, ahora con los valores de X y Y, respectivamente.
Mdulo
parametro1=valor de X parametro2=valor de Y
Llamada
Mdulo
Llamada
El mdulo puede ser llamado con dos expresiones como argumento.
Mdulo
Expresin 1 Expresin 2
Llamada
Mdulo
Expresin 1 Expresin 2
Llamada:
Modulo(Expresin 1, Expresin 2)
Llamada
Nuevamente, el mdulo maneja los parmetros 1 y 2, ahora con los valores resultados de las expresiones.
Mdulo
parametro1=resultado de Expresion1 parametro2=resultado de Expresion2

Llamada
Mdulo
Llamada
Se puede llamar el mdulo con diferentes valores: variables, constantes o expresiones
Mdulo
Internamente siempre sern parametro1 y parametro2
Llamada
Ejemplo: Llamadas:
... a = cubo(6.7); Llamada a la escribeResultado(a); misma funcin con ... diferentes valores b = cubo(a); escribeResultado(b); ... escribeResultado(12); ... ulNumero = cubo(a + b); escribeResultado(ulNumero+1);
Llamada
function cubo(n) { // Declaraciones locales // Internamente var c; siempre ser n // Algoritmo // c = n*n*n; // return c; }
Llamada
Llamadas:
... a = cubo(6.7); escribeResultado(a); ... b = cubo(a); escribeResultado(b); ... escribeResultado(12); ... ulNumero = cubo(a + b); escribeResultado(ulNumero+1);
Llamada a la misma subrutina con diferentes valores
Llamada
Definicin:
function escribeResultado(resultado) { document.write(Cubo:, resultado); } Internamente siempre ser resultado
Programacin Modular en Javascript

Ejemplo: Construir una pagina web con Javascript con acoplamiento de datos bsicos para calcular las races de una ecuacin cuadrtica.
Ejercicio
Construir una pagina web con Javascript con acoplamiento de datos bsicos para calcular el cubo de Al menos 3 mdulos: 3 nmeros. lectura, proceso y Fase 1: Diseo y Anlisis: DES, DTD escritura DES, DRE DF y LV de Mdulos y TM. DRE DF, LV y CF de Bloque Principal.

Ejercicio
Construir una pagina web con Javascript con acoplamiento de datos bsicos para calcular el cubo de Al menos 3 mdulos: N nmeros. lectura, proceso y Fase 1: Diseo y Anlisis: DES, DTD escritura DES, DRE DF y LV de Mdulos y TM. DES, DRE DF, LV y CF de Bloque Principal.

mbito de una variable

Establece en que bloques del programa puede ser utilizada la variable. mbito Global Variables globales: pueden ser utilizadas en cualquier parte del cdigo. mbito Local Variables locales: pueden ser utilizadas slo en el bloque de cdigo donde fueron declaradas.
mbito Global
datoGlobal Algoritmo principal
Funcion1()
Subrutina1()
mbito Global
datoGlobal Algoritmo principal datoGlobal puede ser empleada en cualquiera de estos bloques
Funcion1()
Subrutina1()
mbito Global
<script> function funcion1() { } datoGlobal puede function subrutina1() ser empleada en { cualquiera de estos bloques } </script> <script> En Javascript las variables del bloque </script> principal son variables globales
mbito Local
Algoritmo principal datoMain Funcion1() datoFuncion1 Subrutina1() datoSubrutina1
mbito Local
Algoritmo principal datoMain Funcion1() datoFuncion1 Subrutina1() datoSubrutina1
datoMain slo es vlido dentro del algoritmo principal datoFuncion1 slo es vlido dentro de Funcion1 datoSubrutina1 slo es vlido dentro de Subrutina1
mbito Local
<script> function funcion1() datoFuncion1 slo { var datoFuncion1; es vlido dentro de Funcion1 } function subrutina1() datoSubrutina1 slo { var datoSubrutina1; es vlido dentro de Subrutina1 } </script> <script> datoMain slo es var datoMain; vlido dentro del algoritmo principal </script>
mbito Local
Ejemplo:
<script> function funcion1() { var datoFuncion1; datoFuncion1 = 11; } function subrutina1() { var datoSubrutina1; datoFuncion1 = 12; } </script> <script> var datoMain; datoFuncion1 = 13; </script>
ERROR!
ERROR!
mbito Local
<script> function funcion1() { var dato1; dato1 de Funcion1 } function subrutina1() { var dato1; dato1 de Subrutina1 } </script> <script> var dato1; dato1 del algoritmo principal </script>
mbito Local
Ejemplo:
<script> function funcion1() { var dato1; dato1 = 11; return dato1; } function subrutina1() { var dato1; dato1 = 12; document.write(subrutina + dato1); } </script>
<script> var dato1; dato1 = 13; document.write(funcion: + funcion1()); subrutina1(); document.write(principal: + dato1); </script>
mbito Global y Local

El mbito local predomina sobre el mbito global.
dato1 Algoritmo principal dato1 Funcion1() dato1 Subrutina1() dato1
Ejercicios
Construir una pagina web para: 1) Calcular f(x) = sen(2*x)+x4 para N puntos. 2) Determinar las distancias entre N maquinas. Fase 1: Diseo y Anlisis: DES, DTD DES, DRE DF y LV de Mdulos y TM. DRE DF, LV y CF de Bloque Principal.

Ejercicios
Construir una pagina web para: 3) Calcular el factorial de N nmeros. 4) Dado un conjunto de N nmeros, establecer cuales son nmeros compuestos. Fase 1: Diseo y Anlisis: DES, DTD DES, DRE DF y LV de Mdulos y TM. DRE DF, LV y CF de Bloque Principal.

Ejercicios
Construir una pagina web para: 5) Promediar los pares y promediar los impares de los nmeros entre A y B. 6) Dado N intervalos, calcular la sumatoria de los nmeros que contiene cada intervalo. Fase 1: Diseo y Anlisis: DES, DTD DES, DRE DF y LV de Mdulos y TM. DRE DF, LV y CF de Bloque Principal.

Ejercicios
Construir una pagina web para: 7) Dado un conjunto de puntos en R2 por el usuario determinar cuales se encuentra por encima, por debajo y sobre una recta dada por el usuario. 8) Encontrar por Newton 1 solucin para f(x) = 0. Fase 1: Diseo y Anlisis: DES, DTD DES, DRE DF y LV de Mdulos y TM. DRE DF, LV y CF de Bloque Principal.

Ejercicios
Construir una pagina web para: 9) Encontrar 1 Mnimo de f(x) por 1+1. Fase 1: Diseo y Anlisis: DES, DTD DES, DRE DF y LV de Mdulos y TM. DRE DF, LV y CF de Bloque Principal.
Resumen
Programacin Modular 1. Declaracin. 2. Definicin. 3. Llamada. Declaracin y Definicin en Javascript: function Bloque <script> de declaracin en <head> Reglas para identificadores Subrutina Funcin: return
Variable retorno
Resumen
Llamada: Subrutina: Sentencia de Llamada. Funcin: Asignacin, Expresin, Argumento. Parmetros de entrada: variables, constantes o expresiones. mbito: Local y Global local predomina sobre el global.

Clase Programación 10

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Clase Programación 10

Uploaded by

Copyright:

Available Formats

Programacin

Clase 10. Javascript Modular

Facultad de Ingeniera Universidad Central de Venezuela

Programacin Prof. Gonzalo Mller Clase 10 GM - 4

Programacin Prof. Gonzalo Mller Clase 10 GM - 5

Programacin Prof. Gonzalo Mller Clase 10 GM - 6

Programacin Prof. Gonzalo Mller Clase 10 GM - 7

Al igual que el programa principal un mdulo:

Declaracin y Definicin en Javascript

Programacin Prof. Gonzalo Mller Clase 10 GM - 11

Declaracin y Definicin en Javascript

Programacin Prof. Gonzalo Mller Clase 10 GM - 12

Declaracin y Definicin en Javascript

function nombre(parametro1, parametro2,) { }

Programacin Prof. Gonzalo Mller Clase 10 GM - 13

Declaracin y Definicin en Javascript

Programacin Prof. Gonzalo Mller Clase 10 GM - 14

Declaracin y Definicin en Javascript

Declaracin y Definicin en Javascript

function nombre(parametro1, parametro2,) { }

Programacin Prof. Gonzalo Mller Clase 10 GM - 16

Declaracin y Definicin en Javascript

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRST UVWXYZ 0123456789 _

Declaracin y Definicin en Javascript

Declaracin y Definicin en Javascript

Declaracin y Definicin en Javascript

Declaracin y Definicin en Javascript

Programacin Prof. Gonzalo Mller Clase 10 GM - 21

Declaracin y Definicin en Javascript

} Los parmetros no se declaran como las variables, es decir, NO se debe colocar:

Declaracin y Definicin en Javascript

Programacin Prof. Gonzalo Mller Clase 10 GM - 23

Declaracin y Definicin en Javascript

Declaracin y Definicin en Javascript

Programacin Prof. Gonzalo Mller Clase 10 GM - 25

Declaracin y Definicin en Javascript

Declaracin y Definicin en Javascript

// return valor; } Retorno

Declaracin y Definicin en Javascript

// return resultado; } Retorno

Programacin Prof. Gonzalo Mller Clase 10 GM - 28

Declaracin y Definicin en Javascript

Programacin Prof. Gonzalo Mller Clase 10 GM - 29

Declaracin y Definicin en Javascript

Programacin Prof. Gonzalo Mller Clase 10 GM - 30

Declaracin y Definicin en Javascript

Programacin Prof. Gonzalo Mller Clase 10 GM - 31

Declaracin y Definicin en Javascript

Programacin Prof. Gonzalo Mller Clase 10 GM - 32

Declaracin y Definicin en Javascript

Programacin Prof. Gonzalo Mller Clase 10 GM - 33

Declaracin y Definicin en Javascript

<script> function cubo(n) {

Declaracin y Definicin en Javascript

<script> function cubo(n) {

Declaracin y Definicin en Javascript

<script> function cubo(n) { var c;

Declaracin y Definicin en Javascript

<script> function cubo(n) { var c; c=n*n*n; } </script>

Declaracin y Definicin en Javascript

<script> function cubo(n) { var c; c=n*n*n; return c; } </script>

Declaracin y Definicin en Javascript

Declaracin y Definicin en Javascript

Declaracin y Definicin en Javascript

<script> function cubo(n) { var c; c=nnn; } </script>

<script> function cubo(n) { var c; c=nnn; return c; } </script>