produção de sites unidade 7 – javascript prof.: henrique santos
TRANSCRIPT
Produção de SitesUnidade 7 – JavascriptProf.: Henrique Santos
Javascript
Introdução JavaScript é uma linguagem de
scripts criada pela Netscape em 1995, para atender a necessidade de conteúdo dinâmico em HTML.
A sintaxe do Javascript é semelhante a Java, mas é totalmente diferente no conceito e no uso.
Javascript é interpretado diretamente pelo Navegador, no lado do Cliente.
Uso de Javascript O uso de JavaScript em páginas HTML
e XHTML, pelo padrão W3C:
<script type="text/javascript">
/* aqui fica o script */
</script>
Exemplo 1<script type="text/javascript">
window.alert("Janela Hello World");
window.defaultStatus = "Hello barra de status";
</script>
Alguns cuidados Devido a ‘guerra’ entre a Netscape e
o Internet Explorer, funções Javascript podem ou não funcionar dependendo do Navegador.
Atualmente a Sun Microsystems detêm o trademark do Javascript. E embora tenha tentado chegar a um padrão unificado, este ainda não foi alcançado.
Navegadores sem Scripts Caso algum navegador não suporte, ou
esteja com o Javascript desligado deve-se usar a tag <noscript>
Exemplo:<script type="text/javascript"> document.write('Hello World!');
</script> <noscript> <p> Seu navegador não suporta ou ‘desligou’ Javascript. </p>
</noscript>
Comentários em Javascript Comentários em Javascript seguem o
mesmo padrão da linguagem Java•// Isto é um comentário de linha
•/* Isto é um comentáriode várias linhas até queencontre o finalizador de comentário */
Criando Variáveis Cria-se variáveis usando a palavra
reservada ‘var’ Ao contrário de linguagens como Java, as
variáveis Javascripts não possuem tipos. Exemplo:<script type="text/javascript"> var Mensagem = "Hello World!"; var MeuInteiro = 1; </script>
Comandos Básicos Condicionais:
• if (condição) { //comandos}else { //else é opcional //comandos
} Laços:
• while (condição) { //comandos}
• for (inicialização; condição; incremento){ //comandos}
Dialogs Diálogo de Alerta: window.alert("Isto
é um alerta!") Diálogo de Confirmação:
window.confirm("Isto é uma confirmação!")
• Retorna true se o usuário clicar em OK, false caso contrário
Diálogo de Input: window.prompt("Isto é um Input", "")
• Retorna o que for digitado pelo usuário
Exemplo 2 <script type="text/javascript"> // mostra uma janela de Ok ou Cancelar var escolha = window.confirm("Escolha Ok ou Cancelar para ver a msg");
if(escolha == true){ // mostra um alerta para resposta window.alert("Mensagem 01"); } else{ /* mostra um alerta para resposta Cancelar */
window.alert("Mensagem 02"); }</script>
Criando Funções Funções são criadas usando a palavra
reservada ‘function’ Exemplo:<script type="text/javascript"> function alo() { window.alert("Alo Mundo"); }</script>
Criando Funções Pode-se criar parâmetros para as funções
simplesmente dando nomes aos parâmetros Retorno de uma função é feito pela palavra
reservada ‘return’ Exemplo:<script type="text/javascript"> function multiplica(numero1, numero2){ var resultado = numero1 * numero2; return resultado; }</script>
Chamando funções Uma vez declaradas, basta chamar o
nome da função e passar os seus parâmetros.
Exemplo:<script type="text/javascript"> alo(); var Numero = multiplica(3,5);</script>
Criando um Vetor Para criar um vetor (ou array) usa-se a seguinte
sintaxe:• var nomevetor = new Array(numero_elem);
Assim como Java, o primeiro elemento começa do índice 0.
Exemplo:<script type="text/javascript"> var vet=new Array(4); vet[0]="Que"; vet[1]="saudade"; vet[2]="de"; vet[3]="Java";</script>
Criando um Vetor Assim como Java, é possível criar um
vetor e já passar o seu conteúdo como no exemplo abaixo:
<script type="text/javascript"> var vet=new Array("Que", "saudade", "de", "Java");
</script>
Manipulando Strings Concatenação: Use o operador +
• var Msg=vet[0]+" "+vet[1]+" "+vet[2]+" "+vet[3];
Busca: Use o método search• var Indice = Msg.search("Java");
Substituição: Use o método replace• var MsgC = Msg.replace("Java", "C");
Quebra: Use o método split• Var vet2 = MsgC.split(" ");
Chamando funções em Links Pode-se chamar uma função
Javascript em uma tag de Link HTML. Sintaxe:
• <a href="javascript:nomeFuncao();"> Texto do Link</a>
Exemplo:<a href="javascript:alo();"> Chamando função alo() de um href.</a>
Chamando funções em Eventos Certas tags HTML possuem atributos
de eventos, que podem ser usados para chamar uma função Javascript.
Exemplo:<input type="submit" onclick="alo();" />
Função depois de carregar a página
Pode ser que se deseja executar um código Javacript depois da página ter sido totalmente carregada.
Para isto basta usar o atributo ‘onload’ da tag ‘body’
Exemplo:<body onload="alo();"><!-- Corpo da página --></body>
MouseOver em Imagens Tags de Imagem possuem eventos
especiais, como o MouseOver Exemplo:<img src="./imagem1.gif" onmouseover="alo();" />
Janelas do Navegador
Criando uma Nova Janela Para criar uma nova janela usa-se o
método ‘open’ do objeto ‘window’ Exemplo:<script type="text/javascript"> window.open("http://www.yahoo.com.br");
</script>
Tamanho da Janela Criada Pode-se definir o tamanho de janelas
criadas usando os parâmetros ‘width’ e ‘height’ do método ‘open’.
Exemplo:<script type="text/javascript"> window.open("http://www.yahoo.com.br","width=500", "height=200");
</script>
Alterando CSS
Javascript e CSS Uma das funcionalidades do
Javascript é justamente a possibilidade de alterar dinamicamente classes de estilo CSS
Para isso existem dois métodos do document:
• getElementById(IdElemento)• getElementsByClassName(ClasseElemento)
Deve-se usar o método setAttribute no javascript para alterar o HTML
Exemplo CSS.normal { color:#00FF00; }.escondido { display:none;
visibility:hidden; } Javascriptfunction ficaInvisivel(){
document.getElementById("Ex") .setAttribute("class","escondido");
}
Formulários HTML
Preparando os Formulários Todo formulário DEVE possuir o
atributo name. Exemplo:<form action="MeuServlet" method="post" name="formulario" >
<!-- Entradas do formulário -->
</form>
Valores dos Campos Para pegar os atributos de um campo de
formulário basta usar a sintaxe:• document.nomeFormulario.nomeCampo
Exemplo:<script type="text/javascript">function testa(){
var Texto = document.formulario.nome.value;
window.alert(Texto); }</script>
<form action="" name="formulario"> <input type="text" name="nome" /> <input type="submit" onclick="testa()"/></form>
Mudar Valor de um Campo Basta usar a sintaxe anterior mas colocando algo
dentro do value. Exemplo:<script type="text/javascript">
function copia(){ var Texto = document.formulario.nome.value; document.formulario.nomecopia.value = Texto; }</script>
<form action="" name="formulario"> Nome: <input type="text" name="nome" /> Copia: <input type="text" name="nomecopia"/> <input type="submit" onclick="copia()" /></form>
Validando Campos Para validar campos de um
formulário deve-se usar o evento ‘onsubmit’ do FORM.
Nesse campo a função javascript deve retornar true para continuar.
Caso retorne false o formulário não será enviado ao ‘action’.
Exemplo Validação<script type="text/javascript"> function checarCampo(){ var Texto=document.formulario.login.value; if(Texto.length==0){ window.alert("Campo login não pode ser vazio!"); return false; }else { return true; }} </script>
<form action="LoginServlet" name="formulario" onsubmit="return checarCampo();">
Login: <input type="text" name="login"/><br/> Senha: <input type="password" name="senha"/><br/> <input type="submit" /></form>
Validando múltiplos Campos Muita Atenção ao criar funções para
validar diversos campos.• Se exibir um dialog para CADA campo não
preenchido, poderá acontecer uma ‘enxurrada’ de dialogs
• Se exibir somente um dialog de apenas um dos campos não preenchidos, ficará pouco usual
Solução: Exibir somente um dialog com uma mensagem sobre todos os campos não preenchidos.
Exemplo Incorreto<script type="text/javascript"> function multValidaErrado(){ var Retorno = true;
if(document.formulario.login.value.length == 0){ Retorno=false;
window.alert("Campo login não pode ser vazio."); }
if(document.formulario.senha.value.length == 0){ Retorno=false;
window.alert("Campo senha não pode ser vazio."); }
return Retorno; }</script>
Exemplo Correto<script type="text/javascript"> function multValidaCerto(){ var Retorno = true;
var Mensagem = "Atenção. Os seguintes campos não podem ser vazios:";
if(document.formulario.login.value.length == 0){ Retorno=false; Mensagem = Mensagem + “\n - Login "; }
if(document.formulario.senha.value.length == 0){ Retorno=false; Mensagem = Mensagem + “\n - Senha"; }
if(Retorno==false){ window.alert(Mensagem); } return Retorno;
}</script>
Arquivos Javascript Para facilitar a reutilização de códigos
Javascript, pode-se colocá-los em um arquivo separado
Então usa-se o atributo src para usar o arquivo
Exemplo <script type="text/javascript" src="meuscript.js" > </script>
<script type="text/javascript"> //Outros códigos viriam em outra TAG </script>
Máscaras de Digitação Codificação de máscaras não é
simples, mas existem várias bibliotecas prontas para usar.
• jQuery (addon jquery.maskedinput)• iMask• dFilter• JavaScriptTools• Typecast
jQuery
jQuery jQuery é uma biblioteca cheio de
funcionalidades para mudar (melhorar?) a forma de programar Javascript.
Vantagens:• Leve: aproximadamente 90KB de tamanho• Portável: testado e funcionando em IE 6+, FF
2+, Safari 3+, Opera 9+, Chrome 1+ Desvantagens:
• Muda a forma de escrever javascript
Exemplo Básico de jQuery<html> <head> <script type="text/javascript" src="jquery-1.6.2.min.js"> </script>
<script type="text/javascript"> // Seu código vem aqui </script> </head> <body> <!-- Sua página vem aqui --></body> </html>
jQuery Para informações mais detalhadas e
tutoriais visite a página do jQuery. http://jquery.com/ Cada vez mais, empresas de
desenvolvimento Web estão procurando pessoas que saibam jQuery ao invés de Javascript.
Máscaras no jQuery A biblioteca básica do jQuery não
possui máscaras. Existe um plugin que faz isso
chamado de jQuery Masked Input. Deve-se ainda importar a biblioteca
base do jQuery além do Masked Input.
Criando as Máscaras1. Importar as bibliotecas
<script type="text/javascript" src="jquery-1.6.2.min.js"> </script><script type="text/javascript" src="jquery.maskedinput-1.3.min.js"> </script>
2. Definir a função máscara<script type="text/javascript"> jQuery(function($){ $("#data").mask("99/99/9999"); }); </script>
3. Certifique-se que o campo input possua o atributo ‘id’ igual ao referenciado.
Definindo as Máscaras A máscara é definida por um formato
e formada por caracteres de escape. Somente caracteres não contidos na
lista de escape serão considerados um caractere da máscara.
Os seguintes caracteres de escape são predefinidos:
• a - Representa letras (A-Z, a-z)• 9 - Representa um caractere numérico (0-9)• * - Representa um caractere alpha numérico
(A-Z,a-z,0-9)
Exemplo Sem Máscara<!-- Exemplo começa a partir da TAG Body, não equeça
de criar as tags HTML e HEAD antes --> <body>
<form action="" name="formulario"> Nome:<input type="text" name="nome" id="nome"/><br/> Fone:<input type="text" name="fone" id="fone"/><br/>CEP: <input type="text" name="cep" id="cep" /><br/>Data:<input type="text" name="data" id="data"/><br/><input type="submit" value= "Enviar"/>
</form> </body></html>
Exemplo com Máscara<!-- adicionar esse código dentro da TAG head do slide anterior -->
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.maskedinput-1.3.min.js"> </script>
<script type="text/javascript"> jQuery(function($){ $("#fone").mask("(99) 9999 - 9999"); $("#cep").mask("99999-999"); $("#data").mask("99/99/9999"); });</script>
Considerações Finais Para mais informações procure
tutoriais sobre jQuery na Internet Na própria página do jQuery existem
tutoriais em português http://docs.jquery.com/Tutorials#
Tutoriais_em_portugu.C3.AAs