¡Descarga Introducción a JavaScript ES6: Iniciación a la Programación con JavaScript (ES6) y más Apuntes en PDF de Programación Informática solo en Docsity!
Introducción a JavaScript ES
Iniciación a la Programación con JavaScript
(ES6)
Iniciación y Variables
En esta lección se aprende a escribir un primer programa "Hola mundo". Esto significa que se maneja correctamente un editor de texto, en este caso BRACKETS, para mostrar una pequeña frase en el navegador web. El concepto de Variable también se asimila fácilmente a partir de ejemplos muy reveladores.
Inicio con JavaScript (ECMAScript6)
Abrir Brackets (o cualquier otro editor de HTML) Crear un archivo nuevo y copiar el código que empieza por Guardar el archivo como Ejercicio1.html Ejecutar el programa y verificar que se muestra "Hola Mundo!" en el navegador
Creación y Uso de Variables
Crear un nuevo archivo Ej2.htm y copiar el código que asigna valores a las variables a y b, y luego muestra la suma de ambas. Crear un nuevo archivo Ej3.htm y copiar el código que incrementa los valores de las variables num1 y num2. Crear un nuevo archivo Ej4.htm y copiar el código que utiliza una constante a y una variable b para mostrar su concatenación. Crear un nuevo archivo Ej5.htm y corregir el error que presenta el código.
Introducción de Valores por Teclado
Crear un nuevo archivo Ej6.htm y copiar el código que solicita al usuario que introduzca su nombre. Crear un nuevo archivo Ej7.htm y copiar el código que solicita al usuario que introduzca un número y luego muestra el doble de ese número. Crear un nuevo archivo Ej8.htm y copiar el código que solicita al usuario que introduzca dos números y luego muestra la suma de ambos. Crear un nuevo archivo Ej9.htm y copiar el código que solicita al usuario que introduzca un número y luego muestra el doble de ese número utilizando innerHTML.
Programas con Bucles y Depuración
Crear un nuevo archivo Ej10.htm y realizar un programa que solicite al usuario dos números y muestre la resta de ambos. Crear un nuevo archivo Ej11.htm y realizar un programa que solicite al usuario dos números y muestre la resta y la multiplicación de ambos. Crear un nuevo archivo Ej12.htm y realizar un programa que solicite al usuario números del 1 al 10 y muestre el contador y el número introducido, hasta que el contador llegue a 5. Corregir el error en el programa anterior que no permite ver el último document.write. Crear un nuevo archivo Ej14.htm y realizar un programa que solicite al usuario números hasta que introduzca el número 7.
Condicionales en JavaScript (ES6)
Un programa consta de datos, lógica y presentación. La parte de lógica está formada por condicionales, decisiones que toma el programa en base al diseño del programador. Los condicionales simples son fáciles de entender y aplicar, pero anidar varios de ellos necesita una estructura para optimizar el número de decisiones que toma el programa.
Condicionales Simples
Algoritmo (no programa) con introducción de 2 números y mostrar cuál es el mayor. Crear un nuevo archivo Ej2.htm y realizar un programa que solicite al usuario dos números y muestre cuál es el mayor. Crear un nuevo archivo Ej3.htm y realizar un programa que solicite al usuario tres notas, calcule la media y determine si el alumno está aprobado o suspendido. Algoritmo (no programa) con introducción de 2 números y mostrar cuál es el mayor o si son iguales.
Condicionales Compuestos
Crear un nuevo archivo Ej5.htm y realizar un programa que genere un número aleatorio entre 1 y 6 (como un dado) y muestre si se ha ganado o perdido. Realizar un programa para una tienda de coches: Si el coche a la venta es un Ford Fiesta, el descuento es de un 5%. Si el coche a la venta es un Ford Focus, el descuento es del 10%. El usuario introduce el artículo (o su código) y el programa muestra el descuento correspondiente por pantalla.
Descargado por carlos patiño ([email protected]) lOMoARcPSD| 29227671
ES6 Ejercicio Condicionales 11)
Realizar ALGORITMO ESTRUCTURADO para una agencia
de viajes
Si el usuario introduce como origen la ciudad de Palma y como destino Barcelona, el descuento se establece en el 5%. Con el mismo origen, si el destino es Madrid el descuento es del 10% y si el destino es Valencia, el descuento es del 15%. Si la marca == ford Y el modelo == fiesta, el descuento vale 5, SINO el descuento vale 10.
ES6 Condicionales 12)
Cómo no permitir valores incorrectos
ES6 Condicionales 14)
Realizar programa en el que el usuario introduce el
número del mes (1 al 12) y el código responde si ese mes
tiene 30 o 31 días
ES6 Ejercicio 16)
Agregar código al programa que muestra el número de
días de un mes, para que el usuario solo pueda introducir
números del 1 al 12
Funciones 1)
Ejecutar el siguiente código. ¿En qué momento se
"dispara" la función?
### ``` La función saludo() se "dispara" cuando se hace clic en el botón "Pulsa aquí", ya que el atributo onclick de la etiqueta <input> llama a la función saludo() y le pasa el argumento "Ana". **Funciones 2)** ## Colocar puntos de interrupción y ejecutar paso a paso Coloca un punto de interrupción en la primera línea del código de la función saludo() y otro en la línea donde se llama a la función. Ejecuta el código paso a paso y observa el orden de ejecución. **Funciones 3)** ## Funciones de cálculo ```html ### ``` La función Calcula() recibe un parámetro numero que, si no se le pasa ningún valor, toma el valor predeterminado de 1. Dentro de la función, se calcula el cuadrado del número y se muestra el resultado en la página. **Funciones 4)** ## Uso de la instrucción return ```html La función utiliza la sentencia **return** para devolver un valor.
Pulsa aquí
Calculo Otro Calculo
Suma
Funciones 9)
Función que muestra la suma de dos números
## Alcance de variables (Scope) ### ``` La función programa() contiene una función interna llamada func(). Dentro de func(), se utiliza la variable x que está definida en el ámbito de programa(). Cuando se llama a func(false), se devuelve el valor de x que es 3. Cuando se llama a func(1), se crea una nueva variable x local a func() y se devuelve su valor. **Funciones 11)** ## Seguimiento de variables ```html El resto son variables globales.
En este código, la variable z es local a la función f(), por lo que no se puede acceder a ella fuera de esa función.
Funciones 12)
Tipo de variable z
La variable z es una variable local a la función f(). No se puede acceder a ella fuera de esa función.
Entrada de datos visual con barra 'slide'
Código HTML y JavaScript
## Entrada de datos por 'Slide' Pulsa aquí 50 ### ``` Este código muestra cómo utilizar una barra deslizante (input type='range') para permitir al usuario introducir un valor. Cuando el usuario mueve la barra, se llama a la función ProcesaDatos(), que obtiene el valor de la barra y lo muestra en un elemento <p> con el id 'resultado'. **Entrada de datos desde lista** ## Código HTML y JavaScript ```html Introduce número: **X** ### ``` Este código muestra cómo utilizar una lista desplegable (select) para permitir al usuario seleccionar un valor. Cuando el usuario selecciona un valor, se llama a la función calcula(), que obtiene el valor del campo de texto y el valor seleccionado en la lista, los multiplica y muestra el resultado en un elemento <div> con el id 'salida'. **Conversión de Celsius a Fahrenheit** ## Código HTML y JavaScript ```html ## Conversión de Celsius a Fahrenheit Grados Celsius: Grados Fahrenheit: Convertir ### ``` Este código permite al usuario introducir una temperatura en grados Celsius y muestra la conversión a grados Fahrenheit. La función convertirCelsiusAFahrenheit() se encarga de realizar la conversión y mostrar el resultado en el campo de texto correspondiente. **Conversión de Fahrenheit a Celsius** ## Código HTML y JavaScript ```html uno ˅ Sexo (H/M): Peso de Referencia: Calcular ### ``` Este código permite al usuario introducir su altura, edad, peso y sexo. Al pulsar el botón "Calcular", se ejecuta la función calcularPesoReferencia(), que calcula el peso de referencia según la fórmula proporcionada y muestra el resultado en un campo de texto. ## Juego de apuestas con dados ## Código HTML y JavaScript ```html ## JUEGO DE APUESTAS Dinero: Número del dado: Introduzca un número del 1 al 6: Introduzca su apuesta: ### ``` Este código implementa un juego de apuestas con dados. El usuario puede introducir una cantidad de dinero inicial, un número del 1 al 6 y una apuesta. Al pulsar el botón "Jugar", se genera un número aleatorio entre 1 y 6 que representa el resultado del dado. Si el número introducido por el usuario coincide con el resultado del dado, el usuario gana el doble de su apuesta. Si no coincide, el usuario pierde su apuesta. El juego continúa hasta que el usuario se quede sin dinero. ## Uso del input 'date' con JavaScript ## Código HTML y JavaScript ```html Jugar Iniciar Fecha de inicio: Fecha de fin: ### ``` Este código utiliza la librería Moment.js para calcular la diferencia en días entre dos fechas introducidas por el usuario a través de campos de tipo 'date'. Cuando el usuario cambia el valor de cualquiera de los dos campos, se llama a la función calcularDias(), que obtiene las fechas, calcula la diferencia en días y la muestra en la consola del navegador. **Ejercicios de bucles** ## Seguimiento de variables en bucle for ```html
Este código muestra en pantalla los números del 0 al 4, uno por línea. Puedes realizar un seguimiento de las variables i y cadena durante la ejecución del bucle.
Imprimir números de forma descendente
Este código imprime en pantalla los siguientes números de forma descendente: 54321 4321 321 21 1
Crear una tabla de números
Este código crea una tabla HTML con 10 filas, donde cada fila contiene un número de celdas igual al número de la fila. Puedes realizar un seguimiento de las variables i y j durante la ejecución del código.
Dibujar un triángulo de asteriscos
Este código dibuja un triángulo de asteriscos en la pantalla. El usuario debe introducir el tamaño del triángulo, y el programa se encarga de generar la estructura.
