✨ El DOM también es aplicable en documentos XML.
Empieza por acá
Mi primera línea de código
Fundamentos de Programación
¿Qué es HTML/CSS/JS?
JavaScript no es Java
Primeros pasos en el navegador con alert
HTML, CSS, JavaScript de verdad
Los apuntes de Freddy en PDF
Primer proyecto: Peso en otro planeta
Peso en otro planeta
Obteniendo datos del usuario
Flujo y condicionales
Segundo proyecto: Dibujando con Canvas
Cómo funcionan Window y Document
El DOM: nuestro lugar de trabajo en la web
Dibujando en el DOM
Qué son las Funciones en JavaScript
Ciclos while y for en JavaScript
Eventos y Formularios en HTML y JavaScript
Detectar eventos del teclado con JavaScript
Dibujar en canvas con las flechas del teclado
Tercer proyecto: Villa platzi
Funciones matemáticas y números aleatorios en JavaScript
Uso y carga de imágenes en Canvas
Cuarto proyecto: Pakimanes
División, módulo y residuo en JavaScript
Clases y Arrays en JavaScript
Quinto proyecto: Cajero automático
Diagrama de Flujo del Cajero Automático
Implementación del Cajero Automático
Sexto proyecto: Cliente/Servidor
Primer servidor web con express
Modelo Cliente/Servidor
Programación de Hardware y Electrónica con Arduino
¿Cómo funciona un circuito electrónico?
¿Cómo programar un Arduino?
Programación de circuitos con C, Arduino y Sketch
Cómo programar un Arduino con Javascript y Node
Construye un Robot con JavaScript
Robot para riego de plantas en Arduino, Javascript y Node
Materiales de apoyo
Las mejores notas de los estudiantes
¿Cuál lenguaje de programación aprender primero?
La Web con Visión Profesional
Contenido Bonus
Qué son tablas de verdad y compuertas lógicas
Recap Curso Gratis de Programación Básica
Recap Programación básica
Recap Programación básica ENG
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
El DOM: nuestro lugar de trabajo en la web
11/37Recursos
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:
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:
- navigator
- window
- 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(“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>
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 ‘Head’ 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=“en” dir=“ltr”>
<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 “arbol” 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 “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
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 “carelibro” vendria siendo facebook:
face = cara
book = libro
facebook == carelibro
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
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 “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.
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.
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 “carelibro” 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 “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.
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;
-
Los objetos son elementos que tienen funciones especiales dentro de ellos.Los objetos son como una caja que contiene varias herramientas.
-
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. -
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 “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
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 “es 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
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 😃
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.