Cur So Javascript

Java Script
Silvio A. Carro Cristiane Rizo

Unoeste/FIPP
2014
js...
JavaScript is the scripting language of the Web.
All modern HTML pages are using JavaScript to

add functionality, validate input, communicate with
web servers, and much more.
JavaScript is easy to learn. You will enjoy it.
Introdução Operadores lógicos e aritméticos E/S
Comandos condicionais Eventos Variáveis
Funções Interações com o usuário.

js... (história)
 Tecnologia desenvolvida pela Netscape em

1995
 Objetivos: incorporar conteúdo dinâmico

em páginas HTML estáticas
 Move algum processamento lógico para o

lado do cliente
 Linguagem de script de alto nível, baseada

em objeto
js... (para que serve?)
 Foi projetada para aumentar interatividade das

páginas web:
 Validação de campos de formulários, interação com o
usuário (p.ex., tratamento de cliques de botões), detecção
de navegadores, conexão entre sistemas, etc
 Seu processamento pode ser feito tanto na máquina

cliente (browser) quanto no servidor
 Não gera programa executável do tipo arquivo .exe

js... (como usar?)
A programação JavaScript deve vir dentro da tag

script
Obsoleto
no html5
<script language=“javascript” type=“text/javascript”>
programação
</script>
js... (como usar?)
 Uma tag <script> pode ser definida numa seção
head, numa seção body e também pode ser
definida externamente:
 Na seção head, os scripts são executados quando são
chamados ou quando algum evento ocorre;
 Na seção body, os scripts são executados na carga da
página web
 De forma externa, um arquivo com a extensão “.js”

js... (exemplo)
 Exibindo uma mensagem

A mensagem será
executada na carga da
página
...
<body>
<script type="text/javascript">
alert("Olá Mundo");
</script>
</body>
...
js... (como usar?)
 A forma mais habitual é definir a codificação javascript

em um arquivo externo (extensão .js) que será acionado
no html.
Diretório onde o
arquivo foi salvo
<script type="text/javascript" src="scripts/testes.js" >
</script>
js... (primeiros exemplos)
 Método para imprimir um texto em uma página html
...
<body>
document.write("Texto inserido com instruções JavaScript");
</script>
</body>
js... (primeiros exemplos)
O script abaixo lê o nome do usuário e dá boas-vindas.
...
<body>
/* Script de Boas-Vindas */
nome = prompt (“Entre com seu nome: : , “Digite-o aqui: ”);
document.write (“Oi “ + nome );
</script>
</body>
js... (janelas 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?”);
if (r==true)
document.write("yes!!!");
js... (considerações iniciais)
• 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.
js... (variáveis)
• Os nomes de variáveis são case sensitive (y e Y são 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.
var x;
var curso;
var x=5;
var curso="Informática";
x=5;
curso="Informática";
js... (convertendo variáveis)
Em Javascript temos duas funções globais:

parseInt(): Converte uma string para um número inteiro.
parseFloat(): Converte uma string para um número real.
isNaN(): Valida se o valor recebido não é número
var v1="042";
var v2="42.33";
num1=parseInt(v1); //resultado = 42
num2=parseInt(v2); // resultado = 42
valor=parseFloat(v1); //resultado = 42
valor=parseFloat(v2); //resultado = 42.33
isNaN(“oi”); // resultado = true (não é numérico)

js... (como usar?)
Usando valores numéricos
n1 = prompt("Digite o 1º valor" , "Digite aqui: ");
n2 = prompt("Digite o 2º valor" , "Digite aqui: ");
res = parseInt (n1) + parseInt (n2);
Document.Write ("Resultado = ", res);

js... (operadores)
 Aritméticos: igual a Java, C e C#
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
++ Incremento x=++y x=6
-- Descremento x=--y x=4
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
js... (operadores)
 Relacionais: igual a Java, C e C#
Operador Descrição Mesmo que Resultado

== É igual x==8 False
!= Diferente x!=8 True
> Maior que x>8 False
< Menor que x<8 True
>= Maior ou igual que x>=8 False
<= Menor ou igual que x<=8 True
js... (operadores)
 Lógicos: igual a Java, C e C#
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
js... (estruturas de decisão)
Decisão Simples:
if <(condição)>{
/*Instruções para condição verdadeira*/
}
Decisão Composta:
if <(condição)>{
/*Instruções para condição verdadeira*/}
else{
/*Instruções para condição falsa*/}
Símbolo Significado
|| Ou (OR)
&& E (AND)
! Não (NOT)
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>");
}
Switch:
switch (dia_semana)
{
case 1: document.write(“Janeiro”);
break;
case 2:document.write(“Fevereiro”);
break;
...
}
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?");
}
js... (estruturas de repetição)
for
for(condicaoInicial;condicaoFinal;incremento)
executa bloco de código;
}
for (i=0; i<= 10; i++)
{
document.write('Linha '+i);
}
while
while (condicao) {
bloco de operação
while (var1 <= 10)

{
document.write('linha '+var1);
var1++;
}
do ... while
do
bloco de operacao
while (condicao );
Strings
Usado para manipular cadeias de caracteres, é imutável, ou
seja, seus métodos não atualizam seu próprio conteúdo.
Declaração e uso:
palavra = new String(“javascript”);

palavra = “javascript”;
Strings
Propriedade:
length: retorna a quantidade de caracteres
palavra = “javascript”;
palavra.length; → 9
Strings (Métodos) http://www.w3schools.com/jsref/jsref_obj_string.asp
charAt(index) Retorna o caracter de um determinado índice
concat(s1,s2,...sn) Retorna a concatenação de strings
indexOf(value,start) Retorna a posição de primeira ocorrência de uma substring
lastIndexOf(val,start) Retorna a posição de última ocorrência de uma substring
replace(value,newvalue) Realiza busca e troca na string. Retorna o valor modificado
split(separator,limit) Divide a string em várias partes
data = “sexta-feira, 07 de Julho de 1777”
dia = data.split(“,”);
document.write(dia[0]); // sexta-feira
document.write(dia[1]); // 07 de Julho de 1777
substr(start,end) Retorna uma parte da string

substring(from,to) Retorna uma parte da string
toLowerCase() Retorna o conteúdo da string em minusculos
toUpperCase() Retorna o conteúdo da string em minusculos
trim() Remove os espaços em branco do inicio e fim da string
Strings
Métodos de formatação:
link(“http://a.com”):<a href=“http://a.com”> texto </a>

small(): <small> texto </small>
big(): <big> texto </big>
strike(): <strike> texto </strike>
sub(): <sub> texto </sub>
sup(): <sup> texto </sup>
italics(): <i> texto </i>
bold(): <b> texto <texto>
fontcolor(“color”): <font color=“cor”> texto </font>
fontsize(tamanho): <font size=tamanho> texto </font>
Array
Usado para representar coleções de qualquer tipo na forma de
vetores indexados.
elementos = new Array(4);
elementos = new Array(“ford”,”gm”,”kia”,”bmw”);
O tamanho de um array pode aumentar ou diminuir:

elementos.length++;
elementos.length--;
Quando insere, o valor do elemento adicionado é undefined
Quando remove, o valor do último elemento é perdido

Array
Métodos:
elementos = new Array(“ford”,”gm”,”kia”,”bmw”);
reverse()
elementos.reverse(); → bmw,kia,gm,ford
sort()
elementos.sort(); → bmw,ford,gm,kia
Array
Matrizes:
matriz = new Array(new Array("a","b"),

new Array("c","d"));
matriz = new Array(new Array(2),new Array(3));

matriz[0][0]="a";
matriz[0][1]="b";
matriz[0][2]="c";
matriz[1][0]="d";
matriz[1][1]="e";
matriz[1][2]="f";
matriz.length → 2
matriz[0].length → 3
Array
Exemplo de Matriz Posição(0,0):0
Posição(0,1):3
Posição(0,2):6
<script> Posição(1,0):2
var tam_linha = 3; Posição(1,1):5
var quant_linha = 2; Posição(1,2):8
m = new Array(new Array(quant_linha),
new Array(tam_linha));
for(i=0;i < quant_linha; i++)
for(j=0;j < tam_linha ;j++)
m[i][j] = 2*i + 3*j;
for(i=0;i < quant_linha; i++)
for(j=0;j < tam_linha;j++)
document.write("<b> Posição("+i+","+j+"):</b>" +
m[i][j]+"<br>");
</script>
Date
Usado para representar datas.
dataqualquer = new Date();
– Cria um objeto com a data atual.

– A data utilizada é a data do sistema do usuário
Construtores:
data = new Date(ano,mês,dia);

data = new Date(ano,mês,dia,hora,minuto,segundo);
Date
Métodos
– getDate() – setDate(dia)
– getDay() – setDay(dia)
– getHours() – setHours(hora)
– getMinutes() – setMinutes(minuto)
– getMonth() – setMonth(mês)
– getSeconds() – setSeconds(segundo)
– getTime() – setTime(tempo)
– getTimezoneOffset() – setYear(ano)
– getYear()
js... (exercícios)
1) Desenvolva uma página web que através de um javascript mude sua
cor de fundo de acordo com o período (manhã/tarde/noite)
Pesquise sobre a utilização da classe Date.
2) Desenvolva uma página html+js que peça ao usuário um valor

numérico maior que zero (use o prompt), após mostre uma tabela
com a taboada do 1 ao 10 de número informado.
3) Desenvolva um programa com JavaScript que simule um jogo de

adivinhação. Primeiramente, o programa deverá pedir o nome do
jogador, depois sortear um número entre 0 e 100. Após o sorteio,
inicia-se o jogo e o jogador deverá tentar adivinhar o número
sorteado. A cada tentativa, o jogo deverá informar se o “chute” do
jogador foi maior ou menor do que o número a ser adivinhado. O
jogo termina após vinte tentativas erradas ou quando o jogador
acertar o número sorteado e, nesse caso, informe a quantidades de
tentativas que foram necessárias. Após o término do jogo será
mostrado o nome do jogador seguido da quantidade de tentativas.
Pesquise como calcular um número randômico em javaScript.
js... (eventos)
 São fatos que ocorrem durante a execução do
sistema, a partir dos quais o programador
pode definir ações a serem realizadas pelo
programa.
 Segue exemplo...
js... (eventos)
<html>
<head>
<title>Clicar no botão</title>
</head>
<body>
<input type=“submit"
value="Clique aqui"
onclick='alert("Ola");'/>
</body>
</html>
Quando for dado um clique no

botão é executado o código (em
JavaScript), neste caso:
js... (eventos)
 Um evento é gerado como resultado de uma

ação:
 Um clique,
 Um movimento do mouse,
 Uma seleção de texto,
 O abandono da página
 etc.
 O tratamento de eventos é feito por partes de

código associados a eventos específicos
js... (eventos)
onload - Ocorre na carga do documento. Ou seja, só
ocorre no BODY do documento.
onunload - Ocorre na saída do documento. Também só
ocorre no BODY.
onchange - Ocorre quando o objeto perde o foco e
houve mudança de conteúdo.
Válido para os objetos Text, Select e Textarea.

js... (eventos)
onblur - Ocorre quando o objeto perde o foco, independente
de ter havido mudança.
onfocus - Ocorre quando o objeto recebe o foco.

onclick - Ocorre quando o objeto recebe um Click do Mouse.

Válido para os objetos Button, Checkbox, Radio, Link, Reset e Submit.
onselect - Ocorre quando o objeto é selecionado.

Válido para os objetos Text e Textarea.
onsubmit- Ocorre quando um botão tipo Submit recebe um

click do mouse.
Válido apenas para o Form.
js... (+ eventos)
Eventos de mouse Gerados quando o usuário:
Move o ponteiro do mouse para dentro da

onmouseover
área de um elemento.
Move o ponteiro do mouse para fora da
onmouseout
área de um elemento.
Pressiona qualquer um dos botões do
onmousedown
mouse.
onmouseup Libera qualquer um dos botões do mouse.
Move o mouse dentro da área de um
onmousemove
elemento.
Efetua um duplo clique com o botão
ondblclick
esquerdo do mouse sobre um elemento.
js... (+ eventos)
Eventos de teclado Gerados quando o usuário:
Pressiona e solta uma tecla (o ciclo

onkeypress
completo).
Pressiona uma tecla (ainda com a tecla

onkeydown
abaixada).
onkeyup Solta uma tecla.

js... (funções)
Definidas com a palavra-chave function
– pode ser usada globalmente em todo documento html
onde ela for definida
A sintaxe geral é a seguinte:
function nome(argumentos) {
sequência de instruções
}
js...
<html>
(funções)
<head>
function soma(a,b)
{ return a + b;
}
</script>
</head>
<body>
<H1> Resultados </H1>
<script>
document.write("<font color=red> 4 + 5 =" +
soma(4,5)+"</font><br/>");
document.write("<font color=green> 2 + 9 =" +
soma(2,9)+"</font>");
</script>
</body>
</html>
js... (funções)
 Exemplo: definindo uma função (de forma externa)
que exiba a mensagem ALÔ MUNDO!!. Essa função
será chamada no evento onclick de um botão
function Exibe() Salvar no

{ diretório scripts
alert("ALÔ MUNDO!!");
}
funcoes_javascripts.js
js... (funções)
<html>
<head>
<title> Usando JavaScript</title>
<script type="text/javascript" src="../scripts/funcoes_javascripts.js">
</script>
</head>
<body>
Chamando uma função javascript no evento onClick do button <BR>
<input type="submit" value="Clique Aqui..." onClick="Exibe();"/>
</body>
</html>
É possível chamar mais de uma função para

o mesmo evento
onfocus="exibe_data();exibe_data_2();"
js... (funções)
 Exemplo 2: Suponha uma função que tenha como objetivo

informar se uma pessoa é maior ou menor de idade, recebendo
como parâmetro a sua idade.
function Idade (Anos)

{
if (Anos > 17)
{ alert ("Maior de Idade") }
else
{ alert (“Menor de Idade") }
}
js... (funções)
No formulário teremos uma caixa de texto para informar a
idade e um button para chamar a função.
<form>
<input type=text size=2 maxlength=2 name=“Ano“/>
<input type=“submit" value= "Ver idade"
onClick="Idade(Ano.value)“/>
</form>
js...(exemplo: tratamento de form)
<form action="pag.html" method="post" name="dados"
onSubmit="return enviardados(this);" >
Nome completo: <br/>
<input name="tx_nome" type="text" class="formataform"
value="nome" size="52“/> <br/>
E-mail: <br/>
<input name="tx_email" type="text" size="52“
class="formataform“/><br/>
Mensagem: <br/>
<textarea name="tx_mensagem" cols="50" rows="8“
class="formataform"></textarea><br/>
<input name="Submit" type="submit" value="Enviar dados“/>
<input name="Reset" type="reset" value="Redefinir“/>
</form>
<style type="text/css">
.formataform_erro {
background-color: #CCFF33;}
.formataform {
background-color: #EEEEDD;}
</style>
<script language="JavaScript" >
function enviardados(dados){
if(dados.tx_nome.value==""||dados.tx_nome.value.length <8)
{
alert( "Preencha campo NOME corretamente!" );
dados.tx_nome.focus();
dados.tx_nome.value=“”;
dados.tx_nome.className="formataform_erro";
return false;
}
if( dados.tx_email.value==""||dados.tx_email.value.
indexOf('@')==-1 || dados.tx_email.value.indexOf('.')==-1 )
{
alert( "Preencha campo E-MAIL corretamente!" );
dados.tx_email.value=“”;
dados.tx_email.focus();
return false;
}
return true;
}
</script>
Exercícios
a) Atualmente é comum que se permita o acesso à determinados sites
somente com uma operação de pré validação de acesso. A intenção é saber
se é mesmo um humano que está acessando o site.
Uma técnica utilizada é a criação de captchas, que são imagens geradas

automaticamente e que mostram caracteres embaralhados.
Mas, podemos fazer algo mais simples, como:

a) Fazer perguntas sobre a data de hoje (dia, mês ou ano)
b) Cadastrar em uma matriz um conjunto de perguntas e respostas simples
e assim questionar o usuário.
Desenvolva as duas soluções acima, para isso crie a página login.html com
um input que permita receber a resposta do usuário e a página secreta.html
que será acessada somente com o acerto do usuário.
Use o objeto open(“url”) para acessar a página secreta.

Ajuda
<html>
<head>
modo=parseInt(Math.random()*10); // variável global
function verifica(valor)
{ document.write("modo: "+modo);
if(valor==modo)
open("http://www.google.com");
}
</script>
</head>
<body>
<form>
<input type="text" size="2" maxlength="2" name="teste"/>
<input type="submit" value="validar"
onClick="verifica(teste.value)"/>
</form>
</body>
</html>
js...document object model (DOM)
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.
Propriedades (read/write)
bgColor fgColor linkColor alinkColor vlinkColor
<form>
<input value="1" name="cor“
onclick="document.bgColor='blue';document.fgColor='white'"
type="radio" checked="true"> <b> AZUL </b> <br>
<input value="2" name="cor"
onclick="document.bgColor='yellow';document.fgColor='green'"
type="radio"> <b> AMARELO </b> <br>
<input value="3" name="cor"
onclick="document.bgColor='black';document.fgColor='white'"
type="radio"> <b> PRETO </b> <br>
</form>
Com JavaScript/DOM você pode:
• Modificar os elementos HTML de uma página
• Modificar os atributos HTML de uma página
• Trocar CSS de uma página
• Acessando os elementos:
• por id
• pelo nome da tag
• pelo nome (atributo name)
Acesso pelo Id:
É a forma mais fácil de acessar os elementos.
O exemplo abaixo procura o elemento pelo id="intro":
<p id=“intro”> teste </p>
var elemento=document.getElementById("intro");
elemento.innerHTML -> valor do elemento: “teste”

elemento.align=“center” -> modifica o atributo alinhamento
elemento.innerHTML=“teste modificado"; -> modifica o valor
Acesso pelo nome da tag:
O exemplo abaixo busca todos os elementos <p>

pertencentes a um elemento com id=„main‟ e faz o
alinhamento centralizado para o primeiro <p> encontrado
var ediv=document.getElementById("main");
var ep=ediv.getElementsByTagName("p");
ep[0].align="center";
<div id="main">
<p> paragrafo 1 </p>
<p> paragrafo 2 </p>
</div>
Exemplo completo:
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>This example demonstrates the<b>getElementsByTagName</b>method</p>
</div>
<script>
var ediv=document.getElementById("main");
</script>
</body>
</html>
Exemplo completo com evento:
<html>
<head>
<script>
function muda()
{ var ediv=document.getElementById("main");
}
</script>
</head>
<body>
<div id="main" onclick="muda()">
<p>The DOM is very useful.</p>
<p>This example demonstrates the<b>getElementsByTagName</b>method</p>
</div>
</body>
</html>
Exemplo com troca de imagens:
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<img id="image" src="smiley.gif" width="160" height="120">

<p>The original image was smiley.gif, but the script changed it to
landscape.jpg</p>
</body>
</html>
Enviando a própria referência:
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
Modificando atributos do CSS de cada elementos:
<html>
<head>
<script>
function mOver(obj)
{ obj.style.background="red";
obj.innerHTML="Thank You"
}
function mOut(obj)
{ obj.innerHTML="Mouse Over Me"
obj.style.background="blue";
}
</script>
</head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:aqua; width:120px;height:20px;
padding:40px;">Mouse Over Me</div>
</body>
</html>
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.
<form action="pag.html" method="post" name="dados"
onSubmit="return enviardados();" >
Nome completo: <br/>
<input name="tx_nome" type="text" class="formataform"
value="nome" size="52“/> <br/>
E-mail: <br/>
<input name="tx_email" type="text" size="52“
class="formataform“/><br/>
Mensagem: <br/>
<textarea name="tx_mensagem" cols="50" rows="8“
class="formataform"></textarea><br/>
<input name="Submit" type="submit" value="Enviar dados“/>
<input name="Reset" type="reset" value="Redefinir“/>
</form>
<style type="text/css">
.formataform_erro {
background-color: #CCFF33;}
.formataform {
background-color: #EEEEDD;}
</style>
<script language="JavaScript" >
function enviardados(){
if(document.dados.tx_nome.value==""||document.dados.tx_nome.value.length <8)
{ alert( "Preencha campo NOME corretamente!" );
document.dados.tx_nome.focus();
document.dados.tx_nome.className="formataform_erro";
return false;
}
if( document.dados.tx_email.value==""||document.dados.tx_email.value.
indexOf('@')==-1 || document.dados.tx_email.value.indexOf('.')==-1 )
{ alert( "Preencha campo E-MAIL corretamente!" );
document.dados.tx_email.focus();
return false; }
if (document.dados.tx_mensagem.value=="")
{ alert( "Preencha o campo MENSAGEM!" );
document.dados.tx_mensagem.focus();
return false; }
if (document.dados.tx_mensagem.value.length < 50 )
{ alert( “Campo MENSAGEM deve ter mais de 50 caracteres!" );
document.dados.tx_mensagem.focus();
return false;
}
return true;
}
</script>
js... (botão sensível ao mouse)
<body>
<script>
<p align="center">
imagens =
new Array(new Array(2), <a href="page1.htm"
new Array(2)); OnMouseOver="muda(0,imagem1)"
imagens[0][0] = "play.png"; OnMouseOut="normal(0,imagem1)">
imagens[0][1] = "stop.png";
<img src="play.png" name="imagem1">
imagens[1][0] = "hot1.png";
imagens[1][1] = "hot2.png";
</a>
<a href="page2.htm"
function normal( i , nome ) OnMouseOver="muda(1,imagem2)"
{nome.src = imagens[i][0]; } OnMouseOut="normal(1,imagem2)">
<img src="hot1.png" name="imagem2">
function muda( i , nome )
{ nome.src = imagens[i][1]; }
</a>
</script> </body>
js... (exercícios)
1. Faça as seguintes alterações no exemplo do slide 115:

a) Ao invés de informar em um alert que a entrada de dados
está incorreta, enfatize com cor de fundo vermelho e
borda mais grossa, as entradas de dados que estão
incorretas.
b) No preencimento correto de todos os dados, mostre uma
mensagem (alert) com a seguinte informação “<nome
informado>, sua mensagem foi enviada. Aguarde nosso
retorno”
js... (exercícios)
2. Desenvolva um menu dinâmico como apresentado na figura

abaixo:
Aba1 Aba2 Aba3 Aba4
Opção 1 | Opção 2 | Opção 3 | Opção 4

js... (exercícios)
Ajuda para o exercício 2
submenus=new Array(2);
submenus[0]="<a href=''>item1</a>|<a href=''>item2</a>|<a href=''>item3</a>|<a
href=''>item4</a>";
submenus[1]="<a href=''>item5</a>|<a href=''>item6</a>";
function selSubMenu(ind)
{ var menu=document.getElementsByTagName("li");
menu[ind].style.color="red";
var x=document.getElementById("submenu");
x.innerHTML=submenus[ind];
}
</script>
<body>
<div style="background-color:#99FFCC;height:25px;>
<ul style="list-style-type:none;">
<li onMouseOver="selSubMenu(0)" style="display:inline">menu 1</li> |
<li onMouseOver="selSubMenu(1)" style="display:inline">menu 2</li>
</ul>
</div>
<div style="background-color:#CCFF00;height:25px;">
<p id="submenu"> teste </p>
</div>
</body>
</html>

Cur So Javascript

Enviado por

Dados do documento

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

Cur So Javascript

Enviado por

Direitos autorais:

Formatos disponíveis

Java Script

Silvio A. Carro Cristiane Rizo

All modern HTML pages are using JavaScript to

JavaScript is easy to learn. You will enjoy it.

Introdução Operadores lógicos e aritméticos E/S

Comandos condicionais Eventos Variáveis

Funções Interações com o usuário.

 Tecnologia desenvolvida pela Netscape em

 Objetivos: incorporar conteúdo dinâmico

 Move algum processamento lógico para o

 Linguagem de script de alto nível, baseada

 Foi projetada para aumentar interatividade das

 Seu processamento pode ser feito tanto na máquina

 Não gera programa executável do tipo arquivo .exe

A programação JavaScript deve vir dentro da tag

<script language=“javascript” type=“text/javascript”>

 Uma tag <script> pode ser definida numa seção

head, numa seção body e também pode ser

 Na seção head, os scripts são executados quando são

chamados ou quando algum evento ocorre;

 Na seção body, os scripts são executados na carga da

 De forma externa, um arquivo com a extensão “.js”

 Exibindo uma mensagem

 A forma mais habitual é definir a codificação javascript

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

document.write("Texto inserido com instruções JavaScript");

O script abaixo lê o nome do usuário e dá boas-vindas.

var r = confirm(“Are you certain that

• Javascript é case sensitive.

• Todo final de instrução deve ser finalizado com o caracter “;”.

• O código Javascript pode ser agrupado em blocos dentro da

• Os nomes de variáveis são case sensitive (y e Y são variáveis diferentes).

• Não existe um sessão pré-definida para declaração das variáveis.

• É uma linguagem que usa tipagem dinâmica de dados, ou seja, não se

Em Javascript temos duas funções globais:

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

Usando valores numéricos

n1 = prompt("Digite o 1º valor" , "Digite aqui: ");

n2 = prompt("Digite o 2º valor" , "Digite aqui: ");

res = parseInt (n1) + parseInt (n2);

Document.Write ("Resultado = ", res);

Operador Exemplo Mesmo que Resultado

 Relacionais: igual a Java, C e C#

Operador Descrição Mesmo que Resultado

 Lógicos: igual a Java, C e C#

Operador Descrição Exemplo

&&/and ||/or !/not

executa bloco de código;

while (var1 <= 10)

palavra = new String(“javascript”);

length: retorna a quantidade de caracteres

substr(start,end) Retorna uma parte da string

link(“http://a.com”):<a href=“http://a.com”> texto </a>

elementos = new Array(4);

elementos = new Array(“ford”,”gm”,”kia”,”bmw”);

O tamanho de um array pode aumentar ou diminuir:

Quando insere, o valor do elemento adicionado é undefined

Quando remove, o valor do último elemento é perdido

elementos = new Array(“ford”,”gm”,”kia”,”bmw”);

matriz = new Array(new Array("a","b"),

matriz = new Array(new Array(2),new Array(3));

dataqualquer = new Date();

– Cria um objeto com a data atual.

data = new Date(ano,mês,dia);