Objetos nativos del navegador - DOM (Document Object Model / Arbol )
- Navigator: El navegador. Contiene las funciones del navegador, también te permite acceder también al sistema operativo como el gps, guardar datos en el disco duro, etc.
- Window: Tabs/Pestañas. Maneja cada una de las pestañas.
- Document: Página. Contiene todo lo que vemos dentro de nuestra página
Las funciones son de la siguiente forma:
funcion(parametro)
<aside>
💡 Cuando una función que hacen parte de un objeto se denominan metodo.
</aside>
<!DOCTYPE html>
<html>
<head>
<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;
document.write("Estas en: " + ruta);
</script>
</body>
</html>
En este caso, window.location no es una función, ya que no tiene los parentesis que suele tener una función. Por lo tanto, este es una variable. Además, está siendo llamada por el objeto window.
<aside>
💡 Cuando una variable hace parte de un objeto se denomina Atributo
</aside>
La etiqueta meta nos permite modificar el charset para permitir visualizar correctamente los caracteres especiales como las tildes.
<meta charset="utf-8" />
<aside>
💡 console.log() posee superpoderes XD
</aside>
- Ahora, crearemos un nuevo archivo para manejar de manera independiente el JavaScript y el HTML. Esté fue el resultado de ambos archivos
- Luego de aprender funciones y ciclos, aplicamos esto para realizar dibujos de calidad FREDDY VEGA 👌🏻. Estos son los documentos HTML y JavaScript y el resultado del codigo.
- En este, realizamos el dibujo a partir del input del usuario a través de eventos y formularios. Al reto le agregué unos checkbox y solucioné problemas como el de reiniciar el Canva para que el dibujo cambie. Este fue el resultado.
- Ahora, creamos un programa que permite dibujar a través de las flechas del teclado. Para practicar con los EventListener de JavaScritp