JavaScript

Linguagem JavaScript
• A linguagem JavaScript é uma linguagem de script para
utilizarmos na WEB. Entre outros recursos ela nos permite
validar os dados de nossos formulários, como por exemplo,
verificar se o dígito confere com um RG informado pelo
usuário, enviar os dados do formulário para um servidor web,
etc.
• Outro ponto interessante para já destacarmos é que a
utilização da linguagem JavaScript se dará dentro de um
documento HTML entre as tags <script> e </script>, há
situações também em que a utilização é feita através de
eventos que ocorrem em nossa página, como por exemplo,
quando o usuário clicar sobre um botão.

Características da Linguagem JavaScript
• Reage a eventos
• Interpretada
• Fracamente Tipada
– Exemplo: string nome = "João"; ou nome = "João";
• Tipagem dinâmica
– Exemplo: x = "João"; x = 10;
• CASE SENSITIVE
– Isto quer dizer que ela diferencia maiúsculas e minúsculas.
Exemplo: Uniban e UNIBAN.

Boas Vindas
<!DOCTYPE >
<html>
<head>
<script type="text/javascript">
alert("Bem vindo a programação em JavaScript!");
</script>
</head>
<body>
Voltamos ao HTML
</body>
</html>

Locais de Inserção e Comentários
<!DOCTYPE html> <html> <head>
alert("Bem vindo a programação em JavaScript!");
/*Comentário
para várias
linhas */
</script>
<noscript type="text/javascript">
"Caso navegador não suporte JavaScript!"
</noscript> </head> <body>
"Voltamos ao HTML
document.write("<p>Voltamos ao Script!</br>" + Date() + "</p>");
//Exibindo a data e hora do micro
</script> </body> </html>

Algumas Palavras Reservadas
abstract continue false in private throw
boolean debugger final instanceOf
protecte
d throws
break default finally implements public transient
byte delete float interface return true
case do for label short try
catch double
functio
n long static typeof
char else goto native super var
class enum if new switch void
comment export int
synchronize
d null while

Criação de Variáveis
• Conceito de variáveis;
• Declaração
– devem iniciar com letras minúsculas ou com o caractere _
(sublinhado). Exemplos:
– notaCiencias1 = 5.4; //correto
– 1notaCiencias = 5.4; //incorreto, iniciou com números

Operadores Aritméticos
• Os Operadores Aritméticos em JavaScript são utilizados para
permitir que façamos operações aritméticas com as variáveis
como por exemplo somar, subtrair, multiplicar, etc.
Operador Descrição Exemplo Resultado
+ Soma x = 3+2; x = 5
- Subtração x = 3-2; x = 1
* Multiplicação x = 3*2; x = 6
/ Divisão x = 3/3; x = 1
% Resto da divisão x = 5%2; x = 1

Operadores de Atribuição
• São utilizados, como em outras linguagens, para atribuir
(passar) um valor para uma variável. Ppode ser feita inclusive
através de outra variável.
Operador Descrição Forma normal
Forma
reduzida
= Atribuição x = 3; x = 3;
+= Mais igual x = x+5 x += 5
-= Menos igual x = x - y x -= y
*= Vezes igual x = x * 2 x *= 2
/= Dividido = z = z / 4 z /= 4
%= Resto da divisão x = x % y x %= y

Exemplo
<!DOCTYPE html>
<html>
<head>
x=3, y=5, z=3;
document.write("<h2> Cálculos Matemáticos " );
document.write("<h2> x+=y = " + (x+=y));
document.write("<h2> x-=y = " + (x-=y));
document.write("<h2> x*=z = " + (x*=z));
document.write("<h2> x/=z = " + (x/=z));
document.write("<h2> y%=z = " + (y%=z));
</script>
</head>
<body> </body> </html>

Incremento e Decremento
++ Incremento x++; x = 4
-- Decremento x--; x = 2

Exemplo
<!DOCTYPE html >
<html>
<head>
a=5, b=3, c=4, d=3;
document.write("<p>a++ = " + (a++) + "</p>");
document.write("<p>++a = " + (++a) + "</p>");
document.write("<p>a-- = " + (a--) + "</p>");
document.write("<p>--a = " + (--a) + "</p>");
//Fim do cabeçalho
</script>
</head>
<body> </body>
</html>

Relacionais
!= Diferente
x != 5
x != 8
false
true
> Maior (desigualdade)
x > 8
x > 4
false
true
< Menor (desigualdade)
x < 8
x < 4
true
false
>= Maior ou igual
x >= 8
x >= 4
false
true
<= Menor ou igual
x =< 8
x =< 4
true
false

Lógicos
Oper Descrição Exemplo Result
&& E (lógico)
(x>4 && y<6)
(x>7 && y<6)
true
false
|| OU (lógico)
(x>4 || y<6)
(x>7 || y<6)
true
true
! Negação
(x>4 || y<6)
!(x>7 || y<6)
true
false

<!DOCTYPE html>
<html>
<head>
a=3, b=5, c=3;
document.write("<h2> Condicionais Reduzidos " );
document.write("<p>a!=b? a : b = " + (a!=b?a:b) + "</p>");
document.write("<p>a>b ? a : b = " + (a>b?a:b) + "</p>");
</script>
</head>
<body>
</body>
</html>

<!DOCTYPE html >
<html>
<head>
a=5, b=3, c=4, d=3;
document.write("<p>a!=b = " + (a!=b) + "</p>");
document.write("<p> a != b && < d = " + ((a!=b)&&(c<d)) + "</p>");
document.write("<p> (a!=b) || c < d = " + (a!=b) || (c<d) + "</p>");
document.write("<p>!( (a!=b) && c < d) = " + !((a!=b) && (c<d)) +
"</p>");
</script> </head>
<body> </body>
</html>

Estruturas de Controle Condicional Simples - if
• If – Teste simples caso a resposta seja verdadeira os
comandos serao executados senao não.
var d=new Date(); // Obtendo a data do sistema.
var ano=d.getYear(); // Extraindo o ano da data
if (ano<2014) {
anosCopa = (114-d.getYear()); // quantos anos faltam para Copa
document.write("<b>Faltam " + anosCopa + " anos para Copa do
Mundo no Brasil</b>");
}
</script>

Estrutura condicional Composta - if-else
if(condição)
{
comandoV; // Instruções ou comandos para condição
Verdadeira(true).
}
else
{
comandoF; // Instruções ou comandos para condição
Falsa(false).
}

Estrutura condicional Composta – if - else if - else
if(condição1) {
comandoV1; // comandos para condição1 Verdadeira(true).
}
else if(condição2){
comandoV2; // comandos para condição2 Verdadeira (true).
}
.
.
.
else if(condiçãoN){
comandoVN; // comandos para condiçãoN Verdadeira (true).
}
else {
comandoF; // comandos se todas condições forem Falsas(false). }

Exercícios
• Crie um programa que receba o nome e a idade de
duas pessoas e informe qual é o nome do mais velho
e sua idade.
• Crie um programa que receba o nome e a
quantidade de gols de dois times e informe o nome
do vencedor ou se ocorreu empate, e qual foi o
placar.

Interagindo com o usuário
• Trabalharemos com Caixas de diálogo para interagir
com o usuário. Vejamos quais são os métodos qu
enos permitem tal funcionalidade:
– alert(“mensagem”);
– varString = prompt (“mensagem”, “texto”);
– varInt = confirm (“mensagem”); //0-Cancel 1-OK

Exemplo
alert("Seja bem-vindo a Caixas de Mensagens");
nome = prompt("Digite seu nome:", "Marcos");
resp = confirm("Deseja continuar " + nome+ ("?"));
if(resp==1)
{
alert("Voce cliclou em OK:");
}
else
{
alert("Voce cliclou em CANCEL:");
}
</script>

Estruturas de Controle de Repetição
for
A primeira estrutura de repetição que veremos é o laço for ele é
utilizado, normalmente, quando sabemos em que ponto
iniciamos a repetição e em que ponto ela irá parar. A
estrutura for é composta de três partes: (inicialização da
variável ; teste condicional ; incremento ou decremento da
variável) Sua sintaxe é:
for (iniciação;condição;atualização)
{
sentenças a executar em cada repetição
}

Exemplo
document.write("<p>Contando até 10</p>");
for(i=0 ; i<10 ; i++)
{
document.write("<p>"+(i+1)+"</p>");
}
</script>

Exercícios
• Crie um programa que receba do usuário um número
e imprima a sua tabuada, utilizando a estrutura de
repetição for.
• Crie um programa que receba dois números do
usuário e imprima os ímpares entre eles, utilizando a
estrutura de repetição for. Ex.:
– Usuário digita 3 e 10;
– Imprime: Os ímpares entre 3 e 10 são: 5, 7, 9.

Exemplo
while
A estrutura de repetição while será executada enquanto um teste seja
considerado verdadeiro(true) em geral ela funciona de forma semelhante
ao laço for. Os comandos somente serão executados se o teste for
verdadeiro e caso o teste seja falso logo de início os comandos nunca
serão executados. A ressalva que faço neste caso é que a variável de
controle deve ser criada fora da estrutura de repetição while e alterada
(incrementada ou decrementada) dentro dela. Sua sintaxe é:
while (teste)
{
}

Exercícios
• Crie um programa que receba do usuário um número
maior que zero e imprima os múltiplos de 3 de zero
até o número digitado, utilizando a estrutura de
repetição while.
• Crie um programa que receba dois números do
usuário e imprima os pares entre eles, utilizando a
estrutura de repetição while. Ex.:
– Imprime: Os ímpares entre 3 e 10 são: 4, 6, 8.

do - while
Na estrutura do-while a repetição é executada pelo menos uma vez antes do
teste condicional. Isto significa que, mesmo que o teste seja falso logo na
sua primeira avaliação, ainda assim os comandos de repetição já terão
sido executados pois, o teste somente é feito após a execução dos
comandos. Da mesma forma que na estrutura while a variável de controle
deve ser criada fora da estrutura de repetição do-while e alterada
(incrementada ou decrementada) dentro dela. A ressalva neste caso fica
por conta da obrigatoriedade do ponto e vírgula após os parênteses do
while para fim de demonstrar o encerramento da estrutura do-while.Sua
sintaxe é:
do
{
}
while (teste) ;

Exemplo
i=11; //declarando a variável i agora maior que 10
do
{
document.write("<p>Usando o do-while no
JavaScript</p>");
i++; //incrementando a variável i
}
while(i<10);
</script>

Exercícios
• Crie um programa que receba do usuário um número maior
que zero e informe se ele é par ou ímpar, ao final pergunte ao
usuário se deseja continuar e, em caso de resposta positiva,
execute as instruções novamente, utilizando a estrutura de
repetição do-while.
• Crie um programa que receba dois números do usuário e
imprima os múltiplos de 4 entre eles, ao final pergunte ao
usuário se deseja continuar e, em caso positivo, execute as
instruções novamente, utilizando a estrutura do-while. Ex.:
– Imprime: Múltiplos de 4 entre 3 e 10 são: 4, 8.

Objetos, métodos e funções
• A linguagem JavaScript é uma Linguagem Orientada a
Objetos. Isto significa que podemos criar novos Tipos de
Dados que servirão de Objetos para utilizarmos em nossas
páginas, bem como utilizar os Objetos dos Tipos de Dados já
criados como a classe Date que nos permitiu manipular datas
em nossos exemplos.
• Objetos nada mais são do que uma variável do Tipo de Dado
que construímos de acordo com a nossa necessidade, muitas
vezes utilizando tipos de dados já existentes como base para
especializá-los e desta forma servir para os nossos propósitos
na construção do código de nossas páginas Web. Exemplo:
– data = new Date();

Métodos ou Funções dos objetos
• Identificamos facilmente um método ou função pela presença
de um par de parênteses, ou seja, toda vez que observarmos
uma palavra e na sua frente aparecer um par de parênteses,
com algum valor escrito dentro deles (parâmetro) ou não,
estamos diante de um método. Como exemplo podemos citar
o método write() que irá executar a ação de escrever no
corpo de nosso Objeto, que é do tipo documento, o que
receber como parâmetro. Exemplo:
– document.write("<h1>Usando métodos em JavaScript</h1> ")

Hierarquia dos objetos
• A Hierarquia de Objetos em JavaScript é a forma com que os
objetos são estruturados (colocados) em nossa tela.
• O nível mais alto de Objetos em JavaScript que merece nosso
destaque neste momento são os do tipo janela(window) que
consistem na nossa tela.
• A janela por sua vez tem vários níveis que se ramificam a
partir dela. Estas ramificações consistem em localização,
histórico e documento.
• Assim se segue, ou seja, a cada nível podem haver outros
objetos com outras ramificações.

Rótulos, caixas de texto e botões de rádio

Principais métodos e eventos
• onload
– O evento onload ocorre logo após a página é carregada em nossa tela.
Sua sintaxe é muito simples. Exemplo: onload="CodigoJavaScript";
• onunload
– O evento onunload ocorre quando a página é fechada no navegador.
Podemos quando isto ocorrer dar uma mensagem de "Até Logo!!!"
para o usuário.
• open()
– O método open() (abrir) abre uma nova janela do navegador em
nosso monitor.
• close()
– O método close() (fechar) abre uma fechar a janela do navegador em
nosso monitor. Vejamos um exemplo de sua utilização:

Exemplo
<!DOCTYPE html>
<html>
<head>
function abrirSiteAnhanguera() {
window.open("http://www.anhanguera.com"); //função open()
}
</script>
</head>
<body onload ="abrirSiteAnhanguera()"> 
</body>
</html>

Usando os métodos open() close() e evento onunload
<head>
function abrirSiteAnhanguera() {
janela=window.open("http://www.anhanguera.com"); }
function fecharSiteAnhanguera() {
janela.close(); //função close()
janela.onunload=alert("Volte sempre!"); }
</script> </head>
<body> 
<input type="button" name="abrirJanela" value="abrir"
onclick="abrirSiteAnhanguera()">
<input type="button" name="fecharJanela" value="fechar"
onclick="fecharSiteAnhanguera()"> </body>

Manipulando o objeto Date
• getFullYear() - O método getFullYear() permite que obtenhamos o ano da
data armazenada no sistema.
• getMonth() - permite que obtenhamos o mês. Cabe ressaltar que o
primeiro mês corresponde ao número 0 e o último corresponde ao
número 11.
• getDay() - permite que obtenhamos o dia da semana. Cabe ressaltar que
o primeiro dia corresponde 0(domingo) e o último a 6(sábado).
• getDate() - permite que obtenhamos o dia do mês. Sendo o primeiro dia
1 e o último 31.
• getHours() - permite que obtenhamos a hora do dia.
• getMinutes() - permite que obtenhamos os minutos.
• getSeconds() - permite que obtenhamos os segundos.
• getMilliseconds() - permite que obtenhamos os milissegundos.

var ano, mes, diaDoMes, diaDaSemana, horas, minutos, segundos,
milissegundos;
ano= mes= diaDoMes= diaDaSemana= horas= minutos= segundos=
milissegundos = 0;
var d = new Date(), diaSemanaString = "";
function exibirDataHora() {
ano = d.getFullYear(), mes = d.getMonth() + 1, diaDoMes = d.getDate();
diaDaSemana = d.getDay();
horas = d.getHours(), minutos = d.getMinutes();
segundos = d.getSeconds(), milissegundos = d.getMilliseconds();
Exemplo

//definindo a String correspondente ao número do Dia da Semana
if(diaDaSemana==0) diaSemanaString = "Domingo";
else if(diaDaSemana==1) diaSemanaString = "Segunda";
else if(diaDaSemana==2) diaSemanaString = "Terça";
else if(diaDaSemana==3) diaSemanaString = "Quarta";
else if(diaDaSemana==4) diaSemanaString = "Quinta";
else if(diaDaSemana==5) diaSemanaString = "Sexta";
else if(diaDaSemana==6) diaSemanaString = "Sábado";
alert(diaDoMes+ "/" +mes+ "/" +ano+ " - " + diaSemanaString);
alert("São " +horas+ ":" +minutos+ ":" +segundos+ " e " +
milissegundos+ " milissegundos.");
}
</script>

</head>
<body> 
<input type="button" name="exibirDataHora" value="dataHora"
onclick="exibirDataHora()">
</body>
</html>

Manipulando o objeto Date
• Para alterar os valores guardados em um objeto do
tipo Date devemos utilizar os métodos set vistos a
seguir:
– setFullYear()
– setMonth()setDate()
– setHours()
– setMinutes()
– setSeconds()
– setMilliseconds()

Exemplo
Insira esta função no exemplo anterior
function alterarDataHora() {
ano = d.setFullYear(2014), mes = d.setMonth(6);
diaDoMes = d.setDate(13), horas = d.setHours(16);
minutos = d.setMinutes(0), segundos = d.setSeconds(0);
milissegundos = d.setMilliseconds(0);
exibirDataHora();//chama a função já criada
alert("Vai começar a Final da Copa de 2014");
}
Insira no corpo do documento o seguinte comando:
<input type="button" onclick="alterarDataHora()" value="Final da Copa
2014" /> <br /><br />

Exercício
• Altere o exemplo anterior a fim de que seja exibido
na tela os dados sobre a data de início e término dos
jogos olímpicos no Brasil, no corpo do documento
em uma nova janela(não em caixas de mensagens
como fizemos).
• Crie uma função para fechar a janela aberta e dê
uma mensagem de despedida ao usuário.

Manipulando String
• String nada mais é do que uma sequência de caracteres, como um nome,
endereço, cep, telefone, etc. Normalmente toda a variável que utilizamos
e não fazemos cálculos com ela definimos como String. O mais
interessante a destacar é que em JavaScript as Strings são tratadas como
se fossem um vetor de caracteres e cada caracter corresponde a um
índice de vetor da String. Exemplo:
Letra U N I V E R S I D A D E A N H A N G U E R A
Índice 0 1 2 3 4 5 6 7 8 9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2

Métodos e propriedade de uma string
Length - A propriedade length do Objeto String retorna o total de caracteres,
incluindo espaços em branco se existirem, de um texto qualquer. Cabe
destacar que normalmente uma String é identificada pelo par de aspas
que a envolve. Como exemplo na String "Universidade Bandeirante" a
propriedade length irá retornar 24, correspondente a quantidade de
letras somando-se a elas o espaço em branco entre as duas palavras.
charAt() - O método charAt(índice) retorna o caractere da String que estiver
no índice passado como parâmetro.
indexOf() - O método indexOf(caractere) retorna o índice em que o caractere
passado como parâmetro se encontra na String.
lastIndexOf() - O método lastIndexOf(caractere) retorna o índice da última
ocorrência do caractere passado como parâmetro se encontra na String.
substring() - O método substring(inicio, fim) retorna um pedaço da string
com base no índice de seu caractere de inicio e uma posição antes do
índice de seu fim.

Métodos e propriedade de uma string
toUpperCase() - O método toUpperCase() transforma todos os
caracteres da string em MAIÚSCULO.
toLowerCase() - O método toLowerCase() transforma todos os
caracteres da string em MINÚSCULO.
• replace () - O método replace(antiga, nova) muda o conteúdo
da string antiga pela nova passada como parâmetro.
• Vejamos a seguir um exemplo com a utilização de todos os
métodos e atributos que citamos que manipulam objetos do
tipo String.

• function mostrarTamanhoString()
• {
• alert("Universidade Bandeirante tem " + nome.length + " caracteres.");
• }
•
• function encontrarLetraIndice3()
• {
• alert(nome.charAt(3));
• }
• function encontrarIndiceLetraB()
• {
• alert(nome.indexOf('B'));
• }
• function ultimoOcorrenciaN()
• {
• alert(nome.lastIndexOf('n'));
• }
•
• function do13CaractereAoFim()
• {
• alert(nome.substring(13));
• }
• function converterMaiusculas()
• {
• alert(nome.toUpperCase());
• }
•
• function converterMinusculas()
• {
• alert(nome.toLowerCase());
• }
•
• function trocar_v_por_V()
• {
• alert(nome.replace('v','V'));
• }

JavaScript

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (9)

Semelhante a JavaScript

Semelhante a JavaScript (20)

JavaScript