Bioinformática Programación SALUD y programación Arduino SALUD y arduino IoT

Clase practica

Programación HTML y JavaScript

por Diego Fernandez Medrano

Diapositivas

Programar consiste en escribir instrucciones para que una máquina pueda realizar una acción.
Las instrucciones se escriben en un lenguaje que permite ser leído y escrito por el humano. Ese lenguaje se conoce como lenguaje de programación.
Las instrucciones son algoritmos.
Al ejecutar el programa se transforma (compila) los algoritmos escritos en un determinado lenguaje de programación en un lenguaje de máquina que son 0 y 1, para que pueda realizar la acción.


EJEMPLOS DE CODIGOS

Para practicar leer y decodificar


function saludo()

código
       
       <html>
       <body>
       <p id="parrafoPrimero"></p>
       <button onclick="saludo()">Saludar</button>
       
       <script>
       function saludo() {
       var lugar = "clase";
       document.getElementById("parrafoPrimero").innerHTML = "Hola "+ lugar;
       }
       </script>
       
       </body>
       </html>
             

function saludo()

en ejecución


conversor de pulgadas

código
       
       <html>
       <body>
       <center>
       <h1>Conversor de pulgadas a cm</h1>
       <p>Pulgadas: <input type="number" id="pulgadas" required></p>
       <button onclick="conversor()">Calcular</button>
       <p id="parrafoRespuesta"></p>
       <script>
       function conversor() {
           var pulgadas = document.getElementById("pulgadas").value;
           var centimetros = pulgadas*2.54;
           var respuesta = centimetros + " centimetros";
           document.getElementById("parrafoRespuesta").innerHTML = respuesta;
       }
       </script>
       </center>
       </body>
       </html>
             

conversor de pulgadas

en ejecución

Conversor de pulgadas a cm

Pulgadas:


dias transcurridos

código
       
       <!DOCTYPE html>
       <html>
       <body>
       <center>
       <h1>Dias transcurridos</h1>
       <form>
       <p>Fecha inicial <input type="date" id="fecha1" required></p>
       <p>Fecha final <input type="date" id="fecha2" required></p>
       <input type="reset" onclick="resetear()">
       </form>
       <br>
       <button onclick="funcionTiempo()">Calcular</button>
       <p id="parrafoResultado"></p>
       <script>
       function funcionTiempo() {
           var fechaInicio = new Date(document.getElementById("fecha1").value).getTime();
           var fechaFin    = new Date(document.getElementById("fecha2").value).getTime();
           var diferencia  = (fechaFin - fechaInicio)/(1000*60*60*24);
       
           if (fechaInicio && fechaFin){
           document.getElementById("parrafoResultado").innerHTML ="Transcurrieron "+ diferencia+" dias.";
           }
       }
       function resetear(){
           document.getElementById("parrafoResultado").innerHTML = "";
       }
       </script>
       </center>
       </body>
       </html>
             

dias transcurridos

en ejecución

Dias transcurridos

Fecha inicial

Fecha final



indice de masa corporal

código
             
    <html>
    <body><!-- cuerpo del documento -->
    <center><!-- etiqueta HTML que centra todo el documento -->
    <h1>Indice de masa corporal</h1><!-- h1 h2 h3 h4 h5 h6 son etiquetas para enmarcar titulos -->
    <!-- A continuacion vienen los input (un string y dos numericos) -->
    <p>Nombre: <input type="text" id="nombreForm" required></p>
    <p>Peso en kg: <input type="number" id="pesoForm" required></p>
    <p>Talla en cm: <input type="number" id="tallaForm" required></p>
    <button onclick="calcularIMC()">Calcular</button> <button onclick="resetearIMC()">Resetear</button>
    
    <br><br>
    
    <!-- parrafos con un identificador, para poder modificarlo mas adelante -->
    <p id="parrafoRespuesta"></p>
    <p id="parrafoClasificacion"></p>
    
    <!-- dentro de las etiquetas "script" va el lenguaje javascript  -->
    <script>
    // cuando se aprieta el boton "Calcular" se llama a esta funcion, donde se establacen valores de variables y condiciones
    function calcularIMC() {
        var nombre = document.getElementById("nombreForm").value;//declaracion de variable con valor del input
        var peso = document.getElementById("pesoForm").value;//declaracion de variable con valor del input
        var tallaCm = document.getElementById("tallaForm").value;//declaracion de variable con valor del input
        var tallaMetros = tallaCm/100;//paso de valor en cm a m
        var imc = peso/(tallaMetros*tallaMetros);//uso de parentesis para asignar orden de operacion
        var parrafoClasificacion = document.getElementById("parrafoClasificacion");//se asigna un elemento especifico del documento
        if(imc<17){
            var clasificacion = "DESNUTRIDO";
            parrafoClasificacion.style.color = "red";
        }else if(imc>=17 && imc<18.5){
            var clasificacion = "BAJO PESO";
            parrafoClasificacion.style.color = "yellow";
        }else if(imc>=18.5 && imc<=25){
            var clasificacion = "PESO NORMAL";
            parrafoClasificacion.style.color = "green";
        }else if(imc>25 && imc<=30){
            var clasificacion = "SOBREPESO";
            parrafoClasificacion.style.color = "yellow";
        }else{
            var clasificacion = "OBESO";
            parrafoClasificacion.style.color = "red";
        }
    
    // el if a continuacion es para asegurarse de que responda solo si los tres campos de input tienen valor  
        if(nombre && peso && tallaCm){
            var respuesta = "Nombre: "+nombre+"<br>"+"Su IMC es de: "+imc;//concatenacion de cadenas y variables
            document.getElementById("parrafoRespuesta").innerHTML = respuesta;//dentro de la etiqueta del elemento se asigna un valor
            document.getElementById("parrafoClasificacion").innerHTML = clasificacion;
        }
    }
    // funcion que vacia los valores ingresados en los inputs y de los parrafos de respuesta y clasificacion
    function resetearIMC(){
        document.getElementById("nombreForm").value = "";
        document.getElementById("pesoForm").value = "";
        document.getElementById("tallaForm").value = "";
        document.getElementById("parrafoRespuesta").innerHTML = "";
        document.getElementById("parrafoClasificacion").innerHTML = "";
    }
    
    </script>
    </center>
    </body>
    </html>
        
             

indice de masa corporal

en ejecución

Indice de masa corporal

Nombre:

Peso en kg:

Talla en cm: