Aprender a desarrollar con JavaScript

Transcripción

1 Presentación del lenguaje JavaScript 1. Definición e histórico rápido Requisitos previos para un aprendizaje sencillo del lenguaje Herramientas necesarias Posicionamiento de JavaScript respecto a otras tecnologías de desarrollo Web (HTML, CSS, PHP...) 15 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 33 1/10

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 70 2/10

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 84 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 90 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 por el teclado Ejercicio n. 10: Media de una serie de n números que se introducirán por el teclado Bucle do while Sintaxis Ejercicio n. 10: Media de una serie de n números que se introducirán por el teclado 98 3/10

4 4. Bucle for Sintaxis Ejercicio n. 12: Media de una serie de 10 números que se introducirán por el teclado Ejercicio n. 13: Contar el número de vocales en una palabra 101 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 107 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 115 Enfoque orientado a objetos en JavaScript 1. Introducción 117 4/10

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 130 Principales objetos en JavaScript 1. Presentación Los objetos básicos Objeto Array Objeto Date Objeto Math Objeto window Objeto navigator Objeto String 157 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 173 5/10

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 186 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) 224 Exploración de flujo XML vía DOM 1. Noción de flujo XML Ejemplos 254 6/10

7 2.1 Ejemplo 1: Visualización del contenido de un mail 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 273 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 282 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 296 7/10

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 334 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 362 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) 380 8/10

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) 390 Diseño (HTML 5 CANVAS) 1. Presentación del API HTML 5 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 405 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 422 Creación de documentos PDF 1. Conceptos básicos API de generación de archivos PDF 428 9/10

10 2.1 Solución pdf24.org Soluciones alternativas 432 Creación de códigos QR 1. Noción de código QR Implementación del API JavaScript de creación de código QR Ejemplo 1: Código QR que incluye un número de teléfono Ejemplo 2: Código QR que incluye una URL 437 índice /10