JavaScript - advanced - Lección nº 3
Variables de JavaScript y parámetros para funciones.
¿De qué trata esta lección?
En esta lección nos tomamos más en serio la programación. Aprendemos sobre las variables, una forma de almacenar datos temporalmente hasta que son usados. Aprendemos sobre los parámetros, la forma en que las funciones pueden comunicarse. Estas dos nuevas funciones nos ayudan a crear funciones más complicadas y generales, para ser más elegantes en la codificación. Necesitamos hablar sobre tipos de datos y algunas operaciones relacionadas con variables.
Nuevos objetos en esta lección:
Date – este objeto se utiliza para definir el tipo de fecha utilizado en JavaScript. Al crear objetos de este tipo, podemos averiguar la fecha y la hora actuales, podemos crear la fecha a partir de otros datos y utilizar los métodos asociados con este tipo en JavaScript.
Math – este objeto contiene todos los métodos matemáticos que están disponibles en JavaScript. Entonces, si necesitas calcular el valor absoluto, la raíz cuadrada o redondear un número, etc. usa este objeto.
Nuevos métodos en esta lección:
ClearTimeout(referencia a un temporizador) – este método del objeto de ventana se usa para detener un conjunto de temporizador mediante un método setTimeout.
getHours – Podemos extraer la hora de un objeto con el type date. El resultado es un número entre 0 y 23.
getMinutes – Podemos extraer los minutos de un objeto con el type date. El resultado es un número entre 0 y 59.
getSeconds – Podemos extraer los minutos de un objeto con el type date. El resultado es un número entre 0 y 59..
Math.floor(number) – este método redondea el número agregado como parámetro al entero más cercano por debajo y devuelve el valor.
Math.random() – este método devuelve un número flotante aleatorio entre 0 y 1.
¿Qué son variables?
Al escribir un código más largo, es posible que tengamos que almacenar datos para usarlos más adelante. Podemos lograr esto, agregando un nombre a los datos. A los datos con nombre los llamamos variable, ya que su valor puede modificarse y reutilizarse varias veces.
La declaración más simple relacionada con las variables es la asignación. Usando un signo igual podemos copiar un valor a una variable o campo de datos de un objeto. El valor copiado puede ser el resultado de una expresión, el valor de otra variable o un campo de datos de objetos.
El tipo de datos es importante. Las variables de JavaScript no requieren indicar el tipo, pero después de obtener un valor, es importante saber cuál es el tipo.
Los tipos de datos más importantes que utilizamos son número y texto (cadena - string). Se comportan de manera diferente cuando están sujetos a operadores y se agregan a las declaraciones, por lo que debemos entender su comportamiento.
Ejemplo sobre números:
En el ejemplo anterior podemos ver cuatro variables: x, y, z y v.
La primera vez que usamos una variable escribimos la palabra clave var antes de ella.
La x obtiene un entero como valor, el número cinco. La variable y obtiene un número real como valor: 0.5.
Los contenidos a los que se accede desde los documentos HTML son textos, si queremos usarlos como números necesitamos convertirlos. El método Number () es una de las posibilidades para hacerlo.
Los valores de las variables v y z son los que están escritos en los dos párrafos del documento HTML.
El uso de sumas entre dos números ejecuta la suma matemática que esperamos, y al agregar los números resultantes a los párrafos no necesita una conversión explícita a texto, se resolverá automáticamente.
Ejemplo sobre cadenas (strings):
En esta lección nos tomamos más en serio la programación. Aprendemos sobre las variables, una forma de almacenar datos temporalmente hasta que son usados. Aprendemos sobre los parámetros, la forma en que las funciones pueden comunicarse. Estas dos nuevas funciones nos ayudan a crear funciones más complicadas y generales, para ser más elegantes en la codificación. Necesitamos hablar sobre tipos de datos y algunas operaciones relacionadas con variables.
Nuevos objetos en esta lección:
Date – este objeto se utiliza para definir el tipo de fecha utilizado en JavaScript. Al crear objetos de este tipo, podemos averiguar la fecha y la hora actuales, podemos crear la fecha a partir de otros datos y utilizar los métodos asociados con este tipo en JavaScript.
Math – este objeto contiene todos los métodos matemáticos que están disponibles en JavaScript. Entonces, si necesitas calcular el valor absoluto, la raíz cuadrada o redondear un número, etc. usa este objeto.
Nuevos métodos en esta lección:
ClearTimeout(referencia a un temporizador) – este método del objeto de ventana se usa para detener un conjunto de temporizador mediante un método setTimeout.
getHours – Podemos extraer la hora de un objeto con el type date. El resultado es un número entre 0 y 23.
getMinutes – Podemos extraer los minutos de un objeto con el type date. El resultado es un número entre 0 y 59.
getSeconds – Podemos extraer los minutos de un objeto con el type date. El resultado es un número entre 0 y 59..
Math.floor(number) – este método redondea el número agregado como parámetro al entero más cercano por debajo y devuelve el valor.
Math.random() – este método devuelve un número flotante aleatorio entre 0 y 1.
¿Qué son variables?
Al escribir un código más largo, es posible que tengamos que almacenar datos para usarlos más adelante. Podemos lograr esto, agregando un nombre a los datos. A los datos con nombre los llamamos variable, ya que su valor puede modificarse y reutilizarse varias veces.
La declaración más simple relacionada con las variables es la asignación. Usando un signo igual podemos copiar un valor a una variable o campo de datos de un objeto. El valor copiado puede ser el resultado de una expresión, el valor de otra variable o un campo de datos de objetos.
El tipo de datos es importante. Las variables de JavaScript no requieren indicar el tipo, pero después de obtener un valor, es importante saber cuál es el tipo.
Los tipos de datos más importantes que utilizamos son número y texto (cadena - string). Se comportan de manera diferente cuando están sujetos a operadores y se agregan a las declaraciones, por lo que debemos entender su comportamiento.
Ejemplo sobre números:
En el ejemplo anterior podemos ver cuatro variables: x, y, z y v.
La primera vez que usamos una variable escribimos la palabra clave var antes de ella.
La x obtiene un entero como valor, el número cinco. La variable y obtiene un número real como valor: 0.5.
Los contenidos a los que se accede desde los documentos HTML son textos, si queremos usarlos como números necesitamos convertirlos. El método Number () es una de las posibilidades para hacerlo.
Los valores de las variables v y z son los que están escritos en los dos párrafos del documento HTML.
El uso de sumas entre dos números ejecuta la suma matemática que esperamos, y al agregar los números resultantes a los párrafos no necesita una conversión explícita a texto, se resolverá automáticamente.
Ejemplo sobre cadenas (strings):
En el ejemplo anterior tenemos las variables fn y ln, obtienen sus valores de tipo cadena a la vez. Los textos concretos en un código se envuelven entre comillas. Para las cadenas tenemos algunos métodos adjuntos, uno de ellos es el método de longitud utilizado para averiguar la longitud de una cadena.
En la variable l agregamos un número. En el nombre de la variable concatenamos las dos cadenas y un espacio entre ellas. Tanto el número como el texto se pueden agregar al contenido de la página web.
La segunda función tiene una operación + =, esto significa que agregamos el símbolo + al final del texto existente en la etiqueta HTML. Hasta ahora siempre hemos sobrescrito el contenido.
Guía – tipos de datos:
Si una expresión de JavaScript no da como resultado el tipo que esperabas, debes examinar los tipos de la expresión, la sucesión de los elementos e intentar forzar la transformación de datos (como los métodos Number o toString)
El texto y el número son tipos de datos básicos que se encuentran en cada lenguaje de programación. Pero podemos crear tipos más complicados combinados con métodos, llamados objetos JavaScript. En JavaScript, cada elemento HTML se convierte en un objeto y como vimos previamente con los objetos de ventana y documento, siempre los encontramos cuando abrimos una página web.
Ejemplo sobre fecha:
En la variable l agregamos un número. En el nombre de la variable concatenamos las dos cadenas y un espacio entre ellas. Tanto el número como el texto se pueden agregar al contenido de la página web.
La segunda función tiene una operación + =, esto significa que agregamos el símbolo + al final del texto existente en la etiqueta HTML. Hasta ahora siempre hemos sobrescrito el contenido.
Guía – tipos de datos:
Si una expresión de JavaScript no da como resultado el tipo que esperabas, debes examinar los tipos de la expresión, la sucesión de los elementos e intentar forzar la transformación de datos (como los métodos Number o toString)
El texto y el número son tipos de datos básicos que se encuentran en cada lenguaje de programación. Pero podemos crear tipos más complicados combinados con métodos, llamados objetos JavaScript. En JavaScript, cada elemento HTML se convierte en un objeto y como vimos previamente con los objetos de ventana y documento, siempre los encontramos cuando abrimos una página web.
Ejemplo sobre fecha:
En el ejemplo anterior, tenemos la función tick, que comienza por primera vez cuando se carga la página, y luego se programa para ser recuperada después de 1 segundo.
Hay una referencia al temporizador en la variable t, por lo que la función de parada puede detenerlo cuando sea necesario. De lo contrario, el "bucle" de comenzar de nuevo es infinito.
La variable t es una referencia a un objeto, y también lo es la variable d. En el caso de la variable t, guardamos el valor que devuelve la función setTimeout, para la variable d creamos un nuevo objeto con el tipo de fecha. De esta manera capturamos un momento en el tiempo en la variable d (que tiene un año, un mes, un día, una hora, un minuto y un segundo combinados). Podemos obtener estos valores utilizando los métodos: getHours (), getMinutes (), getSeconds () en este ejemplo.
¿Qué son parámetros?
El intercambio de datos entre dos funciones o una función y el contenido de las páginas se realiza mediante parámetros, que pueden denominarse variables especiales.
Usando parámetros podemos resolver problemas de manera más general: podemos definir los datos que forzosamente necesitamos para resolver la tarea asignada a la función y llamar a la función desde diferentes lugares y con diferentes valores.
Ejemplo de función con parámetros:
En este ejemplo tenemos una función llamada change con dos parámetros (a, b). El primero se refiere a un objeto HTML (que tiene una propiedad innerHTML), el segundo es un texto que se agregará a la página web.
La función se llama cuando se hace clic en uno de los botones. El texto es diferente cada vez y el objeto HTML también. Podemos usar esta referencia, no necesitamos las identificaciones de anuncios para encontrar el botón correcto más adelante. El código es definitivamente más corto.
Ejemplo sobre la función que devuelve valor (return):
Hay una referencia al temporizador en la variable t, por lo que la función de parada puede detenerlo cuando sea necesario. De lo contrario, el "bucle" de comenzar de nuevo es infinito.
La variable t es una referencia a un objeto, y también lo es la variable d. En el caso de la variable t, guardamos el valor que devuelve la función setTimeout, para la variable d creamos un nuevo objeto con el tipo de fecha. De esta manera capturamos un momento en el tiempo en la variable d (que tiene un año, un mes, un día, una hora, un minuto y un segundo combinados). Podemos obtener estos valores utilizando los métodos: getHours (), getMinutes (), getSeconds () en este ejemplo.
¿Qué son parámetros?
El intercambio de datos entre dos funciones o una función y el contenido de las páginas se realiza mediante parámetros, que pueden denominarse variables especiales.
Usando parámetros podemos resolver problemas de manera más general: podemos definir los datos que forzosamente necesitamos para resolver la tarea asignada a la función y llamar a la función desde diferentes lugares y con diferentes valores.
Ejemplo de función con parámetros:
En este ejemplo tenemos una función llamada change con dos parámetros (a, b). El primero se refiere a un objeto HTML (que tiene una propiedad innerHTML), el segundo es un texto que se agregará a la página web.
La función se llama cuando se hace clic en uno de los botones. El texto es diferente cada vez y el objeto HTML también. Podemos usar esta referencia, no necesitamos las identificaciones de anuncios para encontrar el botón correcto más adelante. El código es definitivamente más corto.
Ejemplo sobre la función que devuelve valor (return):
En el ejemplo anterior tenemos nuevas funciones de tipo randnum y randcolor. Ambos tienen la declaración return (devolución). Estas funciones no agregan su resultado al contenido de las páginas web directamente. Su resultado es un número que corresponde a una cadena y el resultado es devuelto por la declaración return y se coloca en la declaración donde se realiza la llamada de la función.
La función randnum convierte el número flotante dado por el método Math.random a un número entero por debajo de un número. El resultado se devuelve y se coloca en la instrucción numb = randnum (255) y los otros dos. Se devolverán tres valores diferentes para los tres llamamientos diferentes.
El randcolor construye una cadena que define un color en forma RGB, con tres números diferentes por debajo de 255. El resultado de la variable c se devuelve y se coloca en la función de cambio. De esta manera el color se aplica como color de fondo al botón.
Guía:
Al nombrar funciones, tenga en cuenta que no puede haber dos funciones con el mismo nombre y número de parámetros en un ámbito (en una página "vista", en la lista de funciones que se pueden llamar dentro de la página y en los archivos js enumerados).
La función randnum convierte el número flotante dado por el método Math.random a un número entero por debajo de un número. El resultado se devuelve y se coloca en la instrucción numb = randnum (255) y los otros dos. Se devolverán tres valores diferentes para los tres llamamientos diferentes.
El randcolor construye una cadena que define un color en forma RGB, con tres números diferentes por debajo de 255. El resultado de la variable c se devuelve y se coloca en la función de cambio. De esta manera el color se aplica como color de fondo al botón.
Guía:
Al nombrar funciones, tenga en cuenta que no puede haber dos funciones con el mismo nombre y número de parámetros en un ámbito (en una página "vista", en la lista de funciones que se pueden llamar dentro de la página y en los archivos js enumerados).
Ejercicios
1. Realiza cambios al archivo forms.html: al principio de la página, después del "reloj" que hicimos anteriormente, The time you arrived debe aparecer seguido de la hora, los minutos y segundos en que se cargó la página, y a continuación un temporizador en segundos. Pon todo esto en una sección div y dale el mismo diseño que tiene el reloj.
Ver el resultado
2. Realiza cambios al archivo index.html: previamente agregamos código JavaScript a cada imagen de la galería de imágenes, por lo que desaparecen cuando hacemos clic en ellas. Crea una función para hacer lo mismo.
Ver el resultado
3. Realiza cambios al archivo index.html:
Agrega tres cajas bajo la galería que contengan una cita cada una, una sobre trabajo (work), una sobre amigos (Friends) y otra sobre armonía (Harmony).
Elige un color separado para cada cita, el botón y la caja deben ser del mismo color.
Solo debe haber una cita visible a la vez – el botón que presionamos la última vez. El primero debe mostrarse por defecto.
El formato predeterminado debe establecerse en el archivo CSS, usa una función show (llamada) al hacer clic en uno de los botones. La función debe obtener como parámetro el id del cuadro que se debe mostrar.
Ver el resultado
Agrega tres cajas bajo la galería que contengan una cita cada una, una sobre trabajo (work), una sobre amigos (Friends) y otra sobre armonía (Harmony).
Puedes usar las de abajo:
A dream doesn't become reality through magic; it takes sweat, determination and hard work.
Share your smile with the world. It's a symbol of friendship and peace.
Time you enjoy wasting is not wasted time.
Agrega tres botones con los textos Works, Friends y Harmony. No deben tener un borde para fusionarse con el cuadro de abajo.Elige un color separado para cada cita, el botón y la caja deben ser del mismo color.
Solo debe haber una cita visible a la vez – el botón que presionamos la última vez. El primero debe mostrarse por defecto.
El formato predeterminado debe establecerse en el archivo CSS, usa una función show (llamada) al hacer clic en uno de los botones. La función debe obtener como parámetro el id del cuadro que se debe mostrar.
4. Realiza cambios al archivo gallery.html:
Agrega una nueva sección debajo de la galería que contiene un botón con el texto Random picture y la primera imagen de la galería.
Usando las funciones, la página debe mostrar una imagen diferente de las ocho imágenes que tenemos en la carpeta de la galería, cada vez que presionamos el botón. Utiliza una función separada para generar el nombre de la imagen que se mostrará sabiendo que los nombres son números: 01.jpg, 02.jpg, … 08.jpg.
Ver el resultado
Agrega una nueva sección debajo de la galería que contiene un botón con el texto Random picture y la primera imagen de la galería.
Usando las funciones, la página debe mostrar una imagen diferente de las ocho imágenes que tenemos en la carpeta de la galería, cada vez que presionamos el botón. Utiliza una función separada para generar el nombre de la imagen que se mostrará sabiendo que los nombres son números: 01.jpg, 02.jpg, … 08.jpg.
Cuestionario
1. La variable b definida como var b = document.getElementById ("x"). InnerHTML contiene datos del tipo:
2. ¿Qué aparecerá en la página en el elemento identificado como x después de ejecutar la función siguiente? function something () {
var s= "10";
var z= "5";
z=z + s + z;
document.getElementById("x").innerHTML=z;
}
3. ¿Cuál de los siguientes métodos de fecha no existe?
4. Examina la siguiente función. ¿de qué tipo es el parámetro x?
function something(x, y) {
y.innerHTML=x.getHours();
}
5. ¿Cuál será el resultado de la expresión Math.floor (1.75)?
6. ¿Cuál puede ser el resultado de la expresión Math.random () * 10?
7. ¿Cuál podría ser el resultado del siguiente código?
<img src="pic.jpg" alt="Missing picture" onclick="change(this)"/>
<script>
function image() {
var d=new Date();
var name=d.getHours();
name=name+".jpg";
return name;
}
function change(x){
x.src=image();
}
Información suplementaria
Puedes leer más sobre esta lección y hacer ejercicios visitando los siguientes enlaces:
https://www.w3schools.com/js/js_numbers.asp;
https://www.w3schools.com/js/js_strings.asp;
https://www.w3schools.com/js/js_string_methods.asp;
https://www.w3schools.com/js/js_dates.asp;
https://www.w3schools.com/js/js_date_methods.asp;
https://www.w3schools.com/js/js_functions.asp.
https://www.w3schools.com/js/js_numbers.asp;
https://www.w3schools.com/js/js_strings.asp;
https://www.w3schools.com/js/js_string_methods.asp;
https://www.w3schools.com/js/js_dates.asp;
https://www.w3schools.com/js/js_date_methods.asp;
https://www.w3schools.com/js/js_functions.asp.
