O documento apresenta uma introdução à linguagem JavaScript, abordando seus principais conceitos como tipos de dados, variáveis, operadores, estruturas de controle, funções, objetos DOM, eventos e como integrá-la ao HTML e CSS para desenvolvimento web front-end.

1. Hands On
JavaScript
Professor: Anderson Luís Furlan

2. Web-Design
Front-end
Back-end
Desenvolvimento Web

3. Ferramentas Gráficas:
Photoshop, Fireworks e Corel Draw
Web Design

4. HTML, CSS e JavaScript
Front-end

5. Java, C#, PHP, Python, Ruby e…
JavaScript!
Back-end

6. Front-end - Linguagens

7. HTML, CSS e JavaScript

8. HTML

9. HTML
✓ HTML - HyperText Markup Language
✓ Linguagem de Marcação de Hipertexto.
✓ Motivação: Criar páginas para Web através de marcações
chamadas de TAGS
✓ Padrão da Web
✓ Responsável pela ESTRUTURA em uma página Web
✓ Criada em 1980 por Tim Berners-Lee

10. HTML
✓ Títulos, subtítulos, listas ordenadas, não ordenadas,
blocos de códigos, links, entre outros
✓ O HTML5 é a última versão da linguagem
✓ Inclusão de recursos nativos de áudio e vídeo
✓ Novas tags estruturais: <header>, <nav>, <section>, <article>,
<main>, <aside> e <footer>.
✓ Separação completa do CSS: <font>, <i>, <b>, <center>, entre
outros não devem ser mais utilizados

11. HTML

12. CSS

13. CSS
✓ CSS - Cascade Style Sheets
✓ Linguagem de folhas de estilo
✓ Responsável pelo ESTILO de uma página da Web.
✓ Define o layout de apresentação, as cores, fontes, bordas,
espaçamentos, animações, entre outros.
✓ A versão 3 da linguagem CSS permite animações através de
regras, sem a necessidade de programar em JavaScript ou plug-
ins para tal.

14. CSS
✓ Pode ser escrito por meio da tag style ou por arquivo
✓ Um arquivo CSS é um conjunto de regras
✓ Uma regra é uma coleção de propriedades de estilo que serão
aplicados a alguns conjuntos de elementos HTML
✓ A estilização pode ser por:
✓ Elemento
✓ Classe
✓ ID

15. CSS

16. JavaScript

17. JavaScript
✓ JavaScript ou ECMAScript foi criada por Brendan Eich
✓ Anteriormente era considerada uma linguagem de script, hoje é
considerada uma linguagem de programação interpretada
✓ Atualmente está na versão 6 também conhecida como
ECMAScript2015
✓ Núcleo da linguagem: operadores, estruturas de controle, de
repetição e declarações
✓ Biblioteca padrão de objetos, como: Array, Date, e Math

18. JavaScript
✓ A linguagem pode ser estendida para uma variedade de
propósitos: Lado cliente ou lado servidor
✓ Usada para criar páginas web interativas, jogos, aplicações
servidoras, aplicativos e aplicações desktop

19. JavaScript
✓ O lado cliente do JavaScript
✓ Objetos para controlar um navegador web
✓ Manipular Document Object Model (DOM)
✓ Eventos
✓ Formulários
✓ Jogos
✓ Gráficos

20. JavaScript

21. JavaScript
✓ O lado do servidor do JavaScript:
✓ Criação de web services
✓ Acesso à banco de dados
✓ Manipulação de arquivos

22. Como usar?
✓ Dentro da tag <script></script>
✓ Em um arquivo com a extensão .js
✓ Importar em <script src=“arquivo.js”></script>

23. Hello World, JavaScript!

24. Tipos
✓ Case-sensitive
✓ Comentários C-like: //, /* ... */
✓ Declaração de variáveis
✓var
✓ let
✓const
 Começam _, letra ou $, sendo que os próximos caracteres
podem ser números

25. Tipos

26. Tipos
✓ Tipos primitivos
✓Boolean: true ou false
✓null
✓undefined
✓Number
✓String
✓Object

27. Tipos
✓ Array
✓ Object

28. Tipos
✓ Object

29. Conversões
✓ Conversões
✓ Tipagem dinâmica

30. Conversões
✓ Conversões

31. Document
✓ title
✓ createElement
✓ createTextNode
✓ getElementsByTagName
✓ getElementsByClassName
✓ getElementyById
✓ querySelector
✓ querySelectorAll
✓ write
✓ writeln

32. Window - Propriedades
✓ fullScreen
✓ history
✓ location
✓ localStorage
✓ name
✓ navigator
✓ outerHeight
✓ outerWidth
✓ pageXOffset
✓ pageYOffset
✓ sessionStorage
✓ scrollbars

33. Window - Métodos
✓ alert
✓ back
✓ atob
✓ btoa
✓ clearInterval
✓ clearTimeout
✓ close
✓ confirm
✓ forward
✓ home
✓ prompt
✓ resizeTo
✓ scrollTo
✓ setInterval
✓ setTimeout

34. Console
✓ log
✓ info
✓ time
✓ timeEnd
✓ warn
✓ debug
✓ trace

35. Eventos
✓ onblur
✓ onerror
✓ onfocus
✓ onchange
✓ onclick
✓ ondblclick
✓ ondrag
✓ ondragend
✓ ondragenter
✓ ondragexit
✓ ondragleave
✓ ondragover
✓ ondragstart
✓ onkeydown
✓ onkeyup
✓ onkeypress
✓ onload
✓ onmousedown
✓ onmousemove
✓ onmouseout
✓ onmouseover
✓ onmouseup
✓ onscroll

36. Calculadora em JavaScript

37. JavaScript
✓ A partir do JavaScript as páginas deixaram de ser estáticas para
serem dinâmicas
✓ Validações cliente, diminuindo a carga de requisições para o
servidor

38. JavaScript
✓ Formas de integração
• Em linha -> diretamente no HTML
• Incorporado na tag <script>
• Externo
✓ JavaScript suporta Programação Orientação a Objetos,
Imperativa e Funcional
✓ É uma linguagem de tipagem fraca -> declaração por meio da
palavra-chave var e let

39. JavaScript
✓ Number.MAX_VALUE/Number.MIN_VALUE
✓ Outros tipos importantes: Math, Date, String, RegExp e Array
Fonte: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

40. JavaScript

43. Lista de Tarefas