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
Chris Dixon, Web Developer & Online Teacher
