Explicar las API disponibles en HTML5

Posted on by Rudeus Greyrat

API significa Interfaz de programación de aplicaciones. Una API es un conjunto de programas preconstruidos que se pueden usar con la ayuda de JavaScript. Las API se utilizan para implementar código ya escrito para satisfacer las necesidades del proyecto en el que está trabajando.

Discutamos algunas API útiles y populares proporcionadas por HTML5.

Nota: En todos los ejemplos de código que se mencionan a continuación, el archivo «myScript.js» contiene el siguiente código.

Javascript

var count = 0;
function countGFG() {
    count += 1;
    postMessage("Welcome to GeeksforGeek! (" + count + ")");
    setTimeout("countGFG()", 1000);
}
 
countGFG();

API de geolocalización HTML: la API de geolocalización se utiliza para obtener la ubicación actual del usuario o del visitante de la página. Mostrará la ubicación del usuario solo si el usuario lo permite, ya que compromete la seguridad y la privacidad del usuario.

Sintaxis:

var loc = navigator.geolocation;

Métodos disponibles en la API de geolocalización:

  • Método getCurrentPosition(): El método getCurrentPosition() devuelve un objeto con propiedades como latitud, longitud, precisión, altitud, etc.
  • Método watchPosition(): este método devolverá la posición actual del usuario, así como la ubicación actualizada cuando la posición del usuario cambie o el usuario viaje de una ubicación a otra ubicación.
  • Método clearWatch(): este método detendrá el método watchPosition() para que ya no rastree al usuario.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>HTML Geolocation API</title>
    <style>
        #container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
 
<body>
    <div id="container">
        <h1>Hey Geek,</h1>
        <h3>Welcome to GeeksforGeek!</h3>
        <button type="button" onclick="geoLoc()">
            Get Location
        </button>
    </div>
 
    <script>
        var container = document.getElementById("container");
        var pos = navigator.geolocation;
         
        function geoLoc() {
            if (pos)
                pos.getCurrentPosition(getLoc);
            else
                container.innerHTML = "Your browser does "
                    + "not support the Geolocation API.";
        }
 
        function getLoc(loc) {
            container.innerHTML = "Latitude: "
                + loc.coords.latitude +
                "<br>Longitude: " +
                loc.coords.longitude;
        }
    </script>
</body>
 
</html>

Producción:

 

API de arrastrar y soltar HTML: Arrastrar y soltar es una característica común hoy en día, donde puede arrastrar un elemento desde un lugar y soltarlo en otro.

Sintaxis: para usar arrastrar y soltar primero, debe hacer que el elemento se pueda arrastrar como se muestra a continuación:

<div draggable="true">
    //content of the element
</div>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>HTML Geolocation API</title>
     
    <style>
        #container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
 
        #drop {
            height: 105px;
            width: 105px;
            border: 2px solid black;
        }
    </style>
</head>
 
<body>
    <div id="container">
        <h1>Hey Geek,</h1>
        <h3>Welcome to GeeksforGeek!</h3>
         
<p>Drag image into the container</p>
 
        <div id="drop" ondrop="dropItem(event)"
            ondragover="droppable(event)"></div>
 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220428080551/gfglogo-200x200.png"
            alt="GeeksforGeek" id="image"
            draggable="true" ondragstart="dragItem(event)"
            height="100px" width="100px">
    </div>
 
    <script>
        function droppable(e) {
            e.preventDefault();
        }
 
        function dragItem(e) {
            e.dataTransfer.setData("text", e.target.id);
        }
 
        function dropItem(e) {
            e.preventDefault();
            var content = e.dataTransfer.getData("text");
            e.target.appendChild(document.getElementById(content));
        }
    </script>
</body>
 
</html>

Producción:

 

API de almacenamiento web HTML: la API de almacenamiento web HTML se utiliza para almacenar los datos en el navegador web. Al principio, los datos se almacenaban en forma de cookies que pueden almacenar una pequeña cantidad de datos y no pueden transferirse más al servidor. Pero, HTML5 nos presenta la API de almacenamiento web que puede almacenar grandes cantidades de datos en comparación con las cookies y puede transferirse al servidor. Usar esta API para almacenar datos es más seguro que usar cookies.

La API de almacenamiento web nos proporciona dos objetos con los que trabajar:

  1. window.sessionStorage: este objeto almacena temporalmente los datos en el navegador web, de modo que si el navegador se actualiza o se cierra, los datos almacenados se perderán.
  2. window.localStorage: localStorage almacena permanentemente los datos en el navegador sin caducidad, de modo que no se perderán incluso si se actualiza el navegador.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>HTML Web Storage API</title>
     
    <style>
        #container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
 
        #btnDiv {
            width: 20vw;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
        }
 
        .btn {
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <div id="container">
        <h1>Hey Geek,</h1>
        <h2 id="heading"></h2>
        <h3 id="desc"></h3>
        <div id="btnDiv">
            <button class="btn" onclick="getContent()">
                Get stored Data
            </button>
             
            <button class="btn" onclick="remContent()">
                Remove stored Data
            </button>
        </div>
    </div>
 
    <script>
        var head = document.getElementById('heading');
        var desc = document.getElementById("desc");
        function getContent() {
            if (typeof (Storage) !== "undefined") {
 
                // setItem() will set store the passed attribute
                // and value in localStorage
                localStorage.setItem('heading', 'Welcome to GeeksforGeek!');
                localStorage.setItem('description',
                    'A computer science portal for Geeks.');
                 
                // This is the way of accessing the items
                // stored in the storage
                head.innerText = localStorage.heading;
                desc.innerText = localStorage.description;
            }
            else {
                head.innerText =
                    "Your browser does not support web storage API.";
            }
        }
 
        function remContent() {
 
            // removeItem() will remove the passed attribute
            // and value from localStorage.
            localStorage.removeItem('heading');
            localStorage.removeItem('description');
            head.innerText = localStorage.heading;
            desc.innerText = localStorage.description;
        }
    </script>
</body>
 
</html>

Producción:

 

API HTML Web Worker: por lo general, cuando el JavaScript se está cargando para la página, la página se atasca hasta que finaliza la carga. La API del trabajador web nos ayuda a cargar el JavaScript sin afectar el rendimiento de la página. Ayuda a ejecutar JavaScript en segundo plano, independientemente de otros scripts.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
     
    <title>HTML Web Storage API</title>
 
    <style>
        #container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
 
        #btnDiv {
            width: 20vw;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
        }
 
        .btn {
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <div id="container">
        <h1>Hey Geek,</h1>
        <h2 id="heading"></h2>
        <div id="btnDiv">
            <button class="btn" onclick="getJS()">
                Start executing JS
            </button>
            <button class="btn" onclick="remJS()">
                Stop executing JS
            </button>
        </div>
    </div>
 
    <script>
        var myWorker;
        var head = document.getElementById('heading');
        function getJS() {
 
            // Below condition will checks for
            // the browser support.
            if (typeof (Worker) !== "undefined") {
                 
                // The condition below will checks for
                // existence of the worker
                if (typeof (myWorker) == "undefined") {
                    myWorker = new Worker("myScript.js");
                    // Above line Will create a worker that will
                    // execute the code of myscript.js file
                }
 
                // onmessage event triggers a function
                // with the data stored in external js file
                myWorker.onmessage = function (props) {
                    head.innerText = props.data;
                }
            }
            else {
                head.innerText =
                    "Your browser does not support web storage API.";
            }
        }
 
        function remJS() {
 
            // Terminate() will terminate the current worker
            myWorker.terminate();
            myWorker = undefined;
        }
    </script>
</body>
 
</html>

Producción:

 

Publicación traducida automáticamente

Artículo escrito por abhisheksainiaggarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *