Download - Hands On JavaScript
Hands OnJavaScript
Professor: Anderson Luís Furlan
Web-Design
Front-end
Back-end
Desenvolvimento Web
Ferramentas Gráficas: Photoshop, Fireworks e Corel Draw
Web Design
HTML, CSS e JavaScript
Front-end
Java, C#, PHP, Python, Ruby e… JavaScript!
Back-end
Front-end - Linguagens
HTML, CSS e JavaScript
HTML
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
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
HTML
CSS
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.
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
CSS
JavaScript
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
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
JavaScript
✓O lado cliente do JavaScript
✓ Objetos para controlar um navegador web
✓ Manipular Document Object Model (DOM)
✓ Eventos
✓ Formulários
✓ Jogos
✓ Gráficos
JavaScript
JavaScript
✓O lado do servidor do JavaScript:
✓ Criação de web services
✓ Acesso à banco de dados
✓Manipulação de arquivos
Como usar?
✓Dentro da tag <script></script>
✓ Em um arquivo com a extensão .js
✓ Importar em <script src=“arquivo.js”></script>
Hello World, JavaScript!
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
Tipos
Tipos✓ Tipos primitivos
✓Boolean: true ou false
✓null
✓undefined
✓Number
✓String
✓Object
Tipos✓Array
✓Object
Tipos✓Object
Conversões✓Conversões
✓ Tipagem dinâmica
Conversões✓Conversões
Document
✓ title
✓ createElement
✓ createTextNode
✓ getElementsByTagName
✓ getElementsByClassName
✓ getElementyById
✓querySelector
✓querySelectorAll
✓write
✓writeln
Window - Propriedades✓ fullScreen
✓history
✓ location
✓ localStorage
✓name
✓navigator
✓outerHeight
✓outerWidth
✓pageXOffset
✓pageYOffset
✓ sessionStorage
✓ scrollbars
Window - Métodos✓ alert
✓back
✓ atob
✓btoa
✓ clearInterval
✓ clearTimeout
✓ close
✓ confirm
✓ forward
✓home
✓prompt
✓ resizeTo
✓ scrollTo
✓ setInterval
✓ setTimeout
Console
✓ log
✓ info
✓ time
✓ timeEnd
✓warn
✓debug
✓ trace
Eventos
✓onblur
✓onerror
✓onfocus
✓onchange
✓onclick
✓ondblclick
✓ondrag
✓ondragend
✓ondragenter
✓ondragexit
✓ondragleave
✓ondragover
✓ondragstart
✓onkeydown
✓onkeyup
✓onkeypress
✓onload
✓onmousedown
✓onmousemove
✓onmouseout
✓onmouseover
✓onmouseup
✓onscroll
Calculadora em JavaScript
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
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
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
JavaScript
Lista de Tarefas