Aprender a desarrollar con JavaScript Aspectos principales del uso de frameworks (5ª edición)

Christian VIGOUROUX

Este libro para aprender a desarrollar con JavaScript está dirigido a los lectores que desean 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. El dominio del lenguaje JavaScript es fundamental para convertirse en un experto en el ámbito de las tecnologías web 2.0. Partiendo de la base de que el lector solo tiene conocimientos básicos de programación, el...

Extracto de la edición impresa

Nivel Iniciado a Medio
Número de páginas 792 páginas
Publicación noviembre 2025

Nivel Iniciado a Medio
Publicación noviembre 2025

Presentación

Este libro para aprender a desarrollar con JavaScript está dirigido a los lectores que desean 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. El dominio del lenguaje JavaScript es fundamental para convertirse en un experto en el ámbito de las tecnologías 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 conocimientos 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 estos diferentes lenguajes.

Algunos de los capítulos le permiten descubrir los principales frameworks JavaScript como Svelte y React, que facilitan el desarrollo de aplicaciones web. También se presenta el framework 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).

En esta quinta edición, el libro completa la lista de frameworks orientados a la web con una parte sobre Vue3.js. Asimismo, se dedica un capítulo a las bibliotecas de software JavaScript disponibles en el ámbito de la inteligencia artificial, como Math.js y TensorFlow.js.

Características

Encuadernación rústica - 17 x 21 cm
ISBN: 978-2-409-05277-4
EAN: 9782409052774
Ref. ENI: RIT5JASAP

Características

HTML
ISBN: 978-2-409-05278-1
EAN: 9782409052781
Ref. ENI: LNRIT5JASAP

Índice

Presentación del lenguaje JavaScript

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

Desarrollo a partir de algoritmos

Presentación de la noción de algoritmo
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
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
Funciones predefinidas
1. 1. Ejercicio n.°4: Visualización de la longitudde un nombre
2. 2. Ejercicio n.°5: Determinación de iniciales
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)
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
Tabla de dimensión única
1. 1. Ejercicio n.°14: Contar los números paresen una tabla
Tabla con dimensiones múltiples
1. 1. Ejercicio n.°15: Minihoja de cálculo
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

Metodología de aprendizaje
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

Presentación de la sintaxis
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)

Presentación de la sintaxis de los bucles
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
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
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

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

Procedimientos y funciones

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

Enfoque orientado a “objetos” en JavaScript

Introducción
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

Presentación
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

Presentación general
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
Funciones flecha (arrow functions)
1. 1. Ventajas de las funciones flecha
2. 2. Ejemplo
Estructuras Map, Set y bucle for of
1. 1. Presentación general
2. 2. Ejemplo
Ámbito de las variables (var o let)
1. 1. Presentación general
2. 2. Ejemplo
Promesas (promise)
1. 1. Presentación general
2. 2. Ejemplo
Desestructuración
1. 1. Presentación general
2. 2. Ejemplo

Utilizar formularios para introducir datos

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

Introducción
1. 1. Definición del DOM
2. 2. Definición de la arborescencia
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

Noción de flujo XML
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

Noción de cookie
Escritura de una cookie
Lectura de una cookie
Eliminación de una cookie

Almacenamiento local de datos

Presentación general de las soluciones
1. 1. Almacenamiento con sessionStorage
2. 2. Almacenamiento con localStorage
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

Presentación general de la solución
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

Presentación general de la solución
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

Principio de la geolocalización
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)

Presentación del API HTML5 CANVAS
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

Diferentes soluciones de diseño de gráficos de gestión
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

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

Instalación de Node.js

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

Framework Svelte

Presentación del framework Svelte
Sitio web svelte.dev
Creación local de un proyecto Svelte
Instalación de Microsoft Visual Studio Code
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

Framework React

Presentación de React
Creación local de un proyecto React
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"
Las props React
1. 1. "eni_react_props_01"
2. 2. "eni_react_props_02"
3. 3. "eni_react_props_03"
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"
Lectura de archivos JSON en React
1. 1. Diferentes tipos de flujos JSON
2. 2. "eni_react_lectura_json_local"
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"
La navegación en React (enrutamiento)

Framework React Native

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
Presentación del framework React Native
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. Aplicación "eni_react_native_php_mysql"
7. 7. Presentación de una aplicación completaPHP-MySQL CRUD
8. 8. Aplicación "eni_react_native_ciudades_agrega"
9. 9. Aplicación "eni_react_native_ciudades_lista"
10. 10. Aplicación "eni_react_native_ciudades_modifica"
11. 11. Aplicación "eni_react_native_ciudades_suprime"

Framework Vue3.js

Presentación de Vue3.js
1. 1. Qué tienen en común React.js y Vue3.js
2. 2. Los puntos fuertes de Vue3.js
3. 3. Puntos débiles de Vue3.js
Aplicaciones básicas de Vue3.js
1. 1. Aplicación "eni_vue3js_lista_coches_01.html"
2. 2. Aplicación "eni_vue3js_lista_coches_02.html"
3. 3. Aplicación "eni_vue3js_lista_coches_03.html"
4. 4. Aplicación "eni_vue3js_lista_coches_04.html"
5. 5. Aplicación "eni_vue3js_lista_coches_05.html
6. 6. Aplicación "eni_vue3js_lista_coches_06.html"
7. 7. Aplicación "eni_vue3js_lista_coches_07.html"
8. 8. Aplicación "eni_vue3js_lista_coches_08.html"
9. 9. Aplicación "eni_vue3js_lista_coches_09.html"
Aplicaciones Vue3.js conectadas con MySQL
1. 1. Content Delivery Network (CDN)
2. 2. Node.js Package Manager (NPM)
3. 3. Interfaz de línea de comandos (CLI)
4. 4. Aplicación "eni_vue3js_coches_mysql_1"
  1. a. Creación de la aplicación en unsubdirectorio
  2. b. Ejecución de la aplicación
  3. c. Modificación de los scripts generados (esqueleto)por la plantilla
5. 5. Aplicación "eni_vue3js_coches_mysql_2
6. 6. Aplicación "eni_vue3js_coches_mysql_3"
7. 7. Aplicación "eni_vue3js_coches_mysql_4"

Implementación de la biblioteca Math.js

Introducción
Aplicación "eni_mathjs_01.html" - Estadísticas básicas en una matriz 3*3
Aplicación "eni_mathjs_02.html" - Estadísticas Iris (muestra parcial)
Aplicación "eni_mathjs_03.html" - Estadísticas Iris (muestra completa)
Aplicación "eni_mathjs_04.html" - Regresión lineal Iris (muestra parcial)

Implementación de la biblioteca TensorFlow.js

Algoritmo de clasificación automática
Aplicación "eni_clasificacion_iris.html"

Autor

Christian VIGOUROUX

Christian VIGOUROUX es profesor titular en Gestión en la Universidad de Rennes (IAEInstituto de Gestión de Rennes), donde enseña informática de gestión desde hace casi 40 años a estudiantes de grado y de máster. Imparte las asignaturas Técnicas de Internet, Ingeniería de Software, Informática Decisional e Inteligencia Artificial del Máster de Sistemas de Información y Control de Gestión (CGAO/SICG), del que es responsable pedagógico. Además, realiza labores de consultoría para grandes grupos en la implementación de soluciones de toma de decisiones y arquitecturas de software.

Más información