Linguagem JavaScript
• A linguagem JavaScript é uma linguagem de script para
utilizarmos na WEB. Entre outros recursos ela...
Características da Linguagem JavaScript
• Reage a eventos
• Interpretada
• Fracamente Tipada
– Exemplo: string nome = "Joã...
Boas Vindas
<!DOCTYPE >
<html>
<head>
<script type="text/javascript">
alert("Bem vindo a programação em JavaScript!");
</s...
Locais de Inserção e Comentários
<!DOCTYPE html> <html> <head>
<script type="text/javascript">
alert("Bem vindo a programa...
Algumas Palavras Reservadas
abstract continue false in private throw
boolean debugger final instanceOf
protecte
d throws
b...
Criação de Variáveis
• Conceito de variáveis;
• Declaração
– devem iniciar com letras minúsculas ou com o caractere _
(sub...
Operadores Aritméticos
• Os Operadores Aritméticos em JavaScript são utilizados para
permitir que façamos operações aritmé...
Operadores de Atribuição
• São utilizados, como em outras linguagens, para atribuir
(passar) um valor para uma variável. P...
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
x=3, y=5, z=3;
document.write("<h2> Cálculos Matemát...
Incremento e Decremento
Operador Descrição Exemplo Resultado
++ Incremento x++; x = 4
-- Decremento x--; x = 2
Exemplo
<!DOCTYPE html >
<html>
<head>
<script type="text/javascript">
a=5, b=3, c=4, d=3;
document.write("<p>a++ = " + (a...
Relacionais
Operador Descrição Exemplo Resultado
!= Diferente
x != 5
x != 8
false
true
> Maior (desigualdade)
x > 8
x > 4
...
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 ...
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
a=3, b=5, c=3;
document.write("<h2> Condicionais Reduzidos "...
<!DOCTYPE html >
<html>
<head>
<script type="text/javascript">
a=5, b=3, c=4, d=3;
document.write("<p>a!=b = " + (a!=b) + ...
Estruturas de Controle Condicional Simples - if
• If – Teste simples caso a resposta seja verdadeira os
comandos serao exe...
Estrutura condicional Composta - if-else
if(condição)
{
comandoV; // Instruções ou comandos para condição
Verdadeira(true)...
<script type="text/javascript">//IF - ELSE
var d=new Date();
var ano=d.getYear();
if (ano<114){
anosCopa = (114-d.getYear(...
Estrutura condicional Composta – if - else if - else
if(condição1) {
comandoV1; // comandos para condição1 Verdadeira(true...
<script type="text/javascript">
var d=new Date(), ano=d.getYear();
if (ano<114) {
anosCopa = (114-d.getYear());
document.w...
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 idad...
Interagindo com o usuário
• Trabalharemos com Caixas de diálogo para interagir
com o usuário. Vejamos quais são os métodos...
Exemplo
<script type="text/javascript">
alert("Seja bem-vindo a Caixas de Mensagens");
nome = prompt("Digite seu nome:", "...
Estruturas de Controle de Repetição
for
A primeira estrutura de repetição que veremos é o laço for ele é
utilizado, normal...
Exemplo
<script type="text/javascript">
document.write("<p>Contando at&eacute; 10</p>");
for(i=0 ; i<10 ; i++)
{
document....
Exercícios
• Crie um programa que receba do usuário um número
e imprima a sua tabuada, utilizando a estrutura de
repetição...
Exemplo
while
A estrutura de repetição while será executada enquanto um teste seja
considerado verdadeiro(true) em geral e...
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úm...
do - while
Na estrutura do-while a repetição é executada pelo menos uma vez antes do
teste condicional. Isto significa que...
Exemplo
<script type="text/javascript">
i=11; //declarando a variável i agora maior que 10
do
{
document.write("<p>Usando ...
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 per...
Objetos, métodos e funções
• A linguagem JavaScript é uma Linguagem Orientada a
Objetos. Isto significa que podemos criar ...
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 se...
Hierarquia dos objetos
• A Hierarquia de Objetos em JavaScript é a forma com que os
objetos são estruturados (colocados) e...
Window
Document
form
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 é...
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function abrirSiteAnhanguera() {
window.open("http:/...
Usando os métodos open() close() e evento onunload
<head>
<script type="text/javascript">
function abrirSiteAnhanguera() {...
Manipulando o objeto Date
• getFullYear() - O método getFullYear() permite que obtenhamos o ano da
data armazenada no sist...
<script type="text/javascript">
var ano, mes, diaDoMes, diaDaSemana, horas, minutos, segundos,
milissegundos;
ano= mes= di...
//definindo a String correspondente ao número do Dia da Semana
if(diaDaSemana==0) diaSemanaString = "Domingo";
else if(dia...
</head>
<body> <!--evento onload-->
<input type="button" name="exibirDataHora" value="dataHora"
onclick="exibirDataHora()"...
Manipulando o objeto Date
• Para alterar os valores guardados em um objeto do
tipo Date devemos utilizar os métodos set vi...
Exemplo
Insira esta função no exemplo anterior
function alterarDataHora() {
ano = d.setFullYear(2014), mes = d.setMonth(6)...
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
jogo...
Manipulando String
• String nada mais é do que uma sequência de caracteres, como um nome,
endereço, cep, telefone, etc. No...
Métodos e propriedade de uma string
Length - A propriedade length do Objeto String retorna o total de caracteres,
incluind...
Métodos e propriedade de uma string
toUpperCase() - O método toUpperCase() transforma todos os
caracteres da string em MAI...
• function mostrarTamanhoString()
• {
• alert("Universidade Bandeirante tem " + nome.length + " caracteres.");
• }
•
• fun...
<body> <form>
<input type="button" onclick="mostrarTamanhoString()"
value="Tamanho da String com length" />
<input type="b...
Próximos SlideShares
Carregando em…5
×

JavaScript

184 visualizações

Publicada em

slides de javascript

Publicada em: Internet
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

JavaScript

  1. 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. 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.
  3. 3. 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>
  4. 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. 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. 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. 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. 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
  9. 9. Exemplo <!DOCTYPE html> <html> <head> <script type="text/javascript"> 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>
  10. 10. Incremento e Decremento Operador Descrição Exemplo Resultado ++ Incremento x++; x = 4 -- Decremento x--; x = 2
  11. 11. Exemplo <!DOCTYPE html > <html> <head> <script type="text/javascript"> 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>
  12. 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
  13. 13. 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
  14. 14. <!DOCTYPE html> <html> <head> <script type="text/javascript"> 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>
  15. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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 }
  25. 25. Exemplo <script type="text/javascript"> document.write("<p>Contando at&eacute; 10</p>"); for(i=0 ; i<10 ; i++) { document.write("<p>"+(i+1)+"</p>"); } </script>
  26. 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. 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. 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. 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) ;
  30. 30. Exemplo <script type="text/javascript"> 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>
  31. 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. 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. 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. 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.
  35. 35. Window
  36. 36. Document
  37. 37. form
  38. 38. Rótulos, caixas de texto e botões de rádio
  39. 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:
  40. 40. Exemplo <!DOCTYPE html> <html> <head> <script type="text/javascript"> function abrirSiteAnhanguera() { window.open("http://www.anhanguera.com"); //função open() } </script> </head> <body onload ="abrirSiteAnhanguera()"> <!--evento onload--> </body> </html>
  41. 41. Usando os métodos open() close() e evento onunload <head> <script type="text/javascript"> function abrirSiteAnhanguera() { janela=window.open("http://www.anhanguera.com"); } function fecharSiteAnhanguera() { janela.close(); //função close() janela.onunload=alert("Volte sempre!"); } </script> </head> <body> <!--evento onload--> <input type="button" name="abrirJanela" value="abrir" onclick="abrirSiteAnhanguera()"> <input type="button" name="fecharJanela" value="fechar" onclick="fecharSiteAnhanguera()"> </body>
  42. 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. 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
  44. 44. //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>
  45. 45. </head> <body> <!--evento onload--> <input type="button" name="exibirDataHora" value="dataHora" onclick="exibirDataHora()"> </body> </html>
  46. 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. 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. 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. 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. 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. 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. 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. 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>

×