A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Condicionales y Loops

13/42
Recursos

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.

Aportes 72

Preguntas 21

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸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 鈥渢itulos鈥 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 鈥榰suario鈥 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=鈥渋mages/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 = 鈥淜atana鈥

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 鈥渞epite鈥.

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 鈥渢铆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: 鈥渆ach鈥 y 鈥渨hile鈥

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 鈥渉uman-friendly鈥. Se hace de la siguiente manera:

ul
  each item in my_array
    li #{item}

Aqui lo que paso es que por cada 鈥渋tem鈥 dentro del array my_array, voy a tener una etiqueta li que el contenido va a ser el 鈥渋tem鈥.
.

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 鈥渢itulo鈥.

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.