Condicionales y Loops

El each se deriva de foreach la diferencia del ciclo for es que el for le determinas cuantas vueltas tiene que dar, mientras que el foreach lee la longitud de tu arreglo “titulos” y sabe cuantas vueltas tiene que dar. Es muy comun en PHP o JS

para comentar en pug, crean el comentario en su propia linea y ponen lo siguiente
// comentario : saldra en pug y html
//- comentario : saldra solo en pug

No esta en la clase pero también funciona con objetos, y con lost tipos de declaracion de variables que se utiliza en javascript, let y const

-const user = {nombre: "Nombre de usuario"}

Variable

Loop

Html

No, todavia no me convence Pug, porque ya desde js con React, Vue, Angular o Svelte puedo lograr este comportamiento logico. 🤔

ahora ya vi el poder de pug

Como se haria el menú con enlaces?
Facil, solo tendremos que hacer un array y dentro de el todos los objetos con sus datos.

-var titulo = [{name: "Inicio", url: "./index.html"}, {name: "Biografía", url: "./biography.html"}]

Creamos dos objetos dentro del Array con un nombre y una URL para cada uno. Ahora solo tenemos que crear nuestro menú y llamar los datos de estos objetos, como queremos que se muestren.

nav
            ul
                each val in titulo
                    li
                        a(href=val.url)= val.name 

Loop:

ul
      each title in titles
        li=title

Condicionales:

if user
        a Hello #{user}
      else
        a.boton Registry

Chicos, como un comentario adicional, también es posible recorrer objetos con pug y la sintaxis es esta.

each val, key in items

Esto dependiendo de lo que estén manejando en el template, va permitir mas flexibilidad aun a la hora de crear los documentos.

Pero desde el backend se puede saber si la variable ‘usuario’ existe? Porque si la tenemos que escribir en un html no tiene sentido, porque no la está trayendo desde una base de datos.

En clases anteriores vi gente que no le convence pug, pero esto es lo que yo sentía que me faltaba desde que estoy usando html.

Condicionales

Loops

me esta empezando a gustar pug al principio pense que no era necesario, menos mal q le di una oportunidad

Si para explicar como funciona el loop lo hacen con una lista menú, deberían explicar como asignar el <a> y su respectiva URL a esos li, porque queda uno a medias.

Even if you set the variable usuario to “” the validations still works

Nooooo Maaaaaaaammmmssss ifs en HTML???! I´m sold. Shut up and take my money.

Un condicional nos permite evaluar cierta condición y bifurcar entre dos caminos dependiendo de si se cumple o no.

-var usuario = "David"

pug:
h1 PlatziGames
if usuario
				a Hola #{usuario}
			else
				a.boton Registro

HTML:
	<h1>PlatziGames</h1><a>Hola David</a>

Pero si la variable usuario no esta declarada se pintaría solo el botón de registro

pug:
h1 PlatziGames
if usuario
				a Hola #{usuario}
			else
				a.boton Registro

HTML:
	<h1>PlatziGames</h1><a>Resgistro</a>

Un loop es un fragmento de código que va a ejecutar de forma repetitiva hasta que cumpla una condición.

Se declara con each se crea una variable donde se van a guardar los datos recorridos de un arreglo que traemos ejemplo:

Pug:
-var titulo ="Titulo principal"
-var titulos = ["titulo Principal", "subtitulo 1", "subtitulo 2", "subtitulo 3"]

ul 
			each titulo in titulos <!--titulos es el arreglo(array) que recorremos con each-->
				li=titulo <!--titulo es la variable donde se guarda el arrglo(array) recorrido-->

HTML:
	<ul> 
      <li>titulo Principal</li>
      <li>subtitulo 1</li>
      <li>subtitulo 2</li>
      <li>subtitulo 3</li>
    </ul>
	

como trabajar con js y pug?

Apuntes
Sintaxis de los loops
ul
each item in titulos
li=item

Condición IF
if usuario
a.boton Hola #{usuario}
else
a.boton Registrarse

muy útil e intuitivo

La estructura me recuerda mucho al desarrollo en polymer

Ok ya estoy entendiendo el poder de PUG aahahahaha muy interesante.

Pero que interesante es Pug

En h2 borre el [1] y logré ver el título. Antes solo estaba una |
section.intro
.intro__imagen: img(src=“images/imagen.png”)
.intro__contenido
h2 #{titulos[0]}

Un condicional nos permite evaluar cierta condición y bifurcar entre dos caminos dependiendo de si se cumple o no.

Un loop es un fragmento de código que va a ejecutar de forma repetitiva hasta que cumpla una condición.

En lo persona no me convence usar PUG en HTML

Condicionales

Un condicional nos permite evaluar cierta condición y bifurcar entre dos caminos dependiendo de si se cumple o no.

Ventajas:
Evitan duplicación de código innecesario o dan una mejor solución.

Para crear la condicional se declara y se asigna la variable en la parte superior.

-var usuario = “Katana”

luego en el bloque de código que deseemos crear el cambio por el condicional:

header
 h1 PlatziGames
 if usuario
  a Hola #{usuario}
 else
 a.boton Registro

La lógica es:
If (si) Usuario (variable existe, esto pasa cuando se registra la persona) imprimir su nombre en vez del botón de registro,
Else (si no) (imprimir botón de registro.)

**Loops **
Un loop es un fragmento de código que va a ejecutar de forma repetitiva hasta que cumpla una condición.

En pug, los loops son herramientas que nos ayudan a imprimir código de manera automática, tomando como base la información del arreglo instanciado previamente e imprimiendo sus datos en una no ordenada.

• ¿Cómo se declara un loop en pug?

Vas al bloque donde lo requieres, lo indentas al nivel de los div (para este ejercicio) o dónde lo requieras, y lo instancias así:

1. Primero la lista no ordenada y luego el Loop o ciclo.

ul
   each variable in variables
      li=variableInstanciadaPreviamente

ul
each titulo in titulos
li=titulo

Como resultado se imprime la lista no ordenada en el html:

<ul> 
        <li>Título Principal</li>
        <li>Sub-Titulo 1</li>
        <li>Sub-Titulo 2</li>
        <li>Sub-Titulo 3</li>
      </ul>

También puedes aplicar lo aprendido en clases anteriores llamando la variable así:

ul 
  each titulo in titulos 
		li #{titulo}

Loop

Me alegra haber llegado hasta aquí, sin duda es muy importante aprender sobre los preprocesadores.

muy interesante en cuanto a los loops

PUG = php en front xD

En las condicionales tambien lo pueden validar contra un dato, ejemplo

if usuario == 'Valor’
a Hola #{usuario}
else
a.boton Registrarme

Ya le estoy agarrando cariño a pug

13.-Condicionales y Loops.

Loops

Los loops nos permite correr un pedazo de código hasta que una condición sea alcanzada. Se usan mucho en listas o menus porque son partes que tienen bastante contenido que se “repite”.

Esto le dice a pug que estamos creando un loop, se crea una variable provisional donde vamos a meter los valores del loop, luego se especifica de donde se van a sacar los datos. Después le decimos donde vamos a poner ese loop. Todo esto es muy similar a cualquier for que hayamos visto antes en otro lenguaje de programación.

El each se deriva de foreach la diferencia del ciclo for es que el for le determinas cuantas vueltas tiene que dar, mientras que el foreach lee la longitud de tu arreglo “títulos” y sabe cuantas vueltas tiene que dar.

Condiconales

Son parecidos al loop, se ejecutan si se cumple una condición. Por ejemplo en el caso de esta página se puede tener dos versiones de la página, una para los que están registrados y otra para los que no; para esto podemos usar las condicionales, lo que nos ahorra de crear la misma página otra vez.

Si existe el usuario entonces dale ese mensaje de bienvenida, si no existe añade un botón de registro.

😮 Increible, cada dia me esta gustando mas los Preprocesadores ufff esto ahorra mucho tiempo

Un detalle, los arrays de variables tienen que ser en una misma línea, de lo contrario pug genera un error de compilación, el cual no explica claramente.

13. Condicionales y Loops:

Les comparto el código de la clase:

Código pug:

-var titulo = "Titulo Principal";
-var titulos = ["Título Principal", "Subtítulo 1", "Subtítulo 2", "Subtítulo 3"];
//-var usuario = "David";
doctype html
html
    head
        meta(charset="UTF-8")
        link(rel="stylesheet", href="../css/ejercicio-pug.css")
    body
        header
            h1 PlatziGames
            if usuario
                a Hola #{usuario}
            else
                a.boton Registro
        section.intro
            .intro__imagen: img(src="../images/imagen.png")
            .intro__contenido
                h2 #{titulos[0]}
                p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias quos veritatis eligendi? Ex maiores rerum exercitationem consectetur, porro eaque culpa quisquam labore
                 span debitis ab esse doloremque, dolor odio unde tempora.
                a.boton Leer más
        ul
            each titulo in titulos
                li=titulo

me salen los ejercicios pero la lista no obtiene ningun estilo , no tendria que agregarle una clase tambien?

loop each en pug: por cada propiedad en el objeto, voy a obtener un elemento

Pug soporta dos metodos para iterar: “each” y “while”

Loops en pug

Un loop es una manera en la que nosotros podemos hacer que un bloque de codigo se ejecuta ciertas veces. El loop que se mostro en la clase es el famosísimo for loop, la manera de usarlo es muy amigable y muy “human-friendly”. Se hace de la siguiente manera:

ul
  each item in my_array
    li #{item}

Aqui lo que paso es que por cada “item” dentro del array my_array, voy a tener una etiqueta li que el contenido va a ser el “item”.
.

Condicionales en pug

Los condicionales nos ayudan a hacer el proposito por el cual pug fue creado en primer lugar: Hacer el trabajo mas fácil y reutilizar código. En este caso vamos a tener un condicional if statement, en donde vamos a ver si el usuario ya esta registrado. Si si, entonces vamos a poner su nombre en el header, si no, vamos a poner un botón para que se registre. Esto se hace de la siguiente manera:

-var usuario = "David" //Este es opcional, puede estar declarada esta variable o no
if usuario 
  a Hola #{usuario}
else
  a.boton Regístrate

Muy facil, si ya sabes algo de JS, esto es mucho mas sencillo de entender

asuuu me encantó pug

Poco a poco me convence pug, simplifica muchas cosas y la sintaxis no es complicada para nada, tiene mucha lógica

¿Cómo podemos iniciar el condicional en falso?

n

Condicionales y Loops

-var titulo = "Titulo Principal"
-var titulos = ["Titulo Principal", "Subtitulo1","Subtitulo2","Subtitulo3"]
-var usuario = "Fede"
doctype html
html
  head
    meta(charset="UTF-8")
    link(rel="stylesheet", href='css/ejercicio_pug.css')
  body
    header
      h1 PlatziGames
      if usuario
        a Hola #{usuario}
      else
        a.boton Registro
    section.intro
      .intro__imagen: img(src="images/imagen.png")
      .intro__contenido
        h2 #{titulos[0]}
        p
          | Lorem ipsum dolor sit amet consectetur adipisicing elit. 
          | Unde nobis distinctio maxime praesentium sit animi ad saepe 
          | sapiente ipsam veniam voluptatibus nihil, corporis temporibus 
          | consequatur libero! Consequuntur impedit excepturi distinctio!
          span Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, consequuntur.
        a.boton Leer Más
    //De essta manera se cre un loop
    ul
      each titulo in titulos
        li=titulo

Yo que creía que html sólo era para maquetación

En el loop no necesariamente tiene que estar creada la variable “titulo”.

Loop

<ul
			each titulo in titulos
				li=titulo>

Condicionales

<if usuario
				a hola #{usuario}
			else
				a.boton Registro>

Es un buen ejemplo, sin embargo, es en JS que se trabaja mejor con este tipo de código.

excelente clase

Jamás creí que vería condicionales y loops en html 😮

Una vez leí un comentario que preguntaba si era necesario aprender a programar para dedicarte al desarrollo frontend, le respondieron que no es fundamental pero sí recomendable, hoy en día entiendo a qué se refería. Saber las estructuras de control y cíclicas, entre otras cosas, ayudan mucho en estos casos porque te resulta familiar

Vale, realmente no pensé que en Fronte a parte de js se fuera a utilizar condicionales, increible

Increible!

Pug ==> PSD to HTML

Me está encantando 😉
Excelente clase.

Recordando algo que muchos fallamos cuando estamos aprendiendo y es que - significa que estamos trabajando con JavaScript. Por lo tanto JavaScript tiene su propio if condicional pero PUG también tiene condicionales usando su propia sintaxis, no necesitas recurrir a JavaScript y no necesitas el - ni los paréntesis().

Muy interesante! 😄 me gusta!

Mmm poco a poco me esta convenciendo un poco camiarme a pug

Arreglo de arreglos, arreglo de objetos y objeto de objetos.

No sé uds pero estoy amando este curso

excelente clase, muy interesante los condicionales, espero lo apliquemos en el proyecto!

Se siente como usar Python para que imprima un HTML. Pero parece que pug no permite usar el ciclo for, únicamente permita los ciclos each y while. Como lo dice en su documentación.
https://pugjs.org/language/iteration.html

Que super esta clase, me gusto mucho lo que se puede lograr hacer con el todopoderoso HTML

uff me ha gustado bastante esta clase, buena info 💥✌

Wow me esta encantando las características que ofrece este preprocesador todavía no se como las voy a usar pero esta genial es como programar en HTML

Increible el curso hasta donde va , me está encantando el desarrollo front end

Wow, con esta clase me explotó la cabeza!

Waooo yo porque no conoci los preprocesadores antes ajajajajaj 🤣🤣

Esta clase fue una explosión gigante de felicidad, creo que estos procesadores son muy pero muy buenos, obviamente al comenzar y hacer proyectos debe ser un dolor de cabeza pero como todo, practica y practica.