Produção de Sites Unidade 7 – Javascript Prof.: 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ário de várias linhas até que encontre 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: Laços: 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; } Javascript function 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){ 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){ 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áscaras 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> Definir a função máscara <script type="text/javascript"> jQuery(function($){ $("#data").mask("99/99/9999"); }); </script> 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