Download - Hands On JavaScript
![Page 1: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/1.jpg)
Hands OnJavaScript
Professor: Anderson Luís Furlan
![Page 2: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/2.jpg)
Web-Design
Front-end
Back-end
Desenvolvimento Web
![Page 3: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/3.jpg)
Ferramentas Gráficas: Photoshop, Fireworks e Corel Draw
Web Design
![Page 4: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/4.jpg)
HTML, CSS e JavaScript
Front-end
![Page 5: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/5.jpg)
Java, C#, PHP, Python, Ruby e… JavaScript!
Back-end
![Page 6: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/6.jpg)
Front-end - Linguagens
![Page 7: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/7.jpg)
HTML, CSS e JavaScript
![Page 8: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/8.jpg)
HTML
![Page 9: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/9.jpg)
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
![Page 10: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/10.jpg)
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
![Page 11: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/11.jpg)
HTML
![Page 12: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/12.jpg)
CSS
![Page 13: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/13.jpg)
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.
![Page 14: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/14.jpg)
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
![Page 15: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/15.jpg)
CSS
![Page 16: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/16.jpg)
JavaScript
![Page 17: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/17.jpg)
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
![Page 18: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/18.jpg)
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
![Page 19: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/19.jpg)
JavaScript
✓O lado cliente do JavaScript
✓ Objetos para controlar um navegador web
✓ Manipular Document Object Model (DOM)
✓ Eventos
✓ Formulários
✓ Jogos
✓ Gráficos
![Page 20: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/20.jpg)
JavaScript
![Page 21: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/21.jpg)
JavaScript
✓O lado do servidor do JavaScript:
✓ Criação de web services
✓ Acesso à banco de dados
✓Manipulação de arquivos
![Page 22: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/22.jpg)
Como usar?
✓Dentro da tag <script></script>
✓ Em um arquivo com a extensão .js
✓ Importar em <script src=“arquivo.js”></script>
![Page 23: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/23.jpg)
Hello World, JavaScript!
![Page 24: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/24.jpg)
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
![Page 25: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/25.jpg)
Tipos
![Page 26: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/26.jpg)
Tipos✓ Tipos primitivos
✓Boolean: true ou false
✓null
✓undefined
✓Number
✓String
✓Object
![Page 27: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/27.jpg)
Tipos✓Array
✓Object
![Page 28: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/28.jpg)
Tipos✓Object
![Page 29: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/29.jpg)
Conversões✓Conversões
✓ Tipagem dinâmica
![Page 30: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/30.jpg)
Conversões✓Conversões
![Page 31: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/31.jpg)
Document
✓ title
✓ createElement
✓ createTextNode
✓ getElementsByTagName
✓ getElementsByClassName
✓ getElementyById
✓querySelector
✓querySelectorAll
✓write
✓writeln
![Page 32: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/32.jpg)
Window - Propriedades✓ fullScreen
✓history
✓ location
✓ localStorage
✓name
✓navigator
✓outerHeight
✓outerWidth
✓pageXOffset
✓pageYOffset
✓ sessionStorage
✓ scrollbars
![Page 33: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/33.jpg)
Window - Métodos✓ alert
✓back
✓ atob
✓btoa
✓ clearInterval
✓ clearTimeout
✓ close
✓ confirm
✓ forward
✓home
✓prompt
✓ resizeTo
✓ scrollTo
✓ setInterval
✓ setTimeout
![Page 34: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/34.jpg)
Console
✓ log
✓ info
✓ time
✓ timeEnd
✓warn
✓debug
✓ trace
![Page 35: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/35.jpg)
Eventos
✓onblur
✓onerror
✓onfocus
✓onchange
✓onclick
✓ondblclick
✓ondrag
✓ondragend
✓ondragenter
✓ondragexit
✓ondragleave
✓ondragover
✓ondragstart
✓onkeydown
✓onkeyup
✓onkeypress
✓onload
✓onmousedown
✓onmousemove
✓onmouseout
✓onmouseover
✓onmouseup
✓onscroll
![Page 36: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/36.jpg)
Calculadora em JavaScript
![Page 37: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/37.jpg)
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
![Page 38: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/38.jpg)
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
![Page 39: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/39.jpg)
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
![Page 40: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/40.jpg)
JavaScript
![Page 41: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/41.jpg)
![Page 42: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/42.jpg)
![Page 43: Hands On JavaScript](https://reader031.vdocuments.us/reader031/viewer/2022022415/5a65ff4b7f8b9a214f8b469f/html5/thumbnails/43.jpg)
Lista de Tarefas