Proyecto: Obtener el valor de los inputs

Clase 6 de 23 • Curso de Programación Funcional en JavaScript por Bedu

Eliseo Geraldo González

student•

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.

Juan Reyes

student•

Buen dato. No conocía esta manera de acceder a los elementos.

Carlos Gómez Mont

student•

Gracias por compartir, saludos!!

Miguel Gil Rosas

student•

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í… 😦

Victor Lozada

student•

Opino lo mismo !

Bryan Estiven Silva Mercado

student•

sin dudas

Jorge Méndez Ortega

student•

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");

Emanuel Alejandro Mamani

student•

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
  }

Carlos Enrique Ramírez Flores

student•

Bien!! gracias!

Gledy Johana Chuquihuanga Abad

student•

let inputs = document.getElementsByTagName(‘input’)

let {
desc,
cal,
carb,
prote } = inputs

Diego Esteban Cortés Escandón

student•

let { description, calories, carbohydrates, protein } = document.getElementsByTagName(‘input’);

sería mejor, ya que inputs lo estas guardando en memoria y es innecesario

leonardo Oteca

student•

Wow! que buena jugada, la voy a implementar

Juan Esteban Galvis

student•

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/

Bryan Estiven Silva Mercado

student•

me hubiera gustado que se use JS puro en el proyecto

Diego Antonio Gomez Diaz

student•

Porque no definir las variables como const (Para que sean inmutables)?

Erik Elyager

student•

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.

David Colin

teacher•

Declarar objetos con const no los hace inmutables:

const post = {
	title: "Some Title"
}

post.title = "New Title"

console.log(post.title) // "New Title"

Alejandro Saucedo

student•

document.querySelector(’#carbs’)

Juan Pablo Castro

student•

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>```

Ever Alfredo Sorto Ayala

student•

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 ?

Rafael Alejandro Santos Trujillo

student•

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.

CARLOS LEIVA

student•

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.

David Colin

teacher•

Hola Carlos! Los tres puntos se conocen como Sintaxis Spread

José Cortés Molina

student•

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");

Cristian Blandon

student•

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!

José Alberto Ramírez Quiroz

student•

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

Markin Piero Pulache Guarniz

student•

muy bien

José Alberto Ramírez Quiroz

student•

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;

José Alberto Ramírez Quiroz

student•

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;

Noe Mikhael Huaccharaque Ruiz

student•

Jquery Vs. VanillaJs
$(’#description’) Vs. document.getElementById(‘description’)

Nathaly Stefani Riaño Bejarano

student•

Para obtener el valor con VanillaJS:

let description = document.getElementById('description')
console.log(description.value)

Andres Rivera

student•

¿esto también es vanilla: document.querySelector('#descripcion') ?

Francisco Garcia [C6]

student•

Listo

Manuel Rivera

student•

const $description = document.querySelector('#description');
const $carbs = document.querySelector('#description');
const $calories = document.querySelector('#description');
const $protein = document.querySelector('#description');```

Jorge Méndez Ortega

student•

Este curso ya tiene tiempo que lo tome, pero se me parecio interesante aplicarlo utilizando TypeScript, ya que seria bueno para iniciar a practicar

Proyecto: Obtener el valor de los inputs

Introducción al curso y conceptos base

Qué aprenderás sobre la programación funcional

Programación funcional: qué es

Boilerplate: Base para el proyecto del curso

Funciones

Funciones Algebraicas y Funciones de JavaScript

Qué son funciones puras

Proyecto: Obtener el valor de los inputs

Objetos y Tipos de Memoria en JavaScript

Copiar y modificar objetos en JavaScript

Utilizando inmutabilidad en nuestras funciones

Proyecto: Validar inputs

Estado compartido en funciones

Estado compartido o shared state

Proyecto: Agregar elementos a la lista

Composición de funciones, Closures y Currying

Funciones compuestas o Function Composition

Completando las funciones para generar etiquetas HTML

Closures en programación funcional

Currying

Proyecto: Construyendo filas y celdas

Higher Order Functions

Introducción a las Higher Order Functions

Proyecto: Actualizando el total de calorías

Proyecto: Mostrar elementos

Proyecto: Eliminar elementos

Bonus: Declarative Programming

Programación Declarativa

Conclusiones

Conclusiones