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