anun1

sábado, 13 de noviembre de 2021

Codigo Metodo de la burbuja en javascript y html

 Hoy veremos el metodo de la burbuja escrito en html y javascript lo esplicare lo mas sensillo posible, el metodo de la burbuja consiste en intercambiar los valores de 2 variables, asi que primero creamos el siguiente formulario en html



el codigo para crear el formulario es el siguiente

<html>
<head><title>Metodo de la Burbuja</title>
</head>
<body>
<center>
<br><br><br><br>
Numero 1:<input type="text" id="num1" value="5"><br><br>
Numero 1:<input type="text" id="num2" value="4"><br><br>
<input type="button" value="Cambiar 1" onclick="burbuja1()"><input type="button" value="Cambiar 2" onclick="burbuja2()">
<br>
</center>
</body>
</html>

 
yo para el ejemplo al cuadro de texto1 y texto2 les asigne valores el 5 y 4, asi que la mision aqui es hacer que el cuadro de texto1 sea igual al cuadro de texto 2 y el 2 al cuadro de texto 1, hay 2 formas de hacerlo la mas facil es usando una variable axiliar y la otra la mas dificil es sin usar la variable, asi que para cada diferente metodo usaremos una funcion para eso agregamos la etiqueta <script> y agregamos la primera funcion

function burbuja1()//metodo con variable
{
   var nv;
   var n1 = document.getElementById("num1").value;
   var n2 = document.getElementById("num2").value;
   
   nv=n1;
   n1=n2;
   n2=nv;
   
   document.getElementById("num1").value=n1;
   document.getElementById("num2").value=n2;
   
}

si se fijan uso una variable nv para intercambiar los valores, a nv le paso el valor de n1 y linea siguiente digo que n1 sea igual a n2 despues de esto n2 sera igual a nv que es la variable auxiliar.

ahora veremos la funcion sin variable axiliar

function burbuja2()//metodo sin variable
{
   var n1 = parseInt(document.getElementById("num1").value);
   var n2 = parseInt(document.getElementById("num2").value);
   
   n1=n1-n2
   n2=n1+n2
   n1=n2-n1
   
   document.getElementById("num1").value=n1;
   document.getElementById("num2").value=n2;
}


como ven tomo los valores de n1 y n2 y realiso las siguientes operaciones aritmeticas de suma y resta y obtenemos el mismo resultado.

Ahora les dejo el codigo completo

<html>
<head><title>Metodo de la Burbuja</title>
</head>
<body>
<center>
<br><br><br><br>
Numero 1:<input type="text" id="num1" value="5"><br><br>
Numero 1:<input type="text" id="num2" value="4"><br><br>
<input type="button" value="Cambiar 1" onclick="burbuja1()"><input type="button" value="Cambiar 2" onclick="burbuja2()">
<br>
</center>
<script>
function burbuja1()//metodo con variable
{
   var nv;
   var n1 = document.getElementById("num1").value;
   var n2 = document.getElementById("num2").value;
   
   nv=n1;
   n1=n2;
   n2=nv;
   
   document.getElementById("num1").value=n1;
   document.getElementById("num2").value=n2;
   
}
function burbuja2()//metodo sin variable
{
   var n1 = parseInt(document.getElementById("num1").value);
   var n2 = parseInt(document.getElementById("num2").value);
   
   n1=n1-n2
   n2=n1+n2
   n1=n2-n1
   
   document.getElementById("num1").value=n1;
   document.getElementById("num2").value=n2;
}
</script>

</body>
</html>

bueno creo que eso es todo espero sea de utilidad para alguien saludos Flamer


No hay comentarios.:

Publicar un comentario