Empieza por acá

1

Mi primera línea de código

Fundamentos de Programación

2

¿Qué es HTML/CSS/JS?

3

JavaScript no es Java

4

Primeros pasos en el navegador con alert

5

HTML, CSS, JavaScript de verdad

6

Los apuntes de Freddy en PDF

Primer proyecto: Peso en otro planeta

7

Peso en otro planeta

8

Obteniendo datos del usuario

9

Flujo y condicionales

Segundo proyecto: Dibujando con Canvas

10

Cómo funcionan Window y Document

11

El DOM: nuestro lugar de trabajo en la web

12

Dibujando en el DOM

13

Qué son las Funciones en JavaScript

14

Ciclos while y for en JavaScript

15

Eventos y Formularios en HTML y JavaScript

16

Detectar eventos del teclado con JavaScript

17

Dibujar en canvas con las flechas del teclado

Tercer proyecto: Villa platzi

18

Funciones matemáticas y números aleatorios en JavaScript

19

Uso y carga de imágenes en Canvas

Cuarto proyecto: Pakimanes

20

División, módulo y residuo en JavaScript

21

Clases y Arrays en JavaScript

Quinto proyecto: Cajero automático

22

Diagrama de Flujo del Cajero Automático

23

Implementación del Cajero Automático

Sexto proyecto: Cliente/Servidor

24

Modelo Cliente/Servidor

25

Primer servidor web con express

Programación de Hardware y Electrónica con Arduino

26

¿Cómo funciona un circuito electrónico?

27

¿Cómo programar un Arduino?

28

Programación de circuitos con C, Arduino y Sketch

29

Cómo programar un Arduino con Javascript y Node

30

Construye un Robot con JavaScript

31

Robot para riego de plantas en Arduino, Javascript y Node

Materiales de apoyo

32

Las mejores notas de los estudiantes

33

¿Cuál lenguaje de programación aprender primero?

34

La Web con Visión Profesional

Contenido Bonus

35

Qué son tablas de verdad y compuertas lógicas

Recap Curso Gratis de Programación Básica

36

Recap Programación básica

37

Recap Programación básica ENG

No tienes acceso a esta clase

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

Obteniendo datos del usuario

8/37
Recursos

Ahora, vamos a obtener los datos del usuario a través del comando prompt. Para hacerlo, simplemente necesitamos seguir los pasos para empezar a programar desde el navegador.

Usando prompt, podemos generar una ventana que solicita información del usuario. Veamos el siguiente ejemplo:

var usuario = prompt("Cuál es tu peso?");

Al guardar este código, al momento en que recargues el navegador recibirás una alerta preguntándote cuál es tu peso. Al llenar la información con tus datos, se guardarán en la variable usuario.

Esto nos servirá para darle un uso más adelante, según sea necesario.

Recomendaciones para obtener datos del usuario

  • Podemos emplear la funcion prompt para recibir datos de usuario.
  • Concatenar es unir cadenas de texto a variables.
  • Los espacios también son elementos de las cadenas de texto y tienen que ir dentro de comillas.
  • Las etiquetas también son una cadena de texto en JavaScript. Por ende, las etiquetas no pueden ir por fuera de las comillas.
  • Cuando tienen un valor en comillas (""), significa que es una cadena de texto.
  • Los errores mostrados en la consola se deben a que nuestro código contiene un error.
  • La consola nos sirve para conocer el estado de las variables.
  • Un número flotante es un número que tiene decimales.

Aporte creado por: Ervic

Aportes 1633

Preguntas 417

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

📌 La función parseFloat() nos sirve para convertir una cadena o número entero a un número con punto decimal.

var cadena = "120";
var numero_entero = 10;
var numero_punto_decimal = parseFloat(cadena) / parseFloat(numero_entero);

Aca les dejo mi repositorio.
https://utoskydive.github.io/PesoPlanetas.io/

Si no quieren que se muestren tantos números decimales, pueden usar el método Tofixed(), ejemplo:

El número dentro de los paréntesis representa cuántos números después del punto decimal quieren que aparezcan en pantalla. En mi ejemplo, sólo aparecerán dos números.

Resultado:

Si quieren poner dos decimales pueden usar

parseFloat(usuario).toFixed(2);

Es una muy buena técnica. Queda más ordenado

para mover la linea de codigo pueden usar la tecla alt sostenida con fecha arriba o fecha abajo

highlights
1, prompt(); es una función similar a alert(); pero esta nos muestra una caja rellenable de información.
2. Con la función prompt(); podemos agregar un valor dentro de la caja sin embargo es necesario usar parseInt() para obtener el valor numérico.
3. Como parseInt(); también existe parseFloat(); , que es para obtener valores con decimales.

Aquí voy aprender lo que no me enseñan en la escuela

Esta buena la documentacion que hay en internet, logre hacerlo con formulario

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MyFirst</title>
    <style>
        body
        {
            background-color: cadetblue;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        p
        {
            color: rgb(32, 32, 32);
        }
        strong
        {
            color: rgb(185, 40, 40);
        }
    </style>
</head>
<body>

    <p>What's your  <strong>Weight</strong> in other planets</p>
    <p>But first... Whats your weight on the earth</p>
    
    <form action="" method="get">
        <input id="input" type="text" placeholder="Kg">
        <input id="button" type="button" value="check">
    </form>
    
    <p class="edit"></p>
    <p class="edit"></p>
    <p class="edit"></p>

    <script>
        document.addEventListener("DOMContentLoaded", function()
        {
            var acc = [9.8, 3.77, 24.8];
            var planets = ["earth", "mars", "jupiter"];
            var usrWeight = 0;
            var result = [0, 0, 0];
            var outHTML = document.getElementsByClassName("edit");

            document.getElementById('button').onclick = function()
            {
                usrWeight = document.getElementById("input").value
                for(var i in acc)
                {
                    result[i] = (usrWeight * acc[i]) / acc[0];
                    outHTML[i].innerHTML = "Your weight on " + planets[i] + " is: " + parseFloat(result[i]).toFixed(2) + " kg";
                }
            }
        });
    </script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Tu no estas gordo solo estas en el planeta equivocado</title>
</head>

Apuntes de la clase:

  • Podemos usar la funcion prompt para recibir datos de usuario.
  • Concatenar es unir cadenas de texto a variables.
  • Los espacios también son elementos de las cadenas de texto y tienen que ir dentro de comillas.
  • Las etiquetas tambien son una cadena de texto en JavaScript por ende las etiquetas no pueden ir por fuera de las comillas.
  • Cuando tienen un valor en comillas ("") es un texto.
  • Los errores mostrados en la consola se deben a que nuestro codigo contiene un error.
  • La consola nos sirve para saber el estado de las variables.
  • Un numero flotante es un numero que tiene decimales.

Muy buena clase. Por otro lado, para los que puedan tener la misma pregunta que me surgió en medio del vídeo, si queremos tener aún un número con decimales, pero controlar la cantidad, es decir, dejarlo sólo con 1, 2, 3, etc, lo podemos hacer con la función toFixed() en este ejercicio podríamos agregarlo así por ejemplo: peso_final.toFixed(2) y esto nos arrojaría el mismo resultado pero con 2 decimales. Lo importante de esta función es que no sólo quita los decimales, sino que redondea.

Lo mejor es escuchar todo el video, y una vez sabes que tiene que hacer tu programa, lo programas solo y miras que si corre 😄

En la realidad tenemos que usar decimales y podemos usar la funcion toFixed(cantidadDecimales);
Entonces tendriamos que nuestro peso_final = 34.6546849531213213
si escribimos:
peso_final = peso_final.toFixed(2); // siendo 2 el numero de decimales con los que trabajaremos
en el documento nos saldria 34.65, siendo una informacion más precisa

Ser autodidacta está bien, pero encontré al profesor definitivo. No me moveré de Platzi (ojo que no me pagaron para decir esto jajaja)

Decidí aplicarle un poco de estilos, como quien practico lo aprendido en el curso de html y css:

![]()

Tu masa en marte es … No, tu peso, recordemos que el peso esta afectado por la gravedad. p = m.g… pdt: me lo enseño mi esposa.

prompt("") = Esto es una pantalla flotante para poder capturar datos.
La parte de “inspeccionar” en google crome funciona para saber el estado de las variables.
Para poder trabajar con la captura de datos de “prompt” haciendo así que lo que capture se convierta en un número y no este en texto se utiliza “parseInt”
**Concatenar: **Pegar cadenas de texto a variables.
Para JavaScript las etiquetas html son texto plano así que no se podrá escribir etiquetas html fuera de una linea de texto entre comillas.
parseFloat: funciona para traer un numero flotante es decir un numero con decimales al contrario de "parteInt " que solo traía números enteros.

Aquí les dejo el código actualizado y funcional para noviembre 2021. Yo le hice algunas mejoras enmarcadas en las buenas prácticas y sin haber el próximo video, que en teoría debe mejorar mucho más este ejemplo.
Código actualizado Noviembre 2021
Aparte les recomiendo que hagan el curso de Github para que compartan sus códigos y los que tenemos un poco más de experiencia les podamos solventar sus dudas
También el curso de Buenas Prácticas para Escritura de Código.
IMPORTANTE: Aprendamos desde este primer contacto o momento con la programación que debemos formarnos y enfocarnos en ser profesionales y que tengamos siempre presente las buenas prácticas, lógica de programación, documentación de códigos y a desarrollar las soft skills antes de adentramos en lenguajes más complejo y así crearemos aplicaciones más seguras.

Chale, lo programo a los 13 años y yo aquí con el doble apenas aprendiendo, que atrasada me siento.

Pueden usar este método si quieren trabajar con tipo float pero no quieren su resultando con tantos decimales.

document.write(`Tu peso en marte es <strong>${peso_final.toFixed(2)} kilos<strong/>`)

El método funciona de la siguiente manera: usamos como objeto la variable o literal float a la cual querremos reducir o aumentar sus decimales y pasamos como argumento la cantidad de decimales que queremos que tenga nuestra variable o literal.

Flujos y condicionales, aquí la cosa se pone buena mi hermano.

Excelente explicación! Soy un novato. Me gusta la programación aunque estoy comenzando desde 0, entiendo muy bien, la razón? muy buen profesor. Gracias

parseInt: Elimina los números decimales.
parseFloat: agrega números decimales.

Logre que todo el texto dentro de la etiqueta script se cambiará su formato al poner un <h3> antes y por su puesto lo cerré justo después de la etiqueta </script>.
Les comparto mi codigo que tiene otros conceptos de física clásica, está basado en el código de Klaus:

<!DOCTYPE html>
<html>
<head>
  <title>Tu peso en otros planetas del sistema solar</title>
  <style>
    body
    {
      background-color: black;
      color: white;
      font-family: Helvetica;
    }
  </style>
</head>
<body>
  <h1>Tu peso en marte, la tierra y jupiter</h1>
  <h4>Pm = Pt * Gm / Gt</h4>
  <p>Donde:</p>
  <p>Pm: Peso en marte(Kgf)</p>
  <p>Pt: Peso tierra (Kgf)</p>
  <p>Gm: Gravedad en marte (m/s2)</p>
  <p>Gt: Gravedad en la tierra</p>
  <p>En fisica clasica sabemos que:</p>
  <h4>P = m * g </h4>
  <p>m: Masa corporal (kg)</p>
  <p>P: Peso (N)</p>
  <p>g: Gravedad del planeta donde te encuentres (m/s2)</p>
  <h4>1 Newtown = 9.807</h4>
  <h3>
    <script>
      var usuario = prompt("Cual es tu Peso?");
      var ptierra;
      var gravedad_tierra = 9.81;
      var gravedad_marte = 3.7;
      var gravedad_jupiter = 24.8;
      var masa_corporal;
      var pmarte;
      var pjupiter;
      var ntierra;
      var nmarte;
      usuario = parseFloat(usuario);
      ptierra = usuario.toFixed(2);
      pmarte = ptierra * gravedad_marte / gravedad_tierra;
      ntierra = ptierra * 9.807;
      ntierra = ntierra.toFixed(2);
      masa_corporal = ntierra / gravedad_tierra;
      masa_corporal = masa_corporal.toFixed(2);
      pmarte = pmarte.toFixed(2);
      nmarte   = pmarte * 9.807;
      nmarte = nmarte.toFixed(2);
      document.write("Esta persona tiene una masa corporal de " + masa_corporal +" Kg, en la tierra esto pesa " + ptierra + " Kgf lo que equivale a " + ntierra + " N, en marte la misma masa corporal pesa " + pmarte +" Kgf, lo que equivale a " + nmarte + " N");
    </script>
  </h3>
</body>
</html>

Ingresar datos:
prompt("<mensaje>") → genera una ventana emergente donde podemos igresar datos; devuelve una cadena de texto
Cambiar el tipo de datos:
parseInt(<valor>) → convierte a enteros
parseFloat(<valor>) → convierte a decimales (flotantes)

¡Hola! Quería compartir una función con ustedes, se llama: toFixed();
Si a alguno le interesa utilizar decimales, pero quisiera que se mostraran únicamente un par de ellos, pueden usar esta función. De la siguiente manera:

<code>
nombre_variable = nombre_variable.toFixed(Cantidad_Decimales); 

Aquí lo que se está haciendo es asignar a la misma variable el valor de tipo flotante pero con los decimales que quisieras. Para este pograma sería (yo escogí dos decimales):

<code>
<script>

                    // Peso del usuario en la Tierra
            var usuario = prompt("¿Cuál es tu peso?"); 
            var peso_Tierra = parseFloat(usuario);

                    // Aceleración de la gravedad en los planetas de la Vía Láctea
            // Unidades del SIM: m/s^2
            var g_Tierra = 9.8; 
            var g_Luna = 1.62;
            var g_Marte = 3.7; 
            var g_Jupiter = 24.8;

                    // Peso en otro planeta
            var peso_final; 
            peso_final = peso_Tierra * g_Marte / g_Tierra; 
            peso_final = peso_final.toFixed(2);
            document.write("Tu peso en Marte es <strong>" + peso_final + " kg.</strong>");

</script>

Y se vería así:

buenardo

Que buen profesor es Freddy. :’) Que emoción. Desde el 2004 que he tomado clases de programación y nunca había logrado no quedarme dormida en los primeros 10 minutos. Y nunca pasé de eso. Prefería estudiar química, matemática, biología, filosofía, portugués, inglés, leyes, física, marketing, historia, etc. Pero jamás “algo que tuviera que ver computadoras”. Al parecer al fin me dignaré a estudiar esto. haha Gracias Freddy y Platzi. ❤️

Un cordial saludo, espero que la versión de mi proyecto les guste y principalmente aporte a su conocimiento, les dejo este enlace: https://dereksamuel.github.io/Interplanetary-Weigth/src/PESO/index.html

.-Usando prompt, se obtienen los datos del usuario.
.-revisando el estado de la variable introducida en prompt, usando consola, se puede ver su valor actual, pero queda entre comillas, lo que indica que es un texto.
.-Con parseInt se obtiene una variable entera.
.-Con parseFloat se obtiene una variable de punto flotante.
.-Ya tenemos una calculadora para el eso en marte.

Ha sido el cierre de clase con el mayor suspenso con el que me he quedado!
A medida que uno le va cogiendo las ganas a programar más,
se vuelve más fácil de digerir lo que nos explicas y sumamente
divertido!
GRACIAS, Freddy!
*Expresión que ya es y seguirá siendo una constante durante todo el curso XD.

Un punto importante es que el método prompt() recibir un valor que haya introducido el usuario sea letras, símbolos o números. Este devuelve la información como cadena. Si el usuario no introduce nada, este devolverá vacío o null.

Xq si tengo el codigo exactamente igual el prompt se me carga antes que el resto de la pagina ?

Es decir, cargo el código y lo primero que sale es el prompt “Cual es tu peso?” y despues que coloco el peso me carga el resto de la pagina “Tu peso en otro planeta … etc”. Y así me pasa con todos los códigos, siempre me carga el alerta antes.

Aiiudaa

Practicando descubrí que JavaScript tiene una función para convertir en negrita llamada bold(), que se le agrega al final con un punto.

   var peso = 50;
    var gravedadTierra = 9.8;
    var gravedadMarte = 3.7;
    var gravedadJupiter = 24.8;

    var pesoMarte = (peso * gravedadMarte)/gravedadTierra;
    var pesoJupiter = (peso * gravedadJupiter)/gravedadTierra;

    
    document.write("Tu peso en Marte es: " + pesoMarte.toFixed().bold() + " Kg".bold())

El resultado es:
Tu peso en Marte es: 19 Kg

la verdad estos videos me solucionan la carrera de analista de sistema que estoy cursando, entiendo mejor, muchas gracias por brindar estos cursos gratuitos, me solucionan la vida universitaria 😃

Siempre podemos utilizar parseInt para hacer de un texto un número?

Este es mi codigo, en el cual se puede ingresar la gravedad personalizada, asi se puede saber el peso en cualquier planeta el cual se conozca su gravedad.

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			body
			{
				font-family: Helvetica;
			}
		</style>
		<title>Tu peso a nivel interplanetario</title>
	</head>
	<body>
		<h1>Tu peso en otro planeta!!</h1>
		<p>En la tierra pesas distinto que en Marte o Jupiter!</p>
		<script>
			var usuario = parseFloat(prompt("Ingrese su peso"));
			var planeta= parseInt(prompt("Elige tu planeta :D \n1 es Marte \n2 es Jupiter\n3 Gravedad personalizada"));
			var peso=usuario;
			var g_tierra=9.8;
			var g_marte=3.7;
			var g_jupiter=24.8;
			var peso_final;
			var nombre_p;
			if(planeta == 1)
			{
				peso_final=(peso * g_marte)/g_tierra;
				nombre=("Marte");
				document.write("Mi peso en "+ nombre +" es <strong>" + peso_final + "</strong> Kg");
			}
			else if(planeta == 2)
			{
				peso_final=(peso * g_jupiter)/g_tierra;
				nombre=("Jupiter");
				document.write("Mi peso en "+ nombre +" es <strong>" + peso_final + "</strong> Kg");
			}
			else if (planeta == 3)
			{
				var g_personal=prompt("Ingrese la gravedad");
				peso_final=(peso * g_personal)/g_tierra;
				document.write("Mi peso en este planeta es " + peso_final + "Kg");
			}
			else
			{
				document.write("Debes seleccionar una opcion valida");
			}
			//document.write("Mi peso en marte es <strong>" + peso_final + "</strong> Kg");
		</script>
	</body>
</html>

Con 2 decimales

Holis 😎
Les dejo mi codigo, me puse rebelde y lo hice a mi manera (siguiendo ciertas directrices de Freddy)

<script>
        var usuario = prompt("¿Cual es tu peso?");
        var peso = parseInt(usuario);
        var g_tierra = 9.8;
        var g_marte = 3.7;
        var g_jupiter = 24.8;
        var peso_marte;
        var peso_jupiter;

        peso_marte = peso * g_marte / g_tierra;
        peso_jupiter = peso * g_jupiter / g_tierra;

        peso_marte =parseInt(peso_marte);
        peso_jupiter =parseInt(peso_jupiter);
        
        document.write("Tu peso en marte es: " + peso_marte + " " + "" + " y tu peso en jupiter es: " + peso_jupiter);
    </script>

Aprovechando la cuarentena jajajaja

Dejo por aquí los apuntes obtenidos en la clase, por si sirven de ayuda.

Obteniendo datos del usuario

Antes de crear formularios, cajas de texto y botones en HTML.

Manera rápida y efectiva de obtener datos del usuario:

En JavaScript se llama prompt.

<aside>
💡 prompt Funciona igual que alert

</aside>

La sintaxis es similar a la función alert

Función prompt entre paréntesis, por parámetro de la función, string entre comillas, porque introduzco un texto libre.


Añadiendo variables

Uso el archivo HTML llamado marte.html

Dentro del mismo, añado otra variable, que será la del usuario, la cual es igual a prompt, dentro de sus parámetros un string con el mensaje: ¿Cuánto pesas?

var usuario = prompt("¿Cuánto pesas?");

RESULTADO:

Al guardar los cambios en el editor, en el navegador al recargar, aparece un pop-up para que el usuario introduzca datos.

Este es el resultado de utilizar la función prompt

Desde este momento la variable “usuario” tendrá el valor que el usuario introduzca, en formato de texto, debido a que los navegadores retornan el resultado en forma de texto.


Inspector de elementos

El inspector de elementos del navegador, en el apartado console, también me informa del estado de las variables.

                            **ATAJO:** `Ctrl + Shift + I`

En la imagen, se aprecia que todas las variables excepto usuario, tienen un valor numérico, porque este no está entre comillas.

Cuando un valor se representa entre comillas, significa que es un texto, un string.

En tal caso de que sume un valor numérico a la variable usuario, no se sumarán los numerales, se sumará el numeral al texto, como ocurre en la siguiente imagen:


Cambiar el valor de texto a valor numérico

El valor que devuelven los navegadores, aunque el usuario escriba un numeral, el navegador SIEMPRE lo devolverá como texto.

Para cambiar el valor de texto que me retorna el navegador, a valor numeral, se hace uso de la función parseInt

Esta función, también convierte el valor de texto a valor numérico.

Actualmente, en el archivo de HTML, en la variable “peso”, tengo puesto el valor “66” en valor numérico.
Cambio dicha asignación por la función parseInt, que contendrá dentro de sus parámetros, la variable “usuario”.

var peso = parseInt(usuario);

Cambiando la asignación de la variable “peso”, hago que, el valor que introduzca el usuario en el pop-up al entrar en la página, pase por la función parseInt y después a la variable “peso”.

La variable “usuario” seguirá teniendo un valor de texto, sin embargo, al asignarle a la variable “peso” la función parseInt, esta convierte el valor de texto en valor numérico:

var peso = parseInt(usuario);

RESULTADO:

Compruebo en la consola del inspector de elementos el estado de las variables “usuario” y “peso”.

De esta manera, he convertido el valor introducido por el usuario, en un valor numérico.


Añadiendo estilos

Voy a añadir estilos al document.write para que, a parte de devolverme el peso final, se acompañe con un texto en el que una parte de él esté en negrita.

Para ello, tengo que cambiar lo escrito en el document.write.
Le añado un string y una asignación.

document.write("Tu peso en Marte es " + peso_final);

RESULTADO:


No obstante, quiero añadir la palabra “kilos” después de la variable peso_final.
Para ello tengo que concatenar

<aside>
💡 Concatenar: Pegar cadenas de texto a variables.

</aside>

Puedo concatenar tanto como quiera, añado otra asignación a otro string para añadir la palabra “kilos”.

document.write("Tu peso en Marte es " + peso_final + " kilos");

Es importante recordar que los espacios, tengo que marcarlos yo mismo, debido a que no están definidos.
Los espacios también son elementos de las cadenas de texto, tienen que ir dentro de las comillas.

RESULTADO:


Ahora quiero que el resultado del peso final y la palabra “kilos” aparezcan en negrita.

Tengo que usar la etiqueta <strong></strong>.

Las etiquetas también son una cadena de texto en JavaScript.

Estas deben estar en losstringspara que funcionen.
HTML es un texto plano para JavaScript.

document.write("Tu peso en Marte es<strong> " + peso_final + " kilos</strong>");

En tal caso de que exista un error en el código, por si en alguna de las
líneas, existe algún tipo de error, en la consola del navegador, nos aparece.

Además, muestra la línea en concreto del error.

RESULTADO:


Decimales en el peso (parseFloat)

Con este código escrito, independientemente del valor que introduzca el usuario, ya sea número entero o número decimal, el resultado final siempre se devolverá en número entero.

Esto se debe a la función parseInt que no muestra números decimales.

Para mostrar los decimales del valor que introduzca el usuario, existe otra función llamada parseFloat

<aside>
💡 parseFloat nos muestra números flotantes (decimales)

</aside>

Solo tengo que hacer unas modificaciones en el código para que el valor que retorne el navegador, sea un número flotante (con decimales).

  • En la variable “peso”, tengo escrita la función parseInt, la cual se cambiará por la función parseFloat.
  • En la variable “peso_final”, tengo en la asignación la misma función parseInt, no obstante, puedo eliminarla, no tengo que cambiarla, porque el paréntesis, simplemente se resuelve, es igual que en Álgebra, cuando hay un paréntesis, se empieza por el paréntesis más cercano y me voy alejando del mismo y se resuelve.
    Si en la asignación solo hay un paréntesis, no hace nada.
var peso = parseFloat(usuario);
peso_final = (peso_final);

RESULTADO:

Este es el código modificado, habiendo eliminado el parseInt de la asignación de la variable peso_final y habiendo sustituido el parseInt por la función parseFloat en la asignación de la variable peso.

En el pop-up generado por la función prompt introduzco un número flotante.

El resultado, con parseFloat tiene decimales.


Una vez hecho el ejemplo, vuelvo a sustituir la función parseFloat por parseInt para conservar los números enteros.

Atom no me resalta las variables ni nada dentro del script ¿Cómo hago para que sea más comodo de visualizar?

<!DOCTYPE html>
<html>
  <head>
    <title>Tu peso en otro planeta</title>
    <style rype="text/css">
      body
      {
        background-color: black;
        color: green;
        font-family: Helvetica;
      }
      strong
      {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h1><strong>--Tu peso en otro planeta--</strong></h1>
    <p>En la tierra pesas distinto que en Marte o Jupiter</p>
    <script type="text/javascript">
      var usuario = prompt("¿Cuál es tu peso? (solo numeros enteros)");
      var g_tierra = 9.8;
      var g_marte = 3.7;
      var g_jupiter = 24.8;
      var peso = parseInt(usuario);
      var peso_final;
      peso_final = (peso * g_marte / g_tierra);
      peso_final = parseInt(peso_final);
      document.write("Tu peso final es <strong>"+ peso_final + " Kg</strong>");
    </script>
  </body>
<html>```

Veo que cuando usamos “prompt” no podemos usar interrogantes al principio y que, todavía, no has explicado cómo usar tildes, cierto? Lo interpreta mal al ejecutar el navegador. Espero más adelante nos permitas escribir con rectitud 😉

Yo creo que en el minuto 8:30 era tu oportunidad para enseñar como poner un flotante con solo un decimal o dos.

var Love: prompt(“Cuanto me amas?”);

document.write("Yo te amo " + Love);

nadie les gusta los decimales pero a veces son importantes

tambien las letras negritas, pueden hacerse con <b> texto <\b>

denme corazon uwu

No es mucho pero es trabajo honesto xd.

experimentando con los pocos conocimientos que tengo.

Yo feliz porque aprendí algo nuevo, Freddy diciendo que esto lo hizo cuando tenia 13 años 😦

<!DOCTYPE html>
<html>
<head>
	<title>Tu peso en otro planeta</title>
	<style>
		body{
			background-color: orange; 
		}
		h1{
			background-color: black;
			color: white;
		}	
	</style>
</head>
<body>
	<h1>Peso en marte y jupitir</h1>
	<p>Como ustedes ya saben la gravedad de otros platenas es diferente a la tierra ya que su masa es diferente.</p>
	<script>
		var peso_final, g_tierra = 9.8, g_marte = 3.7, g_jupiter = 24.8; 
		var peso_tierra = prompt("Cual es tu peso en KG");
		peso_tierra = parseInt(peso_tierra);
		var selet = prompt("Oprime 1 para saber tu peso en marte y 2 para jupiter.");
		if (selet == 1){
			peso_final = (peso_tierra*g_marte)/g_tierra;
			peso_final = (peso_final.toFixed(2));
			document.write("Tu peso en marte es " + peso_final + " KG");
		}else if (selet == 2){
			peso_final = (peso_tierra*g_jupiter)/g_tierra;
			peso_final = (peso_final.toFixed(2));
			document.write("Tu peso en marte es " + peso_final + " KG");
		}else{
			document.write("Esta opcion no es valida");
		}
	</script>
</body>
</html>

Aquí practicando las clases anteriores y la de hoy 😃

Es importante que este curso sea actualizado, ya que el funcionamiento de algunos navegadores es muy distinto a hace 5 años. Por ejemplo alert(), y prompt() ya no funcionan igual.

Es decir que, en la parte que pones el texto en negrita, si uno quiere que sólo se vea el número del resultado en negrita el código sería:

document.write("Tu peso en marte es <strong>" + peso_final + " </strong>kilos");

¿Están de acuerdo?

Un screenshot donde se aplica lo que hemos visto hasta el momento, utilice la regla de implementar las etiquetas HTML dentro del texto en JavaScript para centrar el texto, se inserto una imagen por medio de una dirección absoluta por medio de la etiqueta <img src = “url” >

No me gustan los numeros ya que soy nulo en matematicas jajajaja .
Saludos.

Me carga el script antes que el contenido de la pagina. Como lo puedo solucionar?

Me di cuenta que si escribo el código sin parseInt(usuario); el mismo funciona igual. Es decir:

<!DOCTYPE html>
<html>
  <head>
    <title> Cuanto pesas en... </title>
  </head>
  <body>
    <h1> Tu peso en otro planeta
      <p> En la Tierra pesas distinto que en Marte o Jupiter </p>
      <script>
        var usuario = prompt("Cual es tu peso?")
        var peso = usuario;
        var g_tierra = 9.8;
        var g_marte = 3.7;
        var g_jupiter = 24.8;
        var peso_final;
        peso_final = peso * g_marte / g_tierra;
        peso_final = parseInt(peso_final);
        document.write(peso_final);
        </script>
  </body>
</html>

¿Por qué sucede?

<html>
<head>
<title>tu peso en otros planetas</title>
<body>
<style>
body
{
background-color: white;
color:black;
}
</style>
</head>
<h1>tu peso en la tierra no es lo mismo en marte o jupiter</h1>
<h2>te lo muestro mira aqui abajo</h2>
<script>
var usuario = prompt("¿cual es tu peso?");
var peso = Parseint(usuario);
var g_tierra = 9.8;
var g_marte = 24.7;
var g_jupiter = 3.8;
var peso_final;
peso_final = peso * g_marte / g_tierra;
peso_final = PareseInt(peso_final);
Document.write("tu peso en marte es "+ peso_final);
</script>
</body>
</html>

Ayuda, no entiendo que error estoy cometiendo. Me aparece primero el prompt y luego de rellenarlo carga la página

<!DOCTYPE html>
<html>
<head>
<title>Tu peso en un lugar donde pesas menos</title>
</head>
<body>
<h1>Tu peso en otro planeta</h1>
<p>En la tierra pesas distinto que en marte o jupiter</p>
<script>
var usuario = prompt(“Cual es tu peso?”);
var peso = parseInt(usuario);
var g_tierra = 9.8;
var g_marte = 3.7;
var g_jupiter = 24.8;
var peso_final;
peso_final = peso * g_marte / g_tierra;
peso_final = parseInt(peso_final);
document.write(“Tu peso en marte es <strong>” + peso_final + " Kilos</strong>");
</script>
</body>
</html>

Si quieren que les muestre los decimales en el resultado pueden usar la función toFixed() y especifican en el parámetros “Los paréntesis” cuantos decimales quieren dejar.

Hola , como hago para que el código en Atom me salga en colore como en la grabación? Gracias

Pueden ver más sobre Javascript aquí: https://www.w3schools.com/JS/

Alguien sabe por qué:
*el document me aparece en color rojo y no en amarillo
*me carga primero el document.write y despues la informacion del body. Me explico, al aparecer el document.write solicitando el peso, el fondo esta en blanco.

Les dejo mis notas de la clase, lo que creo que es más importan de esta clase.

https://drive.google.com/file/d/1gV52aDUJNN1laHNU_Rgebrn-3yi-rdaa/view?usp=sharing

Muy buena explicación, es el primer curso que tomo en platzi y al terminar este si o si me iré a por otro, me encanta 😄

normal equivocarse y ver por que el codigo se rompio y darte cuenta de que haz cometido un error de sintaxis jajajajaja

no pense que e switch funcionara igual que en otros lenguajes xD
<html>
<head>
<title>
medir tu peso en otros planetas
tu peso en otros planetas
</title>
</head>
<body>
<h1>escoge una opcion</h1>
<h2>1. medir tu peso en marte<br>
2. medir tu peso en jupiter <br>
3. medir tu peso en la tierra<h2>
<script>
var peso=prompt("Calcular peso en otros planetas\nIngrese el peso: ");
var opcion=prompt(“Ingresa una opcion\n1. medir tu peso en marte\n2. medir tu peso en jupiter\n3. medir tu peso en la tierra”);
document.write("la opcion ingresada: “+opcion+”<br>el peso final es: ");
switch (parseInt(opcion)) {
case 1:document.write(parseInt(peso=(3.7peso)/9.8));break;
case 2:document.write(parseInt(peso=(24.8
peso)/9.8));break;
case 3:document.write(parseInt(peso));break;
default:document.write(“Error <br> la opcion ingresada es erronea”);
alert(“Error, la opcion ingresada es errona”);
}
</script>
</body>
<html>

  • La consola nos sirve para saber el estado de las variables.

  • Cuando tienen un valor en comillas("") es un texto o string.

  • Puedes usar la función prompt para recibir datos del usuario.

  • Concatenar es unir cadenas de texto a variables.

  • parseInt es para mostrar números sin decimales.

  • parseFloat es para mostrar números con decimales por pantalla.

<!DOCTYPE html>
<html>
  <head>
    <title> Tu peso en un lugar donde pesas menos </title>
  </head>
  <body>
    <h1>Tu peso en otro planeta</h1>
    <p>En la tierra pesas distinto que en Marte, Jupiter o Krypton</p>
    <script>
      var usuario = prompt("Cual es tu peso");
      var planeta = parseInt(prompt("Elige tu planetan\n 1 es Marte, 2 es Jupiter, 3 es Krypton"));
      var peso = parseInt(usuario);
      var g_tierra = 9.8;
      var g_marte = 3.7;
      var g_jupiter = 24.8;
      var g_Krypton = 20;
      var peso_final;
      var nombre;
      if (planeta ==1)
      {
        peso_final = peso * g_marte / g_tierra;
        nombre = " Marte "
      }
      else if(planeta == 2)
      {
        peso_final = peso * g_jupiter / g_tierra;
        nombre = " Jupiter "
      }
      else if(planeta == 3)
      {
        peso_final = peso * g_Krypton / g_tierra;
        nombre = " Krypton "
      }
      else
      {
        peso_final = 1000000
        nombre = " Vida real "
      }
      peso_final =parseInt(peso_final);
      document.write("Tu peso en" + nombre + " es <strong>" + peso_final + " kilos </strong>");
    </script>
  </body>
</html>```

¿Cómo podemos obtener datos del sistema, tipo (hora-fecha, navegador, sistema operativo, idioma, entre otros)?

me gustaria limitar la cantidad de decimales se puede poner el float con solo 2 decimales maximo 3

Este es un ejercicio que hice por mi cuenta con lo aprendido en esta clase, tome los elementos para buscar otro resultado utilizando el precio y la cantidad de productos. Es sencillo pero que me hizo repasar lo aprendido.

var usuario = prompt( "¿Cuentas cubetas de pintura agregaras al carrito?");
var cantidad = parseInt(usuario);
var preciounit = 1800;
var metroCuadr = 2.5;
var precio_final;
precio_final = (preciounit * usuario);
superficie = (metroCuadr * usuario);
document.write("<h1> Su pedido tiene un costo de <strong>"+ precio_final + " pesos<h1>");
document.write("Y cubre "+ superficie + " metros cuadrados.");```



¿ que función debo de utilizar para mantener los números flotantes?, pero solo un par de ellos

holaaa soy esteban y tengo 10 años y este curso esta super interesante 100% recomendado

Soy absolutamente nueva en esto, quiero agradecer muchísimo a quienes lo están haciendo posible. Soy de Buenos Aires Argentina.
Abrazos!!!

Cosas como estas son las que debemos enseñarles a nuestros hijos…

no me sentía capaz de llegar hasta aqui ❤️

la palabra document no me cambia a amarillo

amo este curso!!! :3 😃

excelente explicación!

[2020] Conversión de dólares a pesos colombianos. Código simple con lo aprendido en clase.

<html>

</<!DOCTYPE html>

  <head>
    <title>Dollar to COP 2020</title>
  </head>
  <body>
    <h1>Conversión de dólares a pesos colombianos</h1>
    <p>2020 es el año de la pandemia del coronavirus (COVID-19), por ende los mercados de divisas han fluctuado enormemente.</p>
    <script>
    var usuario=prompt("¿Cuántos dólares deseas convertir a COP?")
    var dolares=parseFloat(usuario);

    var one_cop_dic15=3420.79;
    var one_cop_mar15=3976.99;
    var one_cop_aug15=3789.63;

    var conversion_dic15;
    var conversion_aug15;
    var conversion_mar15;

    conversion_dic15=(one_cop_dic15*usuario);
    conversion_aug15=(one_cop_aug15*usuario);
    conversion_mar15=(one_cop_mar15*usuario);


    var c_final;
    c_final=conversion_dic15.toFixed(2);
    var c_final_aug
    c_final_aug=conversion_aug15.toFixed(2);
    var c_final_mar
    c_final_mar=conversion_mar15.toFixed(2);


    document.write("$"+usuario+" dólares son "+"<strong>$"+c_final+ " pesos colombianos.</strong>" + " [15DIC2020]<br>")
    document.write("$"+usuario+" dólares son "+"<strong>$"+c_final_aug+ " pesos colombianos.</strong>" + " [15AGO2020]<br>")
    document.write("$"+usuario+" dólares son "+"<strong>$"+c_final_mar+ " pesos colombianos.</strong>" + " [15MAR2020]<br>")
    </script>
  </body>
</html>

Lo aprendido lo aplique en el siguiente proyecto ✨
https://anarotela18.github.io/peso-en-otro-planeta/

Dejo mi aporte por aqui, espero les sirva 😃

Si alguien está arrancando en 2022, les recomiendo ver hasta el experimento de pakiman o del cajero y volver a ver los vídeos solo como repaso, es increible lo bien que se entiende las segunda vez y se hace mucho más fácil hacer los desafios

Notes

Escribiendo esto, me ahorré la línea adicional en la que convierto el string del peso del usuario a valor numérico usando el parseInt de “peso”

var usuario = parseInt(prompt("¿Cuál es tu peso?"));

O sea, es posible escribir funciones dentro de funciones 😃

Esta sería la clase 8 y la clase 8 sería la 7

Buenas tardes, reciban un cordial saludo.

Me encanto esta lección 😄, la forma de explicar de Freddy es muy entretenida. De igual forma adjunto mi aporte sobre esta lección:

<code> 
<script type="text/javascript">

    var peso = parseFloat(prompt('Digite su peso actual en la Tierra.'));

    var g_tierra = 9.8;
    var g_marte = 3.7;
    var g_jupiter = 24.8;

    var peso_final;

    peso_final = peso * g_marte / g_tierra;

    document.write('Su peso en marte es: <strong><i>' + parseFloat(peso_final) + ' kilos</i></strong>');

  </script>

Como dato, quisiera hacer una observación. Al menos en mi caso, aunque no use “parseInt” en la variable “peso”, me hace el cálculo normalmente. Imagino que ocurre esto porque estoy usando un operando de multiplicación y no el de suma (que también se usa para concatenar cadenas) que me corrijan si estoy en un error, pero imagino que el lenguaje ya sobreentiende que si se usa el operando de multiplicación, el número que está en formato de texto, lo convierte automáticamente solo para hacer el cálculo arrojando un tipo de dato numérico sin afectar el dato de la variable “peso”, y así poder dar un resultado coherente con respecto a lo que se quiere realizar con las órdenes. Sin embargo, yo si estoy a favor de hacer la costumbre de hacer la conversión para cualquier fin que se desee hacer, y así en programas extensos no haya un lío.

Estaba haciendo el ejercicio y no me daba resultado el parseint y el parsefloat. revisé mil veces y tenia todo igual pero aun no me salía nada en pantalla y luego me acordé la importancia de la MAYUSCULA jajaja parseInt y el parseFloat, la I y la F en mayúscula para que funcione. pequeños detalles que no podemos olvidar

una lastima que se esten dañando los videos.
ya he encontrado congelamientos de varios de ellos.
en este, por ejemplo, sucede en 8:53

prompt es una funcion si o no ?

todo estos comentros hace cuatro años estams 2020

hola porque las operaciones no llevan una etiqueta?