Home / codigo de colores para resistencias / DIY / electronica basica / HTML / Javascript / programacion / Resistencias / Vamos a programar

Vamos a programar

Recientemente publiqué una aplicación escrita en Javascript cuya única función era la de obtener el valor de una resistencia basado en los colores de las franjas que esta posea. El día de hoy te voy a mostrar como programar una similar.

El resultado es el mismo código que el de la entrada anterior pero con un look diferente.


**!!Esto no es un tutorial para aprender a programar en Javascript o HTML, para poder de hacerlo deberás de saber el mínimo de programación.!!**

Ahora que es lo que necesitamos:


  1. Un bloc de notas, cualquiera funciona pero yo prefiero usar Notepad++.
  2. Un navegador de internet (Opera por ejemplo).
  3. Si no eres experto programando; un poco de paciencia

Creando los controles.

Lo primero que vamos a hacer es insertar una lista que contenga los colores:

<select size="1" name="Valor 1" id = "Valor1">




En este caso usamos una lista "Select" indicándole que sea de una linea (Size = "1"), su nombre es "Valor 1" y su id es "Valor1". El último valor es el mas importante de todos ya que se utilizará para poder "encontrarlo" desde el código de javascript.

Luego procedemos a crear los elementos que conformaran la lista, en este caso serán los colores del código de las resistencias: Negro, Café, Rojo, Naranja, Amarillo, Verde, Azul, Viloeta, Gris y Blanco
El Código resultante puede lucir como el que sigue:

<HTML>

    <HEAD></HEAD>

    <TITLE></TITLE>

    <BODY>

    <h1>Calculadora de resistencias</h1>

        <form>

            <label>Calcular</label>

            <p>

            <label>Primer valor</label>

                <select size="1" name="Valor 1" id = "Valor1">

                <option value="0">Negro</option>

                <option value="1">Cafe</option>

                <option value="2">Rojo</option>

                <option value="3">Naranja</option>

                <option value="4">Amarillo</option>

                <option value="5">Verde</option>

                <option value="6">Azul</option>

                <option value="7">Violeta</option>

                <option value="8">Gris</option>

                <option value="9">Blanco</option></select>

            </p>

        </form>

    </BODY>

</HTML>

Solo habrá que repetir este paso dos veces más para tener las listas que representarían las franjas en una resistencia y ademas agregar una lista más que contendrá los valores dorado y plateado, que son equivalentes a la tolerancia que está posea. El código requiere además de un botón (button) que será el encargado de llamar a nuestra función de javascript y 3 etiquetas (label) en donde se mostrará el resultado.
El código resultante tras añadir las listas que se necesitan puede lucir como el siguiente: 


<HTML>

    <HEAD></HEAD>

    <TITLE></TITLE>

    <BODY>

    <h1>Calculadora de resistencias</h1>

        <form>

        <label>Calcular</label>

        <p><label>Primer valor</label> <select size="1" name="Valor 1" id = "Valor1">

        <option value="0">Negro</option>

        <option value="1">Cafe</option>

        <option value="2">Rojo</option>

        <option value="3">Naranja</option>

        <option value="4">Amarillo</option>

        <option value="5">Verde</option>

        <option value="6">Azul</option>

        <option value="7">Violeta</option>

        <option value="8">Gris</option>

        <option value="9">Blanco</option></select></p>

    <p><label>Segundo valor</label> <select size = "1" name = "Valor 2" id = "Valor2">

        <option value="0">Negro</option>

        <option value="1">Cafe</option>

        <option value="2">Rojo</option>

        <option value="3">Naranja</option>

        <option value="4">Amarillo</option>

        <option value="5">Verde</option>

        <option value="6">Azul</option>

        <option value="7">Violeta</option>

        <option value="8">Gris</option>

        <option value="9">Blanco</option></select></p>

    <p><label>Tercer valor</label> <select size = "1" name = "Valor 3" id = "Valor3">

        <option value="0">Negro</option>

        <option value="1">Cafe</option>

        <option value="2">Rojo</option>

        <option value="3">Naranja</option>

        <option value="4">Amarillo</option>

        <option value="5">Verde</option>

        <option value="6">Azul</option>

        <option value="7">Violeta</option>

        <option value="8">Gris</option>

        <option value="9">Blanco</option></select></p>

    <p><label>Cuarto valor</label> <select size = "1" name = "Valor 4" id = "Valor4">

        <option value="0">Dorado</option>

        <option value="1">Plata</option></select></p>

            </p>

        </form>

    </BODY>

</HTML>

Ahora el código de javascript

El código lo pongo tal cual para que se entienda completo, ademasde que he añadido los comentarios que considero pertinentes para poder usarlo facilmente. 

<script type="text/javascript">

  //Funcion para calcular el valor de una resistencia basado en sus colores

  //Esta funcion solo recupera lo que seria equivalente a los numeros significativos

    function GetSignificant()

    {

        var ColorSelector1 = document.getElementById('Valor1');

        var Color1=ColorSelector1.options[ColorSelector1.selectedIndex].value;

        var ColorSelector2 = document.getElementById('Valor2');

        var Color2=ColorSelector2.options[ColorSelector2.selectedIndex].value;

        return parseInt(Color1 + Color2);

       

    }

    //Esta funcion solo obtiene la tolerancia de la resistencia

    function GetTolerancia()

    {

        var ColorSelector4 = document.getElementById('Valor4');

        var Color4=ColorSelector4.selectedIndex;

        switch (Color4)

        {

            case 0:

            return "+5% de tolerancia"

            break

            case 1:

            return "+10% de tolerancia"

            break

        }      

    }

    //Esta funcion regresa el valor total de la resistencia

    function GetValor()

    {

        var ColorSelector3 = document.getElementById('Valor3');

        var Color3=ColorSelector3.options[ColorSelector3.selectedIndex].value;



        switch (Color3)

        {

            case '0':

            return GetSignificant()*1;

            break

            case '1':

            return GetSignificant()*1e1;

            break

            case '2':

            return GetSignificant()*1e2;

            break

            case '3':

            return GetSignificant()*1e3;

            break

            case '4':

            return GetSignificant()*1e4;

            break

            case '5':

            return GetSignificant()*1e5;

            break

            case '6':

            return GetSignificant()*1e6;

            break

            case '7':

            return GetSignificant()*1e7;

            break

            case '8':

            return GetSignificant()*1e8;

            break

            case '9':

            return GetSignificant()*1e9;

            break

        }

    }

    //Esta funcion se encarga de mostrar el resultado y debe de llamar desde un boton

    function ShowResult()

    {

        var label1 = document.getElementById('lblResultado');

        var label2 = document.getElementById('lblResultadoK');

        var label3 = document.getElementById('lblResultadoM');

        var Total = GetValor();

        label1.innerHTML = Total.toString()+'&#8486 ' + GetTolerancia();

        label2.innerHTML = (Total/1e3).toString()+' Kilo&#8486 ' + GetTolerancia();

        label3.innerHTML = (Total/1e6).toString()+' Mega&#8486 ' + GetTolerancia();

    }

  </script>

Esto es todo lo que se necesita para poder usar la aplicacion.Si tienes dudas o comentario no dudes en comentar.
En el siguiente articulo le pondremos un look en verde para que se vea un poco mejor.
Los leo luego.

No hay comentarios.

Suscribirse a: Comentarios de la entrada (Atom)