Você está na página 1de 51

JavaScript, jQuery e Responsive Design

2
Ambientao do Curso

JavaScript

3
Objetivos da Aula

Aula 01

Um pouco sobre a histria e a importncia de JavaScript;

Variveis, Constantes, Funes, Controle e Loops;

Manipulao do DOM e seus Eventos;

Entendendo Closures e Currying.

4
Ambientao do Curso

Um pouco sobre JavaScript

5
Um pouco sobre JavaScript

Criado em 1995 J se chamou Mocha, mantido pela


por Brendan LiveScript, JavaScript Ecma international
Eich (Netscape); (JS) e ECMAScript; desde 1996;

No compilada, Possui Tipagem


Suporta Orientao
roda em tempo de Dinmica e
a Objetos;
execuo/leitura. Case Sensitive;

Est alm do browser Atualmente na Verso 6


(Servidores, Desktop, verso 5.1 (ECMA- em 2015.
Mobile, Smart TVs, etc...) 262) desde 2011.

6
Ambientao do Curso

Variveis, Constantes, Funes,


Controle e Loops

7
Variveis, Constantes, Funes, Controle e Loops

A sintaxe do JS definida pelas TAGs HTML <script></script>.

Existem 3 formas de utilizar JavaScript:

11 Em um evento da tag HTML (inline);


11

No cabealho <head> e/ou no corpo <body> de uma pgina


22 22
HTML;

33 Em um arquivo .js externo. 33

8
Variveis, Constantes, Funes, Controle e Loops

Comentrios
Em JS, os comentrios podem ser adicionados no cdigo de 2 formas:
11
Linha unica, representada por duas barras seguida do texto:

// um exemplo de comentario numa linha unica

22
Bloco, que representado por uma barra e um asterisco:
/*
Este e um comentario em JS em bloco
*/

9
Variveis, Constantes, Funes, Controle e Loops
Variveis
Em JS, as variveis no so tipas, logo basta declar-las com VAR:

varminhaVariavel=Textoqualquer;//String

varminhaVariavel=30; //Number

varminhaVariavel=4.1; //Number

varminhaVariavel=true; //Booleano

varminhaVariavel=null; //Nulo

varminhaVariavel=[]; //Array

varminhaVariavel={}; //Objeto

varminhaVariavel=function(){};//Funo

10
Variveis, Constantes, Funes, Controle e Loops

Tipos de Dados
Os tipos de dados primrios (primitivos) so:

String
String Qualquer numero de caracteres;

Nmeros
Nmeros Inclui numeros inteiros, bem como de ponto flutuante;

Booleano
Booleano Assume apenas dois valores: TRUE ou FALSE.

Os tipos de dados compostos (de referncia) so:

Objeto
Objeto So colees de propriedades e mtodos;

Matriz
Matriz(Array)
(Array) uma tabela de linhas e colunas sobre um conjunto.

11
Variveis, Constantes, Funes, Controle e Loops

Uma variavel pode ser uma funo


Funes outro elementos fundamental da linguagem

Function
Function Procedimentos que sua aplicao vai executar

Constantes
As regras de escopo para constantes so as mesmas que as das
variveis

Uma constante no pode ter seu valor mudado


Const
Const
atravs de uma atribuio

Exemplo:
constprefix='JavascriptConstantes';

12
Variveis, Constantes, Funes, Controle e Loops

Operadores

Clculo: Comparao:

+ : adio == : igual a
- : subtrao === : idntico a
* : multiplicao != : no igual a
/ : diviso !== : no idntico a
% : mdulo (resto) > : maior que
= : valorizao (atribuio) < : menor que
>= : maior ou igual a
<= : menor ou igual a

13
Variveis, Constantes, Funes, Controle e Loops

Operadores
Lgico:

&& : e
|| : ou
! : no (negao)

Tambm chamados operadores booleanos, esses operadores


servem para verificar duas ou vrias condies.

14
Variveis, Constantes, Funes, Controle e Loops

Operadores
Associao:
+= : mais igual
-= : menos igual
*= : multiplicar igual
/= : dividir igual

Chamam-se assim os operadores que realizam um clculo, no


qual uma varivel intervm nos dois lados do smbolo = (so de
alguma maneira operadores de atribuio).

15
Variveis, Constantes, Funes, Controle e Loops

Operadores
Incrementao:

++ : incrementao
-- : decrementao

Estes operadores vo aumentar ou diminuir o valor da varivel de


uma unidade.

16
Variveis, Constantes, Funes, Controle e Loops

Estruturas de controle com IF, ELSE IF e ELSE


//Nocasode1formaiorquedois
If(1>2){alert('1maior')}

//quandoacondiodoIFforfalsa,eleexecutao
elseif
elseif(1==2){alert('1iguala2')}

//casonoocorranenhumadascondiesoeles
executado.
else{alert('2maior')}

17
Variveis, Constantes, Funes, Controle e Loops

Estruturas de controle com TERNRIO


Sintaxe:
condio?valor1:valor2;

Se a condio for verdadeira ela retorna o valor1 se no ela retorna


o valor2.

Exemplo:

console.log(1<=2?'1menor':'2maiorigual');

18
Variveis, Constantes, Funes, Controle e Loops

Estruturas de controle com SWITCH CASE


varvalor=3
switch(valor){
case1:
//Faaalgoporqueovalor
break;
case2:
//Faaalgoporqueovalor
Break;
default:
//Senadacontecer,faaalgo
}

19
Variveis, Constantes, Funes, Controle e Loops
Loops com WHILE
Sintaxe:

while(condio){
//Faaalgo
}

Declarao que executada enquanto a condio for verdadeira.

Exemplo:

while(n<3){
n++;
}

20
Variveis, Constantes, Funes, Controle e Loops

Loops com DO WHILE

do{
n+=1;
}while(i<3);

Importante!

DO WHILE: Executa o bloco de cdigo ao


menos uma vez e depois valida a condio;

21
Variveis, Constantes, Funes, Controle e Loops
Loops com FOR
Essa declarao executada enquanto a condio for verdadeira,
mas permite que voc configure as expresses dentro de parnteses
e separadas por vrgulas. Sintaxe:

for(inicializao,condio,expressofinal){
//faaalgo
}

Exemplo:

for(vari=0;i<3;i++){
//faaalgo
}

22
Variveis, Constantes, Funes, Controle e Loops
Loops com FOR IN
O for in frequentemente utilizados em Objetos. Example:

varobjeto={valor1:1,valor2:2,valor3:3};
for(varcontroleinobjeto){
console.log(objeto[controle]);
}
//Sadadoconsole=1,2,3

Importante!

FOR IN: Percorre as propriedades enumeradas


de um objeto.

23
Variveis, Constantes, Funes, Controle e Loops

Funes

Funes (functions) so muito uteis em programao, pois so


executadas somente quando so solicitadas. Isso ajuda a modularizar
uma aplicao e tambm viabiliza a diviso do programa em partes
menores e lgicas.

Uma funo JavaScript contm cdigos que sero executados por um


evento HTML ou pela prpria chamada funo.

24
Variveis, Constantes, Funes, Controle e Loops

A primeira maneira de declarar uma funo atravs do uso da palavra


chave function, semelhante a forma que elas so declaradas na
linguagem C.

Uma funo declarada da seguinte forma:


functionminhaFuncao(){codigo}

Passando atributos:
functionminhaFuncao(atr1,atr2,atr3){codigo}

25
Variveis, Constantes, Funes, Controle e Loops

Em JavaScript, as funes podem ou no retornar valores, para isto,


devemos utilizar a declarao return logo aps a execuo do cdigo.

functionminhaIdade(){
varidade=30;
returnidade;
}

varidade=minhaIdade();

26
Ambientao do Curso

Manipulao do DOM e seus Eventos

27
Manipulao do DOM e seus Eventos

DOM (Document Object Model - Modelo de Objetos de Documentos)


uma API para documentos HTML e XML especificado pela W3C.

Ele fornece uma representao estrutural do documento, permitindo


que voc modifique a apresentao, estrutura ou contedo do
documento dinamicamente, utilizando linguagens de programao
como o JavaScript.

Para trabalhar de forma a ser cross-browser, uma grande parte do


cdigo DHTML precisou ser reescrito para cada navegador ser
suportado.

28
Manipulao do DOM e seus Eventos

O DOM uma recomendao do W3C e est dividida em 3 categorias:

DOM
DOMCore
Core DOM
DOMCore
Modelo padro para qualquer estrutura de documento;
Core

DOM
DOMXML
XML Modelo padro para documentos
DOM XML XML;
DOMXML

DOM HTML Modelo padro para documentos


DOMHTML DOM HTMLHTML.
DOMHTML

Vamos trabalhar exclusivamente com o DOM Core e o DOM HTML.

Para saber mais sobre o DOM, acesse: http://www.w3.org/DOM/

29
Manipulao do DOM e seus Eventos

O DOM uma coleo de objetos para fazer a manipulao de


documentos. tambm a base para uma outra rvore, que o que
realmente um browser monta na tela, a rvore de Renderizao
(Render Tree).

A base para todos os ns da rvore DOM (DOM Tree) a base class


chamada Node.h.

30
Manipulao do DOM e seus Eventos

DOM Tree
document
document

html
html head
head title
title [text
[textnode]
node]

body
body h1
h1 [texte
[textenode]
node]

pp [text
[textnode]
node]

em
em [text
[textnode]
node]

[text
[textnode]
node]

pp [text
[textnode]
node]

31
Manipulao do DOM e seus Eventos

Com o DOM HTML podemos recuperar, alterar, adicionar e deletar


elementos HTML. Segundo a especificao DOM, todo documento
HTML considerado um node:

O documentoDOM
comoCore
DOM um todo um node;
Core

Um elemento DOM
DOMXML
HTML um node;
XML

DOM
DOMHTML
Um texto do elemento
HTMLHTML um node.

Podemos recuperar qualquer informao do nosso objeto document.

32
Manipulao do DOM e seus Eventos

Exemplo de DOM HTML

A tag <html> o node root;

HTML node tem dois filhos


node <head> e <body>;

<body> node possui dois


nodes: <h1> e <p>.

33
Manipulao do DOM e seus Eventos

getElementById(id): retorna o elemento pelo id especificado;

getElementsByName(name): retorna uma array com todos os


elementos pelo nome especificado;

getElementsByTagName(tagName): retorna uma array com todos os


elementos pelo nome da tag especificado;

getElementsByClassName(className): retorna uma array com


todos os elementos pelo nome da classe especificada;

write() ou writeln(): escreve no documento HTML.

34
Manipulao do DOM e seus Eventos
Exemplos:

document.getElementById('Main');
//retornaumelemento
document.getElementsByName('email');
//retornaumaarray[]
document.getElementsByTagName('div');
//retornaumaarray[]
document.getElementsByClassName('bloco');
//retornaumaarray[]
document.write('textoemHTML')//ou
document.writeln('textoemHTML')
//escrevenodocumentoHTML.

35
Manipulao do DOM e seus Eventos

Exemplo de DOM HTML

innerHTML
innerHTML innerHTML
Recupera o texto de um elemento;

title
title Retorna ao ttulo do documento;

URL
URL URL
Retorna URL do documento;

forms[]
forms[] innerHTML
Retorna coleo com todos os formulrios do documento;

images[]
images[] Retorna coleo com todas as imagens do documento;

links[]
links[] Retorna coleo de todosURL
os href do documento;

anchors[]
anchors[] Retorna coleo de todosURL
os links <a> do documento.

36
Manipulao do DOM e seus Eventos
Exemplos:

element.innerHTML;//Retornaohtmldeumelemento
document.title;//Retornaotitulodapgina
document.URL;//Retornaaurldapgina
document.forms;//Retornaumaarraydeformulrios
document.images;//Retornaumaarraydeimagens
document.links;//Retornaumaarraydelinks
document.anchors;//Retornaumaarraydencorasdo
documento

37
Ambientao do Curso

Entendendo Closures e Currying

38
Entendendo Closures e Currying

Closures

Em Cincia da Computao e na Programao, Closure uma


funo que faz referncia de variveis livres no contexto lxico.

Uma closure ocorre normalmente, quando uma funo declarada


dentro do corpo de outra, e a funo interior faz referncia de variveis
locais da funo exterior.

39
Entendendo Closures e Currying

A nova funo soma5, de alguma forma encerra o valor do


parmetro no numero depois de criada. Ento, tudo que declaramos
dentro de uma funo privado, mas pode ser utilizado por membros
pblicos.

40
Entendendo Closures e Currying

De grosso modo, closures so:

Blocos de cdigo que podem ser executados a qualquer


momento, guardando o contexto no qual eles foram criados,
mesmo quando a funo que criou esse bloco j saiu de escopo.

Outro uso legal de closures evitar a criao desnecessria de


variveis globais (uma coisa ruim em qualquer linguagem).
Os closures s faro sentido, quando falarmos de criao de objetos
e classes bem encapsuladas.

41
Entendendo Closures e Currying

Currying

Uma das caractersticas de linguagem funcional muito utilizada em


Javascript a tcnica de Currying. Ela utilizada para transformar uma
funo com diversos argumentos em uma funo com argumentos
simples.

O Mundo Mgico de Curry

Podemos separar uma enorme funo em partes, de forma que voc


utiliza da primeira pela segunda com uma reduo de parmetros. Essa
tcnica utilizada nas funes de alta ordem como: Fold, Map, dentre
outros.

42
Entendendo Closures e Currying

Um exemplo simples onde existem duas funes: Uma para multiplicar


valores e outra para dobr-los utilizando a primeira como base.

43
Entendendo Closures e Currying

44
Entendendo Closures e Currying

Exemplificando

1
1passo
passo Primeiro declaramos uma funo denominada
sendMessage, que recebe um parmetro em
2
2passo
passo
seu construtor e ser o id de um elemento
qualquer.
3
3passo
passo

4
4passo
passo

5
5passo
passo

45
Entendendo Closures e Currying

Exemplificando

1
1passo
passo

2
2passo
passo A chamada para essa funo provoca o retorno
de outra funo declarada internamente.
3
3passo
passo

4
4passo
passo

5
5passo
passo

46
Entendendo Closures e Currying

Exemplificando

1
1passo
passo

2
2passo
passo
Essa funo interna tambm recebe um
3
3passo
passo argumento, e a funo dela adicionar esse
argumento no conteudo do elemento passado
4
4passo
passo como parmetro na funo inicial.

5
5passo
passo

47
Entendendo Closures e Currying

Exemplificando

1
1passo
passo

2
2passo
passo

3
3passo
passo

Criei uma funo chamada validar apenas


4
4passo
passo
para aplicar a mensagem a uma funo. Esta
ser utilizada para fazer a mgica do Currying.
5
5passo
passo

48
Entendendo Closures e Currying

Exemplificando

1
1passo
passo

2
2passo
passo

3
3passo
passo
E por fim, utilizei a funo validar para
4
4passo
passo submeter uma frase (primeiro argumento) na
funo sendMessage (segundo argumento),
5
5passo
passo passando para ela o id de um elemento como
um DIV.

49
Prximos Passos

Para que voc tenha um melhor aproveitamento do curso, participe das


seguintes atividades disponveis na semana 1:

Aula 2: Eventos, Try Catch, Objetos e Mtodos Nativos

Fazer a leitura da Apostila;


Assista a videoaula;
Realizar o Laboratrio proposto nesta aula;
Responder as questes do Teste de Conhecimento.

Mos obra!

50