JavaScript moderno para principiantes: parte 2 | Chris Dixon | Skillshare
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

JavaScript moderno para principiantes: parte 2

teacher avatar Chris Dixon, Web Developer & Online Teacher

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Introducción

      2:23

    • 2.

      Descarga de carpetas de proyecto

      0:59

    • 3.

      Comparte tu trabajo en Skillshare!

      1:09

    • 4.

      Para bucles

      10:18

    • 5.

      For...in y para...de

      6:25

    • 6.

      Mientras y hace...

      5:22

    • 7.

      Si / declaraciones y anidación de otro

      5:56

    • 8.

      Si no es

      4:22

    • 9.

      La sentencia switch

      7:57

    • 10.

      Operador condicional (ternario)

      4:12

    • 11.

      Tipo Coersión y conversión

      10:00

    • 12.

      Truthy & Falsey

      4:35

    • 13.

      Cadena opcional

      6:22

    • 14.

      Crear y modificar objetos nuevos

      5:47

    • 15.

      Función constructora de objetos

      9:21

    • 16.

      Prototipos de objetos

      6:41

    • 17.

      Propiedades de herencia de objetos

      10:09

    • 18.

      Copia de propiedades de objetos

      4:38

    • 19.

      Objetos de estilo de CSS

      4:35

    • 20.

      Bucle con objetos

      9:26

    • 21.

      Objetos dinámicos

      5:44

    • 22.

      Tipos de referencia

      5:27

    • 23.

      Comparación de objetos

      6:41

    • 24.

      Introducción de la sección

      3:24

    • 25.

      Órdenes de inclusión

      12:30

    • 26.

      Refactor de pedidos de listado

      5:24

    • 27.

      Función de ayuda de elementos

      6:33

    • 28.

      Selección de la orden actual

      9:13

    • 29.

      Establece la Pizza actual

      5:30

    • 30.

      Métodos de dividir y unirse

      10:50

    • 31.

      Agregación de pizzas al horno

      9:24

    • 32.

      Comenzar y terminar el juego

      9:09

    • 33.

      Introducción a la matemática de javascript

      7:08

    • 34.

      Generación de nuevas pizzas con matemáticas

      8:36

    • 35.

      setInterval

      9:17

    • 36.

      setTimeout

      4:47

    • 37.

      Planificadores de compensación

      3:56

    • 38.

      Introducción a la fecha de javascript

      5:26

    • 39.

      Establecimiento de la hora de cocina

      4:43

    • 40.

      Introducción a la lona y a los Co-Ordinates

      13:03

    • 41.

      Configuración de los ingredientes

      7:45

    • 42.

      Dibujo de ingredientes circulares

      6:38

    • 43.

      Dibujo de múltiples piezas

      13:00

    • 44.

      Limpiar el lienzo

      4:33

    • 45.

      Wasting

      2:35

    • 46.

      Pasos de verificación

      16:23

    • 47.

      Completar pedidos

      12:48

    • 48.

      Eliminar pedidos

      3:33

    • 49.

      Actualización de la interfaz de usuario y estadísticas

      9:55

    • 50.

      Introducción al alcance

      5:49

    • 51.

      Ámbito de anidación

      5:35

    • 52.

      Alcance de bloques y funciones

      3:35

    • 53.

      Crianza

      7:48

    • 54.

      Zona temporal de muerte

      5:17

    • 55.

      Cierres

      9:34

    • 56.

      Un Poco de fondo

      6:25

    • 57.

      Funciones de devolución de llamada

      15:20

    • 58.

      Promesas

      11:23

    • 59.

      El constructor de la promesa

      7:51

    • 60.

      Manejar múltiples promesas

      7:15

    • 61.

      Async / Await

      6:42

    • 62.

      Manejo de múltiples esperas

      4:02

    • 63.

      Manejo de errores

      8:49

    • 64.

      Dejar así pronto

      8:01

    • 65.

      Carousel- de imagen: configurar las imágenes

      9:15

    • 66.

      Carousel- de imagen: crear las flechas

      7:01

    • 67.

      Carrusel de imagen - Imágenes de reordenación

      8:11

    • 68.

      Carousel: Imágenes de intercambio

      4:04

    • 69.

      Sígueme en Skillshare

      0:23

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

350

Estudiantes

9

Proyectos

Acerca de esta clase

¡Bienvenido a Modern JavaScript para principiantes!

Esto es la parte 2 de la clase, construyendo la base que has aprendido en la parte 1. Si no has tomado la parte 1, asegúrate de pasar por esta clase primero, a menos que tengas alguna experiencia en JavaScript y quieras cubrir los temas de esta sección.

Tu proyecto de abridor desde la primera parte continuará a esta clase, si no lo tienes, puedes descargarlo aquí:

Toma los archivos de inicio aquí.

Aquí puedes encontrar etapas de proyecto de Speedy Chef.

Aprender cualquier habilidad nueva puede ser difícil, y Javascript no es una excepción.

Javascript tiene una amplia gama de características y cosas que puede hacer, lo que significa que a veces como principiantes no tenemos idea de dónde empezar.

Es por eso que he creado esta clase…

Esta clase cubre muchos temas de JavaScript, como bucles y declaraciones condicionales, una mirada profunda a objetos, matemáticas, fecha y temporizadores, y dibujar al lienzo.

Todo esto es mientras mira ejemplos y demostraciones en el mundo real, junto con la construcción de un juego de pizza para combinar muchas partes de lo que has aprendido. Este proyecto será razonablemente grande, pero lo desglosaremos en secciones manejables.

Más tarde, descubrimos algunas de las piezas más complicadas como la de async JavaScript, alcance, elevación y cierre, antes de terminar con 2 proyectos más, construimos una pequeña aplicación llamada salida tan pronto, que es una ventana emergente para atraer a los visitantes con una oferta cuando intentan salir de tu sitio. Antes de completar la clase con un carrusel de imagen JavaScript que funciona totalmente.

Gracias por tu interés en esta clase, y te veré en la primera lección…

Conoce a tu profesor(a)

Teacher Profile Image

Chris Dixon

Web Developer & Online Teacher

Top Teacher

Hello, My name is Chris and I am a Web Developer from the UK. I am an experienced trainer leading web development bootcamps and also teaching online courses.

My main areas of interest are Vue.js, WordPress, Shopify, Javascript, eCommerce, and business. I am passionate about what I do and about teaching others. 

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and I have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like wh... Ver perfil completo

Level: Intermediate

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Introducción: [ MÚSICA] Hola, bienvenidos a esta clase. Como todos sabemos, aprender cualquier nueva habilidad puede ser un reto y JavaScript no es una excepción. JavaScript tiene una gama tan amplia de características y cosas para las que se puede utilizar, y esto a menudo puede dejar a los principiantes en una situación difícil preguntándose por dónde empezar, así que por eso he creado esto clase. Esta es la Parte 2 del edificio de clase sobre la fundación que has aprendido en la Parte 1. Si no has tomado la Parte 1, asegúrate de pasar por esta clase primero a menos que ya tengas alguna experiencia en JavaScript y quieras cubrir los temas de esta sección. Si no has tomado una de mis clases antes, llamo Chris y llevo más de 20 años construyendo sitios web. También he estado enseñando estas habilidades por más de siete años, ambas clases de video junto a principales campamentos de arranque de desarrollo web también. Esta clase tiene muchos temas de JavaScript, incluyendo bucles y declaraciones condicionales, una mirada profunda de objetos, matemáticas, fecha y temporizadores junto con ella dibujando al lienzo. Todos estos temas que he cubierto de una manera clara y estructurada vez que construye proyectos prácticos a medida que avanzamos, incluyendo casos de uso de ejemplo del mundo real y también algunos mini desafíos también a lo largo con la construcción un juego de pizza chef para combinar muchas partes de lo que has aprendido. Este proyecto será razonablemente grande, pero lo vamos a descomponer, para que puedas ver cómo encajan todas las partes. Posteriormente descubriremos algunas de las partes más complicadas como JavaScript asíncrono, alcance, levantamiento y cierres. Antes de terminar con dos proyecto final más , s vamos a una pequeña aplicación llamada Saliendo tan pronto, que es un pop-up de intención de salida, que se utiliza para seducir a los visitantes con una oferta cuando intentan salir de tu sitio. Si todos completando la clase fielmente funcionando carrusel de imagen JavaScript. Incluye una carpeta de proyecto a la que agregaremos a medida que avanzamos a lo largo esta clase y también se desarrollará como referencia útil en el futuro también. Gracias por tu interés en esta clase y te veré en la primera lección. 2. Descargar carpetas de proyecto: Si ya has completado la primera parte de esta clase, puedes continuar con los mismos archivos de inicio exactos que usamos en la parte 1. Esta parte 2 de la clase comenzaremos en la Sección número 6, todo el camino hasta el final. Empezaré en la primera lección que es para bucles. Si tienes esto, eres completamente bueno para ir a la siguiente lección. Si estás saltando a la parte 2 sin tomar parte 1, que también está completamente bien, pero tendrás que ir a github.com y descargar los archivos de inicio que vamos a estar usando a lo largo de este clase. Sigue el enlace que puedes ver en la pantalla aquí. Una vez que aterrices en esta página, haga clic en el botón verde carbón, y luego descargue esto como un archivo zip. Abre esta carpeta de proyecto dentro de tu editor de texto favorito. Voy a estar usando Visual Studio Code, pero puedes usar cualquiera que prefieras. Esto es todo lo que necesitas para empezar , y te veré a continuación. Empezaremos echando un vistazo a for-loops. 3. Comparte tu trabajo en Skillshare!: hora de tomar cualquier curso, es muy importante no tener el hábito de seguirlo solo por el simple hecho de marcar otra conferencia. Tómese el tiempo para procesar cada lección, revisar el código que escribe y piense en cómo podría abordar estas soluciones usted mismo. Con esto en mente, esta clase está basada en proyectos, y esto te da la oportunidad hacer algo realmente personal y único. No necesitas perderte demasiado y alejarte de la clase e incluso puedes dar un paso atrás después de haber terminado la clase y volver y hacer algunos cambios de proyecto después. Esto realmente te dará una buena oportunidad de practicar lo que has aprendido fuera de la clase. Además, recuerda compartir tu proyecto también aquí en Skillshare y solo lo revisaré, pero también inspirará a otros estudiantes también. Para obtener más información sobre el proyecto de clase, dirígete a la pestaña de proyecto y recursos, donde no solo puedes subir tu proyecto, sino que también puedes ver otros proyectos de clase también. Con esto en mente, espero ver lo que creas y subes aquí en Skillshare. 4. Para bucles: Bienvenido de nuevo. Esta sección va a ser todo acerca de bucles. Vamos a arrancar las cosas con un for-loop. Cuando empezamos a trabajar con matrices antes, miramos algunas formas diferentes de repetir ciertas tareas usando estos bucles. El tipo de bucle que miramos fue map, y forEach, ambos fueron métodos de matriz. Los bucles significan que podemos repetir tareas mucho más fácil. A pesar de que existen diferentes tipos de bucles generalmente siguen repitiendo una tarea varias veces. A menudo, la principal diferencia es cómo le decimos al bucle que luego detenga estos mapas, y los bucles forEach eran métodos de matriz, pero los bucles no son exclusivamente para matrices. También hay diferentes tipos de bucles que podemos usar para poder recorrer prácticamente cualquier cosa que necesitemos. Este video va a estar enfocándose en un for-loop. Así es como se ve un básico for-loop. Se establece un poco como una función o una declaración if. Aviso en el interior de los corchetes que es de dos puntos y semicones. Éstas se utilizan para pasar en las expresiones libres que configuran cómo funcionará nuestro bucle. Un ejemplo realmente sencillo aquí es solo usarlo para aumentar el número y veremos algunos mejores ejemplos en tan solo un momento. Pero para la primera expresión, contiene el valor inicial o inicial para nuestro bucle. Si solo queremos empezar en un número cero o aumentar cada vez, configuramos una variable para que sea cero, así como esta. Segundo de todo, tenemos una condición y aquí veremos que tenemos el número es menor a 10. Esta condición determina si el bucle es seguir adelante. Si esto es cierto, el bucle continúa. Si es falso, el bucle entonces terminará. Por último, si no hacemos algo en cada bucle, la segunda condición siempre será cierta. Aquí aumentamos el valor del número en uno en cada bucle. Por lo tanto podemos revisar la condición después de cada uno de estos cambios. Para correr a través de este ejemplo después de que cada bucle se ejecute, el número se incrementará uno hasta que alcance el número 10, provocando que la segunda sentencia resulte entonces en false, causando que el bucle a luego terminar. Es decir, este ejemplo en particular registraremos 10 valores, que serán cero a través del número nueve. Si tienes la variable ya declarada fuera del for-loop, puedes dejar fuera e incluir solo las declaraciones segunda y tercera, y las cosas seguirán funcionando igual que antes. Además, vale la pena señalar verá muchos ejemplos con el nombre de la variable, la letra i, que es abreviatura de inicializador o valor inicial. Esto generalmente es si solo estamos utilizando esta variable para los fines del bucle y no necesitamos nombres de variables descriptivos en otro lugar. Nota, aún debemos mantener los puntos y coma en su lugar para que podamos separar claramente estos tres valores en algunos ejemplos. Vamos a saltar a nuestros archivos de inicio. Para esta sección salta a la Sección número 6, que es bucles y condicionales. La primera lección, que es para-loops, salta a la página de índice, que por ahora está prácticamente vacía. Después copiaremos el camino a esto y luego pegaremos esto dentro del navegador. No tenemos contenido en este momento, solo el título for-loops, y luego el guión vacío abajo en la parte inferior para que podamos trabajar en. Vamos a saltar dentro de la sección de guiones y podemos empezar a crear nuestro primer for-loop. Al mirar hacia arriba antes, usamos la palabra clave for, bracket iniciamos nuestras declaraciones libres, y luego las llaves rizadas. Para este ejemplo, vamos a simular a alguien comiendo una pizza con 10 rebanadas diferentes. Después deduciremos una rebanada de pizza después de cada uno de estos bucles. En primer lugar, nuestro inicializador o nuestra variable, que llamaremos rodajas. Estableceremos esto para que sea el valor inicial de 10 y al siguiente vamos a mantener el bucle funcionando siempre y cuando estas rodajas sean iguales o mayores que el valor de uno agregue un punto y coma. Entonces deduciremos el valor de los rebanados por el valor de uno cada vez. Ahora sólo para recapitular, vamos a empezar con 10 rebanadas o con el valor de 10. Después de terminar el bucle, esto deducirá una rebanada para luego ser igual a nueve, nueve es mayor o igual a uno por lo que el bucle por lo tanto seguirá funcionando. Entonces correrá por segunda vez. Entonces esto deducirá las rebanadas de pizza a ser ocho y luego siete, luego seis. Seguirá funcionando hasta que el valor sea mayor o igual a uno. Dentro de los tirantes rizados, agregamos el código que quieres ejecutar. Agarra un ejemplo sencillo, podemos hacer un registro de consola con el valor de las rodajas. Esto se va a deducir de 10 todo el camino hasta uno. Después de esto, un segundo registro de consola con el texto de cada sector. También podemos agregar cosas como declaraciones condicionales dentro de aquí también. Esta declaración condicional va a verificar si los rebanados son iguales al valor de uno. Si lo es, estaremos en su lugar en un registro de consola con el texto de no queda rodajas. Salvemos esto y saltemos a las Herramientas de Desarrollador. haga clic derecho y “Inspeccione” en la consola. Vemos que el valor de 10 en el primer bucle se deduce entonces por el valor de uno cada vez. Nos ponemos todo el camino hasta el valor de uno y luego toma una nota de rebanadas a la izquierda. Algo que puedas ver, pero probablemente no tanto falta un segundo valor, que es esta condición. Nosotros sí necesitamos dejar en el punto y coma en su lugar sin embargo y antes de probar esto, es posible que ya esté manchando un problema. Si no tienes ninguna condición. No tenemos forma de detener un bucle. Esto simplemente seguirá funcionando infinitamente. Esto es algo de lo que debemos tener cuidado a la hora de crear bucles. Debemos asegurarnos de que la condición de los bucles eventualmente se convierta en falsa. De lo contrario, terminaríamos en un bucle infinito, que por lo tanto provocaría que el navegador se bloqueara. No hagas esto y no sigas junto con este ejemplo. Pero te voy a mostrar lo que pasa dentro del navegador. Si guardamos esto, actualice. Vemos que el bucle se ejecuta miles de veces, lo que ocupa todos los recursos del navegador, provocando que eventualmente se bloquee. Para evitar esta trituración o este bucle infinito, necesitamos usar manualmente la palabra clave break dentro del bucle cuando queremos que luego se detenga. Por ejemplo, si vamos a esta sección inferior, sabemos dentro de la declaración if este es el último bucle. Lo que podemos hacer es que podamos agregar la palabra clave break. Esto luego sale del bucle y luego detiene que el código se ejecute. Podemos probar esto abriendo el navegador una vez más. Abre la Página de Índice, y luego salta a las Herramientas de Desarrollador y a la consola y nuestro bucle, ahora funciona como se esperaba. Otra cosa útil que podemos hacer con for-loops es crear múltiples elementos, como elementos de lista. Usando un bucle, podemos crear, digamos, 10 elementos con mucho menos código de lo que haríamos si escribiéramos esto 10 veces. Hagamos esto justo dentro del script, crearemos una constante llamada ul, donde crearemos una nueva lista desordenada. Hacemos esto con document.createElement. Pasando en los elementos ul que se desea crear. Justo antes de saltar a la creación de los elementos de la lista, anexaremos nuestra lista desordenada al cuerpo. Agarra el cuerpo con documento.Body.appendChild, pasando en nuestra variable ul. Apenas volviendo a lo que miramos antes, vamos a modificar nuestro ejemplo de pizza y reemplazar esto con el nombre variable de i. Recuerda que es una convención común de nomenclatura para una variable dentro de un bucle. Inicialmente estableceremos esto para que sea un valor de uno. Vamos a hacer esto a la inversa desde antes. Empezaremos con el valor inicial de uno, y luego mantendremos funcionando el bucle mientras i sea menor o igual al valor de 10. Por lo tanto, necesitamos aumentar esto por el valor de uno en cada bucle, lo que hará que el bucle se ejecute 10 veces. Podemos mover todos los contenidos desde dentro aquí y luego crear nuestros elementos de lista. Vamos a crear nuestro elemento de lista seleccionaremos el pase document.createElement en el elemento de lista. Almacenar esto dentro de una constante llamada li. Esto luego nos dará un elemento de lista vacío. Tenemos que luego colocar el contenido dentro de la etiqueta de apertura y cierre. Podemos hacer esto con documentos.createTextNode, y podemos colocar en cualquier texto de muestra que queramos dentro de aquí. En lugar de una cadena regular, voy a insertar una variable usando los backticks. Diremos elemento de lista colocado en nuestra variable con el símbolo $ y los tirantes rizados. Sabemos desde arriba tenemos una variable llamada i, que es igual al valor de una. Entonces si sigues aumentando por el valor de uno para cada bucle. Podemos comprobar esto colocando esto dentro de aquí. Esto debe comenzar con el valor del elemento de la lista uno, elemento de la lista dos, y así sucesivamente. Todo esto dentro de una constante, digamos texto. Entonces podemos fusionar estos dos juntos accediendo al padre, que es el elemento de lista usar AppendChild. Entonces coloca nuestro texto dentro del elemento de lista. Por último, cuando creamos cada uno de estos elementos de la lista, entonces queremos empujarnos a nuestra lista desordenada. De la misma manera que lo hicimos con nuestro ítem de lista. Seleccionamos nuestra lista desordenada AppendChild, donde pasamos en nuestro ítem de lista. Echemos un vistazo a esto, actualice el navegador. Esto solo tiene que ser i para que coincida con la variable refresh. Ahora vemos el valor del elemento de lista uno todo el camino hasta el punto 10 de la lista. Como se puede imaginar, si creamos estas 10 veces separadas, esto resultaría en mucho más código. El uso de este bucle lo convierte en un ejemplo mucho más corto. 5. Para el trabajo de la empresa...: Ahora vamos a cubrir dos tipos más de bucles, que se llama for-in y también for-of. Se ven bastante similares y ambos pasan por encima de algo como cabría esperar, pero la diferencia clave es lo que pueden recorrer. Abramos los archivos de inicio y veamos qué tenemos. la barra lateral, saltando a la lección Número 2 en esta sección, que está for-in y for-of, y luego abre esto dentro del navegador. En primer lugar, vemos una sección for-in la cual tiene un objeto de producto con diversas propiedades anidadas en su interior. Como es de esperar, así es como funciona un bucle for-in. Utilizamos este tipo de bucle para recorrer las propiedades dentro de un objeto, como el nombre y el tamaño. Ahora, esto tendrá la sección for-of, y esto se usa para recorrer objetos iterables. Un objeto iterable es básicamente algunos de ellos que el bucle sobre, como una matriz o una lista de nodos. Empecemos por la parte superior con nuestro bucle for-in, y vamos a usar esto para recorrer nuestros objetos de producto. Podemos hacer esto justo debajo. Esto se parece un poco a nuestro for-loop del video anterior, configuramos la palabra clave for, los corchetes y luego los tirantes rizados. Saltando al primer conjunto de corchetes, y así funciona un bucle for-in. Establecemos una variable, y llamaremos a esta propiedad ya que estamos haciendo un bucle sobre todas las propiedades dentro de este objeto, que está en nuestro objeto producto. De ahí viene el término for-in, tenemos la palabra clave for y luego la palabra clave in dentro de los corchetes. Estamos haciendo un bucle sobre este objeto de producto completo y luego estamos almacenando el valor de la propiedad dentro de esta constante. Veamos cómo se ve con un registro de consola del valor de nuestra variable, que es propiedad, actualización, y vemos el valor de SKU, el nombre, el tamaño y el color. Esto nos da el valor de la clave, pero ¿qué pasa con el valor real de la propiedad como camisa fresca, media, y también azul? Bueno, también podemos hacerlo accediendo a nuestro producto y luego usando los corchetes. Echemos un vistazo a cómo se ve esto dentro de un registro de consola. Podemos usar las garrapatas traseras para insertar una variable, y comenzaremos insertando el valor de la propiedad. Estas son solo las claves que veremos ya dentro de la consola, pero después agrega dos puntos para separar esto y luego insertar nuestra segunda variable. La segunda variable va a ser cada uno de estos productos. Vamos a agarrar el producto, y luego podemos usar los corchetes, para reducir esto a una propiedad en particular. Estamos pasando el valor de SKU, nombre, color o tamaño. Si guardamos esto y refrescamos, ahora hemos creado una nueva cadena para cada una de estas propiedades, que incluye tanto la clave el valor de la propiedad. Así es como funciona un bucle for-in para recorrer un objeto. Ahora echemos un vistazo a para-de. Quiero comentar esta sección y luego bajar al fondo debajo de nuestros permisos. De nuevo, esto comienza con la palabra clave for, los corchetes, y los tirantes rizados, y también toma una variable. Digamos valor const, que se va a establecer a cada uno de los valores dentro de la matriz. Esta vez en lugar de usar la palabra clave in que usamos, y luego pasar exactamente lo que queremos recorrer. En nuestro caso, es la matriz de permisos desde justo arriba. Esto es en permisos, y luego dentro de los tirantes rizados, podemos acceder a nuestro valor. En el primer bucle, el valor es usuario, el segundo bucle es editor, y luego admin, guardar y refrescar, y ahí están nuestros tres valores dentro de la consola. Como se puede ver dentro de sus comentarios en la parte superior, cosas como una lista de nodos también se pueden enredar también. Recuerda, cuando usamos algo así como selector de consultas todo para obtener múltiples elementos, una lista de nodos es lo que recuperamos. Para probar esto, también necesitamos algunos elementos para recorrer. Saltaré fuera de estos scripts, crearé una lista desordenada con algunos elementos de lista de ejemplo justo dentro. Vamos a duplicar esto dos veces más en lugar de giro Número 2 y 3, y luego podemos recorrer nuestros tres elementos de la lista, que luego devolverán una lista de nodos, por lo tanto, podemos usar el bucle for-of. paso 1 es acceder a los tres elementos de la lista. Voy justo encima de nuestro bucle for, crear una llamada constante enlaces, agarrar estos con document.QuerySelector, de hecho, necesitamos QuerySelectorAll ya que estamos accediendo a múltiples elementos y una vez que agarres nuestra lista artículos. Ahora, en lugar de acceder a nuestros permisos, lo que vamos a hacer es acceder a todos los enlaces, que son nuestros tres elementos de lista y luego cambiar el nombre de la variable al enlace. El valor del link en nuestro primer bucle es el primer elemento de la lista, y el segundo elemento de la lista, y luego el tercero. Podemos hacer lo que queramos con estos enlaces. Para este ejemplo, voy a acceder a nuestros enlaces y luego usar addeVentListener. Escucha un clic en cualquiera de estos. Esto entonces ejecutará una función, vamos a pasar en la información del evento , crear una alerta. Para acceder a los contenidos dentro de cada uno de estos elementos de lista como 1, 2, y 3, podemos hacerlo accediendo a la información de eventos, seleccione e. target, que es la información al respecto elemento de lista particular en el que se hizo clic, y luego mostrar el innerHTML de ese elemento. Vamos a probar esto. Ahora, si nos refrescamos, tenemos nuestros enlaces gratuitos en la parte superior, vamos a hacer click en Número 2, ahí está el innerHTML. El número 3, y también el Número 1 funciona correctamente también. Este es un par de varianza realmente útil en el for-loop, que podemos usar para recorrer cosas como matrices, y lista de nodos, y también objetos también. 6. Mientras y hacer... mientras: En mi opinión, mientras que los bucles se ven un poco más simples que los cuatro bucles que miramos antes. La configuración básica vuelve a lucir similar a muchas otras cosas en JavaScript, como una función básica y if declaraciones e incluso el bucle for también. Un bucle while seguirá funcionando siempre y cuando una condición se establezca en true. Para este ejemplo, tenemos una variable numérica simple y luego el bucle seguirá funcionando mientras que el número es menor a 30. Esta comprobación se realiza antes de que se ejecute el código en el bucle, por lo que si es falso el bucle se detendrá. Al igual que con el bucle for, también necesitamos una forma de detener realmente las cosas para que no se convierta en un bucle infinito. Hacemos esto dentro del bucle incrementando el valor del número en uno en cada bucle. Lo que significa que correrá 30 veces antes de que luego se detenga. Vamos a ir a nuestros archivos de inicio y darle una oportunidad a esto. La siguiente lección que necesitamos es el número 3. Es la sección de bucle while. Abre esto, y también dentro del navegador también. Como se puede ver, tenemos un archivo de arranque vacío con el guión en la parte inferior. Lo que haremos dentro de aquí es configurar un par de variables. En primer lugar, una constante llamada StadiumCapacity, y establecer esto igual a un valor de 100. Esta es la capacidad del estadio y a continuación vamos a montar una segunda variable, que va a ser por el número de aficionados a los que actualmente hemos entrado. Ya que esto se puede aumentar, necesitamos usar la palabra clave y establecer esto igual a un valor de CurrentlyEntried, que comenzará en el valor de cero. Lo que queremos hacer es seguir ejecutando un bucle mientras que el valor de CurrentlyEntried es menor que el StadiumCapacity. Un bucle while es ideal para esto. Configuramos nuestra palabra clave while, los corchetes, y luego las llaves rizadas justo después. Lo que vamos a hacer es mantener este bucle funcionando mientras que el valor de CurrentlyEntried, que es cero, es menor que el StadiumCapacity. Básicamente, si cero es menos de 100, entonces se ejecutará el código dentro de aquí. Colocando un log de consola con un texto de enter, y deberíamos poder pasar a la consola y echar un vistazo a esto. Pero justo antes de hacer esto, demos un paso atrás y echemos un vistazo a este bucle. Si pensamos en esto, queremos echar un vistazo a nuestra condición donde actualmenteEntrados es menor que el StadiumCapacity. Por el momento, no tenemos forma de cambiar estos dos valores variables. Básicamente esto siempre será el valor de verdadero. Esto resultará entonces en un bucle infinito y nuevamente causará un accidente dentro del navegador. Para ejecutar solo este bucle while una cierta cantidad de veces, necesitamos una forma de aumentar el valor de CurrentlyIntroducido en cada bucle. Esto es bastante simple. Simplemente accedemos a nuestro valor y luego usamos plus plus, lo que aumentará esto por el valor de uno en cada bucle hasta el valor de 100. Una vez que esto llegue al valor de 100 esta condición ya no será verdadera, lo que significa que esto hará que nuestro bucle se detenga. Vamos a revisar esto dentro del navegador, refrescar y saltar a la consola. Bien y vemos nuestro texto de enter se ha repetido 100 veces. La varianza de este bucle while es do-while. Esta es una versión cambiada de este bucle while. Antes dentro de las diapositivas, sí mencioné que el código dentro de este bucle siempre se ejecutará después de que se haya comprobado esta condición. Básicamente, si esto resulta en false, el código dentro de este bucle nunca se ejecutará ni una vez. Podemos voltear esto y asegurarnos que el código se ejecute al menos una vez y luego realizar la comprobación después. Esto es útil si queremos siempre asegurarnos de que el código se ejecute al menos una vez antes de que el bucle se haya detenido. Para ello, justo por encima nuestra sección while crearemos una sección do. Vamos a decir que sí, abre las llaves rizadas, y como siempre queremos que esto corra una vez, solo saltamos directamente a los tirantes rizados, no necesitamos agregar ninguna condición. Entonces podemos agarrar nuestro código del bucle while. Corta esto fuera de lugar. Agrega esto en la sección do. Voy a quitar los tirantes rizados del bucle while. Como se puede ver, el código ahora se encuentra dentro de la sección do, significa que esto siempre se ejecutará al menos una vez antes incluso de realizar nuestro cheque. Nuestro cheque sigue siendo cierto, esto seguirá funcionando la segunda vez, en nuestro caso, todo el camino hasta 100. Vamos a revisar esto. Podemos guardar esto y refrescar el navegador. Seguimos obteniendo exactamente los mismos resultados que antes. Podemos probar esto estableciendo el valor de CurrentlyEndured para ser 100, que luego establece que esto sea falso. Si ahora guardamos esto y refrescamos, vemos nuestro valor de registro de consola única de enter porque nuestro código se ejecuta primero y luego realizará la comprobación dentro del bucle while. Esta es solo una alternativa dependiendo de si siempre queremos que el código se ejecute primero o primero pruebe la condición antes de ejecutar cualquier código dentro de nuestro bucle. 7. Si / Otras Declaraciones & Anidación: Para este video salta a la sección de sentencias if-else y también abre esto dentro del navegador. Se puede ver en la parte superior tenemos un objeto de usuario ya configurado y también if declaración justo debajo. Por lo que hemos utilizado declaraciones if unas cuantas veces ya durante ejemplos anteriores. No hay mucho más que añadir a ellos de lo que ya hemos cubierto. Simplemente ejecutan algún código entre estas llaves rizadas. Si la condición dentro de aquí se establece para ser cierta. Usando este ejemplo, tenemos un objeto de usuario en la parte superior. Esto resultaría en true ya que tenemos un objeto presente, lo que significa que nuestro registro de consola funcionará. Si el usuario se desconectara, tal vez establecería nuestra variable como nula, así, para que el usuario sea igual a null, lo que resultaría en un valor falso y el código dentro del if sentencia no se ejecutaría. Por lo que aquí estamos manejando si la condición es cierta. Pero ¿qué pasa si también queremos manejar si la condición es falsa? Bueno, aquí es donde más las declaraciones entran en juego. Los colocamos inmediatamente después la declaración if y este bloque de código se ejecutará en todos los casos que no estén cubiertos por la sección if. Tenemos esta configuración de ejemplos similares dentro de los archivos de inicio y aquí solo manejamos la condición si el usuario está conectado. Puede que estés pensando, por qué no solo manejar la condición de cierre de sesión debajo de esto. O podríamos hacer algo como esto. Podríamos hacer un registro de consola o cualquier código que quieras, donde podemos decir que el usuario está desconectado. Bueno, probemos esto y veamos qué pasa si refrescamos y saltamos a la consola. Aquí podemos ver que el registro de la consola se ha corrido dos veces. Tenemos el usuario está conectado y también el usuario está desconectado. Así que obviamente para algo sensible a la seguridad, como un usuario que está conectado o desconectado, solo queremos que se ejecute una de estas condiciones. Esto, podemos configurar nuestras declaraciones if, que tenemos arriba, seguidas de la declaración else. Vamos a quitar el registro de la consola. Estoy colocando la sección else y agrego nuestro código dentro de aquí. Vamos a refrescar y vemos que el usuario está conectado ya que tenemos un objeto de usuario presente en la parte superior. Si también entonces cambiamos esto para que sea lo contrario y establecemos que el usuario sea igual a un valor falso de null. Esto debe entonces ser usuario está desconectado. Si quisiéramos, también podríamos agregar múltiples declaraciones if a y simplemente empujar nuestra declaración else hacia abajo. Entonces en el medio podemos sumar una segunda declaración if, al igual que lo hicimos anteriormente. Podemos revisar una segunda condición como un usuario o rol, que actualmente se establece en admin. Podemos comprobar si este es un valor particular y si está dentro de las llaves rizadas haremos un registro de consola, digamos, Hey admin, prueba esto, refrescar. Ahora vemos que el usuario está conectado y también el rol admin. Esto funciona, pero esto también presenta un problema, tenemos que ser realmente cuidadosos con este tipo de configuración. Porque esta otra declaración, que tendremos abajo en la parte inferior inmediatamente sigue la segunda declaración if. Esto significa que ahora la sección else solo se ejecutará si el rol del usuario no está configurado en admin, lo que no tiene sentido. Entonces teníamos un usuario como null, así que con el no estamos logueados. Refrescar. Esto ahora arrojará un error ya que estamos tratando de acceder al rol de punto de usuario, que ya no está disponible porque ya no tenemos nuestros objetos de usuario. Para este tipo de uso ese ejemplo para que sea un poco más sentido y para ser más factible, solo queremos comprobar si el rol del usuario es igual a admin, en realidad iniciaron sesión. Para ello, podemos anidar nuestras declaraciones if recortando la segunda declaración if. Podemos pegar esto dentro del primero. Esto nos lleva de vuelta al primer ejemplo. Tenemos dos cheques de nivel superior. Tenemos la declaración if, el usuario está conectado seguido de la sección else justo debajo. Entonces la declaración if que está anidada en el interior, solo arruinará si el usuario realmente ha iniciado sesión. Si el usuario ha iniciado sesión, se ejecutará este registro de consola. Entonces, si sucede que también se inician sesión como el rol de administrador, también se ejecutará el segundo registro de consola . Vamos a probar esto. Refresca, y el error ahora se borra. Vemos que el usuario está desconectado porque el usuario está configurado en null. Vamos a reinstaurar esto, el nombre para ser igual a cualquier cosa en el rol de vuelta a admin. Con esto ahora en su lugar, ahora tenemos un usuario. Por lo que debe ejecutarse el primer registro de consola. También tenemos un rol de usuario que es igual a admin. Ahora deberíamos ver dos registros de consola dentro de aquí. Así es como podemos usar declaraciones de nivel superior if else y también cómo podemos anidar una declaración if en el interior también. Si quisieras, también podrías ir aún más allá terminar justo después de la sección si anidados, también podríamos colocar en otra sección también para que pudiéramos hacer un registro de consola. Para esta sección, sabemos que el usuario realmente está conectado, pero también querremos comprobar si no son el administrador. Por lo que aquí esto se ejecutará si son el administrador. De lo contrario, solo diremos, Hey usuario, refrescar. Seguimos viendo hey admin ya que el rol está establecido a esto. Pero si cambiamos esto para que sea suscriptor, la sentencia anidada if ahora es falsa, lo que significa que ahora se ejecutará la sección de usuario hey. Si quieres. También podrías ir tan profundo como queríamos anidando múltiples si no secciones dentro de las anidadas también. Pero hay que tener cuidado de no ir por la borda y hacer que el código sea difícil de leer y también de entender para otros desarrolladores también. regla general, generalmente podemos cubrir la mayoría de los casos de uso sin necesidad de profundizar. Entonces si encuentras que tal vez tengas tres o cuatro niveles de profundidad con si declaraciones o cheques, generalmente hay una mejor manera de hacer las cosas. 8. Si no: Dentro de la carpeta de esta lección, que es la sección else if, encontrarás justo debajo dentro del script tenemos el mismo ejemplo del video anterior. Aquí estamos manejando dos condiciones de primer nivel que registramos. En primer lugar, si el usuario está conectado y luego otra sección captura lo que sucede si el usuario no está conectado. Dentro de la sección logueada, también tenemos una sección anidada si otra. Agrega un saludo diferente si el usuario es igual a admin. Tenemos dos opciones en el nivel superior y también dos opciones anidadas. Pero ¿qué pasa si quisiéramos una tercera opción también? Para ello, también tenemos else if. Echemos un vistazo a esto, vamos a simplificar este ejemplo eliminando las declaraciones anidadas. Dentro de aquí, eliminaremos el anidado si más nos deja con un simple conectado o cerrado sesión. Si recuerdas del video anterior, echamos un vistazo a cómo manejar brevemente una tercera condición agregando una segunda declaración if, así como esta. Pero el problema que esto nos da es que la sección otra ahora está conectada a nuestra segunda declaración si. Esencialmente, es decir, nuestra primera declaración si ahora está desconectada. Si aún queremos mantener los tres conectados sin relación entre sí, podemos convertir este segundo uno en otro si, algún lugar más. Justo antes de la sección if, entonces podemos agregar una segunda condición dentro de aquí. En primer lugar, queremos comprobar si el usuario está conectado, y luego usando el doble ampersand, también podemos proporcionar un segundo cheque. Podemos comprobar si el user.role es igual al suscriptor, y si lo es, entonces ejecutaremos el código dentro de aquí. Ahora solo colocaremos en un simple registro de consola diciendo lo else if sección se ha corrido, guarde esto, y luego sobre al navegador y veremos qué pasa dentro de aquí. Vemos el texto de usuario iniciado sesión. Puede que te estés preguntando por qué vemos el texto de solo usuario iniciado sesión y no también el resto si la sección ha corrido porque después de todo el usuario está presente y también el usuario.role es igual al suscriptor. Bueno, la razón es porque sólo se correrá una de estas secciones. Si se ha cumplido la condición, se ejecutará el código dentro y no irá más abajo el resto de estas secciones. Efectivamente, sólo se ejecutará el primer partido. Si queremos que sea más específico con la primera sección, también podríamos copiar este user.role soltar esto en la primera sección y también podemos comprobar si esto es igual a admin. Dado que nuestro rol de usuario es igual al suscriptor, ahora deben ser falsos. Porque en ningún otro lugar si sección para correr ahora. Vamos a guardar esto y probar esto en el navegador. El else if sección ahora se ejecutará. Dado que esta es nuestra primera sección que da como resultado a través, por lo que ahora podemos hacer lo que queramos en cada una de estas secciones, podemos mostrar y ocultar contenido dependiendo del rol del usuario. Podemos redirigirlos a un área de cuenta. Podemos deshabilitar funciones las que el usuario puede no tener acceso o cualquier otra cosa que posiblemente se le ocurra. También podemos usar varias otras secciones si también. Si quisiéramos revisar más de estas tres condiciones, también podríamos hacer lo mismo justo después de la sección else if, colocada en una segunda. Probablemente esté condicionado desde justo arriba. Esta vez, comprobaremos si el user.role es igual al autor. Si se coloca en un log de consola, dale a esto un guardado y como cabría esperar, deberíamos ver el mismo resultado que antes ya que tenemos el conjunto de suscriptor, que es un partido para esta sección. Pero si ahora cambiamos esto para ser la oferta, la sección if ahora es falsa y luego la primera más si sección también es falsa y nuestro nuevo registro de consola con el texto de autor, ahora se ejecutaría dentro de la consola. Por último, si ninguno de estos, si o bien si las secciones son ciertas, así que cambiamos para ser algo así como usuario, ahora deberíamos volver a usar la sección else abajo en la parte inferior. 9. La sentencia switch: La declaración Switch es una forma de proporcionar tantos resultados como necesitemos en base a una sola condición. También podemos proporcionar múltiples resultados con declaraciones if y si más declaraciones como lo vimos anteriormente. Pero como descubrimos, necesitamos agregar algo para comprobar contra cada una de estas condiciones como cuando revisamos cosas como el rol del usuario para cada una de estas condiciones. Con una sentencia switch, sin embargo, solo probamos contra la misma condición para cada uno. Justo aquí con nuestra variable de pizza favorita. La sentencia switch justo debajo, nuevamente, se ve similar en su configuración a cosas como las declaraciones vacías if y también for-loops. Después pasamos en lo que queremos comprobar, como nuestra variable de pizza favorita. Después en el interior, luego configuramos los diferentes estuches para manejar lo que es la pizza favorita. Aquí tendremos tres casos separados para manejar qué hacer por cada valor. Podemos tener tantos de estos casos como queramos. Echemos un vistazo al primero. Comprobamos si la pizza favorita es igual a pepperoni. Si lo es, entonces ejecutamos algún código dentro, como este registro de consola. Luego proporcionamos la palabra clave break para salir de la declaración switch una vez que tengamos un partido y esto evitará que se ejecuten todo el resto del código y todo el resto de los cheques a continuación. Esta es la misma palabra clave break que usamos anteriormente en esta sección para evitar que el navegador cree un bucle infinito. Esto seguirá funcionando hasta que se encuentre un partido, pero si no se puede encontrar uno, también podemos agregar una cláusula por defecto también. Esto siempre correrá si no hay otros partidos. al proyecto y vamos a darle una vuelta a esto. Esta vez estamos en la sección de sentencias switch y dentro del archivo de inicio, solo tendremos un objeto de usuario simple con la propiedad name y también el rol. Podemos configurar una sentencia switch para comprobar el rol del usuario y decidir si el usuario puede editar algo en nuestro sitio. Esto, podemos iniciarlo en una variable llamada CanEdit. Por lo que CanEdit se va a establecer inicialmente a un valor de false, por lo que al usuario no se le va a asignar ningún permisos de edición por defecto. Entonces podemos usar una sentencia switch para comprobar el rol particular del usuario. Si el rol particular del usuario es igual a un nivel superior como el admin o incluso un editor, entonces podemos establecer CanEdit para que sea igual a true. Al igual que hemos visto en las diapositivas, configura nuestras sentencias switch y luego pasaremos en la condición que es user.role. Abre los tirantes rizados, entonces podemos sumar nuestros casos dentro de aquí. El primer caso va a ser el usuario. Esto es solo un usuario habitual iniciado sesión. Agrega el colon. Después añadimos después lo que queremos hacer por este caso particular. Bueno, en nuestro caso queremos mantener CanEdit para que sea igual a false ya que no tienen los permisos admin ni el editor. Si este caso en particular pasa a ser cierto, no quiero usar la palabra clave break para salir del resto de las declaraciones de este switch. Esa es la primera sección. Después bajamos al segundo caso y éste va a ser suscriptor. Esto simplemente espejaría la misma condición que arriba. Podemos establecer CanEdit ser igual a false. Agrega las palabras clave break. Ese es nuestro segundo caso ahora completo. El siguiente, agregaremos un caso para el editor. Y como suena, el editor es un caso en el que queremos permitir que el usuario pueda editar. Para esto, estableceremos nuestra variable CanEdit para que sea igual a true, luego saldremos de la sentencia switch. Por último, el último caso va a ser para el admin. En el Admin sí queremos proporcionar todos los permisos que necesitan para luego editar nuestro sitio. Al igual que arriba, estableceremos CanEdit para que también sea igual a true y luego saldremos de la sentencia switch. Como habríamos visto en las diapositivas, también necesitamos agregar un caso predeterminado, que se va a ejecutar si ninguno de los casos anteriores es un partido. Ejemplo muy simple, solo coloca en un registro de consola y diremos que el rol de usuario no se puede encontrar. También estableceremos CanEdit para que sea igual a false. Ahora sólo tenemos que darle una prueba a esto. Cuando empezamos aquí por primera vez tenemos el rol de usuario para ser igual al usuario. Esto debería establecer CanEdit para que sea igual a false. Vamos a probar esto bajando al fondo, lo colocaremos en un registro de consola, colocamos en el valor de CanEdit. Veremos si esto cambia para cada uno de nuestros casos. Como sabemos ningún CanEdit será igual a false ya que actualmente tenemos el rol de usuario para ser igual a usuario. Vamos a saltar a las herramientas de desarrollador a la consola. Es falso como se esperaba. Vamos a revisar nuestra segunda condición cambiando el rol a suscriptor, refrescar y como cabría esperar, esto es falso. El tercero es el editor, esto ahora debería ser cierto. Por último, podemos probar el admin. Esto también es cierto. Sólo para coger la condición predeterminada abajo en la parte inferior, deberíamos ver el log de la consola y ellos puedeEditar ser igual a false si no tenemos un partido para cualquiera de estas cuatro condiciones. Volvamos esto a ser algo completamente aleatorio. Simplemente teclearemos cualquier papel aleatorio dentro de aquí. Refrescar. Esto es falso y el registro de la consola ahora se ejecuta como se esperaba. Sólo una cosa a tener cuidado si tenemos múltiples casos coincidentes. Si tengo dos o más casos que ambos coinciden, se usará el primer caso coincidente. También como atajo si tenemos múltiples casos, igual que tenemos aquí, que ejecutan el mismo código dentro. El usuario establecerá, CanEdit para ser igual a false y también al suscriptor. Se trata de una sección duplicada, la misma para los dos últimos casos. Ambos establecen CanEdit para ser igual a verdadero. Podemos acortar un poco este código para hacerlo un poco más sencillo. Para los dos primeros, que son exactamente iguales, lo que podemos hacer es eliminar el código del primero. Ambos casos se siguen de inmediato. Entonces este código justo después se ejecutará para cada uno de estos casos. Exactamente lo mismo para estos dos abajo en la parte inferior. Podemos mover el CanEdit y también el descanso. Estos dos están actualmente agrupados esencialmente. Podemos simplemente probar esto y si actualizamos, aún vemos que la cláusula predeterminada se ejecuta en la parte inferior. Probemos con el editor. Debe ser cierto. El admin true también. El usuario debe ser falso. Por último, el suscriptor. Esto es todo para las declaraciones switch. Sólo una cosa rápida antes de seguir adelante. Si olvidamos poner una palabra clave break en cualquiera de estos casos, todos los siguientes casos también correrían también hasta que finalmente se encuentre un descanso. Por ejemplo, si nos hubiéramos perdido una cláusula break dentro de esta sección, podemos eliminar esto. Si tenemos una coincidencia para el usuario o el suscriptor, CanEdit seguirá siendo igual a false pero luego ejecutaría el código justo debajo, y luego anularía el CanEdit para ser igual a true. Probemos esto. Tenemos el papel igual al suscriptor. Refrescar. Ahora el suscriptor CanEdit ha surtido efecto pero el programa ha seguido bajando al editor y también a la sección admin y causar una anulación por lo que CanEdit ahora es igual a true. 10. Operador condicional (ternario): Como alternativa a las declaraciones if-else que hemos mirado, Javascript también tiene un operador condicional, a menudo conocido como el operador ternario, ya que está compuesto por tres partes. Dado que funciona, al igual que if-else, las principales razones por las que se usa es ofrecer una alternativa simple de una sola línea. Al mirar este objeto de usuario, posible que deseemos revisar la edad del usuario antes de permitirles entrar. El operador condicional puede ayudar con esto. Se plantea como una pregunta. Aquí te preguntamos si la edad del usuario es mayor o igual a 18 usando el signo de interrogación. Antes, dije que el ternario está conformado por tres partes. La pregunta es solo esta primera parte. Las partes segunda y tercera son lo que queremos hacer si la pregunta es verdadera o falsa. Si es cierto, podemos hacer cualquier cosa pero este sencillo ejemplo solo tiene el texto de enter. Si es falso, que es correcto para este ejemplo, el código después de los dos puntos se ejecutará en su lugar. Ahora vayamos a los archivos de arranque y podemos echar un vistazo al ejemplo dentro de ahí. Aquí tenemos un ejemplo de cómo podemos usar una declaración if para comprobar si un usuario es admin que puede editar algo en nuestro sitio. El objeto de usuario tiene el rol de admin, y actualmente configuramos la funcionalidad CanEdit para que sea igual a false. El enunciado if está comprobando si el rol del usuario, que está justo aquí, es igual a admin. En nuestro caso, podemos establecer la variable CanEdit a true, permitiendo al usuario seguir adelante y publicar algo así como una entrada de blog. De no ser así, CanEdit será igual a false, eliminando cualquier permisos que puedan tener. Lo que vamos a hacer es convertir este ejemplo para hacer uso del operador ternario, que va a simplificar este ejemplo en una sola línea. Al igual que hemos visto en estas diapositivas, la primera parte es realmente hacer la pregunta. La pregunta que queremos hacer es si el user.role es igual a la cadena de admin. Usa un signo de interrogación, seguido de nuestros resultados verdaderos y falsos. Si el usuario es igual a admin, queremos establecer que este CanEdit sea igual a true, igual que lo hacemos en la sección true en la declaración if-else. Establece CanEdit para ser igual a true, luego separado por dos puntos, agregamos la sentencia false donde decimos CanEdit para ser igual a false. A veces dependiendo de la configuración o plugins de tu editor de texto, también puedes ver estas dos declaraciones envueltas dentro de los corchetes. Esto está completamente bien. Lo que quiero hacer ahora es comentar o eliminar las declaraciones if-else originales, y luego podemos guardar esto y pasar al navegador, actualizar, y vemos que este ejemplo se establece en true. Esto es cierto porque el user.role es igual a admin. Pero si cambiamos esto para que sea otra cosa, intentemos suscriptor, debes actualizar esto para que sea el valor de false. También podemos acortar este ejemplo aún más al asignar