Desarrollo web en entorno cliente (2.ª edición)

Descripción

Este libro expone de forma clara y didáctica todos los contenidos del módulo profesional Desarrollo Web en Entorno Cliente, potenciando en esta nueva edición un enfoque más cercano al ámbito laboral y aspectos del lenguaje muy utilizados en frameworks, como ReactJS –el más utilizado en la actualidad y al que se le dedica un capítulo en exclusiva con ejercicios y ejemplos– y Angular. Los conocimientos que se adquieren son fundamentales, puesto que complementan los alcanzados en otros módulos de la titulación y se adquieren habilidades que el futuro programador necesitará en su vida profesional.

A lo largo del libro se trabajan las arquitecturas y las herramientas de desarrollo front-end, la sintaxis del lenguaje JavaScript, los objetos predefinidos, las funciones, el manejo del tiempo, el DOM y el BOM, los mecanismos de comunicación asíncrona entre front y back-end, etc. También se presentan multitud de ejemplos y fragmentos de código para practicar, muchos de ellos disponibles para descargar, así como prácticas guiadas, actividades y ejercicios que permitirán al lector manejar la materia con solvencia.

PRESENTACIÓN .............................................................................................................................................................. 11

1. SELECCIÓN DE ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN .................... 13

Objetivos ................................................................................................................................................................... 13

Mapa conceptual ................................................................................................................................................. 14

Glosario ...................................................................................................................................................................... 14

1.1. Introducción ............................................................................................................................................ 15

1.2. Front-end y back-end ........................................................................................................................ 15

1.3. Lenguajes de programación en entorno cliente .............................................................. 16

1.3.1. ReactJS ........................................................................................................................................ 17

1.3.2. AngularJS .................................................................................................................................... 17

1.3.3. Vue.js .......................................................................................................................................... 17

1.4. Características de los lenguajes de script ............................................................................. 18

1.5. Integración de JavaScript dentro de HTML .......................................................................... 19

1.5.1. Ejemplo de JavaScript en ficheros js separados ........................................................ 20

1.5.2. Ejemplo de JavaScript con código dentro del HTML .............................................. 21

1.6. Herramientas de programación en JavaScript ................................................................... 22

1.6.1. Herramientas online ............................................................................................................... 22

1.6.2. Utilización de IDE y sistemas de control de versiones ............................................ 22

1.7. Posibilidades que ofrece JavaScript ......................................................................................... 24

1.7.1. Modificación del contenido de una página web ...................................................... 24

6DESARROLLO WEB EN ENTORNO CLIENTE

ÍNDICE

1.7.2. Cambiar atributos de objetos HTML ................................................................................ 24

1.7.3. Cambiar el estilo CSS ............................................................................................................. 26

1.8. Comunicación de JavaScript con el exterior ...................................................................... 26

1.8.1. Escribir en la consola del navegador utilizando console.log() ............................ 27

1.8.2. Escribir en cualquier elemento HTML utilizando el atributo innerHTML ........... 27

1.8.3. Generar directamente HTML utilizando el método document.write() .............. 27

1.8.4. Generar un mensaje de alerta utilizando el método window.alert() ................. 28

Resumen .................................................................................................................................................................... 28

Ejercicios propuestos ........................................................................................................................................ 29

Actividades de autoevaluación .................................................................................................................. 30

2. SINTAXIS DEL LENGUAJE JAVASCRIPT ................................................................................................... 33

Objetivos ................................................................................................................................................................... 33

Mapa conceptual ................................................................................................................................................. 34

Glosario ...................................................................................................................................................................... 34

2.1. Sintaxis del lenguaje. Operadores y palabras reservadas ........................................... 35

2.1.1. Las 10 reglas básicas de la sintaxis del lenguaje ........................................................ 35

2.1.2. Las palabras reservadas de JavaScript ............................................................................ 36

2.1.3. Uso de variables en JavaScript .......................................................................................... 37

2.1.4. Operadores en JavaScript ................................................................................................... 38

2.2. Tipos de datos. Asignaciones y expresiones ....................................................................... 40

2.2.1. El valor null ................................................................................................................................. 40

2.2.2. Conversiones entre tipos de datos en JavaScript ...................................................... 40

2.3. Introducción a las funciones ......................................................................................................... 41

2.4. Introducción a los objetos en JavaScript .............................................................................. 42

2.5. Variables y ámbitos de utilización .............................................................................................. 43

2.5.1. Las diferencias entre var y let .............................................................................................. 44

2.6. Eventos ........................................................................................................................................................ 44

2.6.1. Tipos de eventos en JavaScript ......................................................................................... 45

2.6.2. Los listener ................................................................................................................................. 46

2.7. Objeto string o cadena de caracteres .................................................................................... 47

2.8. Números ..................................................................................................................................................... 47

2.8.1. Convertir un número en un string ...................................................................................... 47

2.8.2. Ajuste de decimales. Número de decimales de un número ................................ 48

2.8.3. Precisión de un número ........................................................................................................ 48

2.8.4. Convertir cualquier variable en un número ................................................................... 48

2.9. Fechas .......................................................................................................................................................... 48

2.9.1. Creación de un objeto de tipo fecha ............................................................................. 49

2.9.2. Formatos de tipo fecha ........................................................................................................ 49

2.9.3. Métodos del tipo fecha ....................................................................................................... 49

2.10. Arrays ............................................................................................................................................................ 50

2.10.1. Operaciones con arrays ....................................................................................................... 51

2.10.2. Arrays multidimensionales ................................................................................................... 51

2.11. Sentencias condicionales ................................................................................................................ 52

2.12. Bucles ........................................................................................................................................................... 54

2.12.1. Recorrido de un array ............................................................................................................ 55

2.13. Práctica guiada ....................................................................................................................................... 56

Resumen .................................................................................................................................................................... 59

Ejercicios propuestos ........................................................................................................................................ 60

Actividades de autoevaluación .................................................................................................................. 61

7DESARROLLO WEB EN ENTORNO CLIENTE

ÍNDICE

3. UTILIZACIÓN DE LOS OBJETOS PREDEFINIDOS DEL LENGUAJE .......................................... 63

Objetivos ................................................................................................................................................................... 63

Mapa conceptual ................................................................................................................................................. 64

Glosario ...................................................................................................................................................................... 64

3.1. Introducción ............................................................................................................................................ 65

3.2. Manejo del tiempo en JavaScript ............................................................................................... 65

3.2.1. Las funciones setTimeout y setInterval ............................................................................ 67

3.3. Cookies ....................................................................................................................................................... 69

3.3.1. ¿Para qué se utilizan las cookies? ..................................................................................... 69

3.3.2. ¿Cómo crear una cookie? .................................................................................................... 70

3.3.3. ¿Cómo leer las cookies? ....................................................................................................... 70

3.4. Almacenamiento local ....................................................................................................................... 71

3.4.1. El objeto localStorage ........................................................................................................... 71

3.5. Objetos en JavaScript ........................................................................................................................ 72

3.5.1. Recorrer la información de un objeto ............................................................................. 73

3.5.2. Constructores de JavaScript ............................................................................................... 74

3.6. Funciones en JavaScript ................................................................................................................... 75

3.6.1. La recursividad en JavaScript ............................................................................................. 76

3.6.2. Los parámetros de las funciones ....................................................................................... 76

3.6.3. Funciones y métodos en objetos de tipo array .......................................................... 77

3.6.4. Funciones y métodos en objetos y variables de tipo string .................................. 82

3.6.5. Funciones globales del lenguaje JavaScript relativas a números ......................... 84

3.6.6. Propiedades globales de JavaScript ............................................................................... 85

3.6.7. Algunas funciones globales de JavaScript ................................................................... 86

3.7. Prácticas guiadas ................................................................................................................................... 87

3.7.1. Uso de estructuras JavaScript: creación de un generador automático

de historias ................................................................................................................................ 87

3.7.2. Utilización avanzada de arrays: generación de un sudoku aleatorio .................. 91

Resumen .................................................................................................................................................................... 97

Ejercicios propuestos ........................................................................................................................................ 97

Actividades de autoevaluación .................................................................................................................. 101

4. EL DOM Y EL BOM ............................................................................................................................................... 103

Objetivos ................................................................................................................................................................... 103

Mapa conceptual ................................................................................................................................................. 104

Glosario ...................................................................................................................................................................... 104

4.1. Introducción ............................................................................................................................................ 104

4.2. Formularios ............................................................................................................................................... 105

4.2.1. La validación de campos ..................................................................................................... 105

4.3. Expresiones regulares ........................................................................................................................ 106

4.4. DOM ............................................................................................................................................................. 108

4.4.1. El acceso al DOM. El método document.querySelector() ..................................... 113

4.5. Eventos del DOM .................................................................................................................................. 115

4.6. Manejadores de eventos ............................................................................................................... 117

4.7. Nodos del DOM ..................................................................................................................................... 118

4.7.1. ¿Cómo se accede a los nodos (elementos HTML)? ................................................. 118

4.7.2. ¿Cómo se crea un nuevo nodo? ....................................................................................... 119

4.7.3. ¿Cómo se elimina un nodo? ............................................................................................... 120

4.7.4. Práctica guiada: creación y eliminación de elementos ............................................ 121

8DESARROLLO WEB EN ENTORNO CLIENTE

ÍNDICE

4.8. Propiedades del DOM ....................................................................................................................... 123

4.8.1. El acceso a los nodos ........................................................................................................... 123

4.8.2. Capturar ciertos eventos ....................................................................................................... 123

4.9. Modificando el DOM .......................................................................................................................... 124

4.9.1. Cambiar el tamaño del texto .............................................................................................. 125

4.9.2. Mostrar y ocultar elementos de una página web ....................................................... 126

4.9.3. Deshabilitar objetos ............................................................................................................... 128

4.9.4. Comprobar que se introduce información en un campo de texto .................... 129

4.10. BOM ............................................................................................................................................................... 130

4.10.1. El objeto window ................................................................................................................... 131

4.10.2. El objeto location ................................................................................................................... 132

4.10.3. El objeto history ...................................................................................................................... 132

4.10.4. El objeto navigator ................................................................................................................. 132

Resumen .................................................................................................................................................................... 133

Ejercicios propuestos ........................................................................................................................................ 135

Actividades de autoevaluación .................................................................................................................. 135

5. MECANISMOS DE COMUNICACIÓN ASÍNCRONA .......................................................................... 139

Objetivos ................................................................................................................................................................... 139

Mapa conceptual ................................................................................................................................................. 140

Glosario ...................................................................................................................................................................... 140

5.1. Introducción ............................................................................................................................................ 140

5.2. Los web workers .................................................................................................................................. 141

5.3. JSON ............................................................................................................................................................. 142

5.3.1. Sintaxis JSON ............................................................................................................................ 143

5.3.2. Práctica guiada: instalación de un servidor JSON .................................................... 144

5.4. Comunicación asíncrona. AJAX ................................................................................................... 146

5.4.1. Práctica guiada: sistema de localización de ciudades ............................................ 148

5.4.2. Ejemplo con AJAX y JSON ................................................................................................. 151

5.4.3. Ejemplo con AJAX y XML .................................................................................................... 153

5.5. Comunicación asíncrona con el servidor. AJAX y jQuery ........................................... 154

5.5.1. Carga simple de datos load() ............................................................................................ 155

5.5.2. Llamada asíncrona utilizando POST ................................................................................. 156

5.6. Práctica guiada: encuestas interactivas con AJAX ........................................................... 158

Resumen .................................................................................................................................................................... 162

Ejercicios propuestos ........................................................................................................................................ 163

Actividades de autoevaluación .................................................................................................................. 165

6. REACTJS: UN FRAMEWORK DE JAVASCRIPT ....................................................................................... 167

Objetivos ................................................................................................................................................................... 167

Mapa conceptual ................................................................................................................................................. 168

Glosario ...................................................................................................................................................................... 168

6.1. Introducción a React .......................................................................................................................... 169

6.1.1. Creación de la primera aplicación React ....................................................................... 170

6.1.2. Ejecución de la aplicación React .................................................................................... 171

6.2. Análisis del contenido de la primera aplicación .............................................................. 172

6.2.1. El fichero index.html .............................................................................................................. 172

6.2.2. El fichero index.js .................................................................................................................... 172

9DESARROLLO WEB EN ENTORNO CLIENTE

ÍNDICE

6.2.3. El fichero src/App js .............................................................................................................. 173

6.3. Introducción a JSX ............................................................................................................................... 174

6.4. Componentes React ........................................................................................................................... 175

6.4.1. Class components y function components .................................................................. 176

6.4.2. Componentes contenedores y presentaciones .......................................................... 178

6.4.3. Creando el componente principal. Conversor euro-dólares ................................ 179

6.5. Los componentes. El state ............................................................................................................. 180

6.5.1. El state y los métodos ........................................................................................................... 180

6.5.2. Los componentes hijo y la comunicación padre-hijo: las props ......................... 182

6.6. El DOM virtual de React .................................................................................................................... 184

6.6.1. Renderización y cambios .................................................................................................... 184

6.7. Los callbacks ............................................................................................................................................ 185

6.8. Prácticas guiadas ................................................................................................................................... 187

6.8.1. Los reyes godos ....................................................................................................................... 187

6.8.2. Conversor de dólares a euros y viceversa ..................................................................... 191

Resumen .................................................................................................................................................................... 192

Ejercicios propuestos ........................................................................................................................................ 193

Actividades de autoevaluación .................................................................................................................. 201