Presentacion Programacion - Fundamentos Basicos e Introduccion a Javascript

PROGRAMACIÓN FUNDAMENTOS BÁSICOS E INTRODUCCIÓN A JAVASCRIPT ÍNDICE ▪¿QUÉ ES LA PROGRAMACIÓN? ▪INICIOS DE LA PROGRAMACIÓN ▪TIPOS DE LENGUAJES ▪VARIABLES, FUNCIONES Y ESTRUCTURAS ▪ESTRUCTURAS DE CONTROL ▪CASO PRÁCTICOS ▪¿QUÉ ES JAVACRIPT? ▪EJEMPLOS BÁSICOS ▪CASO PRÁCTICO ¿Qué es la programación? L...

PROGRAMACIÓN FUNDAMENTOS BÁSICOS E INTRODUCCIÓN A JAVASCRIPT ÍNDICE ▪¿QUÉ ES LA PROGRAMACIÓN? ▪INICIOS DE LA PROGRAMACIÓN ▪TIPOS DE LENGUAJES ▪VARIABLES, FUNCIONES Y ESTRUCTURAS ▪ESTRUCTURAS DE CONTROL ▪CASO PRÁCTICOS ▪¿QUÉ ES JAVACRIPT? ▪EJEMPLOS BÁSICOS ▪CASO PRÁCTICO ¿Qué es la programación? La programación es un conjunto de instrucciones que un ordenador puede entender y ejecutar. Son secuencias de comandos lógicos y secuenciales Se pueden clasificar en 2 tipos: ○ Alto nivel (Java, Phyton, Javascript,….) ○ Bajo nivel (Ensamblador, lenguaje maquina 0/1) Inicios de la programación Alan Turing (1912 / 1954. Londres) Segunda guerra mundial, descifrar mensajes Sentó las bases de la teoría de la computación y programación Ada Lovelace (1ª programadora) Maquina Charles Babbage Inicios de la programación Tipos de lenguajes de programación Pueden diferenciarse como: Tipos de lenguajes de programación Los lenguajes de programación más utilizados: ¿Qué sabes de…? Ejercicio Elige un lenguaje: ○ Quién, cuándo y dónde se creó ○ Alto nivel o bajo nivel ○ Compilado o interpretado ○ ¿Para qué se utiliza? ○ Ejemplos del código de programación ○ 2 diapositivas Variables, funciones y estructuras de control ¿Qué es una variable? ¿Qué es un operador aritmético? ¿Qué es una función? ¿Qué es una estructura de control? ¿Qué es una variable? Es un contenedor donde se almacenan datos que pueden cambiar durante la ejecución del programa. Puede contener: texto, números, booleanos, listas, etc… Ejemplo: ¿Qué es un operador aritmético? ¿Qué es una función? Es un bloque de código con un nombre específico y que realiza una tarea particular. Diseñado para ser reutilizado y permite dividir el programa en partes más pequeñas y manejables Parámetros de entrada y salida, cuerpo Ejemplo ¿Qué es una estructura de control? Concepto fundamental de programación que permite modificar el flujo de un programa Toma de decisiones, repeticiones, control, etc… Hay varios tipos: ○ Secuenciales Se ejecutan según aparecen en el código ○ Control de flujo Permite tomar decisiones en funciones de condiciones ○ Bucles/Ciclos Permite ejecutar un código N veces mientras se cumpla alguna condición ¿Qué es una estructura de control? ESTRUCTURA DE CONTROL. IF Ejemplos IF EJECUTAR PHP ONLINE: https://paiza.io/es/projects/new EJERCICIO 1. IF Haz un programa que te indique si el número es par o impar. Ejemplo 1. IF EJERCICIO 2. IF Haz un programa que pasándole la nota te diga: ○ Si estas suspendido (0-5) ○ Si estas aprobado (5-10) ○ O si la nota introducida no es correcta Ejemplo 2. IF EJERCICIO 3. IF Haz un programa para calcular el precio de un producto Si es un libro, hay que añadir 5% de IVA Si es ropa, hay que añadir 10% de IVA Si es electrónica, hay que añadir 15% de IVA Calcula el precio y muéstralo en pantalla Ejemplo 3. IF ESTRUCTURA DE CONTROL. SWITCH Es similar al IF, más legible y puede ser más optima si lo sabemos programar bien. Se usa cuando queremos ejecutar un código dependiendo de un valor de una variable. Importante usar: default y break EJERCICIO 1. SWITCH Haz un programa que dependiendo del valor de una variable te muestre el día de la semana en el que estamos. EJERCICIO 1. SWITCH EJERCICIO 2. SWITCH Haz un programa que asigne un mensaje a un código de error HTTP. 200 🡪 Todo OK 400 🡪Error de solicitud 404 🡪No encontrado 500 🡪 Error interno del servidor Si no es ninguno de los anteriores 🡪 Código no reconocido EJERCICIO 2. SWITCH ESTRUCTURA DE CONTROL. FOR Ejecutar un bloque de código un numero específico de veces Hay 3 parámetros: ○ Inicio ○ Condición ○ Incremento/Decremento EJERCICIO 1. FOR Haz un programa que muestre de manera DESCENDENTE los números del 25 al 1. EJERCICIO 1. FOR EJERCICIO 2. FOR Haz un programa que muestre la tabla de multiplicar del número 5. EJERCICIO 2. FOR ESTRUCTURA DE CONTROL. WHILE Ejecutar un bloque de código mientras se cumpla una condición No hay inicialización ni tampoco incremento La condición tiene que cambiar porque puede darse un bucle infinito FOR vs WHILE BUCLE FOR Si conoces el número de iteraciones que se necesitan Ejemplo: Recorrer datos de una lista o matriz BUCLE WHILE Si no conoces las iteraciones y puede cambiar de antemano Ejemplo: Leer las líneas de un archivo que nos pasan, recorrer una base de datos EJERCICIO 1. WHILE Haz un programa que muestre los números pares del 2 al 20. EJERCICIO 1. WHILE EJERCICIO 2. WHILE Haz un programa que muestre los números del 1 al 10 de forma DECRECIENTE. EJERCICIO 2. WHILE EJERCICIO FINAL. COMBINANDO IF/FOR Haz un programa que muestre los números del 1 al 20 que sean múltiplos de 3. EJERCICIO FINAL. COMBINANDO FOR/IF JAVASCRIPT FUNDAMENTOS BÁSICOS E INTRODUCCIÓN Javascript Es un lenguaje de programación de alto nivel orientado a objetos Es esencial con HTML y CSS Se creó en 1995. Sintaxis similar a Java y C++ Todos los navegadores interpretan Javascript Primer JavaScript, en el html Hello World! alert('Hello world!'); Segundo Javascript, en el html document.write('Hola Mundo'); Javascript documento externo !DOCTYPE html> External JavaScript A Paragraph. Try it This example uses a file path to link to "myScript.js". (myFunction is stored in "myScript.js") < https://www.w3schools.com/js/tryit.asp?filename=tryjs_whereto_url_relative https://www.w3schools.com/js/js_whereto.asp ¿Qué ocurre aquí? document.write('Esto va arriba'); document.write(''); document.write('y esto va debajo'); Mi primer botón con acción Mi primer botón con acción Púlsame Eventos https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmo useover Javascript ECMAScript estandarizar Javascript y garantizar la compatibilidad Sirve para manipular el DOM (Representación en memoria de la estructura de un documento HTML) ○ Cambiar formularios ○ Crear efectos visuales y dinámicos sin refrescar AJAX, técnica para realizar operaciones asíncronas ○ Actualizar contenido sin refrescar la página Usos Comunes. Webs interactivas Responsable de casi todas las interacciones que se producen en una página web y que dan lugar a un cambio en la misma. Sin este, la web estaría increíblemente limitada. Las acciones interactivas más comunes que permite JavaScript son: Añadir artículos a una cesta y realizar compras en línea. Expandir o contraer bloques de contenido con un clic. Reproducir archivos de vídeo o audio en el sitio. Visualizar las animaciones. Desplegar los menús. Usos Comunes. Front-End Hay una serie de frameworks de JavaScript front-end populares que ayudan a los sitios web a construir grandes aplicaciones para sus usuarios. Algunas aplicaciones famosas construidas con JavaScript son Netflix, PayPal, YouTube y Facebook. VIDEO FRAMEWORK Usos Comunes. Back-End Aunque JavaScript se hizo un nombre como lenguaje front-end, aplicándose a HTML y CSS, también tiene cualidades impresionantes como lenguaje de desarrollo back-end. Frameworks como Node.js permiten utilizar JavaScript para crear código del lado del servidor. VIDEO FRAMEWORK Usos Comunes. Juegos La programación en JavaScript no solo es útil para los sitios web estándar. Este lenguaje también es responsable de la mayoría de los juegos integrados en el navegador, ideales para matar el tiempo o perfeccionar tus habilidades si acabas de iniciarte en el desarrollo. Usos Comunes. Inteligencia Artificial Bibliotecas Javascript como TensorFlow han permitido a los desarrolladores utilizar este lenguaje de programación para el aprendizaje automático, creando modelos que pueden predecir eventos futuros basándose en la categorización de datos pasados. Como ves, los numerosos y variados usos de este lenguaje de programación hacen que su uso sea una habilidad muy demandada en todo el mundo.