Download - Clase Programación 10

ProgramaciónClase 10. Javascript Modular

Prof. Gonzalo Mü[email protected]

Facultad de IngenieríaUniversidad Central de Venezuela

ProgramaciónClase 10. Javascript Modular

Clase Anterior

� Programación estructurada.

� Programación modular.

� Algoritmo: Bloque principal, llamadas, 20 líneas.

� Módulos.

� Clases.

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

� Clases.

� Tipos: Subrutinas y Funciones.

� Representación de Algoritmos Modulares

� Definición: subrutinas, funciones.

� Llamada: subrutinas, funciones.

Clase Anterior

� Metodología de la Programación Modular

� Diseño Modular: Diagrama Top-Down.

� DRE, DF, PC y CF.

� Tabla de Módulos.

� Características: Acoplamiento y Cohesión.


� Características: Acoplamiento y Cohesión.

� Acoplamiento de datos básico.

� Solo bloques terminales del DTD.

� Subrutinas: No generan resultado.

� Funciones: Generan 1 resultado.

� Beneficios: reutilización, cambios, errores y tiempo.

Programación Modular

El uso de módulos consta de tres pasos:

1. Declaración.


2. Definición.

3. Llamada.


1. Declaración: hace público el modulo para su uso en programa.




2. Definición: le da la forma al módulo, es la que le da vida en el programa.


vida en el programa.






3. Llamada: cuando se le da uso al modulo en el programa.


1. Declaración: hace público el modulo para su uso en programa. Sin la declaración,

el modulo no podría ser utilizado por el programa




Sin la definición, el modulo no funcionaría

3. Llamada: cuando se le da uso al modulo en el programa.

Sin llamadas, el modulo no tiene razón de existir

Declaración

Presenta al programa el encabezado del módulo,Nombre y Parámetros que recibe, lo que se conocecomo prototipo.

Nombre(parámetro1, parámetro2, …)



� Dando a conocer el módulo para poder hacer usode este a lo largo de todo el programa.

� A igual que las variables, los módulos deben serdeclarados antes de ser utilizados.

Definición

Constituye la Codificación del Algoritmo del módulo,es decir, el conjunto de sentencias necesarias para queéste realice la tarea a la que está destinado.


…


� Al igual que el programa principal un módulo:

� Puede declarar sus propias variables.

� Puede realizar llamadas a otros módulos.

…

Fin

Declaración y Definición en Javascript

En Javascript la Declaración y la Definición se realizan juntas en un sola operación



En Javascript la Declaración y la Definición se realizan juntas en un sola operación utilizando la palabra clave function:

function nombre(parametro1, parametro2,…)



{

…

}




Declaración



{

…

}






{

…

}

Definición


<html>

<head>

<title>Título</title>

<script>

DECLARACIÓN Y DEFINICIÓN DE MÓDULOS

</script>

Módulos debenser declaradosantes de serutilizados


</head>

<body>

Contenido Original

</body>

<script>

Programa Principal

</script>

</html>

utilizados


� El nombre del módulo constituye un identificador porlo que debe cumplir con las reglas de identificadores.


Identificador de la función



{

…

}


Reglas para definir un Identificador:

1. Se forma con un secuencia de los siguientescaracteres:

� a b c d e f g h i j k l m n o p q r s t u v w x y z

A B C D E F G H I J K L M N O P Q R S T


�A B C D E F G H I J K L M N O P Q R S TU V W X Y Z

� 0 1 2 3 4 5 6 7 8 9

� _


2. No puede contener espacios en blanco, ni ningúnotro carácter diferente de los indicados enanteriormente.

3. El primer carácter no puede ser un dígito.

4. Hay distinción entre las letras mayúsculas y


4. Hay distinción entre las letras mayúsculas yminúsculas.

Recomendación: utilizar nombres quetengan un significado para el dato ómódulo que representan.


Ejemplo:

function mayor2(dato1, dato2)

…

function Mayor2(dato1, dato2)

…

Correctos


…

function Mayor_2(dato1, dato2)

…

function Mayor 2(dato1, dato2)

…

function 2Mayor(dato1, dato2)

Incorrectos


Ejemplo:

function mayor2(dato1, dato2)

…

function Mayor2(dato1, dato2)

…

Diferentes


…

function Mayor_2(dato1, dato2)

…

function Mayor 2(dato1, dato2)

…

function 2Mayor(dato1, dato2)


� Declaración y Definición de una Subrutina:

function nombre(parametro1, parametro2, …)

{// Declaraciones locales

//


//

…// Algoritmo

//

…}


� Declaración y Definición de una Subrutina:



//


//

…// Algoritmo

//

…}

Los parámetros 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:


{

document.write(“Raiz:”, resultado);

}


}

Ejemplo: Declarar y Definir subrutina para escribir en la salida el encabezado del programa:

function escribeEncabezado()

{

document.write(“COLARA 1.0<br/>2080<br/>”);}

Sin Parámetro


Ejemplo: Construir una pagina web con Javascript conacoplamiento de datos básicos para para leer y sumardos números.



� Declaración y Definición de una Función:

� se utiliza la palabra clave return para el retornofunction nombre(parametro1, parametro2, …)


//


//

…// Algoritmo

//

…//

return valor;}


� Declaración y Definición de una Función:



//


Retorno

//

…// Algoritmo

//

…//

return valor;}


� Variable retorno: Usualmente se define una variable local que contiene el valor a retornar.function nombre(parametro1, parametro2, …)


//

var


Retorno

Variable retornovar resultado;

…// Algoritmo

//

…//

return resultado;}


Ejemplo: Declarar y Definir una función que calcule lasuma de dos números y utilizar en el ejemplo anterior.



Ejemplo: Declarar y Definir una función que calcule el cubo de un número.




n

c

c=n3




n

c

c=n3


cubo(n)

c = n*n*n

retorna c



Modulo Parámetros Retorno Tipo

cubo n c Función

Variables

c

n

c

c=n3


cubo(n)

c = n*n*n

retorna c

c



Variables

c


cubo n c Funciónn

c

c=n3

Encabezado de la función


cubo(n)

c = n*n*n

retorna c

c

<script>

function cubo(n){

}</script>



Variables

c


cubo n c Funciónn

c

c=n3


cubo(n)

c = n*n*n

retorna c

c

<script>

function cubo(n){

}</script>

DECLARACIONES

SECUENCIA DE SENTENCIAS



Variables

c


cubo n c Funciónn

c

c=n3


cubo(n)

c = n*n*n

retorna c

c

<script>

function cubo(n)

{

var c;

}

</script>



Variables

c


cubo n c Funciónn

c

c=n3


cubo(n)

c = n*n*n

retorna c

c

<script>

function cubo(n)

{

var c;

c=n*n*n;

}

</script>



Variables

c


cubo n c Funciónn

c

c=n3


cubo(n)

c = n*n*n

retorna c

c

<script>

function cubo(n)

{

var c;

c=n*n*n;

return c;}

</script>


Ejemplo: Declarar y Definir una función que calcule el cubo de un número:function cubo(n)


//


//

var c;

// Algoritmo

//

c = n*n*n;

//

return c;

}




//


Retorno

Variable retorno//

var c;

// Algoritmo

//

c = n*n*n;

//

return c;

}




//

Es un parámetro y por lotantoNO SE DECLARA


Retorno

Variable retorno//

var c;

// Algoritmo

//

c = n*n*n;

//

return c;

}

Llamada

Pone en ejecución el módulo.

� Se coloca el nombre del módulo.

� Seguido de los argumentos separados por comasentre paréntesis.


Nombre(Argumento1, Argumento2, …)

Llamada

� Llamada de una Subrutina: se pone en ejecución a través una sentencia de llamada:

Nombre(Argumento1, Argumento2, …);


Llamada

� Llamada de una Subrutina: se pone en ejecución a través una sentencia de llamada:

Nombre(Argumento1, Argumento2, …);


Ejemplo:

escribeEncabezado();

…

escribeResultado(s);

…

Llamada

� Llamada de una Función: una función retorna un valor, por lo que la llamada formará parte de una:

� Sentencia a Asignación:

Variable = Nombre(Argumento1, Argumento2, …);


Llamada




� Expresión Lógica:



(Nombre(Argumento1, Argumento2, …) != …)

Llamada








� Expresión Aritmética:

…+ Nombre(Argumento1, Argumento2, …) / 2…

Llamada









…+ Nombre(Argumento1, Argumento2, …) / 2…

� Otra Llamada (como Argumento):

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

Llamada


Ejemplo: s = cubo(a);


Llamada




Ejemplo: (cubo(a) > 10)


Llamada







Ejemplo: (cubo(a) + 2)/cubo(b)

Llamada







Ejemplo: (cubo(a) + 2)/cubo(b)

� Otra Llamada (como Argumento):

Ejemplo: cubo(a + cubo(b))

escribeResultado(cubo(a))

Argumento

Argumento

Ejercicio

Construir una pagina web con Javascript conacoplamiento de datos básicos para calcular el máximode 2 números. Al menos 3 módulos:

lectura, proceso y


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 deretorno

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

lectura, proceso y escritura

Llamada

� Funcionamiento de los parámetros de entrada: Suponga un módulo con dos entradas:

MóduloEntrada 1


Declaración y Definición:Modulo(parametro1, parametro2) ...

Entrada 2

Caja Negra

Llamada

parametro1

Módulo


parametro2 Internamente

Llamada

� El módulo puede ser llamado con 2 constantes: 8 y9

8

Módulo


9

Llamada

8

Módulo


Llamada:Modulo(8, 9)

9

Llamada

� Internamente, el módulo maneja los parámetros 1 y2, con los valores 8 y 9, respectivamente.

parametro1

Módulo


parametro2

parametro1=8parametro2=9

Llamada

parametro1

Módulo


parametro2

Opera con parametro1 y parametro2

Llamada

� El módulo puede ser llamado con 2 variables: A y B

Variable A

Módulo


Variable B

Llamada

Variable A

Módulo


Llamada:Modulo(A, B)

Variable B

Llamada

� Internamente, el módulo maneja los parámetros 1 y2, con los valores de A y B, respectivamente.

parametro1

Módulo


parametro2

parametro1=valor de Aparametro2=valor de B

Llamada

parametro1

Módulo


parametro2


Llamada

� El módulo puede ser llamado con 2 variables: X y Y

Variable X

Módulo


Variable Y

Llamada

Variable X

Módulo


Llamada:Modulo(X, Y)

Variable Y

Llamada

� Nuevamente, el módulo maneja los parámetros 1 y2, ahora con los valores de X y Y, respectivamente.

parametro1

Módulo


parametro2

parametro1=valor de Xparametro2=valor de Y

Llamada

parametro1

Módulo


parametro2


Llamada

� El módulo puede ser llamado con dos expresionescomo argumento.

Expresión 1

Módulo


Expresión 2

Llamada

Expresión 1

Módulo


Llamada:Modulo(Expresión 1, Expresión 2)

Expresión 2

Llamada

� Nuevamente, el módulo maneja los parámetros 1 y2, ahora con los valores resultados de lasexpresiones.

parametro1

Módulo


parametro2

parametro1=resultado de Expresion1parametro2=resultado de Expresion2

Llamada

parametro1

Módulo


parametro2


Llamada

parametro1

MóduloSe puede llamar el módulo con

diferentes valores:


parametro2valores:

variables, constantes o expresiones

Internamente siempre seránparametro1 y parametro2

Llamada

Ejemplo:

Llamadas:...

a = cubo(6.7);escribeResultado(a);

...

Llamada a la misma función con diferentes valores


...

b = cubo(a);escribeResultado(b);

...

escribeResultado(12);

...

ulNumero = cubo(a + b);escribeResultado(ulNumero+1);

diferentes valores

Llamada

function cubo(n)


//

var c;

// Algoritmo

Internamente 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

Definición:


{

document.write(“Cubo:”, resultado);


document.write(“Cubo:”, resultado);

}

Internamente siempre será resultado

Programación Modular en Javascript

Ejemplo: Construir una pagina web con Javascript conacoplamiento de datos básicos para calcular las raícesde una ecuación cuadrática.


Ejercicio

Construir una pagina web con Javascript conacoplamiento de datos básicos para calcular el cubo de3 números. Al menos 3 módulos:

lectura, proceso y








Ejercicio

Construir una pagina web con Javascript conacoplamiento de datos básicos para calcular el cubo deN números. Al menos 3 módulos:

lectura, proceso y




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 serutilizadas en cualquier parte del código.


utilizadas en cualquier parte del código.

� Ámbito Local → Variables locales: pueden serutilizadas sólo en el bloque de código donde fuerondeclaradas.

Ámbito Global

Algoritmo principal

datoGlobal


Funcion1()

Subrutina1()

Ámbito Global

Algoritmo principal

datoGlobal

datoGlobal


Funcion1()

Subrutina1()

datoGlobalpuede ser

empleada en cualquiera de estos bloques

Ámbito Global

…<script>function funcion1(){…}function subrutina1() datoGlobal puede

ser empleada en


function subrutina1(){…

}</script>…<script>…</script>

ser empleada en cualquiera de estos

bloques

En Javascript las variables del bloqueprincipal son variables globales

Ámbito Local

Algoritmo principal

datoMain


Funcion1()

Subrutina1()

datoFuncion1

datoSubrutina1

Ámbito Local

Algoritmo principal

datoMain

datoMain sólo es válido dentro del algoritmo principal


Funcion1()

Subrutina1()

datoFuncion1

datoSubrutina1

datoFuncion1 sólo es válido dentro de

Funcion1

datoSubrutina1 sólo es válido dentro de

Subrutina1

Ámbito Local…<script>function funcion1(){var datoFuncion1;…

}function subrutina1()

datoFuncion1 sólo es válido dentro de

Funcion1

datoSubrutina1 sólo


function subrutina1(){var datoSubrutina1;…

}</script>…<script>var datoMain;…

</script>

datoSubrutina1 sólo es válido dentro de

Subrutina1

datoMain “sólo” es válido dentro del

algoritmo principal

Á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;…

}</script>…<script>var dato1;…

</script>

dato1 de Subrutina1

dato1 del algoritmo principal

Ámbito Local

Ejemplo: …

<script>function funcion1(){var dato1;dato1 = 11;return dato1;

}function subrutina1(){var dato1;


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.

Algoritmo principal

dato1

dato1


Funcion1()

Subrutina1()

dato1

dato1

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.








Ejercicios


3) Calcular el factorial de N números.

4) Dado un conjunto de N números, establecer cuales son números compuestos.








Ejercicios

Construir una pagina web para:5) Promediar los pares y promediar los impares de los números entre A y B.6) Dado N intervalos, calcular la sumatoria de los números que contiene cada intervalo.Fase 1: Diseño y Análisis: DES, DTD


Fase 1: Diseño y Análisis: DES, DTDDES, DRE ó DF y LV de Módulos y TM.DRE ó DF, LV y CF de Bloque Principal.� Identificar parámetros, variables y variables deretorno


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 solución para f(x) = 0.Fase 1: Diseño y Análisis: DES, DTD


Fase 1: Diseño y Análisis: DES, DTDDES, DRE ó DF y LV de Módulos y TM.DRE ó DF, LV y CF de Bloque Principal.� Identificar parámetros, variables y variables deretorno


Ejercicios


9) Encontrar 1 Mínimo de f(x) por 1+1.








Resumen

� Programación Modular

1. Declaración.

2. Definición.

3. Llamada.

� Declaración y Definición en Javascript: function


� Declaración y Definición en Javascript: function

� Bloque <script> de declaración en <head>

� Reglas para identificadores

� Subrutina

� Función: return

� Variable retorno

Resumen

� Llamada:

� Subrutina: Sentencia de Llamada.

� Función: Asignación, Expresión, Argumento.

� Parámetros de entrada: variables, constantes oexpresiones.


expresiones.

� Ámbito: Local y Global

� local predomina sobre el global.

Download - Clase Programación 10

Top Related