JavaScript Guía Completa

El presente documento se enfoca principalmente en el uso de JavaScript en el contexto web; comienza su exposición abordando los conceptos básicos y en su paulatino desarrollo se llega hasta la exposición de argumentos más avanzados. El contenido de sus páginas tiene el propósito de llevar de la mano al lector detalle a detalle con el fin de que más adelante sea autónomo y realice sus propios proyectos en JavaScript. Se pretende guiar al lector tomando como base ECMAScript 6, la versión de JavaScript más utilizada actualmente.

El manejo de JavaScript es cada vez más eficiente debido a que ha mejorado el desempeño de los PC ampliando así su entorno de uso. Se abordan aquí interesantes temas como las cadenas de texto, bucles, funciones, formularios y eventos; expresiones regulares, objetos, arrays asociativos y modo estricto; funciones avanzadas, JSON, AJAX y REST; objetos avanzados, DOM y BOM; lienzo y geolocalización.

VENTAJAS

• Se abordan los temas de menor a mayor complejidad guiando al lector paso a paso.

• A lo largo del libro aparecen recuadros de notas interesantes relativas al tema estudiado, además de un código de acceso que se encuentra en las primeras páginas y que permitirá al lector acceder al material de contenidos adicionales.

• Cuenta con un índice analítico útil en la localización puntual de términos de interés.

CONOZCA

• Las herramientas adecuadas para escribir códigos e integrar comandos de JavaScript en páginas HTML.

• Las posibilidades de las plantillas de cadena que ofrece ECMAScript 6.

• Las ventajas de utilizar el modo de ejecución estricto de JavaScript.

• Las características y funcionamiento de los web workers.

APRENDA

• A utilizar el bucle for con índice, la consola del navegador y las funciones que agrupan varias líneas de código.

• A generar y usar objetos personalizados, así como arrays asociativos.

• A trabajar con los datos JSON, el objeto AJAX y los servicios REST.

• A trabajar con los métodos y las sintaxis adecuadas para obtener una geolocalización.

DESARROLLE SUS HABILIDADES PARA

• Aplicar expresiones regulares para extraer texto, ejecutar sustituciones o separar una frase en palabras.

• Utilizar las funciones avanzadas de JavaScript.

• Ejecutar sintaxis avanzadas de objetos.

• Dibujar y escribir con JavaScript dentro de Canva.

A QUIÉN VA DIRIGIDO

Este libro está dirigido a estudiantes y profesionales que requieran aprender a trabajar con JavaSript, pero también a principiantes interesados en manipular holgadamente este excelente lenguaje de programación.

MERCADO META

El target de este producto contempla a personas de cualquier edad, de género indistinto, que radican en cualquier región de habla hispana, pertenecen al estrato socioeconómico A/B, C+, C, C- y se interesan con avidez en la tecnología, en específico en la programación.

ÍNDICE

INTRODUCCIÓN…………………………………………………………………………………………..9

1.JAVASCRIPT…………………………………………………………………………………………..11

El renacer de JavaScript……………………………………………………………………………………………….12

La popularidad de JavaScript……………………………………………………………………………………..14

JavaScript y ECMAScript……………………………………………………………………………………………14

Los hermanos de JavaScript………………………………………………………………………………………..15

2.CÓMO ESCRIBIR CÓDIGO JAVASCRIPT……………………………………………17

Herramientas de trabajo……………………………………………………………………………………………..17

Integrar los comandos JavaScript en las páginas HTML………………………………………….19

Advertencia………………………………………………………………………………………………………………….21

3.¡HOLA MUNDO!………………………………………………………………………………….23

Un poco de dinamismo……………………………………………………………………………………………….25

4.TRABAJAR CON CADENAS………………………………………………………………..31

Cadenas multilínea……………………………………………………………………………………………………..35

5.LOS BUCLES………………………………………………………………………………………….41

La consola……………………………………………………………………………………………………………………45

6.FUNCIONES…………………………………………………………………………………………49

Pasar parámetros a las funciones………………………………………………………………………………52

Funciones anónimas……………………………………………………………………………………………………56

El área de validez de variables y constantes……………………………………………………………..57

7.FORMULARIOS Y EVENTOS………………………………………………………………63

Operar con cadenas de texto…………………………………………………………………………………….68

Gestores de eventos……………………………………………………………………………………………………69

8.EXPRESIONES REGULARES………………………………………………………………..75

Definir los patrones para las expresiones regulares…………………………………………………76

Aplicar expresiones regulares……………………………………………………………………………………80

9. OBJETOS………………………………………………………………………………………………99

Ejemplo práctico………………………………………………………………………………………………………..102

10. ARRAYS ASOCIATIVOS…………………………………………………………………….109

Utilizar objetos para crear arrays asociativos………………………………………………………….109

Array asociativo completado durante la ejecución del código………………………………..112

11. NEW: CREAR INSTANCIAS DE OBJETOS………………………………………… 115

12. MODO ESTRICTO………………………………………………………………………………119

¿Por qué utilizar el modo estricto?…………………………………………………………………………..120

13. THIS……………………………………………………………………………………………………. 123

Call y Apply………………………………………………………………………………………………………………… 131

Bind……………………………………………………………………………………………………………………………. 132

14. FUNCIONES AVANZADAS………………………………………………………………. 135

Las funciones flecha………………………………………………………………………………………………….139

Gestión de this…………………………………………………………………………………………………………..143

Funciones utilizadas como método………………………………………………………………………….145

¿Qué modo utilizar para las funciones?…………………………………………………………………..146

Observaciones finales……………………………………………………………………………………………….146

15. JSON…………………………………………………………………………………………………..149

Procesar JSON con JavaScript…………………………………………………………………………………. 152

Un sitio para realizar pruebas………………………………………………………………………………….. 157

16. AJAX Y REST……………………………………………………………………………………… 159

La llamada POST………………………………………………………………………………………………………. 162

Servicios REST…………………………………………………………………………………………………………… 167

17. OBJETOS AVANZADOS……………………………………………………………………. 171

Parámetros rest………………………………………………………………………………………………………… 176

Operador spread………………………………………………………………………………………………………. 178

18. DOM………………………………………………………………………………………………….. 179

El modelo……………………………………………………………………………………………………………………179

Traversing…………………………………………………………………………………………………………………..185

Crear nodos……………………………………………………………………………………………………………….189

Event delegation………………………………………………………………………………………………………..194

19. BOM…………………………………………………………………………………………………… 197

Pantalla………………………………………………………………………………………………………………………199

Location…………………………………………………………………………………………………………………….200

Historial de navegación……………………………………………………………………………………………200

Navigator……………………………………………………………………………………………………………………201

Ventanas……………………………………………………………………………………………………………………202

Temporización…………………………………………………………………………………………………………..204

Cookies……………………………………………………………………………………………………………………..206

20. CANVAS…………………………………………………………………………………………….. 213

Las coordenadas de los lienzos……………………………………………………………………………….. 217

Dibujar trazos…………………………………………………………………………………………………………….218

Dibujar con curvas de Bézier…………………………………………………………………………………… 222

Dibujar arcos y circunferencias………………………………………………………………………………. 227

Estilos de línea………………………………………………………………………………………………………….. 231

Degradados……………………………………………………………………………………………………………… 233

Imágenes………………………………………………………………………………………………………………….. 238

Texto………………………………………………………………………………………………………………………….. 241

Sombras…………………………………………………………………………………………………………………….244

Composiciones………………………………………………………………………………………………………… 245

Animaciones……………………………………………………………………………………………………………..248

21. GEOLOCALIZACIÓN…………………………………………………………………………253

Recuperar las coordenadas geográficas………………………………………………………………….254

Gestionar errores…………………………………………………………………………………………………….. 256

Opciones………………………………………………………………………………………………………………….. 257

Mostrar un mapa de Google…………………………………………………………………………………… 258

22. WEB WORKER………………………………………………………………………………….. 261

Comunicación bidireccional……………………………………………………………………………………. 263

Pasar objetos……………………………………………………………………………………………………………. 265

Finalizar el worker……………………………………………………………………………………………………. 267

Gestión de errores……………………………………………………………………………………………………269

Importar scripts externos…………………………………………………………………………………………270

Objetos a los cuales puede acceder el worker……………………………………………………….270

Workers compartidos………………………………………………………………………………………………. 271

23. EL ARRASTRE…………………………………………………………………………………….275

Arrastrar otros objetos y recuperar información sobre los objetos arrastrados…………….286

Arrastrar un archivo………………………………………………………………………………………………291

A1. VISUAL STUDIO CODE…………………………………………………………………… 295

Trabajar por carpetas y archivos…………………………………………………………………………….. 297

Instalar ESLint……………………………………………………………………………………………………… 297

Abrir un archivo HTML en el navegador desde VS Code……………………………………….301

A2. INSTALAR XAMPP……………………………………………………………………………305

Utilizar XAMPP……………………………………………………………………………………………………. 307