$30 off During Our Annual Pro Sale. View Details »

Web Development: Sesión 3 (JavaScript)

Web Development: Sesión 3 (JavaScript)

Sintaxis y conceptos básicos de JavaScript

Luis Del Aguila

April 29, 2020
Tweet

More Decks by Luis Del Aguila

Other Decks in Programming

Transcript

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

    View Slide

  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

    View Slide

  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

    View Slide

  4. REPL
    @delaguilaluis
    3

    View Slide

  5. REPL
    @delaguilaluis
    Read
    Eval
    Print
    Loop
    4

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  76. @delaguilaluis
    ¡Manos a la obra!
    !
    75

    View Slide

  77. @delaguilaluis
    ¡Gracias!
    76

    View Slide