Material Base JavaScript

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
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
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
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
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
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
Operadores
Lgico:
&& : e
|| : ou
! : no (negao)
Tambm chamados operadores booleanos, esses operadores

servem para verificar duas ou vrias condies.
14
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
Operadores
Incrementao:
++ : incrementao
-- : decrementao
Estes operadores vo aumentar ou diminuir o valor da varivel de

uma unidade.
16
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
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
Estruturas de controle com SWITCH CASE

varvalor=3
switch(valor){
case1:
//Faaalgoporqueovalor
break;
case2:
//Faaalgoporqueovalor
Break;
default:
//Senadacontecer,faaalgo
}
19
Loops com WHILE
Sintaxe:
while(condio){
//Faaalgo
}
Declarao que executada enquanto a condio for verdadeira.
Exemplo:
while(n<3){
n++;
}
20
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Um exemplo simples onde existem duas funes: Uma para multiplicar

valores e outra para dobr-los utilizando a primeira como base.
43
44
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
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
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
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
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

Material Base JavaScript

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Material Base JavaScript

Diunggah oleh

Hak Cipta:

Format Tersedia

JavaScript, jQuery e Responsive Design

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.

Um pouco sobre JavaScript

Criado em 1995 J se chamou Mocha, mantido pela

No compilada, Possui Tipagem

Est alm do browser Atualmente na Verso 6

Variveis, Constantes, Funes,

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

Existem 3 formas de utilizar JavaScript:

11 Em um evento da tag HTML (inline);

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

33 Em um arquivo .js externo. 33

// um exemplo de comentario numa linha unica

Os tipos de dados compostos (de referncia) so:

Uma variavel pode ser uma funo

Uma constante no pode ter seu valor mudado

Tambm chamados operadores booleanos, esses operadores

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

Estes operadores vo aumentar ou diminuir o valor da varivel de

Estruturas de controle com IF, ELSE IF e ELSE

Estruturas de controle com TERNRIO

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

Estruturas de controle com SWITCH CASE

Declarao que executada enquanto a condio for verdadeira.

Loops com DO WHILE

DO WHILE: Executa o bloco de cdigo ao

FOR IN: Percorre as propriedades enumeradas

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

Uma funo JavaScript contm cdigos que sero executados por um

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

Uma funo declarada da seguinte forma:

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

Manipulao do DOM e seus Eventos

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

Ele fornece uma representao estrutural do documento, permitindo

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

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

DOM HTML Modelo padro para documentos

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

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

O DOM uma coleo de objetos para fazer a manipulao de

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

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

Podemos recuperar qualquer informao do nosso objeto document.

Exemplo de DOM HTML

A tag <html> o node root;

HTML node tem dois filhos

<body> node possui dois

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

getElementsByName(name): retorna uma array com todos os

getElementsByTagName(tagName): retorna uma array com todos os

getElementsByClassName(className): retorna uma array com

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

Exemplo de DOM HTML

Entendendo Closures e Currying

Em Cincia da Computao e na Programao, Closure uma

Uma closure ocorre normalmente, quando uma funo declarada

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

De grosso modo, closures so:

Blocos de cdigo que podem ser executados a qualquer