Tweet
Tweet

Slide 1

Slide 1 text

Web Development: Sesión 3 ¡Está viva! (con JavaScript) Por Luis Andrés Del Águila @delaguilaluis @nodeschoolgt

Slide 2

Slide 2 text

¿Qué vamos a aprender en este curso? @delaguilaluis JavaScript básico. Crear y modificar la presentación de una página web dinámicamente. No se necesita tener experiencia previa. No necesitas más que un navegador web y un editor de texto. % Metodología del curso: magistral y ejercicios prácticos. ❓ Preguntas en cualquier momento a través del chat. Nota: JavaSript, como muchos lenguajes de programación, tiene formas distintas de resolver problemas; tendremos enfoque. ✅ Recursos: https://developer.mozilla.org/ (MDN: Mozilla Developer Network). 1

Slide 3

Slide 3 text

Un primer vistazo y una primer probadita @delaguilaluis 1. Ejecuten su navegador web favorito, e.g. Firefox, Chrome, Brave, Safari 2. Visiten https://duckduckgo.com (o su motor de búsqueda favorito) 3. Den click derecho en cualquier parte de la página y seleccionen inspeccionar elemento 4. Busquen el apartado de consola 5. Escriban: 2 + 2 6. Presionen Enter 7. Deberían ver el resultado en pantalla (4) ¿Qué es esto? 2

Slide 4

Slide 4 text

REPL @delaguilaluis 3

Slide 5

Slide 5 text

REPL @delaguilaluis Read Eval Print Loop 4

Slide 6

Slide 6 text

Una segunda probadita @delaguilaluis 1. Abran su editor de texto favorito 2. Escriban el siguiente código (o cópienlo del chat) const subject = window.prompt('¿Cuál es tu nombre?') || 'mundo' document.writeln(`¡Hola, ${subject}!`) 1. Solo para TextEdit: Seleccionen, de la barra de tareas: Format > Make Plain Text (de ser necesario) 2. Guarden el archivo -en cualquier ubicación- como probadita2.html 3. Si les pidiera confirmación de la extensión a usar, seleccionen “usen html” 4. Abran el archivo con su navegador favorito 5

Slide 7

Slide 7 text

¡Genial! ¿Y ahora? @delaguilaluis ¿Qué se puede hacer en JavaScript? ¿Por qué es tan popular? ¿Por qué querría programar en JavaScript? ¿Qué tipo de scripts puedo hacer? 6

Slide 8

Slide 8 text

¿Qué es JavaScript? @delaguilaluis (O, ¿qué no es?) • Lenguaje de programación • Diseñado y desarrollado por Brendan Eich en 1995 • Influenciado por Self y Scheme (dialectos de Lisp) • Mayor confusión: relación con Java. • JavaScript es a Java lo que piña es a piñata • Similitudes: sintaxis (influencia de C) 1: https://adactio.com/journal/1595 7

Slide 9

Slide 9 text

¿Qué es JavaScript? @delaguilaluis JavaScript (JS) es un lenguaje ligero e interpretado, orientado a objetos con funciones de primera clase, más conocido como el lenguaje de script para páginas web, pero también usado en muchos entornos sin navegador, tales como node.js, Apache CouchDB y Adobe Acrobat. Es un lenguaje script multi-paradigma, basado en prototipos, dinámico, soporta estilos de programación funcional, orientada a objetos e imperativa. Fuente: https://developer.mozilla.org/en-US/docs/Web/javascript 8

Slide 10

Slide 10 text

¿Qué es JavaScript? @delaguilaluis ???????????????????????????????????????????????????????? ???????????????????????????????????????????????????????? ???????????????????????????????????????????????????????? ???????????????????????????????????????????????????????? ???????????????????????????????????????????????????????? ???????????????????????????????????????????????????????? ?????????????????????????? Fuente: https://developer.mozilla.org/en-US/docs/Web/javascript 9

Slide 11

Slide 11 text

¿Qué es JavaScript? @delaguilaluis JavaScript (JS) es un lenguaje ligero e interpretado, orientado a objetos con funciones de primera clase, más conocido como el lenguaje de script para páginas web, pero también usado en muchos entornos sin navegador, tales como node.js, Apache CouchDB y Adobe Acrobat. Es un lenguaje script multi-paradigma, basado en prototipos, dinámico, soporta estilos de programación funcional, orientada a objetos e imperativa. Fuente: https://developer.mozilla.org/en-US/docs/Web/javascript 10

Slide 12

Slide 12 text

@delaguilaluis JavaScript (JS) es un lenguaje ligero e interpretado, orientado a objetos con funciones de primera clase, más conocido como el lenguaje de script para páginas web, pero también usado en muchos entornos sin navegador, tales como node.js, Apache CouchDB y Adobe Acrobat. Es un lenguaje script multi-paradigma, basado en prototipos, dinámico, soporta estilos de programación funcional, orientada a objetos e imperativa. Fuente: https://developer.mozilla.org/en-US/docs/Web/javascript ¿Qué es JavaScript? 11

Slide 13

Slide 13 text

@delaguilaluis JavaScript (JS) es un lenguaje ligero e interpretado, orientado a objetos con funciones de primera clase, más conocido como el lenguaje de script para páginas web, pero también usado en muchos entornos sin navegador, tales como node.js, Apache CouchDB y Adobe Acrobat. Es un lenguaje script multi-paradigma, basado en prototipos, dinámico, soporta estilos de programación funcional, orientada a objetos e imperativa. Fuente: https://developer.mozilla.org/en-US/docs/Web/javascript ¿Qué es JavaScript? 12

Slide 14

Slide 14 text

@delaguilaluis JavaScript (JS) es un lenguaje ligero e interpretado, orientado a objetos con funciones de primera clase, más conocido como el lenguaje de script para páginas web, pero también usado en muchos entornos sin navegador, tales como node.js, Apache CouchDB y Adobe Acrobat. Es un lenguaje script multi-paradigma, basado en prototipos, dinámico, soporta estilos de programación funcional, orientada a objetos e imperativa. Fuente: https://developer.mozilla.org/en-US/docs/Web/javascript ¿Qué es JavaScript? 13

Slide 15

Slide 15 text

@delaguilaluis JavaScript (JS) es un lenguaje ligero e interpretado, orientado a objetos con funciones de primera clase, más conocido como el lenguaje de script para páginas web, pero también usado en muchos entornos sin navegador, tales como node.js, Apache CouchDB y Adobe Acrobat. Es un lenguaje script multi-paradigma, basado en prototipos, dinámico, soporta estilos de programación funcional, orientada a objetos e imperativa. Fuente: https://developer.mozilla.org/en-US/docs/Web/javascript ¿Qué es JavaScript? 14

Slide 16

Slide 16 text

@delaguilaluis JavaScript (JS) es un lenguaje ligero e interpretado, orientado a objetos con funciones de primera clase, más conocido como el lenguaje de script para páginas web, pero también usado en muchos entornos sin navegador, tales como node.js, Apache CouchDB y Adobe Acrobat. Es un lenguaje script multi-paradigma, basado en prototipos, dinámico, soporta estilos de programación funcional, orientada a objetos e imperativa. Fuente: https://developer.mozilla.org/en-US/docs/Web/javascript ¿Qué es JavaScript? 15

Slide 17

Slide 17 text

@delaguilaluis JavaScript (JS) es un lenguaje ligero e interpretado, orientado a objetos con funciones de primera clase, más conocido como el lenguaje de script para páginas web, pero también usado en muchos entornos sin navegador, tales como node.js, Apache CouchDB y Adobe Acrobat. Es un lenguaje script multi-paradigma, basado en prototipos, dinámico, soporta estilos de programación funcional, orientada a objetos e imperativa. Fuente: https://developer.mozilla.org/en-US/docs/Web/javascript ¿Qué es JavaScript? 16

Slide 18

Slide 18 text

@delaguilaluis JavaScript (JS) es un lenguaje ligero e interpretado, orientado a objetos con funciones de primera clase, más conocido como el lenguaje de script para páginas web, pero también usado en muchos entornos sin navegador, tales como node.js, Apache CouchDB y Adobe Acrobat. Es un lenguaje script multi-paradigma, basado en prototipos, dinámico, soporta estilos de programación funcional, orientada a objetos e imperativa. Fuente: https://developer.mozilla.org/en-US/docs/Web/javascript ¿Qué es JavaScript? 17

Slide 19

Slide 19 text

Historia de JavaScript @delaguilaluis Fuente: https://en.wikipedia.org/wiki/JavaScript#History 18

Slide 20

Slide 20 text

@delaguilaluis Fuente: https://en.wikipedia.org/wiki/JavaScript#History Historia de JavaScript 19

Slide 21

Slide 21 text

Analogía: venta de hamburguesas @delaguilaluis 20

Slide 22

Slide 22 text

¡Genial! ¿Y ahora? @delaguilaluis ¿Qué se puede hacer con JavaScript? ¿Por qué es tan popular?1 ¿Por qué querría programar en JavaScript? ¿Qué tipo de scripts puedo hacer? 1: https://insights.stackoverflow.com/survey/2019 21

Slide 23

Slide 23 text

Declaración de variables @delaguilaluis • let • const “Block-scoped” 22

Slide 24

Slide 24 text

@delaguilaluis let edad = 29 edad = 30 30 let 23

Slide 25

Slide 25 text

@delaguilaluis const edad = 29 edad = 30 TypeError: invalid assignment to const `edad’ const pi = 3.14159 3.14159 const 24

Slide 26

Slide 26 text

@delaguilaluis const valor = 0 let mensaje if (valor === 0) { mensaje = 'hola' } else { mensaje = 'adiós' } mensaje hola Condicional if 25

Slide 27

Slide 27 text

@delaguilaluis const valor = 1 let mensaje if (valor === 0) { mensaje = 'hola' } else { mensaje = 'adiós' } mensaje adiós Condicional if 26

Slide 28

Slide 28 text

@delaguilaluis const valor = 2 let mensaje if (valor === 0) { mensaje = 'hola' } else if (valor === 1) { mensaje = 'adios' } else { mensaje = 'N/A' } mensaje N/A Condicional if 27

Slide 29

Slide 29 text

@delaguilaluis Números ⛓ Cadenas ☑ Booleanos Arreglos Objetos Funciones Tipos de dato 28

Slide 30

Slide 30 text

@delaguilaluis const a = 2 const b = 3 a + b 5 Tipos de dato: Number 29

Slide 31

Slide 31 text

@delaguilaluis const c = 10 const d = 3 const resultado = c / d 3.3333333333333335 resultado + 2 5.333333333333334 ! Tipos de dato: Number 30

Slide 32

Slide 32 text

@delaguilaluis let contador = 1 contador += 1 2 contador += 1 3 Tipos de dato: Number 31

Slide 33

Slide 33 text

@delaguilaluis const a = 3 const b = 4 const cuadradoA = a**2 9 const cuadradoB = a**2 16 const c = Math.sqrt(cuadradoA + cuadradoB) ⏩ 5 Fuente: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math Tipos de dato: Number 32

Slide 34

Slide 34 text

@delaguilaluis const sujeto = 'Pin Pon’ ⏰ const predicado = 'es un muñeco' Tipos de dato: String (cadena) 33

Slide 35

Slide 35 text

@delaguilaluis const sujeto = 'Pin Pon' const predicado = 'es un muñeco' const resultado = `${sujeto} ${predicado}, muy guapo y de cartón.` 'Pin Pon es un muñeco, muy guapo y de cartón.' Tipos de dato: String (cadena) 34

Slide 36

Slide 36 text

@delaguilaluis const sujeto = 'Pin Pon' const predicado = 'es un muñeco' const resultado = sujeto.repeat(3) Pin PonPin PonPin Pon Fuente: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String Tipos de dato: String (cadena) 35

Slide 37

Slide 37 text

@delaguilaluis const esMuñeco = true const esFeo = false const esDeCartón = true Tipos de dato: Boolean 36

Slide 38

Slide 38 text

@delaguilaluis Operadores: • AND: && • OR: || • NOT: ! Tipos de dato: Boolean 37

Slide 39

Slide 39 text

@delaguilaluis const esMuñeco = true const esFeo = false const esDeCartón = true const esPinPon = esMuñeco && !esFeo && esDeCartón true Tipos de dato: Boolean 38

Slide 40

Slide 40 text

@delaguilaluis const llora = false const haceAsí = false const esFarsante = llora || haceAsí Tipos de dato: Boolean 39

Slide 41

Slide 41 text

@delaguilaluis Boolean(false) Boolean(0) Boolean('') Boolean(null) ⏩ Boolean(undefined) ⏩ Boolean(NaN) ⏩ Fuente: https://developer.mozilla.org/en-US/docs/Glossary/Falsy Tipos de dato: Boolean 40

Slide 42

Slide 42 text

@delaguilaluis Fuente: http://logicayfunciones-fernando.blogspot.com/2012/04/funcion-imagen-y-preimagen.html Tipos de dato (?): Function 41

Slide 43

Slide 43 text

@delaguilaluis Fuente: https://www.wolframalpha.com/input/?i=x+%2B+1%3B+from+0+to+20 Tipos de dato (?): Function 42

Slide 44

Slide 44 text

@delaguilaluis Fuente: https://www.wolframalpha.com/input/?i=x%5E2%3B+from+0+to+20 Tipos de dato (?): Function 43

Slide 45

Slide 45 text

@delaguilaluis function sumarUno (x) { return x + 1 } function elevarAlCuadrado (x) { return x * x } Tipos de dato (?): Function 44

Slide 46

Slide 46 text

@delaguilaluis function sumarUno (x) { return x + 1 } Tipos de dato (?): Function 45

Slide 47

Slide 47 text

@delaguilaluis function sumarUno (x) { return x + 1 } Tipos de dato (?): Function 46

Slide 48

Slide 48 text

@delaguilaluis function sumarUno (x) { return x + 1 } Tipos de dato (?): Function 47

Slide 49

Slide 49 text

@delaguilaluis function sumarUno (x, z) { return x + z + 1 } Fuente: https://www.wolframalpha.com/input/?i=x+%2B+z+%2B+1 Tipos de dato (?): Function 48

Slide 50

Slide 50 text

@delaguilaluis function sumarUno (x, z) { return x + z + 1 } Fuente: https://www.wolframalpha.com/input/?i=x+%2B+z+%2B+1 Tipos de dato (?): Function 49

Slide 51

Slide 51 text

@delaguilaluis function sumarUno (x) { return x + 1 } Tipos de dato (?): Function 50

Slide 52

Slide 52 text

@delaguilaluis function sumarUno (x) { return x + 1 } Tipos de dato (?): Function 51

Slide 53

Slide 53 text

@delaguilaluis function sumarUno (x) { const resultado = x + 1 return resultado } Tipos de dato (?): Function 52

Slide 54

Slide 54 text

@delaguilaluis function sumarUno (x) { return x + 1 } Tipos de dato (?): Function 53

Slide 55

Slide 55 text

@delaguilaluis function sumarUno (x) { const resultado = x + 1 return resultado } Tipos de dato (?): Function 54

Slide 56

Slide 56 text

@delaguilaluis function sumarUno (x) { return x + 1 } sumarUno(2) 3 Tipos de dato (?): Function 55

Slide 57

Slide 57 text

@delaguilaluis function sumarUno (x) { x + 1 } sumarUno(2) undefined Tipos de dato (?): Function 56

Slide 58

Slide 58 text

@delaguilaluis const muñeco = { nombre: 'Pin Pon', esFeo: false, material: 'cartón', edad: 4, obtenerInicioDeCanción: function () { return 'Pin Pon es un muñeco' } } muñeco.nombre Pin Pon Tipos de dato: Object 57

Slide 59

Slide 59 text

@delaguilaluis const muñeco = { nombre: 'Pin Pon', esFeo: false, material: 'cartón', edad: 4, obtenerInicioDeCanción: function () { return 'Pin Pon es un muñeco' } } muñeco.obtenerInicioDeCanción() 'Pin Pon es un muñeco' Tipos de dato: Object 58

Slide 60

Slide 60 text

@delaguilaluis Math.sqrt window.prompt document.writeln console.log Tipos de dato: Object 59

Slide 61

Slide 61 text

@delaguilaluis function crearPinPon () { const nombre = 'Pin Pon' return { nombre: nombre, obtenerInicioDeCanción: function () { return `${nombre} es un muñeco` } } } const muñeco = crearPinPon() Tipos de dato: Object 60

Slide 62

Slide 62 text

@delaguilaluis function crearMuñeco (nombre) { return { nombre: nombre, obtenerInicioDeCanción: function () { return `${nombre} es un muñeco` } } } const muñeco = crearMuñeco('Chucky') muñeco.nombre Chucky Tipos de dato: Object 61

Slide 63

Slide 63 text

@delaguilaluis const tresPares = [2, 4, 6] const frutas = ['manzana', 'pera', 'limón', 'sandía’] const misc = [2, ‘pera’, crearMuñeco] frutas[0] manzana frutas[2] limón frutas.length 4 frutas[frutas.length -1] sandía Tipos de dato: Array (arreglo) 62

Slide 64

Slide 64 text

@delaguilaluis let a = null let b console.log(a) null console.log(b) undefined null y undefined 63

Slide 65

Slide 65 text

@delaguilaluis const bicicleta = { ruedas: 2, color: 'amarillo’, anidado: { a: { b: ‘hola’ } } } bicicleta.tamaño undefined null y undefined 64

Slide 66

Slide 66 text

@delaguilaluis const frutas = ['manzana', 'pera', 'limón', 'sandía’] const frutasMarketing = frutas.map(function (fruta) { return `${fruta} non GMO` }) [ "manzana non GMO", "pera non GMO", "limón non GMO", "sandía non GMO" ] const sinLimón = frutas.filter(function (fruta) { return fruta !== 'limón’ }) [ "manzana", "pera", "sandía" ] sinLimón.forEach(function (fruta) { console.log(`hay ${fruta}`) }) hay manzana hay pera hay sandía Métodos: Array 65

Slide 67

Slide 67 text

@delaguilaluis const todasJuntas = frutas.reduce(function (accumulator, fruta) { accumulator += `${fruta} ` return accumulator }, '') manzana pera limón sandía Métodos: Array 66

Slide 68

Slide 68 text

@delaguilaluis const números = [4, 8, 15, 16 , 23, 42] const suma = números.reduce(function (accumulator, número) { accumulator += número return accumulator }, 0) 108 Métodos: Array 67

Slide 69

Slide 69 text

@delaguilaluis 1 == '1' true '1' == 1 true null == undefined true eqeq 68

Slide 70

Slide 70 text

@delaguilaluis 1 === '1' false '1' === 1 false null === undefined false eqeq 69

Slide 71

Slide 71 text

@delaguilaluis for (let i = 0; i < 10; i += 1) { console.log(`¡Hola, ${i}!`) } Ciclos: for 70

Slide 72

Slide 72 text

@delaguilaluis const sobrinos = ['Hugo', 'Paco', 'Luis'] for (let i = 0; i < 3; i += 1) { console.log(`¡Hola, ${sobrinos[i]}!`) } Ciclos: for 71

Slide 73

Slide 73 text

@delaguilaluis for (let i = 9; i >= 0; i -= 1) { console.log(`¡Hola, ${i}!`) } Ciclos: for 72

Slide 74

Slide 74 text

@delaguilaluis let i = 0 while (i < 10) { i += 1 console.log(`¡Hola, ${i}!`) } Ciclos: while 73

Slide 75

Slide 75 text

@delaguilaluis let i = 0 do { console.log(`¡Hola, ${i}!`) i += 1 } while (i < 1) Ciclos: do … while 74

Slide 76

Slide 76 text

@delaguilaluis ¡Manos a la obra! ! 75

Slide 77

Slide 77 text

@delaguilaluis ¡Gracias! 76