Este documento apresenta uma introdução à linguagem JavaScript, cobrindo sua história, tipos, operações, strings, arrays, expressões, funções, objetos, strict mode, manipulação do DOM, eventos e o operador this. O documento também discute como rodar código JavaScript em sites e o futuro promissor de JavaScript.

1. DOMinando JavaScript

2. Thiago Henrique Poiani
IFSP - São Carlos
Tecnólogo em Análise e Desenvolvimento de Sistemas

3. Thiago Henrique Poiani

4. Thiago Henrique Poiani

5. Apresentações

6. Apresentações
192.168.210.84:3000

7. JavaScript
História

8. História
JavaScript é uma linguagem de
programação interpretada
Criada por Brendan Eich em 1995
Padronizada pelo grupo ECMA - ECMAScript

9. JavaScript
Por onde começar?

10. Por onde começar?

11. Por onde começar?
Web Console
Aptana
Eclipse
Komodo
JetBrains WebStorm
Microsoft Visual Studio
NetBeans
Atom
Brackets
Notepad++
Sublime Text
Vim

12. JavaScript
Hello World

13. Web Console

14. JavaScript
Tipos

16. …

17. JavaScript
Operações

20. JavaScript
String

22. JavaScript
Array

24. JavaScript
Expressões

25. …

26. …
…
…
…

27. …
…
…

29. JavaScript
Function

31. …

32. JavaScript
Object

33. Objeto Literal
…

34. JSON - JavaScript Object Notation

35. Função Construtora

36. Callbacks

37. AJAX

38. JavaScript
Strict Mode

39. Strict Mode

40. Intervalo

41. JavaScript
Como vou rodar tudo
que vi até agora em
um site?

42. Como vou rodar tudo que vi até agora
em um site?

43. Como vou rodar tudo que vi até agora
em um site?

44. Como vou rodar tudo que vi até agora
em um site?

45. Como vou rodar tudo que vi até agora
em um site?

46. Content Delivery Network (CDN)

47. Minify / Uglify

48. JavaScript
O que mais
JavaScript faz?

49. O que mais JavaScript faz?
Manipulação de
DOM

50. DOM é uma multi-plataforma que representa como
as marcações em HTML, XHTML e XML são
organizadas e lidas pelo navegador

51. Window Object
Objeto Window representa a janela que contem o
DOM.
Window.alert();
Window.open();

52. Document Object
Objeto Document, acessível por window.document,
possui o DOM Tree.
https://developer.mozilla.org/en-US/docs/Web/API/Document

53. JavaScript
Como manipulo um
nó?

54. Document Object

55. Document Object

56. Document Object
http://caniuse.com/#feat=queryselector

57. Document Object

58. Document Object

59. Document Object
http://caniuse.com/#feat=classlist

60. Cross-browser

61. Web Semântica
http://www.w3c.br/Padroes/WebSemantica

62. Document Object

63. Document Object

64. Document Object
http://html5doctor.com/html5-custom-data-attributes/

65. JavaScript
Vamos manipular
eventos?

66. Events
…
https://developer.mozilla.org/pt-BR/docs/Web/API/Element.addEventListener

67. Events
…
https://developer.mozilla.org/en-US/docs/Web/Events

68. Events
…

69. JavaScript
this

70. this
Toda função, ao ser executada, gera uma associação
do objeto criado pelo interpretador através da palavra
reservada this.
http://tableless.com.br/javascript-entendendo-o-this/

71. this
http://tableless.com.br/javascript-entendendo-o-this/

72. this
…
http://tableless.com.br/javascript-entendendo-o-this/

73. JavaScript
Hoje e Futuro

74. Hoje e Futuro

75. Hoje e Futuro
http://www.forbes.com/sites/quora/2014/07/14/what-is-the-most-valuable-programming-language-to-
know-for-the-future-and-why/

76. JavaScript
Obrigado!

77. Agradecimentos
-2