Extracto
del libro Archivos para
descargar

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

Presentación

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

Índice

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. 2.1 Presentación de las nociones de variable y tipo
2. 2.2 Tipos básicos y operaciones asociadas
3. 2.3 Interés de los tipos
4. 2.4 Uso de variables en las expresiones
5. 2.5 Tabla resumen de los operadores
3. Manipulación de las variables
1. 3.1 Nomenclatura de las variables
2. 3.2 Asignación
3. 3.3 Ejercicio n.°1: Inversión del contenido de dos variables en memoria
4. 3.4 Visualización de los resultados
5. 3.5 Ejercicio n.°2: Superficies de círculos
6. 3.6 Introducción por el teclado
7. 3.7 Ejercicio n.°3: Superficie y volumen de una esfera
4. Funciones predefinidas
1. 4.1 Ejercicio n.°4: Visualización de la longitud de un nombre
2. 4.2 Ejercicio n.°5: Determinación de iniciales
5. Procesamientos condicionados
1. 5.1 Ejercicio n.°6: Polinomio de segundo grado
2. 5.2 Ejercicio n.°7: Etiqueta del mes sin cifrar
3. 5.3 Ejercicio n.°8: Etiqueta del mes sin cifrar (Siguiente ... Finsiguiente)
6. Estructuras iterativas
1. 6.1 Concepto de iteraciones
2. 6.2 Estructuras iterativas básicas
3. 6.3 Ejercicio n.°9: Media de 10 números
4. 6.4 Ejercicio n.°10: Media de una serie de n números
5. 6.5 Ejercicio n.°11: El común divisor más grande, por el método de las divisiones sucesivas
6. 6.6 Estructura iterativa Para
7. 6.7 Ejercicio n.°12: Cálculo de la media de 10 números
8. 6.8 Ejercicio n.°13: Deducir el número de vocales de una palabra
7. Tabla de dimensión única
1. 7.1 Ejercicio n.°14: Contar los números pares en una tabla
8. Tabla con dimensiones múltiples
1. 8.1 Ejercicio n.°15: Minihoja de cálculo
9. Procedimientos, funciones y paso de argumentos
1. 9.1 Los objetivos
2. 9.2 Los procedimientos
3. 9.3 Ejercicio n.°16: Llamada de un procedimiento con paso de argumentos
4. 9.4 Las funciones
5. 9.5 Ejercicio n.°17: Llamada de una función con paso de argumentos

Conceptos principales del lenguaje JavaScript

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

Procesamiento condicionado

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

Procesamiento iterativo (bucles)

1. Presentación de la sintaxis de los bucles
2. Bucle while
1. 2.1 Sintaxis
2. 2.2 Ejercicio n.°9: Media de 10 números que se introducirán con el teclado
3. 2.3 Ejercicio n.°10: Media de una serie de n números que se introducirán con el teclado
3. Bucle do while
1. 3.1 Sintaxis
2. 3.2 Ejercicio n.°11: Media de una serie de n números que se introducirán con el teclado
4. Bucle for
1. 4.1 Sintaxis
2. 4.2 Ejercicio n.°12: Media de una serie de 10 números que se introducirán con el teclado
3. 4.3 Ejercicio n.°13: Contar el número de vocales en una palabra

Tablas

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

Procedimientos y funciones

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

Enfoque orientado a “objetos” en JavaScript

1. Introducción
2. Programación orientada a objetos a través de ejemplos
1. 2.1 Secuencia 1: Declaración de los objetos JavaScript de manera "Inline"
2. 2.2 Secuencia 2: Creación de objetos JavaScript con un constructor
3. 2.3 Secuencia 3: Variables privadas en una instancia de objeto
4. 2.4 Secuencia 4: Paso de argumento(s) a un constructor
5. 2.5 Secuencia 5: No compartición de los métodos por las instancias de objetos
6. 2.6 Secuencia 6: Noción de prototipo
7. 2.7 Secuencia 7: Sobrecarga de un método
8. 2.8 Secuencia 8: Extensión de un prototipo
9. 2.9 Secuencia 9: Mecanismo de la herencia
10. 2.10 Secuencia 10: Límite de la herencia de la secuencia 9
11. 2.11 Secuencia 11: Un segundo límite a nuestra herencia

Principales objetos en JavaScript

1. Presentación
2. Los objetos básicos
1. 2.1 Objeto Array
2. 2.2 Objeto Date
3. 2.3 Objeto Math
4. 2.4 Objeto window
5. 2.5 Objeto navigator
6. 2.6 Objeto String

Las novedades de EcmaScript

1. Presentación general
2. Aportaciones a nivel de la Programación Orientada a Objetos
1. 2.1 Noción de prototipo
2. 2.2 Sobrecarga de un método
3. 2.3 Extensión de prototipo
4. 2.4 Herencia
5. 2.5 Primer ejemplo POO en EcmaScript 6
6. 2.6 Herencia en EcmaScript
7. 2.7 Métodos getter, setter y static en EcmaScript 6
3. Funciones flecha (arrow functions)
1. 3.1 Ventajas de las funciones flecha
2. 3.2 Ejemplo
4. Estructuras Map, Set y bucle for of
1. 4.1 Presentación general
2. 4.2 Ejemplo
5. Ámbito de las variables (var o let)
1. 5.1 Presentación general
2. 5.2 Ejemplo
6. Promesas (promise)
1. 6.1 Presentación general
2. 6.2 Ejemplo
7. Desestructuración
1. 7.1 Presentación general
2. 7.2 Ejemplo

Utilizar formularios para introducir datos

1. Controles en la entrada de datos con JavaScript
1. 1.1 Control de entrada de datos en un campo de texto
2. 1.2 Control del tipo numérico de una entrada de datos en un campo de texto
3. 1.3 Control de caracteres alfabéticos de una entrada de datos en un campo de texto
4. 1.4 Control de caracteres alfabéticos y numéricos de una entrada de datos en un campo de texto
5. 1.5 Control de la longitud de una entrada de datos en un campo de texto
6. 1.6 Control de entrada de datos en una dirección de e-mail
7. 1.7 Control de la selección de una lista desplegable (versión simplificada)
8. 1.8 Control de la selección en una lista desplegable (versión extendida)
9. 1.9 Control de selección con un botón de radio
10. 1.10 Control de la selección con casillas de selección

Modelo DOM

1. Introducción
1. 1.1 Definición del DOM
2. 1.2 Definición de la arborescencia
2. Aprendizaje del modelo DOM
1. 2.1 Script "Hello World"
2. 2.2 Diferencia entre write y writeln
3. 2.3 Gestión de los enlaces hipertextos
4. 2.4 Gestión de las imágenes
5. 2.5 Gestión de formularios y de sus etiquetas
6. 2.6 Gestión de los anchors
7. 2.7 Gestión de la navegación entre páginas web
8. 2.8 Visualización de las características generales del documento
9. 2.9 Gestión de los botones en los formularios
10. 2.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. 2.1 Ejemplo 1: Visualización del contenido de un e-mail codificado en XML
2. 2.2 Ejemplo 2: Lista de marcas de coches (archivo coches.xml)
3. 2.3 Ejemplo 3: Lista de las marcas de coches con un bucle
4. 2.4 Ejemplo 4: Lista de nodos conectados a la raíz
5. 2.5 Ejemplo 5: Lista de los campos (nodos) de cada coche
6. 2.6 Ejemplo 6: Sustitución de un valor de nodo
7. 2.7 Ejemplo 7: Acceso a los atributos
8. 2.8 Ejemplo 8: Acceso a un nodo padre
9. 2.9 Ejemplo 9: Recorrer hacia atrás los nodos
10. 2.10 Ejemplo 10: Sustitución sistemática de un valor de atributo
11. 2.11 Ejemplo 11: Conversión XML en HTML
12. 2.12 Ejemplo 12: Eliminación de un nodo en un flujo 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.1 Almacenamiento con sessionStorage
2. 1.2 Almacenamiento con localStorage
2. Implementación de Web Storage a través de ejemplos
1. 2.1 Ejemplo 1: Almacenamiento por localStorage de cadenas de caracteres
2. 2.2 Ejemplo 2: Almacenamiento en el localStorage de un objeto 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. 2.1 Ejemplo 1: Acceso Ajax sobre BDD MySQL (lista de los coches)
2. 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. 2.1 Ejemplo 1: Presentación del sistema de notación JSON
2. 2.2 Ejemplo 2: Lectura de un archivo JSON con XMLHttpRequest
3. 2.3 Ejemplo 3: Lectura de un archivo JSON con XMLHttpRequest y un script servidor en PHP
4. 2.4 Ejemplo 4: Lectura de una tabla MySQL con XMLHttpRequest (servidor PHP y flujo JSON)
5. 2.5 Ejemplo 5: Recodificación del ejemplo 4 con una lista desplegable

Geolocalización

1. Principio de la geolocalización
2. Ejemplos de aplicaciones de geolocalización
1. 2.1 Ejemplo 1: Visualización del mapa del centro de España
2. 2.2 Ejemplo 2: Visualización del mapa del centro de España (marcador)
3. 2.3 Ejemplo 3: Visualización del mapa del centro de España (marcador y círculos de población)
4. 2.4 Ejemplo 4: Visualización del mapa del centro de España (información meteorológica)
5. 2.5 Ejemplo 5: Visualización del mapa de Madrid (con fotos de los sitios importantes)
6. 2.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>
1. 2.1 Ejemplo 1: Dibujar un cuadrado sencillo
2. 2.2 Ejemplo 2: Dibujar una matriz de TicTacToe
3. 2.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. 2.1 Ejemplo 1: Dibujar un histograma
2. 2.2 Ejemplo 2: Representación de un gráfico de sectores
3. 2.3 Ejemplo 3: Representación de un mapa

Posicionamiento de los frameworks JavaScript

1. Presentación general de los frameworks JavaScript
1. 1.1 Frameworks "frontend"
2. 1.2 Frameworks "backend"
3. 1.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. 5.1 "eni_svelte_01"- Primera aplicación
2. 5.2 "eni_svelte_02"- Importancia de los comentarios
3. 5.3 "eni_svelte_03"- Implementar una imagen
4. 5.4 "eni_svelte_04"- Integración de las etiquetas HTML
5. 5.5 "eni_svelte_05"- El primer botón
6. 5.6 "eni_svelte_06"- La función de $ en las fórmulas
7. 5.7 "eni_svelte_07"- Campos de entrada
8. 5.8 "eni_svelte_08"- Introducir datos con el cursor
9. 5.9 "eni_svelte_09"- Casillas de selección
10. 5.10 "eni_svelte_10"- Botones "de opción"
11. 5.11 "eni_svelte_11"- Lista
12. 5.12 "eni_svelte_12"- Lista y botones "de opción"
13. 5.13 "eni_svelte_13"- Botones Svelte Materialify
14. 5.14 "eni_svelte_14"- Lista desplegable Svelte Materialify
15. 5.15 "eni_svelte_15"- Switches Svelte Materialify
16. 5.16 "eni_svelte_16"- Primera aplicación Sapper-MySQL
17. 5.17 "eni_svelte_17"- Lista desplegable Sapper-MySQL
18. 5.18 "eni_svelte_18"- Añadir un deporte usando Sapper-MySQL
19. 5.19 "eni_svelte_19"- Actualización de Sapper-MySQL
20. 5.20 "eni_svelte_20"- Eliminación Sapper-MySQL

Framework React

1. Presentación de React
2. Creación local de un proyecto React
3. Proyectos React básicos
1. 3.1 "eni_react_bases_01"
2. 3.2 "eni_react_bases_02"
3. 3.3 "eni_react_bases_03"
4. 3.4 "eni_react_bases_04"
5. 3.5 "eni_react_bases_05"
6. 3.6 "eni_react_bases_06"
4. Las props React
1. 4.1 "eni_react_props_01"
2. 4.2 "eni_react_props_02"
3. 4.3 "eni_react_props_03"
5. Las librerías de terceros para React
1. 5.1 "eni_react_material-ui_table_01"
2. 5.2 "eni_react_material-ui_table_02"
3. 5.3 "eni_react_material-ui_table_03"
4. 5.4 "eni_react_recharts_01"
5. 5.5 "eni_react_recharts_02"
6. 5.6 "eni_react_recharts_03"
6. Lectura de archivos JSON en React
1. 6.1 Diferentes tipos de flujos JSON
2. 6.2 "eni_react_lectura_json_local"
7. Interacciones con un servidor PHP-MySQL
1. 7.1 "eni_react_php_mysql_01"
2. 7.2 "eni_react_php_mysql_02"
3. 7.3 "eni_react_php_mysql_03"
4. 7.4 "eni_react_php_mysql_04"
5. 7.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.1 Desarrollos web, nativos e híbridos
  1. 1.1.1 Aplicaciones web
  2. 1.1.2 Aplicaciones nativas
  3. 1.1.3 Aplicaciones híbridas
2. 1.2 Las tres plataformas principales
  1. 1.2.1 Apple iOS
  2. 1.2.2 Android
  3. 1.2.3 Windows Phone y Windows 10 Mobile
2. Presentación del framework React Native
3. Proyectos React Native
1. 3.1 Aplicación "eni_react_native_helloworld"
2. 3.2 Aplicación «eni_react_native_list_view»
3. 3.3 Aplicación “eni_react_native_input_text”
4. 3.4 Aplicación “eni_react_native_picker_basico”
5. 3.5 Aplicación "eni_react_native_hook"
6. 3.6 Aplication "eni_react_native_php_mysql"
10. índice

Autor

Christian VIGOUROUXMás información

Christian VIGOUROUX es Profesor Asociado en la Universidad de Rennes 1 en Gestión (IAE- Instituto de Gestión de Rennes). Enseña informática de gestión desde hace casi 30 años a estudiantes universitarios y de máster y coordina el contenido de los cursos sobre Técnicas de Internet, Ingeniería del Software e Informática Decisional del Máster en Sistemas de Información y Control de Gestión, que dirige. Por otro lado, participa en proyectos de consultoría para grandes grupos, acerca del despliegue de soluciones decisionales y la implementación de arquitecturas de aplicaciones.