Introducción a la Programación con JavaScript (UF1305)

1 - Metodología de la programación

Objetivo

• Explicar los tipos de datos utilizados para las variables en la elaboración de programas de guion.
• Identificar los operadores que se utilizan para hacer los cálculos y operaciones.
• Especificar las instrucciones para realizar operaciones de entrada y salida de datos en un programa.

Contenido

UA1 - Metodología de la programación

Introducción

Mapa conceptual

Lenguajes de programación

Lógica de la programación

Descripción y utilización de operaciones lógicas

Operador AND 

Operador OR

Operador NOT

Operador XOR 

Operador NAND

Operador NOR

Secuencias y partes de un programa

Ordinogramas

Descripción de un ordinograma

Elementos de un ordinograma

Operaciones en un programa

Implementación de elementos y operaciones en un ordinograma

Pseudocódigos

Descripción de pseudocódigo

Creación del pseudocódigo

Objetos

Descripción de objetos

Funciones de los objetos

Comportamiento de los objetos

Atributos de los objetos

Creación de objetos

Ejemplos de códigos en diferentes lenguajes

Códigos en lenguajes estructurales

Códigos en lenguajes scripts

Códigos en lenguajes orientados a objetos

Hemos aprendido

Ejercicios

Ejercicio. Ordinograma y pseudocódigo

Lo necesario para comenzar

Pasos del programa

2 - Lenguaje de guion: Características y sintaxis del lenguaje

Objetivo

• Describir las estructuras secuencial, condicional y de iteración que se utilizan para agrupar y organizar las acciones de un programa.
• Reconocer la sintaxis del lenguaje de guion que describen las estructuras de programación en la elaboración de scripts, de acuerdo a las especificaciones técnicas del lenguaje.
• Explicar los tipos de datos utilizados para las variables en la elaboración de programas de guion.
• Identificar los operadores que se utilizan para hacer los cálculos y operaciones.
• Interpretar scripts que resuelvan un problema previamente especificado:
  • Identificar el tipo y el uso de los datos declarados dentro del script.
  • Describir las estructuras de programación utilizadas para organizar las acciones del programa.
  • Reconocer las instrucciones proporcionadas por el lenguaje de script utilizadas en las operaciones de manipulación, entrada y salida de datos.
  • Insertar el script dentro de la página web utilizando las etiquetas apropiadas.
  • Probar la funcionalidad del script utilizando un navegador.
• Describir la lógica de funcionamiento del script identificando las estructuras de programación y los datos con los que opera.

Contenido

UA2 - Lenguaje de guion: Características y sintaxis del lenguaje

Introducción

Mapa conceptual

Características del lenguaje

Modelo de Objetos del Documento - DOM

Descripción del lenguaje orientado a eventos

Descripción del lenguaje interpretado

La interactividad del lenguaje de guion

Relación del lenguaje de guion y el lenguaje de marcas

Extensión de las capacidades del lenguaje de marcas

Adición de propiedades interactivas

Sintaxis del lenguaje de guion

Etiquetas identificativas dentro del lenguaje de marcas

Tipos de documentos

Especificaciones y características de las instrucciones

Qué puede y qué no puede hacerse con JavaScript

Opciones para desarrollar con JavaScript

Elementos del lenguaje de guion

Variables

Constantes 

Operaciones  

Comparaciones 

Asignaciones 

Hemos aprendido

Ejercicios

Ejercicio 1. Elementos del lenguaje JavaScript

Lo necesario para comenzar

Pasos a seguir

Ejercicio 2. Conversor de euros a dólares

Lo necesario para comenzar

Pasos a seguir

3 - Lenguaje de guion: Sintaxis del lenguaje y ejecución y tipos de scripts

Objetivo

• Reconocer la sintaxis del lenguaje que describen las estructuras de programación.
• Especificar las instrucciones para realizar operaciones de entrada y salida de datos en un programa.
• Distinguir los métodos para ejecutar un script utilizando varios navegadores web.
• Interpretar scripts que resuelvan un problema previamente especificado.
• Describir la lógica de funcionamiento del script según las estructuras y los datos.

Contenido

UA3 - Lenguaje de guion: Sintaxis del lenguaje y ejecución y tipos de scripts

Introducción

Mapa conceptual

Sintaxis del lenguaje de guion

Objetos del lenguaje de guion

Métodos 

Eventos 

Atributos 

Funciones 

Tipos de scripts: inmediatos, diferidos e híbridos

Script dentro del cuerpo del lenguaje de marcas

Ejecutables al abrir la página

Ejecutables por un evento 

Script dentro del encabezado del lenguaje de marcas

Script dentro del cuerpo del lenguaje de marcas

Ejecución de un script

Ejecución al cargar la página

Ejecución después de producirse un evento

Ejecución del procedimiento dentro de la página

Tiempo de ejecución

Errores de ejecución

Hemos aprendido

Ejercicios

Ejercicio 1. Objetos en JavaScript

Lo necesario para comenzar

Pasos a seguir

Ejercicio 2. Creación y ejecución de scripts

Lo necesario para comenzar

Pasos a seguir

Ejercicio 3. Atributos y métodos de los objetos

Lo necesario para comenzar

Pasos a seguir

4 - Elementos básicos del lenguaje de guion: Variables, identificadores y operadores

Objetivo

• Reconocer la sintaxis del lenguaje que describen las estructuras de programación.
• Explicar los tipos de datos utilizados para las variables en la elaboración de programas.
• Identificar los operadores que se utilizan para hacer los cálculos y operaciones.
• Identificar los objetos predefinidos para manejar nuevas estructuras y utilidades.
• Interpretar scripts que añaden efectos estéticos a la presentación de las páginas.
• Interpretar scripts en los que se validan las entradas de datos de los campos de un formulario.

Contenido

UA4 - Elementos básicos del lenguaje de guion: Variables, identificadores y operadores

Introducción

Mapa conceptual

Variables e identificadores

Declaración de variables

Ámbito de las variables

Operaciones con variables

Constantes

Tipos de datos

Valores Primitivos y Objetos

Objetos planos 

Arrays 

Objeto Date 

Expresiones regulares 

Propiedades 

Datos booleanos

Comentarios en JavaScript 

Datos numéricos

El objeto Math  

Datos de texto

Valores nulos

Referencias y recolección de basura

Conversiones de tipos

Operadores y expresiones

Operadores de asignación

Operadores de comparación y operador condicional

Operadores aritméticos

Precedencia de operadores 

Asociatividad de operadores 

Operador resto de división 

Operador unario

Operador incremento y decremento 

Sintaxis abreviada 

Operador suma con cadenas de caracteres 

Operador suma con números

Operadores sobre bits

Complemento a uno 

Complemento a dos 

Operador Not a nivel de bits 

Operadores binarios a nivel de bits 

Operadores de desplazamiento de bits 

Operadores lógicos

Operador NOT 

Operador AND 

Operador OR 

Precedencia de operadores lógicos 

Comportamiento de las operaciones lógicas 

Operadores de cadenas de caracteres

Concatenación

Hemos aprendido

Ejercicios

Ejercicio. Variables y Tipos de datos

Lo necesario para comenzar

Pasos a seguir

5 - Elementos básicos del lenguaje de guion: Operadores, sentencias y funciones

Objetivo

• Describir las estructuras utilizadas para agrupar y organizar las acciones de un programa.
• Reconocer la sintaxis del lenguaje que describen las estructuras de programación.
• Identificar los operadores que se utilizan para hacer los cálculos y operaciones.
• Especificar las instrucciones para realizar operaciones de entrada y salida de datos en un programa.
• Interpretar scripts que añaden efectos estéticos a la presentación de las páginas.
• Interpretar scripts en los que se validan las entradas de datos de los campos de un formulario.

Contenido

UA5 - Elementos básicos del lenguaje de guion: Operadores, sentencias y funciones

Introducción

Mapa conceptual

Operadores y expresiones

Operadores especiales

Operador condicional

Operador coma

Operador delete

Operador delete con un array

Operador in

Operador instanceof

Operador new

Operador this

Operador typeof

Operador void

Expresiones y sentencias

Instrucciones JavaScript

Palabras reservadas de JavaScript

El modo estricto de JavaScript

Estructuras de control de flujo

Sentencia if

Sentencia while

Sentencia do … while

Sentencia for

Sentencia for in

Sentencia break

Sentencia continue

Sentencia switch

Funciones

Definición de funciones

Propiedades de las funciones

Sentencia return

Funciones predefinidas del lenguaje de guion

Funciones para cadenas de texto

Funciones para arrays 

Funciones para números 

Creación de funciones

Funciones anónimas  

Particularidades de las funciones en el lenguaje de guion

Incorporación de scripts 

Eventos 

Instrucciones de entrada y salida

Descripción y funcionamiento de las instrucciones de entrada y salida

Lectura de teclado de datos 

Sentencia prompt

Sentencia confirm

Sentencia alert

Almacenamiento en variables 

Impresión en pantalla del resultado 

Sentencia document.write y document.writeln

Sentencia innerHTML

Hemos aprendido

Ejercicios

Ejercicio 1. Entrada y salida de datos

Lo necesario para comenzar

Pasos a seguir

Ejercicio 2. Entrada y salida de datos

Lo necesario para comenzar

Pasos a seguir

Ejercicio 3. Entrada y Salida de datos y Estructuras de control

Lo necesario para comenzar

Pasos a seguir

Ejercicio 4. Entrada y Salida de datos y Funciones

Lo necesario para comenzar

Pasos a seguir

Ejercicio 5. Comentarios, Variables y Alternativas

Lo necesario para comenzar

Pasos a seguir

6 - Desarrollo de scripts

Objetivo

• Interpretar scripts que añaden efectos estéticos a la presentación de las páginas.
• Interpretar scripts en los que se validan las entradas de datos de los campos de un formulario.
• Interpretar la documentación técnica independientemente del lenguaje en el que esté editada.

Contenido

UA6 - Desarrollo de scripts

Introducción

Mapa conceptual

Herramientas de desarrollo, utilización

Crear scripts con herramientas de texto

Crear scripts con aplicaciones Web

Recursos en Web para la creación de scripts

Depuración de errores: errores de sintaxis y de ejecución

Definición de los tipos de errores

Escritura del programa fuente

Compilación del programa fuente

Corrección de errores de sintaxis

Corrección de errores de ejecución

Mensajes de error

Funciones para controlar los errores

Utilización del try catch 

Hemos aprendido

Ejercicios

Ejercicio 1. Gestión de errores

Lo necesario para comenzar

Pasos a seguir

Ejercicio 2. Try/Catch y Throw

Lo necesario para comenzar

Pasos a seguir

Ejercicio 3. Try/Catch y Throw

Lo necesario para comenzar

Pasos a seguir

7 - Gestión de objetos del lenguaje de guion

Objetivo

• Identificar los objetos, sus propiedades, sus métodos y su funcionalidad dentro del script.
• Explicar los objetos del navegador, así como sus propiedades y métodos.
• Identificar los objetos predefinidos por el lenguaje de guion para manejar nuevas estructuras y utilidades.
• Describir los objetos del documento, así como sus propiedades y métodos.

Contenido

UA7 - Gestión de objetos del lenguaje de guion

Introducción

Mapa conceptual

Jerarquía de objetos

Descripción de objetos de la jerarquía

Propiedades compartidas de los objetos

Navegar por la jerarquía de los objetos

Propiedades y métodos de los objetos del navegador

El objeto superior window

El objeto navigator

URL actual (location)

URL visitada por el usuario

Contenido del documento actual (document)

Propiedades y métodos de los objetos del documento

Propiedades del objeto document

Ejemplos de propiedades de document

Métodos de document

Flujo de escritura del documento

Métodos open() y close() de document

Propiedades y métodos de los objetos del formulario

Propiedades principales del objeto form (Name, action, method, target)

Métodos del objeto form (submit, reset, get, post)

Propiedades y métodos de los objetos del lenguaje

document (escribir texto, color fuente, color fondo, obtener elementos del documento actual HTML, título de la página)

window (open)

history (go)

location (servidor)

navigator (nombre, versión y detalles del navegador)

Hemos aprendido

Ejercicios

Ejercicio 1. Uso de los objetos del modelo DOM

Lo necesario para comenzar

Pasos a seguir

Ejercicio 2. Objetos window y history

Lo necesario para comenzar

Pasos a seguir

Ejercicio 3. Estilos y Ancho de ventana

Lo necesario para comenzar

Pasos a seguir

8 - Los eventos del lenguaje de guion

Objetivo

• Identificar los eventos incluidos en el script para distinguir las interacciones con el usuario.
• Describir los eventos que proporciona el lenguaje de guion.

Contenido

UA8 - Los eventos del lenguaje de guion

Introducción

Mapa conceptual

Utilización de eventos

Definición de eventos

Acciones asociadas a los eventos

Jerarquía de los eventos desde el objeto window

Eventos en elementos de formulario

onselect (al seleccionar un elemento de un formulario)

onchange (al cambiar el estado de un elemento del formulario)

Eventos de ratón. Eventos de teclado

Eventos de ratón

Eventos de teclado

Eventos de enfoque

onblur (cuando un elemento pierde el foco de la aplicación)

onfocus (cuando un elemento de la página o la ventana ganan el foco de la aplicación)

Eventos de formulario

onreset (al hacer clic en el botón de reset de un formulario)

onsubmit (al pulsar el botón de enviar el formulario)

Otros eventos de formulario

Eventos de ventana

onmove (al mover la ventana del navegador)

onresize (al redimensionar la ventana del navegador)

Otros eventos de ventana

Otros eventos

onunload (Al abandonar una página)

onload (al terminar de cargarse la página o imágenes)

onclick (al hacer clic con el botón del ratón sobre un elemento de la página)

ondragdrop (al soltar algo que se ha arrastrado sobre la página)

onerror (al no poderse cargar un documento o una imagen)

onabort (al detenerse la carga de una imagen, de la página o irse de la página)

Eventos del portapapeles

Eventos multimedia

Hemos aprendido

Ejercicios

Ejercicio 1. Eventos

Lo necesario para comenzar

Pasos a seguir

Ejercicio 2. Eventos de ratón

Lo necesario para comenzar

Pasos a seguir

Ejercicio 3. Más Eventos

Lo necesario para comenzar

Pasos a seguir

9 - Búsqueda y análisis de scripts

Objetivo

• Localizar y descargar el componente ya desarrollado desde cualquier lugar.
• Identificar los objetos, sus propiedades, sus métodos y su funcionalidad dentro del script.
• Integrar scripts ya desarrollados en una página web, para añadir nuevas funcionalidades.

Contenido

UA9 - Búsqueda y análisis de scripts

Introducción

Mapa conceptual

Búsqueda en sitios especializados

Páginas oficiales

Tutoriales

Foros

Bibliotecas

Operadores booleanos

Funcionamiento de los operadores booleanos

Utilización en distintos buscadores

Directorios Web

Técnicas de búsqueda

Expresiones

Definiciones de búsquedas

Búsqueda de imágenes

Búsqueda de noticias   

Búsqueda de vídeos  

Especificaciones

Técnicas de refinamiento de búsquedas

Utilización de separadores

Utilización de elementos de unión

Reutilización de scripts

Scripts gratuitos

Generalización de códigos

Hemos aprendido

Ejercicios

Ejercicio 1. Búsqueda y análisis de scripts

Lo necesario para comenzar

Pasos a seguir

Ejercicio 2. Búsqueda y análisis de scripts

Lo necesario para comenzar

Pasos a seguir