Desenvolvimento Frontend- JavaScript - Share
-
Upload
cesar-william-alvarenga -
Category
Documents
-
view
76 -
download
0
Transcript of Desenvolvimento Frontend- JavaScript - Share
![Page 1: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/1.jpg)
Desenvolvimento Frontend: JavaScriptCesar William Alvarenga
![Page 2: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/2.jpg)
About me
@cesarwbr
http://www.cesarwilliam.com
![Page 3: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/3.jpg)
![Page 4: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/4.jpg)
![Page 5: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/5.jpg)
![Page 6: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/6.jpg)
![Page 7: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/7.jpg)
http://www.ecma-international.org/ecma-262/5.1/
![Page 8: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/8.jpg)
Agenda
● Scope● Nested Scope● Hoisting● this● Closure
![Page 9: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/9.jpg)
Somente funções define escopo em JavaScript
![Page 10: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/10.jpg)
![Page 11: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/11.jpg)
![Page 12: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/12.jpg)
![Page 13: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/13.jpg)
![Page 14: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/14.jpg)
Somente funções define escopo em JavaScript
![Page 15: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/15.jpg)
![Page 16: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/16.jpg)
![Page 17: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/17.jpg)
cc c
![Page 18: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/18.jpg)
![Page 19: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/19.jpg)
![Page 20: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/20.jpg)
Chrome DevTools
discover-devtools.codeschool.com
![Page 21: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/21.jpg)
![Page 22: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/22.jpg)
IIFE
![Page 23: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/23.jpg)
IIFE
http://benalman.com/news/2010/11/immediately-invoked-function-expression/
![Page 24: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/24.jpg)
IIFE
![Page 25: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/25.jpg)
JQuery Code! :)
![Page 26: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/26.jpg)
Escopo em blocos no ES6
let
![Page 27: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/27.jpg)
let (ES6+)
![Page 28: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/28.jpg)
let (ES6+)
![Page 29: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/29.jpg)
Hoisting
![Page 30: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/30.jpg)
Hoisting
![Page 31: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/31.jpg)
Hoisting
![Page 32: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/32.jpg)
Hoisting
![Page 33: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/33.jpg)
Hoisting: Primeiro funções
![Page 34: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/34.jpg)
Hoisting: let (ES6+) “temporary dead zone”
![Page 35: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/35.jpg)
Exercício: Dia 3
![Page 36: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/36.jpg)
thisToda função, quando está sendo executada, tem uma referencia para o
contexto em que foi executada, chamada this.
![Page 37: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/37.jpg)
this
![Page 38: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/38.jpg)
this: implicit & default binding
![Page 39: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/39.jpg)
this: implicit & default binding
bar1
bar2
bar3
![Page 40: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/40.jpg)
this: implicit & default binding
![Page 41: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/41.jpg)
this: explicit binding
![Page 42: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/42.jpg)
this: hard binding
![Page 43: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/43.jpg)
this: hard binding
![Page 44: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/44.jpg)
MDN Polyfill
![Page 45: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/45.jpg)
this: new
![Page 46: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/46.jpg)
this rules priority
1. called with ‘new’?2. called with ‘call’ or ‘apply’?3. called via an object?4. DEFAULT: global object (except strict mode)
![Page 47: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/47.jpg)
![Page 48: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/48.jpg)
![Page 49: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/49.jpg)
![Page 50: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/50.jpg)
closureClosure é quando uma função "lembra" do seu escopo léxico mesmo quando a
função é executada fora do seu escopo léxico.
![Page 51: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/51.jpg)
closure
![Page 52: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/52.jpg)
closure
![Page 53: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/53.jpg)
closure
![Page 54: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/54.jpg)
closure
![Page 55: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/55.jpg)
closure
![Page 56: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/56.jpg)
closure
![Page 57: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/57.jpg)
closure
![Page 58: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/58.jpg)
closure
![Page 59: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/59.jpg)
closure
![Page 60: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/60.jpg)
closure
![Page 61: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/61.jpg)
modulesPadrões: clássico e moderno
![Page 62: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/62.jpg)
Padrão clássico
![Page 63: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/63.jpg)
Padrão clássico
![Page 64: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/64.jpg)
Padrão moderno
![Page 65: Desenvolvimento Frontend- JavaScript - Share](https://reader033.fdocuments.us/reader033/viewer/2022042906/58a1ae0b1a28abe6468b6c99/html5/thumbnails/65.jpg)
ES6+
foo.js