< Return to Video

Operadores Lógicos (Versión en Video)

  • 0:01 - 0:05
    Ahora hablemos de condiciones más complejas que puedes evaluar con tus programas.
  • 0:05 - 0:08
    Para mostrarlas, he preparado la pantalla para que se vea como un juego que yo solía jugar
  • 0:08 - 0:09
    Cuatro cuadros.
  • 0:09 - 0:15
    Hay cuatro cuadros (el nombre del juego es acertado), y te paras en un cuadro y rebotas tu pelota a los otros cuadros.
  • 0:15 - 0:19
    Ahora dibujaré una elipse por donde pase mi ratón, para que sea nuestra pelota
  • 0:19 - 0:23
    Lo que quiero hacer es resaltar el cuadro en el que se encuentra la pelota, dibujando un rectángulo blanco en la parte superior.
  • 0:23 - 0:30
    Sé que necesito una sentencia "if" para hacer eso, porque sólo quiero hacerlo con uno a la vez, sólo cuando estoy sobre ese rectángulo
  • 0:30 - 0:34
    Ok, empecemos dibujando ese rectángulo.
  • 0:34 - 0:40
    Así que sólo copiaré el rectángulo de ahí, pero lo voy a rellenar con un color diferente, un relleno blanco
  • 0:40 - 0:44
    Bien. Ahora vamos a ponerlo en un "if"
  • 0:44 - 0:51
    Puedes ver que autocompleta las llaves, así que tengo que mover esto dentro de ellas.
  • 0:51 - 0:54
    Ok. Entonces, ¿cuándo tengo que mostrar ese rectángulo?
  • 0:54 - 1:01
    Bueno, sé que debo hacerlo cuando la posición de "x" del mouse sea menor que 200 (mouseX < 200)
  • 1:01 - 1:07
    Eso funciona, pero cuando me pongo aquí abajo, el rectángulo sigue blanco.
  • 1:07 - 1:10
    Así que también necesito revisar "mouseY".
  • 1:10 - 1:13
    Bueno, ¿cómo compruebo las dos cosas?
  • 1:13 - 1:15
    Es por eso que tenemos el operador "AND"
  • 1:15 - 1:18
    Así que usamos el operador "AND" cuando queremos comprobar múltiples condiciones.
  • 1:18 - 1:26
    Entonces sólo escribimos "&&" y luego escribimos la siguiente condición, "mouseY < 200".
  • 1:26 - 1:30
    Así que no lo resalta cuando estoy aquí y ¡sí lo hace cuando estoy aquí! ¡Yeey!
  • 1:31 - 1:36
    Hagamos el siguiente cuadro, sólo para probar que esto funciona.
  • 1:36 - 1:39
    Muy bien, sólo tenemos que cambiar algunas cosas.
  • 1:39 - 1:45
    Ahora tenemos que tomar este rectángulo y obviamente cambiar las condiciones por las que no se está resaltando.
  • 1:45 - 1:53
    Así que en esta ocasión, "mouseX" necesita ser más grande que 200 y "mouseY" seguir siendo menor que 200.
  • 1:53 - 1:56
    Hermoso, ¡miren eso!
  • 1:56 - 2:02
    Muy bien, ahora en Cuatro Cuadros, cuando la pelota pega en los bordes, es decir, en las líneas del centro y las esquinas
  • 2:02 - 2:05
    gritamos "¡Edge Ball!" ("¡Fuera!")
  • 2:05 - 2:10
    Y lo quiero hacer aquí también. Empecemos por escribir "EDGE BALL"
  • 2:10 - 2:15
    Y lo voy a escribir en medio y con letras rojas.
  • 2:15 - 2:20
    Muy bien, y sólo quiero que esto pase si estoy en los bordes.
  • 2:20 - 2:23
    Así que voy a añadir un "if",
  • 2:23 - 2:26
    y mover este código dentro del "if".
  • 2:27 - 2:29
    Entonces, ¿cuándo quiero que esto ocurra?
  • 2:29 - 2:37
    Bueno, hay bordes en el centro, así que el centro es cuando "mouseX === 200"
  • 2:37 - 2:40
    Muy bien, vamos a ver. Voy a poner la pelota en el borde.
  • 2:40 - 2:44
    Aquí voy. ¡EDGE BALL!
  • 2:44 - 2:49
    Ok. Mmm. Esto sólo funciona para esta línea del centro.
  • 2:49 - 2:52
    Pero quiero que funcione también para esta otra línea.
  • 2:52 - 3:03
    En ese caso, quiero que "mouseY === 200", porque ahí es donde está la línea del centro.
  • 3:03 - 3:08
    Ok, vamos a ver, no está funcionando. Nada está funcionando.
  • 3:08 - 3:11
    Oh, sólo funciona aquí, en el punto central.
  • 3:11 - 3:18
    Bueno, eso es porque usé un "AND", y lo va a hacer sólo si las dos condiciones aquí son verdaderas, y eso sólo pasa en el punto central.
  • 3:18 - 3:22
    Entonces, lo que en realidad quiero decir es: "si cualquiera de esas condiciones es verdadera".
  • 3:22 - 3:25
    Así que usaremos el operador "OR".
  • 3:25 - 3:27
    El operador OR se escribe así: "||".
  • 3:27 - 3:32
    A esos símbolos los llamamos plecas o barras verticales, y probablemente nunca los habías usado.
  • 3:32 - 3:36
    Tienes que buscarlos en tu teclado, generalmente están en la parte superior derecha.
  • 3:36 - 3:39
    Esperemos que lo tengas en tu teclado.
  • 3:39 - 3:42
    ¿Todo bien? Sensacional, vamos a ver si funciona...
  • 3:42 - 3:47
    Muy bien, sí funciona aquí y aquí y también aquí, hermoso...
  • 3:47 - 3:49
    podemos seguir añadiendo condiciones aquí,
  • 3:49 - 3:53
    así que con "AND" y "OR", puedes tener tantas condiciones como quieras,
  • 3:53 - 3:56
    si necesitas comprobar 60 condiciones diferentes, puedes hacerlo completamente, ok.
  • 3:56 - 3:59
    No hemos tenido cuidado de todos los bordes ...
  • 3:59 - 4:05
    digamos que "mouseX" es menor que 3.
  • 4:05 - 4:08
    Eso sería ... aquí vamos, ese pequeño borde de aquí.
  • 4:08 - 4:10
    Muy bien.
  • 4:10 - 4:15
    O "mouseX" es mayor que 397 ("mouseX > 397")
  • 4:15 - 4:18
    Aquí está... ¡hermoso!
  • 4:18 - 4:22
    Entonces podemos hacerlo para todos los bordes.
  • 4:22 - 4:28
    Así que... ¡sí!, existe "AND" y "OR" y ahora puedes ver cómo construir condiciones mucho más complejas en tus programas.
  • 4:28 - 4:32
    Y eso es bueno, porque el mundo es un lugar complejo.
Title:
Operadores Lógicos (Versión en Video)
Description:

more » « less
Video Language:
English
Duration:
04:32

Spanish, Mexican subtitles

Revisions