Empieza por ac谩

1

Mi primera l铆nea de c贸digo

Fundamentos de Programaci贸n

2

驴Qu茅 es HTML/CSS/JS?

3

JavaScript no es Java

4

Primeros pasos en el navegador con alert

5

HTML, CSS, JavaScript de verdad

6

Los apuntes de Freddy en PDF

Primer proyecto: Peso en otro planeta

7

Peso en otro planeta

8

Obteniendo datos del usuario

9

Flujo y condicionales

Segundo proyecto: Dibujando con Canvas

10

C贸mo funcionan Window y Document

11

El DOM: nuestro lugar de trabajo en la web

12

Dibujando en el DOM

13

Qu茅 son las Funciones en JavaScript

14

Ciclos while y for en JavaScript

15

Eventos y Formularios en HTML y JavaScript

16

Detectar eventos del teclado con JavaScript

17

Dibujar en canvas con las flechas del teclado

Tercer proyecto: Villa platzi

18

Funciones matem谩ticas y n煤meros aleatorios en JavaScript

19

Uso y carga de im谩genes en Canvas

Cuarto proyecto: Pakimanes

20

Divisi贸n, m贸dulo y residuo en JavaScript

21

Clases y Arrays en JavaScript

Quinto proyecto: Cajero autom谩tico

22

Diagrama de Flujo del Cajero Autom谩tico

23

Implementaci贸n del Cajero Autom谩tico

Sexto proyecto: Cliente/Servidor

24

Primer servidor web con express

25

Modelo Cliente/Servidor

Programaci贸n de Hardware y Electr贸nica con Arduino

26

驴C贸mo funciona un circuito electr贸nico?

27

驴C贸mo programar un Arduino?

28

Programaci贸n de circuitos con C, Arduino y Sketch

29

C贸mo programar un Arduino con Javascript y Node

30

Construye un Robot con JavaScript

31

Robot para riego de plantas en Arduino, Javascript y Node

Materiales de apoyo

32

Las mejores notas de los estudiantes

33

驴Cu谩l lenguaje de programaci贸n aprender primero?

34

La Web con Visi贸n Profesional

Contenido Bonus

35

Qu茅 son tablas de verdad y compuertas l贸gicas

Recap Curso Gratis de Programaci贸n B谩sica

36

Recap Programaci贸n b谩sica

37

Recap Programaci贸n b谩sica ENG

A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

El DOM: nuestro lugar de trabajo en la web

11/37
Recursos

DOM (Document Object Model): Es la forma en la que el navegador internamente organiza todo nuestro HTML dentro de una estructura especial (tipo 谩rbol), con la cual podremos manejar f谩cilmente nuestra aplicaci贸n web mediante JavaScript.

En programaci贸n existen objetos, estos son como envolturas para c贸digo, el navegador tiene algunos objetos nativos c贸mo:

navigator:

El objeto que contiene las funciones del navegador, tambi茅n te permite acceder al sistema operativo como el GPS, guardar datos en el disco duro, etc.

window:

El objeto que maneja cada una de las pesta帽as.

document:

El objeto que contiene todo lo que vemos dentro de nuestra p谩gina.

Aporte creado por: Gustavo Franco

Aportes 1304

Preguntas 90

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

鉁 El DOM tambi茅n es aplicable en documentos XML.

Document Object model:
Estructura de organizaci贸n de la pagina web (documento) -> 谩rbol de estructuraci贸n de datos

solo en 10 % de los que iniciaron llegaran a la clase 32
**solo el 7 % ** se tomaran este curso enserio
**el 5% ** har谩n apuntes
el 3 % entender谩n q est谩n a punto de cambiar sus vidas y las cambiaran haciendo todo lo anterior usaran este conocimiento para rentabilizarlo subscribiese y construir algo Genial y solo el 1% leeran y rt

Mis apuntes. Espero les sirvan 馃槃

quiero besarle el cerebro a freddy, bai

Apuntes de Clase

  • Objetos => Son nombres especiales que tienen por dentro funciones, atributos, variables etc.
    鈥 Partes de una Web鈥

  • Document => Se trata de todo el contenido de la p谩gina, creada por el programador,

  • Window => lo compone cada pesta帽a abierta dentro del navegador, se puede acceder a sus propiedades con window.

  • Navigator => Lo compone el navegador en si, posee varias funciones interesantes como el poder acceder a los discos duros del usuario, utiliza la funci贸n GPS presente en los smartphones, tablets, laptops(a trav茅s del wifi) y otros.

  • DOM (Document Object Model) => Entiendo como la manera en que el navegador (Sea Firefox, Chrome, Explorer Etc.) organiza internamente el archivo HTML solicitado, dentro de un estructura que nos permite manejarlo desde JS,

  • Tambi茅n crea internamente un 谩rbol de estructura de datos

soy el unico que escucho ese grito putabida de fondo en el 5:30?

En programaci贸n web existen 3 objetos nativos:

  1. navigator
  2. window
  3. document
    En programaci贸n un OBJETO es una abstracci贸n y se compone de atributos y m茅todos. An谩logamente, en el mundo f铆sico existen objetos, por ejemplo una pelota, que tiene atributos como su di脿metro o su color y t铆ene m茅todos como: el c谩lculo de su volumen en funci贸n de su di谩metro o el proceso de quitarle o llenarle de aire.

El Document Object Model (DOM) hace referencia a la estructura jer谩quica de las etiquetas de nuestro documento html.
Tiene atributos como:

document.body

Tiene m茅todos como:

document.write("Texto a escribir")
document.getElementById("Identificador_del_elemento")

Objetos nativos del navegador:

navigator: Firefox, Opera, Safari+Puede acceder al H.D. del usuario / Local storage
+Puede acceder al GPS
+Acceder a cosas especiales del navegador y el S.O.
+Sirve para una App que guarde datos en H.D. y acceda a GPS

window: Maneja los tabs (ventanas, pesta帽as)
+Para ventanas flotantes sin barras de navegaci贸n
+Bot贸n abrir / cerrar ventanas
+Evento: Alerta, tiene cosas abiertas, seguro quiere cerrar

document: Tiene cada elemento de la p谩gina web
+Controla internamente donde est谩n im谩genes, formularios, objetos visuales, t铆tulos, cajas de texto.

Document Object Model -DOM- Modelo de Objetos del Documento
La estructura en 谩rbol como internamente el navegador organiza el HTML, que con JS se puede sin problema manejar la App. Nos sirve para entender como funcionan los objetos internos del navegador, su utilidad.

Estoy enamorado de como ense帽a Freddy, en Platzi hay pocos profesores malos, pero es que Freddy deja la vara alta鈥 Dan ganas de seguir aprendiendo.

Hola. Hice el programa para todos los planetas. Agregu茅 una variable (verificador) para poder agregar un mensaje en caso de que introduzcan otro valor distinto al de los planetas. Por fin estoy programando, estoy feliz!!!

<!DOCTYPE html>
<html>
<head>
<title>Tu peso planetario</title>
</head>
<body>
<h1>Tu peso en otro plantera</h1>
<p>En la Tierra pesas distinto que en los dem谩s planetas del Sistema Solar</p>
<script>
var usuario = prompt("驴Cu谩l es tu peso? 鈥);
var planeta = prompt(鈥淓lige tu planteta, 1 es Marte y 2 es J煤piter, 3 es Saturno, 4 es Neptuno, 5 es Mercurio, 6 es Venus y 7 es Urano鈥);
var peso = parseInt(usuario);
var g_tierra = 9.8;
var g_marte = 3.7;
var g_jupiter = 24.8;
var g_saturno = 10.5;
var g_neptuno = 11.1;
var g_mercurio = 3.1;
var g_venus = 8.1;
var g_urano = 8.9;
var peso_final;
var verificador = false;
var nombre;
if (planeta == 1)
{
peso_final = peso * g_marte / g_tierra;
nombre = 鈥淢arte鈥;
verificador = true;
}
else if (planeta == 2)
{
peso_final = peso * g_jupiter / g_tierra;
nombre = 鈥淛煤piter鈥;
verificador = true;
}
else if (planeta == 3)
{
peso_final = peso * g_jupiterg_saturno / g_tierra;
nombre = 鈥淪aturno鈥;
verificador = true;
}
else if (planeta == 4)
{
peso_final = peso * g_neptuno / g_tierra;
nombre = 鈥淣eptuno鈥;
verificador = true;
}
else if (planeta == 5)
{
peso_final = peso * g_mercurio / g_tierra;
nombre = 鈥淢ercurio鈥;
verificador = true;
}
else if (planeta == 6)
{
peso_final = peso * g_venus / g_tierra;
nombre = 鈥淰enus鈥;
verificador = true;
}
else if (planeta == 7)
{
peso_final = peso * g_urano / g_tierra;
nombre = 鈥淯rano鈥;
verificador = true;
}
if (verificador ==true)
{
peso_final = parseInt(peso_final);
document.write(鈥淭u peso en " + nombre +鈥 es <strong>鈥 + peso_final + " kilos </strong>");
}
else
{
document.write(鈥淭u eres de otro sistema planetario鈥);
}
</script>
</body>
</html>

Freddy hace que esto de aprender programaci贸n sea muy f谩cil, todo lo contrario ha profesores que he tenido en la universidad.

Una peque帽a etiqueta meta, pero muy 煤til, que va dentro de 鈥楬ead鈥 es la siguiente:

<meta charset="utf-8">

Para que en nuestro sitio web se vean correctamente los caracteres especiales como el acento ( 麓 ).

APUNTES DE LA CLASE
Document Object Model = DOM
DOM Es la forma como el ordenador internamente, y lo organiza dentro de una estructura especial.
estandar de HTML-5
<Doctype html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Los objetos son nombres especiales que tienen, funciones , atributos, variables, etc.
Los objetos nativos del navegador son:
navigator Contiene las funciones del navegador y permite acceder a aplicaciones del sistema operativo.
Pueden acceder a GPS
Accseso del navegador y del sistema operativo
Window Maneja ventanas del sistema y las pesta帽as. Se relaciona con los eventos
Document El objeto que contiene todo lo que vemos en la pagina, controla las ubicaciones de los elementos visuales.

Un objeto son nombres especiales que contienen: Variables / Funciones / Atributos, etc.

Objetos nativos del navegador - Acceder a las propiedades usando las palabras dentro de JavaScript:

  • Navigator: /objeto/ Nos da acceso a las caracter铆sticas especiales del Navegador y del Sistema Operativo.

  • Window: /objeto/ Maneja cada una de las ventanas o pesta帽as de los navegadores.

  • Document: /objeto/ Contiene cada uno de los elementos visuales que compone la p谩gina.

Concepto: Document Objetc Model o DOM
La forma en la que el navegador organiza el HTML dentro de una estructura especial = 脕rbol de datos estructurados. // Nos ayuda manejar sin problemas las aplicaciones Web, para saber c贸mo es su estructura y encontrar lo que se necesita.

Me siento emocionado de lo que estoy aprendiendo en este curso y cada vez me gusta mas!!!

<html lang=鈥渆n鈥 dir=鈥渓tr鈥>
<head>
<title>Curso de Platzi</title>
</head>
<body>
<p>Exitos Para Todos</p>
</body>
</html>

<html>
<head>
<title></title>
</head>
<body>
<h1></h1>
<p></p>
<script></script>
</body>
</html>

DOM (Document Object Model):
Es la forma en la que internamente el navegador organiza todo el HTML dentro de una estructura especial, a traves de la cual, se puede manejar la aplicacion web mediante javascript. Tambien, crea un 鈥渁rbol鈥 de como los datos estan estructurados internamente (en el codigo). El arbol se conoce como Document Object Model

鈥 Navigator: Navegador
鈥 Window: Tabs/Pesta帽as
鈥 Document: Pagina
鈥 Document Object Model: Forma que usa el navegador para organizar el Document.

Arbol es el Document objetc model.
La estructura gr谩fica de tu codigo
Html, es la raiz del codigo.

He intentado varios 鈥渃ursos online鈥 pero las formas de explicar me parecen monotonas y aburridas, sin embargo, Freddy Vega tiene una forma peculiar de ense帽ar y me parece genial

El Modelo de Objetos del Documento (DOM)
En programaci贸n existen objetos, estos son como envolturas para c贸digo, el navegador tiene algunos nativos c贸mo:

navigator: El objeto que contiene las funciones del navegador, tambi茅n te permite acceder tambi茅n al sistema operativo como el gps, guardar datos en el disco duro, etc.

window: El objeto que maneja cada una de las pesta帽as.

document: El objeto que contiene todo lo que vemos dentro de nuestra p谩gina

En aplicaciones web tenemos un concepto llamado DOM (Document Object Model) es la forma en que internamente el navegador organiza todo el HTML dentro de una estructura de 谩rbol

Objeto:
Se trata de un ente abstracto usado en programaci贸n que permite separar los diferentes componentes de un programa, simplificando as铆 su elaboraci贸n, depuraci贸n y posteriores mejoras.

Hasta hoy me vine a dar cuenta que cuando Freddy dijo:
Seguro que como buena persona tienes abierto CARELIBRO
no es m谩s que un MEME a facebook.
!!!Dios m铆o que torpe!!!

Nada mejor que comenzar con lo b谩sico, para tener una buena base.

Apuntes de clase:
En programacion los objetos son: envolturas para codigo, el navegador tiene algunos nativos como:
navigator: El objeto que contiene las funciones del navegador, tambien permite acceder al sistema operativo para manejar el gps o guardar datos en el disco duro, etc.
window: El objeto que maneja cada una de las pesta帽as.
document: El objeto que contiene todo lo que vemos dentro de nuestra pagina.
//
En aplicaciones web tenemos un concepto llamado DOM(Document Object Model) es la forma en que internamente el navegador organiza todo el HTML dentro de una estructura de arbol.

La estructura de arbol es importante porque esa es la forma en que a traves de JavaScript vamos a recorrer un objeto. Teniendo el arbol del HTML en la mente podemos modificar cosas utilizando JavaScript.

para los que no sepan (como yo hace dos minutos), el 鈥渃arelibro鈥 vendria siendo facebook:
face = cara
book = libro
facebook == carelibro

鈥婱anipulaci贸n de objetos en paginas web
Navegador(navigator) > tab(window) > contenido, (document)

  • navigator: Capacidades del navegador y del sistema operativo
  • window: cada pesta帽a, abrirlas o cerrarlas
  • document: cada elemento de la pagina

En programacion existen los objetos que son basicamente envoltura de codigo

Dentro del navegador existen diferentes objetos que generalmente estan estructurados en arbol tales como:

- Navegador 
	- Tabs(pesta帽as en js se le conoce con el 					nombre de window) 
		- Formulario 
		- Cajas de texto 
		- Botones 
		- Etc. 

En javascript se pueden acceder a todas las propiedades/eventos de los objetos mencionados a traves de lo que se conoce como los objetos nativos del navegador que son nombres de los objetos internos que el navegador tiene para referirse a si mismos. Y son los siguientes:

- Al objeto que representa el archivo html que 	nosotros creamos se le conoce en js como document que es practicamente todo lo que se ve. 

- A Las pesta帽as se les conoce como window 

- El navegador entero recibe el nombre de navigator 

Del document nace el concepto DOM(Document Object Model) que es la forma en como el navegador organiza nuestro html dentro de una estructura de arbol.

Ej:

<html> 
	<head> 
		<title>...</title> 
		<style>鈥</style> 
	</head> 
	<body> 
		<h1>鈥</h1> 
		<p>鈥<strong>...</strong>...</p> 
		<script> 
		</script> 
	</body> 
</html> 

Objetos: Nombres especiales que contienen dentro funciones, atributos, variables, etc.
Objetos nativos del navegado.
Todo el contenido del navegador que nosotros vemos se llama 鈥渄ocument鈥 en JavaScript y cada una de las pesta帽as JS lo llama 鈥渨indow鈥 y se puede acceder a las propiedades usando esas palabras, para acceder a las opciones del navegador se accede con la palabra 鈥渄avigator鈥, estos son nombres de objetos internemos del navegador, para acceder al disco duro del usuario se utiliza el objeto 鈥渓ocalstorage鈥.
Documento Object Model: Es la forma en la que en navegador organiza todo el HTML, este tambi茅n crea internamente un 谩rbol de como los datos est谩n estructurados.
Se tiene que tener el mente el 谩rbol para saber que etiquetas recorrer cuando se este utilizando JavaScript y as铆 encontrar el objeto correcto.
Documento Object Model se conoce como 谩rbol del navegador.

Objetos: es una manera de 鈥渆mpaquetar鈥 la informaci贸n (propiedades, par谩metros, atributos) en software, son fundamentales en ciertos paradigmas de programaci贸n. JavaScript es capaz trabajar con los objetos nativos del navegador, los 3 principales son:
Navigator: Acceso al sistema
Window: Las pesta帽as del navegador
Document: Contiene todos los elementos con los que interact煤a el usuario en un html organizados en un DOM
El Document Object Model (DOM) es un concepto que estructura todos los elementos de un html. Sus propiedades incluyen un 鈥溍bol鈥 que ordena jer谩rquicamente dichos elementos del html. Es importante saber interpretar este 鈥溍bol鈥 del DOM para poder manipular los objetos de una p谩gina web.

Les comparto lo que entendi:
-Los Objetos son como contenedores de varios atributos, como funciones, variables y dem谩s. Los objetos que tienen los navegadores son tres:
-Navigator.- Que permite el acceso al sistema operativo y a
funciones especiales del navegador.
-Window.- Gestiona las ventanas del navegador.
-Document.- Es la que maneja la representaci贸n visual del
documento html.
Del document se desprende el concepto de Document Object Model (DOM), que trata de la organizacion del archivo html, dandole una estructura, que para su comprension se la puede visualizar como un diagrama de arbol.

Es molesto que siempre salga el nombre del profesor

Me gusta mucho el curso, r谩pido, accesible, lo voy siguiendo aunque aprend铆 de programaci贸n en html, css y javascript a mis 11 a帽os de edad, ahora tengo 19鈥
Me gusta porque hay pr谩cticas de las cuales me encantaron, como el algoritmo para saber cu谩l es tu peso en otro planeta, haha saludos profesor Freddy, un gusto.

DOM (Document Object Model) como el navegador organiza el HTML dentro de una estructura de 谩rbol.

cuando dijo 鈥渃arelibro鈥 inmediatamente fui a buscarlo porque pense que ser铆a una pagina interesante, y me re铆 mucho al ver que la primera pagina que sali贸 fue facebook, me sent铆 muy est煤pido por no haber entendido el chiste XD

Excelente Freddy!
Consulto: 驴Alguien tuvo experiencia aprendiendo con Digital House? Gracias!

que me dicen de este diagrama chicos? si esta bien?

Hice este programa espero que les guste:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registro pokemon</title>
</head>
<body>
    <h1>Programa para registrar unos Pokemones</h1>
    <script>
    var pokemones = [];
var pokemonAgregado;
document.write("<h2>En estos momentos no posees ningun pokemon</h2><br>");
var respuesta = prompt('Deseas agregar algun pokemon?');

while (respuesta === "si" | respuesta === "SI" | respuesta === "Si" | respuesta === "S铆" | respuesta === "s铆") {
  pokemonAgregado = prompt('A quien agregarias?');
  pokemones.push(pokemonAgregado);
  console.log('Has agregado a ' + pokemonAgregado + 'satisfactoriamente' );
 
  respuesta = prompt('Deseas agregar algun otro pokemon?');
}

for (let i = 0; i < pokemones.length; i++) {
   document.write("Tu pokemon #" + (i+1) + " es " + pokemones[i] + "<br>");
}
document.write("Has agregado a " + pokemones);
    </script>
</body>
</html>                
<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Peso en otro planeta</title>
  </head>
  <body>
      <h1>Tu peso en otro planeta</h1>
      <p>En la tierra pesas distinto que en cualquier otro planeta</p>
      <script>
        var usuario = prompt("Cual es tu peso?")
        var planeta = parseInt (prompt("Elige el planeta a consultar. \n 1. Jupiter, 2. Luna, 3. Marte, 4. Mercurio, 5. Neptuno, 6. Saturno, 7. Urano y 8. Venus"));
        var peso = parseFloat(usuario);
        var g_tierra = 9.8;
        var g_marte = 3.7;
        var g_jupiter = 24.8;
        var g_mercurio = 3.7;
        var g_venus = 8.87;
        var g_luna = 1.62;
        var g_saturno = 10.44;
        var g_urano = 8.7;
        var g_neptuno = 11.15;
        var peso_final;
        var planeta_elejido;

        if (planeta == 1)
         {
          peso_final = peso * g_jupiter / g_tierra;
          peso_final = (peso_final.toFixed(2));
          planeta_elejido = "Jupiter";
          document.write("Tu peso en Jupiter es <strong>" + peso_final + " KG </strong>");
          }

          else if (planeta == 2)

           {
             peso_final = peso * g_luna / g_tierra;
             peso_final = (peso_final.toFixed(2));
             planeta_elejido = "Luna";
             document.write("Tu peso en la Luna es <strong>" + peso_final + " KG </strong>");
           }

           else if (planeta == 3)

            {
              peso_final = peso * g_marte / g_tierra;
              peso_final = (peso_final.toFixed(2));
              planeta_elejido = "Marte";
              document.write("Tu peso en Marte es <strong>" + peso_final + " KG </strong>");
            }
            else if (planeta == 4)

             {
               peso_final = peso * g_mercurio / g_tierra;
               peso_final = (peso_final.toFixed(2));
               planeta_elejido = "Mercurio";
               document.write("Tu peso en Mercurio es <strong>" + peso_final + " KG </strong>");
             }
             else if (planeta == 5)

              {
                peso_final = peso * g_neptuno / g_tierra;
                peso_final = (peso_final.toFixed(2));
                planeta_elejido = "Neptuno";
                document.write("Tu peso en Neptuno es <strong>" + peso_final + " KG </strong>");
              }
              else if (planeta == 6)

               {
                 peso_final = peso * g_saturno / g_tierra;
                 peso_final = (peso_final.toFixed(2));
                 planeta_elejido = "Saturno";
                 document.write("Tu peso en Saturno es <strong>" + peso_final + " KG </strong>");
               }
               else if (planeta == 7)

                {
                  peso_final = peso * g_urano / g_tierra;
                  peso_final = (peso_final.toFixed(2));
                  planeta_elejido = "Urano";
                  document.write("Tu peso en Urano es <strong>" + peso_final + " KG </strong>");
                }
                else if (planeta == 8)

                 {
                   peso_final = peso * g_venus / g_tierra;
                   peso_final = (peso_final.toFixed(2));
                   planeta_elejido = "Venus";
                   document.write("Tu peso en Venus es <strong>" + peso_final + " KG </strong>");
                 }

                 else {

                   peso_final = 0;
                   document.write("Ese planeta fue eliminado por <strong>Thanos</strong> "  + " Lo siento.");
                 }



      </script>
  </body>
</html>



aqui mi granito de arena

En conclusion, el navegador posee objetos nativos, entre ellos se encuentran

- Navigator: Contiene las funciones del navegador y puede acceder al sistema operativo y realzar algunas acciones en el. Puede guardar datos mediante el 鈥渓ocalStorage鈥, el cual proporciona metodos y protocolos para almacenar la informacion del lado del cliente. Ademas, puede acceder al GPS del equipo (en laptops se accede al GPS mediante la tarjeta inalambrica).

- Window: Controla las pesta帽as del navegador e incluso abrir una nueva ventana. Tambien, puede arrojar mensajes de alerta.

- Document: Contiene cada uno de los elementos de la pagina/aplicacion web (documento). Controla internamente todo el contenido del documento.

Mis notas

Los objetos son como elementos que almacenan c贸digo

El mas importante para el curso es DOM (Docuemnt Object Model), se encarga de organizar toda la informacion HTML en el navegador , en forma de estructura de arbol, ya que JS recorre asi los objetos, en forma de arbol.

Aporte de clase:
En programaci贸n existen objetos, los objetos son como capas para el c贸digo que tienen varios atributos, en el navegador principalmente tenemos algunos nativos, estos son:
Navigator: Este objeto contiene las funciones del navegador, nos permite acceder al sistema operativo, al gps y guardar datos en el disco duro.
Window: Gestiona y maneja cada una de las pesta帽as.
Document: Maneja la representaci贸n visual, contiene todo lo que podemos ver dentro de nuestra p谩gina.
De este ultimo se desprende un concepto llamado DOM (Document Objetc Model), se encarga internamente de estructurar todo nuestro HTML dentro de un diagrama o estructura de 谩rbol

Highlights;

  1. Los objetos son elementos que tienen funciones especiales dentro de ellos.Los objetos son como una caja que contiene varias herramientas.

  2. El navegador tiene objetos nativos algunos importantes para este curso son:
    navigator, nos permite acceder a funciones avanzadas como el local storage o al gps.
    window, maneja las ventanas o sesiones de sitio web.
    document, es la parte visible en el navegador y quedetermina la posici贸n a los elementos para poderlos acceder.

  3. El DOM; (Object Document Model) es la forma (como un 谩rbol) en los que los navegadores organizan y recorren el html

si alguno se da cuenta de alguna especie de 鈥渄iccionario de JS鈥 donde esten todas las funciones y para que sirven las cosas se los agradezco bastante de esta forma uno sabe que buscar y como se trabaja cada cosa de este amplio lenguaje

objetos nativos del navegador:(navigator,window, document), y cada uno de ellos tiene sus atributo y m茅todos que los complementan y ayudan a que su utilidad sea mayor.

Buscando un poco me encontre en wikipedia algo del DOM https://es.wikipedia.org/wiki/Document_Object_Model

Cada video me obliga a buscar cosas m谩s a detalle en el internet, que me llevan y me llevan a leer m谩s, s茅 que esto es lo m谩s practico y funcional posible y eso me gusta pero es mucho m谩s mi ambici贸n por saber m谩s y solo aqu铆 lo he encontrado, prob茅 el curso de CODECADEMY y este esta mucho mejor explicado y practico. muchas gracias Freddy

Impresionante la facilidad de enamoramiento que genera Freddy sobre el mundo de la programaci贸n, 隆Que siga el aprendizaje!

Document: Todo lo que aparece de informacion, botones, cajas de texto, dentro de un navegador.
Window, para manipular componentes y funciones de las pesta帽as del navegar.
Navigator: para tratar con el navegador completo y el sistema operativo.

cORRIJANME!

Estos son los principios de la arquitectura web鈥 en algo que se le conoce como el backend鈥 馃槂

para tener 11 a帽os no esta nada mal

class Pakiman
{
  constructor(n, v, a, w, r)
  {
    this.imagen = new Image();
    this.nombre = n;
    this.vida = v;
    this.ataque = a;
    this.numero = w;
    this.recistencia = r;

    this.imagen.src = imagenes[this.nombre];
  }
  hablar()
  {
    alert(this.nombre);
  }
  mostrar()
  { document.body.appendChild(this.imagen)
    document.write("<p>");
    document.write("<strong>" + this.nombre + "</strong><br />");
    document.write("vida: " + this.vida + "<br />");
    document.write("ataque: " + this.ataque + "<br />");
    document.write("recistencia: " + this.recistencia + "<br />");
    document.write("numero: " + this.numero  + "<hr />");
    document.write("</p>");
  }
}
var imagenes =
{
  Tocinauro: "cerdo.png",
  Pokacho: "pollo.png",
  Vacacho: "vaca.png",
  Loboauro: "lobo.png",
}

var tocinauro = new Pakiman("Tocinauro", 50, 30, 4, 100);
var pokacho = new Pakiman("Pokacho", 100, 50, 2, 100);
var vacacho = new Pakiman("Vacacho", 1000, 500, 3, 100);
var loboauro = new Pakiman("Loboauro",5000, 100, 1, 100)

loboauro.mostrar();
vacacho.mostrar();
pokacho.mostrar();
tocinauro.mostrar();

infinitos puntos para Freddy y sus explicaciones tan brutales.

Me gusta la forma en la que Freddy explica los aspectos Tecnicos

Les recomiendo ver este video de Freddy, como memorizar es bastante util al estar aprendiendo algo nuevo, insisto deben verlo les ahorra muchos dolores de cabeza. https://www.youtube.com/watch?v=khXfXYOLfzU

Apenas empiezo a comprender que la estructura l贸gica es toda la base fundamental de la progranaci贸n. Si aprendemos a estructurar todo el codigo

Si los profesores de las universidades tradicionales ense帽aran como lo hace Freddy, seguro que la mitad del grupo dejar铆a de desertar al segundo semetre (como normalmente sucede) por pensar que ellos jam谩s van a poder programar, ya que 鈥渆s lo m谩s complicado de entender del universo鈥.

estoy implementando un grupo de whatssap que despues lo voy a convertir en una comunidad para compartir conocimiento muy importante que nos ayudaran a complementar nuestro conocimiento.

Siempre es bueno no perder la costumbre de dibujar o tener anotaciones a mano para hacer una estructura m谩s comprensible. 馃槃

Objetos
Objetos Internos del navegador
Navigator: accesos especiales a hdd para guardar cosas y gps entre otros
Window: Botones, alertas, abrir o cerrar ventanas
Document: Formularios, cajas, im谩genes, fotos, videos, titulos, elementos visuales.

Document Objet Module: DOM (谩rbol)
Organizar, Estructura de datos.

Excelente introducci贸n al DOM!!!

Cada vez se pone mas interesante, cada vez estoy mas convencido de la decision de carrera y de academia. Vamos por todo Chicos!!!

C贸mo se llama la aplicaci贸n en la que hace los dibujos?

document: Todo lo que contiene el html, lo que creamos, lo que se ve en los bordes del 谩rea visible del navegador. Controla internamente donde est谩n los formularios, cajas de texto, im谩genes, videos, t铆tulos, todos los elementos visuales con el que el usuario interactua.

Entender esta base te ayudara mucho cuando quieras hacer Web scrapping (usado en ciencia de datos)

excelente gracias Freddy

logre el reto pero por el camino largo

<!DOCTYPE html>
<html>
<head>
<title> Tu Peso en un lugar que pesas menos</title>
</head>
<body>
<h1> Tu peso en otro planeta</h1>
<p> En la tierra pesa distinto que en marte o jupitre</p>
<script>
var planeta = parseInt(prompt( "Elige tu planeta\n1 es marte, 2 es jupiter"));
var usuario = prompt("cual es tu peso?");
var peso = parseInt(usuario);
var g_tierra = 9.8;
var g_marte = 3.7;
var g_jupiter = 24.8;
var peso_final;
if (planeta==1)
{
  peso_final = peso * g_marte / g_tierra;
}
else if (planeta ==2)
{
    peso_final = peso * g_jupiter / g_tierra;

}
else
{
  peso_final = 1000000;
}

peso_final = parseInt(peso_final);

if (planeta==1)
{
  document.write ("Su peso en marte es <strong>" + peso_final + " </strong> Kilos");
}
else if (planeta ==2)
 {
  document.write ("Su peso en jupiter es <strong>" + peso_final + " </strong> Kilos");
}
else
{
  document.write ("Su peso en kripton es <strong>" + peso_final + " </strong> Kilos");
}

</script>
</body>
</html>

me gusta como explica freddy de verdad que el man lleva esto en sus venas mas detallado no se puede

Un pequeno repaso mio:
Objetos: Un objeto en la programacion es un nombre u cosa que tiene dentro atributos, caracteristicas, etc. En resumen, un objeto tiene dentro de si una funcion(codigo) dentro de si.
Objetos del navegador:
-Document:
Objeto que se encarga de todo lo relacionado con la parte escrita o visual de la pagina, como texto, imagenes, botones, ingreso de datos, etc.
-Window
-Navegator
DOM(Document objects model)
Se referiere al arbol de etiquetas de como esta construido o como deberia ser la estructura de un html.
PD: No se si me habre explicado bien.

ojala muchos profesores fueran como freddy! seriamos todos mas felices!!!

Faltan 8 horas con 49 minutos, Si no le das pausa y le das de corrido . Asustado potter?

Notas de la clase:

  • Document = contenido de la pagina web y contiene cada uno de los elementos del sitio
  • Windows = pesta帽as o taps del navegador
  • Navigator = es el browser o navegador (acceso al GPS por la antena WiFi en un laptop)

Document Objet Model = es la forma en que el navegador organzia el HTML dento de una estructura para manejarlo con javascript

navigator: El objeto que contiene las funciones del navegador, tambi茅n te permite acceder tambi茅n al sistema operativo como el gps, guardar datos en el disco duro, etc.

window: El objeto que maneja cada una de las pesta帽as.

document: El objeto que contiene todo lo que vemos dentro de nuestra p谩gina

En aplicaciones web tenemos un concepto llamado DOM (Document Object Model) es la forma en que internamente el navegador organiza todo el HTML dentro de una estructura de 谩rbol

DOM (Document Object Model) es la forma en que internamente el navegador organiza todo el HTML dentro de una estructura de 谩rbol.
Navigator: Navegador
Window: Tabs/Pesta帽as
Document: P谩gina

Entonces H1 tien varios hijos como color, alineaci贸n, negrita, cursiva suprayado etc.


hab铆a dejado el curso por un tiempo, pero ahora si o si termino y continuo con toda la carrera, y con Freddy de profe q mas pedir

extra帽amente me sale primero el Js. luego carga el HTML. 馃槙

Que bueno es Platzii!

DOM: Document Object Model o Modelo de los Objetos de un Documento

Buen Aporte

hola, tengo 36 y ya se que esta f谩cil seguir a Freddy pero, algunos como yo, todav铆a nos cuesta. si eres como yo, sigue intentando. yo se que todos lo pueden lograr aunque nos tardemos mas que los dem谩s.

solo en 10 % de los que iniciaron llegaran a la clase 32
**solo el 7 % ** se tomaran este curso enserio
**el 5% ** har谩n apuntes
el 3 % entender谩n q est谩n a punto de cambiar sus vidas y las cambiaran haciendo todo lo anterior usaran este conocimiento para rentabilizarlo subscribiese y construir algo Genial y solo el 1% leeran y rt

xd

Cada d铆a m谩s interesante poco a poco paso a paso y ser perseverante la edad no tiene por que ser un factor para detenernos.

Apuntes de la clase.

DOM: Es un termino que posiblemente no sea conocido para las personas que apenas estamos empezando en este mundo del desarrollo, por tal motivo, es importante tener claridad de su significado, su importancia y su funci贸n. DOM => Document Object Model.

Con Freddy todo es claro, Freddy es amor y pasi贸n por el conocimiento, no solo en la programaci贸n

Me encanta el entusiasmo con el que Freddy explica las cosas, se nota su pasi贸n por ello. Adem谩s con esta explicaci贸n me dio una estructura mental para comprender mejor el c贸digo.

Seguimos aprendiendo鈥

09/09/2021 haciendo el curso de programaci贸n b谩sica

Minuto 5:32
Se escucha a alguien sufriendo a lo lejos

Cuantos vemos esto en 2020鈥?

Dios Freddy explica muy bien

Perfecto, muy buena clase 馃槂