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. 1.

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

    Andrés Del Águila @delaguilaluis @nodeschoolgt
  2. 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. 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. 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
  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
  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
  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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 25.

    @delaguilaluis const edad = 29 edad = 30 TypeError: invalid

    assignment to const `edad’ const pi = 3.14159 3.14159 const 24
  18. 26.

    @delaguilaluis const valor = 0 let mensaje if (valor ===

    0) { mensaje = 'hola' } else { mensaje = 'adiós' } mensaje hola Condicional if 25
  19. 27.

    @delaguilaluis const valor = 1 let mensaje if (valor ===

    0) { mensaje = 'hola' } else { mensaje = 'adiós' } mensaje adiós Condicional if 26
  20. 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
  21. 30.

    @delaguilaluis const a = 2 const b = 3 a

    + b 5 Tipos de dato: Number 29
  22. 31.

    @delaguilaluis const c = 10 const d = 3 const

    resultado = c / d 3.3333333333333335 resultado + 2 5.333333333333334 ! Tipos de dato: Number 30
  23. 32.
  24. 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
  25. 34.

    @delaguilaluis const sujeto = 'Pin Pon’ ⏰ const predicado =

    'es un muñeco' Tipos de dato: String (cadena) 33
  26. 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
  27. 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
  28. 37.

    @delaguilaluis const esMuñeco = true const esFeo = false const

    esDeCartón = true Tipos de dato: Boolean 36
  29. 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
  30. 40.

    @delaguilaluis const llora = false const haceAsí = false const

    esFarsante = llora || haceAsí Tipos de dato: Boolean 39
  31. 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
  32. 45.

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

    function elevarAlCuadrado (x) { return x * x } Tipos de dato (?): Function 44
  33. 46.
  34. 47.
  35. 48.
  36. 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
  37. 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
  38. 51.
  39. 52.
  40. 53.

    @delaguilaluis function sumarUno (x) { const resultado = x +

    1 return resultado } Tipos de dato (?): Function 52
  41. 54.
  42. 55.

    @delaguilaluis function sumarUno (x) { const resultado = x +

    1 return resultado } Tipos de dato (?): Function 54
  43. 56.

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

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

    @delaguilaluis function sumarUno (x) { x + 1 } sumarUno(2)

    undefined Tipos de dato (?): Function 56
  45. 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
  46. 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
  47. 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
  48. 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
  49. 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
  50. 65.

    @delaguilaluis const bicicleta = { ruedas: 2, color: 'amarillo’, anidado:

    { a: { b: ‘hola’ } } } bicicleta.tamaño undefined null y undefined 64
  51. 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
  52. 67.

    @delaguilaluis const todasJuntas = frutas.reduce(function (accumulator, fruta) { accumulator +=

    `${fruta} ` return accumulator }, '') manzana pera limón sandía Métodos: Array 66
  53. 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
  54. 69.
  55. 70.
  56. 71.

    @delaguilaluis for (let i = 0; i < 10; i

    += 1) { console.log(`¡Hola, ${i}!`) } Ciclos: for 70
  57. 72.

    @delaguilaluis const sobrinos = ['Hugo', 'Paco', 'Luis'] for (let i

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

    @delaguilaluis for (let i = 9; i >= 0; i

    -= 1) { console.log(`¡Hola, ${i}!`) } Ciclos: for 72
  59. 74.

    @delaguilaluis let i = 0 while (i < 10) {

    i += 1 console.log(`¡Hola, ${i}!`) } Ciclos: while 73
  60. 75.

    @delaguilaluis let i = 0 do { console.log(`¡Hola, ${i}!`) i

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