Aprender a desarrollar con JavaScript (2a edición)

Transcripción

1 Presentación del lenguaje JavaScript 1. 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...) 21 Desarrollo a partir de algoritmos 1. Presentación de la noción de algoritmo Noción de variable Presentación de las nociones de variable y tipo Tipos básicos y operaciones asociadas Interés de los tipos Uso de variables en las expresiones Tabla resumen de los operadores Manipulación de las variables Nomenclatura de las variables Asignación Ejercicio n. 1: Inversión del contenido de dos variables en memoria Visualización de los resultados Ejercicio n. 2: Superficies de círculos Introducción por el teclado Ejercicio n. 3: Superficie y volumen de una esfera 39 1/16

2 4. Funciones predefinidas Ejercicio n. 4: Visualización de la longitud de un nombre Ejercicio n. 5: Determinación de iniciales Procesamientos condicionados Ejercicio n. 6: Polinomio de segundo grado Ejercicio n. 7: Etiqueta del mes sin cifrar Ejercicio n. 8: Etiqueta del mes sin cifrar (Siguiente... Finsiguiente) Estructuras iterativas Concepto de iteraciones Estructuras iterativas básicas Ejercicio n. 9: Media de 10 números Ejercicio n. 10: Media de una serie de n números Ejercicio n. 11: El común divisor más grande, por el método de las divisiones sucesivas Estructura iterativa Para Ejercicio n. 12: Cálculo de la media de 10 números Ejercicio n. 13: Deducir el número de vocales de una palabra Tabla de dimensión única Ejercicio n. 14: Contar los números pares en una tabla Tabla con dimensiones múltiples Ejercicio n. 15: Minihoja de cálculo Procedimientos, funciones y paso de argumentos Los objetivos Los procedimientos Ejercicio n. 16: Llamada de un procedimiento con paso de argumentos Las funciones Ejercicio n. 17: Llamada de una función con paso de argumentos 76 2/16

3 Conceptos principales del lenguaje JavaScript 1. Metodología de aprendizaje Variables (declaración y tipado) Ejercicio n. 2: Superficies de círculos Ejercicio n. 3: Superficie y volumen de una esfera Ejercicio n. 4: Número de letras de una palabra Ejercicio n. 5: Determinación de las iniciales 90 Procesamiento condicionado 1. Presentación de la sintaxis Ejemplos Ejercicio n. 6: Polinomio de segundo grado Ejercicio n. 8: Impresión de la etiqueta de un mes 96 Procesamiento iterativo (bucles) 1. Presentación de la sintaxis de los bucles Bucle while Sintaxis Ejercicio n. 9: Media de 10 números que se introducirán con el teclado Ejercicio n. 10: Media de una serie de n números que se introducirán con el teclado Bucle do while Sintaxis Ejercicio n. 11: Media de una serie de n números que se introducirán con el teclado 104 3/16

4 4. Bucle for Sintaxis Ejercicio n. 12: Media de una serie de 10 números que se introducirán con el teclado Ejercicio n. 13: Contar el número de vocales en una palabra 107 Tablas 1. Tablas de dimensión única Sintaxis Ejercicio n. 14: Contar los números pares en una tabla Tablas de dimensiones múltiples Sintaxis Ejercicio n. 15: Minihoja de cálculo 113 Procedimientos y funciones 1. Los procedimientos Sintaxis Ejercicio n. 16: Llamada de un procedimiento con argumentos Las funciones Sintaxis Ejercicio n. 17: Llamada de una función con argumentos 121 Enfoque orientado a objetos en JavaScript 1. Introducción 123 4/16

5 2. Programación orientada a objetos a través de ejemplos Secuencia 1: Declaración de los objetos JavaScript de manera "Inline" Secuencia 2: Creación de objetos JavaScript con un constructor Secuencia 3: Variables privadas en una instancia de objeto Secuencia 4: Paso de argumento(s) a un constructor Secuencia 5: No compartición de los métodos por las instancias de objetos Secuencia 6: Noción de prototipo Secuencia 7: Sobrecarga de un método Secuencia 8: Extensión de un prototipo Secuencia 9: Mecanismo de la herencia Secuencia 10: Límite de la herencia de la secuencia Secuencia 11: Un segundo límite a nuestra herencia 136 Principales objetos en JavaScript 1. Presentación Los objetos básicos Objeto Array Objeto Date Objeto Math Objeto window Objeto navigator Objeto String 163 Utilizar formularios para introducir datos 1. Controles en la entrada de datos con JavaScript Control de entrada de datos en un campo de texto Control del tipo numérico de una entrada de datos en un campo de texto Control de caracteres alfabéticos de una entrada de datos en un campo de texto 179 5/16

6 1.4 Control de caracteres alfabéticos y numéricos de una entrada de datos en un campo de texto Control de la longitud de una entrada de datos en un campo de texto Control de entrada de datos en una dirección de Control de la selección de una lista desplegable (versión simplificada) Control de la selección en una lista desplegable (versión extendida) Control de selección con un botón de radio Control de la selección con casillas de selección 192 Modelo DOM 1. Introducción Definición del DOM Definición de la arborescencia Aprendizaje del modelo DOM Script "Hello World" Diferencia entre write y writeln Gestión de los enlaces hipertextos Gestión de las imágenes Gestión de formularios y de sus etiquetas Gestión de los anchors Gestión de la navegación entre páginas web Visualización de las características generales del documento Gestión de los botones en los formularios Gestión de las tablas (etiqueta HTML table) 230 Exploración de flujo XML vía DOM 1. Noción de flujo XML Ejemplos 260 6/16

7 2.1 Ejemplo 1: Visualización del contenido de un codificado en XML Ejemplo 2: Lista de marcas de coches (archivo coches.xml) Ejemplo 3: Lista de las marcas de coches con un bucle Ejemplo 4: Lista de nodos conectados a la raíz Ejemplo 5: Lista de los campos (nodos) de cada coche Ejemplo 6: Sustitución de un valor de nodo Ejemplo 7: Acceso a los atributos Ejemplo 8: Acceso a un nodo padre Ejemplo 9: Recorrer hacia atrás los nodos Ejemplo 10: Sustitución sistemática de un valor de atributo Ejemplo 11: Conversión XML en HTML Ejemplo 12: Eliminación de un nodo en un flujo XML 279 Gestión de las cookies en JavaScript 1. Noción de cookie Escritura de una cookie Lectura de una cookie Eliminación de una cookie 288 Almacenamiento local de datos 1. Presentación general de las soluciones Almacenamiento con sessionstorage Almacenamiento con localstorage Implementación de Web Storage a través de ejemplos Ejemplo 1: Almacenamiento por localstorage de cadenas de caracteres Ejemplo 2: Almacenamiento en el localstorage de un objeto JavaScript 302 7/16

8 Almacenamiento remoto: formato XML 1. Presentación general de la solución Implementación del almacenamiento remoto a través de ejemplos Ejemplo 1: Acceso Ajax sobre BDD MySQL (lista de los coches) Ejemplo 2: Acceso MySQL vía Ajax 340 Almacenamiento remoto: formato JSON 1. Presentación general de la solución Implementación del almacenamiento remoto a través de ejemplos Ejemplo 1: Presentación del sistema de notación JSON Ejemplo 2: Lectura de un archivo JSON con XMLHttpRequest Ejemplo 3: Lectura de un archivo JSON con XMLHttpRequest y un script servidor en PHP Ejemplo 4: Lectura de una tabla MySQL con XMLHttpRequest (servidor PHP y flujo JSON) Ejemplo 5: Recodificación del ejemplo 4 con una lista desplegable 367 Geolocalización 1. Principio de la geolocalización Ejemplos de aplicaciones de geolocalización Ejemplo 1: Visualización del mapa del centro de España Ejemplo 2: Visualización del mapa del centro de España (marcador) Ejemplo 3: Visualización del mapa del centro de España (marcador y círculos de población) 386 8/16

9 2.4 Ejemplo 4: Visualización del mapa del centro de España (información meteorológica) Ejemplo 5: Visualización del mapa de Madrid (capa panorámica) Ejemplo 6: Visualización del mapa de Madrid (Street View) 396 Diseño (HTML5 CANVAS) 1. Presentación del API HTML5 CANVAS Ejemplos de aplicaciones del elemento <canvas> Ejemplo 1: Dibujar un cuadrado sencillo Ejemplo 2: Dibujar una matriz de TicTacToe Ejemplo 3: Colocación de dos marcas en la matriz del TicTacToe Posibles mejoras en el conjunto del TicTacToe 411 Gráficos de gestión 1. Diferentes soluciones de diseño de gráficos de gestión Ejemplos de uso de los API de Google Charts Ejemplo 1: Dibujar un histograma Ejemplo 2: Representación de un gráfico de sectores Ejemplo 3: Representación de un mapa Ejemplo 4: Representación de un indicador Ejemplo 5: Representación de un timeline 428 Framework AngularJS 1. Presentación general Nociones básicas 434 9/16

10 2.1 Primer ejemplo Directiva ng-bind Directiva ng-init Evaluación de una expresión Ejemplo de resumen Manipular tablas de memoria y objetos Uso de una tabla Uso de un objeto Módulo y controlador Ejemplo utilizando un módulo y un controlador Directiva personal Método personal Controlador en un archivo externo Introducir datos con zonas de texto Bucles y visualización en modo tabla Iteración sobre una tabla de datos Iteración sobre una tabla de datos y un filtro Iteración sobre una tabla de datos y una ordenación Iteración sobre una tabla de datos y una tabla HTML Filtrado de una tabla mediante una zona de texto Acceso a un servidor de datos remoto (servidor PHP) Lista simple a partir de una tabla MySQL Lista filtrada a partir de una tabla MySQL Insertar un registro en una tabla MySQL Controles de introducción de datos en los formularios Control para introducir datos en una zona de texto Control para introducir los datos de una dirección de correo electrónico Control para introducir datos en una zona de texto requerida Lista desplegable para escoger una marca Lista desplegable más avanzada para seleccionar una marca /16

11 7.6 Lista desplegable todavía más avanzada para seleccionar una marca Lista desplegable asociada a una búsqueda MySQL Directivas ng-click y ng-mouseover Directivas ng-show y ng-mouseleave Gestión del tiempo (temporizador) Gestión de las opciones mediante botones de radio Gestión de las opciones mediante casillas de selección 529 EcmaScript 1. Presentación general Aportaciones a nivel de la Programación Orientada a Objetos Noción de prototipo Sobrecarga de un método Extensión de prototipo Herencia Primer ejemplo POO en EcmaScript Herencia en EcmaScript Métodos getter, setter y static en EcmaScript Funciones flecha (arrow functions) Ventajas de las funciones flecha Ejemplo Estructuras Map, Set y bucle for of Presentación general Ejemplo Ámbito de las variables (var o let) Presentación general Ejemplo /16

12 6. Promesas (promise) Presentación general Ejemplo Desestructuración Presentación general Ejemplo 590 Framework Node.js 1. Presentación general Instalación de Node.js Ejecución del entorno Node.js Primer script Node.js que muestra "Hello World" Presentación general Código fuente Ejecución Segundo script que muestra «Hello World» (versión con Content-Type) Presentación general Código fuente Ejecución Tercer script que muestra «Hello World» (versión HTML) Presentación general Código fuente Ejecución /16

13 7. Gestión de las URL Presentación general Código fuente Ejecución Recuperar parámetros de la URL Presentación general Código fuente Ejecución Detectar el evento close en el servidor Presentación general Código fuente Ejecución del servidor node_06.js Creación de un objeto con su propio evento Presentación general Código fuente Ejecución Mostrar el primer registro de una tabla MySQL (versión 1) Presentación general Código fuente Ejecución Mostrar el conjunto de registros de una tabla MySQL Presentación general Código fuente Ejecución Mostrar el primer registro de una tabla MySQL (versión 2) Presentación general Código fuente /16

14 13.3 Ejecución 630 Servidor de datos Mongo DB 1. Presentación general Instalación de Mongo DB Arranque del servidor de datos Mongo DB Acceso cliente al servidor de datos Mongo DB Operaciones básicas en Mongo DB Conexión a una base de datos Mongo DB Insertar datos en una colección Lista del contenido de una colección Lista del contenido de una colección con filtrado de datos Lista de los nombres de las colecciones Eliminar un objeto en una colección Actualizar el valor de una propiedad Herramienta de exportación de datos mongoexport Herramienta de importación de datos mongoimport 645 Acceso a un servidor Mongo DB desde Node.js 1. Presentación general Acceso al servidor de datos Mongo DB Presentación general Código fuente Ejecución /16

15 3. Insertar documentos en Mongo DB Presentación general Código fuente Ejecución Lista de documentos de una colección Mongo DB Presentación general Código fuente Ejecución Actualización de un documento de una colección Mongo DB Presentación general Código fuente Ejecución Recorrer paso a paso una colección Mongo DB Presentación general Código fuente Ejecución Recorrer paso a paso y mostrar una colección Mongo DB Presentación general Código fuente Ejecución 669 Acceso a un servidor Node.js desde AngularJS 1. Presentación general Primer servidor Express js Presentación general Código fuente /16

16 3. Un segundo servidor Node js-express js Presentación general Código fuente Un tercer servidor Node js-express js Presentación general Código fuente Insertar datos en Mongo DB con Express js Presentación general Código fuente Lista de datos en Mongo DB con Express js Presentación general Código fuente Inserción de datos en Mongo DB con Express js (AngularJS) Presentación general Código fuente Inserción de datos en Mongo DB con Express js (mongoose) Presentación general Código fuente 714 índice /16