Introducción a JavaScript

1

¿Por qué aprender JavaScript?

2

¡Hola Mundo! en Mac

3

¡Hola Mundo! en Windows

4

Anatomía de una variable

5

Tipos de datos en JavaScript

6

Creación de strings

7

Operadores aritméticos

8

Conversión de tipos: Type Casting y Coerción

9

Conversión de tipos explícita e implícita

Estructuras de Control y Lógica

10

Operadores de comparación

11

Operadores lógicos

12

Ejecución condicional: if

13

Ejercicio: Adivina el número

14

Ejecución condicional: switch

15

Loop: for

16

Loop: for of

17

Loop: for in

18

Loop: while

19

Loop: do while

Funciones y This

20

Anatomía de una función

21

Funciones vs Métodos

22

Funciones puras e impuras

23

Arrow function y enlace léxico

24

Contextos de ejecución y scope chain

25

¿Qué es Closure?

26

Preguntas a Desarrolladores Senior: ¿Por qué aprender Desarrollo Web?

Manipulación de Arrays

27

Introducción a Arrays

28

Mutabilidad e inmutabilidad de Arrays

29

Modificación básica del final con push( ), pop( )

30

Iteración con map( ) y forEach( )

31

Filtrado y reducción con filter( ) y reduce( )

32

Búsqueda de elementos con find( ) y findIndex( )

33

Crear copias con slice( )

34

Spread operator: casos de uso

Programación Orientada a Objetos

35

Anatomía de un Objeto

36

Trabajando con objetos en JavaScript

37

Función constructora

38

¿Qué es una clase?

39

Prototipos y herencias

40

Herencia en la práctica

41

Prototipos en la práctica

42

this en JavaScript

43

Proyecto: Crea una red social

44

Proyecto: Crea una red social parte 2

Asincronía en JavaScript

45

¿Cómo funciona el JavaScript Engine?

46

Promesas en JavaScript

47

Usando Async y await en JavaScript

48

For await of

49

¿Cómo funciona la web?

50

¿Cómo funciona HTTP?

51

Método GET en JavaScript

52

Método POST en JavaScript

53

Método DELETE en JavaScript

54

Importancia del id en el método DELETE

55

ECMAScript 6 y tus siguientes pasos

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Importancia del id en el método DELETE

54/55
Recursos

Aportes 11

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Excelenete curso, en algunas aprtes si me estaría bueno una explicación mejor, con respecto a cosas que pasana en el código. Aun así me encantoooo. ![](https://static.platzi.com/media/user_upload/64b41036161eeacc1154817ca052b526-1d504f9f-164a-40b1-a55f-92ad6fefd514.jpg) ajajajaj a seguir aprendiendo<3
Usualmente, el navegador asigna un valor unico a la propiedad ID cuando un elemento se crea dinamicamente en javascript (como un createElement por ejemplo) Ademas, el api, se ve explicitamente el id de cada post y ya directamente el codigo le estamos pidiendo que el id del elemento, sea igual al id que venia ese mismo elemento en el API.
Aprendi muchísimo con el maestro Diego De Granda. El mejor de todo platzi honestamente
Aqui mi solucion use bootstrap y cambie el codigo por que lo hice yo: ![](https://static.platzi.com/media/user_upload/image-e119f6b5-7525-4d2e-9798-935b8894e66d.jpg) html: ```js <header> <title>Project Posts</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </header> <body class="mt-5 container">

Project Posts

<form id="post-form" class="w-25 p-2 border border-3 rounded">
<label for="postTitle" class="form-label">Title</label> <input type="text" id="postTitle" class="form-control">
<label for="postBody" class="form-label">Body</label> <input type="text" id="postBody" class="form-control">
<button class="btn btn-primary">POST Content</button> <button id="buttonGetPosts" class="btn btn-primary">GET Content</button> </form>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <script src="project-posts.js"></script> </body> ```js: ```js const url = "https://jsonplaceholder.typicode.com"; const buttonGetPosts = document.getElementById("buttonGetPosts"); const postContainer = document.getElementById("post-container"); const postForm = document.getElementById("post-form"); async function sendHTTPRequest(method, url, data) { const reponse = await fetch(url, { method: method, body: JSON.stringify(data), headers: { "Content-Type": "application/json", } }); return await reponse.json(); } // Form buttons events postForm.addEventListener("submit", (event) => { event.preventDefault(); // Remove default action redirect form. const title = event.currentTarget.querySelector("#postTitle").value; const content = event.currentTarget.querySelector("#postBody").value; createPost(title, content); // (simulate, API not support method). }); buttonGetPosts.addEventListener("click", getPosts); // Articles delete button (simulate API not support method). postContainer.addEventListener("click", (event) => { if (event.target.tagName === "BUTTON") { const postId = event.target.closest("article").id; console.log(postId); sendHTTPRequest("DELETE", url + "/posts/" + postId); } }); async function createPost(title, content) { const userId = Math.random(); const post = { title: title, body: content, userId: userId, }; sendHTTPRequest("POST", url + "/posts", post); } async function getPosts() { const responseData = await sendHTTPRequest("GET", url + "/posts"); console.log(responseData); for (const post of responseData) { const newPost = document.createElement("article"); newPost.id = post.id; newPost.classList.add("card", "mt-3"); newPost.style.width = "18rem"; const newPostBody = document.createElement("div"); newPostBody.classList.add("card-body"); const newPostTitle = document.createElement("h5"); newPostTitle.classList.add("card-title"); newPostTitle.textContent = post.title; newPostBody.append(newPostTitle); const newPostSubtitle = document.createElement("h6"); newPostSubtitle.classList.add("card-subtitle", "mb-2", "text-body-secondary"); newPostSubtitle.textContent = "#" + post.id; newPostBody.append(newPostSubtitle); const newPostText = document.createElement("p"); newPostText.classList.add("card-text"); newPostText.textContent = post.body; newPostBody.append(newPostText); const newPostButtonDelete = document.createElement("button"); newPostButtonDelete.classList.add("btn", "btn-danger", "w-100"); newPostButtonDelete.innerText = "DELETE"; newPostBody.append(newPostButtonDelete); newPost.append(newPostBody); postContainer.append(newPost); } } ```
Veo que muchos ya ni comentaron, jaja. Pues, a mi parecer, estuvo muy sólido el curso. Hubiese preferido un poquito más de carne en los últimos temas, pero estoy muy satisfecho de repasar JavaScript (cabe señalar que no soy nuevo en el tema, por eso es un poco objetivo mi comentario). Ya buscaré más cursos de Diego, que sí es verdad que en algunas clases como que le faltó explicar un poco más. Por mi parte, estuvo bueno el curso. P.D.: Igual, le hubieran dejado más temas a la otra chava, xd.
En la clase sobre la importancia del ID en el método DELETE, se abordó cómo el ID, obtenido de la respuesta de una solicitud GET, es esencial para identificar el artículo que se desea eliminar. Al generar elementos en el DOM, se asigna el ID correspondiente a cada artículo, permitiendo que al realizar la eliminación, el servidor reconozca cuál elemento debe ser borrado. Este proceso es fundamental en la manipulación de datos en aplicaciones web y se basa en la interacción entre el cliente y el servidor mediante JavaScript.
Lo que paso con este curso es que inicialmente fue "JavaScript desde Cero" (si no estoy mal) que era de 80 clases aprox. Luego lo cortaron/dividieron en dos cursos, creería que es este "Fundamentos de JS" y "Manipulación del DOM" es por esa edición que hay clases que repiten contenido, o terminan de forma repentina. De igual manera a mi entender el orden de aprendizaje es HTML -> CSS -> JS
Siento que esta classe podria ser una con la pasada y una sola expliacion ademas de usar una api real de ustedes
Para el método DELETE implementé la siguiente solución: ```js postList.addEventListener("click", (event) => { console.log(event.target.parentElement.id) event.target.parentElement.remove() const postId = event.target.parentElement.id; sendHTTPRequest("DELETE", `https://jsonplaceholder.typicode.com/posts/${postId}`) }) ```
Aqui mi solucion use bootstrap y cambie el codigo por que lo hice yo: html:\<header>    \<title>Project Posts\</title>     *\*    \<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">\</header> \<body class="mt-5 container">    \

Project Posts\

    \<form id="post-form" class="w-25 p-2 border border-3 rounded">        \
            \<label for="postTitle" class="form-label">Title\</label>            \<input type="text" id="postTitle" class="form-control">        \
        \
            \<label for="postBody" class="form-label">Body\</label>            \<input type="text" id="postBody" class="form-control">        \
                \<button class="btn btn-primary">POST Content\</button>        \<button id="buttonGetPosts" class="btn btn-primary">GET Content\</button>    \</form>     \
            \
    *\*    \<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">\</script>    \<script src="project-posts.js">\</script>\</body> ```js <header> <title>Project Posts</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </header> <body class="mt-5 container">

Project Posts

<form id="post-form" class="w-25 p-2 border border-3 rounded">
<label for="postTitle" class="form-label">Title</label> <input type="text" id="postTitle" class="form-control">
<label for="postBody" class="form-label">Body</label> <input type="text" id="postBody" class="form-control">
<button class="btn btn-primary">POST Content</button> <button id="buttonGetPosts" class="btn btn-primary">GET Content</button> </form>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <script src="project-posts.js"></script> </body> ```js: ```js const url = "https://jsonplaceholder.typicode.com"; const buttonGetPosts = document.getElementById("buttonGetPosts"); const postContainer = document.getElementById("post-container"); const postForm = document.getElementById("post-form"); async function sendHTTPRequest(method, url, data) { const reponse = await fetch(url, { method: method, body: JSON.stringify(data), headers: { "Content-Type": "application/json", } }); return await reponse.json(); } // Form buttons events postForm.addEventListener("submit", (event) => { event.preventDefault(); // Remove default action redirect form. const title = event.currentTarget.querySelector("#postTitle").value; const content = event.currentTarget.querySelector("#postBody").value; createPost(title, content); // (simulate, API not support method). }); buttonGetPosts.addEventListener("click", getPosts); // Articles delete button (simulate API not support method). postContainer.addEventListener("click", (event) => { if (event.target.tagName === "BUTTON") { const postId = event.target.closest("article").id; console.log(postId); sendHTTPRequest("DELETE", url + "/posts/" + postId); } }); async function createPost(title, content) { const userId = Math.random(); const post = { title: title, body: content, userId: userId, }; sendHTTPRequest("POST", url + "/posts", post); } async function getPosts() { const responseData = await sendHTTPRequest("GET", url + "/posts"); console.log(responseData); for (const post of responseData) { const newPost = document.createElement("article"); newPost.id = post.id; newPost.classList.add("card", "mt-3"); newPost.style.width = "18rem"; const newPostBody = document.createElement("div"); newPostBody.classList.add("card-body"); const newPostTitle = document.createElement("h5"); newPostTitle.classList.add("card-title"); newPostTitle.textContent = post.title; newPostBody.append(newPostTitle); const newPostSubtitle = document.createElement("h6"); newPostSubtitle.classList.add("card-subtitle", "mb-2", "text-body-secondary"); newPostSubtitle.textContent = "#" + post.id; newPostBody.append(newPostSubtitle); const newPostText = document.createElement("p"); newPostText.classList.add("card-text"); newPostText.textContent = post.body; newPostBody.append(newPostText); const newPostButtonDelete = document.createElement("button"); newPostButtonDelete.classList.add("btn", "btn-danger", "w-100"); newPostButtonDelete.innerText = "DELETE"; newPostBody.append(newPostButtonDelete); newPost.append(newPostBody); postContainer.append(newPost); } } ```const url = "https://jsonplaceholder.typicode.com"; const buttonGetPosts = document.getElementById("buttonGetPosts");const postContainer = document.getElementById("post-container");const postForm = document.getElementById("post-form"); async function sendHTTPRequest(*method*, *url*, *data*) {    const reponse = await fetch(*url*, {        method: *method*,        body: JSON.stringify(*data*),        headers: { "Content-Type": "application/json", }    });    return await reponse.json();} *// Form buttons events*postForm.addEventListener("submit", (*event*) => {    *event*.preventDefault(); *// Remove default action redirect form.*     const title = *event*.currentTarget.querySelector("#postTitle").value;    const content = *event*.currentTarget.querySelector("#postBody").value;    createPost(title, content); *// (simulate, API not support method).*});buttonGetPosts.addEventListener("click", getPosts); *// Articles delete button (simulate API not support method).*postContainer.addEventListener("click", (*event*) => {    if (*event*.target.tagName === "BUTTON") {        const postId = *event*.target.closest("article").id;        console.log(postId);        sendHTTPRequest("DELETE", url + "/posts/" + postId);    }}); async function createPost(*title*, *content*) {    const userId = Math.random();    const post = {        title: *title*,        body: *content*,        userId: userId,    };      sendHTTPRequest("POST", url + "/posts", post);} async function getPosts() {    const responseData = await sendHTTPRequest("GET", url + "/posts");    console.log(responseData);     for (const post of responseData) {        const newPost = document.createElement("article");        newPost.id = post.id;        newPost.classList.add("card", "mt-3");        newPost.style.width = "18rem";         const newPostBody = document.createElement("div");        newPostBody.classList.add("card-body");         const newPostTitle = document.createElement("h5");        newPostTitle.classList.add("card-title");        newPostTitle.textContent = post.title;        newPostBody.append(newPostTitle);         const newPostSubtitle = document.createElement("h6");        newPostSubtitle.classList.add("card-subtitle", "mb-2", "text-body-secondary");        newPostSubtitle.textContent = "#" + post.id;        newPostBody.append(newPostSubtitle);         const newPostText = document.createElement("p");        newPostText.classList.add("card-text");        newPostText.textContent = post.body;        newPostBody.append(newPostText);         const newPostButtonDelete = document.createElement("button");        newPostButtonDelete.classList.add("btn", "btn-danger", "w-100");        newPostButtonDelete.innerText = "DELETE";        newPostBody.append(newPostButtonDelete);                newPost.append(newPostBody);        postContainer.append(newPost);    }}
Ya casi se acaba...