<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
#contenedor{
background-color: lightblue;
width:500px;
height:600px;
padding:10px;
border:10px solid blue;
position:relative;
}
.elemento{
background-color: red;
border: solid 1px black;
display:inline-block;
box-sizing: border-box;
}
.pelota{
background-color: red;
border: solid 1px black;
position:absolute;
top:0;
left:0;
box-sizing: border-box;
border-radius: 50%;
width:50px;
height:50px;
}
</style>
</head>
<body style="background-color:lightgrey">
<input type="number" id="incremento" value="10">
<input class="btn btn-info boton" type="button" id="cambiar" value="Cambiar">
<input class="btn btn-info boton" type="button" id="pelota" value="Pelota">
<div id="contenedor">
</div>
<script>
$(function () {
var incX=10;
var incY=10;
$('#cambiar').click(function () {
var incremento = Number($('#incremento').val());
$('#contenedor').width($('#contenedor').width() + incremento)
.height($('#contenedor').height() + incremento);
});
$("#contenedor").mouseover(function (e) {
console.log(e);
});
$('#pelota').click(function(){
$("#contenedor").append("<div class='pelota'></div>");
setTimeout(moverPelota,100);
})
function moverPelota(){
$(".pelota").css("top","+="+incY+"px");
$(".pelota").css("left","+="+incX+"px");
var top=parseInt($(".pelota").css("top"));
var left=parseInt($(".pelota").css("left"));
var ancho=$('#contenedor').width()-$(".pelota").outerWidth()/2;
var alto=$('#contenedor').height()-$(".pelota").outerHeight()/2;
if (top>alto || top<0){
incY=-incY;
}
if (left>ancho || left<0){
incX=-incX;
}
setTimeout(moverPelota,100);
}
});
</script>
</body>
</html>
Autor: Juan Pablo Fuentes
Formador de programación y bases de datos
Div dinámicos
<style>
#contenedor{
background-color: lightblue;
width:500px;
height:500px;
padding:10px;
border:10px solid blue;
}
.elemento{
background-color: red;
border: solid 1px black;
display:inline-block;
box-sizing: border-box;
}
</style>
</head>
<body style="background-color:lightgrey">
<input type="number" id="dimensiones" value="500">
<input type="number" id="ancho" value="3">x<input type="number" id="alto" value="3">
<input class="btn btn-info boton" type="button" id="crear" value="Crear">
<div id="contenedor">
</div>
<script>
$(function () {
$('#crear').click(function () {
var dimensiones = Number($('#dimensiones').val());
var ancho = Number($('#ancho').val());
var alto = Number($('#alto').val());
$('#contenedor').width(dimensiones).height(dimensiones);
$('#contenedor').empty();
for (var i = 0; i < ancho * alto; i++) {
$('#contenedor').append('<div class="elemento"> </div>');
}
$('.elemento').outerWidth($('#contenedor').width() / ancho);
$('.elemento').outerHeight($('#contenedor').height() / alto);
});
});
</script>
Cajas dinámicas
<h2>Cajas dinámicas</h2>
<input type="number" class="form-control" id="cajas" min="1" max="10" value="2">
<input class="btn btn-info boton" type="button" id="crear" value="Crear">
<div id="res">
</div>
<input class="btn btn-info boton" type="button" id="sumar" value="Sumar">
$(function () {
$('#crear').click(function () {
var n = Number($('#cajas').val());
$('#res').empty();
for (var i = 0; i < n; i++) {
$('#res').append('<input type="number" id="valor' + i + '" value="1" ><br/>');
// $('#res').append("<input type=\"number\" id=\"valor" + i + "\" value=\"1\" ><br/>");
}
});
$('#sumar').click(function () {
var n = Number($('#cajas').val());
var suma = 0;
for (var i = 0; i < n; i++) {
suma += Number($('#valor' + i).val());
}
$('#res p').remove();
$('#res').append("<p>La suma es: "+suma+"</p>");
});
});
Calculadora jquery 2.0
<div class="container">
<h2>Calculadora <b>poco científica</b></h2>
<input type="text" class="form-control" id="num1" value="4">
<input class="btn btn-info boton" type="button" id="suma" value="+">
<input class="btn btn-info boton" type="button" id="resta" value="-">
<input class="btn btn-info boton" type="button" id="multi" value="*">
<input class="btn btn-info boton" type="button" id="divi" value="/">
<input class="btn btn-info" type="button" id="reset" value="Borrar campos">
<input type="text" class="form-control" id="num2" value="5">
<h3>=</h3>
<input type="text" class="form-control" id="res">
</div>
$(function () {
$(".boton").click(function () {
var n1 = Number($('#num1').val());
var n2 = Number($('#num2').val());
var operacion = $(this).val();
$('#res').val(eval(n1 + operacion + n2));
$('#res').after("<p>"+n1 + " " + operacion + " " +
n2 + " = " + $('#res').val()+"</p>");
});
$("#reset").click(function () {
$(':text').val("");
});
});
Calculadora
<h2>Calculadora</h2>
<input type="text" class="form-control" id="num1" value="4">
<input class="btn btn-info" type="button" id="sumar" value="+">
<input class="btn btn-info" type="button" id="restar" value="-">
<input class="btn btn-info" type="button" id="multiplicar" value="*">
<input class="btn btn-info" type="button" id="dividir" value="/">
<input type="text" class="form-control" id="num2" value="5">
<h3>=</h3>
<input type="text" class="form-control" id="res">
$(function () {
$("#sumar").click(function () {
var n1 = Number($('#num1').val());
var n2 = Number($('#num2').val());
$('#res').val(n1 + n2);
});
$("#restar").click(function () {
var n1 = Number($('#num1').val());
var n2 = Number($('#num2').val());
$('#res').val(n1 - n2);
});
$("#multiplicar").click(function () {
var n1 = Number($('#num1').val());
var n2 = Number($('#num2').val());
$('#res').val(n1 * n2);
});
$("#dividir").click(function () {
var n1 = Number($('#num1').val());
var n2 = Number($('#num2').val());
$('#res').val(n1 / n2);
});
});
Dados con jquery
<h1 >Tirada de dados</h1>
<input type="button" id="botontirar" value="Tirar">
<div id="resultado"></div>
<img id="dado" src="img/dado1.png">
$(function () {
$("#botontirar").click(function () {
var dado = tiradaDado();
$("#resultado").html("Ha salido el " + dado);
$("#dado").attr("src", "img/dado" + dado + ".png");
});
function tiradaDado() {
return Math.floor(Math.random() * 6) + 1;
}
});
Ejemplos animaciones
<div class="container">
<h1>Animación ejemplos</h1>
<div id="caja1">
</div>
<div id="caja2">
</div>
<div id="caja3">
</div>
<input type="button" id="anima1" value="Animación 1 (jquery)">
<input type="button" id="anima3" value="Animación 3 (jquery+CSS3)">
</div>
<script src="js/codigo.js" type="text/javascript"></script>
#caja1,#caja2,#caja3{
background-color: red;
height:150px;
width:150px;
margin:10px;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
#caja2, .animacion {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
$(function () {
$("#anima1").click(function () {
$("#caja1").animate({
left: '250px',
opacity: '0.5',
height: '200px',
width: '200px'
});
});
$('#anima3').click(function () {
$("#caja3").addClass("animacion");
})
});
jquery introducción
<div class="container">
<h1>Página con jquery</h1>
<p class="parrafo">Hola</p>
<p class="parrafo">que</p>
<p class="parrafo">tal</p>
<div id="contenido">
<h3>Contenido muy interesante</h3>
<p>Bla bla blabla bláblala</p>
<p>Bla bla blabla bláblala</p>
<p>Bla bla blabla bláblala</p>
</div>
<input type="button" id="boton" value="Pinchamé">
</div>
<script src="js/codigo.js" type="text/javascript"></script>
$(function () {
$("h1").after("<p>La página se ha cargado</p>");
$(".parrafo").after("@@@");
$('#boton').click(function () {
$('#contenido').toggle();
});
$("#contenido p").on({
mouseenter: function () {
$(this).css("background-color", "lightgray");
},
mouseleave: function () {
$(this).css("background-color", "lightblue");
},
click: function () {
$(this).css("background-color", "yellow");
}
});
});
Ejercicios tipo examen
1.- Una función ‘ceros’ que nos devuelva una cadena con el número de ceros que le pasemos:
ceros(5)->”00000″
2.- Una función invertir que le pasemos una cadena y nos devuelva la cadena invertida
invertir(“hola”)->”olah”
3.- Una función que nos devuelva true si es fin de semana y false en cualquier otro caso
finDeSemana()->true
4.- Una función a la que le pasamos un array de números y nos devuelva un array con los números pares:
verPares([1,2,3,4])->[2,4]
Ejemplos repaso
var a = 1;
while (a < 1000) {
//console.log(a);
a *= 2;
}
console.log(a)
var cadena = "hola que tal";
while (cadena.length > 0) {
console.log(cadena);
cadena = cadena.slice(1);
}
var num = 27;
while (num !== 1) {
console.log(num)
if (num % 2 == 0) {
num /= 2;
} else {
num = num * 3 + 1;
}
}
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
for (var i = 0; i < 10; i++) {
console.log(i);
}
for (var n = 27; n !== 1; ) {
if (n % 2 == 0) {
n /= 2;
} else {
n = n * 3 + 1;
}
console.log(n);
}
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
for (var i = 0; i < 10; i++) {
console.log(i);
}
for (var n = 10; n !== 1; n = n % 2 == 0 ? n / 2 : n * 3 + 1) {
console.log(n);
}