Este libro trata sobre el aprendizaje en el desarrollo con JavaScript y está dirigido a los lectores que deseen adquirir las habilidades necesarias e imprescindibles para el desarrollo de sitios web (intranet, internet y extranet), así como aplicaciones híbridas para teléfonos inteligentes y tabletas.

Aunque existen soluciones y aplicaciones que permiten enfrentarse con garantías al aprendizaje del lenguaje JavaScript, controlarlo es un objetivo esencial para adquirir una verdadera destreza en el dominio de las tecnologías de la Web 2.0.

Partiendo de la base de que el lector solo tiene conocimientos básicos de programación, el autor comienza recordando y aportando conocimiento sobre algoritmia. A continuación, explica los conceptos principales del lenguaje JavaScript. Los diferentes conceptos, principios o funcionalidades, se descubren a través de ejemplos concretos, fácilmente reutilizables en otros desarrollos.

En la medida en que el lenguaje JavaScript interactúa con otras tecnologías web (o lenguajes) como el imprescindible HTML, las hojas de estilo CSS, los lenguajes de script orientados al desarrollo en servidor como PHP, este libro también le permitirá dar sus primeros pasos con estas diferentes tecnologías.

En esta cuarta edición, el libro integra nuevos capítulos adicionales referentes a los principales frameworks JavaScript, como Svelte y React, que facilitan el desarrollo de aplicaciones web.

El último capítulo presenta React Native (que deriva de React), que permite desarrollar de manera fácil y sencilla aplicaciones para móviles, con un enfoque híbrido, es decir, con un mismo código que se puede desplegar en plataformas Android e iOS (iPhone y iPad).

Todos los capítulos del libro incluyen numerosos ejemplos, que se explican y comentan de manera extensa, con una progresión lógica. Los elementos adicionales se pueden descargar desde el sitio www.ediciones-eni.com. Aquí encontrará también aplicaciones “extra” que no se describen en el libro.


¡Nuevo! Rondas de preguntas disponibles con la versión online.

¡Ronda de preguntas
incluida en
la versión online !

• Ponga a prueba sus conocimientos al final de cada capítulo
• Evalúe sus competencias

Descargas

• Descargar los ejemplos del libro (1 Ko)

Presentación del lenguaje JavaScript

1. Definición y breve historia
2. Requisitos previos para un aprendizaje sencillo del lenguaje
3. Herramientas necesarias
4. Posicionamiento de JavaScript respecto a otras tecnologías de desarrollo web (HTML, CSS, PHP...)

Desarrollo a partir de algoritmos

1. Presentación de la noción de algoritmo
2. Noción de variable
   1. 1. Presentación de las nociones de variabley tipo
   2. 2. Tipos básicos y operaciones asociadas
   3. 3. Interés de los tipos
   4. 4. Uso de variables en las expresiones
   5. 5. Tabla resumen de los operadores
3. Manipulación de las variables
   1. 1. Nomenclatura de las variables
   2. 2. Asignación
   3. 3. Ejercicio n.°1: Inversión del contenido dedos variables en memoria
   4. 4. Visualización de los resultados
   5. 5. Ejercicio n.°2: Superficies de círculos
   6. 6. Introducción por el teclado
   7. 7. Ejercicio n.°3: Superficie y volumen de una esfera
4. Funciones predefinidas
   1. 1. Ejercicio n.°4: Visualización de la longitudde un nombre
   2. 2. Ejercicio n.°5: Determinación de iniciales
5. Procesamientos condicionados
   1. 1. Ejercicio n.°6: Polinomio de segundo grado
   2. 2. Ejercicio n.°7: Etiqueta del mes sin cifrar
   3. 3. Ejercicio n.°8: Etiqueta del mes sin cifrar (Siguiente... Finsiguiente)
6. Estructuras iterativas
   1. 1. Concepto de iteraciones
   2. 2. Estructuras iterativas básicas
   3. 3. Ejercicio n.°9: Media de 10 números
   4. 4. Ejercicio n.°10: Media de una serie de n números
   5. 5. Ejercicio n.°11: El común divisor másgrande,  por el método de las divisiones sucesivas
   6. 6. Estructura iterativa Para
   7. 7. Ejercicio n.°12: Cálculo de la media de 10números
   8. 8. Ejercicio n.°13: Deducir el número de vocalesde una palabra
7. Tabla de dimensión única
   1. 1. Ejercicio n.°14: Contar los números paresen una tabla
8. Tabla con dimensiones múltiples
   1. 1. Ejercicio n.°15: Minihoja de cálculo
9. Procedimientos, funciones y paso de argumentos
   1. 1. Los objetivos
   2. 2. Los procedimientos
   3. 3. Ejercicio n.°16: Llamada de un procedimiento con paso deargumentos
   4. 4. Las funciones
   5. 5. Ejercicio n.°17: Llamada de una función conpaso de argumentos

Conceptos principales del lenguaje JavaScript

1. Metodología de aprendizaje
2. Variables (declaración y tipado)
   1. 1. Ejercicio n.°2: Superficies de círculos
   2. 2. Ejercicio n.°3: Superficie y volumen de una esfera
   3. 3. Ejercicio n.°4: Número de letras de una palabra
   4. 4. Ejercicio n.°5: Determinación de las iniciales

Procesamiento condicionado

1. Presentación de la sintaxis
2. Ejemplos
   1. 1. Ejercicio n.°6: Polinomio de segundo grado
   2. 2. Ejercicio n.°8: Impresión de la etiquetade un mes

Procesamiento iterativo (bucles)

1. Presentación de la sintaxis de los bucles
2. Bucle while
   1. 1. Sintaxis
   2. 2. Ejercicio n.°9: Media de 10 números que seintroducirán con el teclado
   3. 3. Ejercicio n.°10: Media de una serie de n númerosque se introducirán con el teclado
3. Bucle do while
   1. 1. Sintaxis
   2. 2. Ejercicio n.°11: Media de una serie de n númerosque se introducirán con el teclado
4. Bucle for
   1. 1. Sintaxis
   2. 2. Ejercicio n.°12: Media de una serie de 10 númerosque se introducirán con el teclado
   3. 3. Ejercicio n.°13: Contar el número de vocalesen una palabra

Tablas

1. Tablas de dimensión única
   1. 1. Sintaxis
   2. 2. Ejercicio n.°14: Contar los números paresen una tabla
2. Tablas de dimensiones múltiples
   1. 1. Sintaxis
   2. 2. Ejercicio n.°15: Minihoja de cálculo

Procedimientos y funciones

1. Los procedimientos
   1. 1. Sintaxis
   2. 2. Ejercicio n.°16: Llamada de un procedimiento con argumentos
2. Las funciones
   1. 1. Sintaxis
   2. 2. Ejercicio n.°17: Llamada de una función conargumentos

Enfoque orientado a “objetos” en JavaScript

1. Introducción
2. Programación orientada a objetos a través de ejemplos
   1. 1. Secuencia 1: Declaración de los objetos JavaScriptde manera "Inline"
   2. 2. Secuencia 2: Creación de objetos JavaScriptcon un constructor
   3. 3. Secuencia 3: Variables privadas en una instancia deobjeto
   4. 4. Secuencia 4: Paso de argumento(s) a un constructor
   5. 5. Secuencia 5: No compartición de los métodospor las instancias de objetos
   6. 6. Secuencia 6: Noción de prototipo
   7. 7. Secuencia 7: Sobrecarga de un método
   8. 8. Secuencia 8: Extensión de un prototipo
   9. 9. Secuencia 9: Mecanismo de la herencia
   10. 10. Secuencia 10: Límite de la herencia de lasecuencia 9
   11. 11. Secuencia 11: Un segundo límite a nuestraherencia

Principales objetos en JavaScript

1. Presentación
2. Los objetos básicos
   1. 1. Objeto Array
   2. 2. Objeto Date
   3. 3. Objeto Math
   4. 4. Objeto window
   5. 5. Objeto navigator
   6. 6. Objeto String

Las novedades de EcmaScript 6

1. Presentación general
2. Aportaciones a nivel de la Programación Orientada a Objetos
   1. 1. Noción de prototipo
   2. 2. Sobrecarga de un método
   3. 3. Extensión de prototipo
   4. 4. Herencia
   5. 5. Primer ejemplo POO en EcmaScript 6
   6. 6. Herencia en EcmaScript
   7. 7. Métodos getter, setter y static en EcmaScript6
3. Funciones flecha (arrow functions)
   1. 1. Ventajas de las funciones flecha
   2. 2. Ejemplo
4. Estructuras Map, Set y bucle for of
   1. 1. Presentación general
   2. 2. Ejemplo
5. Ámbito de las variables (var o let)
   1. 1. Presentación general
   2. 2. Ejemplo
6. Promesas (promise)
   1. 1. Presentación general
   2. 2. Ejemplo
7. Desestructuración
   1. 1. Presentación general
   2. 2. Ejemplo

Utilizar formularios para introducir datos

1. Controles en la entrada de datos con JavaScript
   1. 1. Control de entrada de datos en un campo de texto
   2. 2. Control del tipo numérico de una entradade datos en un campo de texto
   3. 3. Control de caracteres alfabéticos de unaentrada de datos en un campo de texto
   4. 4. Control de caracteres alfabéticos y numéricosde una entrada de datos en un campo de texto
   5. 5. Control de la longitud de una entrada de datos enun campo de texto
   6. 6. Control de entrada de datos en una direcciónde e-mail
   7. 7. Control de la selección de una lista desplegable(versión simplificada)
   8. 8. Control de la selección en una lista desplegable  (versión extendida)
   9. 9. Control de selección con un botónde radio
   10. 10. Control de la selección con casillas de selección

Modelo DOM

1. Introducción
   1. 1. Definición del DOM
   2. 2. Definición de la arborescencia
2. Aprendizaje del modelo DOM
   1. 1. Script "Hello World"
   2. 2. Diferencia entre write y writeln
   3. 3. Gestión de los enlaces hipertextos
   4. 4. Gestión de las imágenes
   5. 5. Gestión de formularios y de sus etiquetas
   6. 6. Gestión de los anchors
   7. 7. Gestión de la navegación entre páginasweb
   8. 8. Visualización de las característicasgenerales  del documento
   9. 9. Gestión de los botones en los formularios
   10. 10. Gestión de las tablas (etiqueta HTML table)

Exploración de flujo XML vía DOM

1. Noción de flujo XML
2. Ejemplos
   1. 1. Ejemplo 1: Visualización del contenido deun e-mail codificado en XML
   2. 2. Ejemplo 2: Lista de marcas de coches (archivo coches.xml)
   3. 3. Ejemplo 3: Lista de las marcas de coches con un bucle
   4. 4. Ejemplo 4: Lista de nodos conectados a la raíz
   5. 5. Ejemplo 5: Lista de los campos (nodos) de cada coche
   6. 6. Ejemplo 6: Sustitución de un valor de nodo
   7. 7. Ejemplo 7: Acceso a los atributos
   8. 8. Ejemplo 8: Acceso a un nodo padre
   9. 9. Ejemplo 9: Recorrer hacia atrás los nodos
   10. 10. Ejemplo 10: Sustitución sistemáticade un valor de atributo
   11. 11. Ejemplo 11: Conversión XML en HTML
   12. 12. Ejemplo 12: Eliminación de un nodo en unflujo XML

Gestión de las cookies en JavaScript

1. Noción de cookie
2. Escritura de una cookie
3. Lectura de una cookie
4. Eliminación de una cookie

Almacenamiento local de datos

1. Presentación general de las soluciones
   1. 1. Almacenamiento con sessionStorage
   2. 2. Almacenamiento con localStorage
2. Implementación de Web Storage a través de ejemplos
   1. 1. Ejemplo 1: Almacenamiento por localStorage de cadenas decaracteres
   2. 2. Ejemplo 2: Almacenamiento en el localStorage de unobjeto JavaScript

Almacenamiento remoto: formato XML

1. Presentación general de la solución
2. Implementación del almacenamiento remoto a través de ejemplos
   1. 1. Ejemplo 1: Acceso Ajax sobre BDD MySQL (lista de los coches)
   2. 2. Ejemplo 2: Acceso MySQL vía Ajax

Almacenamiento remoto: formato JSON

1. Presentación general de la solución
2. Implementación del almacenamiento remoto a través de ejemplos
   1. 1. Ejemplo 1: Presentación del sistema de notaciónJSON
   2. 2. Ejemplo 2: Lectura de un archivo JSON con XMLHttpRequest
   3. 3. Ejemplo 3: Lectura de un archivo JSON con XMLHttpRequesty un script servidor en PHP
   4. 4. Ejemplo 4: Lectura de una tabla MySQL con XMLHttpRequest(servidor PHP y flujo JSON)
   5. 5. Ejemplo 5: Recodificación del ejemplo 4 conuna lista desplegable

Geolocalización

1. Principio de la geolocalización
2. Ejemplos de aplicaciones de geolocalización
   1. 1. Ejemplo 1: Visualización del mapa del centrode España
   2. 2. Ejemplo 2: Visualización del mapa del centrode España (marcador)
   3. 3. Ejemplo 3: Visualización del mapa del centrode España (marcador y círculos de población)
   4. 4. Ejemplo 4: Visualización del mapa del centrode España  (información meteorológica)
   5. 5. Ejemplo 5: Visualización del mapa de Madrid(con fotos de los sitios importantes)
   6. 6. Ejemplo 6: Visualización del mapa de Madrid(Street View)

Diseño (HTML5 CANVAS)

1. Presentación del API HTML5 CANVAS
2. Ejemplos de aplicaciones del elemento <canvas></canvas>
   1. 1. Ejemplo 1: Dibujar un cuadrado sencillo
   2. 2. Ejemplo 2: Dibujar una matriz de TicTacToe
   3. 3. Posibles mejoras en el conjunto del TicTacToe

Gráficos de gestión

1. Diferentes soluciones de diseño de gráficos de gestión
2. Ejemplos de uso de los API de Google Charts
   1. 1. Ejemplo 1: Dibujar un histograma
   2. 2. Ejemplo 2: Representación de un gráficode sectores
   3. 3. Ejemplo 3: Representación de un mapa

Posicionamiento de los frameworks JavaScript

1. Presentación general de los frameworks JavaScript
   1. 1. Frameworks "frontend"
   2. 2. Frameworks "backend"
   3. 3. Soluciones de desarrollo "híbridas"
2. Los frameworks Node.js, Svelte, React y React Native

Instalación de Node.js

1. Presentación del framework Node.js
2. Instalación del framework Node.js

Framework Svelte

1. Presentación del framework Svelte
2. Sitio web svelte.dev
3. Creación local de un proyecto Svelte
4. Instalación de Microsoft Visual Studio Code
5. Proyectos Svelte
   1. 1. "eni_svelte_01"- Primera aplicación
   2. 2. "eni_svelte_02"- Importancia delos comentarios
   3. 3. "eni_svelte_03"- Implementar unaimagen
   4. 4. "eni_svelte_04"- Integraciónde las etiquetas HTML
   5. 5. "eni_svelte_05"- El primer botón
   6. 6. "eni_svelte_06"- La funciónde $ en las fórmulas
   7. 7. "eni_svelte_07"- Campos de entrada
   8. 8. "eni_svelte_08"- Introducir datoscon el cursor
   9. 9. "eni_svelte_09"- Casillas de selección
   10. 10. "eni_svelte_10"- Botones "de opción"
   11. 11. "eni_svelte_11"- Lista
   12. 12. "eni_svelte_12"- Lista y botones"de opción"
   13. 13. "eni_svelte_13"- Botones SvelteMaterialify
   14. 14. "eni_svelte_14"- Lista desplegableSvelte Materialify
   15. 15. "eni_svelte_15"- Switches SvelteMaterialify
   16. 16. "eni_svelte_16"- Primera aplicaciónSapper-MySQL
   17. 17. "eni_svelte_17"- Lista desplegableSapper-MySQL
   18. 18. "eni_svelte_18"- Añadirun deporte usando Sapper-MySQL
   19. 19. "eni_svelte_19"- Actualizaciónde Sapper-MySQL
   20. 20. "eni_svelte_20"- EliminaciónSapper-MySQL

Framework React

1. Presentación de React
2. Creación local de un proyecto React
3. Proyectos React básicos
   1. 1. "eni_react_bases_01"
   2. 2. "eni_react_bases_02"
   3. 3. "eni_react_bases_03"
   4. 4. "eni_react_bases_04"
   5. 5. "eni_react_bases_05"
   6. 6. "eni_react_bases_06"
4. Las props React
   1. 1. "eni_react_props_01"
   2. 2. "eni_react_props_02"
   3. 3. "eni_react_props_03"
5. Las librerías de terceros para React
   1. 1. "eni_react_material-ui_table_01"
   2. 2. "eni_react_material-ui_table_02"
   3. 3. "eni_react_material-ui_table_03"
   4. 4. "eni_react_recharts_01"
   5. 5. "eni_react_recharts_02"
   6. 6. "eni_react_recharts_03"
6. Lectura de archivos JSON en React
   1. 1. Diferentes tipos de flujos JSON
   2. 2. "eni_react_lectura_json_local"
7. Interacciones con un servidor PHP-MySQL
   1. 1. "eni_react_php_mysql_01"
   2. 2. "eni_react_php_mysql_02"
   3. 3. "eni_react_php_mysql_03"
   4. 4. "eni_react_php_mysql_04"
   5. 5. "eni_react_php_mysql_05"
8. La navegación en React (enrutamiento)

Framework React Native

1. Enfoques de desarrollo para dispositivos móviles
   1. 1. Desarrollos web, nativos e híbridos
      1. a. Aplicaciones web
      2. b. Aplicaciones nativas
      3. c. Aplicaciones híbridas
   2. 2. Las tres plataformas principales
      1. a. Apple iOS
      2. b. Android
      3. c. Windows Phone y Windows 10 Mobile
2. Presentación del framework React Native
3. Proyectos React Native
   1. 1. Aplicación "eni_react_native_helloworld"
   2. 2. Aplicación «eni_react_native_list_view»
   3. 3. Aplicación “eni_react_native_input_text”
   4. 4. Aplicación “eni_react_native_picker_basico”
   5. 5. Aplicación "eni_react_native_hook"
   6. 6. Aplication "eni_react_native_php_mysql"