Programacao ClientSide LP1 Ciencia Da Computacao

Linguagem de
Programação I
Programação Client-Side:
Javascript
Client-side
Programação no
cliente Javascript
O que é Javascript?
• Javascript foi desenvolvido para adicionar
interatividade em páginas HTML;
• Se tornou padrão internacional (ISO / IEC 16262)
em 1998;
• Todo mundo pode usar Javascript sem a aquisição
de uma licença;
• Inventada por Brendan Eich da Netscape (com
Navigator 2.0), e implementada em todos os
browsers Netscape e Microsoft desde 1996;
O que é Javascript?
• Javascript é uma linguagem de scripting/script;
• Linguagem interpretada;
• Interpretada somente no cliente (pelo agente
cliente/navegador);
• Javascript é normalmente incorporado dentro das páginas
HTML ou em arquivos separados (.js) também vinculados
às páginas;
• Implementações diferentes para cada navegador.
Java e Javascript são os
mesmos?
• NÃO!
• Java (desenvolvida pela Sun Microsystems –
comprada pela Oracle) é uma poderosa e muito mais
complexa linguagem de programação - na mesma
categoria do C, C++, VB, C#...
• Em comum somente a sintaxe parecida com a da
linguagem C.
O que dá pra fazer?
• Manipulação dos elementos HTML da página;
• Validar a entrada de dados;
• Reagir a eventos;
• Criar componentes/bibliotecas;
• AJAX;
• Usar JQuery.
Inserindo Javascript
• Para inserir código Javascript na página HTML, é necessário
o uso da tag <script>. Dentro da tag o atributo type define o
tipo de linguagem que o bloco de script vai suportar.
• Em HTML5 o atributo type é dispensável.
• O valor text/javascript habilita o suporte a código
Javascript.
<script type="text/javascript">
//<![CDATA[
document.write("Olá Mundo!!!");
//]]>
</script>
• Script na tag <head> ou no final da página.
• Padronização. Todos os scripts estão num só lugar, e não
interferindo com o conteúdo da página.
<html>
<head>
<script type="text/javascript">
//<![CDATA[
....Código em JS
//]]>
</script>
</head>
<body>
...
• O comentário //<!CDATA[...//]]> impede
que validadores do padrão X/HTML invalidem o
documento quando achar o caracter “<“ dentro do
bloco javascript.
• Desconsidera o bloco delimitado pelo comentário.

• Javascript externo: O código javascript pode ser
separado num arquivo e referenciado na página
HTML.
• Maior organização na página (separação).
• O atributo src (source) indica o caminho necessário
para a página acessar o arquivo.
• Não é permitido adicionar código JS dentro da
dentro tag <script> quando o atributo src estiver
presente.
<html>
<head>
<script type="text/javascript"
src="xxx.js"></script>
</head>
<body>
</body>
</html>
• Em HTML5 o atributo type é dispensável.
<html>
<head>
<script type="text/javascript" src="xxx.js">
document.write(“Não funciona”);
</script>
</head>
<body>
</body>
</html>
Declarações Javascript
• Javascript é case sensitive.
• Certo: document.write("Deu certo");
• Errado: Document.Write("Deu errado");
• Todo final de instrução deve ser finalizado com o caracter
“;”.
• document.write("texto 1");
• O código Javascript pode ser agrupado em blocos dentro da
página (objetos-funções);
• { ... }: Delimitador de blocos de comando.
• // : Comentário de linha.
• /* ....*/: Comentário de bloco.
Declarações de Variáveis
• Regras para nomes de variáveis em Javascript:
• Os nomes de variáveis são case sensitive (y e Y são
duas variáveis diferentes).
• Não existe um sessão pré-definida para declaração
das variáveis.
• Uso da palavra reservada var (não obrigatório, mas
deve ser considerado para evitar problemas das
variáveis globais).
• É uma linguagem que usa tipagem dinâmica de
dados, ou seja, não se define inicialmente o tipo de
dado. O valor atribuído é quem define o tipo.
var x;
var curnome;
var x=5;
var curnome="Informática";
x=5;
curnome="Informática";
var ti="oi";
var t2;
var t3 = null;
• undefined: Indica se uma variável
não tem um valor associado /
if (t1 == undefined) { definido (sem tipo).
alert("t1 é undefined"); • null: para objetos.
}
• typeof: devolve o tipo da variável.
if (t2 == undefined) {
alert("t2 é undefined");
}
if (typeof t1 == "string")
alert("t1 é string");
if (typeof t3 == "object")
alert("t3 é objeto");
• Qual é o resultado final de X?
var x;
x = 10;
x = x + 1;
x = "teste";
x = x + 10;
• E agora, qual é o resultado final de X?

var x;
x = "10";
x = x + 1;
x = "teste";
x = 10;
x = x + 10;
Convertendo String para
Números
• Se um valor numérico é armazenado como uma string (como
por exemplo um valor recuperado de um input), e temos a
necessidade realizar operações aritméticas com o valor,
devemos realizar uma conversão para numérico.
• parseInt(): Converte uma string para um número inteiro (por
padrão utiliza a base 10 (base de 2 a 36).
• parseFloat(): Converte uma string para um número real.
• isNaN(): Valida se o valor recebido não é número
Convertendo String para
Números
var v1="042";
var v2="42.33";
parseInt(v1, 10); //resultado = 42

parseInt(v2, 10); // resultado = 42
parseFloat(v1); //resultado = 42
parseFloat(v2); //resultado = 42.33
isNaN(“oi”); // resultado = true (não é

numérico)
Arrays
• Criando um vetor
var vetor1 = new Array(); (uso do operador ‘new’ desencorajado pela W3C)
var vetor2 = ['Fiesta', 'Palio', 'Civic', 'Fox']; (W3C – use dessa
maneira por simplicidade, velocidade na execução e legibilidade).
var vetor3 = [];
• Adicionando valores
vetor1[0] = "valorA";
vetor1[1] = "valorB";
//ou
vetor1.push("valorC");
• Removendo uma posição
vetor1.pop(10);
• Percorrendo
for (var i = 0; i < vetor2.length; i++) {
alert('Índice: ' + i + ' valor: ' + vetor2[i]);
}
Arrays
• Criando um vetor
var vetor1 = new Array(); (uso do operador ‘new’
desencorajado pela W3C)
var vetor2 = ['Fiesta', 'Palio', 'Civic', 'Fox'];
(W3C – use dessa maneira por simplicidade,
velocidade na execução e legibilidade).
var vetor3 = [];
• Testando o tipo com typeof
console.log(typeof vetor2) -> Saída = “object”
console.log(Array.isArray(vetor2)) -> Saída = true
Operadores Aritméticos
• Os operadores aritméticos são usados para realizar
operações aritméticas entre variáveis e / ou valores.
• Considerando que y = 5, a tabela abaixo exemplifica o uso e
função dos operadores aritméticos.
Operador Função Exemplo Resultado
+ Adição x=y+2 x=7
- Subtração x=y-2 x=3
* Multiplicação x=y*2 x=10
/ Divisão x=y/2 x=2.5
% Módulo (resto da divisão) x=y%2 x=1
** Potenciação x=y**2 X=25
++ Incremento x=++y x=6
-- Descremento x=--y x=4
Operadores de Atribuição
• Dado que x = 10 e y = 5, a tabela abaixo explica os
operadores de atribuição.
Operador Exemplo Mesmo que Resultado
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
**= x **= y x = x ** y X=100.000
Operadores de Comparação
• Considerando que x = 5, a tabela abaixo exemplifica
o uso e função dos operadores de comparação.
Operador Descrição Mesmo que Resultado

== É igual x==8 False
== É igual “8”==8 True
=== Igualdade estrita (tipo e valor) “8”===8 False
!= Diferente x!=8 True
!== Diferença estrita(tipo e valor) 8!==8 False
> Maior que x>8 False
< Menor que x<8 True
>= Maior ou igual que x>=8 False
<= Menor ou igual que x<=8 True
Operadores Lógicos
• Operadores lógicos são usados para determinar a lógica
entre as variáveis ou valores.
• Dado que x = 6 e Y = 3, a tabela a seguir explica os
operadores lógicos.
Operador Descrição Exemplo
&& And (e) (x < 10 && y > 1) é true
|| Or (ou) (x==5 || y==5) é false
! Not (não) !(x==y) é true
&&/and ||/or !/not

V && V = V V || V = V !V = F
V && F = F V || F = V !F = V
F && V = F F || V = V
F && F = F F || F = F
Operadores bit a bit (bitwise)
Estruturas de Seleção
(Condicionais)
var d = new Date();
var time = d.getHours();
if (time<=11)
{
document.write("<b>Bom dia!</b>");
}
else if (time>=12 && time<18)
{
document.write("<b>Boa tarde!</b>");
}
else
{
document.write("<b>Boa noite!</b>");
}
Estruturas de Seleção
(Condicionais)
var d=new Date();
dia=d.getDay();
switch (dia)
{
case 5:
document.write("Finalmente sexta-feira!");
break;
case 6:
document.write("Super sábado!");
break;
case 0:
document.write("Domingo, descansar ");
break;
default: //Não é obrigatório
document.write("Cadê o final de semana?");
}
Estruturas de Repetição
for (var=valorInicial; var<=valorFinal;var=var+incremento)
{
//código para ser executado
}
• Exemplo
var i=0;
for (i=0;i<=5;i++)
{
document.write("O número é " + i);
document.write("<br />");
}
while (var<=valorFinal)
{
}
• Exemplo
var i=0;
while (i<=5)
{
i++;
}
do
{
}
while (var<=valorfinal);
• Exemplo
var i=0;
do
{
i++;
}
while (i<=5);
Janela de Interação
alert(“Thank you, Swapnil for trying this
demo.”);
var name;
name = prompt(“What is your
name?”,”Frank”);
var r = confirm(“Are you certain that

you want do delete?”);
Funções
• Uma função em Javascript pode ser escrita de acordo com a seguinte
sintaxe:
function <nome>([parâmetros])
{
[<instruções>];
[<return(expressão)>];
}
• <nome>: O nome atribuído à função.

• <parâmetros>: Uma informação adicional.
• <instruções>: Processamento do corpo da função.
• <return(expressão)>: De forma opcional uma função pode retornar um
valor. O tipo de saída não é especificado.
Exemplo de Funções
function bemvindo() function somar(valor1, valor2)
{ {
alert(“Bem-vindo”); mensagem(valor1 + valor2);
} }
function mensagem(msg) function somar2(valor1, valor2)

{ {
alert(msg); var r = valor1 + valor2;
} return(r);
}
Funções
• Em Javascript as funções também são objetos,
podem ser usadas como qualquer outro objeto,
elas podem ser armazenadas em variáveis, objetos
e arrays.
• Funções podem ser passadas como parâmetros
(callback) para outras funções e podem ser
retornadas por funções também.
Definindo funções
• Função nomeada:
function olaMundo(msg){
console.log(msg);
}
• Função anônima:
var olaMundo = function(msg){

console.log(msg);
}
Definindo funções
• Função anônima autoexecutáveis:
(function (msg) {
console.log(msg)
})("oi");
Definindo funções
• Uma função que retorna outra função:
//Uma função que retorna outra função

var olaMundo = function(msg) {
var padrao = "oi";
return function() {
console.log(padrao + " " + msg);
};
};
var teste = olaMundo("pessoal");
teste(); //oi pessoal
Definindo funções
• Uma função de Callback é uma função que é
utilizada como parâmetro em outra função.
var executa = function(funcCallback){
var prefixo = "mensagem: " ;
funcCallback(prefixo + "oi");
};
Definindo funções
• Passando a função nomeada como callback:
var minhaFuncao = function(msg){

console.log(msg);
};
executa(minhaFuncao); //mensagem: oi
• Ou passando uma função anônima como callback:
executa( function(msg){
console.log(msg);
});//mensagem: oi
Definindo funções
• Uma função é dita construtora quando sua chamada vem
precedida da palavra chave new. São utilizadas para criação
de novas instâncias de objeto.
function Pessoa(nome, idade) {

this.nome = nome;
this.idade = idade;
}
var p = new Pessoa("Maria" , 50);
• a palavra chave “this” representa a instância do objeto em

questão.
Definindo funções
• É chamada de função encadeada as funções que retornam a
própria instância (this) do seu contexto.
var obj = {
metodoA: function () {
console.log("A");
return this;
},
metodoB: function () {
console.log("B");
return this;
},
metodoC: function () {
console.log("C");
return this;
}
};
obj.metodoA().metodoB().metodoC();
Eventos
• Eventos são ações que podem ser capturas pelo
navegador.
• Exemplos de eventos:
• Um clique do mouse
• Carregamento (ou descarregar) da página
• Movimento do mouse
• Selecionando um campo de entrada em um formulário HTML
• Submeter um formulário HTML
• Ao clicar em uma tecla
• Os eventos são utilizados em combinação com funções
Javascript.
• http://www.w3schools.com/jsref/dom_obj_event.asp
onLoad e onUnload
• Disparados quando o usuário entra ou deixa (sai) da página.
• Aplicado na tag BODY.
function mensagem(msg)
{
alert(msg);
}
</script>
</head>
<body onload="mensagem('Entrou na página')"
onunload="mensagem('Deixou a página')">
</body>
</html>
onFocus, onBlur, onChange e
onKeyPress
• onFocus: Ocorre quando o foco vai para um input.
• onBlur: Ocorre quando o input é deixado (perdeu o foco);
• onChange: Ocorre quando o valor do input é modificado e
quando perde o foco.
• OnKeyPress: Ocorre quando uma tecla é pressionada.
• OnKeyDown: Ocorre quando uma tecla é segurada.
• OnkeyUp: Ocorre quando uma tecla é solta.
• Aplicado ao INPUT TEXT, PASSWORD, TEXTAREA e

SELECT.
onFocus, onBlur, onChange e
onKeyPress
onfocus<br />
<input type="text" size="30" id="x1“
onfocus="mensagem('Entrou')">
<br /><br />
onblur<br />
<input type="text" size="30" id="x2"
onblur="mensagem('Deixou')">
<br /><br />
onchange<br />
<input type="text" size="30" id="x3"
onchange="mensagem('Mudou o valor')">
<br /><br />
onkeypress<br />
<input type="text" size="30" id="x4“
onkeypress="mensagem(this.value)">
onClick
• Ocorre quando o usuário clica em um controle que
suporte este evento.
• Aplicado ao BUTTON, CHECKBOX e RADIO.
<input type="button" id="btn" value="Clica aí“

onclick="mensagem('Fui clicado.')">
<input type="checkbox" id="ck" value="Ok"

onclick="mensagem(this.value)">
onSubmit
• Ocorre antes da submissão (POST) do formulário ao
servidor.
• Aplicado na tag FORM.
<form method="POST" action="pagina.html"

onsubmit="mensagem('Submetendo os dados‘)">
<input type="submit" id="btnMandaBala“

value="Manda Bala">
</form>
onMouseOver e onMouseOut
• Ocorre quando o mouse entra em cima de um objeto ou
deixa o objeto.
• Aplicado em diversas tags.
<a href="http://www.unoeste.br"
onmouseover="mensagem('Passou o mouse no link.‘)">
Unoeste</a>
<br />
<br />
<a href="http://www.unoeste.br/fipp"
onmouseout="mensagem('Tirou o mouse do link.‘)">
FIPP</a>
<br />
<br />
<input type="button" id="btn" value="Passe o mouse"
onmouseover="mensagem('Oi')"
onmouseout="mensagem('Tchau')">
Acessando elementos
• DOM é organizado
em árvore.
Acessando elementos
• DOM (Document Object Model - Modelo de
Objetos de Documentos).
• É uma especificação da W3C, independente
de plataforma e linguagem (cross browser).
• Representa como as marcações em HTML,
XHTML e XML são organizadas e lidas pelo
navegador.
Acessando elementos
• Com a árvore DOM é possível:
1. Consultar ou selecionar elementos individuais.
2. Percorrer os elementos na árvore, localizar os
ascendentes, irmãos e descendentes de qualquer
elemento.
3. Consultar e configurar os atributos e conteúdos dos
elementos.
4. Modificar a estrutura do documento, criando,
inserindo e excluindo nós.
5. Trabalhar com formulários HTML.
Acessando elementos
• HTML/DOM - Exemplo:
<html>
<head>
<meta charset="utf-8" />
<title>Exemplo DOM</title>
</head>
<body>
<h1>Título</h1>
<p>Texto do <i>parágrafo</i>.</p>
</body>
</html>
Acessando elementos
document
<html>
<head> <body>
<h1> <p>
<title>
“Exemplo DOM” “Título” “Texto do” <i> “.”
“Parágrafo”
Acessando elementos
• Cada documento HTML carregado em uma janela
do navegador se torna um objeto, o document.
• O objeto document permite acesso a todos os
elementos HTML da página a partir de um script.
• Coleções disponibilizadas pelo objeto document:
Coleção Descrição
anchors[] Retorna um vetor contendo todas as âncoras do
documento.
forms[] Retorna um vetor contendo todos os
formulários do documento.
links[] Retorna um vetor contendo todos os links do
documento.
Acessando elementos
• O objeto document disponibiliza alguns métodos
para acesso aos elementos da árvore:
document.getElementById(“”)
document.getElementsByName(“”)
document.getElementsByTagName(“”)
document.getElementsByClassName(“”)
document.querySelector(“”)
document.querySelectorAll(“”)
Acessando elementos
• document.getElementById(“”): seleciona um elemento pelo
ID.
• document.getElementsByName(“”): seleciona vários
elementos pela tag name.
• document.getElementsByTagName(“”): seleciona vários
elementos pelo tipo da tag.
• document.getElementsByClassName(“”): selecione vários
elementos pelo atributo class.
• document.querySelector(“”): seleciona o primeiro elemento
baseado num seletor CSS (HTML5).
• document.querySelectorAll(“”): seleciona vários elementos
baseados num seletor CSS (HTML5).
Acessando elementos
function pegaValor()
{
alert(document.getElementById("nome").value);
}
</script>
</head>
<body>
<form id="formulario">
<input type="text" id="nome">
<input type="button" id="btn2" value="Pegar valor“
onclick="pegaValor()">
</form>
Acessando elementos e
adicionando eventos
• É possível adicionar eventos no DOM através do método
addEventListener:
objeto.addEventListener(“click”, function(){alert(‘oi’)}, false);
objeto.addEventListener(“mousemove”, pegaMouse, false);
• O primeiro parâmetro é o nome (string) do evento (sem

“on”);
• O segundo é a função que vai tratar o evento;
• O terceiro o parâmetro (boleano), indicará se os eventos
ocorridos dentro da função deverão borbulhar (false), ou
seja, iniciar a chamada para outros eventos de elementos da
sua hierarquia.
Acessando elementos e
adicionando eventos
• Os eventos DOMContentLoaded e load são
disparados quando a página é carregada.
• DOMContentLoaded: é disparado quando a árvore
DOM está pronta, e não significa que a página está
totalmente carregada.
• load: é disparado quando TODOS os componentes
da página são carregados (carregamento
completo): imagens, CSS, javascripts, frames, flashs
e etc.
Acessando elementos
var link = document.getElementsByTagName("a");
for (var i = 0; i < link.length; i++) {
link[i].addEventListener("click", function ()
{ alert('oi'); }, false);
}
Manipulando CSS com
Javascript
• É possível manipular as propriedades de estilo dos
elementos HTML.
• Exemplos:
document.getElementById(“div_id”).style.backgroundColor = "red";
document.getElementById(“div_id”).className = “textoVermelho”;
• Mapeamento CSS x Javascript

Referências
• w3schools – http://www.w3schools.com/js/js_intro.asp
• Guia de Orientação e Desenvolvimento de Sites – HTML, XHTML, CSS
e JavaScript/Jscript – José Augusto N. G. Manzano e Suely Alves de
Toledo – Editora Érica.
• Javascript – O guia definitivo. David Flanagan. O’Reilly.

Programacao ClientSide LP1 Ciencia Da Computacao

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Programacao ClientSide LP1 Ciencia Da Computacao

Enviado por

Direitos autorais:

Formatos disponíveis

Linguagem de

• Desconsidera o bloco delimitado pelo comentário.

<script type="text/javascript" src="xxx.js">

• E agora, qual é o resultado final de X?

parseInt(v1, 10); //resultado = 42

isNaN(“oi”); // resultado = true (não é

Operador Descrição Mesmo que Resultado

&&/and ||/or !/not

var r = confirm(“Are you certain that

• <nome>: O nome atribuído à função.

function mensagem(msg) function somar2(valor1, valor2)

var olaMundo = function(msg){

//Uma função que retorna outra função

var minhaFuncao = function(msg){

function Pessoa(nome, idade) {

var p = new Pessoa("Maria" , 50);

• a palavra chave “this” representa a instância do objeto em

• Aplicado ao INPUT TEXT, PASSWORD, TEXTAREA e

<br /><br />

<br /><br />

<br /><br />

<input type="button" id="btn" value="Clica aí“

<input type="checkbox" id="ck" value="Ok"

<form method="POST" action="pagina.html"

<input type="submit" id="btnMandaBala“

“Exemplo DOM” “Título” “Texto do” <i> “.”

• O primeiro parâmetro é o nome (string) do evento (sem

for (var i = 0; i < link.length; i++) {

• Mapeamento CSS x Javascript

Você também pode gostar