Juan Pablo Fuentes – Página 127 – Trifulcas

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

Funciones temporizador

 <div id="reloj"></div>
        <div id="crono"></div>
        <input type="button" id="botonparar" value="Parar"><br/>
        <input type="button" id="botoniniciar" value="Iniciar"><br/>
        <input type="button" id="botonreiniciar" value="Reiniciar"><br/>
        Nombre: <input type="text" id="nombre"><br/>
        password: <input type="text" id="password"><br/>
        <input type="button" id="botonlogin" value="Login">
        <script>
            document.getElementById("botonparar").addEventListener("click", parar);
            document.getElementById("botoniniciar").addEventListener("click", iniciar);
            document.getElementById("botonreiniciar").addEventListener("click", reiniciar);

            setTimeout(reloj, 500);
            var c = 0;
            var timer;
            cronometro();
            function cronometro() {
                document.getElementById("crono").innerHTML = c;
                c++;
                timer = setTimeout(cronometro, 10);
            }
            function parar() {
                clearTimeout(timer);
            }
            function iniciar(){
                cronometro();
            }
            function reiniciar(){
                c=0;
                cronometro();
            }
            function reloj() {
                var d = new Date();
                document.getElementById("reloj").innerHTML = d.toLocaleTimeString();
                setTimeout(reloj, 500);
            }

Objetos en javascript

 var alumno = {
                nombre: "Juan",
                notas: [
                    {nota: 5, historial: [1, 2, 3]},
                    {nota: 9, historial: [4, 5,
                            {evaluacion: "correcta", observaciones: "Va mejorando"}]}
                ],
                dni: "12345678Z",
                estatus: function () {
                    if (this.nota >= 5) {
                        return "Aprobado";
                    } else {
                        return "Suspendido";
                    }
                },
                otrafuncion: function () {

                }
            };
            var utilidades = {
                esVocal: function () {

                },
                esCifra: function () {

                }
            }

            var calcular = function () {
                return "Hola";
            }

            for (var propiedad in alumno) {
                console.log(propiedad + " - " + alumno[propiedad] + " - " + typeof (alumno[propiedad]));
            }

            var producto = {
                nombre: "Lentejas",
                precio: 100,
                PVP: function () {
                    return this.precio * 1.04;
                }
            }

            //Constructores de objetos
            function empleado(nombre, sueldo) {
                this.nombre = nombre;
                this.sueldo = sueldo;
            }

            var juan = new empleado("Juan", 1000);
            /*
             * juan={
             * nombre:juan,
             * sueldo:1000
             * }
             * 
             */
            var ana = new empleado("Ana", 1500)


            var empresa = []
            for (var i = 0; i < 5; i++) {
                empresa.push(new empleado("Nombre" + i, 1000 + i * 500));
            }
            console.log(empresa);
            empresa = {
                empleados: [],
                nombre: "Actibty",
                NIF: "B12344565"
            }
            for (var i = 0; i < 5; i++) {
                empresa.empleados.push(new empleado("Nombre" + i, 1000 + i * 500));
            }
            console.log(empresa);

Lugar de quedada BizBarcelona: Suarna

EL Xop d’or ya no existe, lo han cambiado por un kentucky. Quedamos aquí:

Ordenaciones

    function larga(a, b) {
                    if (a.length == b.length) {
                        return a > b;

                    } else {
                        return a.length - b.length;
                    }
                }
                t = "en un lugar de la mancha de cuyo nombre no quiero acordarme".split(" ");
                t.sort(larga);
                console.log(t);
                
                var num=[1,2,3,4,5,6,7];
                
                function aleatorio(a,b){
                    return Math.random()-.5;
                }
                num.sort(aleatorio);
                console.log(num);