Curso jQuery: Ejercicios 1
Nueva noticia publicada en https://amdisenoweb.es/curso-jquery-ejercicios-1/
Curso jQuery: Ejercicios 1
Calcular el area de un triangulo, pedimos la base y la altura
<h1>Calculo del area del triangulo</h1> <p>Para calcular el area debes introducir la base y altura.</p> <p>Introduce base <input type="text" name="base" class="base"></p> <p>Introduce altura <input type="text" name="altura" class="altura"></p> <input type="button" class="calcular" value="Calcular"> <div class="resultado"></div> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) $(".calcular").click(function(e) var base, altura, resultado; base=Number($(".base").val()); altura=Number($(".altura").val()); resultado=1/2*base*altura; $(".resultado").html("<p>El area del triangulo es "+resultado+"</p>"); ); ); </script>
Un sencillo ejercicio de una calculadora con dos input para los números y los botones de suma, resta, multiplicación y división
<h1>Calculadora</h1> <p>Introduce do numeros y pulsa el boton correspondiente para realizar su operacion</p> <p> Numero 1: <input type="text" class="n1"> Numero 2: <input type="text" class="n2"> </p> <p> <input type="button" value="Suma los numeros" class="suma"> <input type="button" value="resta" class="resta"> <input type="button" value="multiplica" class="multiplica"> </p> <p> Resultado: <div class="resultado"></div> </p> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) $(".suma").click(function(e) var n1, n2, resultado; n1=Number($(".n1").val()); n2=Number($(".n2").val()); resultado=n1+n2; $(".resultado").html(resultado); ); $(".resta").click(function(e) var n1, n2, resultado; n1=Number($(".n1").val()); n2=Number($(".n2").val()); resultado=n1-n2; $(".resultado").html(resultado); ); $(".multiplica").click(function(e) var n1, n2, resultado; n1=Number($(".n1").val()); n2=Number($(".n2").val()); resultado=n1*n2; $(".resultado").html(resultado); ); ); </script>
Calculadora completa
<style type="text/css"> .display width:94%; height:40px; line-height: 40px; background-color:#e0f8e3; font-size:20px; border: 3px black ridge; border-radius: 5px; text-align: right; input[type=button] width:50px; height:50px; font-size:16px; background-color: #73ca65; border: 3px black ridge; border-radius: 5px; font-weight: bold; </style> </head> <body> <table> <tbody> <tr> <td colspan="4"><input type="text" name="textfield" id="textfield" class="display"></td> </tr> <tr> <td><input type="button" name="button" id="button" value="7" class="operacion"></td> <td><input type="button" name="button2" id="button2" value="8" class="operacion"></td> <td><input type="button" name="button3" id="button3" value="9" class="operacion"></td> <td><input type="button" name="button4" id="button4" value="+" class="operacion"></td> </tr> <tr> <td><input type="button" name="button5" id="button5" value="4" class="operacion"></td> <td><input type="button" name="button6" id="button6" value="5" class="operacion"></td> <td><input type="button" name="button7" id="button7" value="6" class="operacion"></td> <td><input type="button" name="button8" id="button8" value="-" class="operacion"></td> </tr> <tr> <td><input type="button" name="button9" id="button9" value="1" class="operacion"></td> <td><input type="button" name="button10" id="button10" value="2" class="operacion"></td> <td><input type="button" name="button11" id="button11" value="3" class="operacion"></td> <td><input type="button" name="button12" id="button12" value="*" class="operacion"></td> </tr> <tr> <td><input type="button" name="button13" id="button13" value="0" class="operacion"></td> <td><input type="button" name="button14" id="button14" value="." class="operacion"></td> <td><input type="button" name="button15" id="button15" value="=" class="resultado"></td> <td><input type="button" name="button16" id="button16" value="/" class="operacion"></td> </tr> <tr> <td><input type="button" name="button17" id="button17" value="Ce" class="limpiar"></td> <td><input type="button" name="button18" id="button18" value="(" class="operacion"></td> <td><input type="button" name="button19" id="button19" value=")" class="operacion"></td> <td><input type="button" name="button20" id="button20" value="Ret" class="retroceso"></td> </tr> <tr> <td><input type="button" name="button21" id="button21" value="Seno" class="seno"></td> <td><input type="button" name="button22" id="button22" value="Cos" class="coseno"></td> <td><input type="button" name="button23" id="button23" value="Raiz" class="raiz"></td> <td><input type="button" name="button24" id="button24" value="PI" class="PI"></td> </tr> </tbody> </table> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) $(".operacion").click(function(e) var display=$(".display").val(); display+=$(this).val(); $(".display").val(display); ); $(".resultado").click(function(e) var display=$(".display").val(); var resultado=eval(display); $(".display").val(resultado); ); $(".limpiar").click(function (e) $(".display").val(""); ); $(".retroceso").click(function(e) var display=$(".display").val(); display=display.substr(0,display.length-1); $(".display").val(display); ); $(".seno").click(function(e) var display=$(".display").val(); var resultado=Math.sin(display); $(".display").val(resultado); ); $(".coseno").click(function(e) var display=$(".display").val(); var resultado=Math.cos(display); $(".display").val(resultado); ); $(".raiz").click(function(e) var display=$(".display").val(); var resultado=Math.sqrt(display); $(".display").val(resultado); ); $(".PI").click(function(e) var display=$(".display").val(); var resultado=Math.PI; $(".display").val(resultado); ); ); </script>
En este caso el programa sirve para trabajar con un array y nos permite añadir números, borrarlos, ordenarlos y visualizarlos. Para que un enlace no “funcione” y se vaya a donde apunta o bien en jquery en el evento click añadimos e.preventDefaul() o en el href del enlace le ponemos javascript:void(0); hemos usado ambas formas en el ejemplo.
<p>Introduce un numero: <input type="text" name="numero" class="numero"> </p> <p> <a href="#" class="anadir">Añade el numero</a><br/> <a href="javascript:void(0);" class="visualizar">Visualiza los numeros</a><br/> <a href="#" class="borrar">Borra el ultimo numero</a><br/> <a href="javascript:void(0);" class="ordena">Ordena los numeros</a> </p> <div class="resultado"></div> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) var numeros=new Array(); $(".anadir").click(function(e) num=="") alert("No has introducido un numero"); else numeros.push(num); $(".numero").val(""); ); $(".visualizar").click(function(e) var i, longitud; longitud=numeros.length; $(".resultado").html("<p>los numeros son</p>"); for (i=0;i<longitud;i++) $(".resultado").append("<p>El numero en la posicion "+i+" es "+numeros[i]+"</p>"); ); $(".borrar").click(function(e) e.preventDefault(); numeros.pop(); $(".resultado").html("Se ha borrado un numero"); ); $(".ordena").click(function(e) numeros=numeros.sort(function(a,b)return a-b); $(".resultado").html("Se han ordenado los numeros"); ); ); </script>
Calculo de un boleto de primitiva.
<div class="resultado"></div> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) var numeros=new Array(6); var i,num,repetido,k; for (i=0;i<6;i++) do num=Math.floor(Math.random()*49+1); repetido=0; for (k=0;k<i;k++) if (numeros[k]==num) repetido=1; while(repetido==1); numeros[i]=num; numeros=numeros.sort(function(a,b)return a-b); $(".resultado").html("<p>La combinacion ganadora es</p>"); for (i=0;i<6;i++) $(".resultado").append("<p> "+numeros[i]+"</p>"); ); </script>