Web Development: Sesión 3 (JavaScript)

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

¿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

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

REPL @delaguilaluis 3

REPL @delaguilaluis Read Eval Print Loop 4

Una segunda probadita @delaguilaluis 1. Abran su editor de texto
favorito 2. Escriban el siguiente código (o cópienlo del chat) <html><body><script> const subject = window.prompt('¿Cuál es tu nombre?') || 'mundo' document.writeln(`¡Hola, ${subject}!`) </script></body></html> 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

¡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

¿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

¿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

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

¿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

@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

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

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

Analogía: venta de hamburguesas @delaguilaluis 20

¡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

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

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

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

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

0) { mensaje = 'hola' } else { mensaje = 'adiós' } mensaje adiós Condicional if 26

0) { mensaje = 'hola' } else if (valor === 1) { mensaje = 'adios' } else { mensaje = 'N/A' } mensaje N/A Condicional if 27

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

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

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

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

@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

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

@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

@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

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

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

@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

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

@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

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

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

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

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

Tipos de dato (?): Function 45

@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

@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

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

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

sumarUno(2) 3 Tipos de dato (?): Function 55

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

@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

@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

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

@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

@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

@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

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

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

@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

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

@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

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

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

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

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

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

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

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

@delaguilaluis ¡Manos a la obra! ! 75

@delaguilaluis ¡Gracias! 76

Web Development: Sesión 3 (JavaScript)

Web Development: Sesión 3 (JavaScript)

More Decks by Luis Del Aguila

Other Decks in Programming

Featured

Transcript