Empieza por acá

1

Mi primera línea de código

Fundamentos de Programación

2

¿Qué es HTML/CSS/JS?

3

JavaScript no es Java

4

Primeros pasos en el navegador con alert

5

HTML, CSS, JavaScript de verdad

6

Los apuntes de Freddy en PDF

Primer proyecto: Peso en otro planeta

7

Peso en otro planeta

8

Obteniendo datos del usuario

9

Flujo y condicionales

Segundo proyecto: Dibujando con Canvas

10

Cómo funcionan Window y Document

11

El DOM: nuestro lugar de trabajo en la web

12

Dibujando en el DOM

13

Qué son las Funciones en JavaScript

14

Ciclos while y for en JavaScript

15

Eventos y Formularios en HTML y JavaScript

16

Detectar eventos del teclado con JavaScript

17

Dibujar en canvas con las flechas del teclado

Tercer proyecto: Villa platzi

18

Funciones matemáticas y números aleatorios en JavaScript

19

Uso y carga de imágenes en Canvas

Cuarto proyecto: Pakimanes

20

División, módulo y residuo en JavaScript

21

Clases y Arrays en JavaScript

Quinto proyecto: Cajero automático

22

Diagrama de Flujo del Cajero Automático

23

Implementación del Cajero Automático

Sexto proyecto: Cliente/Servidor

24

Primer servidor web con express

25

Modelo Cliente/Servidor

Programación de Hardware y Electrónica con Arduino

26

¿Cómo funciona un circuito electrónico?

27

¿Cómo programar un Arduino?

28

Programación de circuitos con C, Arduino y Sketch

29

Cómo programar un Arduino con Javascript y Node

30

Construye un Robot con JavaScript

31

Robot para riego de plantas en Arduino, Javascript y Node

Materiales de apoyo

32

Las mejores notas de los estudiantes

33

¿Cuál lenguaje de programación aprender primero?

34

La Web con Visión Profesional

Contenido Bonus

35

Qué son tablas de verdad y compuertas lógicas

Recap Curso Gratis de Programación Básica

36

Recap Programación básica

37

Recap Programación básica ENG

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Cómo funcionan Window y Document

10/37
Recursos

Un objeto es una instancia única de una clase, una unidad de algo con lo que lo relacionamos, Por un ejemplo, un vehículo: la palabra “vehículo” es una clase, y el vehículo físico es una instancia de esa palabra “vehículo”.

El objeto está dividido en dos partes:

Características o atributos:

Las características son todo lo que representa al objeto. Por ejemplo, la cantidad de ruedas que tiene un vehículo, la marca del vehículo, el color, el tamaño, el número de placa, etc. A estos elementos se les llama atributos en el mundo de la programación.

Funcionalidades o métodos:

Son todas las funcionalidades que tiene el objeto o los servicios que ofrece. Por ejemplo, el vehículo nos ofrece el servicio de transportarnos, de escuchar música, de tener aire acondicionado, etc. A esto se le llama método en el mundo de la programación.

Ahora, construyamos el objeto Vehículo en código, con todo lo que nos han enseñado hasta ahora:

//Atributos
var cantidad_ruedas = 4; //int
var marca = "Mercedez" //String
var color = "Rojo"; //String
var tamano = "Grande"; //String
var placa = "BDH865"; //String
var frenos = true; //boolean

//Metodos
function transporte(){
alert("Nos transportamos hasta la casa");
}

//Este es un método que recibe atributos como parámetros 
//Cuando un método recibe un atributo como parámetro, significa que cada que lo uses debes colocar un atributo entre los paréntesis

function musica(cancion){
alert("En este momento estamos escuchando la canción: " + cancion);
}

function aireAcondicionado(prendido){
alert("El aire acondicionado esta: " + prendido);
}

Un boolean es un tipo de variable que solo puede tener 2 estados: True o False (verdadero o falso).

Teniendo todo esto en cuenta, veamos cómo funcionan Window y Document en HTML.

Objetos

  • window
  • document
  • console

Atributos

  • window.location;
  • document.anchors;
  • console.backgroundColor;

Métodos

  • window.addEventListener();
  • document.write(“Este método recibe un parámetro de tipo String”)
  • console.count();

Cuando queremos llamar un atributo o un método de un objeto, lo que debemos hacer es:

  • Llamar al objeto al cual quieres acceder a su información.
    document

  • Poner un punto inmediatamente después del nombre del objeto. (En algunos programas de desarrollo web, te muestra una lista con todos los atributos y métodos que tiene el objeto en donde puedes buscar lo que necesitas).
    document**.**

  • Llamar el atributo o método al qu quieres acceder.
    document.write();

  • Si llamas a un método que recibe un parámetro, debes colocarlo entre los paréntesis.
    document.write("Este es el atributo que recibe como parámetro");

Recuerda:

  • Las únicas etiquetas que deben ir a la misma altura de la etiqueta html son head y body.

  • window.location  devuelve la ruta de la página

  • Para agregar soporte a tildes y letras especiales puedes usar <meta charset=“utf-8”> dentro de head

  • Cuándo quieres depurar un programa puedes usar console.log para ver mensajes en la consola

Aporte cread por: Jaime Burbano

Aportes 1951

Preguntas 518

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

💻 console.log() nos permite imprimir un mensaje en el navegador, permite ejecutar un proceso de depuración mucho más fácil.

Apuntes en Clase

  • HTML solo puede contener dos etiquetas en el mismo nivel : <Head> y <Body>
  • La etiqueta <Script> va justo antes de cerrar el body, porque es en ese momento donde se cargan todos los componentes de la página, y se prepara para interactuar con el usuario.
  • Método => es una función que se encuentra dentro de un objeto, Ejemplo: Document.write() => Write es un método(función) del objeto Document.
  • Atributo => es una variable interna de un objeto, determinadas previamente Ejemplo: window.location => location es un atributo de window.
  • <meta charset= “utf-8” /> es una etiqueta HTML que permite al navegador interpretar los caracteres especiales como tildes, acentos, la letra ñ.
  • Depurar => se denomina al proceso de corregir errores en nuestro código.
  • Console.log => Herramienta que nos ayuda en el proceso de depuración del código.
  • src => Atributo de una etiqueta HTML que permite indicar la dirección de un archivo, generalmente CSS o Js.

Solo quiero decirles que prueben Visual Studio Code. En el año que se grabó esto, “no” era tan fuerte. Ahora (2019) es el editor más utilizado. Denle una oportunidad. No se arrepentirán.

APUNTES DE LA CLASE

  • Los objetos contienen:
  1. Metodos: funciones dentro de un objeto

  2. Atributo o propiedad Variables que almacenan valores, cuando la variable es parte de un objeto.

  • <meta charset=“utf-8”>: Se usa para poner caracteres especiales

  • La Ruta del archivo hace parte de window
    window.location: es la ruta del archivo.

  • Depurar es el proceso de tratar de arreglar un código.

  • Console.log: escribe mensajes en la consola, y muestra los elementos de un objeto y sacar todos los datos.

  • Se pueden poner varios scripts en un mismo HTML

Para los que se confundieron un poco:
.
“document”, “window” y “console” son objetos. (Por cierto, el objeto "window"
no tiene nada que ver con el sistema operativo)
.
Los objetos pueden ser usados o modificados con funciones. Por ejemplo,
document.write(“hola”)
console.log(…)
.
Pero para mostrar o usar información de un objeto (es decir las variables),
entonces se usan los atributos. Por ejemplo:
window.location;
freddy.colordeojos
freddy.weight
freddy.peso
freddy.eyescolor
.
Cuando los objetos van acompañados de funciones se les llaman métodos.
Y cuando los objetos van a compañados de sus variables(información interna)
se les llaman atributos.
.
Post data: console.log es un escáner, y te dice toda la información que contiene un objeto.

algo que no dijo Fredy
es como dejar comentarios
se deja comentarios con las dos barras "//"
ejem

var s = 5;
var p = 6;
var z = s +p; // asi se deja comentarios xD facilita la lectura del codigo

Cuando una Función es parte de un Objeto se le llama Método. A su vez, cuando una Variable es parte de un Objeto, se le llama Atributo o Propiedad

¿Será que a Freddy se le olvidó que movió el archivo html y su reacción cuando no cargó la página habrá sido genuina? jajaja

Es muy importante decir que el código puede fallar si tiene una letra mayúscula, me pasó con window.location ☹ tenía la w en mayúscula y casi muero intentando encontrar el error!

Nadie:
Absolutamente nadie:
Yo: Está igualito… ¿Por qué no me funciona?

Luego de llorar un rato: Ctrl+S Luego F5
… Esta página dice Si funciona

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document Object Model</title>
  </head>
  <body>
    <h1>Vamos a jugar con window y con document</h1>
    <script type="text/javascript">
      var ruta = window.location;
      console.log(ruta);
      document.write("Estás en: " + ruta);
    </script>
    <script src="codigo.js"></script>
  </body>
</html>

Esta es una ilustración rápida que hice para ejemplificar las diferencias entre función, objeto y variable.

Jejeje, la consola en Platzi

Apuntes de clase
Los objetos contienen:
Atributo o propiedad: Cuando una variable es parte de un objeto.
Metodo: funciones dentro de un objeto.
//
Depurar: es el proceso de tratar de arreglar un error dentro de un codigo.
//
Para cerrar una etiqueta que no tiene contenido por dentro se le coloca un / y un espacio, por ejemplo: <meta charset = “utf’-8” />
//
console.log

  • Pasa cualquier variable o mensaje por la consola sin que el
    usuario se de cuenta.
  • Cuando quieras depurar un programa.
  • Tambien nos sirve para conocer como esta escrito un objeto por dentro.

Este curso me hace interesarme cada mas en programacion…
if (aprendizaje==plazti)
document.write(“TU SUBIRAS TUS INGRESOS”)

Si en Visual Studio Code escriben html:5 ya sale todas las principales etiquetas: html, head y body.

Algo de la teoría que vale la pena recordar:
1.Cuando una variable es parte de un objeto, a la variable se la llama
atributo o propiedad, por ejemplo:
window.location;
window es el objeto, location es el atributo.
2. Cuando una funcion es parte de un objeto, a la función se la llama método, por ejemplo:
document.write( );
document es el objeto, write es el método
console.log( );
console es el objeto, log es el método
3. Depurar es el proceso de tratar de arreglar un error dentro del código.
4. console.log( ) sirve para ver como estan escritos los objetos.
5. console.log( ) tambien sirve para enviar mensajes solo visibles por la consola.

https://developer.mozilla.org/es/docs/Web/API/Console
Esta página me ayudó mucho a entender como funciona console.

Objeto + Variable = Atributo o propiedad.
Objeto + Función = Método.

Pues ya llegué hasta acá. Ahora solo espero a que Google me contrate 😁

Freddy Vega sabe de lo que habla, el mejor profesor imaginable. Me encantan sus videos y sus platzi live. Mucha fuerza con todo!! Me has enseñado muchisimo!

he participado en otros cursos pero definitivamente no se comparan con la forma de enseñar de este personaje, hace un muy buen trabajo

Por que en ocasiones el color del código no cambia de la misma manera que se muestra en el video. Al entrar en consola para verificar error, no se destaca evidencia

Dejo codigo con agregados del ejercicio

    var ruta = window.location;
 
    //Ejemplos de "console.log"
    console.log(console); // Se puede ejecutar "console.log" sobre si misma (y ver sus parametros)
    console.log(navigator); // Se puede ejecutar "console.log" sobre un objeto
    console.log(document); 
    console.log(window);
    console.log(ruta); // Se puede ejecutar "console.log" sobre una variable

    //Escribo en el Objeto "document" Atributos/Propiedades que obtengo del console.log(document);
    document.write("Estas en: " + ruta);
    document.write("</br>El documento contiene caracteres de tipo " + document.charset);
    document.write("</br>La fecha de la ultima modificacion del archivo es " + document.lastModified);

    //Escribo en el Objeto "document" Atributos/Propiedades que obtengo del console.log(navigator);
    document.write("</br></br>Estas utilizando el navegador " + navigator.appCodeName);
    document.write("</br>La version de tu navegador es " + navigator.appVersion);
    document.write("</br>El lenguaje de tu navegador es " + navigator.language);
    document.write("</br>El sistema operativo que utilizas es " + navigator.platform);

me siento mas inteligente cuando duermo ya no me acuerdo nada jajaja xD solo me queda varios deja vu…

No puedo parar de interesarme, es cada vez mejor. Y la verdad que Freddy es muy bueno explicando!

Si estan usando Visual Studio Code como yo, entonces se pueden ahorrar escribir la estructura del html, solo tienen que escribir html: y presionar la tecla Tab o Enter.

cuando una variable es parte de un objeto, la variable se le llama atributo o propiedad.
cuando una función es parte de una objeto, la función se le llama método.

Deduzco que **charset **viene de characters set, sabiendo que _characters _se refiere a los caracteres o elementos de nuestro abecedario y _set _se refiere a todo el juego o conjunto de estos caracteres.

Cuando una variable es parte de un objeto a la variable se le llama atributo o propiedad
Cuando una funcion es parte de un objeto a la funcion se le llama metodo

.- variables parte de un objeto, se llaman atributos.
.-ej., location es un atributo o propiedad de window.
.-la etiqueta meta se coloca en head.
.- da formato al texto del document.
.-console.log permite emitir mensajes que no vea el usuario.
.-pero tambien ayuda a evaluar objetos como document, window, navigator, mediante la inspeccion de la consola.
.-se separó el codigo js del html en archivos distintos.
.-se comprobó que el sistema de archivos separados funciona,

Para los que quieran escribir codigo rapido existen plugins en los editores de codigos que te ayudan a escribir rapido codigo en atom hay un plugin que se llama emmet con emmet hace autocompletado que te ayuda a escribir rapido codigo otros editores como visual studio code ya tiene este plugin por defecto lo que hace que muchas personas quieran irse para visual studio code ejemplo:

html:5 

con solo escribir esto y darle tab o enter toda la estructura de html se autocompleta rapido ademas tiene otras funciones como:

h2.content*4

con escribir esto y darle tab lo que hace es que nos va a generar 4 h2 y ademas tendra la misma clase en los 4 h2

Esto se veria en el editor despues de haberle dado tab

<h2 class=content></h2
<h2 class=content></h2
<h2 class=content></h2
<h2 class=content></h2

Aparte de estos atajos existen muchos mas que te ayudan a escribir codigo mucho mas rapido

Los objetos contienen:

  • Métodos: funciones dentro de un objeto
  • Atributo o propiedad: variables internas que almacenan valores

Los atributos se conocen también como características o parámetros de un objeto.

ahora estoy probando Visual Studio Code que es por ahora de los más utilizados

También en Visual Studio Code, en la parte de extensiones se pueden instalar el Live Server del autor Ritwick Dey, al instalarlo y habilitarlo pueden escribir su código y encima del mismo codigo oprimir botón derecho del mouse e ir a “open with live server”, lo que hace esto es abrir el código en su explorador de internet pero como si se tratara realmente de un servidor, al momento de seguir escribiendo código y cuando se guardan los cambios en automático el explorer se refresca y muestra el resultado en tiempo real, esto nos evita que estemos dando actualizar al crhome o firefox y adicional nos lo muestra emulando que viene de un servidor, espero les ayude esta aportación, saludos de desde Guadalajara, México.

var ruta = window.location;

    //window.(OBJETO) location (VARIABLE) no lleva parentesis NO ES UNA FUNCION!
    //la VARIABLE location, es parte del objeto de window
    //cuando una variable es parte de un objeto, se llama ATRIBUTO O PROPIEDAD

    document.write("estás en : " + ruta)

    // document.(OBJETO) write(FUNCION) por ende lleva parentesis
    //WRITE es una FUNCION pero como esta con un OBJETO (document.)
    // entonces WRITE pasa a llamarse METODO

Con respecto a la tilde, yo lo coloque y no hubo ningun problema, sin necesidad de usas <meta charset=“utg-8” />.

En los 2 últimos comentarios de HTML de esta parte de la página, creo que tiene mucha información que dejó el programador 😅

No me llama el archivo js!! tengo el código igual que el pero no hay forma que me cargue. Verifique muchas veces el procedimiento pero no veo el error ni en el script ni en la designacion de carpetas.
Alguno sabe como resolverlo?

yo me tardé como 2 horas en terminar el video por en estar regresando y regresando el video hasta entender cada uno de los conceptos que aquí maneja freddy :} sin pena compañeros.

Increible Poder que tiene la consola para depurar y hacer cosas interesantes, pueden ver todos sus metodos con:

console.log(console)

Ademas les recomiendo ver esto a mas de talle con:

https://www.w3schools.com/jsref/obj_console.asp

Importante…
Cuando una variable es parte de un objeto la variable se le llama atributo o propiedad
Cuando una función es parte de un objeto la función se le llama método

06:40.

Tragar() es una de las funciones más importantes que tenemos, jajajaja, buena clase para reforzar conocimientos

Acá dejo algunos datos importantes:

  1. Cuando las funciones son parte de un objeto se llaman metodos

  2. Cuando una variable forma parte de un objeto se le llama atributo o propiedad.

  3. A los metodos se le establecen parametros.

  4. A los atributos se le establecen valores.

  5. La etiqueta <meta> se usa para la codificacion de los caracteres especiales. Para que la codificacion este en español se realiza de la siguiente manera <meta charset="utf-8">

  6. Para tener codigo HTML y JS en archivos separados se crea un archivo con extension .js (javascript) y otro .html (HTML). En el archivo .js se crea todo el contenido javascript. Por su parte, en el codigo HTML se crea la etiqueta <script> y dentro de ella se invoca la ubicacion del archivo .js de la siguiente manera:

<script src="ejemplo.js"></script>

Había escrito scr en vez de src… ya me estaba comiendo la cabeza diciendo na es porque uso edge!!

Los objetos contienen

Métodos: funciones dentro de un objeto
Atributo o propiedad: variables internas que almacenan valores

cuando usas sublime text 3, al poner <html> te coloca todo el encabezado inicial solo, como para alivianar un poco

En atom para que ayude a corregir el codigo, en la parte inferior derecha, al lado de la pestaña que dice github le dan click, les desplegara un menu con los diferentes lenguajes, ahi pueden escoger el que quieran o que lo auto detecte.
Cuando atom ya este configurado en la gramática html, solo es necesario escribir “<html”, darle enter y el se encarga de autocompletar todo el esqueleto de html.

se que es irrelevante pero cuando fredy hace la “funcion comer” se escucha como el personaje de plantas contra zombies

Es muy bueno saber la estructura de las etiquetas, pero como agregado adicional en SublimeText al escribir <html> el de escribe la estructura completa.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

No me funciona el charset no me modifica las tilde, agradezco cualquier ayuda.

alguien me ayuda con esto, es que no me queda al ponerlo en otra carpeta le doy y nada de nada.

Me gustaría saber como puedo configurar la consola de Atom para que las funciones se vean igual que en el vídeo, es que cuando escribo
document.write(“Hola estudiante”);
Me sale en gris y no con los colores del vídeo (Amarillo, azul y verde)

Aporte de clase:
Uso de DOM
Los objetos contienen:
○ Métodos: Funciones dentro de un objeto.
○ Atributos o propiedades: Variables internas que almacenan valores.
Cuando las funciones son parte de un objeto se les llama método. Método = una función que es parte de un objeto, en HTML se puede manejar como etiquetas con atributos como:
Meta Es un atributo que se coloca dentro de head, tiene el propósito de incluir información
Dentro de esta hay una opción llamada charset
Charset Es la encargada de decir al navegador el tipo de codificación que se va a usar para representar la información.
La mas popular es “utf-8” ya que esta nos añade una colección de letras la cual nos permite usar tildes o caracteres especiales.

Nota: Para cerrar una etiqueta sin contenido por dentro podemos dejarla como esta, o podemos añadirle un espacio seguido de />

En JS usamos algo muy similar al “método”, el cual es el objeto window, contiene el atributo location, su valor puede guardarse en la variable ruta.
Var ruta fue escrita en documento dentro el parámetro write.
Write es un método del objeto document, que es toda nuestra página web, el cual esta concatenando con un mensaje que dice “estas en ruta”

Location no es una cadena de texto, ya que js lo trata internamente como un objeto.

Por otro debemos mencionar que HTML tiene atributos por defecto, atributos que ya vienen con información antes de que nosotros empecemos a programar, console.log nos ayuda a saber si tenemos o no esta clase de atributos.

Generalmente los programadores profesionales tienen sus html independientes a todo lo relacionado a JS
Src (Source) Es un atributo que nos permite invocar un archivo script independiente desde otra carpeta, es importante saber que siempre se pone entre comillas la ruta del archivo que se desea llamar

En resumen:
○ Head y body son las únicas etiquetas que deben ir a la misma altura de html.
○ Windows.location devuelve la ruta de la página.
○ Para integrar soporte a tildes y letras especiales puedes usar métodos dentro de un head.
Para depurar un programa se usar console.log, con este puedes ver los mensajes dentro de la consola.

Ésto es lo que sale en la consola al usar console.log(console);
supongo que son las funciones(métodos) que tiene console.log

console {debug: ƒ, error: ƒ, info: ƒ, log: ƒ, warn: ƒ, …}
assert: ƒ assert()
clear: ƒ clear()
context: ƒ context()
count: ƒ count()
countReset: ƒ countReset()
debug: ƒ debug()
dir: ƒ dir()
dirxml: ƒ dirxml()
error: ƒ error()
group: ƒ group()
groupCollapsed: ƒ groupCollapsed()
groupEnd: ƒ groupEnd()
info: ƒ info()
log: ƒ log()
memory: (…)
profile: ƒ profile()
profileEnd: ƒ profileEnd()
table: ƒ table()
time: ƒ time()
timeEnd: ƒ timeEnd()
timeLog: ƒ timeLog()
timeStamp: ƒ timeStamp()
trace: ƒ trace()
warn: ƒ warn()
Symbol(Symbol.toStringTag): "Object"
get memory: ƒ ()
set memory: ƒ ()
proto: Object

No olviden guardar, estuve 5 min revisando por que no funcionaba ._.

A alguien más se le mutea por ratos?

Por aqui realizando mi primer comentario, como recomendación con todo respeto y entendido que todos aprendemos de distintas maneras; es bueno como ejercicio de recordatorio comentar los codigos que hemos hecho hasta el momento, tratando de comentar cada linea e indicando que es lo que hace.

Para quien no tenga conocimiento de como comentar en html o JS les dejo estos datos.

Comentario en html
Se realiza mediante una etiqueta de apertura (<!-- y) de cierre (–>) sin los parentesis, en medio de esta etiqueta realizamos el comentario

<!-- Esto es un comentario de HTML -->

Comentario en JS

En JS tenemos dos comentarios, comentario de linea y comentarios multi - linea.

Comentario de linea:
// Esto es un comentario de linea en JS

Comentario multilinea:
/*
Esto es
Un comentario
Multilinea en JS
*/

Cabe recordar que estos comentarios no afectan el funcionamiento del codigo y que sirven de “instructivo” para que más programadores les sea más facil de entender.

Como recomendación: No tienen que aprenderse todo de memoria, tienen es que saber que existe algo que hace otra cosa, pero lo importante es saber que existe, ya con la practica se iran acostumbrando, mientras tanto obviamente pueden Googlear y practicar haciendo proyectos propios, lo que se les ocurra

No olviden la técnica Pomodoro
25 min enfocados
5 minutos de descanso
3 sesiones seguidas y la ultima con un descanso de 15 minutos, te ayuda a que el cerebro le de tiempo de absorber todo, es una técnica de estudio

Si alguien esta viendo la clase y escribiendo codigo y necesita centrar su codigo en una sola linea y esta trabajando con VSC le das alt+z y te lo centra.

Le di a inspect acá en la pagina de Platzi y esperaba un mensaje oculto por parte de Freddy con el console.log XDDD

document.write("Un mensaje");

“write” es una función dentro del objeto “document” que ya viene definida. Al ser una función, debemos pasarle parámetros entre paréntesis para que haga algo.
.
Las funciones que pertenecen a objetos se llaman MÉTODOS. “write” es un método del objeto “document”.

window.location;

“location” (técnicamente) es un objeto dentro del objeto “window”, aunque se comporta como si fuese una variable dentro del objeto, porque es solamente un dato que por sí solo no ejecuta ninguna acción. Simplemente está ahí. Y como no hace nada, no se le pasan parámetros entre paréntesis. En todo caso, nosotros podemos extraer ese dato y usarlo para otra cosa en otra línea de código.
.
Las variables u objetos que forman parte de objetos se llaman ATRIBUTOS. “location” es un atributo del objeto “window”.
.
“location” podría ser una variable. Pero en realidad es un objeto porque tiene más cosas dentro. Es un objeto dentro de otro objeto.

Apuntes de la clase.

Si quieren reírse e ir al ritmo de Freddy, pónganlo en 0.5x

De manera breve, cómo funciona Window y Document:
![](

No sé si seré el único al que le dará curiosidad que será de la vida de muchos que comentaron hace 5 años…

A mi me aparecen bien las tildes sin ocupar el <meta charset = “utf-8”>. ¿Pero es necesario?
También quisiera saber como hacer un espacio o un enter entre 2 document.write para que no aparezcan en la misma linea.

  • Métodos: funciones dentro de un objeto
  • Atributo o propiedad: variables internas que almacenan valores

Espero no batallar con esos amigos.

en ese editor Atom…

con el documento en blanco, escriban html y enter

les escribe esto automaticamente

<!DOCTYPE html>
<html lang=“en” dir=“ltr”>
<head>
<meta charset=“utf-8”>
<title></title>
</head>
<body>

</body>
</html>

me cuentan como les fue…

buen dia

me costo mucho entender este video lo tuve que ver dos veces y en algunas partes bajarle la velocidad.

lo bueno es que pude aprender y aprovechar las herramientas que entrega la plataforma

La navegacion en Javasctript y en la mayoria de lenguajes de programacion es muy similar a la navegacion de terminal de linux
Subdirectorio: carpeta/archivo.ext
Directorio mayor: …/archivo.ext **
** Se usan …/ dependiendo de cuantos niveles hay que subir

Esto ha sido para mi una revelación, simplemente no puedo esperar la oportunidad de invertir no en uno, sino en dos o tres años hasta hacer toda una ruta de carrera solida en platzi

Llevó seis horas seguidas aprendiendo con este curso y solamente puedo decir que Platzi me tiene ¡ENAMORADO!

Lo hacen tan fácil para los que nunca hemos programado :’)

me dio mucha risa cuando dijo recargamos y no me cargo , vi ese lapso que paso pero despues se acuerda que cambio de carpeta , ese pedazo si me dio risa , buena profe freddy

En Visual Studio, al principio para ahorrarse escribir la estructura básica basta con escribir html:5 y se colocan todas las etiquetas básicas. (Head, body, title…)

Freddy explica de una manera tan natural que es supremamente entendible todo, muchas gracias bro

Me gustaría poder ver las clases con unas gafas vr… Así me siento que estoy ahí… Podrían ponerle esa opción porfavor

Siento que todo es muy fácil, lo que significa que la clase es muy buena y el mierdero se viene cuando me enfrente solo a esto. ¡Excelente!

Con respecto a <meta charset=“utf-8”/> investigando me encontré con que antes, en html4 se escribía diferente: <meta http-equiv=“content-type” content=“text/html; utf-8”>
Acá me entró una duda, es importante que aprenda la estructura de sintaxis de versiones anteriores de html? Hay algún fallo de seguridad por el uso de esta sintaxis en la actualidad?
Saludos

Al correr el primer ejemplo del document.write se ejecutó primero el .write que el h1, pensé que con solo poner el script al final del body era suficiente, pero no. Ahora entiendo la importancia del document.load

Es increíble como Freddy explica que es un objeto, función, método de un objeto en tan poquitos minutos y te lo explica de una forma súper entendible, cuando puedes ver videos de 10 minutos, que acaban explicándote los mismo que el en 3 minutos!

increíble, demasiado contento y emocionado… gracias Freddy Vega por tan fascinante clase!

Errores en la consola de Platzi 🤕🤯

- cuando la variables es parte de un objeto se le llama:atributo o propiedad - cuando una funcion es parte de un objeto se le llama: metodo.

Hola colegas, ¿Cómo controlan el orden con que sale un prompt?, porque no importa el orden donde coloque el código, pero me sigue apareciendo de primero y luego me carga el documento. Gracias.

Mi html corre, pero no entiendo por que cuando escribo el document.write, la palabra “document” no la muestra amarilla como a Freddy, sino que la muestra roja.
PD: el lenguaje lo tengo en HTML

Buenas, tengo una pequeña duda y a ver si alguien tan amable me la puede solucionar:

¿Por qué cuando abre document ya con el archivo de javascript independiente, se carga antes el script Sí funciona antes que el body del html si este está antes?

Saludos.

Con lo que aprendí hasta este vídeo, intente crear una “App” para poder enviar un mensaje por whatsapp a un numero que no tenga agregado.

¿Que piensan?


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Enviar Whatsapp</title>
    <style>
        body {font-family: Helvetica;}
    </style> 
</head>
<body>
    <h1>Enviar Whatsapp a un numero en especial</h1>
    
    <script>
	var x = prompt("Escriba el numero de Whatsapp a enviar incluya codigo de área")
	var numero = parseInt(x);
	var y = prompt("Ingrese el mensaje: ");
	let mensaje = y.replace(/ /g, "%20");
	var enlace = "https://wa.me/" + numero + "?text=" + mensaje;
	window.open(enlace)
	</script>
</body>
</html>

Explicación sobre método.
Funcion = conjunto de codigo, se usa para reciclar codigo
Metodo = funcion dentro de un objeto
Objeto = Es un objeto por ejemplo el Document (donde esta el html, css y js que el usuario ve)

Entonces si una funcion esta dentro de un objeto a eso se le llama metodo
"objeto(){funcion}" a esto llamamos metodo

Después de ver un montón de veces el video por fin entendí, recomiendo tomar apuntes de cada detalle y también de jugar con el código. Sigamos adelante 😄

Para los que quieran afianzar conocimientos, aprender desde de 0, o practicar JavaScript les recomiendo una App llamada GrassHopper, es de Google y es demasiado buena, a mi me ayudo bastante. Suerte!
https://grasshopper.app/es_419/

Escuchen algo; si se confunden primero cálmense que la programación es compleja y segundo lo tienen que escribir en algún lugar, y luego utilicen ese conocimiento para entender lo demás.

Los objetos tienen funciones, por ejemplo yo soy un objeto humano y tengo la función TRAGAR: ÑAMÑAMÑAM también tengo opciones, variables, no son funciones sino son simplemente datos.

Me reí mucho.

☛ Metodos son funciones de un objeto
☛ Atributos son variables internas del objeto
☛ <meta charset=“utf-8”> se usa para poder utilizar caracteres especiales en html, como la tilde, la Ñ, etc.
☛ console.log(algo); se usa para mostrar por la consola del navegador ese algo que necesitemos saber de nuestor codigo.

😊👍🏽

Métodos: cuando las funciones son parte de un objeto.
Atributo o propiedad: cuando una variable es parte de un objeto.

Al usar el document.write la palabra document no pone de color naranja, siempre queda roja. Cual es el motivo de esto?

Esto se pone cada vez mejor

Importante Cuando las funciones hacen parte de un objeto se les llama métodos.

Charset significa colección de caracteres o letras.