Categoría: JavaScript

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

Ajax 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",function(data){
                   console.log("resultado "+data);
                   $('#resultado').append(data+"<br/>");
               });
           });
        });
        </script>
    </body>
</html>

<?php
echo mt_rand(1,10);