Web Development: Sesión 3 (JavaScript)

Web Development: Sesión 3 (JavaScript)

Sintaxis y conceptos básicos de JavaScript

E4320280d01039bbe4a021b12e8eac8b?s=128

Luis Del Aguila

April 29, 2020
Tweet

Transcript

  1. Web Development: Sesión 3 ¡Está viva! (con JavaScript) Por Luis

    Andrés Del Águila @delaguilaluis @nodeschoolgt
  2. ¿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
  3. 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
  4. REPL @delaguilaluis 3

  5. REPL @delaguilaluis Read Eval Print Loop 4

  6. 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
  7. ¡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
  8. ¿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
  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 8
  10. ¿Qué es JavaScript? @delaguilaluis ???????????????????????????????????????????????????????? ???????????????????????????????????????????????????????? ???????????????????????????????????????????????????????? ???????????????????????????????????????????????????????? ???????????????????????????????????????????????????????? ????????????????????????????????????????????????????????

    ?????????????????????????? Fuente: https://developer.mozilla.org/en-US/docs/Web/javascript 9
  11. ¿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
  12. @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
  13. @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
  14. @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
  15. @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
  16. @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
  17. @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
  18. @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
  19. Historia de JavaScript @delaguilaluis Fuente: https://en.wikipedia.org/wiki/JavaScript#History 18

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

  21. Analogía: venta de hamburguesas @delaguilaluis 20

  22. ¡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
  23. Declaración de variables @delaguilaluis • let • const “Block-scoped” 22

  24. @delaguilaluis let edad = 29 edad = 30 30 let

    23
  25. @delaguilaluis const edad = 29 edad = 30 TypeError: invalid

    assignment to const `edad’ const pi = 3.14159 3.14159 const 24
  26. @delaguilaluis const valor = 0 let mensaje if (valor ===

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

    0) { mensaje = 'hola' } else { mensaje = 'adiós' } mensaje adiós Condicional if 26
  28. @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
  29. @delaguilaluis Números ⛓ Cadenas ☑ Booleanos Arreglos Objetos Funciones Tipos

    de dato 28
  30. @delaguilaluis const a = 2 const b = 3 a

    + b 5 Tipos de dato: Number 29
  31. @delaguilaluis const c = 10 const d = 3 const

    resultado = c / d 3.3333333333333335 resultado + 2 5.333333333333334 ! Tipos de dato: Number 30
  32. @delaguilaluis let contador = 1 contador += 1 2 contador

    += 1 3 Tipos de dato: Number 31
  33. @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
  34. @delaguilaluis const sujeto = 'Pin Pon’ ⏰ const predicado =

    'es un muñeco' Tipos de dato: String (cadena) 33
  35. @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
  36. @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
  37. @delaguilaluis const esMuñeco = true const esFeo = false const

    esDeCartón = true Tipos de dato: Boolean 36
  38. @delaguilaluis Operadores: • AND: && • OR: || • NOT:

    ! Tipos de dato: Boolean 37
  39. @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
  40. @delaguilaluis const llora = false const haceAsí = false const

    esFarsante = llora || haceAsí Tipos de dato: Boolean 39
  41. @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
  42. @delaguilaluis Fuente: http://logicayfunciones-fernando.blogspot.com/2012/04/funcion-imagen-y-preimagen.html Tipos de dato (?): Function 41

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

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

  45. @delaguilaluis function sumarUno (x) { return x + 1 }

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

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

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

    Tipos de dato (?): Function 47
  49. @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
  50. @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
  51. @delaguilaluis function sumarUno (x) { return x + 1 }

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

    Tipos de dato (?): Function 51
  53. @delaguilaluis function sumarUno (x) { const resultado = x +

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

    Tipos de dato (?): Function 53
  55. @delaguilaluis function sumarUno (x) { const resultado = x +

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

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

    undefined Tipos de dato (?): Function 56
  58. @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
  59. @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
  60. @delaguilaluis Math.sqrt window.prompt document.writeln console.log Tipos de dato: Object 59

  61. @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
  62. @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
  63. @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
  64. @delaguilaluis let a = null let b console.log(a) null console.log(b)

    undefined null y undefined 63
  65. @delaguilaluis const bicicleta = { ruedas: 2, color: 'amarillo’, anidado:

    { a: { b: ‘hola’ } } } bicicleta.tamaño undefined null y undefined 64
  66. @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
  67. @delaguilaluis const todasJuntas = frutas.reduce(function (accumulator, fruta) { accumulator +=

    `${fruta} ` return accumulator }, '') manzana pera limón sandía Métodos: Array 66
  68. @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
  69. @delaguilaluis 1 == '1' true '1' == 1 true null

    == undefined true eqeq 68
  70. @delaguilaluis 1 === '1' false '1' === 1 false null

    === undefined false eqeq 69
  71. @delaguilaluis for (let i = 0; i < 10; i

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

    = 0; i < 3; i += 1) { console.log(`¡Hola, ${sobrinos[i]}!`) } Ciclos: for 71
  73. @delaguilaluis for (let i = 9; i >= 0; i

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

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

    += 1 } while (i < 1) Ciclos: do … while 74
  76. @delaguilaluis ¡Manos a la obra! ! 75

  77. @delaguilaluis ¡Gracias! 76