JavaScript - advanced - Lección nº 2
Funciones de JavaScript
¿De qué trata esta lección?
En esta lección aprenderemos sobre las funciones en JavaScript. En cada lenguaje de programación hay un intento de reutilizar el código; una vez escrito, deberíamos poder hacer referencia a él varias veces, para que sea transparente y legible. La introducción de funciones nos ayuda con esos problemas. Aprenderemos por qué y cuándo usar funciones.
¿Qué es una función?
Una función es un conjunto de instrucciones que resuelven un problema / tarea. Las funciones tienen nombres y se pueden llamar / invocar desde diferentes partes del archivo para ejecutar las instrucciones incluidas en él.
¿Por qué usar funciones?
Nuevas etiquetas HTML:
<script></script> - Si colocamos el código JavaScript dentro de un archivo HTML, y fuera de las etiquetas HTML, debemos colocarlo entre las etiquetas <script>. De esta manera marcamos el código para el navegador.
Nuevos eventos en esta lección:
onload – Se percibe que este evento ocurre cuando se carga el documento. Esto se puede utilizar para establecer valores iniciales, temporizadores, etc.
onresize – Este evento puede usarse parcialmente como las consultas de los medios (rules) que estudiamos anteriormente. Este evento se puede utilizar para reaccionar al cambiar el tamaño de la ventana del navegador. Este evento está en la lista de eventos esperados de JavaScript con los demás, pero no se activa cuando se agrega a una etiqueta HTML. Por favor vea el ejemplo y el método addEventListener.
Nuevo objeto en esta lección:
window – Este objeto tiene las propiedades y métodos relacionados con la ventana del navegador recopilada.
Nuevos métodos en esta lección:
setTimeout(function, milliseconds) este método puede usarse para programar la ejecución de una función en función del tiempo transcurrido.
addEventListener(‘nombre del evento’, nombre de la función) – con este método podemos emparejar eventos y funciones desde el código, no necesitamos escribirlo en HTML. Esto significa que podemos decidir la creación de dichos emparejamientos relacionados con otros eventos que suceden. Usamos el de la clase de ventana en esta lección, pero podemos agregarlo a cada elemento HTML.
alert("el texto va aquí") – Este método se utiliza para mostrar un mensaje de error sobre el contenido de la ventana.
date() – La fecha se puede utilizar como método para agregar la marca de tiempo actual a una página HTML. Hay más para las fechas, busca nuevos detalles más adelante.
Nuevas propiedades en esta lección:
innerWidth – esta propiedad contiene el ancho de la ventana actual (puede denominarse window.innerWidth). No se puede cambiar. Cambiar el tamaño del código necesita otros métodos y no es una buena idea.
innerHeight – esta propiedad contiene la altura de la ventana actual, como el atributo anterior.
Guía:
Ejemplo de una función simple:
En este ejemplo usamos la función llamada cambio. La función contiene la única declaración que hemos escrito anteriormente en la etiqueta HTML. No podemos usar esta referencia aquí, no hablamos sobre el intercambio de datos entre las funciones y HTML, por lo que necesitamos agregar una id al botón y buscarla en la función para cambiar el texto.
El nombre de las funciones va seguido de corchetes vacíos, que están destinados al intercambio de datos mencionado, por el momento no escribimos nada en él.
Las instrucciones para resolver el problema previsto para esta función se encuentran en otro tipo de corchetes. Estos son todos los elementos necesarios.
Usamos la etiqueta <script> para marcar el código y el nombre de la función para escribirlo después de la referencia del evento onclick.
Ejemplo de tiempos:
En esta lección aprenderemos sobre las funciones en JavaScript. En cada lenguaje de programación hay un intento de reutilizar el código; una vez escrito, deberíamos poder hacer referencia a él varias veces, para que sea transparente y legible. La introducción de funciones nos ayuda con esos problemas. Aprenderemos por qué y cuándo usar funciones.
¿Qué es una función?
Una función es un conjunto de instrucciones que resuelven un problema / tarea. Las funciones tienen nombres y se pueden llamar / invocar desde diferentes partes del archivo para ejecutar las instrucciones incluidas en él.
¿Por qué usar funciones?
- Podemos escribir el código una vez y hacer referencia a él (usarlo) muchas veces. Esto significa reutilizar el código una vez escrito.
- Al nombrar y colocar las funciones correctamente (haciendo alusión al problema resuelto) podemos mejorar la legibilidad del código. Esto puede ayudar cuando otras personas usan nuestro código, usando el código de otras personas, o necesitamos cambiar algo...
- Al utilizar el intercambio de datos (parámetros) entre las funciones y el código HTML, podemos crear códigos más amplios. Podemos resolver un problema de una manera más general.
Nuevas etiquetas HTML:
<script></script> - Si colocamos el código JavaScript dentro de un archivo HTML, y fuera de las etiquetas HTML, debemos colocarlo entre las etiquetas <script>. De esta manera marcamos el código para el navegador.
Nuevos eventos en esta lección:
onload – Se percibe que este evento ocurre cuando se carga el documento. Esto se puede utilizar para establecer valores iniciales, temporizadores, etc.
onresize – Este evento puede usarse parcialmente como las consultas de los medios (rules) que estudiamos anteriormente. Este evento se puede utilizar para reaccionar al cambiar el tamaño de la ventana del navegador. Este evento está en la lista de eventos esperados de JavaScript con los demás, pero no se activa cuando se agrega a una etiqueta HTML. Por favor vea el ejemplo y el método addEventListener.
Nuevo objeto en esta lección:
window – Este objeto tiene las propiedades y métodos relacionados con la ventana del navegador recopilada.
Nuevos métodos en esta lección:
setTimeout(function, milliseconds) este método puede usarse para programar la ejecución de una función en función del tiempo transcurrido.
addEventListener(‘nombre del evento’, nombre de la función) – con este método podemos emparejar eventos y funciones desde el código, no necesitamos escribirlo en HTML. Esto significa que podemos decidir la creación de dichos emparejamientos relacionados con otros eventos que suceden. Usamos el de la clase de ventana en esta lección, pero podemos agregarlo a cada elemento HTML.
alert("el texto va aquí") – Este método se utiliza para mostrar un mensaje de error sobre el contenido de la ventana.
date() – La fecha se puede utilizar como método para agregar la marca de tiempo actual a una página HTML. Hay más para las fechas, busca nuevos detalles más adelante.
Nuevas propiedades en esta lección:
innerWidth – esta propiedad contiene el ancho de la ventana actual (puede denominarse window.innerWidth). No se puede cambiar. Cambiar el tamaño del código necesita otros métodos y no es una buena idea.
innerHeight – esta propiedad contiene la altura de la ventana actual, como el atributo anterior.
Guía:
- Ambos métodos, alert y addEventListener, son métodos del objeto de ventana, pero esto no debe mencionarse usándolos.
- Puede haber más funciones vinculadas a un evento, deben estar separadas por un punto y coma.
Ejemplo de una función simple:
En este ejemplo usamos la función llamada cambio. La función contiene la única declaración que hemos escrito anteriormente en la etiqueta HTML. No podemos usar esta referencia aquí, no hablamos sobre el intercambio de datos entre las funciones y HTML, por lo que necesitamos agregar una id al botón y buscarla en la función para cambiar el texto.
El nombre de las funciones va seguido de corchetes vacíos, que están destinados al intercambio de datos mencionado, por el momento no escribimos nada en él.
Las instrucciones para resolver el problema previsto para esta función se encuentran en otro tipo de corchetes. Estos son todos los elementos necesarios.
Usamos la etiqueta <script> para marcar el código y el nombre de la función para escribirlo después de la referencia del evento onclick.
Ejemplo de tiempos:
En este ejemplo usamos el evento onload. Se asocia principalmente con la etiqueta <body>.
La función de inicio se inicia a medida que se carga la página. Esta función contiene una declaración: programamos la función change1 para que se ejecute 3 segundos después de cargar la página.
La función change1 cambia la imagen que se muestra y programa la función change2 para que comience en 3 segundos.
La función change2 vuelve a cambiar la imagen y luego vuelve a la función change1.
Esto significa que las dos imágenes cambiarán cada 3 segundos, hasta que salgamos de la página.
Ejemplo de eventos sonoros y mostrar ventanas de alerta:
La función de inicio se inicia a medida que se carga la página. Esta función contiene una declaración: programamos la función change1 para que se ejecute 3 segundos después de cargar la página.
La función change1 cambia la imagen que se muestra y programa la función change2 para que comience en 3 segundos.
La función change2 vuelve a cambiar la imagen y luego vuelve a la función change1.
Esto significa que las dos imágenes cambiarán cada 3 segundos, hasta que salgamos de la página.
Ejemplo de eventos sonoros y mostrar ventanas de alerta:
En este ejemplo usamos por primera vez el método addEventListener. Cuando se carga la página, se llama a la función init para vincular el evento de cambio de tamaño del objeto de ventana a la función llamada white write (escritura en blanco). La función init ejecutará esto una vez, logrando su rol.
Después de esto, cada vez que cambiamos el tamaño de la ventana, aparece uno (o más) ventanas de alerta que nos informan el evento que esperamos. Las ventanas de alerta pueden ser irritantes, así que úsalas sabiamente.
Después de esto, cada vez que cambiamos el tamaño de la ventana, aparece uno (o más) ventanas de alerta que nos informan el evento que esperamos. Las ventanas de alerta pueden ser irritantes, así que úsalas sabiamente.
Ejercicios
1. Modifica el archivo forms.html:
Agrega una nueva sección antes de la galería, agrega un identificador.
Añade padding, color de texto, un color de fondo y un margen inferior.
El tamaño de fuente se debe calcular en relación con el tamaño de la ventana (expresado en vw).
Cuando se abre la página, agrega la fecha actual y actualízala cada segundo.
Ver el resultado
Agrega una nueva sección antes de la galería, agrega un identificador.
Añade padding, color de texto, un color de fondo y un margen inferior.
El tamaño de fuente se debe calcular en relación con el tamaño de la ventana (expresado en vw).
Cuando se abre la página, agrega la fecha actual y actualízala cada segundo.
2. Modifica el archivo forms.html:
Agrega una nueva sección después de la del ejercicio anterior, para mostrar siempre el tamaño de la ventana y diseñarla de la misma manera que la sección anterior.
Dentro de la nueva sección, escribe el ancho de la ventana seguido de un párrafo con un identificador y de la misma manera para la altura de la ventana también.
Agrega una nueva función al evento onload llamada size.
La función size debe asignar la función de escritura al evento de cambio de tamaño. Llama a la función de escritura para mostrar el tamaño original de la ventana.
La función de escritura, llamada solo cuando ocurre el cambio de tamaño, debe actualizar el contenido de los dos párrafos creados en este ejercicio.
Ver el resultado
Agrega una nueva sección después de la del ejercicio anterior, para mostrar siempre el tamaño de la ventana y diseñarla de la misma manera que la sección anterior.
Dentro de la nueva sección, escribe el ancho de la ventana seguido de un párrafo con un identificador y de la misma manera para la altura de la ventana también.
Agrega una nueva función al evento onload llamada size.
La función size debe asignar la función de escritura al evento de cambio de tamaño. Llama a la función de escritura para mostrar el tamaño original de la ventana.
La función de escritura, llamada solo cuando ocurre el cambio de tamaño, debe actualizar el contenido de los dos párrafos creados en este ejercicio.
Cuestionario
1. ¿Cuál de las siguientes afirmaciones sobre funciones no es cierta?
2. ¿Cómo resolvemos llamar a la función de inicio cuando se cambia el tamaño de la página?
3. ¿Qué sucede si vinculamos la función init () a continuación con el evento de carga?
function init(){
function init(){
setTimeout(init, 5000);
alert("Hi!");
}4. El siguiente código debería cambiar el texto de color a rojo si se hace clic en el botón. Selecciona la afirmación correcta para completar la función.
<p id="t1">Colored text</p>
<button id="t2" onclick="init2()">Click!</button>
<script>
function init2(){ … }
</script>
Información suplementaria
You can read about links and you can exercise visiting the following links:
https://www.w3schools.com/js/js_timing.asp;
https://www.w3schools.com/Jsref/met_win_settimeout.asp;
https://www.w3schools.com/Jsref/obj_window.asp;
https://www.w3schools.com/jsref/met_element_addeventlistener.asp.
https://www.w3schools.com/js/js_timing.asp;
https://www.w3schools.com/Jsref/met_win_settimeout.asp;
https://www.w3schools.com/Jsref/obj_window.asp;
https://www.w3schools.com/jsref/met_element_addeventlistener.asp.
