Categoría: JavaScript

Ejercicio clicker empresa de software

Vamos a hacer un juego tipo clicker para manejar una empresa de software.

Tenemos un botón para escribir código. Cada vez que lo pulsamos generamos una línea de código. La venta de una línea de código nos proporciona 10 céntimos de euro. Vamos a tener un control de las líneas de código escritas y del dinero que tenemos.

Por 10€ (gasto de papeleo) podemos contratar a un minion. Cada minion escribe una línea de código cada 10 segundos.

Nuestras oficinas tienen capacidad para albergar a 50 minions.

Nuestros discos duros tienen capacidad para almacenar 10 millones de líneas de código.

Ampliar la oficina nos cuesta 1000€ y caben otros 50 minions. Comprar un disco duro nos cuesta 100 € y almacena 10 millones de líneas de código.

Podemos ir comprando estos powers up:

  • Contratar formador (1000€) Incrementa la productividad de los minions x 10
  • Comprar máquina de café (500€) Incrementa la productividad de los minions x 2
  • Incentivos (200€ * minion) Incrementa la productividad de los minions x 10 (este lo podemos ir haciendo todas las veces que queramos pero el precio se va multiplicando por 2, 400, 800…)

Cuando tengamos más de 500 minions:

  • Asesoría SCRUM (10000€) Incrementa la productividad de los minions x4
  • Contratar CTO de Amazon (100000€) Incrementa la productividad de los minions x50

Y también:

  • Contratar comercial (1000€) Incrementa el precio del código x 2
  • Contratar campaña medios (2000€) Incrementa el precio del código x 2
  • Contratar agencia (5000€) Incrementa el precio del código x 2

Para almacenamiento:

  • Comprar sistema de compresión (1000€) Duplica la capacidad de nuestros discos duros

 

Ejercicio Reloj

Vamos a construir un cronómetro de la siguiente manera:

Segundos

Minutos:

Horas:

Las cajas se van llenando hasta llegar a 60, cuando llegan a 60 se borra todo el div y se añade una caja a la siguiente. Cuando las horas lleguen a 24 se borra todo y se empieza de nuevo.

Ejercicio JS DOM

ejercicio

En la página anterior realizar un js que nos permita:

Ver todos los elementos que están dentro de una lista

Ver todos los elementos que están dentro de un td

Poner todos los elementos que tengan una y griega dentro de su texto de color rojo (todo el elemento)

Mostrar un listado de todos los id’s

Mostrar un listado de todas las clases

Ejercicio actores pseudo autocompletar

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        Actor:<input type="text" id="actor"><br/>
        <div id="lista"></div>
        <script>
            $(function () {
                console.log("Página cargada");
                $('#actor').keyup(function () {
                    console.log("Pulsado");
                    fetch('fetch_backend.php?actor='+$('#actor').val(), {
                        method: 'GET',
                    })
                            .then(function (response) {
                                console.log(response);
                                return response.json();
                            })
                            .then(function (data) {
                                console.log('data = ', data);
                                $('#lista').html('');
                                for(i=0;i<data.length;i++){
                                    $('#lista').append(data[i]+"<br>");
                                }
                            })
                            .catch(function (err) {
                                console.error(err);
                            });
                });
            });
        </script>
    </body>
</html>


<?php

$server = "localhost";
$user = "root";
$password = "";
$db = "sakila";
try {
    $conn = new PDO("mysql:host=$server;dbname=$db;charset=UTF8", $user, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $actor = filter_input(INPUT_GET, "actor");
    $sql = "select * from actor "
            . "where first_name like :actor "
            . "or last_name like :actor limit 10";
    $parametros = [
        'actor' => '%' . $actor . '%'
    ];
    $st = $conn->prepare($sql);
    $st->execute($parametros);
    $resultado = [];
    while ($fila = $st->fetch()) {
        $resultado[] = $fila['first_name'] . " " . $fila['last_name'];
    }
    echo json_encode($resultado);
} catch (Exception $e) {
    echo "Connection failed: " . $e->getMessage();
}

Como usar fetch en JS

Fetch

 <body>
        Importe:<input type="text" id="importe"><br/>
        Plazos:<input type="text" id="plazos"><br/>
        <button id="ajax">Pulsa aquí para probar el ajax</button>
        <div id="resultado"></div>
        <script>
            $(function () {
                console.log("Página cargada");
                $('#ajax').click(function () {
                    console.log("Pulsado");

                    fetch('ajax_backend.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        body: 'importe=' + $("#importe").val() + '&plazos=' + $("#plazos").val()
                    })
                            .then(function (response) {
                                console.log('response =', response);
                                return response.json();
                            })
                            .then(function (data) {
                                console.log('data = ', data);
                                $('#resultado').html("<ul>");
                                for (prop in data) {
                                    $('#resultado').append("<li>" + data[prop] + "</li>");
                                }
                                $('#resultado').append("</Ul>");
                            })
                            .catch(function (err) {
                                console.error(err);
                            });
                   
                });
            });
        </script>
    </body>

Ejercicio Ajax

Hacer un backend al que le pasemos por POST dos parámetros:
Importe y Plazos
El Backend creará una tabla con tantos elementos como plazo y los valores serán:

primer elemento: Importe/plazo*1.2
Segundo: Importe/plazo*1.2
Tercero: Importe/plazo*1.1
Cuarto: Importe/Plazo*1.1
Resto: Importe/Plazo

El backend devuelve la tabla como JSON

Tendremos un fronend con dos campos: Importe y Plazos y un botón de calcular. Cuando le de a calcular llamará al backend, recuperará la tabla, la convertirá a tabla de javascript y la imprimirá como una lista (ul) en un div.

$importe = filter_input(INPUT_POST, "importe");
$plazo = filter_input(INPUT_POST, "plazos");

$tabla = [];

$cantidad = $importe / $plazo;
for ($i = 0; $i < $plazo; $i++) {
    if ($i < 2) {
        $tabla[] = round($cantidad * 1.2,2);
    } elseif ($i < 4) {
        $tabla[] = round($cantidad * 1.1,2);
    } else {
        $tabla[] = round($cantidad,2);
    }
}
/*
array_walk($tabla, function(&$valor){
    $valor= round($valor,2);
});*/
echo json_encode($tabla);
  Importe:<input type="text" id="importe"><br/>
        Plazos:<input type="text" id="plazos"><br/>
        <button id="ajax">Pulsa aquí para probar el ajax</button>
        <div id="resultado"></div>
        <script>
        $(function(){
           console.log("Página cargada"); 
           $('#ajax').click(function(){
               console.log("Pulsado");
               $.post("ajax_backend.php",
               {"importe":$("#importe").val(),
               "plazos":$("#plazos").val()},
               function(data){
                   console.log("resultado "+data);
                  var objeto=JSON.parse(data);
                  $('#resultado').html("<ul>");
                  for(prop in objeto){
                      $('#resultado').append("<li>"+objeto[prop]+"</li>");
                  }
                   $('#resultado').append("</Ul>");
               });
           });
        });
        </script>

Ajax con post y objetos

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     
    </head>
    <body>
        Nombre:<input type="text" id="first_name"><br/>
        Apellidos:<input type="text" id="last_name"><br/>
        <button id="ajax">Pulsa aquí para probar el ajax</button>
        <div id="resultado"></div>
        <script>
        $(function(){
           console.log("Página cargada"); 
           $('#ajax').click(function(){
               console.log("Pulsado");
               $.post("ejemplo_ajax_backend.php",
               {"first_name":$("#first_name").val(),
               "last_name":$("#last_name").val()},
               function(data){
                   console.log("resultado "+data);
                  var objeto=JSON.parse(data);
                  for(prop in objeto){
                      $('#resultado').append(prop + " - "+objeto[prop]+"<br/>");
                  }
               });
           });
        });
        </script>
    </body>
</html>

<?php

$first_name= filter_input(INPUT_POST, "first_name");
$last_name= filter_input(INPUT_POST, "last_name");

$res=["Nombre"=>$first_name,"Apellidos"=>$last_name];

echo json_encode($res);

Ajax un poco menos simple

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     
    </head>
    <body>
        <button id="ajax">Pulsa aquí para probar el ajax</button>
        <div id="resultado"></div>
        <script>
        $(function(){
           console.log("Página cargada"); 
           $('#ajax').click(function(){
               console.log("Pulsado");
               $.get("ejemplo_ajax_backend.php?tam=10",function(data){
                   console.log("resultado "+data);
                  var tabla=JSON.parse(data);
                  console.log(tabla);
                  for(i=0;i<tabla.length;i++){
                      $('#resultado').append(tabla[i]+"<br/>");
                  }
               });
           });
        });
        </script>
    </body>
</html>


<?php

$lista=[];
$tam= filter_input(INPUT_GET, "tam",FILTER_SANITIZE_NUMBER_INT);
for($i=0;$i<$tam;$i++){
   $lista[]= str_repeat("*", mt_rand(1,20)); 
}
echo json_encode($lista);