API´s
OCTUBRE 2022
MTRO.
Javascript y DOM
Los navegadores cuentan con soporte nativo a algunas
características relacionadas con diferentes API´s para brindar una
mejor interacción con las apps desarrolladas.
Las API´s de selectores nos permiten ingresar un elemento y obtener
como resultado el elemento seleccionado, como parte del DOM.
Con AJAX es posible recorrer el DOM y acceder a sus nodos, con
HTML5 se introduce una API para trabajar con
getElementsByClassName(); dicha opción permite el recorrido del
DOM para obtener los elementos que coincidan con la clase que
se haya especificado.
Canvas
La incorporación de Canvas a HTML5 proporciona la posibilidad de
definir un área donde renderizar scripts que contengan diversar
formas en dos dimensiones (arcos, curvas, líneas, rectangulos) y
archivos de imágenes de mapas de bits.
El uso de la etiqueta <canvas> crea un nuevo universo de
posibilidades, además de los atributos globales de HTML5, soporta
height y width que pueden recibir un valor numérico expresado en
pixeles.
<canvas id=“miCanvas” width=“250” height=“250”>Su navegador
no soporta Canvas</canvas>
El código anterior mostrará el mensaje que escribimos para los
navegadores no compatibles en el caso de encontrarse con un
browser que no soporte Canvas.
En caso contrario, no mostrará nada hasta que se programe el
script que actuara con él.
<canvas id="miCanvas" width=“250” height=“250” style="border:1px" solid
#d3d3d3>
</canvas>
<script type="text/javascript">
var canv = [Link]("miCanvas");
var cand2 = [Link]("2d");
[Link] = "#FFFF0";
[Link](50,50,200,200);
[Link]="#CC0000";
[Link](10,10,100,100);
</script>
SVG
Las siglas SVG es un acrónimo del termino ingles Scalable Vector
Graphics(Gráficos Vectoriales Escalables), su orientación es para
describir gráficos vectoriales, es decir gráficos en dos dimensiones
(2D con XML).
<svg height="300" width="250"
xmlns="[Link]
<circle cx="100" cy="200" r="50" fill="blue">
</svg>
WebGL(3D)
Tal como se menciono anteriormente, con el uso de WebGL se
puede otorgar al elemento Canvas de HTML5 el uso de gráficos en
3D.
Para utilizar WebGL con Canvas, al llamar a getContext, le
indicamos que es webgl, en vez de 2D:
var variablegl = [Link](´webgl´);
Drag & Drop
Gracias a la posibilidad de acceder a la API de Javascript, a partir
de HTML5 se tiene la opción de contar con Drag and Drop nativo
en los navegadores que soporten dicha característica.
Una condición para que un elemento pueda ser arrastrado es tener
dicho atributo en true.
Pasos
Hacer un elemento draggable: Como primer paso; setear el atributo
draggable en true.
<img draggable="true">
Qué drag: ondragstart y setData(): Especificar que podría pasar
cuando un elemento es arrastrado.
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(ev
ent)" width="336" height="69">
En el código mostrado, el atributo ondragstart llama a una
función,drag(event), la cual indica que dato es arrastrado.
El método [Link](), setea el tipo de dato y el valor del
dato arrastrado.
function drag(ev) {
[Link]("text", [Link]);
}
En nuestro caso, el tipo de dato es texto y el valor es el id del elemento
draggable (“drag1”).
Donde arrastrar: El evento ondragover especifica donde será
arrastrado el dato arrastable(draggable).
Por default, data/elements no pueden ser arrastrados en otros
elementos, para permitir un arrastre, debemos´prevenir el manejo
default del elemento. Esto se realiza de la siguiente manera:
[Link]()
Hacer el arrastre: Cuando el dato arrastrable es lanzado, ocurre un
evento: drop(event).
function drop(ev) {
[Link]();
var data = [Link]("text");
[Link]([Link](data));
}
Explicación del código:
1. se efectua una llamada del método preventDefault() para prevenir
que el navegador efectue el default handling del dato.
2. Tomar el dato arrastrado con el método [Link](), este
método deberá retornar cualquier dato que sea seteado al mismo
tipo de dato en el método setData().
3. El dato arrastrado es el id del elemento arrastrable (“drag1”).
4. Agrega el elemento arrastrable dentro del elemento drop.
Web Storage
Es posible almacenar información en el equipo cliente, datos de
sesiones, dicha info cuenta con pares de claves y valores
(clave=valor) que se almacenan en el cliente para su acceso
posterior en la app web.
Web Storage llega a suplir algunas de la carencias con el uso de las
cookies en los desarrollos, hay que mencionar el navegador no
elimina por completo la información almacenada, pero el usuario si
puede elegir hacerlo si lo desea.
Almacenamiento local en nuestros desarrollos: Si deseamos
implementar almacenamiento de manera local, se debe conocer
alguna de sus características principales.
El objeto sessionStorage se utiliza para almacenar y manejar datos
de una sesión; a groso modo, el navegador o pestaña, se cierran
esta información dejara de estar disponible.
localStorage, implica un objeto pensado para durar más alla de la
sesión, dado a que se puede eliminar. Tal cual como el uso de las
cookies, no se recomienda almacenar info sensible con Web
Storage.
Métodos:
setItem(): Método encargado de establecer una entrada que recibirá
la clave y su valor, que serán pasados como los parámetros para este
método:
[Link](´Nombre_Clave´,´Valor_Clave´);
getItem(): Método que permite recuperar el valor de una clave pasad
como parámetro:
[Link](´Usuario´);
Clear(): Limpia las claves y su valor, para una sesión puede escribir:
[Link]();
removeItem(): Pasamos una clave como parámetro y remueve la
clave y su valor, del objeto sessionStorage, ejemplo:
[Link](´apellido´);
key(): Obtiene el valor de una clave y recibe como parámetro un
índice(n).
Hay que mencionar si deseamos trabajar con localStorage en vez de
sessionStorage es posible.