1. 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.
2. 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.
4. Locais de Inserção e Comentários
<!DOCTYPE html> <html> <head>
<script type="text/javascript">
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
<script type="text/javascript">
document.write("<p>Voltamos ao Script!</br>" + Date() + "</p>");
//Exibindo a data e hora do micro
</script> </body> </html>
5. 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
6. 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
7. 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
8. 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
12. Relacionais
Operador Descrição Exemplo Resultado
!= 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
15. <!DOCTYPE html >
<html>
<head>
<script type="text/javascript">
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>
16. Estruturas de Controle Condicional Simples - if
• If – Teste simples caso a resposta seja verdadeira os
comandos serao executados senao não.
<script type="text/javascript">
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>
17. 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).
}
18. <script type="text/javascript">//IF - ELSE
var d=new Date();
var ano=d.getYear();
if (ano<114){
anosCopa = (114-d.getYear());
document.write("<h3><b>Faltam " + anosCopa + " anos para Copa
do Mundo no Brasil</b></h3>");
}
else {
anosCopa = (d.getYear()-114);
document.write("<h3><b>Já se passaram " + anosCopa + " anos para
Copa do Mundo no Brasil</b></h3>");
}
</script>
19. 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). }
20. <script type="text/javascript">
var d=new Date(), ano=d.getYear();
if (ano<114) {
anosCopa = (114-d.getYear());
document.write("<h3><b>Faltam " + anosCopa + " anos para Copa do
Mundo no Brasil</b></h3>"); }
else if(ano<116) {
anosOlimpiada = (116-d.getYear());
document.write("<h3><b>Faltam " + anosOlimpiada + " anos para as
Olimpíadas no Brasil</b></h3>"); }
else {
anosCopa = (d.getYear()-114);
anosOlimpiada = (d.getYear()-116);
document.write("<h3><b>Já se passaram " + anosCopa + " anos da Copa
do Mundo e " + anosOlimpiada + " anos das Olimpíadas no
Brasil</b></h3>"); } </script>
21. 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.
22. 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
23. Exemplo
<script type="text/javascript">
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>
24. 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
}
26. 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.
27. 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)
{
sentenças a executar em cada repetição
}
28. 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.:
– Usuário digita 3 e 10;
– Imprime: Os ímpares entre 3 e 10 são: 4, 6, 8.
29. 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
{
sentenças a executar em cada repetição
}
while (teste) ;
31. 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.:
– Usuário digita 3 e 10;
– Imprime: Múltiplos de 4 entre 3 e 10 são: 4, 8.
32. 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();
33. 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> ")
34. 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.
39. 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:
42. 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.
43. <script type="text/javascript">
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
46. 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()
47. 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 />
48. 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.
49. 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
50. 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.
51. 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.
52. • 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'));
• }
53. <body> <form>
<input type="button" onclick="mostrarTamanhoString()"
value="Tamanho da String com length" />
<input type="button" onclick="encontrarLetraIndice3()"
value="Letra no índice 3 com charAt(int)" />
<input type="button" onclick="encontrarIndiceLetraB()"
value="Índice da letra B com indexOf(char)" />
<input type="button" onclick="ultimoOcorrenciaN()"
value='Índice da última ocorrência de "n" com lastIndexOf(char)' />
<input type="button" onclick="do13CaractereAoFim()"
value="Imprimindo a partir do 13º Caractere com substring(indice)" />
<input type="button" onclick="converterMaiusculas()"
value="Tudo em letras Maiúsculas com toUpperCase()" />
<input type="button" onclick="converterMinusculas()"
value="Tudo em letras Minúsculas com toUpperCase()" />
<input type="button" onclick="trocar_v_por_V()"
value='Trocando "v" por "V" com replace(char,char)'/> </form> </body>