Curso JavaScript desde 0 Funciones. Práctica guiada II. Vídeo 26

[@ericcastro007]

2019 y llevando el mejor curso de JavaScript de youtube. Saludos y gracias.

[@miguelsierra1971]

yo igual, muy buenos cursos a pesar de ser antiguos la explicación del profe es excelente.

[@santiagomedina6799]

Te agradezco por este ejercicio. En ánimo de ser más autodidacta tengo más o menos una semana viendo este vídeo a medias y haciendo el ejercicio para llegar a las metas que planteas por cuenta propia. Gracias a Dios lo he logrado. Mi solución es tan humilde como la suya y al final, la dejo como usted la plantea porque me ahorra una variable. Les recomiendo a todos que intenten hacer el ejercicio por su cuenta antes de ver la solución, no importa cuánto tiempo les tome. La satisfacción de lograrlo es un buen combustible para seguir esta ruta de aprendizaje.

[@hugovksy2429]

Minuto 15.40: yo pensando mil cosas retorcidas para resolver el problema y veo la solución, que me deja pasmado y con la boca abierta por lo simple, que sólo los genios pueden tener. ¡Maravilloso!

[@jaimesanchezgalvis]

2020 aprendiendo JavaScript Gracias por este aporte super curso

[@xeovanijuarez4376]

hombre mestro que esto si me ha costado enterdele pero sigo adelante

[@miguelangelvasquezgarcia8235]

Muchas gracias por estos videos, ya estamos en el 2021, pero sin embargo considero que estas bases estan muy bien para aprender.

[@marianopietroski722]

totalmente, yo tambien en 2021

[@josemanuelherrero6495]

Excelentes todos los cursos Juan.

[@Mr_Mayck]

Buenos dias reconozco q eres un maestro increhible, tu acento y tu manera de explicar son muy adaptables a nuestra capacidad de entendimiento, muchisimas gracias

[@pildorasinformaticas]

Gracias a ti por el comentario. Un saludo!

[@brianparodi2]

Me gusta tu sentido del humor, siempre te voy a agradecer por todo el conocimiento que tengo por ver tus videos. Ojala seas eterno Juan, abrazo grande.

[@ivansebastiannunez9953]

Excelente practica. Incluso necesaria para todo futuro programador. El mejor curso lejos.

[@d-landjs]

Se me ha complicado un poquito entenderlo , pero igual tuve que tomarlo con paciencia y analizarlo detenidamente!!! Siempre contento que seguir viendo sus tutos y poder aprender mucho!!!

[@fernandoayalaramos9227]

Yo llego un poco tarde aquí pero bueno... como me gusta mucho la programación y tu canal en general, en este vídeo preguntas cosas que haríamos diferente, a mi se me ocurre operar siempre con números en lugar de alternar entre strings y numbers, entonces para esta función la especifico así y me lo permite: var cifra=0; function display_numeros(numero){ document.getElementById("display").value=(cifra*10)+numero; cifra=document.getElementById("display").value; } Saludos y muchas gracias Juan, muy grande!

[@josemanuelherrero6495]

Hola. El problema es cuando cifra es un número decimal.

[@rogermartinez333]

saludos desde el 2020 excelente tus cursos !!

[@pildorasinformaticas]

Astrid JJG: Hola !! Sí, es posible hacer lo que tú dices. Pero el programa se complicaría muchísimo. Habría que trabajar con el evento keypress para detectar la pulsación de tecla y después también con la propiedad KeyCode para capturar el código de la tecla física. Cada tecla del teclado tiene un código y esta propiedad permite averiguar cuál es. Luego habría que recuperar el carácter de la tecla a partir del código anterior con fromCharCode.... en fín complicado. Un saludo

[@numero17100]

Yo lo hize con la función "eval" y funciono de maravilla con muy pocas lineas de códio solo lo digo como forma de feedback de igual manera la forma que utilizas es muy buena

[@pildorasinformaticas]

Muchas gracias por el aporte. Un saludo!!

[@victoriaramirezborges4612]

Revisa la documentación de JS y en especial la función eval(). OJO con ella. Te lo resumo así: no es imprescindible utilizar eval(); para obtener X resultado, pues entonces NO la utilices.

[@josejoaquinvillabona4924]

super muy bueno trabajo te felicito.... gracias desde colombia

[@versascemx]

Me encanta la forma en que analiza, y va descuartizando como funcionaria el problema y la solucion, deverdad excelente, yo que pensaba hacerlo con un arreglo para acumular los valors, luego convertir a string y deahi parecearlos.

[@pildorasinformaticas]

Bueno, como siempre digo. "en programación siempre hay varios caminos para llegar a Roma". Un saludo!!

[@eliasrj15]

Seguí el consejo de otros compañeros y me animé a intentarlo por mi cuenta... Aquí dejo mi Script de la Calculadora. var cifra=""; var opera=""; var num=""; function displaynumeros(numero) { cifra = cifra+numero; document.getElementById("display").value=cifra; } function calcular() { var res; if (opera=="suma"){ res= Number(num)+Number(cifra); }else if(opera=="resta"){ res= Number(num)-Number(cifra); }else if (opera=="multiplica"){ res= Number(num)*Number(cifra); }else if (opera=="divide"){ if (cifra==0){ alert("Error: Imposible división entre cero"); return; } res= Number(num)/Number(cifra); } document.getElementById("display").value=res; num=res; cifra=""; } function operacion(oper) { opera=oper; if (num!="" && cifra!=""){ calcular(); }else{ num=document.getElementById("display").value; cifra=""; } }

[@PC-wp9tj]

¡Qué explicación clara! Saludos desde los EE. UU.

[@pildorasinformaticas]

Gracias ! Un saludo amigo!

[@claudiomendieta]

Explicación maravillosa!! Un saludo

[@nestorpena1328]

Muchas gracias por el curso, espero poder tomar el de JAVA. Un abrazo

[@pildorasinformaticas]

Nestor Peña Hola !! Por si no lo localizas: kzbin.info/aero/PLU8oAlHdN5BktAXdEVCLUYzvDyqRQJ2lk Un saludo

[@nestorpena1328]

Muchas gracias, voy a terminar primero este y luego empiezo el de java... Gracias de nuevo

[@miguelperezpal]

Siguiendo el curso.

[@jhonsoler6125]

gracias por este curso¡¡¡¡¡¡¡¡

[@VICTORGONZALEZ-vx8br]

Me llama la atención que mencionas "Objetivo", lo que infiero de ésto es que un problema u objetivo grande es mejor o damos mejores resultados si lo dividimos en objetivos mas cortos que nos lleven a la solución del todo, muy interesante el curso..

[@pildorasinformaticas]

VICTOR GONZALEZ Efectivamente !! Un saludo

[@KuervoSur]

Excelente explicaciones. Muchas gracias...

[@efrainquispejuarez9370]

Hola Profesor Juan. Pregunta: Realizara vídeo tutoriales sobre RESPONSIVE y BOOTSTRAP. Gracias, saludos cordiales.

[@pildorasinformaticas]

Efrain Quispe Juarez Hola !! Pues no tenía pensado, pero tomo nota de tu petición ya que me sueles seguir. Un cordial saludo

[@victorvicos2406]

Hola Juan, aquí tienes un alumno más fan tuyo jeje. Estaría genial tener un curso de diseño responsive tuyo. Crees que es mejor utilizar media queries con css o utilizar frameworks? El bootstrap he visto que consiste en memorizar los class y id para que se apliquen los estilos predefinidos. Supongo que es más rápido utilizar el framework aunque es muy coñazo memorizarlo. Cual opción es mejor? Un saludo.

[@renerivera3745]

Muy bien. yo utilice la funcion eval(), solo tengo dos funciones para todas las operaciones

[@noticiaoculta2836]

lo malo de eso es que vuelves a tus funciones muy especificas y eliminas el paradigma orientado a objetos, algo así como retroceder al código espaguetti.

[@gilyer1001]

Hola que tal, muy buenos sus vídeos realizara algún tutorial de Bootstrap?

[@pildorasinformaticas]

Es mi intención hacerlo en el futuro. pero no se cuándo lo podré hacer. Un saludo!!

[@gabyph2013]

bueno he tenido buen rato tratando de entender mas que todo la parte del codigo de var cifra=" "; pero creo que ya lo estoy empezando a ver.. gracias"

[@andresweitzel.archivo3521]

Estupendo video, una pregunta, tenes idea por que desde Microsoft Edge no refresca el display llevandolo a 0?

[@tallarinconcrema]

Sos el Messi de la programación.

[@Seemoon618]

no he podido despues de hacer el on click en la suma, se concatena igual que hago?

[@santiagomarrugomonsalve8644]

Buenas Juan como estas, yo lo hice esta forma function sumar() { cifra = ""; acumulaSuma += parseInt(document.getElementById("display").value); document.getElementById("display").value = acumulaSuma; }

[@4301365]

para el cero , lo que yo hice fue que en el display le puse value = 0 :D

[@moisesgranadosguzman2280]

He visto que para asignar el 0 de valor inicial de la calculadora lo haces mediante un : document.getElementById("display").value=0; Mi duda es, esto lo haces por alguna razón en especial?, no valdría con añadir un value="0" en el input del display que parece ser lo mismo?

[@pildorasinformaticas]

moises Granados Guzmán Hola !! El motivo de hacerlo así es por practicar con lo que se ha visto en el curso hasta el momento. Efectivamente en programación casi siempre se puede hacer lo mismo de varias formas diferentes, unas más sencillas y otras más complejas. En este caso lo más sencillo es darle value=0 al display como bien dices tú. Un saludo

[@victoriaramirezborges4612]

También puedes utilizar un placeholder y por cierto, te conviene agregar un readonly al input pues de lo contrario es posible editarlo sin utilizar los botones.

[@JULIANDRESGM]

Muchas gracias!!!

[@maytecuevas]

Hola, no sé si sabré explicarme porque ando luchando con todos estos conceptos. Me gustaría saber como puedo meter un prompt almacenado en una variable en el display de la calculadora. Gracias

[@pildorasinformaticas]

Hola !! Hay varias formas de hacer esto (si te he entendido bien). Una de ellas podría ser: document.getElementById("display").value=prompt("Introduce el valor del display"); Un saludo!!

[@maytecuevas]

Hola de nuevo y gracias por responder tan rápido. Yo lo que estoy intentando hacer es que la calculadora me de la bienvenida por mi nombre, entonces pongo un prompt pidiendo que el usuario escriba su nombre. Lo siguiente que quiero, y eso es lo que me da quebraderos de cabeza, es que la calculadora me diga "hola y el nombre introducido"" pero que aparezca dentro del display. ¿Cómo sería? Gracias

[@pieroetchebarnec.925]

document.getElementById("display").value=prompt("Introduce el nombre"); display.value = "Hola " + display.value + " Empieza!";

[@maytecuevas]

Muchas gracias, lo probaré.

[@senorithozau5606]

Una pregunta. Acerca del "scope" de las variables, si yo declaro una variable fuera de una function, y la modifico DENTRO de una function, ¿El valor de ésa variable "global" se modifica? Y si es así, ¿puedo utilizar ésa variable con su VALOR modificado dentro de otra Function?

[@FranciscojavierHDD]

Si usas parceInt, vas a tener problemas cuando dividas y el resultado no sea un entero ¿o no?.

[@nicolasbeltran8891]

hola! te hago una consulta. Yo en principio hice otro camino pero no me funciono. En el principio del script declaré una variable que contenga al objeto input, por ejemplo, "var display=document.getElementById("display");" . Con la idea que (dentro de una función) cada vez que tenga mostrar números en el display sólo tenga que poner "display.value=". Pero sólo funciona si pongo los dos códigos dentro de cada función, no por separado.

[@pildorasinformaticas]

+Nicolas Beltran Hola !! La última parte "Pero sólo funciona si pongo los dos códigos dentro de cada función, no por separado." no la he entendido muy bien. ¿A qué te refieres exactamente? Un saludo

[@nicolasbeltran8891]

+pildorasinformaticas Lo que digo es que si escribo esto funciona: var cifra=0; function display_numeros(numero){ display=document.getElementById("display"); display.value=cifra+numero; cifra=document.getElementById("display").value; } En cambio, si escribo esto no funciona: var cifra=0; var display=document.getElementById("display"); function display_numeros(numero){ display.value=cifra+numero; cifra=document.getElementById("display").value; } No debería el código leer primero que el elemento input (de id "display") se encuentra almacenado dentro de la variable display? De manera que cuando llame a una función pueda escribir display.value="lo que sea" y el código ya sepa a que me refiero cuando escribo "display". Gracias

[@pildorasinformaticas]

Al estar fuera de la función, esa instrucción se ejecuta nada más cargar la página. Y en ese momento es imposible que haya nada escrito en el display. Un saludo

[@maotoledos]

Porque no se identifica el evento asi: onClick="display_numeros()"? No se confunde si existe otra función con el mismo nombre en otro lenguaje?

[@pildorasinformaticas]

No, no se confundiría. Pero de todas formas ahí es donde entra el trabajo del buen programador: no los llames igual. Quizá si es un proyecto complejo donde participa mucha gente puede ocurrir, pero que yo sepa el evento onClick llamará a funciones javaScript y no se confundirá con VBScript, ASP, PHP etc. Un saludo!!

[@maotoledos]

pildorasinformaticas gracias por tomarte el tiempo de responder. grande maestro!

[@unsaludito]

Excelentes vídeos profe usted es un crack... ahora mi pregunta seria si como podría escuchar los eventos en mi archivo javascript.js y pasarle los parámetros de los botones usando por ejemplo: Boton1.addEventListener("click", function(){ }? esto seria posible? o a juro debo colocar el onclick en el html? esto con la intención de mantener limpio el html, saludos....

[@victoriaramirezborges4612]

Tu ejemplo es correcto. Sin embargo eso no se ha visto aún en el curso.

[@santiagoargayo6409]

Nose si ya lo has dicho en el curso alguna vez, pero afecta en algo tener variables y funciones con el mismo nombre?

[@pildorasinformaticas]

No, variables y funciones no, pero es muy confuso. Así que habiendo nombres infinitos que podemos escoger, mejor que sean diferentes. Un saludo!!

[@giourinarizzo3242]

Y si al display le colocamos value="0"?.... lo hice y funciono sin problemas

[@andresfontalvo2430]

Para cargar el 0 desde que se cargue la pagina (como alternativa) solo debemos hacer esto: window.onload = function(){ document.getElementById("display").value=0; }

[@manellloptejada8917]

Genial Andrés! Me parece mejor así :-) muchas gracias.

[@deivtodavo7867]

De esta forma fue en la que yo lo hice. var display = document.getElementById("display"); var botones = document.getElementsByClassName("numero"); var igual = document.getElementById("button12"); for (var i = 0; i < botones.length; i++ ){ botones[i].addEventListener("click", function (){ display.value = display.value + this.value; }); } igual.addEventListener("click", function (){ var total = eval(display.value); display.value = total; });

[@DavidRodriguez-uj4ls]

con html5 añadiendo la etiqueta placeholder="0" al código html, hacemos para que cuando iniciemos la calculadora salga por defecto un 0. Y creo que en otro video usaste la funcion Number() para cambiar de string a entero. XD

[@saenyo]

De hecho a mi no me funciono con "parseInt", tuve que declarar ambas variables como numero: ... acumulado=Number(acumulado)+Number(cifra); ...

[@josefceb]

Pues a mi sí me funcionó. Sin problema, además.

[@victoriaramirezborges4612]

Verifica eso. Aún aceptando que parseInt(); te haya dado problemas(no te contrariaré), lo que muestras en tu comentario no está del todo correcto. var acumulado ya es una variable integer desde el momento que la inicializamos a 0 y no a "0". Por lo tanto tu declaración resulta redundante ya que solo debemos ocuparnos del valor de cifra(recuperado del input type="text"), y una vez convertida en entero y almacenada en acumulado, acumulado continúa conteniendo un dato de tipo integer.

Hola profe, ¿con qué programa grabas tus vídeos?

[@ShalomDanna]

A mi me sigue concatenando function suma(){ acumulado=acumulado + parseInt(cifra); document.getElementById("display").value=acumulado; cifra=""; } no se que estoy haciendo mal pero no me suma :=(

[@cinthiasidan3527]

Fijate que la variable acumulado este inicializada en 0 y no " "

[@oscargm1979]

pon si no parseInt (acumulado) + parseInt(cifra),no puede ser ninguno de los dos string.O inicializa acumulado a Number.

[@cesarparra5862]

Profe hola estoy siguiendo el curso de javascrips pero la pregunta de hoy no tiene que ver con códigos si no con otra cosa que es del curso y es: como se llama el degradado que le das a la imagen inicial de la presentación? es que quiero hacer un estampado así . donde dice CURSO DE JAVASCRIPT EL PUNTO Y EL CUADRO CON EL NUMERO DE EL VIDEO ese degrado que le das a esa imagen como lo haces gracias. o como se llama. (espero no molestar con esta pregunta)., gracias y .. var pildoras_informaticas="eres el mejor";

[@pildorasinformaticas]

Hola !! No lo hago yo. Es cosa de PowerPoint. hay un tema dentro de PowerPoint que da esos degradados y colores por defecto. No recuerdo qué tema es... Si vas a la ficha diseño por ahí andará. Un saludo!!

[@cesarparra5862]

Eres el mejor; gracias

[@cesarparra5862]

Hola espero estes bien te escribo de nuevo para lo de el tipo de letra que te hace el pawer point y te digo que aca en Colombia no he podido encostrar ese deseño, eso me tienen triste pero bueno buscare mas. chao gracias

[@caleman-ey2xf]

use para borrar algo así function borra(){ document.getElementById("display").value=""; cadena=""; }

[@matiasmarcelocentorbi7659]

Yo agregue un placeholder=0 en el input del HTML me pareció mas fácil.

[@Seemoon618]

no desaparece el numero se mantiene

[@codex8646]

Yo puse el 'Value="0" ' en el mismo input de html :v

[@marianopietroski722]

yo hice lo mismo, y si te pones a pensar, es lo mismo hacer esto, que colocar el script al final del documento

[@noticiaoculta2836]

:v

[@cesarleon4782]

QUE COSA MÁS RARA. Estaba desarrollando desde cero la calculadora para practicar y mi editor de texto me empieza a soltar el mismo error una y otra vez, cando ya estaba harto de buscar como se resolvía me di cuenta que si a la función de sumar la llamaba: "suma()" funcionaba! es más, si le pongo cualquier nombre a la función que no sea "sumar" FUNCIONA. No se que le pica ami editor (ATOM) pero esto es lo más raro que me ha pasado y lo más ladilla también, voy a quitar este editor :/. Solo me daba un error por poner de nombre a la función: "sumar" eso no tiene sentidoo

[@pildorasinformaticas]

La verdad yo tampoco entiendo ese error...

[@rudypsk8]

Asi quedó jalando con otro nombre de variables (identificables para mi) , y para el q quiera comparar con sus errores. var numX=""; var numAcumulado=0; function display_numbers(numBtn){ document.getElementById("display").value=(numX + numBtn); numX=document.getElementById("display").value; } function suma(){ //conviertiendo a numero el numX acumulado en el display numAcumulado=numAcumulado + parseInt(numX); document.getElementById("display").value=(numAcumulado); numX=""; }

[@luismiguelromeroavila9594]

No agarra esta chingadera a la hora de sumar los valores me los concatena y eso que segui todo paso a paso

[@Nadia-wu9hk]

Algo hiciste mal porque funciona perfecto siguiendo sus pasos. Fijate haber puesto correctamente el parseInt para convertir a cifra de string a int

[@ed.thefeli4159]

@@Nadia-wu9hk es verdad ami tampoko me funciona :/

[@CMongez]

@@ed.thefeli4159 A mi me funciona perfecto. Acostumbrate a copiar el codigo aca para ayudarnos entre todos.

[@noticiaoculta2836]

xd

[@saksahgx4011]

Por si alguien quiere la calculadora (solo tiene el html y los estilos), el resto puedes hacerlo viendo el vídeo :D. Eventos .numero{ width: 54px; height: 54px; } .igual{ width: 115px; height: 54px; } table{ margin: auto; width: 250px; border: 1px solid black; } .color_display{ height: 30px; background: black; border: medium black; font: "Space Age"; color: rgb(0, 252, 0); font-size: 18px; text-align: right; padding: 5px; } table, td, tr{ border: 1px solid black; background: red; } td, tr{ text-align: center; }

[@marcocelestino.clemente4984]

2023 junio,viendo el video