Curso gratis de programación básica

7. Peso en otro planeta

Aquest codi parteix d’un pes preestablert (70 kg). Simplement, serveix la línia amb el càlcul, que no varia.

<body>
    <h1>Tu peso en otro planeta</h1>
    <p>En la tierra pesas distinto que en Marte o Júpiter.</p>
    <script>
        var g_tierra = 9.8;
        var g_marte = 3.7;
        var g_jupiter = 24.8;
        var peso = 70;
        // aquesta variable no té valor
        var peso_final;
        // aquí faig l'equació
        peso_final = peso * g_marte / g_tierra;
        // això fa desaparèixer els decimals
        peso_final = parseInt(peso_final);
        // part on queda escrit el valor
        document.write(peso_final);
    </script>
</body>

8. Obteniendo datos del usuario

Es demana a l’usuari (prompt) quin és el pes.

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

Variable: És on es guarden i recuperen les dades que s’utilitzen en un programa. No poden tenir espais, començar amb un número o una paraula reservada (if, for, while…)
Link to original

9. Flujo y condicionales

Aquí donarem opció per a triar el planeta.

Planeta? (1,2) → Pes? → si planeta 1 → pes mart; si planeta 2 → pes júpiter

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Tu peso en otro planeta</h1>
    <script>
        
        var usuario = prompt("¿Cuál es tu peso?")
        var planeta = parseInt(prompt("Elige tu planeta.\n1 es Marte, 2 es Júpiter."))
        // com que la resposta, encara que és un número, queda com a text "", es passa pel parseInt per a convertir-la en número
        var peso = parseInt(usuario);
        var g_tierra = 9.8;
        var g_marte = 3.7;
        var g_jupiter = 24.8;
        var nombre;
        
        // aquesta variable no té valor
        var peso_final;
 
        if(planeta == 1)
        {
            peso_final = peso * g_marte / g_tierra;
            nombre = "Marte";
        }
        else if(planeta == 2)
        {
            peso_final = peso * g_jupiter / g_tierra
            nombre = "Júpiter";
        }
 
        else
        {
            peso_final = 1000000;
            nombre = "Ratilandia";
        }
            document.write("Tu peso en " + nombre + " es <strong>" + parseInt(peso_final) + " kg </strong>");
            // això fa desaparèixer els decimals
    </script>
</body>
</html>>)

Cómo funcionan Window y Document

Jugar amb console.log

El DOM

DOM (Document Object Model): Es la forma en la que el navegador internamente organiza todo nuestro HTML dentro de una estructura especial (tipo árbol), con la cual podremos manejar fácilmente nuestra aplicación web mediante JavaScript.

navigator: El objeto que contiene las funciones del navegador, también te permite acceder al sistema operativo como el GPS, guardar datos en el disco duro, etc.

window: El objeto que maneja cada una de las pestañas.

document: El objeto que contiene todo lo que vemos dentro de nuestra página.

12. Dibujando en el DOM

Necessitem canvas per a dibuixar (a través de Javascript).

Aquí creem un canvas de 300x300px i amb un id.

<canvas width="300" height="300" id="dibuixet"></canvas>

El Jardí

Explorer