8.1 PAUSA Y CONSEJOS JAVASCRIPT:
8.1.1 -DISTINTOS NAVEGADORES:
Javascript es un lenguaje muy dinámico y que ha sido implementado poco a poco, a medida que salían nuevos navegadores. Javascript ha cambiado por lo menos tanto como los navegadores y eso representa un problema para los programadores, porque tienen que estar al tanto de las distintas versiones y la manera de funcionar que tienen.
8.1.2 -CONSEJOS PARA HACER UN CÓDIGO SENCILLO Y FÁCIL DE MANTENER:
Una serie de consejos para que el código de nuestros scripts sea más claro y libre de errores.
• Comentarios habitualmente para que lo que estás haciendo en los scripts pueda ser recordado por ti y cualquier persona.
• Ten cuidado con el ámbito de las variables, recuerda que existen variables globales y locales, que incluso pueden tener los mismos nombres y conoce en cada momento la variable que tiene validez.
• Escribe un código con suficiente claridad, que se consigue con saltos de línea después de cada instrucción, un sangrado adecuado, utilizar las llaves {} siempre, aunque no sean obligatorias y mantener siempre el mismo estilo a la hora de programar.
• Aplica un poco de consistencia al manejo de variables. Declara las variables con var. No cambies el tipo del dato que contiene (si era numérica no pongas luego texto, por ejemplo). Dales nombres comprensibles para saber en todo momento qué contienen. Incluso a la hora de darles nombre puedes aplicar una norma, que se trata de que indiquen en sus nombres el tipo de dato que contienen. Por ejemplo, las variables de texto pueden empezar por una s (de String), las variables numéricas pueden empezar por una n o las boleanas por una b.
• Prueba tus scripts cada poco a medida que los vas programando. Es más fácil encontrar los errores de código en bloques pequeños que en bloques grandes.
8.2 TRATAMIENTO DE ERRORES EN JAVASCRIPT:
8.2.1 -ERRORES COMUNES EN JAVASCRIPT:
Errores de sintaxis ocurren por escribir de manera errónea las líneas de código, equivocarse a la hora de escribir el nombre de una estructura, utilizar incorrectamente las llaves o los paréntesis o cualquier cosa similar. Cuando el analizador sintáctico de javascript detecta un error de estos se presenta el mensaje de error.
Errores de ejecución ocurren cuando se están ejecutando los scripts. Por ejemplo pueden ocurrir cuando llamamos a una función que no ha sido definida. javascript no indica estos errores hasta que no se realiza la llamada a la función.
La manera que tiene javascript de mostrar un error puede variar de un navegador a otro. En versiones antiguas se mostraba una ventanita con el error y un botón de aceptar, permanecen un poco más ocultos al usuario.
En versiones de Internet Explorer mayores que la 4 se muestra el error en la barra de estado del navegador y se puede ver una descripción más grande del error si le damos un doble click al icono de alerta amarillo que aparece en la barra de estado. En Netscape aparece también un mensaje en la barra de estado que además nos indica que para mostrar más información debemos teclear "javascript:" en la barra de direcciones (donde escribimos las URL para acceder a las páginas). Con eso conseguimos que aparezca la Consola javascript, que nos muestra todos los errores que se encuentran en las páginas.
También podemos cometer fallos en la programación que hagan que los scripts no funcionen tal y como deseábamos y que javascript no detecta como errores y por lo tanto no muestra ningún mensaje de error.
Por ejemplo trataríamos de sumar dos cifras pero si una de las variables es de tipo texto podríamos encontrarnos con un error.
var numero1 = 23
var numero2 = "42"
var suma = numero1 + numero2
La variable suma vale "2342" porque al intentar sumar una variable numérica y otra textual, se tratan a las dos como si fueran de tipo texto y por lo tanto, el operador + se aplica como una concatenación de cadenas de caracteres. Si no estamos al tanto de esta cuestión podríamos tener un error en nuestro script ya que el resultado no es el esperado.
8.2.2 -EVITAR ERRORES COMUNES:
Utilizar = en expresiones condicionales en lugar de == es un error difícil de detectar cuando se comete, si utilizamos un solo igual lo que estamos haciendo es una asignación y no una comparación para ver si dos valores son iguales.
No conocerse la precedencia de operadores y no utilizar paréntesis para agrupar las operaciones que se desea realizar.
Usar comillas dobles y simples erróneamente.
Olvidarse de cerrar una llave o cerrar una llave de más.
Colocar varias sentencias en la misma línea sin separarlas de punto y coma.
Utilizar una variable antes de inicializarla o no declarar las variables con var antes de utilizarlas, si no la declaras puedes estar haciendo referencia a una variable global en lugar de una local.
Contar las posiciones de los arrays a partir de 1. Recuerda que los arrays empiezan por la posición 0.
8.2.3 -DEPURAR ERRORES EN JAVASCRIPT:
Para todo tipo de errores, unos más fáciles de detectar que otros, debemos utilizar alguna técnica de depuración que nos ayude a encontrarlos. Se trata de utilizar una función predefinida, la función alert() que recibe entre paréntesis un texto y lo muestra en una pequeña ventana que tiene un botón de aceptar.
Con la función alert() podemos mostrar en cualquier momento el contenido de las variables que estamos utilizando en nuestros scripts. Para ello ponemos entre paréntesis la variable que deseamos ver su contenido. Cuando se muestra el contenido de la variable el navegador espera a que apretemos el botón de aceptar y cuando lo hacemos continúa con las siguientes instrucciones del script.
Ejemplo:
var n_actual = 0
var suma = 0
while (suma<300){
n_actual ++
suma += suma + n_actual
alert("n_actual vale " + n_actual + " y suma vale " + suma)
}
Con la función alert() se muestra el contenido de las dos variables que utilizamos en el script.
8.3 CONESEJOS PARA ESCRIBIR CÓDIGO JAVASCRIPT:
8.3.1 -CONSERVA LA SINTAXIS Y ESTRUCTURA DE TU CÓDIGO:
Esto significa que guardes por ejemplo un límite de longitud de línea (80 caracteres) y que programes funciones razonablemente pequeñas. Un fallo es pensar que en una función larga lo podemos hacer todo.
Tener un tamaño razonable para tus funciones significa que las podrás reutilizar cuando amplies el código, tampoco seas
extremista y hagas funciones de una o dos líneas esto puede llegar a ser más confuso que usar una única función.
Ejemplo que muestra cual es la justa medida en cuanto al tamaño de las funciones y la división de las tareas:
function toolLinks(){
var tools = document.createElement('ul');
var item = document.createElement('li');
var itemlink = document.createElement('a');
itemlink.setAttribute('href', '#');
itemlink.appendChild(document.createTextNode('close'));
itemlink.onclick = function(){window.close();}
item.appendChild(itemlink);
tools.appendChild(item);
var item2 = document.createElement('li');
var itemlink2 = document.createElement('a');
itemlink2.setAttribute('href', '#');
itemlink2.appendChild(document.createTextNode('print'));
itemlink2.onclick = function(){window.print();}
item2.appendChild(itemlink2);
tools.appendChild(item2);
document.body.appendChild(tools);
}
Puedes optimizar esta función separando cada tarea con su propia función:
function toolLinks(){
var tools = document.createElement('ul');
var item = document.createElement('li');
var itemlink = createLink('#', 'close', closeWindow);
item.appendChild(itemlink);
tools.appendChild(item);
var item2 = document.createElement('li');
var itemlink2 = createLink('#', 'print', printWindow);
item2.appendChild(itemlink2);
tools.appendChild(item2);
document.body.appendChild(tools);
}
function printWindow(){
window.print();
}
function closeWindow() {
window.close();
}
function createLink(url,text,func){
var temp = document.createElement('a');
temp.setAttribute('href', url);
temp.appendChild(document.createTextNode(text));
temp.onclick = func;
return temp;
}
8.3.2 -UTILIZA INTELIGENTEMENTE LOS NOMBRES DE VARIABLES Y FUNCIONES:
Utiliza nombres de variables y funciones que sean totalmente descriptivos e incluso otra persona pueda llegar a plantearse que función realizan antes de ver el código. Recuerda que es correcto el uso de guiones o mayúsculas para concatenar diferentes palabras, en este caso concreto de es más típico el uso de mayúsculas debido a la sintaxis del lenguaje.
CambioFormatoFecha();
cambio_formato_fecha();
8.3.3 -COMENTA EL CÓDIGO:
Gracias a los comentarios puedes librarte de más de un quebradero de cabeza, es mejor resolver el problema una única vez.
8.3.4 -DIFERENCIA LAS VARIABLES DEPENDIENDO DE SU IMPORTANCIA:
Coloca aquellas variables que son usadas durante todo el script en la cabecera del código, de esta maneras siempre sabrás donde encontrar estas variables que son las que determinan el resultado de nuestro código.
function toolLinks(){
var tools, closeWinItem, closeWinLink, printWinItem, printWinLink;
// variables temporales
var printLinkLabel = ?print?;
var closeLinkLabel = ?close?;#
tools = document.createElement(?ul?);
closeWinItem = document.createElement(?li?);
closeWinLink = createLink(?#', closeLinkLabel, closeWindow);
closeWinItem.appendChild(closeWinLink);
tools.appendChild(closeWinItem);
printWinItem = document.createElement(?li?);printWinLink = createLink(?#', printLinkLabel, printWindow);
printWinItem.appendChild(printWinLink);
tools.appendChild(printWinItem);
document.body.appendChild(tools);
}
8.3.5 -SEPARA EL TEXTO DEL CÓDIGO:
Separar el texto del código, utilizando un documento llamado texto.js en formato JSON.
Un ejemplo:
var locales = {
'en': {
'homePageAnswerLink':'Answer a question now',
'homePageQuestionLink':'Ask a question now',
'contactHoverMessage':'Click to send this info as a message',
'loadingMessage' : 'Loading your data...',
'noQAmessage' : 'You have no Questions or Answers yet',
'questionsDefault': 'You have not asked any questions yet',
'answersDefault': 'You have not answered any questions yet.',
'questionHeading' : 'My Questions',
'answersHeading' : 'My Answers',
'seeAllAnswers' : 'See all your Answers',
'seeAllQuestions' : 'See all your Questions',
'refresh': 'refresh'
},
'es': {
'homePageAnswerLink':'Responde una pregunta',
'homePageQuestionLink':'Haz una pregunta',
'contactHove' : 'Cargando datos...',
'noQAmessage' : 'No quedan preguntas',
'questionsDefault': 'Quedan preguntas por responder',
'answersDefault': 'No quedan preguntas pendientes',
'questionHeading' : 'Mis preguntas',
'answersHeading' : 'Mis respuestas',
'seeAllAnswers' : 'Ver todas las respuestas',
'seeAllQuestions' : 'Ver todas las preguntas',
'refresh': 'Refrescar'
},
'fr': {
}
'de': {
}
};
Esto permitiría a cualquiera que no es programador traducir el texto del script, cambiando unicamente las etiquetas sin necesidad de acceder al código.
8.3.6 -DOCUMENTA EL CÓDIGO:
Escribe una buena documentacion de tu script / librería o efecto.
viernes, 21 de noviembre de 2014
lunes, 17 de noviembre de 2014
UF1305 Parte 6: Funciones en Javascript.
6.1 FUNCIONES EN JAVASCRIPT:
6.1.1 -QUÉ ES UNA FUNCIÓN:
A la hora de hacer un programa ligeramente grande existen determinados procesos. Suelen ser realizados repetidas veces a lo largo de la ejecución del programa. Estos se pueden agrupar en una función, definida para que no tengamos que repetir una y otra vez ese código en nuestros scripts, simplemente llamamos a la función y ella se encarga de hacer todo lo que debe.
Podemos ver una función como una serie de instrucciones que englobamos dentro de un mismo proceso. Este proceso se podrá luego ejecutar desde cualquier otro sitio con solo llamarlo. Por ejemplo, puede haber una función para cambiar el color del fondo y desde color.
6.1.2 -COMO SE ESCRIBE UNA FUNCIÓN:
Se debe definir con una sintaxis especial:
function nombrefuncion (){
instrucciones de la función
...
}
Primero se escribe function. Seguidamente se escribe el nombre de la función, que puede tener números, letras y algún carácter adicional como en guión bajo. A continuación se colocan entre llaves las distintas instrucciones de la función. Las llaves en el caso de las funciones no son opcionales.
Ejemplo:
function escribirBienvenida(){
document.write("<H1>Hola a todos</H1>")
}
6.1.3 -COMO LLAMAR A UNA FUNCIÓN:
Para ejecutar una función la tenemos que invocar en cualquier parte de la página.
Para ejecutar la función utilizamos su nombre seguido de los paréntesis. Por ejemplo:
escribirBienvenida()
6.2 DÓNDE COLOCAMOS LAS FUNCIONES:
Las funciones son uno de los principales componentes de los programas, en la mayoría de los lenguajes de programación.
Dos opciones posibles para colocar el código de una función:
a) Colocar la función en el mismo bloque de script: La función se puede definir en el bloque <SCRIPT> donde esté la llamada a la función, aunque es indiferente si la llamada se encuentra antes o después del código de la función, dentro del mismo bloque <SCRIPT>.
<SCRIPT>
miFuncion()
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>
b) Colocar la función en otro bloque de script: También es válido que la función se encuentre en un bloque <SCRIPT>
anterior al bloque donde está la llamada.
<HTML>
<HEAD>
<TITLE>MI PÁGINA</TITLE>
<SCRIPT>
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
miFuncion()
</SCRIPT>
</BODY>
</HTML>
Las funciones están en la cabecera de la página (dentro del HEAD). Éste es un lugar excelente donde colocarlas, porque se supone que en la cabecera no se van a utilizar todavía y siempre podremos disfrutar de ellas en el cuerpo porque sabemos seguro que ya han sido declaradas.
Veamos el siguiente ejemplo, que daría un error. debido a que hacemos una llamada a una función que se encuentra declarada en un bloque <SCRIPT> posterior.
<SCRIPT>
miFuncion()
</SCRIPT>
<SCRIPT>
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>
6.3 PARÁMETROS DE LAS FUNCIONES:
6.3.1 -PARÁMETROS:
Se usan para mandar valores a las funciones. Una función trabajará con los parámetros para realizar las acciones. Los parámetros son los valores de entrada que recibe una función.
Un ejemplo sencillo, una función que realizase una suma de dos números tendría como parámetros a esos dos números. Los dos números son la entrada, así como la salida sería el resultado de la suma.
Un ejemplo:
function escribirBienvenida(nombre){
document.write("<H1>Hola " + nombre + "</H1>")
}
Para definir en la función un parámetro tenemos que poner el nombre de la variable que va a almacenar el dato que le pasemos. Esa variable, tendrá como valor el dato que le pasemos a la función cuando la llamemos. Además, la variable donde recibimos el parámetro tendrá vida durante la ejecución de la función y dejará de existir cuando la función termine su ejecución.
Para llamar a una función que tiene parámetros se coloca entre paréntesis el valor del parámetro. Para llamar a la función del ejemplo :
escribirBienvenida("Alberto García")
Al llamar a la función así, el parámetro nombre toma como valor "Alberto García" y al escribir el saludo por pantalla escribirá "Hola Alberto García" entre etiquetas <H1>.
Los parámetros pueden recibir cualquier tipo de datos, numérico, textual, boleano o un objeto.
6.3.2 -MÚLTIPLES PARÁMETROS:
Una función puede recibir tantos parámetros como queramos y para expresarlo se colocan los nombres de los parámetros separados por comas, dentro de los paréntesis.
function escribirBienvenida(nombre,colorTexto){
document.write("<FONT color='" + colorTexto + "'>")
document.write("<H1>Hola " + nombre + "</H1>")
document.write("</FONT>")
}
Llamaríamos a la función con esta sintaxis. Entre los paréntesis colocaremos los valores de los parámetros.
var miNombre = "Pepe"
var miColor = "red"
escribirBienvenida(miNombre,miColor)
He colocado entre los paréntesis dos variables en lugar de dos textos entrecomillados. Cuando colocamos variables entre los parámetros en realidad lo que estamos pasando a la función son los valores que contienen las variables y no las mismas variables.
6.3.3 -LOS PARÁMETROS SE PASAN POR VALOR:
Los parámetros de las funciones se pasan por valor. Esto quiere decir que estamos pasando valores y no variables. En la práctica, aunque modifiquemos un parámetro en una función, la variable original que habíamos pasado no cambiará su valor.
Ejemplo.
function pasoPorValor(miParametro){
miParametro = 32
document.write("he cambiado el valor a 32")
}
var miVariable = 5
pasoPorValor(miVariable)
document.write ("el valor de la variable es: " + miVariable)
Tenemos una función que recibe un parámetro y que modifica el valor del parámetro asignándole el valor 32. También tenemos una variable, que inicializamos a 5 y posteriormente llamamos a la función pasándole esta variable como parámetro. Como dentro de la función modificamos el valor del parámetro podría pasar que la variable original cambiase de valor, pero como los parámetros no modifican el valor original de las variables, ésta no cambia de valor.
De este modo, una vez ejecutada la función, al imprimir en pantalla el valor de miVariable se imprimirá el número 5, que es el valor original de la variable, en lugar de 32 que era el valor con el que habíamos actualizado el parámetro.
En Javascript sólo se pueden pasar las variables por valor.
6.4 VALORES DE RETORNO:
6.4.1 -DEVOLUCIÓN DE VALORES EN LAS FUNCIONES:
Las funciones en Javascript también pueden retornar valores.
Una función que calcula el cuadrado de un número tendrá como entrada a ese número y como salida tendrá el valor resultante de hallar el cuadrado de ese número.
Un ejemplo de función que calcula la media de dos números. La función recibirá los dos números y retornará el valor de la media.
function media(valor1,valor2){
var resultado
resultado = (valor1 + valor2) / 2
return resultado
}
Para especificar el valor que retornará la función se utiliza la palabra return seguida de el valor que se desea devolver. En este caso se devuelve el contenido de la variable resultado, que contiene la media calculada de los dos números.
Quizás nos preguntemos ahora cómo recibir un dato que devuelve una función. Realmente en el código fuente de nuestros programas podemos invocar a las funciones en el lugar que deseemos. Cuando una función devuelve un valor simplemente se sustituye la llamada a la función por ese valor que devuelve. Así pues, para almacenar un valor de devolución de una función, tenemos que asignar la llamada a esa función como contenido en una variable, y eso lo haríamos con el operador de asignación =.
Ejemplo, que llamará a la función media() y guardará el resultado de la media en una variable para luego imprimirla en la página.
var miMedia
miMedia = media(12,8)
document.write (miMedia)
6.4.2 -MÚLTIPLES RETURN:
Las funciones sólo pueden devolver un valor, por lo que en principio no podemos hacer funciones que devuelvan dos datos distintos.
Aunque sólo podamos devolver un dato, en una misma función podemos colocar más de un return.
Un ejemplo de utilización de múltiples return. Se trata de una función que devuelve un 0 si el parámetro recibido era par y el valor del parámetro si este era impar.
function multipleReturn(numero){
var resto = numero % 2
if (resto == 0)
return 0
else
return numero
}
6.4.3 -ÁMBITO DE LAS VARIABLES EN FUNCIONES:
Dentro de las funciones podemos declarar variables. Debemos de saber que todas las variables declaradas en una función son locales a esa función, es decir, sólo tendrán validez durante la ejecución de la función.
Podría darse el caso de que podemos declarar variables en funciones que tengan el mismo nombre que una variable global a la página. Entonces, dentro de la función, la variable que tendrá validez es la variable local y fuera de la función tendrá validez la variable global a la página.
En cambio, si no declaramos las variables en las funciones se entenderá por javascript que estamos haciendo referencia a una variable global a la página, de modo que si no está creada la variable la crea, pero siempre global a la página en lugar de local a la función.
function variables_glogales_y_locales(){
var variableLocal = 23
variableGlobal = "qwerty"
}
variableLocal es una variable que se ha declarado en la función, por lo que será local a la función y sólo tendrá validez durante su ejecución. Por otra parte variableGlobal no se ha llegado a declarar (porque antes de usarla no se ha utilizado la palabra var para declararla). En este caso la variable variableGlobal es global a toda la página y seguirá existiendo aunque la función finalice su ejecución. Además, si antes de llamar a la función existiese la variable variableGlobal, como resultado de la ejecución de esta función, se machacaría un hipotético valor de esa variable y se sustituiría por "qwerty".
6.1.1 -QUÉ ES UNA FUNCIÓN:
A la hora de hacer un programa ligeramente grande existen determinados procesos. Suelen ser realizados repetidas veces a lo largo de la ejecución del programa. Estos se pueden agrupar en una función, definida para que no tengamos que repetir una y otra vez ese código en nuestros scripts, simplemente llamamos a la función y ella se encarga de hacer todo lo que debe.
Podemos ver una función como una serie de instrucciones que englobamos dentro de un mismo proceso. Este proceso se podrá luego ejecutar desde cualquier otro sitio con solo llamarlo. Por ejemplo, puede haber una función para cambiar el color del fondo y desde color.
6.1.2 -COMO SE ESCRIBE UNA FUNCIÓN:
Se debe definir con una sintaxis especial:
function nombrefuncion (){
instrucciones de la función
...
}
Primero se escribe function. Seguidamente se escribe el nombre de la función, que puede tener números, letras y algún carácter adicional como en guión bajo. A continuación se colocan entre llaves las distintas instrucciones de la función. Las llaves en el caso de las funciones no son opcionales.
Ejemplo:
function escribirBienvenida(){
document.write("<H1>Hola a todos</H1>")
}
6.1.3 -COMO LLAMAR A UNA FUNCIÓN:
Para ejecutar una función la tenemos que invocar en cualquier parte de la página.
Para ejecutar la función utilizamos su nombre seguido de los paréntesis. Por ejemplo:
escribirBienvenida()
6.2 DÓNDE COLOCAMOS LAS FUNCIONES:
Las funciones son uno de los principales componentes de los programas, en la mayoría de los lenguajes de programación.
Dos opciones posibles para colocar el código de una función:
a) Colocar la función en el mismo bloque de script: La función se puede definir en el bloque <SCRIPT> donde esté la llamada a la función, aunque es indiferente si la llamada se encuentra antes o después del código de la función, dentro del mismo bloque <SCRIPT>.
<SCRIPT>
miFuncion()
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>
b) Colocar la función en otro bloque de script: También es válido que la función se encuentre en un bloque <SCRIPT>
anterior al bloque donde está la llamada.
<HTML>
<HEAD>
<TITLE>MI PÁGINA</TITLE>
<SCRIPT>
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
miFuncion()
</SCRIPT>
</BODY>
</HTML>
Las funciones están en la cabecera de la página (dentro del HEAD). Éste es un lugar excelente donde colocarlas, porque se supone que en la cabecera no se van a utilizar todavía y siempre podremos disfrutar de ellas en el cuerpo porque sabemos seguro que ya han sido declaradas.
Veamos el siguiente ejemplo, que daría un error. debido a que hacemos una llamada a una función que se encuentra declarada en un bloque <SCRIPT> posterior.
<SCRIPT>
miFuncion()
</SCRIPT>
<SCRIPT>
function miFuncion(){
//hago algo...
document.write("Esto va bien")
}
</SCRIPT>
6.3 PARÁMETROS DE LAS FUNCIONES:
6.3.1 -PARÁMETROS:
Se usan para mandar valores a las funciones. Una función trabajará con los parámetros para realizar las acciones. Los parámetros son los valores de entrada que recibe una función.
Un ejemplo sencillo, una función que realizase una suma de dos números tendría como parámetros a esos dos números. Los dos números son la entrada, así como la salida sería el resultado de la suma.
Un ejemplo:
function escribirBienvenida(nombre){
document.write("<H1>Hola " + nombre + "</H1>")
}
Para definir en la función un parámetro tenemos que poner el nombre de la variable que va a almacenar el dato que le pasemos. Esa variable, tendrá como valor el dato que le pasemos a la función cuando la llamemos. Además, la variable donde recibimos el parámetro tendrá vida durante la ejecución de la función y dejará de existir cuando la función termine su ejecución.
Para llamar a una función que tiene parámetros se coloca entre paréntesis el valor del parámetro. Para llamar a la función del ejemplo :
escribirBienvenida("Alberto García")
Al llamar a la función así, el parámetro nombre toma como valor "Alberto García" y al escribir el saludo por pantalla escribirá "Hola Alberto García" entre etiquetas <H1>.
Los parámetros pueden recibir cualquier tipo de datos, numérico, textual, boleano o un objeto.
6.3.2 -MÚLTIPLES PARÁMETROS:
Una función puede recibir tantos parámetros como queramos y para expresarlo se colocan los nombres de los parámetros separados por comas, dentro de los paréntesis.
function escribirBienvenida(nombre,colorTexto){
document.write("<FONT color='" + colorTexto + "'>")
document.write("<H1>Hola " + nombre + "</H1>")
document.write("</FONT>")
}
Llamaríamos a la función con esta sintaxis. Entre los paréntesis colocaremos los valores de los parámetros.
var miNombre = "Pepe"
var miColor = "red"
escribirBienvenida(miNombre,miColor)
He colocado entre los paréntesis dos variables en lugar de dos textos entrecomillados. Cuando colocamos variables entre los parámetros en realidad lo que estamos pasando a la función son los valores que contienen las variables y no las mismas variables.
6.3.3 -LOS PARÁMETROS SE PASAN POR VALOR:
Los parámetros de las funciones se pasan por valor. Esto quiere decir que estamos pasando valores y no variables. En la práctica, aunque modifiquemos un parámetro en una función, la variable original que habíamos pasado no cambiará su valor.
Ejemplo.
function pasoPorValor(miParametro){
miParametro = 32
document.write("he cambiado el valor a 32")
}
var miVariable = 5
pasoPorValor(miVariable)
document.write ("el valor de la variable es: " + miVariable)
Tenemos una función que recibe un parámetro y que modifica el valor del parámetro asignándole el valor 32. También tenemos una variable, que inicializamos a 5 y posteriormente llamamos a la función pasándole esta variable como parámetro. Como dentro de la función modificamos el valor del parámetro podría pasar que la variable original cambiase de valor, pero como los parámetros no modifican el valor original de las variables, ésta no cambia de valor.
De este modo, una vez ejecutada la función, al imprimir en pantalla el valor de miVariable se imprimirá el número 5, que es el valor original de la variable, en lugar de 32 que era el valor con el que habíamos actualizado el parámetro.
En Javascript sólo se pueden pasar las variables por valor.
6.4 VALORES DE RETORNO:
6.4.1 -DEVOLUCIÓN DE VALORES EN LAS FUNCIONES:
Las funciones en Javascript también pueden retornar valores.
Una función que calcula el cuadrado de un número tendrá como entrada a ese número y como salida tendrá el valor resultante de hallar el cuadrado de ese número.
Un ejemplo de función que calcula la media de dos números. La función recibirá los dos números y retornará el valor de la media.
function media(valor1,valor2){
var resultado
resultado = (valor1 + valor2) / 2
return resultado
}
Para especificar el valor que retornará la función se utiliza la palabra return seguida de el valor que se desea devolver. En este caso se devuelve el contenido de la variable resultado, que contiene la media calculada de los dos números.
Quizás nos preguntemos ahora cómo recibir un dato que devuelve una función. Realmente en el código fuente de nuestros programas podemos invocar a las funciones en el lugar que deseemos. Cuando una función devuelve un valor simplemente se sustituye la llamada a la función por ese valor que devuelve. Así pues, para almacenar un valor de devolución de una función, tenemos que asignar la llamada a esa función como contenido en una variable, y eso lo haríamos con el operador de asignación =.
Ejemplo, que llamará a la función media() y guardará el resultado de la media en una variable para luego imprimirla en la página.
var miMedia
miMedia = media(12,8)
document.write (miMedia)
6.4.2 -MÚLTIPLES RETURN:
Las funciones sólo pueden devolver un valor, por lo que en principio no podemos hacer funciones que devuelvan dos datos distintos.
Aunque sólo podamos devolver un dato, en una misma función podemos colocar más de un return.
Un ejemplo de utilización de múltiples return. Se trata de una función que devuelve un 0 si el parámetro recibido era par y el valor del parámetro si este era impar.
function multipleReturn(numero){
var resto = numero % 2
if (resto == 0)
return 0
else
return numero
}
6.4.3 -ÁMBITO DE LAS VARIABLES EN FUNCIONES:
Dentro de las funciones podemos declarar variables. Debemos de saber que todas las variables declaradas en una función son locales a esa función, es decir, sólo tendrán validez durante la ejecución de la función.
Podría darse el caso de que podemos declarar variables en funciones que tengan el mismo nombre que una variable global a la página. Entonces, dentro de la función, la variable que tendrá validez es la variable local y fuera de la función tendrá validez la variable global a la página.
En cambio, si no declaramos las variables en las funciones se entenderá por javascript que estamos haciendo referencia a una variable global a la página, de modo que si no está creada la variable la crea, pero siempre global a la página en lugar de local a la función.
function variables_glogales_y_locales(){
var variableLocal = 23
variableGlobal = "qwerty"
}
variableLocal es una variable que se ha declarado en la función, por lo que será local a la función y sólo tendrá validez durante su ejecución. Por otra parte variableGlobal no se ha llegado a declarar (porque antes de usarla no se ha utilizado la palabra var para declararla). En este caso la variable variableGlobal es global a toda la página y seguirá existiendo aunque la función finalice su ejecución. Además, si antes de llamar a la función existiese la variable variableGlobal, como resultado de la ejecución de esta función, se machacaría un hipotético valor de esa variable y se sustituiría por "qwerty".
Suscribirse a:
Entradas (Atom)