Platzi
Platzi

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

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 16D : 6H : 31M : 50S

Debes tener cuenta en Platzi

Para ver esta clase abierta debes iniciar sesión

Cómo funcionan Window y Document12/36

Veamos cómo utilizar el DOM

 

Los objetos contienen

 

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

 

Recuerda:

 

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

 

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

 

  • Para agregar soporte a tildes y letras especiales puedes usar dentro de head

 

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

Les recomiendo humildemente a todos que si tienen una duda usen todas las herramientas que tenemos para despegarlas, en la programacion es dificil saberlo todo , por lo tanto tenemos que complementar con algo de lectura para salir de esas dudas complicadas, tambien les recomiendo algo que yo estoy haciendo ya que me senti, por asi decirlo saturado de toda la informacion nueva que he obtenido, por lo tanto hace que nos enrredemos, pues lo que yo he hecho es volver a repetir la mayoria de los videos que ya visto, y pues me a ayudado a comprender mejor. 

Hasta pronto. 

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

Intentaré explicar que son objetos y como funcionan, si me equivoco por favor me corrigen.

Un objeto es una instancia de una clase, para que sea más entendible es un algo 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 esta dividido en dos partes:

  • CARACTERÍSTICAS: Las características son todo lo que representa el 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 esto se le llama ATRIBUTOS en el mundo de la programación.

  • FUNCIONALIDADES: Las funcionalidades son todos 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ÉTODOS 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);
}

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

Un boolean es una tipo de variable que solo puede tener 2 estados: True o False

Teniendo todo esto en cuenta, explicaré lo del vídeo del tutorial.

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 cuál 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");

Espero poder haberlos ayudado, si me equivoco por favor me corrigen.

Método:Función que hace parte de un objeto

Atributo:Es cuando una variable está dentro de un objeto

Console.log:Deja mensajes en la consola que no se muestra en el documento sino en la consola y se puede sacar los datos de cualquier objeto.


Para entender esto mejor les invito a que lean sobre programación orientada a objetos o POO. (https://es.wikipedia.org/wiki/Programación_orientada_a_objetos)

donde se explica con detalle lo que son las Clases, los Objetos o Instancias de Clase que es un Método o Función, Herencia entre otros conceptos.

Enriqueciendo un poco la Explicación de nuestro mentor Freddy en este caso document es un Objeto que pertenece a Una Clase y write es un método o función que pertenece al objeto document el cual recibe como parámetro una cadena de caracteres o String.

Un atajo para inspeccionar:

f12.

Para poder ir probando lo que ven en el video recomiendo usar: Codepen

Codepen_example

Depurar es arreglar un error dentro de un código. Esto es importante porque cuando programas la mayor parte del tiempo estarás depurando para que tu código corra bien.
Cuando las funciones son parte de un objeto se llaman métodos.
console.log deja mensajes dentro de la consola.

Aaaaah ya entiendo todooo, cuando Freddy decia que pesaba 77 en realidad no era solo un ejemplo (Freddy nos mintio).


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.
  • Los objetos tienen funciones (métodos) y variables (atributos).
  • Cuando las funciones son partes de un objeto, de llaman métodos.
  • Cuando las variables son parte de un objeto se le llama atributo.
  • Depurar es el proceso de arreglar errores en el código
  • Console.log sirve, entre otras cosas, para ver todos los atributos y metodos de un objeto.
  • Las etiquetas html tienen atributos

Diferencia entre MÉTODO Y ATRIBUTO o PROPIEDAD

document = OBJETO
.write = FUNCIÓN
//FUNCIÓN + OBJETO = MÉTODO
//Una función que hace parte de un objeto.
document.write = MÉTODO


window = OBJETO
.location = VARIABLE del objeto window
//VARIABLE + OBJETO = ATRIBUTO o PROPIEDAD
//Una variable que hace parte de un objeto.
window.location = ATRIBUTO o PROPIEDAD

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

Gracias Platzi por actualizar este curso, se avanza mas rápido que con el anterior :D 

Hola a todo mis compañeros que como yo iniciamos este curso de programacoin basica, quiero aprovechar este espacio para compartir mi experencia en la plataforma y el curso como tal, y pues me siento muy satisfecho con lo que brindan y prometen en Platzi, se nota el esfuerzo tan grande que le ponen para llevar toda esta informacoin a nosotros. 

Pues al comienzo vamos a tener muchas dudas y hasta ganas de dejarlo, por que no entendemos nada sobre programacion pero no dejemos apagar esa flamita que tenemos por aprender y volvernos unos excelentes profesionales en programacion o en cualquier area que decidamos continuar. 

¿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

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

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.

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!

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

Por fin logre hacerle el console al propio console como lo dijo Freddy, de esta forma podemosver todos sus elementos internos.


var ruta = document.location;

console.log(console);

document.write("Estas en " + ruta.console); 


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.

Jejeje, la consola en Platzi
Screenshot_20200526_204145.png

Objetos predeterminados en la web:
Navigator
Window
Document

Funciones:
del verbo hacer, ejemplo:
freddy.comer
freddy es el objeto, comer es la funcion.
document.write
document es el objeto, write es la funcion y el objeto utiliza un metodologia para transmitir un mensaje en este caso lo escribe o write.

Variables:
del verbo tener, ejemplo:
freddy.peso
freddy es el objeto, peso es algo que se le atribuye o que es parte de el.
window.location
window es el objeto y location es algo que se le atribuye a window, es poseedor de una direccion en este caso location, que es propio de cualquier ventana, su url.

Objeto.Funcion = Metodo
Objeto.Variable = Atributo ó Propiedad

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.

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

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

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

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

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

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.

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

Siempre he trato de manipular y entender código, pero ver como funciona el código hace que programar sea mas fácil.

hola

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.

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

.- 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,

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

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>

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

Recuerden siempre practicar, y si tienen alguna duda repitan el video o pregunten por este medio, saludos a todos aprogramar 

Que bien sabe explicar, estoy alucinando (que pena que no tuve a este profesor cunado aprendi html !) aprender asi es una delicia.

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, 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.

Gracias Freddy por tu buena explicacion del tema tengo 12 años y entiendo muy bien¡¡¡

A alguien más se le mutea por ratos?

Poder manejar un código html separado de una código Javascript, permite una lectura mas amable del contenido, se ve mucho mas organizado, minimiza el error por saturación de código y agiliza el cargue de nuestro archivo html en el navegador.

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?

É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

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.

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)

Esto se pone cada vez mejor

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

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

document.jpgcodigo.jpg

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

Miren los videos y practiquenlo una y otra vez, hasta que lo sepan de memoria.

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>

Charset significa colección de caracteres o letras.

"Método" se refiere a una función dentro de un objeto

Hola comparto mis apuntes.
Un <script> se debe de colocar justo antes de cerrar el <body> porque en éste es donde se cargan todos los elementos visuales.

document.write es parte del DOM.
document. es un objeto que tiene todo el archivo representado en el navegador.
.write es una función del document y escribe en el momento en que nosotros lo invocamos.

Los objetos tienen funciones y cuando son parte de un objeto se llaman Métodos.

window es toda mi ventana.Todas las pestañas. Uno de sus componentes son las Rutas.

Cuando una variable es parte de un objeto se le llama atributo o propiedad. . Para utilizar letras especiales en HTML se cuenta con la etiqueta ** meta** que tiene un atributo llamado** utf-8**.

La condición del Programador es escribir código que se rompe. Y luego. Tratar de arreglarlo. Una de las formas es utilizar** console.log**

console.log Es un super poder para encontrar como esta escrito un objeto por dentro y sacarle todos los datos interesantes que necesitemos.

Una buena practica de Programación que debemos tener es:
tener un archivo por cada exención que utilicemos.
como .html y .js

Min: 10.35 esta bien que diga ? Y incluso , jeje

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

Estaba media hora mirando que habia hecho mal y escribi scirp y no script

Muy buena Clase

Excelente Clase ya le estoy cogiendo el sabor a esto.

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.

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.

Es muy buena practica, empezar a separar las estructuras ❤️

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

Los objetos contienen

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

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

Platzi es lo que Steve Jobs pensaba hacer con la educacion antes de morir.

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?

atrapenme que voy volando

Me encantó la clase, me siento emocionada porque si me salió y no tenia nociones de programación 😃

5(2).png5(1).png

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>

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

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.

En Atom con escribir <!D y darle tab, ya crea el esqueleto en HTML

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

ejemplo.jpg

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.

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/

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 😄

¡Esa manera de explicar Freddy, es increíble!

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

tengo un problema con este video en particular y es por eso que quiero brindar ayuda por si alguine mas esta en mi situacion , no entiendo nada apartir del minuto 9 todo es puro ruido ; para esto te recomiendo lo siguiente :

° si fredy comienza a escribir codigo y lo explica al mismo tiempo , tomate tu tiempo y ecribelo tu mismo depsues lo ves exclusivamente a el .
°si tu codigo no funciona y fredy sigue hablando hay un boton de pausa, pon pausa y revisa tu codigo no todos podemos a la primera no eres el unico o unica,
°si derrepente entraste en una laguna mental mientras el fredy no para de hablar y cuando te das cuenta el pinche fredy ya esta hablando de otra cosa, muy simple solo regresa al punto en el que te quedaste y reproduce el video denuevo procura poner un poco mas de atencion.

escribo esto porque llevo viendo esta clase por 2semanas con intervalos y aun no la comprendo al 100% , seguramente tu no estas tan mal como yo y aunque lo estuvieras descuida todos tenemos nuestro ritmo , esto es solo un curso de programacion basica no te aflijas las cosas que no entiendas o conceptos que no domines aqui lo entenderas en alguna clase de javascript o de phyton de forma inconciente o hasta puede que tu [email protected] en tu retorcidamente de programador le des tu propio significado y manera de entender y usar efectivmanete .
no tengas miendo de tropezar aqui , es solo una pequeña caida de un monton que vienen por delante y de los cuales te vas a levantar indudablemnte , por que una persona con la voluntad suficiente como para estar aqui leyendo esto hasta este punto puede sin ningun problema seguir adelante . animo yo confio en ti campeon :,3 .

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>

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.

No me funciona el archivo codigo.js a que se debe?

error.jpg

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

Jajaja... presioné Ctrl+W cuando Freddy lo dijo y se me cerro la ventana de Platzi XD. A alguien más le paso? :D

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.

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

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

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

¿Que es span y meta?

Les recomiendo humildemente a todos que si tienen una duda usen todas las herramientas que tenemos para despegarlas, en la programacion es dificil saberlo todo , por lo tanto tenemos que complementar con algo de lectura para salir de esas dudas complicadas, tambien les recomiendo algo que yo estoy haciendo ya que me senti, por asi decirlo saturado de toda la informacion nueva que he obtenido, por lo tanto hace que nos enrredemos, pues lo que yo he hecho es volver a repetir la mayoria de los videos que ya visto, y pues me a ayudado a comprender mejor. 

Hasta pronto. 

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

Intentaré explicar que son objetos y como funcionan, si me equivoco por favor me corrigen.

Un objeto es una instancia de una clase, para que sea más entendible es un algo 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 esta dividido en dos partes:

  • CARACTERÍSTICAS: Las características son todo lo que representa el 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 esto se le llama ATRIBUTOS en el mundo de la programación.

  • FUNCIONALIDADES: Las funcionalidades son todos 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ÉTODOS 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);
}

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

Un boolean es una tipo de variable que solo puede tener 2 estados: True o False

Teniendo todo esto en cuenta, explicaré lo del vídeo del tutorial.

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 cuál 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");

Espero poder haberlos ayudado, si me equivoco por favor me corrigen.

Método:Función que hace parte de un objeto

Atributo:Es cuando una variable está dentro de un objeto

Console.log:Deja mensajes en la consola que no se muestra en el documento sino en la consola y se puede sacar los datos de cualquier objeto.


Para entender esto mejor les invito a que lean sobre programación orientada a objetos o POO. (https://es.wikipedia.org/wiki/Programación_orientada_a_objetos)

donde se explica con detalle lo que son las Clases, los Objetos o Instancias de Clase que es un Método o Función, Herencia entre otros conceptos.

Enriqueciendo un poco la Explicación de nuestro mentor Freddy en este caso document es un Objeto que pertenece a Una Clase y write es un método o función que pertenece al objeto document el cual recibe como parámetro una cadena de caracteres o String.

Un atajo para inspeccionar:

f12.

Para poder ir probando lo que ven en el video recomiendo usar: Codepen

Codepen_example

Depurar es arreglar un error dentro de un código. Esto es importante porque cuando programas la mayor parte del tiempo estarás depurando para que tu código corra bien.
Cuando las funciones son parte de un objeto se llaman métodos.
console.log deja mensajes dentro de la consola.

Aaaaah ya entiendo todooo, cuando Freddy decia que pesaba 77 en realidad no era solo un ejemplo (Freddy nos mintio).


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.
  • Los objetos tienen funciones (métodos) y variables (atributos).
  • Cuando las funciones son partes de un objeto, de llaman métodos.
  • Cuando las variables son parte de un objeto se le llama atributo.
  • Depurar es el proceso de arreglar errores en el código
  • Console.log sirve, entre otras cosas, para ver todos los atributos y metodos de un objeto.
  • Las etiquetas html tienen atributos

Diferencia entre MÉTODO Y ATRIBUTO o PROPIEDAD

document = OBJETO
.write = FUNCIÓN
//FUNCIÓN + OBJETO = MÉTODO
//Una función que hace parte de un objeto.
document.write = MÉTODO


window = OBJETO
.location = VARIABLE del objeto window
//VARIABLE + OBJETO = ATRIBUTO o PROPIEDAD
//Una variable que hace parte de un objeto.
window.location = ATRIBUTO o PROPIEDAD

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

Gracias Platzi por actualizar este curso, se avanza mas rápido que con el anterior :D 

Hola a todo mis compañeros que como yo iniciamos este curso de programacoin basica, quiero aprovechar este espacio para compartir mi experencia en la plataforma y el curso como tal, y pues me siento muy satisfecho con lo que brindan y prometen en Platzi, se nota el esfuerzo tan grande que le ponen para llevar toda esta informacoin a nosotros. 

Pues al comienzo vamos a tener muchas dudas y hasta ganas de dejarlo, por que no entendemos nada sobre programacion pero no dejemos apagar esa flamita que tenemos por aprender y volvernos unos excelentes profesionales en programacion o en cualquier area que decidamos continuar. 

¿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

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

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.

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!

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

Por fin logre hacerle el console al propio console como lo dijo Freddy, de esta forma podemosver todos sus elementos internos.


var ruta = document.location;

console.log(console);

document.write("Estas en " + ruta.console); 


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.

Jejeje, la consola en Platzi
Screenshot_20200526_204145.png

Objetos predeterminados en la web:
Navigator
Window
Document

Funciones:
del verbo hacer, ejemplo:
freddy.comer
freddy es el objeto, comer es la funcion.
document.write
document es el objeto, write es la funcion y el objeto utiliza un metodologia para transmitir un mensaje en este caso lo escribe o write.

Variables:
del verbo tener, ejemplo:
freddy.peso
freddy es el objeto, peso es algo que se le atribuye o que es parte de el.
window.location
window es el objeto y location es algo que se le atribuye a window, es poseedor de una direccion en este caso location, que es propio de cualquier ventana, su url.

Objeto.Funcion = Metodo
Objeto.Variable = Atributo ó Propiedad

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.

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

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

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

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

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

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.

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

Siempre he trato de manipular y entender código, pero ver como funciona el código hace que programar sea mas fácil.

hola

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.

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

.- 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,

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

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>

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

Recuerden siempre practicar, y si tienen alguna duda repitan el video o pregunten por este medio, saludos a todos aprogramar 

Que bien sabe explicar, estoy alucinando (que pena que no tuve a este profesor cunado aprendi html !) aprender asi es una delicia.

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, 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.

Gracias Freddy por tu buena explicacion del tema tengo 12 años y entiendo muy bien¡¡¡

A alguien más se le mutea por ratos?

Poder manejar un código html separado de una código Javascript, permite una lectura mas amable del contenido, se ve mucho mas organizado, minimiza el error por saturación de código y agiliza el cargue de nuestro archivo html en el navegador.

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?

É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

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.

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)

Esto se pone cada vez mejor

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

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

document.jpgcodigo.jpg

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

Miren los videos y practiquenlo una y otra vez, hasta que lo sepan de memoria.

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>

Charset significa colección de caracteres o letras.

"Método" se refiere a una función dentro de un objeto

Hola comparto mis apuntes.
Un <script> se debe de colocar justo antes de cerrar el <body> porque en éste es donde se cargan todos los elementos visuales.

document.write es parte del DOM.
document. es un objeto que tiene todo el archivo representado en el navegador.
.write es una función del document y escribe en el momento en que nosotros lo invocamos.

Los objetos tienen funciones y cuando son parte de un objeto se llaman Métodos.

window es toda mi ventana.Todas las pestañas. Uno de sus componentes son las Rutas.

Cuando una variable es parte de un objeto se le llama atributo o propiedad. . Para utilizar letras especiales en HTML se cuenta con la etiqueta ** meta** que tiene un atributo llamado** utf-8**.

La condición del Programador es escribir código que se rompe. Y luego. Tratar de arreglarlo. Una de las formas es utilizar** console.log**

console.log Es un super poder para encontrar como esta escrito un objeto por dentro y sacarle todos los datos interesantes que necesitemos.

Una buena practica de Programación que debemos tener es:
tener un archivo por cada exención que utilicemos.
como .html y .js

Min: 10.35 esta bien que diga ? Y incluso , jeje

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

Estaba media hora mirando que habia hecho mal y escribi scirp y no script

Muy buena Clase

Excelente Clase ya le estoy cogiendo el sabor a esto.

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.

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.

Es muy buena practica, empezar a separar las estructuras ❤️

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

Los objetos contienen

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

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

Platzi es lo que Steve Jobs pensaba hacer con la educacion antes de morir.

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?

atrapenme que voy volando

Me encantó la clase, me siento emocionada porque si me salió y no tenia nociones de programación 😃

5(2).png5(1).png

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>

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

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.

En Atom con escribir <!D y darle tab, ya crea el esqueleto en HTML

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

ejemplo.jpg

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.

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/

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 😄

¡Esa manera de explicar Freddy, es increíble!

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

tengo un problema con este video en particular y es por eso que quiero brindar ayuda por si alguine mas esta en mi situacion , no entiendo nada apartir del minuto 9 todo es puro ruido ; para esto te recomiendo lo siguiente :

° si fredy comienza a escribir codigo y lo explica al mismo tiempo , tomate tu tiempo y ecribelo tu mismo depsues lo ves exclusivamente a el .
°si tu codigo no funciona y fredy sigue hablando hay un boton de pausa, pon pausa y revisa tu codigo no todos podemos a la primera no eres el unico o unica,
°si derrepente entraste en una laguna mental mientras el fredy no para de hablar y cuando te das cuenta el pinche fredy ya esta hablando de otra cosa, muy simple solo regresa al punto en el que te quedaste y reproduce el video denuevo procura poner un poco mas de atencion.

escribo esto porque llevo viendo esta clase por 2semanas con intervalos y aun no la comprendo al 100% , seguramente tu no estas tan mal como yo y aunque lo estuvieras descuida todos tenemos nuestro ritmo , esto es solo un curso de programacion basica no te aflijas las cosas que no entiendas o conceptos que no domines aqui lo entenderas en alguna clase de javascript o de phyton de forma inconciente o hasta puede que tu [email protected] en tu retorcidamente de programador le des tu propio significado y manera de entender y usar efectivmanete .
no tengas miendo de tropezar aqui , es solo una pequeña caida de un monton que vienen por delante y de los cuales te vas a levantar indudablemnte , por que una persona con la voluntad suficiente como para estar aqui leyendo esto hasta este punto puede sin ningun problema seguir adelante . animo yo confio en ti campeon :,3 .

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>

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.

No me funciona el archivo codigo.js a que se debe?

error.jpg

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

Jajaja... presioné Ctrl+W cuando Freddy lo dijo y se me cerro la ventana de Platzi XD. A alguien más le paso? :D

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.

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

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

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

¿Que es span y meta?