Capitulo 1 ➜ Manejo del DOM con Javascript

La cabecera de la página (código HTML y CSS)

Empecemos con una estructura básica de html, y con un fichero de estilos, el código de ambos lo encontrarás al final de la página, incluso encontrarás otros recursos como los logos e imágenes svg que usaremos en el sitio, la idea es que en cada lección avancemos un poco el aspecto visual de nuestro sitio de cursos online, del cual en la lección de hoy el código proporcionado te dará como resultado un sitio como el de la imagen a continuación de este párrafo; pero no estamos aquí para ver html y css, sino javascript y el fuerte de esta unidad será implementar un carrito de compras, que permita a los usuarios guardar en el carrito el curso que quieran comprar.

¿Por qué ya no se usa var? | Declarar variables en Js: Var vs Let

Creen un archivo .js que se llame “script” y enlacenlo a su respectivo archivo html, como esta en la raíz es solo poner el nombre del archivo y ya, en el archivo javascript voy a empezar haciendo uso de las variables, seguro ya has escuchado antes que la sentencia “var” ha caído en desuso, eso es cierto porque al momento de trabajar con React tu ya solo recurres a usar o let o const, pero veamos un poco el porque de tras de eso, miren var nos proporciona una forma de declarar variables, si declaras una variable de nombre “variable1” con var y más adelante decides crear otra variable, con el mismo nombre, otra vez usando var, dentro del mismo ámbito; el compilador de javascript te va a dejar hacerlo, es más, podemos mostrarlo en consola, y notaremos que será la última declaración la que es válida, y eso puede generar problemas, porque puede que a lo largo de un proyecto sin notarlo inicialices una “variable1” con un valor que no es el que estabas manejando antes, porque entre todo lo que escribes en tu archivo de js puro, pues se te puede olvidar que ya tienes una “variable1” declarada; por eso es que var a caído en desuso, cuando trabajemos en javascript lo normal sera usar let, porque a diferencia de var si nos marcará el error, “que no puedes volver a declarar la variable1 en el mismo ámbito” tanto en la consola del navegador, como en el editor de tu preferencia.

Manejo del Dom con Js

La cabecera en html y css que les hice hacer al principio, es para poder trabajar con el DOM, observen si no trabajas con React, puedes usar javascript puro para manipulara el DOM de la siguiente forma: debes darle a tu variable1, la interfaz document que para nuestro caso, representará a nuestra página web ya cargada en el navegador y nos servirá para acceder a todo su contenido, es decir a todo el DOM, para ello únicamente usamos el método “getElementById” y entre paréntesis colocaremos un id que tenemos en el html, “logo”, con eso listo ya tenemos al elemento que tenga el id logo en el dom, para ver cual es solo bastaría con echarle un vistazo desde la consola con el “console.log” y ya; en el Chrome, si acercas el puntero del ratón al contenido imprimido en la consola, veremos que se nos marca el logo de codea, porque es justo la etiqueta la que tiene el id “logo” en su html, vale ¿que podemos hacer con eso? desde el javascript, mucho, aparte de seleccionar al elemento, podemos seleccionar a los hijos del elemento, o al padre del elemento, (veremos como ir a por el padre de un elemento en la lección 4) también podemos agregarle atributos a la etiqueta del elemento o hasta estilos, veamos cómo se hace eso ultimo, primero recuperamos nuestra “variable1”, que como ahora es un objeto de la interfaz HTMLElement, que es lo que nos retorna el “getElementById”, ya podemos usar propiedades como el “style” que a su vez nos retorna un elemento del tipo CSSStyleDeclaration, y con el recién acceder a la propiedad que equivale al estilo que queremos cambiar, digamos, el padding, agregandole 30 píxeles, si lo vemos el navegador, notaran que el logo se movió un poco, eso gracias al padding, de 30 píxeles, ¿qué más podemos cambiar? intentemos cambiar el color de fondo, con background, igual de facil, pongamoslo color negro, y en el naveador el padding que agregamos ahora se ve de color negro, tambien les dije que podiamos acceder a los hijos o al padre de un elemento, pero eso lo estaremos viendo en las siguientes lecciones (leccion 3 y leccion 4).