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);
            }