JavaScript - advanced - Lección nº 4
Condiciones y la declaración if
¿De qué trata esta lección?
En esta lección aprendemos sobre el uso de expresiones condicionales en declaraciones if. Para usar las sentencias if necesitamos aprender sobre nuevos operadores lógicos (logical) que verifican la igualdad o comparan dos valores para decidir cómo continuar nuestro programa. En esta lección intentamos por primera vez obtener valores de estilo de los archivos CSS de la manera más sencilla posible.
Nuevos métodos en esta lección:
the_main_string.search(la cadena a encontrar) – Este es un método del objeto cadena. Usamos este método para encontrar una cadena en otra cadena. El resultado es -1 si no hay ningún resultado; de lo contrario, es un número que muestra dónde se encuentra la cadena buscada en la cadena original.
getComputedStyle(element) – es una propiedad del objeto de ventana que nos permite solicitar el formato CSS real aplicado a una etiqueta HTML. El estilo se puede aplicar desde dentro de la etiqueta, desde la parte superior del documento y desde varias clases de CSS u otras configuraciones, por lo que la respuesta no es elemental. Obtenemos una escala más amplia de configuración de atributos, por lo que debe usarse con el método getPropertyValue para obtener algo que podamos usar. También se puede utilizar con dos parámetros…
getPropertyValue(nombre de la propiedad) – es un método que se puede usar junto con el método getComputedStyle para seleccionar el valor de una propiedad concreta.
parseInt – es un método global para convertir cadenas en números: comienza al principio del texto. Si no hay dígitos al principio, no habrá un número válido como resultado.
confirm(texto del mensaje) – Este método del objeto de ventana se usa para mostrar un mensaje como el método de alerta, pero puede haber una retroalimentación al programa. Si el usuario hace clic en Aceptar, obtendremos un valor verdadero y falso si se selecciona Cancelar.
Nuevos eventos en esta lección:
onmouseenter – este evento se activa si el cursor entra sobre un objeto que observamos para este evento.
onmouseleave – Este evento se activa si el cursor abandona el objeto que observamos.
Ejemplo de cómo obtener un valor de atributos CSS:
Hasta ahora cambiamos el estilo de los elementos, pero no intentamos pedir ningún conjunto de valores de CSS. Para acceder a un valor de atributos de elementos HTML, solo necesitamos saber el nombre de los atributos; por ejemplo, con this.src podemos acceder a la fuente de la etiqueta img en cuestión.
Para solicitar un valor de CSS, podemos utilizar, por ejemplo, la combinación de métodos getComputedStyle y getPropertyValue. En el ejemplo anterior, la función de cambio encuentra el color del elemento en el que se hizo clic y se aplica al otro texto como color de fondo.
GetComputedStyle (x): obtiene todas las configuraciones de estilo para el objeto x, y el método getPropertyValue solicita a estos valores el valor de las propiedades de color (dado como parámetro).
¿Qué es una condición?
Una expresión se construye a partir de variables, valores y operadores. Una condición es una expresión que tiene un valor lógico como resultado, que significa verdadero o falso.
Operadores que dan como resultado valores lógicos: <, <=, >, >=, ==, !=.
Ejemplos de condiciones:
Se pueden combinar más condiciones usando && y/o ||
Ejemplo de condiciones combinadas:
¿Que es la declaración if?
Si tenemos que tomar una decisión en un programa, no podemos colocar solo una condición como una declaración en el código. Se debe colocar, por ejemplo, en una sentencia if. Usando una declaración if podemos tomar dos conjuntos de instrucciones y decidir cuál de ellas ejecutar según una condición, que puede ser verdadera o falsa.
La forma general de una sentencia if es:
La parte else se puede omitir si no es necesario.
Los corchetes pueden omitirse también, si solo hay una declaración en ellos.
Ejemplo de declaración if:
En el ejemplo anterior, la variable x contiene el tamaño de la imagen (el valor establecido en la etiqueta HTML).
Si el tamaño de las imágenes es inferior a 300 píxeles, la imagen obtiene un ancho mayor de 10 píxeles con cada clic del botón. Utilizando una declaración if podemos limitar el crecimiento.
No hay otra declaración - podríamos agregar otras cosas que hacer si la imagen crece demasiado.
Ejemplos sobre la comparación de cadenas:
En el ejemplo anterior, comparamos dos cadenas, el contenido de los dos párrafos. La operación == funciona para textos también, no solo números. El resultado se muestra en un cuadro de alerta.
Si queremos obtener el nombre de una imagen, es posible que enfrentemos algunas dificultades: el resultado será la ruta completa y el nombre de la imagen. Así que el operador == anterior solo funciona si escribimos en el código la ruta completa. El código no funcionaría si copiamos la página web en otro lugar.
La otra forma de resolver esto es usar el método de búsqueda en la variable x. El resultado es -1 si la imagen small.jpg no está contenida en la variable x.
En esta lección aprendemos sobre el uso de expresiones condicionales en declaraciones if. Para usar las sentencias if necesitamos aprender sobre nuevos operadores lógicos (logical) que verifican la igualdad o comparan dos valores para decidir cómo continuar nuestro programa. En esta lección intentamos por primera vez obtener valores de estilo de los archivos CSS de la manera más sencilla posible.
Nuevos métodos en esta lección:
the_main_string.search(la cadena a encontrar) – Este es un método del objeto cadena. Usamos este método para encontrar una cadena en otra cadena. El resultado es -1 si no hay ningún resultado; de lo contrario, es un número que muestra dónde se encuentra la cadena buscada en la cadena original.
getComputedStyle(element) – es una propiedad del objeto de ventana que nos permite solicitar el formato CSS real aplicado a una etiqueta HTML. El estilo se puede aplicar desde dentro de la etiqueta, desde la parte superior del documento y desde varias clases de CSS u otras configuraciones, por lo que la respuesta no es elemental. Obtenemos una escala más amplia de configuración de atributos, por lo que debe usarse con el método getPropertyValue para obtener algo que podamos usar. También se puede utilizar con dos parámetros…
getPropertyValue(nombre de la propiedad) – es un método que se puede usar junto con el método getComputedStyle para seleccionar el valor de una propiedad concreta.
parseInt – es un método global para convertir cadenas en números: comienza al principio del texto. Si no hay dígitos al principio, no habrá un número válido como resultado.
confirm(texto del mensaje) – Este método del objeto de ventana se usa para mostrar un mensaje como el método de alerta, pero puede haber una retroalimentación al programa. Si el usuario hace clic en Aceptar, obtendremos un valor verdadero y falso si se selecciona Cancelar.
Nuevos eventos en esta lección:
onmouseenter – este evento se activa si el cursor entra sobre un objeto que observamos para este evento.
onmouseleave – Este evento se activa si el cursor abandona el objeto que observamos.
Ejemplo de cómo obtener un valor de atributos CSS:
Hasta ahora cambiamos el estilo de los elementos, pero no intentamos pedir ningún conjunto de valores de CSS. Para acceder a un valor de atributos de elementos HTML, solo necesitamos saber el nombre de los atributos; por ejemplo, con this.src podemos acceder a la fuente de la etiqueta img en cuestión.
Para solicitar un valor de CSS, podemos utilizar, por ejemplo, la combinación de métodos getComputedStyle y getPropertyValue. En el ejemplo anterior, la función de cambio encuentra el color del elemento en el que se hizo clic y se aplica al otro texto como color de fondo.
GetComputedStyle (x): obtiene todas las configuraciones de estilo para el objeto x, y el método getPropertyValue solicita a estos valores el valor de las propiedades de color (dado como parámetro).
¿Qué es una condición?
Una expresión se construye a partir de variables, valores y operadores. Una condición es una expresión que tiene un valor lógico como resultado, que significa verdadero o falso.
Operadores que dan como resultado valores lógicos: <, <=, >, >=, ==, !=.
Ejemplos de condiciones:
x==10 – esta condición es verdadera si el valor de la variable x es 10 y falso para cualquier otro valor.
x!=10 - esta condición es verdadera para todos los valores excepto 10, y falsa para 10.
Se pueden combinar más condiciones usando && y/o ||
Usamos && si necesitamos que ambas condiciones sean ciertas.
Usamos || si solo necesitamos que uno de ellos sea verdadero.
Ejemplo de condiciones combinadas:
(x>=10) && (x<=50) – esta condición es verdadera para cada valor de la forma variable x del intervalo [10, 50] y falsa para cada valor fuera de ella.
(x==10) || (x==20) – esta condición es verdadera solo para dos valores posibles, para 10 y 20. Para cualquier otro valor, el resultado es falso.
¿Que es la declaración if?
Si tenemos que tomar una decisión en un programa, no podemos colocar solo una condición como una declaración en el código. Se debe colocar, por ejemplo, en una sentencia if. Usando una declaración if podemos tomar dos conjuntos de instrucciones y decidir cuál de ellas ejecutar según una condición, que puede ser verdadera o falsa.
La forma general de una sentencia if es:
if (condición) {
Declaraciones a ser ejecutadas si la condición es verdadera.
} else {
Declaraciones a ser ejecutadas si la condición es falsa.
}
La parte else se puede omitir si no es necesario.
Los corchetes pueden omitirse también, si solo hay una declaración en ellos.
Ejemplo de declaración if:
En el ejemplo anterior, la variable x contiene el tamaño de la imagen (el valor establecido en la etiqueta HTML).
Si el tamaño de las imágenes es inferior a 300 píxeles, la imagen obtiene un ancho mayor de 10 píxeles con cada clic del botón. Utilizando una declaración if podemos limitar el crecimiento.
No hay otra declaración - podríamos agregar otras cosas que hacer si la imagen crece demasiado.
Ejemplos sobre la comparación de cadenas:
En el ejemplo anterior, comparamos dos cadenas, el contenido de los dos párrafos. La operación == funciona para textos también, no solo números. El resultado se muestra en un cuadro de alerta.
Si queremos obtener el nombre de una imagen, es posible que enfrentemos algunas dificultades: el resultado será la ruta completa y el nombre de la imagen. Así que el operador == anterior solo funciona si escribimos en el código la ruta completa. El código no funcionaría si copiamos la página web en otro lugar.
La otra forma de resolver esto es usar el método de búsqueda en la variable x. El resultado es -1 si la imagen small.jpg no está contenida en la variable x.
Ejercicios
1. Realiza cambios en el archivo toplangs.html:
bajo el título The most popular programming languages in 2018 y establece para cada elemento de la lista el evento onmouseenter con una función en él llamada changesize y el evento onmouseleave con una función en él llamada changeback. Ambas funciones deben ser la referencia al objeto actual (this).
La función changesize tiene que aumentar el tamaño de la fuente con 10 píxeles y la función changeback resetearlo a su tamaño inicial.
Ver el resultado
bajo el título The most popular programming languages in 2018 y establece para cada elemento de la lista el evento onmouseenter con una función en él llamada changesize y el evento onmouseleave con una función en él llamada changeback. Ambas funciones deben ser la referencia al objeto actual (this).
La función changesize tiene que aumentar el tamaño de la fuente con 10 píxeles y la función changeback resetearlo a su tamaño inicial.
2. En el archivo forms.html modifica la función contando los segundos que pasaste en la página. Cámbialo para que, después de un minuto, un mensaje de confirmación pregunte si desea continuar contando el tiempo y deje de hacerlo, si se elige cancelar. Solo debe preguntar una vez (cuando el valor de segundos es 60).
Ver el resultado
3. En el archivo index.html modifica la función que oculta las imágenes de la galería. Modifícalo: después de que todas las imágenes estén ocultas, muéstralas todas de nuevo.
Ver el resultado
4. En el archivo index.html, modifica la galería agregando un botón (con algunos estilos de CSS) llamado Play / Pause gallery animation, que al hacer clic, llama a una función llamada toggleAnimation (). Esta función dirige las imágenes en la galería por su id. Y modifica su estilo animationPlayState para "pausar" o "reproducir", con la ayuda de una variable, que almacena que actualmente la animación se está ejecutando o está pausada.
Ver el resultado
Cuestionario
1. ¿Qué condición es verdadera si el valor de las variables x es 8?
2. Si el siguiente código se refiere a una imagen con un ancho original de 450 píxeles y una altura de 475 píxeles, ¿cuál será el último tamaño de la imagen?
if (this.width this.style.width+=10;
this.style.height+=10;
}
this.style.height+=10;
}
3. Dado el código siguiente, ¿qué se mostrará en el cuadro de alerta?
<div onclick="find(this)"> And it grew both day and night. Till it bore an apple bright. </div>
<script>
function find(x){
var t=x.innerHTML.search("both");
alert(t);
alert(t);
}
</script>
4. ¿Cuál es el resultado de la instrucción parseInt("40px * 150px")?
5. ¿Cuál es el resultado del siguiente código?
if (confirm("What do you say?")) this.innerHTML="I do not know.";
else this.innerHTML="I do not care.";
6. Si llamamos al siguiente código desde una etiqueta img, ¿qué pasará?
<img onclick="change(this)" src="small.jpg" width="350">
<script>
function change(){
</script>
<img onclick="change(this)" src="small.jpg" width="350">
<script>
function change(){
var x=this.width;
if (x=300) alert(x);
else alert("NO");
}</script>
Información suplementaria
Ejercicios: Puedes leer más sobre esta lección y hacer ejercicios visitando los siguientes enlaces:
https://www.w3schools.com/jsref/jsref_if.asp;
https://www.w3schools.com/jsref/jsref_getcomputedstyle.asp;
https://www.w3schools.com/CHARSETS/default.asp;
https://www.w3schools.com/Jsref/met_win_confirm.asp.
https://www.w3schools.com/jsref/jsref_if.asp;
https://www.w3schools.com/jsref/jsref_getcomputedstyle.asp;
https://www.w3schools.com/CHARSETS/default.asp;
https://www.w3schools.com/Jsref/met_win_confirm.asp.
