Eliseo Geraldo González
Juan Reyes
Carlos Gómez Mont
Miguel Gil Rosas
Victor Lozada
Bryan Estiven Silva Mercado
Jorge Méndez Ortega
Emanuel Alejandro Mamani
Carlos Enrique Ramírez Flores
Gledy Johana Chuquihuanga Abad
Diego Esteban Cortés Escandón
leonardo Oteca
Juan Esteban Galvis
Bryan Estiven Silva Mercado
Diego Antonio Gomez Diaz
Erik Elyager
David Colin
Alejandro Saucedo
Juan Pablo Castro
Ever Alfredo Sorto Ayala
Rafael Alejandro Santos Trujillo
CARLOS LEIVA
David Colin
José Cortés Molina
Cristian Blandon
José Alberto Ramírez Quiroz
Markin Piero Pulache Guarniz
José Alberto Ramírez Quiroz
José Alberto Ramírez Quiroz
Noe Mikhael Huaccharaque Ruiz
Nathaly Stefani Riaño Bejarano
Andres Rivera
![Francisco Garcia [C6]](https://static.platzi.com/media/avatars/avatars/garciafran_c845c2fe-2ea4-42db-a305-a7f4ef13b0fd.jpeg){kind=small}
Francisco Garcia [C6]
Manuel Rivera
Jorge Méndez Ortega
Los IDs de los elementos HTML están registrados como variables gloables, esto NO es un beta, está respaldado por el standard de HTML 5.
<div> <input id="$carbs" value="340"> </div>
Luego podemos acceder al elementos simplemente escribiendo el ID en la terminal o en JavaScript.
console.log($carbs.value) // => 340
No hay necesidad de selectores para IDs.
Buen dato. No conocía esta manera de acceder a los elementos.
Gracias por compartir, saludos!!
Es un poquito triste que en un curso de programación funcional en los tiempos que corren se use jQuery para acceder a los elementos del DOM. Entiendo que si usas Bootstrap ya te lo tienes que traer pero aún así… 😦
Opino lo mismo !
sin dudas
No megusta usar jQuery entiendo que por facilidad y practicidad se utilize pero en caso estoy utilizando JS puro por lo que el codigo queda de la siguiente manera.
const compose = (...functions) => data => functions.reduceRight((value, func) => func(value), data) const $DESCRIPTION = document.getElementById("description"); const $CALORIAS = document.getElementById("calorias"); const $CARBOIDRATOS = document.getElementById("carboidratos"); const $PROTEINAS = document.getElementById("proteinas");
Nota: Como una buena práctica estoy utilizando el signo $ para identificar de manera más fácil las referencias al DOM.
Como se muestra en la imagen al igual que con jQuery puedo tener acceso a las propiedades del los inputs, por cierto en ves de utilizar document.getElementById("calorias"); podria a ver utilizado document.querySelector("#calorias");
yo lo hice de la siguente manera, espero que les ayude
const data = { 'description': document.getElementById('description').value, 'calories': document.getElementById('calories').value, 'carbs': document.getElementById('carbs').value, 'protein': document.getElementById('protein').value }
Bien!! gracias!
let inputs = document.getElementsByTagName(‘input’)
let {
desc,
cal,
carb,
prote } = inputs
let { description, calories, carbohydrates, protein } = document.getElementsByTagName(‘input’);
sería mejor, ya que inputs lo estas guardando en memoria y es innecesario
Wow! que buena jugada, la voy a implementar
JQuery ya no se usa, dejo el código de la clase en JavaScript Vanilla:
// VARIABLES DE LOS INPUTS let Description = document.getElementById('Descripcion'); let Calories = document.getElementById('Calorias'); let Carbs = document.getElementById('Carbs'); let Proteinas = document.getElementById('Protein'); // VALORES DE LOS INPUTS Description.value; Calories.value; Carbs.value; Proteinas.value;
Curso para pasar de JQuery a JavaScript: https://platzi.com/cursos/jquery-js/
me hubiera gustado que se use JS puro en el proyecto
Porque no definir las variables como const (Para que sean inmutables)?
Concuerdo, yo las hubiera definido como const, incluso por costrumbre en JQuery antepongo el '$' para saber que son elementos del DOM.
const $description = $('#description')
No hay ningun problema con usar let, pero si creo que son elementos que dificilmente vamos a necesitar que cambien y por eso conviene usar const.
Declarar objetos con const no los hace inmutables:
const post = { title: "Some Title" } post.title = "New Title" console.log(post.title) // "New Title"
document.querySelector(’#carbs’)
js
const $Calories = document.getElementById ("Calories"); const $description = document.getElementById ("description"); const $carbs = document.getElementById ("carbs"); const $Protein = document.getElementById ("Protein"); console.log (`Calories: ${$Calories.value}`);``` html
<input type="text" class="form-control mb-2 mr-sm-2" placeholder="Description" id= "Description"> </div> <div class="col"> <input type="number" min="0" class="form-control mb-2 mr-sm-2" placeholder="Calories" id= "Calories"> </div> <div class="col"> <input type="number" min="0" class="form-control mb-2 mr-sm-2" placeholder="Carbs" id= "carbs"> </div> <div class="col"> <input type="number" min="0" class="form-control mb-2 mr-sm-2" placeholder="Protein" id= "Protein"> </div>```
const $DESC = document.getElementById('description'); const $CALORIES = document.getElementById('calories'); const $CARBS = document.getElementById('carbs'); const $PROTEIN = document.getElementById('protein');
por que se antepone el signo de dolar a las variables ?
A '$' en una variable no significa nada especial para el intérprete, al igual que un guión bajo.
Por lo que he visto, muchas personas que utilizan jQuery (que es lo que su código de ejemplo se parece a mí) tienden el prefijo variables que contienen un objeto jQuery con un $ para que se identifican con facilidad y no mezcladas con, por ejemplo, los números enteros.
La función signo de dólar $() en jQuery es una función de biblioteca que se utiliza con frecuencia, por lo que un nombre corto es deseable.
pero no explica la parte del codigo: const compose = (...function) => data => functions.reduceRight() => func(value), data)
para que son los tres puntos (... ) ? para que es la flecha con el igual. => ? por que llama doblemente a la funcion, ? para que es el func , ? es que esto lo enreda a uno, y toca es adivinar.
Hola Carlos! Los tres puntos se conocen como Sintaxis Spread
Comparto mi codigo usando vanilla JS
let descripcion = document.getElementById("descripcion"); let calories = document.getElementById("calories"); let carbs = document.getElementById("carbs"); let protein = document.getElementById("protein");
Hola :) No olvides poner tus aportes en la sección de "Aportes" para que tengan mucha más visibilidad de acuerdo a su utilidad.
¡Saludos!
En 2022 y durante el transcurso del curso no usare nada de Jquery desarrollare el programa con API Web actuales para el manejo del DOM esto como reto personal para tambien practicar mi manejo del DOM por lo que recomiendo lo mismo
muy bien
Lo hecho en esta clase con el Js actual podemos tener solo un apuntador (CONST) y separar las variables mediante comas por cuestiones de demostrar la sustitucion de JQuery use querySelector pero en la practica es mejor usar getElementById ya que el navegador lo renderiza mucho mas rapido
const $description = document.querySelector("#description").value, $calories = document.querySelector("#calories").value, $carbs = document.querySelector("#carbs").value, $protein = document.querySelector("#protein").value;
En las ultimas actualizacion de Vanilla Js, ya no es necesario el uso de JQuery para trabajar con el DOM, podemos utilizar el seleccionador de esta forma
document.querySelector("#description").value //Guardado en variable const description = document.querySelector("#description").value;
Jquery Vs. VanillaJs
$(’#description’) Vs. document.getElementById(‘description’)
Para obtener el valor con VanillaJS:
let description = document.getElementById('description') console.log(description.value)
¿esto también es vanilla: document.querySelector('#descripcion') ?
Listo
const $description = document.querySelector('#description'); const $carbs = document.querySelector('#description'); const $calories = document.querySelector('#description'); const $protein = document.querySelector('#description');```
Este curso ya tiene tiempo que lo tome, pero se me parecio interesante aplicarlo utilizando TypeScript, ya que seria bueno para iniciar a practicar
