Domine JavaScript 4ª Edición

Fernández Casado, Pablo Enrique

• Editorial: Grupo Editorial Ra-Ma
• Año: 2020
• ISBN de la versión impresa: 9788499645308
• ISBN del libro electrónico: 9788499649016

Aunque JavaScript es un lenguaje capaz de manejar cosas tan increíbles como la geolocalización o de ejecutar subprogramas en segundo plano, casi, sin gastar recursos del sistema, para muchos, es el gran desconocido. Este libro va dirigido a todas aquellas personas, con o sin nivel, que quieren saber más sobre el mundo de la programación orientada a eventos o quieren iniciarse en el mundo de HTML5._x000D_Empezando desde un nivel cero, se van explicando de manera sencilla y concisa, todas y cada una de las características de JavaScript, desde los tipos de datos_x000D_hasta las diferentes API de HTML5 y su posible integración con CSS._x000D_Después de la exposición teórica del lenguaje, se exponen veinticuatro ejemplos que pueden ser descargados a través de un repositorio de GitHub, los cuales están pensados desde un punto de vista didáctico para que, el alumno o lector, ponga en práctica varios de los aspectos más relevantes e importantes que ofrece JavaScript como son los Web Components, los elementos nativos o la API Canvas._x000D_Cuando se termine este libro se habrán adquirido los conocimientos necesarios para poder enfrentarse a cualquier desafío que JavaScript le pueda plantear y se le presentará una biblioteca de componentes de rápida instalación e integración sin derechos de uso dedicada, sobre todo, a los desarrolladores que desean seguir instruyéndose._x000D_

26

DISEÑO DE COMPONENTES WEB

Introducción a los componentes

Un componente en JavaScript, no deja de ser otro objeto. Se podría considerar que un componente en JavaScript es un conjunto de instrucciones que están pensadas para proveer una funcionalidad concreta. Normalmente, este componente proporciona una forma sencilla que utilizar ciertas características que, de otro modo, serían un trabajo laborioso o tedioso.

Una de las cualidades importantes que debe tener un componente es que sea fácil de utilizar y de integrar. Además, debe estar programado para que sea reutilizable porque, no olvidemos una de las premisas más importantes de la programación y de la usabilidad, “Para que algo sea reutilizable, primero debe ser utilizable”.

Desde un punto de vista más funcional, los componentes se componen de la definición del constructor, unos parámetros de entrada y un conjunto de métodos que proporcionan la funcionalidad deseada.

Definición por declaración

Dado que JavaScript es un lenguaje que no está muy tipificado, al final, los componentes se pueden hacer de mil formas diferentes.

Mientras que unos hacen los componentes a través de un JavaScript básico y compatible con todos los navegadores, otros, los hacen con definición de clases, JSON y/o sin retrocompatibilidad. Todos ellos pueden ser una buena opción, siempre y cuando el rendimiento de la página no se vea muy afectado y sea reutilizable.

Por lo tanto, crear un componente depende un poco de uno mismo. Seguir una estructura lógica, facilitar la entrada y salida de datos, una interfaz gráfica personalizable y una compatibilidad progresiva evolutiva.

Formas básicas de crear componentes

Existen varias formas de crear un componente, sin embargo, las más utilizadas son a través de un JSON o a través de la definición de objetos.

Creación a través de JSON

Una forma frecuente de crear componentes es mediante la definición de un objeto tipo JSON que está provisto de una serie de atributos que pueden actuar como propiedad o como método.

var Plugin = {

name: “Componente JSON”,

version: 1.0,

init: function(texto){

var elemento = document.createElement(“label”);

elemento.innerHTML = texto;

document.body.appendChild(elemento);

console.log(“Componente insertado en el body”);

},

};

Este tipo de definición se asemeja más con el concepto de clases con métodos estáticos. Es decir, para llamar a uno de sus métodos necesitaremos hacerlo como si fuese una propiedad. En el ejemplo, el método init debe llamarse de forma explícita para poder ejecutarse y, en el proceso, crea un elemento label, le asigna un texto que se le pasa por parámetro y lo añade al body.

// Para llamarlo o ejecutarlo

Plugin.init(“Escriba nombre del plugin:”);

Creación a través de objetos

La otra forma frecuente de crear componentes es mediante la definición de un objeto tipo función. Este objeto tiene una declaración inicial y, más tarde si procede, se le añaden una serie de atributos que pued...

Índice

• PRÓLOGO
• VARIABLES Y AMBITOS
• TIPOS DE DATOS
• OPERADORES Y EXPRESIONES
• CONTROL DE FLUJO Y GESTIÓN DE ERRORES
• BUCLES Y LA ITERACIÓN
• INTERNACIONALIZACIÓN
• OBJETOS
• FUNCIONES
• CLASES
• EXPRESIONES REGULARES
• EVENTOS
• EL DOM
• OBSERVADORES DE MUTACIÓN
• GESTIÓN DE GRÁFICOS
• ALMACENAMIENTO WEB
• BASES DE DATOS WEB
• DRAG & DROP
• GESTIÓN DE FICHEROS
• ATRIBUTOS PERSONALIZADOS
• GESTIÓN Y VALIDACIÓN DE FORMULARIOS
• JAVASCRIPT ASÍNCRONO
• WEB SOCKETS
• WEB WORKERS
• GEOLOCALIZACIÓN
• NOTIFICACIONES WEB
• DISEÑO DE COMPONENTES WEB
• LIBRERÍA ISITOOLS
• RESUMEN DE SELECTORES DE CSS
• RESUMEN DE ELEMENTOS FORMULARIO DE HTML
• RESOLUCIÓN A LOS PROBLEMAS PROPUESTOS
• REFERENCIAS