¿Qué es el DOM?

Freddy me inspira mucho 💚 💚

Inventemos un juego novedoso de mounstros con poderes y habilidades especiales, y demosle un nombre supercreativo: Mokepon

Los de Pokémon…

Vengo del futuro para recomendarles 2 cosas

La primera: Apartir de aquí no usen las mismas variables, nombres de clases o Id´s que los profesores, esto les ayudara a que comprendan mejor su propio codigo y evitara que solo tomen una especie de dictado.

La segunda: Hagan todos los retos que les sugieran y traten de llegar de distintas formas al mismo resultado que los profesores y adapten los nuevos temas a su propio codigo, esto ayuda bastante a entender mejor los temas.

Adios vaquero.
Estuvo genial todo lo que enseñaste freddy.
Pero estoy seguro que lo que viene va estar Espectacular , Muchas gracias 💚.

📝EL DOM

Las siglas DOM significan Document Object Model, o lo que es lo mismo, la estructura del documento HTML. Una página HTML está formada por múltiples etiquetas HTML, anidadas una dentro de otra, formando un árbol de etiquetas relacionadas entre sí, que se denomina árbol DOM (o simplemente DOM).

Este capitulo me hizo acordar de este meme

Hay que tener cuidado con Nintendo, no perdonan una

Los Emoji pal que aún no los pueda generar (Win + . )

🔥💧🌱

• Para generar una estructura HTML más rápido, has lo siguiente, escribes “html” luego de haber creado el archivo con la extensión html.
  .
  

  

• El que mas se usa es html:5 elige ese.
  .
  

  

• Automáticamente tienes una estructura html ya creada 😄

MOKEPON!! voy a programarloo o o ooo o…
Y por fin aprendeere! (mokepon)
Graaann profesor es, el que te enseñe a programaaarrrr…

(yo quiero ser un programador, mejor que nadie mas!)

![](

“Las grandes cosas las hacen equipos, no individuos” Genial frase 🔥

Freddy oficialmente fue mi primer profesor de programación, encantada con su clase y su manera de enseñar.
Antes de estas clases no sabía absolutamente nada, pero siempre quise aprender y me atreví con este reto.
Muchas gracias, quedo muy motivada a seguir en este enorme y maravilloso mundo que es totalmente nuevo para mí.

Hola aquí les dejo algunos apuntes que he tomado hasta el momento
https://melodious-backpack-257.notion.site/Nuevo-Curso-Gratis-de-Programaci-n-B-sica-d0bcf6a624c449d7904094e7e1e93e77

menos mal que emmet me ayuda

Para crear este andamio básico de HTML5 de forma automática en VS Code puedes escribir:
html:5 + TAB
o también:
! + TAB
.
Si no funciona ninguna de las dos formas prueba con escribir lo mismo pero esta vez le das CTRL + SPACE y luego veras una serie de opciones, suele ser la primera y ENTER 👍

Hola! Dejo por acá el juego de piedra, papel o tijera con botones y otras cosas 😉

Link al código:
https://github.com/alejonaranjo83/ScissorPaper

Gracias Freddy tienes un gran talento para enseñar (y) 😄

Adios vaquero, gracias por las buenas bases, veremos que nos traen de bueno los siguientes compañeros

freddy(crea mokepon)
nintendo:
“lo demanda epicamente B)”

Modelo de Objetos del documento (DOM)
Es la forma que por dentro el navegador estructura las etiquetas html, para que se puedan manipular en código de Javascript.
.
Window:
Es cada una de las pestañas de mi navegador, y es la que detecta que la pagina web cargue.

Document:
Es específicamente lo que esta dentro de la etiqueta html, y podemos encontrar etiquetas como de párrafo, titulo o de botón.
.
Escuchador de eventos: ocurre cuando le damos click al botón.
.

no es un adios, es un hasta luego jejejeje

NOOO porque se va Freeddy
Me voy al curso de hace 5 años de programacion basica

Te extrañaremos Freddy, gracias por tus enseñanzas!!

De los creadores de Pakiman, llega Mokepon 7u7 ❤️

Lo que freddy comenta en el vídeo es el diseño responsivo o web reponsive en inglés. Les dejo un enlace por si quieren ampliar conocimientos sobre este tema. Es del w3schools:

https://www.w3schools.com/css/css_rwd_intro.asp

DOM: El HTML.

Apuntes de la clase:

Glosario:

• DOM Document Object Model

• Window: la ventana del navegador

• Document: el codigo de la pagina.

• event listener: accion que esta lista a recibir y observar acciones del usuario o de un proceso en particular.

• scafolding o andamiaje: codigo htlm base.

muchas gracias sensey Freddy enormemente agradecido…

4:30 - 4:32 jajajajaja. no quiero que me demaaaaanden

Primero Pakiman, luego Mokepon.
¿Qué sigue señores?

Lo que se es que tengo que atraparlos 💪🏻
🔥🌊🟤💨

Y así inicia una gran aventura!
Suerte a todos, y bienvenidos a los nuevos a este fascinante mundo

Excelente curso , volvere a repetir todo de nuevo porque las funciones como que me desconectaron el cerebro. ^^,

en vsc pueden simplemente poner “!” y despues enter y les va a acer la estrucutura basica de html, head, body pero mejor aprendan sela

En mi caso para poder sacar emojis en Linux, tuve que descargarme “emote”, y ponerle el shorcut “ctrl” + “alt” + “e”.

Vi también que habia una extension de gnome para emojis, pero se me dificulto mucho así que opte por esta opcion.

Gracias Freddy por creer en mí, se te echara de menos

porque me dejas freddy ,no me dejesssss!!! xdxd
(la sensación es como tu primer día de kínder , cuando tu mama te deja solo ) asta la otra vaquero .

Las grandes cosas las hacen equipos, no individuos.!!!
.
No bajes el ritmo

Por favor Freddy sigue dando clases! :’(

¡Muchas gracias Freddy! ME GUSTÓ MUCHO TU CLASE ✨

Nintendo automáticamente: que lo demande dice

Gracias profesor Freddy, me voy de ciudad “vagancia” a capturar nuevas ideas con nuevos companeros. Pronto le enviare mis nuevas ideas capturadas. aunque si no tengo a a mikachu tengo a nupander (NUNCA PARES DE APRENDER)
ahi vamos!

mokepon unite xD

Hola muy buenas! Quizás ya muchos lo sepan, pero yo lo tuve que buscar je. PARA PONER EMOJIS SOLO HAY QUE PRESIONAR LA TECLA **WINDOWS + . **(punto)

De nada! Saludos

para los emojis en Mac es Control + Command + Barra espaciadora

Gracias Fred

“Las grandes cosas las hacen equipos, no individuos” 🤩🤩

NOOOOO!
solo por Freddy inicie el curso si lo voy a extrañar banda 😦
si me envicio en este rollo ese hombre

Teoria sobre eventos en Javascript

Necesito alarmas de Freddy cada vez que pierdo la esperanza!!
Qué gran tipo!

Pro Tip: Cuando escriben HTML en visual pueden darle en las opciones para que automáticamente genere el scalfolding

¡¡¡¡¡CABALLEROS DEFENSORES DEL UNICO Y ORIGINAL “PAKIMAN”, PRESENTES!!!
¡¡¡POR CAUCHIN LA VACA, TOCINAURO EL CERDO Y EL POLLO POKACHOOO!!!

Gracias totales Freddy 🔥

Te extrañaremos Freddy!

Equipo Platzi mis felicitaciones, excelentes contenidos. < Son los mejores / >
Att un estudiante mecatronica que recien empieza a descubrir su pasion por la programacion.

Gracias por tanto aprendizaje Sr. Freddy. 💚

¡¡Genial Freddy!! Muchas gracias.

un hack para poner todo el código básico de una vez es poner " ! " y presionar la tecla tab

de grande quiero ser como Freddy Vega.
eses un dios mi Freddy.

si tu en vscode escribes “!” una vez y le das a tab te ase toda la estructura basica de html. intentenlo

No profe 😢🖐🖐

🌼 Gracias por tu enseñanza.

Gracias fred

GRACIAS PROFE!!!

Me encanta que en cada clase nos da un mensaje de superación personal!
💚💚💚 Gracias Freddy

Muchas Gracias gran Sensei Freddy sempai por animarme a seguir cada día con este curso, ya muchos lo han terminado me imagino pero yo apenas estoy arrancando en este maravilloso mundo que cada Día me gusta más.

Casi que no

Creo que el ordenador me está haciendo trampa en el juego de piedra, papel o tijera. No es normal que me gane siempre. La ley de la probabilidad me está dando por culo.

¡Gracias por traernos hasta acá, Freddy!

Modelo de Objetos del Documento (Document Objects Model o DOM) es la forma en la que el navegador estructura las etiquetas HTML para ser manipuladas por código JavaScript.

El navegador es window (las pestañas del navegador).
El código HTML es document (todo lo que esté dentro de los tags HTML).

Un Escuchador de Eventos (EventListener) es cuando un elemento del window o ducument espera a que ocurra un evento para ejecutar una función en JavaScript.

El andamio (Scaffolding) es la estructuración de los elementos básicos en un proyecto de programación, o en este caso, la estructura de una página web.

Para buscar emojis en Ubuntu CTRL+ I

Para generar el formato de html mas rapido hagan lo siguiente: con el documento vacio escriban el signo de exclamacion, seguidamente le dan al TAB

y listo ya se les genera la base

excelente profesor!!!

Gracias amigo nos vermos a la proxima

😭:[ ): PORQUE TE BAS

Me encanta este imperio de la educación ❤️

• tengo un CONSEJO, si pones doc en visual estudio code ya te aparece estructurado el html

gracias freddy me encanto tus explicaciones, logre realizar los procedimientos que mencionas, paso a paso, debido a tus deliciosas explicaciones, sin tener que retroceder muchas veces.

Para ahorrarte un poco de tiempo al escribir siempre todos los títulos y demás, prueba poner ! y aprieta espacio, aparecerá automáticamente la estructura básica de html

las clases estuvieron geniales , ahora me toca repetir todo de nuevo para tenerlo mas claro , poco a poco con la practica se aprende empecé prácticamente desde cero sin tener nociones nada de programación y ahora voy entendiendo muchas cosas gracias Fredy

si ponen un signo de admiración (!) en una linea de código y le dan enter se ahorran tener que escribir el árbol de html.

Al código base se le llama -El andamio-

Dom = modelo de objeto de documento

<p>
<button>Fuego🔥</button>
<p>

button, es un evento (un botón) al que se le puede atribuir una función, este button esta escuchando la señal ya sea un click u otros factores y se dispara y se realiza la función al producirse la señal.

excelentes ejemplos y muy buena forma de enseñar .!!! motivado Full

los emojis ayudan bastante a que se ponga más gráfica/bonita la web

Document Object Model - Es la forma en la que el navegador por dentro estructura las etiquetas de HTML para que las puedas manipular en JavaScript.

El DOM es la estructura de arbol de todas las etiquetas HTML que conforman nuestro sitio web.

Se extrañaran las clases únicas de Freddy

¿Para cuando sale MOKEPON para Nintendo?

wow Freddy, sos brutal!!!
gracias, gracias

LO AMAMOS SEÑOR DON VEGA

Excelente, me encanto la clase!

uy cómo así que hasta acá?..Adiós vaquero, te extrañaré

“heeeeeeerooo sotoniiiii…”

Hace tiempo que no tenia a Freddy como profesor, siempre es un gran placer adquirir conocimiento de alguien que se le nota tanto la pasion como a Freddy, un gran maestro, muchas gracias.

Gracias Freddy!!

DOM es la forma en la que el navegador estructura las etiquetas por dentro para poder manipularlas desde Javascript

Amor por el equipo de Platzi 💕 muchas gracias por este curso

Mis apuntes

• El DOM es especial de JavaScript
• Document Object Model: la forma en la que el navegador estructura las etiquetas html para que las puedas ejecutar en JavaScript.
• Andamio o scaffolding: código básico común para varios proyectos.

Grande Freddy🙌🙌