JavaScript direto das trincheiras

Todo desenvolvedor web precisa saber JavaScript mas uns acham que não precisa aprender, outros utilizam uma lib ou framework e acaba não sabendo como realmente a linguagem funciona. Esse slide apresenta conceitos básicos do JavaScript que todo desenvolvedor web deveria saber

Transcript

1. JAVASCRIPT DIRETO DAS TRINCHEIRAS PEDRO ARAUJO - @pedrotcaraujo
2. JAVASCRIPT DIRETO DAS TRINCHEIRAS VAMOS FALAR DO QUE? ▸ Entendendo o JavaScript ▸ Funções como objeto de primeira classe ▸ Loop do navegador ▸ Callback ▸ Escopo e funções ▸ O “this" ▸ IIFE ▸ Closures ▸ Prototypes ▸ Bate-papo
3. "JAVASCRIPT IS THE ONLY LANGUAGE PEOPLE FEEL LIKE THEY DON'T NEED TO LEARN TO USE." Douglas Crockford ENTENDENDO O JAVASCRIPT
4. ENTENDENDO O JAVASCRIPT OBJETOS CLOSURES FUNÇÕES
5. “EU ODEIO JAVASCRIPT!" Desenvolvedor Java ENTENDENDO O JAVASCRIPT
6. ENTENDENDO O JAVASCRIPT Hamburguer Ham
7. ENTENDENDO O JAVASCRIPT LINGUAGEM FUNCIONAL
8. FUNÇÕES COMO OBJETOS DE PRIMEIRA CLASSE FUNÇÕES SÃO OBJETOS DE PRIMEIRA CLASSE
9. FUNÇÕES COMO OBJETOS DE PRIMEIRA CLASSE TODO CÓDIGO DE SCRIPT QUE ESCREVEREMOS ESTARÁ DENTRO DE UMA FUNÇÃO
10. Java: JavaScript:
11. FUNÇÕES COMO OBJETOS DE PRIMEIRA CLASSE
13. FUNÇÕES COMO OBJETOS DE PRIMEIRA CLASSE PODEM SER CRIADOS POR MEIO DE LITERAIS
14. FUNÇÕES COMO OBJETOS DE PRIMEIRA CLASSE PODEM SER ATRIBUÍDOS A VARIÁVEIS, ENTRADAS DE ARRAYS E PROPRIEDADES DE OUTROS OBJETOS
15. FUNÇÕES COMO OBJETOS DE PRIMEIRA CLASSE PODEM SER RETORNADOS COMO VALORES A PARTIR DE FUNÇÕES
16. FUNÇÕES COMO OBJETOS DE PRIMEIRA CLASSE PODEM CONTAR COM PROPRIEDADES QUE PODEM SER CRIADAS E ATRIBUÍDAS DINAMICAMENTE
17. JavaScript:
18. LOOP DE EVENTOS DO NAVEGADOR
20. LOOP DE EVENTOS DO NAVEGADOR CARREGAMENTO DE UMA PÁGINA OU DESCARREGAMENTO
21. LOOP DE EVENTOS DO NAVEGADOR COMO RESPOSTAS A UMA SOLICITAÇÃO AJAX
22. LOOP DE EVENTOS DO NAVEGADOR COMO CLIQUES E MOVIMENTOS DE MOUSE OU PRESSIONAMENTOS DE TECLAS
23. LOOP DE EVENTOS DO NAVEGADOR COMO QUANDO UM TEMPO LIMITE EXPIRA OU UM INTERVALO É DISPARADO
24. LOOP DO NAVEGADOR Callback
25. CALLBACKS
26. CALLBACKS ORDENAÇÃO DE UMA LISTA DE NÚMEROS Java JavaScript CALLBACK CALLBACK
27. CALLBACKS É A CHAMADA DE UMA FUNÇÃO COMO CONSEQUÊNCIA DE OUTRO CÓDIGO
28. CALLBACKS É UM MECANISMO DE CONTROLE DE FLUXO QUE VISA BENEFICIAR PROCESSOS ASSÍNCRONOS.
29. CALLBACKS EXEMPLOS DE CALLBACK
30. ESCOPO E FUNÇÕES
31. ESCOPO E FUNÇÕES ESCOPO SÃO DECLARADOS POR FUNÇÕES, E NÃO POR BLOCOS
32. ESCOPO E FUNÇÕES VARIÁVEIS ESTÃO EM ESCOPO DO PONTO DE DECLARAÇÃO ATÉ O FINAL DA FUNÇÃO
33. ESCOPO E FUNÇÕES FUNÇÕES NOMEADAS ESTÃO EM ESCOPO DENTRO DA FUNÇÃO INTEIRA NA QUAL FOI DECLARADAS (HOISTING)
34. ESCOPO E FUNÇÕES O CONTEXTO GLOBAL ATUA COMO UMA ÚNICA GRANDE FUNÇÃO
35. ESCOPO E FUNÇÕES EXEMPLO DE CÓDIGO outer() ✓ outer() ✓
 inner() ✓ outer() ✓
 inner() ✓
 a ✓ outer() ✓
 inner() ✓ a ✓ b ✓ outer() ✓ outer() ✓
 inner() ✓ a ✓ b ✓ c ✓ outer() ✓
 inner() ✓ a ✓ b ✓ c ✓
36. O “this”
37. O “THIS” “this” APONTA PARA UMA INSTÂNCIA DA CLASSE DENTRO DA QUAL O MÉTODO É DEFINIDO
38. O “THIS” MAS CUIDADO! INVOCAÇÃO COMO MÉTODO É APENAS UMA DAS 4 MANEIRAS QUE FUNÇÕES PODEM SER INVOCADAS
39. O “THIS" COMO UMA FUNÇÃO
41. O “THIS” COMO UM MÉTODO
43. O “THIS” COMO UM CONSTRUTOR
44. “this" passa a ser blah
45. O “THIS” PELOS MÉTODOS DA FUNÇÃO ”apply()” OU ”call()”
46. “this" passa a ser student1 “this" passa a ser student2
47. O “THIS” TODA FUNÇÃO POSSUI O PARÂMETRO “this”
48. O “THIS” O “this” É CONHECIDO COMO CONTEXTO DA FUNÇÃO
49. IIFE (IMMEDIATELY- INVOKED FUNCTION EXPRESSION)
50. IIFE (IMMEDIATELY-INVOKED FUNCTION EXPRESSION) ALL IN ONE: ▸ cria uma instância de função ▸ executa a função ▸ descarta a função ▸ cria escopo temporário ▸ encapsulamento
51. IIFE (IMMEDIATELY-INVOKED FUNCTION EXPRESSION) (…)() function doSomething() { … } function doSomething() { … }() (function doSomething() { … })() Sintaxe Function Declaration // SyntaxError: Unexpected token ) Function Expression
53. CLOSURES
54. CLOSURES É O ESCOPO CRIADO QUANDO UMA FUNÇÃO É DECLARADA QUE PERMITE À FUNÇÃO ACESSAR E MANIPULAR VARIÁVEIS EXTERNAS A ELA
55. CLOSURES UMA CLOSURE SIMPLES
56. CLOSURES UMA CLOSURE NÃO TÃO SIMPLES
57. CLOSURES CLOSURES CRIA UMA BOLHA COM FUNÇÕES E VARIÁVEIS DO ESCOPO NO MOMENTO DA DECLARAÇÃO
58. PROTOTYPES
59. PROTOTYPES PODEMOS PENSAR QUE PROTOTYPES COMO ALGO APROXIMADAMENTE RELACIONADO A OBJETOS
60. PROTOTYPES TODAS AS FUNÇÕES POSSUEM UMA PROPRIEDADE PROTOTYPE
61. PROTOTYPES PROTÓTIPOS SÃO COMO MODELOS DE OBJETOS E NÃO POSSUEM UTILIDADE ALGUMA SE A FUNÇÃO NÃO FOR INSTANCIADA
62. PROTOTYPES UMA FUNÇÃO SEM INSTANCIA NÃO UTILIZA PROTOTYPE
63. PROTOTYPES RECONCILIAR REFERÊNCIAS
64. PROTOTYPES TRABALHANDO COM HERANÇA
65. OBRIGADO!