Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
  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. 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
  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
  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
  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
  8. ¿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
  9. @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
  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? 12
  11. @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
  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? 14
  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? 15
  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? 16
  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? 17
  16. ¡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
  17. @delaguilaluis const edad = 29 edad = 30 TypeError: invalid

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

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

    0) { mensaje = 'hola' } else { mensaje = 'adiós' } mensaje adiós Condicional if 26
  20. @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
  21. @delaguilaluis const a = 2 const b = 3 a

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

    resultado = c / d 3.3333333333333335 resultado + 2 5.333333333333334 ! Tipos de dato: Number 30
  23. @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
  24. @delaguilaluis const sujeto = 'Pin Pon’ ⏰ const predicado =

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

    esDeCartón = true Tipos de dato: Boolean 36
  28. @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
  29. @delaguilaluis const llora = false const haceAsí = false const

    esFarsante = llora || haceAsí Tipos de dato: Boolean 39
  30. @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
  31. @delaguilaluis function sumarUno (x) { return x + 1 }

    function elevarAlCuadrado (x) { return x * x } Tipos de dato (?): Function 44
  32. @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
  33. @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
  34. @delaguilaluis function sumarUno (x) { const resultado = x +

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

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

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

    undefined Tipos de dato (?): Function 56
  38. @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
  39. @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
  40. @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
  41. @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
  42. @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
  43. @delaguilaluis const bicicleta = { ruedas: 2, color: 'amarillo’, anidado:

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

    `${fruta} ` return accumulator }, '') manzana pera limón sandía Métodos: Array 66
  46. @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
  47. @delaguilaluis for (let i = 0; i < 10; i

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

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

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

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

    += 1 } while (i < 1) Ciclos: do … while 74