Es un libro que cumple los objetivos del módulo de Desarrollo Web en entorno cliente del ciclo de Formación Profesional de Grado Superior en Desarrollo de Aplicaciones Web, pudiendo ser utilizado como libro de texto de esta materia.
Los contenidos cubren los últimos estándares del lenguaje JavaScript y, por ello, permite aprovechar las nuevas funcionalidades y APIs de este lenguaje. El libro parte desde las nociones más básicas del lenguaje hasta alcanzar los elementos más avanzados, siempre desde una óptica eminentemente práctica. Todas las unidades finalizan con un resumen de los conceptos vistos y con un test de conocimientos para comprobar la correcta asimilación de los mismos.
El libro está organizado de esta forma:
Las primeras unidades introducen al lector en el funcionamiento de las aplicaciones web y en la configuración de un entorno profesional de trabajo.
Las cuatro unidades siguientes describen las bases del lenguaje JavaScript: variables, tipos de datos, operadores, estructuras de control, estructuras básicas de datos (strings, arrays, Sets, Maps, etc.), funciones y programación orientada a objetos.
Después, dos unidades describen el uso de JavaScript para manipular del modelo de objetos HTML5 (DOM) y su programación orientada a eventos, con la finalidad de crear aplicaciones dinámicas.con las ideas más interesantes vistas en la misma.
Finalmente, las tres últimas unidades, cubren aspectos avanzados de trabajo: las nuevas capacidades funcionales del lenguaje JavaScript (control de errores, uso avanzado de funciones, promesas, carga dinámica de módulos y estructuras async/await), uso de peticiones y respuestas http con AJAX y uso de APIs para trabajo con Fetch, geolocalización, notificaciones, dibujo en canvas o WebStorage.
UNIDAD 1. INTRODUCCIÓN AL DESARROLLO WEB EN EL LADO DEL CLIENTE
1.1 CREACIÓN DE APLICACIONES WEB
1.1.1 ¿QUÉ ES UNA APLICACIÓN WEB?
1.1.2 PROCESO DE DESARROLLO DE APLICACIONES WEB
1.1.3 FRONT-END Y BACK-END
1.2 TECNOLOGÍAS DEL LADO DEL CLIENTE
1.2.1 BREVE RECORRIDO POR LAS TECNOLOGÍAS FRONT-END
1.2.2 EL TRIUNFO DE JAVASCRIPT
1.3 VERSIONES DE JAVASCRIPT
1.3.1 EL PROBLEMA DE LA COMPATIBILIDAD
1.3.2 LENGUAJES PREPROCESADOS
1.3.3 ESTÁNDARES A PARTIR DEL AÑO 2015
1.3.4 SITUACIÓN ACTUAL DE JAVASCRIPT
1.4 RESUMEN DE LA UNIDAD
1.5 TEST DE REPASO
UNIDAD 2. PREPARACIÓN DEL ENTORNO DE TRABAJO
2.1 LA CAJA DE HERRAMIENTAS DEL DESARROLLADOR FRONT-END
2.2 NAVEGADORES
2.3 EDITORES DE CÓDIGO
2.3.1 AYUDAS DE LOS EDITORES DE CÓDIGO
2.3.2 TIPOS DE EDITORES DE CÓDIGO
2.3.3 INSTALACIÓN DE VISUAL STUDIO CODE
2.3.4 USO DE VISUAL STUDIO CODE
2.3.5 CONFIGURACIÓN DE VISUAL STUDIO CODE
2.4 NODE.JS Y NPM
2.4.1 ¿QUÉ ES NODE.JS?
2.4.2 INSTALAR NODE.JS
2.4.3 NVM
2.4.4 NPM
2.5 GIT
2.5.1 SISTEMAS DE CONTROL DE VERSIONES Y GIT
2.5.2 INSTALACIÓN DE GIT
2.5.3 FUNCIONAMIENTO BÁSICO DE GIT
2.5.4 GITHUB. GIT EN REMOTO
2.6 PRÁCTICAS RESUELTAS
2.7 RESUMEN DE LA UNIDAD
2.8 TEST DE REPASO
UNIDAD 3. PRINCIPIOS DE PROGRAMACIÓN EN JAVASCRIPT
3.1 EJECUTAR CÓDIGO JAVASCRIPT
3.1.1 EJECUCIÓN DE JAVASCRIPT EN EL NAVEGADOR
3.1.2 EJECUCIÓN DE JAVASCRIPT FUERA DEL NAVEGADOR
3.2 FUNDAMENTOS BÁSICOS
3.2.1 CONCEPTOS FUNDAMENTALES br>
3.3 VARIABLES Y TIPOS DE DATOS
3.3.1 VALORES
3.3.2 DECLARACIÓN DE VARIABLES
3.3.3 TIPOS DE DATOS PRIMITIVOS
3.4 OPERADORES
3.4.1 ARITMÉTICOS
3.4.2 RELACIONALES
3.4.3 OPERADOR DE ENCADENAMIENTO
3.4.4 OPERADORES LÓGICOS
3.4.5 OPERADORES DE BIT
3.4.6 OPERADORES DE ASIGNACIÓN
3.5 CONVERSIÓN DE TIPOS
3.5.1 CONVERSIÓN AUTOMÁTICA
3.5.2 FORZAR CONVERSIONES
3.5.3 FUNCIÓN ISNAN
3.6 CUADROS DE DIÁLOGO DEL NAVEGADOR
3.6.1 MENSAJES DE ALERTA
3.6.2 CUADROS DE CONFIRMACIÓN
3.6.3 CUADROS DE ENTRADA DE TEXTO
3.7 CONTROL DEL FLUJO DEL PROGRAMA
3.7.1 INTRODUCCIÓN
3.7.2 NÚMEROS ALEATORIOS
3.7.3 INSTRUCCIÓN IF
3.7.4 INSTRUCCIÓN WHILE
3.7.5 BUCLE DOWHILE
3.7.6 BUCLE FOR
3.7.7 ABANDONAR UN BUCLE
3.7.8 BUCLES ANIDADOS
3.8 PRÁCTICAS RESUELTAS
3.9 PRÁCTICAS PROPUESTAS
3.10 RESUMEN DE LA UNIDAD
3.11 TEST DE REPASO
UNIDAD 4. ESTRUCTURAS BÁSICAS DE DATOS
4.1 STRINGS
4.1.1 USO DE STRINGS
4.1.2 COMPARACIÓN DE STRINGS
4.1.3 MÉTODOS DE LOS STRINGS
4.2 ARRAYS
4.2.1 ¿QUÉ ES UN ARRAY?
4.2.2 CREACIÓN DE ARRAYS
4.3 RECORRER ARRAYS
4.3.1 USO DEL BUCLE FOR PARA RECORRER ARRAYS
4.3.2 BUCLE FOR...IN
4.3.3 BUCLE FOR..OF
4.4 MÉTODOS DE LOS ARRAYS
4.4.1 TAMAÑO DEL ARRAY
4.4.2 SABER SI UN ELEMENTO ES UN ARRAY
4.4.3 MÉTODOS PARA AÑADIR ELEMENTOS
4.4.4 MEZCLAR ARRAYS
4.4.5 OBTENER Y AÑADIR SUBARRAYS
4.4.6 CONVERTIR ARRAY EN STRING
4.4.7 BÚSQUEDA DE ELEMENTOS EN UN ARRAY
4.4.8 MODIFICAR EL ORDEN DE LOS ELEMENTOS DE UN ARRAY
4.4.9 DESESTRUCTURACIÓN DE ARRAYS
4.5 ESTRUCTURAS DE TIPO SET
4.5.1 INTRODUCCIÓN
4.5.2 DECLARACIÓN Y CREACIÓN DE CONJUNTOS
4.5.3 MÉTODOS DE LOS CONJUNTOS
4.5.4 CONVERTIR CONJUNTOS EN ARRAYS
4.5.5 RECORRER CONJUNTOS
4.6 MAPAS
4.6.1 ¿QUÉ SON LOS MAPAS?
4.6.2 DECLARAR MAPAS
4.6.3 ASIGNAR VALORES A MAPAS
4.6.4 OPERACIONES SOBRE MAPAS
4.6.5 CONVERTIR MAPAS EN ARRAYS
4.6.6 RECORRER MAPAS
4.7 PRÁCTICAS RESUELTAS
4.8 PRÁCTICAS RECOMENDADAS
4.9 RESUMEN DE LA UNIDAD
4.10 TEST DE REPASO
UNIDAD 5. FUNCIONES
5.1 INTRODUCCIÓN A LAS FUNCIONES
5.2 CREACIÓN DE FUNCIONES
5.2.1 ELEMENTOS DE UNA FUNCIÓN
5.2.2 DECLARAR E INVOCAR FUNCIONES
5.2.3 ASIGNAR FUNCIONES A VARIABLES
5.2.4 FUNCIONES FLECHA
5.3 DETALLES SOBRE VARIABLES Y PARÁMETROS
5.3.1 ÁMBITO DE LAS VARIABLES
5.3.2 PASO POR VALOR Y PASO POR REFERENCIA
5.3.3 ARGUMENTOS CON VALORES POR DEFECTO
5.3.4 NÚMERO VARIABLE DE PARÁMETROS
5.4 USO AVANZADO DE FUNCIONES
5.4.1 LA PILA DE FUNCIONES
5.4.2 RECURSIVIDAD
5.4.3 FUNCIONES CALLBACK
5.4.4 USO DE MÉTODOS AVANZADOS PARA MANIPULAR ESTRUCTURAS DE DATOS
5.5 PRACTICAS RESUELTAS
5.6 PRÁCTICAS RECOMENDADAS
5.7 RESUMEN DE LA UNIDAD
5.8 TEST DE REPASO
UNIDAD 6. PROGRAMACIÓN DE OBJETOS EN JAVASCRIPT
6.1 JAVASCRIPT Y LA PROGRAMACIÓN ORIENTADA A OBJETOS
6.1.1 ¿QUÉ ES LA POO?
6.1.2 CARACTERÍSTICAS DE LA POO
6.1.3 JAVASCRIPT COMO LENGUAJE ORIENTADO A OBJETOS
6.2 USO DE OBJETOS
6.2.1 ACCESO A PROPIEDADES Y MÉTODOS
6.2.2 OBJETOS LITERALES
6.2.3 OBJETO THIS
6.2.4 RECORRER LAS PROPIEDADES DE UN OBJETO
6.2.5 BORRAR PROPIEDADES DE OBJETOS
6.3 USO AVANZADO DE OBJETOS
6.3.1 CREAR OBJETOS A TRAVÉS DE CONSTRUCTORES
6.3.2 OPERADOR INSTANCEOF
6.3.3 PROTOTIPOS
6.3.4 NOTACIÓN JSON
6.4 OBJETOS PREDEFINIDOS
6.4.1 OBJETO MATH
6.4.2 OBJETO DATE
6.4.3 EXPRESIONES REGULARES
6.5 PRÁCTICAS RESUELTAS
6.6 PRÁCTICAS RECOMENDADAS
6.7 RESUMEN DE LA UNIDAD
6.8 TEST DE REPASO
UNIDAD 7. MANIPULACIÓN DEL MODELO DE OBJETOS DEL DOCUMENTO
7.1 EL OBJETO WINDOW
7.1.1 BOM, MODELO DE OBJETOS DEL NAVEGADOR
7.1.2 OBJETO NAVIGATOR
7.1.3 OBJETO SCREEN
7.1.4 OBJETO LOCATION
7.1.5 OBJETO HISTORY
7.1.6 OTRAS PROPIEDADES Y MÉTODOS DE WINDOW
7.2 ¿QUÉ ES EL DOM?
7.2.1 EL MODELO DE OBJETOS DEL DOCUMENTO
7.2.2 EL OBJETO DOCUMENT
7.2.3 TIPOS DE NODOS
7.3 SELECCIÓN DE ELEMENTOS DEL DOM
7.3.1 SELECCIÓN POR EL IDENTIFICADOR
7.3.2 POR ETIQUETA
7.3.3 OBJETOS NODELIST
7.3.4 POR CLASE
7.3.5 POR SELECTOR CSS
7.4 OBTENER Y MODIFICAR DOM
7.4.1 MANIPULACIÓN DE ATRIBUTOS
7.4.2 MANIPULACIÓN DEL CONTENIDO DE LOS ELEMENTOS
7.4.3 MODIFICAR CSS
7.4.4 OBTENER ATRIBUTOS DATA
7.4.5 NAVEGAR POR EL DOM
7.4.6 AÑADIR ELEMENTOS
7.4.7 REEMPLAZAR ELEMENTOS
7.4.8 ELIMINAR ELEMENTOS
7.4.9 COLECCIONES VIVAS
7.4.10 OTRAS PROPIEDADES Y MÉTODOS DE LOS ELEMENTOS
7.5 TEMPORIZADORES
7.5.1 ¿QUÉ SON LOS TEMPORIZADORES?
7.5.2 SETTIMEOUT
7.5.3 SETINTERVAL
7.6 COOKIES
7.6.1 ¿QUÉ SON LAS COOKIES?
7.6.2 LECTURA Y GRABACIÓN DE COOKIES
7.6.3 FECHAS DE EXPIRACIÓN
7.6.4 RUTA Y DOMINIO DE LAS COOKIES
7.6.5 BORRAR COOKIES
7.7 PRÁCTICAS RESUELTAS
7.8 PRÁCTICAS RECOMENDADAS
7.9 RESUMEN DE LA UNIDAD
7.10 TEST DE REPASO
UNIDAD 8. GESTIÓN DE EVENTOS
8.1 INTRODUCCIÓN A LOS EVENTOS
8.2 CAPTURA DE EVENTOS
8.2.1 MÉTODOS CLÁSICOS Y OBSOLETOS
8.2.2 MÉTODO ACONSEJABLE
8.2.3 PROPAGACIÓN DE EVENTOS
8.2.4 ANULAR EVENTOS
8.2.5 CAPTURA DE EVENTOS EN ELEMENTOS DINÁMICOS
8.3 OBJETO DE EVENTO
8.3.1 UTILIDAD Y USO DEL OBJETO DE EVENTO
8.3.2 OBTENER COORDENADAS DEL EVENTO
8.3.3 OBTENER LA TECLA PULSADA
8.3.4 ANULAR COMPORTAMIENTOS PREDETERMINADOS
8.3.5 CANCELAR PROPAGACIÓN
8.3.6 LANZAR EVENTOS
8.4 LISTA DE TIPOS DE EVENTOS
8.4.1 EVENTOS DE RATÓN
8.4.2 EVENTOS DE TECLADO
8.4.3 EVENTOS DE MOVIMIENTO EN LA VENTANA
8.4.4 EVENTOS SOBRE CARGA Y DESCARGA DE ELEMENTOS
8.4.5 OTROS EVENTOS
8.5 FORMULARIOS
8.5.1 EL FORMULARIO COMO OBJETO DEL DOM
8.5.2 EVENTOS DE FORMULARIO
8.5.3 PROPIEDADES DE LOS CONTROLES
8.5.4 MÉTODOS DE LOS CONTROLES
8.6 PRÁCTICAS SOLUCIONADAS
8.7 PRÁCTICAS RECOMENDADAS
8.8 RESUMEN DE LA UNIDAD
8.9 TEST DE REPASO
UNIDAD 9. CONCEPTOS AVANZADOS
9.1 JAVASCRIPT AVANZADO
9.2 CONTROL DE ERRORES
9.2.1 INTRODUCCIÓN AL CONTROL DE ERRORES
9.2.2 ERRORES, EXCEPCIONES Y AVISOS
9.2.3 JAVASCRIPT MÁS ESTRICTO
9.2.4 CREAR Y LANZAR ERRORES PROPIOS
9.2.5 GESTIONAR LAS EXCEPCIONES. BLOQUE TRY...CATCH
9.3 MÓDULOS
9.3.1 USO DE MÓDULOS Y PAQUETES
9.3.2 CARGA Y CREACIÓN DE MÓDULOS
9.4 PROGRAMACIÓN ASÍNCRONA
9.4.1 PROGRAMACIÓN SÍNCRONA Y ASÍNCRONA
9.4.2 CALLBACK HELL
9.4.3 PROMESAS
9.4.4 FUNCIONES ASYNC
9.5 PRÁCTICAS RESUELTAS
9.6 RESUMEN DE LA UNIDAD
9.7 TEST DE REPASO
UNIDAD 10. AJAX
10.1 COMUNICACIÓN CLIENTE/SERVIDOR
10.2 INTRODUCCIÓN A AJAX
10.2.1 ¿QUÉ ES AJAX?
10.2.2 VENTAJAS DE AJAX
10.2.3 DESVENTAJAS DE AJAX
10.3 PETICIONES AJAX
10.3.1 USO DE UNA API PARA ACCEDER A UN SERVICIO WEB
10.3.2 CORS
10.3.3 APIS EN JAVASCRIPT PARA EL USO DE AJAX
10.4 REALIZAR PETICIONES MEDIANTE FETCH
10.5 MANIPULAR LA RESPUESTA. OBJETO RESPONSE
10.5.1 PROPIEDADES Y MÉTODOS DEL OBJETO DE RESPUESTA
10.5.2 DATOS DE LA RESPUESTA
10.5.3 PROCESAMIENTO DE LAS RESPUESTAS
10.6 PERSONALIZAR LA PETICIÓN. OBJETO REQUEST
10.6.1 PROPIEDADES Y MÉTODOS DE REQUEST
10.6.2 ESTABLECER LA CABECERA. OBJETO HEADERS
10.7 ENVIAR DATOS CON LA PETICIÓN
10.7.1 ENVÍO DE DATOS USANDO GET
10.7.2 ENVÍO DE DATOS DE FORMULARIO
10.7.3 ENVÍO DE PARÁMETROS EN FORMATO JSON
10.8 USO DE AWAIT/ASYNC CON FETCH
10.9 PRÁCTICAS SOLUCIONADAS
10.10 PRÁCTICAS RECOMENDADAS
10.11 RESUMEN DE LA UNIDAD
10.12 TEST DE REPASO
UNIDAD 11. USO DE APIS DE JAVASCRIPT
11.1 ¿QUÉ SON LAS APIS?
11.2 APIS DE HTML5
11.3 API PARA CANVAS
11.3.1 ¿QUÉ ES CANVAS?
11.3.2 EMPEZAR A TRABAJAR CON CANVAS
11.3.3 DIBUJO DE FORMAS
11.3.4 DIBUJO DE TEXTO
11.3.5 DIBUJAR IMÁGENES
11.3.6 BORRAR
11.3.7 CONCLUSIONES SOBRE CANVAS
11.4 WEB STORAGE
11.4.1 INTRODUCCIÓN A WEB STORAGE
11.4.2 GRABAR Y LEER DATOS
11.4.3 BORRAR ITEMS
11.4.4 CONCLUSIÓN SOBRE WEB STORAGE
11.5 GEOLOCATION
11.5.1 OBTENER LA POSICIÓN
11.5.2 OBTENER POSICIÓN CONTINUAMENTE
11.6 API PARA MULTIMEDIA
11.7 NOTIFICACIONES
11.7.1 FUNCIONAMIENTO DE LA API DE NOTIFICACIONES
11.7.2 CONCLUSIONES SOBRE LAS NOTIFICACIONES
11.8 PRÁCTICAS SOLUCIONADAS
11.9 RESUMEN DE LA UNIDAD
11.10 TEST DE REPASO