Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 16D : 7H : 5M : 45S

Debes tener cuenta en Platzi

Para ver esta clase abierta debes iniciar sesión

El DOM: nuestro lugar de trabajo en la web11/36

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

el que no entiende con freddy que abandone la programacíon  

 

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

✨ El DOM también es aplicable en documentos XML.

Estudiar todos los días es de gran ayuda pero el gusto por ello lo hace mas emocionante

 

 

 

 

fre.png

Objetos internos del navegador con JavaScript:
El navegador internamente tiene sus propios objetos a los cuáles podemos acceder o manipular mediante JavaScript. Estos son:

  • Navigator: Contiene las funciones especiales del navegador y puedes acceder también al sistema operativo con este objeto.

  • Window: Maneja las ventanas y tabs del navegador.

  • Document: Contiene todos los elementos que se encuentran dentro de una página web. Controla internamente cada componente visual con el que los usuarios interactúan.

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

📝 Nota: Puedes organizar tu HTML en un diagrama o esquema tipo árbol, de esta manera verás cómo tu JavaScript recorre o llega a los objetos de tu aplicación.

equisde.png
  • Navigator: Navegador(cromado)
  • Window: Tabs/Pestañas
  • Document: Pagina
  • Document Object Model: Forma que usa el navegador para organizar el Document

 

Excelente manera de explicar, no aburre en ningun video,capta totalmente la atencion, muchas gracias Freddy!

Mis apuntes. Espero les sirvan 😄
2.1.png

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

DOM.png

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

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

Me pueden dar una sugerencia sobre algun libro de java script para poder aprender


OBjetos internos

Navigator:Es el navegador

Window:Son los tabs

Document:Es toda la página

Document Object Mode:forma en el que el navegador organiza y crea un arbol de datos estructurados

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

quiero besarle el cerebro a freddy, bai

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.

yo podria escribir hacer un script para tomarme fotos con getUserMedia y guardarlos en el disco duro?

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")

Estos videos se vuelven más dinámicos subiéndole la velocidad de reproducción a 1.25x

fredy, el video se pausa mucho. 


por lo demas todos los ejercicios me ha corrido bien. hace muuchos años aprendi y ya olvide, basic, y C.


si hubiera existido un profesor como tu, hubiera seguido en esa carrera.


saludos desde Huatulco, Mexico


PD: siempre me parecio extraño, ensamblador, no llegue hasta alli. 


un pequeño tutorial de como funciona, se podrá?



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.

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

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.

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.

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.

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

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!!!

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.

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

He intentado varios “cursos 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

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

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 “arbol” de como los datos estan estructurados internamente (en el codigo). El arbol se conoce como Document Object Model

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

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

<html lang=“en” dir=“ltr”>
<head>
<title>Curso de Platzi</title>
</head>
<body>
<p>Exitos Para Todos</p>
</body>
</html>

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

Freddy me encanta tu manera de explicar las cosas, espero que sigas teniendo el rol de profesor también, ya que es muy gratificante ver tus videos. Estuve en otra plataforma virtual, estuve aprendiendo de JavaScript, y comparo tu manera de enseñar, y tú enseñas muchísimo más en menos tiempo, inclusive consideraste CSS, gracias.

Refrescando conocimientos.
Gracias Freddy y demás equipo Platzi.

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.

Es molesto que siempre salga el nombre del profesor

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

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.

Una pequeña etiqueta meta, pero muy útil, que va dentro de ‘Head’ es la siguiente:

<meta charset="utf-8">

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

Objetos: es una manera de “empaquetar” 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 “árbol” que ordena jerárquicamente dichos elementos del html. Es importante saber interpretar este “árbol” del DOM para poder manipular los objetos de una página web.

Objetos: Nombres especiales que contienen dentro funciones, atributos, variables, etc.
Objetos nativos del navegado.
Todo el contenido del navegador que nosotros vemos se llama “document” en JavaScript y cada una de las pestañas JS lo llama “window” y se puede acceder a las propiedades usando esas palabras, para acceder a las opciones del navegador se accede con la palabra “davigator”, estos son nombres de objetos internemos del navegador, para acceder al disco duro del usuario se utiliza el objeto “localstorage”.
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.

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> 

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(“Elige 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 = “Marte”;
verificador = true;
}
else if (planeta == 2)
{
peso_final = peso * g_jupiter / g_tierra;
nombre = “Júpiter”;
verificador = true;
}
else if (planeta == 3)
{
peso_final = peso * g_jupiterg_saturno / g_tierra;
nombre = “Saturno”;
verificador = true;
}
else if (planeta == 4)
{
peso_final = peso * g_neptuno / g_tierra;
nombre = “Neptuno”;
verificador = true;
}
else if (planeta == 5)
{
peso_final = peso * g_mercurio / g_tierra;
nombre = “Mercurio”;
verificador = true;
}
else if (planeta == 6)
{
peso_final = peso * g_venus / g_tierra;
nombre = “Venus”;
verificador = true;
}
else if (planeta == 7)
{
peso_final = peso * g_urano / g_tierra;
nombre = “Urano”;
verificador = true;
}
if (verificador ==true)
{
peso_final = parseInt(peso_final);
document.write(“Tu peso en " + nombre +” es <strong>” + peso_final + " kilos </strong>");
}
else
{
document.write(“Tu eres de otro sistema planetario”);
}
</script>
</body>
</html>

​Manipulació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
descarga.jpg

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

Que bueno es Platzii!

lo haces ver demasiado facil , yolo mejor es que se entiende perfecto . 

gracias fredy , saludos desde Bogota Colombia .

 

Muy claro y concreto el video. Gracias

Document Object Model (DOM) //Modelo de Objeto del Documento.

Navegador entero: NAVIGATOR
Pestañas del navegador: WINDOW
Contenido de la página web: DOCUMENT

NAVIGATOR + WINDOW + DOCUMENT = Objetos internos del navegador para referirse a sí mismo.

Gracias Fredy, cada vez me intereso mas por la programación,   repitiendo cada video, voy despacio para que no me queden dudas.  

A mi me sirvió este video para entender mejor a Freddy.
https://www.youtube.com/watch?v=d_J2nC6V6NA

 

  • Navigator: Navegador 
  • Window: Tabs/Pestañas
  • Document: Pagina
  • Document Object Model: Forma que usa el navegador para organizar el Document

infinitos puntos para Freddy y sus explicaciones tan brutales.

Como siempre Freddy una excelente clase.

Comparto mis apuntes:

Objeto: Son los nombres especiales que tienen por dentro como Funciones, Atributos, Variables, etc.

Internamente en Javascript podemos acceder a propiedadde de todas estas opciones a traves de obejtos navitos del navegador.

Contamos con tres elementos:
Navegador: Donde podemos encontrar las opciones de ventas y podemos abrir las que nosotros utilicemos. Se puede acceder al disco duro a traves de local storage. También se puede acceder al gps por medio del wifi.

window: es el nombre que se le da internamente de JavaScript a cada una de las pestañas del navegador.

document: Es todo lo que tiene HTML. Lo que nosotros creamos, lo que ve en las áreas visibles del navegador. dentro de este se encuentra el concepto de la programcion web Document Object Model.

*** Documenten Object Model:** es la forma en la que el navegador organiza todo nuestro HTML dentro de una estructura especial. es atraves de la cual en Java Script podemos sin problemas manejar nuestra aplicación web.

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();

Estos son los principios de la arquitectura web… en algo que se le conoce como el backend… 😃

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!

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

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

Buenas Noches

Adjunto el codigo con el cual podran calcular su IMC.

``
<!doctype html>
<html>
<head>
<title> TU IMC </title>
</head>
<body>
<h1> A partir de este momento vas a realizar el calculo de tu IMC </h1>
<script type=“text/javascript”>
var Peso = prompt(“Cual es Tu Peso”);
var Estatura = prompt("Cual es Tu Estatura en centimetros - utilice el punto como separador de decimales ");
var Peso_KG = parseFloat (Peso)
var Estatura_CM = parseFloat (Estatura)
var IMC
IMC = Peso_KG / (Estatura_CM * Estatura_CM)
var Name
if(IMC<= 18.50)
{
Name = " - Estas en el rango - BAJO PESO ";
}
else if(IMC<= 24.99)
{
Name = " - Estas en el rango - NORMAL ";
}
else
{
Name = " - Estas en el rango - OBESO ";
}
var IMC_D = IMC.toFixed(2)
document.write("Tu IMC es <strong> " + IMC_D + " " + Name + " </strong> ");
</script>
<p> (<strong> Gracias por utilizar esta herramienta </strong>) </p>
<body>
</html>

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

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

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.

extrañamente me sale primero el Js. luego carga el HTML. 😕

si alguno se da cuenta de alguna especie de “diccionario 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

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

Buen Aporte

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

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.

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 “localStorage”, 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.

<!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


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>                

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

9.jpg

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

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

exelente explicacion por fin puedo entender que es el dichoso DOM


Cuantos vemos esto en 2020…?

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

la sensacion de crear algo nuevo (desde cero) es maravillosa xD

Freddy explica las cosas muy bien

En el navegador accedo al hardware con el que cuento.
En document manipulo el contenido que se está generando.

var planeta = parseInt(prompt("Elige tu planeta \n1 es Marte, 2 es Jupiter"));
var peso = parseFloat(prompt("¿Cuál es tu peso?"));
var g_tierra = 9.8;
var g_marte = 3.7;
var g_jupiter = 24.8;
var peso_final;
var nombre;

if (planeta == 1) {
	nombre = "marte";
	peso_final = (peso * g_marte)/g_tierra;
	peso_final = parseFloat(peso_final.toFixed(2));
	document.write("Tu peso en " + nombre + " es <strong>" + peso_final + " kilos</strong>");
}else if (planeta == 2) {
	nombre = "jupiter";
	peso_final = (peso * g_jupiter)/g_tierra;
	peso_final = parseFloat(peso_final.toFixed(2));
	document.write("Tu peso en " + nombre + " es <strong>" + peso_final + " kilos</strong>");
}else{
	document.write("planeta incorrecto");
}```

Dios Freddy explica muy bien

Perfecto, muy buena clase 😃

Buena explicacion, es lo basico para hacer lo mas complejo

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

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

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

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

He aprendido aquí lo que no logre aprender en un año en la universidad! Excelente Freddy!

Freddy es un pro

el que no entiende con freddy que abandone la programacíon  

 

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

✨ El DOM también es aplicable en documentos XML.

Estudiar todos los días es de gran ayuda pero el gusto por ello lo hace mas emocionante

 

 

 

 

fre.png

Objetos internos del navegador con JavaScript:
El navegador internamente tiene sus propios objetos a los cuáles podemos acceder o manipular mediante JavaScript. Estos son:

  • Navigator: Contiene las funciones especiales del navegador y puedes acceder también al sistema operativo con este objeto.

  • Window: Maneja las ventanas y tabs del navegador.

  • Document: Contiene todos los elementos que se encuentran dentro de una página web. Controla internamente cada componente visual con el que los usuarios interactúan.

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

📝 Nota: Puedes organizar tu HTML en un diagrama o esquema tipo árbol, de esta manera verás cómo tu JavaScript recorre o llega a los objetos de tu aplicación.

equisde.png
  • Navigator: Navegador(cromado)
  • Window: Tabs/Pestañas
  • Document: Pagina
  • Document Object Model: Forma que usa el navegador para organizar el Document

 

Excelente manera de explicar, no aburre en ningun video,capta totalmente la atencion, muchas gracias Freddy!

Mis apuntes. Espero les sirvan 😄
2.1.png

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

DOM.png

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

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

Me pueden dar una sugerencia sobre algun libro de java script para poder aprender


OBjetos internos

Navigator:Es el navegador

Window:Son los tabs

Document:Es toda la página

Document Object Mode:forma en el que el navegador organiza y crea un arbol de datos estructurados

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

quiero besarle el cerebro a freddy, bai

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.

yo podria escribir hacer un script para tomarme fotos con getUserMedia y guardarlos en el disco duro?

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")

Estos videos se vuelven más dinámicos subiéndole la velocidad de reproducción a 1.25x

fredy, el video se pausa mucho. 


por lo demas todos los ejercicios me ha corrido bien. hace muuchos años aprendi y ya olvide, basic, y C.


si hubiera existido un profesor como tu, hubiera seguido en esa carrera.


saludos desde Huatulco, Mexico


PD: siempre me parecio extraño, ensamblador, no llegue hasta alli. 


un pequeño tutorial de como funciona, se podrá?



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.

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

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.

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.

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.

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

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!!!

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.

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

He intentado varios “cursos 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

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

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 “arbol” de como los datos estan estructurados internamente (en el codigo). El arbol se conoce como Document Object Model

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

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

<html lang=“en” dir=“ltr”>
<head>
<title>Curso de Platzi</title>
</head>
<body>
<p>Exitos Para Todos</p>
</body>
</html>

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

Freddy me encanta tu manera de explicar las cosas, espero que sigas teniendo el rol de profesor también, ya que es muy gratificante ver tus videos. Estuve en otra plataforma virtual, estuve aprendiendo de JavaScript, y comparo tu manera de enseñar, y tú enseñas muchísimo más en menos tiempo, inclusive consideraste CSS, gracias.

Refrescando conocimientos.
Gracias Freddy y demás equipo Platzi.

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.

Es molesto que siempre salga el nombre del profesor

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

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.

Una pequeña etiqueta meta, pero muy útil, que va dentro de ‘Head’ es la siguiente:

<meta charset="utf-8">

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

Objetos: es una manera de “empaquetar” 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 “árbol” que ordena jerárquicamente dichos elementos del html. Es importante saber interpretar este “árbol” del DOM para poder manipular los objetos de una página web.

Objetos: Nombres especiales que contienen dentro funciones, atributos, variables, etc.
Objetos nativos del navegado.
Todo el contenido del navegador que nosotros vemos se llama “document” en JavaScript y cada una de las pestañas JS lo llama “window” y se puede acceder a las propiedades usando esas palabras, para acceder a las opciones del navegador se accede con la palabra “davigator”, estos son nombres de objetos internemos del navegador, para acceder al disco duro del usuario se utiliza el objeto “localstorage”.
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.

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> 

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(“Elige 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 = “Marte”;
verificador = true;
}
else if (planeta == 2)
{
peso_final = peso * g_jupiter / g_tierra;
nombre = “Júpiter”;
verificador = true;
}
else if (planeta == 3)
{
peso_final = peso * g_jupiterg_saturno / g_tierra;
nombre = “Saturno”;
verificador = true;
}
else if (planeta == 4)
{
peso_final = peso * g_neptuno / g_tierra;
nombre = “Neptuno”;
verificador = true;
}
else if (planeta == 5)
{
peso_final = peso * g_mercurio / g_tierra;
nombre = “Mercurio”;
verificador = true;
}
else if (planeta == 6)
{
peso_final = peso * g_venus / g_tierra;
nombre = “Venus”;
verificador = true;
}
else if (planeta == 7)
{
peso_final = peso * g_urano / g_tierra;
nombre = “Urano”;
verificador = true;
}
if (verificador ==true)
{
peso_final = parseInt(peso_final);
document.write(“Tu peso en " + nombre +” es <strong>” + peso_final + " kilos </strong>");
}
else
{
document.write(“Tu eres de otro sistema planetario”);
}
</script>
</body>
</html>

​Manipulació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
descarga.jpg

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

Que bueno es Platzii!

lo haces ver demasiado facil , yolo mejor es que se entiende perfecto . 

gracias fredy , saludos desde Bogota Colombia .

 

Muy claro y concreto el video. Gracias

Document Object Model (DOM) //Modelo de Objeto del Documento.

Navegador entero: NAVIGATOR
Pestañas del navegador: WINDOW
Contenido de la página web: DOCUMENT

NAVIGATOR + WINDOW + DOCUMENT = Objetos internos del navegador para referirse a sí mismo.

Gracias Fredy, cada vez me intereso mas por la programación,   repitiendo cada video, voy despacio para que no me queden dudas.  

A mi me sirvió este video para entender mejor a Freddy.
https://www.youtube.com/watch?v=d_J2nC6V6NA

 

  • Navigator: Navegador 
  • Window: Tabs/Pestañas
  • Document: Pagina
  • Document Object Model: Forma que usa el navegador para organizar el Document

infinitos puntos para Freddy y sus explicaciones tan brutales.

Como siempre Freddy una excelente clase.

Comparto mis apuntes:

Objeto: Son los nombres especiales que tienen por dentro como Funciones, Atributos, Variables, etc.

Internamente en Javascript podemos acceder a propiedadde de todas estas opciones a traves de obejtos navitos del navegador.

Contamos con tres elementos:
Navegador: Donde podemos encontrar las opciones de ventas y podemos abrir las que nosotros utilicemos. Se puede acceder al disco duro a traves de local storage. También se puede acceder al gps por medio del wifi.

window: es el nombre que se le da internamente de JavaScript a cada una de las pestañas del navegador.

document: Es todo lo que tiene HTML. Lo que nosotros creamos, lo que ve en las áreas visibles del navegador. dentro de este se encuentra el concepto de la programcion web Document Object Model.

*** Documenten Object Model:** es la forma en la que el navegador organiza todo nuestro HTML dentro de una estructura especial. es atraves de la cual en Java Script podemos sin problemas manejar nuestra aplicación web.

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();

Estos son los principios de la arquitectura web… en algo que se le conoce como el backend… 😃

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!

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

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

Buenas Noches

Adjunto el codigo con el cual podran calcular su IMC.

``
<!doctype html>
<html>
<head>
<title> TU IMC </title>
</head>
<body>
<h1> A partir de este momento vas a realizar el calculo de tu IMC </h1>
<script type=“text/javascript”>
var Peso = prompt(“Cual es Tu Peso”);
var Estatura = prompt("Cual es Tu Estatura en centimetros - utilice el punto como separador de decimales ");
var Peso_KG = parseFloat (Peso)
var Estatura_CM = parseFloat (Estatura)
var IMC
IMC = Peso_KG / (Estatura_CM * Estatura_CM)
var Name
if(IMC<= 18.50)
{
Name = " - Estas en el rango - BAJO PESO ";
}
else if(IMC<= 24.99)
{
Name = " - Estas en el rango - NORMAL ";
}
else
{
Name = " - Estas en el rango - OBESO ";
}
var IMC_D = IMC.toFixed(2)
document.write("Tu IMC es <strong> " + IMC_D + " " + Name + " </strong> ");
</script>
<p> (<strong> Gracias por utilizar esta herramienta </strong>) </p>
<body>
</html>

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

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

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.

extrañamente me sale primero el Js. luego carga el HTML. 😕

si alguno se da cuenta de alguna especie de “diccionario 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

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

Buen Aporte

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

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.

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 “localStorage”, 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.

<!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


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>                

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

9.jpg

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

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

exelente explicacion por fin puedo entender que es el dichoso DOM


Cuantos vemos esto en 2020…?

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

la sensacion de crear algo nuevo (desde cero) es maravillosa xD

Freddy explica las cosas muy bien

En el navegador accedo al hardware con el que cuento.
En document manipulo el contenido que se está generando.

var planeta = parseInt(prompt("Elige tu planeta \n1 es Marte, 2 es Jupiter"));
var peso = parseFloat(prompt("¿Cuál es tu peso?"));
var g_tierra = 9.8;
var g_marte = 3.7;
var g_jupiter = 24.8;
var peso_final;
var nombre;

if (planeta == 1) {
	nombre = "marte";
	peso_final = (peso * g_marte)/g_tierra;
	peso_final = parseFloat(peso_final.toFixed(2));
	document.write("Tu peso en " + nombre + " es <strong>" + peso_final + " kilos</strong>");
}else if (planeta == 2) {
	nombre = "jupiter";
	peso_final = (peso * g_jupiter)/g_tierra;
	peso_final = parseFloat(peso_final.toFixed(2));
	document.write("Tu peso en " + nombre + " es <strong>" + peso_final + " kilos</strong>");
}else{
	document.write("planeta incorrecto");
}```

Dios Freddy explica muy bien

Perfecto, muy buena clase 😃

Buena explicacion, es lo basico para hacer lo mas complejo

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

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

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

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

He aprendido aquí lo que no logre aprender en un año en la universidad! Excelente Freddy!

Freddy es un pro