SlideShare una empresa de Scribd logo
1 de 17
Descargar para leer sin conexión
Javascript
CONSTRUCCIÓN DE
INTERFACES DE USUARIO
1er Cuatrimestre de 2019
Consideraciones
◎ Esta clase es una presentación de Javascript.
◎ No es una guía exhaustiva.
◎ Todo nuevo lenguaje se aprende codeando.
◎ Cuando surjan dudas primero vayan a
https://developer.mozilla.org/es/docs/Web/JavaScript
◎ Y tienen las Prácticas y los TPs para codear.
2
Acerca de Javascript
◎ Lenguaje de Propósito General
◎ Multi Plataforma
◎ Tipado dinámico
3
◎ JavaScript fue desarrollado originalmente por Brendan
Eich de Netscape con el nombre de Mocha, el cual fue
renombrado posteriormente a LiveScript, para
finalmente quedar como JavaScript.
● Variables
○ Mutables
var a = "Se está dejando de usar"
let a = "para usar let"
○ Inmutables
const b = 1
Un poco de sintaxis
4
Un poco de sintaxis
● Objeto: Es un conjunto de clave valor encerrado entre
llaves
■ { x: 1, y: 2 }
● Lista: Es un conjunto de valores encerrados entre
corchetes
○ [1, 2]
○ [1, ‘2’, ‘tres’, { x: 1, y: 2 }]
5
Un poco de sintaxis
● Strings
○ “comillas dobles”
○ ‘Comillas simples’
○ `Por último las comillas francesas`
● La última forma se utiliza para hacer String
interpolation
○ `Hello ${name}`
6
Un poco de sintaxis
● Funciones
function sayHello(name) {
return `Hello ${name}`
}
const sayHello = name => `Hello ${name}`
● Tiene default parameters
function sayHello(name = ’World’) {
return `Hello ${name}`
} 7
class Gretter {
constructor(name) {
this.name = name
}
sayHello() {
return `Hello ${this.name}`
}
}
Un poco de sintaxis
8
● Igualdades
○ Débil o relajada
const one = 1
const anotherOne = "1"
console.log(blue == sameBlue) // true
○ Estricta
const one = 1
const anotherOne = "1"
console.log(blue === sameBlue) // false
Un poco de sintaxis
9
● If clasico
let max
if (a > b) {
max = a
} else {
max = b
}
● If ternario
const max = (a > b) ? a : b
Un poco de sintaxis
10
11
Operaciones con Colecciones
const list =[1, 2, 3]
Filter list.filter( v => v > 2 ) // [3]
Map list.map(v => v * 2 ) // [2, 4, 6]
Every list.every(v => v > 2 ) // false
Find list.find(v => v > 3) // undefined
First, Last list[0] // 1
Sorted list.sort() // [1, 2, 3]
Libreria para agregar mas funciones a las listas
https://lodash.com/docs/4.17.11
12
Request
Para hacer request vamos a utilizar una librería
llamada Axios
const axios = require('axios');
const ___ = axios.get('https://randomuser.me/api/')
console.log(___)
13
Promises
Una Promesa es un proxy para un valor no
necesariamente conocido en el momento que
es creada la promesa.
Las Promesas tienen tres estados:
● Pendiente (pending)
● Cumplida (fulfilled)
● Rechazada (rejected)
14
Promises
const axios = require('axios');
const ___ = axios.get('https://randomuser.me/api/')
.then(data => console.log(data))
.catch(error => console.log(error))
15
Spread
Permite a un elemento iterable tal como un arreglo ser expandido en
lugares donde cero o más argumentos (para llamadas de función) ó
elementos (para Array) son esperados, o a un objeto ser expandido en
lugares donde cero o más pares de valores clave son esperados.
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
16
17

Más contenido relacionado

Similar a 6.2. js

JRuby: Ruby en un mundo enterprise RubyConf Uruguay 2011
JRuby: Ruby en un mundo enterprise RubyConf Uruguay 2011JRuby: Ruby en un mundo enterprise RubyConf Uruguay 2011
JRuby: Ruby en un mundo enterprise RubyConf Uruguay 2011Jano González
 
JRuby: Ruby en un mundo enterprise
JRuby: Ruby en un mundo enterpriseJRuby: Ruby en un mundo enterprise
JRuby: Ruby en un mundo enterpriseJano González
 
Desarrollo web en Nodejs con Pillars por Chelo Quilón
Desarrollo web en Nodejs con Pillars por Chelo QuilónDesarrollo web en Nodejs con Pillars por Chelo Quilón
Desarrollo web en Nodejs con Pillars por Chelo Quilónbetabeers
 
Presentación Java Evolution - GlobalLogic Club
Presentación Java Evolution - GlobalLogic ClubPresentación Java Evolution - GlobalLogic Club
Presentación Java Evolution - GlobalLogic ClubGlobalLogic Latinoamérica
 
Conceptos básicos de un lenguaje de programación
Conceptos básicos de un lenguaje de programaciónConceptos básicos de un lenguaje de programación
Conceptos básicos de un lenguaje de programaciónEdison López Díaz
 
Javascript Básico
Javascript BásicoJavascript Básico
Javascript Básicocamposer
 
Programación Políglota en la JVM
Programación Políglota en la JVMProgramación Políglota en la JVM
Programación Políglota en la JVMJano González
 
Aprendiendo a usar NDK Android Day(castellano)
Aprendiendo a usar NDK Android Day(castellano)Aprendiendo a usar NDK Android Day(castellano)
Aprendiendo a usar NDK Android Day(castellano)videos
 
Realizando Pruebas en la JVM con Velocidad y Eficacia
Realizando Pruebas en la JVM con Velocidad y EficaciaRealizando Pruebas en la JVM con Velocidad y Eficacia
Realizando Pruebas en la JVM con Velocidad y EficaciaAndres Almiray
 

Similar a 6.2. js (20)

JRuby: Ruby en un mundo enterprise RubyConf Uruguay 2011
JRuby: Ruby en un mundo enterprise RubyConf Uruguay 2011JRuby: Ruby en un mundo enterprise RubyConf Uruguay 2011
JRuby: Ruby en un mundo enterprise RubyConf Uruguay 2011
 
Jano Gonzalez - jruby
Jano Gonzalez - jrubyJano Gonzalez - jruby
Jano Gonzalez - jruby
 
JRuby: Ruby en un mundo enterprise
JRuby: Ruby en un mundo enterpriseJRuby: Ruby en un mundo enterprise
JRuby: Ruby en un mundo enterprise
 
Desarrollo web en Nodejs con Pillars por Chelo Quilón
Desarrollo web en Nodejs con Pillars por Chelo QuilónDesarrollo web en Nodejs con Pillars por Chelo Quilón
Desarrollo web en Nodejs con Pillars por Chelo Quilón
 
Presentación Java Evolution - GlobalLogic Club
Presentación Java Evolution - GlobalLogic ClubPresentación Java Evolution - GlobalLogic Club
Presentación Java Evolution - GlobalLogic Club
 
Tema i
Tema iTema i
Tema i
 
Guía JavaScript
Guía JavaScriptGuía JavaScript
Guía JavaScript
 
Ruby para Java Developers
Ruby para Java DevelopersRuby para Java Developers
Ruby para Java Developers
 
Conceptos básicos de un lenguaje de programación
Conceptos básicos de un lenguaje de programaciónConceptos básicos de un lenguaje de programación
Conceptos básicos de un lenguaje de programación
 
Javascript Básico
Javascript BásicoJavascript Básico
Javascript Básico
 
Programación Políglota en la JVM
Programación Políglota en la JVMProgramación Políglota en la JVM
Programación Políglota en la JVM
 
Ruby
Ruby Ruby
Ruby
 
Ruby 01
Ruby 01Ruby 01
Ruby 01
 
Programacion en C#
Programacion en C#Programacion en C#
Programacion en C#
 
Java
JavaJava
Java
 
Java
JavaJava
Java
 
JRuby al Rescate de J2EE
JRuby al Rescate de J2EEJRuby al Rescate de J2EE
JRuby al Rescate de J2EE
 
Aprendiendo a usar NDK Android Day(castellano)
Aprendiendo a usar NDK Android Day(castellano)Aprendiendo a usar NDK Android Day(castellano)
Aprendiendo a usar NDK Android Day(castellano)
 
4 Introducción al lenguaje Scala
4 Introducción al lenguaje Scala4 Introducción al lenguaje Scala
4 Introducción al lenguaje Scala
 
Realizando Pruebas en la JVM con Velocidad y Eficacia
Realizando Pruebas en la JVM con Velocidad y EficaciaRealizando Pruebas en la JVM con Velocidad y Eficacia
Realizando Pruebas en la JVM con Velocidad y Eficacia
 

Más de xavazque2

258939538 dumping
258939538 dumping258939538 dumping
258939538 dumpingxavazque2
 
380914324 poo-kotlin
380914324 poo-kotlin380914324 poo-kotlin
380914324 poo-kotlinxavazque2
 
146817358 android
146817358 android146817358 android
146817358 androidxavazque2
 
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlinCurso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlinxavazque2
 
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juegoxavazque2
 
325940441 motion-ui
325940441 motion-ui325940441 motion-ui
325940441 motion-uixavazque2
 
371081023 curso-desarrollo-android
371081023 curso-desarrollo-android371081023 curso-desarrollo-android
371081023 curso-desarrollo-androidxavazque2
 
4.1. validaciones-y-excepciones
4.1. validaciones-y-excepciones4.1. validaciones-y-excepciones
4.1. validaciones-y-excepcionesxavazque2
 
3.1 mvc-mvvm-app model-binding
3.1 mvc-mvvm-app model-binding3.1 mvc-mvvm-app model-binding
3.1 mvc-mvvm-app model-bindingxavazque2
 
5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_http5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_httpxavazque2
 
435338801 programacion-mobile-android
435338801 programacion-mobile-android435338801 programacion-mobile-android
435338801 programacion-mobile-androidxavazque2
 
457126889 android-pdf
457126889 android-pdf457126889 android-pdf
457126889 android-pdfxavazque2
 
266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventor266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventorxavazque2
 
7. react js-1
7. react js-17. react js-1
7. react js-1xavazque2
 
484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdf484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdfxavazque2
 
484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdf484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdfxavazque2
 
2.1. arena-y-binding
2.1. arena-y-binding2.1. arena-y-binding
2.1. arena-y-bindingxavazque2
 
411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdf411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdfxavazque2
 

Más de xavazque2 (20)

258939538 dumping
258939538 dumping258939538 dumping
258939538 dumping
 
380914324 poo-kotlin
380914324 poo-kotlin380914324 poo-kotlin
380914324 poo-kotlin
 
146817358 android
146817358 android146817358 android
146817358 android
 
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlinCurso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
 
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
 
325940441 motion-ui
325940441 motion-ui325940441 motion-ui
325940441 motion-ui
 
371081023 curso-desarrollo-android
371081023 curso-desarrollo-android371081023 curso-desarrollo-android
371081023 curso-desarrollo-android
 
4.1. validaciones-y-excepciones
4.1. validaciones-y-excepciones4.1. validaciones-y-excepciones
4.1. validaciones-y-excepciones
 
3.1 mvc-mvvm-app model-binding
3.1 mvc-mvvm-app model-binding3.1 mvc-mvvm-app model-binding
3.1 mvc-mvvm-app model-binding
 
5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_http5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_http
 
435338801 programacion-mobile-android
435338801 programacion-mobile-android435338801 programacion-mobile-android
435338801 programacion-mobile-android
 
457126889 android-pdf
457126889 android-pdf457126889 android-pdf
457126889 android-pdf
 
266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventor266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventor
 
7. react js-1
7. react js-17. react js-1
7. react js-1
 
Tp1
Tp1Tp1
Tp1
 
484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdf484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdf
 
484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdf484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdf
 
5.layouts
5.layouts5.layouts
5.layouts
 
2.1. arena-y-binding
2.1. arena-y-binding2.1. arena-y-binding
2.1. arena-y-binding
 
411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdf411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdf
 

Último

BUSCADORES DE INTERNET (Universidad de Sonora).
BUSCADORES DE INTERNET (Universidad de Sonora).BUSCADORES DE INTERNET (Universidad de Sonora).
BUSCADORES DE INTERNET (Universidad de Sonora).jcaballerosamayoa
 
Chat GPT para la educación Latinoamerica
Chat GPT para la educación LatinoamericaChat GPT para la educación Latinoamerica
Chat GPT para la educación LatinoamericaEdwinGarca59
 
Tipos de Datos de Microsoft Access-JOEL GARCIA.pptx
Tipos de Datos de Microsoft Access-JOEL GARCIA.pptxTipos de Datos de Microsoft Access-JOEL GARCIA.pptx
Tipos de Datos de Microsoft Access-JOEL GARCIA.pptxJOELGARCIA849853
 
Actividad 6/Las TIC en la Vida Cotidiana.
Actividad 6/Las TIC en la Vida Cotidiana.Actividad 6/Las TIC en la Vida Cotidiana.
Actividad 6/Las TIC en la Vida Cotidiana.241534381
 
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...dramosbrise1403
 
Desarrollo del Dominio del Internet - Estrada
Desarrollo del Dominio del Internet - EstradaDesarrollo del Dominio del Internet - Estrada
Desarrollo del Dominio del Internet - EstradaRicardoEstrada90
 
Electricidad Libro compendio de temas estudiados.docx
Electricidad Libro compendio de temas estudiados.docxElectricidad Libro compendio de temas estudiados.docx
Electricidad Libro compendio de temas estudiados.docxCsarNlsonMrquezContr
 
Imágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la informaciónImágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la informaciónUniversidad de Sonora
 
innovacion banking & warehouse 2024 blog
innovacion banking & warehouse 2024 bloginnovacion banking & warehouse 2024 blog
innovacion banking & warehouse 2024 blogManuel Diaz
 
Uso de las TIC en la vida cotidiana .
Uso de las TIC en la vida cotidiana       .Uso de las TIC en la vida cotidiana       .
Uso de las TIC en la vida cotidiana .itzyrivera61103
 
editorial de informática de los sueños.docx
editorial de informática de los sueños.docxeditorial de informática de los sueños.docx
editorial de informática de los sueños.docxssusere34b451
 
Redes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdfRedes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdfJosAndrRosarioVzquez
 
Introduccion-a-la-electronica-industrial.pptx
Introduccion-a-la-electronica-industrial.pptxIntroduccion-a-la-electronica-industrial.pptx
Introduccion-a-la-electronica-industrial.pptxcj12paz
 
el uso de las TIC en la vida cotidiana.pptx
el uso de las TIC en la vida cotidiana.pptxel uso de las TIC en la vida cotidiana.pptx
el uso de las TIC en la vida cotidiana.pptx221112876
 
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUALJORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUALGuadalinfoHuscarGuad
 
herramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el temaherramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el temaJadeVilcscordova
 
Tipos de datos en Microsoft Access de Base de Datos
Tipos de datos en Microsoft Access de Base de DatosTipos de datos en Microsoft Access de Base de Datos
Tipos de datos en Microsoft Access de Base de DatosYOMIRAVILLARREAL1
 
Ejercicio 1 periodo 2 de Tecnología 2024
Ejercicio 1 periodo 2 de Tecnología 2024Ejercicio 1 periodo 2 de Tecnología 2024
Ejercicio 1 periodo 2 de Tecnología 2024NicolleAndrade7
 
De Olmos Santiago_Dolores _ M1S3AI6.pptx
De Olmos Santiago_Dolores _ M1S3AI6.pptxDe Olmos Santiago_Dolores _ M1S3AI6.pptx
De Olmos Santiago_Dolores _ M1S3AI6.pptxdoloresolmosantiago
 
Navegadores de internet - Nuevas Tecnologías de la Información y la Comunicación
Navegadores de internet - Nuevas Tecnologías de la Información y la ComunicaciónNavegadores de internet - Nuevas Tecnologías de la Información y la Comunicación
Navegadores de internet - Nuevas Tecnologías de la Información y la ComunicaciónAntonia Yamilet Perez Palomares
 

Último (20)

BUSCADORES DE INTERNET (Universidad de Sonora).
BUSCADORES DE INTERNET (Universidad de Sonora).BUSCADORES DE INTERNET (Universidad de Sonora).
BUSCADORES DE INTERNET (Universidad de Sonora).
 
Chat GPT para la educación Latinoamerica
Chat GPT para la educación LatinoamericaChat GPT para la educación Latinoamerica
Chat GPT para la educación Latinoamerica
 
Tipos de Datos de Microsoft Access-JOEL GARCIA.pptx
Tipos de Datos de Microsoft Access-JOEL GARCIA.pptxTipos de Datos de Microsoft Access-JOEL GARCIA.pptx
Tipos de Datos de Microsoft Access-JOEL GARCIA.pptx
 
Actividad 6/Las TIC en la Vida Cotidiana.
Actividad 6/Las TIC en la Vida Cotidiana.Actividad 6/Las TIC en la Vida Cotidiana.
Actividad 6/Las TIC en la Vida Cotidiana.
 
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
PRÁCTICA Nº 4: “Análisis de secuencias del ADN con el software BioEdit y uso ...
 
Desarrollo del Dominio del Internet - Estrada
Desarrollo del Dominio del Internet - EstradaDesarrollo del Dominio del Internet - Estrada
Desarrollo del Dominio del Internet - Estrada
 
Electricidad Libro compendio de temas estudiados.docx
Electricidad Libro compendio de temas estudiados.docxElectricidad Libro compendio de temas estudiados.docx
Electricidad Libro compendio de temas estudiados.docx
 
Imágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la informaciónImágenes digitales: Calidad de la información
Imágenes digitales: Calidad de la información
 
innovacion banking & warehouse 2024 blog
innovacion banking & warehouse 2024 bloginnovacion banking & warehouse 2024 blog
innovacion banking & warehouse 2024 blog
 
Uso de las TIC en la vida cotidiana .
Uso de las TIC en la vida cotidiana       .Uso de las TIC en la vida cotidiana       .
Uso de las TIC en la vida cotidiana .
 
editorial de informática de los sueños.docx
editorial de informática de los sueños.docxeditorial de informática de los sueños.docx
editorial de informática de los sueños.docx
 
Redes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdfRedes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdf
 
Introduccion-a-la-electronica-industrial.pptx
Introduccion-a-la-electronica-industrial.pptxIntroduccion-a-la-electronica-industrial.pptx
Introduccion-a-la-electronica-industrial.pptx
 
el uso de las TIC en la vida cotidiana.pptx
el uso de las TIC en la vida cotidiana.pptxel uso de las TIC en la vida cotidiana.pptx
el uso de las TIC en la vida cotidiana.pptx
 
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUALJORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
 
herramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el temaherramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el tema
 
Tipos de datos en Microsoft Access de Base de Datos
Tipos de datos en Microsoft Access de Base de DatosTipos de datos en Microsoft Access de Base de Datos
Tipos de datos en Microsoft Access de Base de Datos
 
Ejercicio 1 periodo 2 de Tecnología 2024
Ejercicio 1 periodo 2 de Tecnología 2024Ejercicio 1 periodo 2 de Tecnología 2024
Ejercicio 1 periodo 2 de Tecnología 2024
 
De Olmos Santiago_Dolores _ M1S3AI6.pptx
De Olmos Santiago_Dolores _ M1S3AI6.pptxDe Olmos Santiago_Dolores _ M1S3AI6.pptx
De Olmos Santiago_Dolores _ M1S3AI6.pptx
 
Navegadores de internet - Nuevas Tecnologías de la Información y la Comunicación
Navegadores de internet - Nuevas Tecnologías de la Información y la ComunicaciónNavegadores de internet - Nuevas Tecnologías de la Información y la Comunicación
Navegadores de internet - Nuevas Tecnologías de la Información y la Comunicación
 

6.2. js

  • 1. Javascript CONSTRUCCIÓN DE INTERFACES DE USUARIO 1er Cuatrimestre de 2019
  • 2. Consideraciones ◎ Esta clase es una presentación de Javascript. ◎ No es una guía exhaustiva. ◎ Todo nuevo lenguaje se aprende codeando. ◎ Cuando surjan dudas primero vayan a https://developer.mozilla.org/es/docs/Web/JavaScript ◎ Y tienen las Prácticas y los TPs para codear. 2
  • 3. Acerca de Javascript ◎ Lenguaje de Propósito General ◎ Multi Plataforma ◎ Tipado dinámico 3 ◎ JavaScript fue desarrollado originalmente por Brendan Eich de Netscape con el nombre de Mocha, el cual fue renombrado posteriormente a LiveScript, para finalmente quedar como JavaScript.
  • 4. ● Variables ○ Mutables var a = "Se está dejando de usar" let a = "para usar let" ○ Inmutables const b = 1 Un poco de sintaxis 4
  • 5. Un poco de sintaxis ● Objeto: Es un conjunto de clave valor encerrado entre llaves ■ { x: 1, y: 2 } ● Lista: Es un conjunto de valores encerrados entre corchetes ○ [1, 2] ○ [1, ‘2’, ‘tres’, { x: 1, y: 2 }] 5
  • 6. Un poco de sintaxis ● Strings ○ “comillas dobles” ○ ‘Comillas simples’ ○ `Por último las comillas francesas` ● La última forma se utiliza para hacer String interpolation ○ `Hello ${name}` 6
  • 7. Un poco de sintaxis ● Funciones function sayHello(name) { return `Hello ${name}` } const sayHello = name => `Hello ${name}` ● Tiene default parameters function sayHello(name = ’World’) { return `Hello ${name}` } 7
  • 8. class Gretter { constructor(name) { this.name = name } sayHello() { return `Hello ${this.name}` } } Un poco de sintaxis 8
  • 9. ● Igualdades ○ Débil o relajada const one = 1 const anotherOne = "1" console.log(blue == sameBlue) // true ○ Estricta const one = 1 const anotherOne = "1" console.log(blue === sameBlue) // false Un poco de sintaxis 9
  • 10. ● If clasico let max if (a > b) { max = a } else { max = b } ● If ternario const max = (a > b) ? a : b Un poco de sintaxis 10
  • 11. 11 Operaciones con Colecciones const list =[1, 2, 3] Filter list.filter( v => v > 2 ) // [3] Map list.map(v => v * 2 ) // [2, 4, 6] Every list.every(v => v > 2 ) // false Find list.find(v => v > 3) // undefined First, Last list[0] // 1 Sorted list.sort() // [1, 2, 3] Libreria para agregar mas funciones a las listas https://lodash.com/docs/4.17.11
  • 12. 12
  • 13. Request Para hacer request vamos a utilizar una librería llamada Axios const axios = require('axios'); const ___ = axios.get('https://randomuser.me/api/') console.log(___) 13
  • 14. Promises Una Promesa es un proxy para un valor no necesariamente conocido en el momento que es creada la promesa. Las Promesas tienen tres estados: ● Pendiente (pending) ● Cumplida (fulfilled) ● Rechazada (rejected) 14
  • 15. Promises const axios = require('axios'); const ___ = axios.get('https://randomuser.me/api/') .then(data => console.log(data)) .catch(error => console.log(error)) 15
  • 16. Spread Permite a un elemento iterable tal como un arreglo ser expandido en lugares donde cero o más argumentos (para llamadas de función) ó elementos (para Array) son esperados, o a un objeto ser expandido en lugares donde cero o más pares de valores clave son esperados. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; console.log(sum(...numbers)); 16
  • 17. 17