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 鈥渧eh铆culo鈥 es una clase, y el veh铆culo f铆sico es una instancia de esa palabra 鈥渧eh铆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(鈥淓ste 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=鈥渦tf-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= 鈥渦tf-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, 鈥渘o鈥 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=鈥渦tf-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:
.
鈥渄ocument鈥, 鈥渨indow鈥 y 鈥渃onsole鈥 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(鈥渉ola鈥)
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 = 鈥渦tf鈥-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(鈥淭U 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 鈥渙pen 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=鈥渦tg-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 鈥渇uncion 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(鈥淗ola 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 鈥渦tf-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 鈥渕茅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 鈥渆stas 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 鈥渋nstructivo鈥 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");

鈥渨rite鈥 es una funci贸n dentro del objeto 鈥渄ocument鈥 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. 鈥渨rite鈥 es un m茅todo del objeto 鈥渄ocument鈥.

window.location;

鈥渓ocation鈥 (t茅cnicamente) es un objeto dentro del objeto 鈥渨indow鈥, 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. 鈥渓ocation鈥 es un atributo del objeto 鈥渨indow鈥.
.
鈥渓ocation鈥 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 = 鈥渦tf-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=鈥渆n鈥 dir=鈥渓tr鈥>
<head>
<meta charset=鈥渦tf-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=鈥渦tf-8鈥/> investigando me encontr茅 con que antes, en html4 se escrib铆a diferente: <meta http-equiv=鈥渃ontent-type鈥 content=鈥渢ext/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 鈥渄ocument鈥 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 鈥淎pp鈥 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=鈥渦tf-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.