Introducción
¿Ya tomaste el Curso Básico de JavaScript?
Prueba de JavaScript
Test de JavaScript
Variables
Funciones
Condicionales
Ciclos
Arrays y objetos
Bonus: reducción de condicionales
Quiz: Prueba de JavaScript
Manipulación del DOM
Cómo conectar JavaScript con HTML
Leyendo HTML desde JavaScript
Escribiendo HTML desde JavaScript
Eventos en JavaScript: interactuando con usuarios
addEventListener
Quiz: Manipulación del DOM
Contribución a proyectos
Conectando GitHub a proyectos de JavaScript
Proyectos con JavaScript y GitHub desde cero
Fork a proyectos en GitHub
Analizando código de proyectos open-source
Fusión del menú en desktop
Fusión del menú en mobile
Carrito de compras
Lista de productos: HTML a partir de arrays
Detalles de un producto
Interacción entre todos los componentes
Pull Requests: aportando código a proyectos en GitHub
Quiz: Contribución a proyectos
Despliegue
Deploy con GitHub Pages
Quiz: Despliegue
Próximos pasos
¿Cuál es tu sueño con JavaScript?
Quiz: Próximos pasos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 20
Preguntas 3
Yo agregué un **replaceWith **y me salió “considero que similar”, no sé si vaya a explotar mi compu, pero se los comparto:
const img = document.createElement('img');
img.setAttribute('src', 'https://i.pinimg.com/originals/8b/02/40/8b02409f975c98c89e15bc089e3bd289.gif');
console.log(img);
pid.replaceWith(img);
Aqui les dejo mis notas y mis practicas de los ejercicios propuestos en clase:
Imagen que usa el profesor en el ejemplo:
https://static.platzi.com/static/images/conf/[email protected]
Existen muchos atributos o propiedades, las cuales nos ayudan bastante y algunas ya se mencionaron, pero para modificar o leer ese atributo o propiedad tenemos a:
El cual nos ayuda a leer los atributos que tenga nuestro elemento (en este caso nuestro elemento es una etiqueta de párrafo <p>).
.
Esto nos permite modificar el atributo, en este caso nuestro atributo es una clase.
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic JavaScript | Practice Excercise</title>
</head>
<body>
<p class="text">Este es el parrafo lleno de texto</p>
<script src="./js/script.js"></script>
</body>
</html>
.
// Esto es JavaScript
const parrafo = document.querySelector('.text');
// getAttribute
parrafo.getAttribute('class');
// setAttribute
parrafo.setAttribute('class', 'id');
Entonces esta es la forma para poder modificar los atributos de nuestros elementos en HTML
El curso va excelente. Abruma la cantidad de cosas que se deben saber; y es muy importante entender programación orientada a objetos. Creo que es necesario una introducción corta al significado del DOM para saber de donde salen tantos métodos y atributos de nuestras etiquetas en html.
comparto el código que usé para reemplazar una etiqueta <p> y poner la imagen.
const picture = document.createElement('img');
picture.setAttribute('src', 'https://i.pinimg.com/564x/bf/bd/a5/bfbda55942f57c1b6e68614249cc1727.jpg')
console.log(picture);
// parraf es la etiqueta <p> que se está reemplazando
parraf.replaceChildren(picture);
picture.setAttribute('width', '200px');
picture.setAttribute('height', '300px');
¡Qué clase tan bacanaaaaaaaa! 🚀
Platzilg fue lo mejor de esta clase
Con el ejercicio que Juan David propuso al final de la clase, luego de darle mil vueltas pensé en crear un string vacío para borrar el texto y luego insertar la imagen, pero en mi mente pensé que sería trampa y me rendí. Cuando seguí con el video vi que así era la solución. Me miro y lloro en el espejo y me siento estúpido, ilógico jajajajja😂😂😂 pero bueno, al menos ya se que así era
otra forma para haber borrado el texto era
elemento.textContent = " "
El próximo Platzilive con Freddy promocionando Platzilg.
con respecto al pequeño reto, yo lo hice accediendo a las propiedades del elemento p.
desde la consola podemos ver estas propiedades, dentro de childNodes hay una lista ( el texto y la imagen) selecciono con [0] para acceder a la lista text y dentro de este a la propiedad textContent.
pid.childNodes[0].textContent = ' ';
Lo mejor de este curso, en mi opinión, es que el profesor es muy ocurrente… puedes estar horas estudiando porque reír de sus comentarios te relaja un poco. Yo, por ejemplo, tuve que pausar el video cuando dice: “No debo hacer propaganda porque no nos han pagado” (Piensa un segundo) pantalla = Platzi-LG JAJAJAJJA morí.
appendchild es parecido al método .append pero en este caso solo admitirá nodos, por lo que NO podremos usar DOMString, es decir siempre que adjuntemos Nodos, podremos usar .append, .prepend y .appendchild, mientras que si queremos adjuntar una cadena de texto, solo podremos usar los métodos .append y .prepend.
Cuando hablamos de Clases en específico, existe un objeto, que funciona específicamente con las clases, y ese objeto es:
Este classList es un objeto que contiene una serie de métodos o funciones, los cuales nos van a ayudar a trabajar de manera más sencilla.
.
Ejemplo 1:
Vamos a agregar una clase a un elemento de HTML
const elemento = document.querySelector('p');
elemento.classList.add('container');
.
Ejemplo 2:
Vamos a eliminar una la clase que acabamos de crear en el elemento de HTML <p>
const elemento = document.querySelector('p');
elemento.classList.remove('container');
Una de las cosas que se mencionan en el curso y que es muy útil es, cuando vas a crear o cambiar un elemento de tipo HTML, a HTML o a texto:
const elementoHtml = document.querySelector('p');
const elementoTexto = document.querySelector('p');
elementoHtml.innerHTML = 'Esto es un cambio de un elemento HTML a HTML';
elementoTexto.innerText = 'Esto es un texto normal';
este curso esta para verse varias veces
minuto 14:13 el profe dice que para utilizar el querySelector se debe utilizar con un hashtag si fuera un Id y con un punto si fuera un párrafo. el punto se utiliza para las clases
Buenas tardes,
Yo lo realice la sustitución del text utilizando la propiedad replaceChildren
Ejemplo:
pid.replaceChildren(img);
Muchas gracias.
Atentamente
Damian Arenales
Escribi todo tal cual el curso pero me aparece error
Ayuda.
.
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.