Baixe Linguagem JavaScript Introdução Originalmente, JavaScript chamava-s e outras Notas de estudo em PDF para Informática, somente na Docsity! Página 1 de 20 E-mail professor: sandrotc@anhanguera.edu.br –Arquivo: dw02 Javascript.doc Linguagem JavaScript Introdução Originalmente, JavaScript chamava-se LiveScript. JavaScript é uma linguagem de script de programação, interpretada (não é compilada) pelos navegadores (browsers). JavaScript não descende e não tem relação com Java. JavaScript foi criada pela Netscape em 1995 e Java é um produto da Sun Microsystems. Os códigos escritos em JavaScript podem ser embutidos em código HTML e são executados no cliente. Assim, afirmamos que JavaScript é uma linguagem do tipo client-side. JavaScript é uma linguagem case-sensitiva (Case-Sensitivity). Nomes para gerenciadores de eventos como onclick, precisam ser escritos em letras minúsculas em JavaScript, ainda que possa ser escrito como OnClick em HTML, já que HTML não é case-sensitive. JavaScript é uma linguagem com tipagem dinâmica (os tipos de variáveis não precisam ser definidos no início do programa). Como JavaScript podemos criar programas orientados a objetos. Estrutura Básica de um Programa JavaScript Um programa JavaScript deve ser escrito dentro dos tags <script> e </script> que geralmente são escritos entre os tags <head> e </head>. Podem ser escritos também na seção de corpo (<body>). As tags <script> e </script> podem aparecer mais de uma vez em diferentes seções, se necessário. A propriedade type do exemplo abaixo é opcional. <html> <head> <title> Página teste </title> <script language="JavaScript" type="text/javascript"> ... </script> </head> <body> ... </body> </html> Você pode especificar a versão da linguagem JavaScript assim (isto é opcional): <script language="JavaScript 1.5"> Dica: Você pode, ser preferir, incorporar um arquivo texto contendo código JavaScript com extensão “.js”, incluindo o código a seguir dentro dos tags <head> e </head>. Não coloque os tags <script> e </script> dentro do arquivo “.js”. Além de ajudar a organizar documentos, essa prática permite o reaproveitamento de código em páginas distintas de seu site. <script src="arquivo.js"> </script> Existe uma outra maneira de se ter um JavaScript em uma página dentro do corpo do HTML. Observe no exemplo a seguir que não existem os tags <script> e </script>. O código está inserido no evento onClick. Mais adiante nesta apostila, veremos um pouco mais sobre eventos. <html> <head><title> Página teste </title></head> <body> <form> <input type="button" onClick="alert(‘Você clicou no botão’)" value="Clique aqui"> </form> </body> </html> Página 2 de 20 E-mail professor: sandrotc@anhanguera.edu.br –Arquivo: dw02 Javascript.doc Comentários Os comentários JavaScript são como os comentários usados nas linguagens C, Java, PHP. Use // para comentar uma única linha e o par /* … */ para comentários que possuem uma linha ou mais de comprimento. Veja o exemplo: // este é um comentário var x = 1; /* este é outro comentário */ Declaração de Variáveis O ponto-e-vírgula, que encerra uma linha de código, em JavaScript é opcional. Porém, se você colocar mais do que uma declaração em uma única linha, os pontos-e-vírgulas são exigidos. Logo, por uma questão de clareza em seus códigos, use sempre ponto-e-vírgula. Você pode usar uma variável sem primeiro declará-la. No entanto, sugiro que você declare sempre suas variáveis como boa prática de programação. Os tipos de dados possíveis são: números, strings, booleanos e nulos. Para criar uma variável, utilize a palavra reservada var (é possível declarar variáveis sem a instrução var, declaração essa denominada implícita). Veja a seguir alguns exemplos de definição de variáveis. var x; var numero = 5; var nome = "Sandro"; var valido = true; var cidade, estado; Você pode declarar uma variável e inicializá-la quando a primeira ocorrência da variável estiver em uma estrutura for (esta estrutura será estudada nas próximas páginas), por exemplo: for (var i = 0; i < 10; i++) Os dados booleanos podem receber apenas dois valores: true ou false. Os dados nulos são representados pela palavra-chave null. Caso uma variável esteja indefinida, ela recebe o valor null. Nota: para declarar constantes, apenas troque var por const. Além das variáveis escalares (que armazenam um único valor por vez), podemos criar vetores ou matrizes (estruturas de dados compostas uni ou multidimensionais). Para isso, utilizamos a palavra Array. Por exemplo, as duas linhas a seguir definem dois vetores, um vazio e outro com cinco elementos predefinidos. var vetor_x = new Array; var vetor_y = new Array(1, 2, 3, 4, 5); Veja outra maneira de manipularmos uma variável como se fosse um array: var disciplinas; disciplinas[2] = "Matemática"; disciplinas[5] = "Português"; Para obter a quantidade de elementos de um array, usamos o atributo length, assim: var vetor_numeros = new Array(1, 2, 3, 4, 5); document.write("O array possui " + vetor_numeros.length + " elementos"); Podemos ainda utilizar os atributos sort (classifica os elementos) e join (retorna todos os elementos). var vetor_nomes = new Array("Ana", "Luiza", "Isabella"); document.write("Elementos do array: " + vetor_nomes.join() + "<br>"); document.write("Array ordenado: " + vetor_nomes.sort()); Página 5 de 20 E-mail professor: sandrotc@anhanguera.edu.br –Arquivo: dw02 Javascript.doc Estrutura Switch O switch pode ser utilizado quando da existência de vários “ifs” aninhados. Veja o exemplo: <script language="JavaScript"> var x = "Sandro"; switch (x) { case "Ana": document.write("A variável x possui o nome Ana"); break; case "Sandro": document.write("A variável x possui o nome Sandro"); break; case "Marcia": document.write("A variável x possui o nome Marcia"); break; } </script> Estrutura de Repetição While (lê-se: uáil) Esse loop fica em execução enquanto a condição for verdadeira. O script a seguir escreve, na área de trabalho do navegador, todos os números inteiros de 1 até 100. <script language="JavaScript"> var numero = 1; while (numero <= 100) { document.write("Valor da variável numero = " + numero + "<br>"); numero++; } </script> Existe ainda a estrutura do...while, que, embora seja semelhante ao while, avalia a expressão somente no fim do laço. O script a seguir escreve, na área de trabalho do navegador, todos os números inteiros de 1 até 100. <script language="JavaScript"> var numero = 1; do { document.write("Valor da variável numero = " + numero + "<br>"); numero++; } while (numero <= 100) </script> Estrutura de Repetição For Para entender a estrutura for, vamos a mais um exemplo: <script language="JavaScript"> for (var numero = 1; numero <= 100; numero++) { document.write("Valor da variável numero = " + numero + "<br>"); } </script> Página 6 de 20 E-mail professor: sandrotc@anhanguera.edu.br –Arquivo: dw02 Javascript.doc O script a seguir exibe uma tabela HTML com dez linhas utilizando a estrutura for. <script language="JavaScript"> document.write("<table border=\"1\">"); for (var i = 1; i <= 10; i++) { document.write("<tr><td>"); document.write("Linha " + i); document.write("</td></tr>"); } document.write("</table>"); </script> As instruções break e continue também podem ser utilizadas em JavaScript possuindo a mesma função que, por exemplo, a conhecida Linguagem C, não somente na estrutura for mas também na estrutura while. A palavra-chave with JavaScript usa a palavra-chave with, que não está disponível na linguagem Java. A sintaxe é a seguinte: with (object) { <instruções>; } Veja um exemplo. Ao invés de você escrever este código: x = Math.sin(a); y = Math.cos(a); Você escreve este código: with (Math) { x = sin(a); y = cos(a); } Criando Sub-rotinas (funções) Você já estudou modularização e parametrização na disciplina Programação Imperativa. Portanto, vamos a um primeiro exemplo: <html> <head> <title> Página teste </title> <script language="JavaScript"> function Mensagem() { alert("Você clicou no botão"); } </script> </head> <body> <form> <input type="button" value="Clique aqui" onClick="Mensagem()"> </form> </body> </html> Página 7 de 20 E-mail professor: sandrotc@anhanguera.edu.br –Arquivo: dw02 Javascript.doc O documento HTML acima mostra um botão no navegador e, assim que o usuário clicar no botão, um evento chamado “onClick” será disparado e chamará a função Mensagem que mostrará uma janela com a mensagem “Você clicou no botão” utilizando a função pré-definida “alert” do JavaScript. Uma sub-rotina em JavaScript pode retornar valores, bem como nas demais linguagens de programação. Vamos a um novo exemplo: <html> <head> <title> Página teste </title> <script language="JavaScript"> function Pergunta() { var resposta; resposta = confirm("Você gosta de GNU/Linux?"); if (resposta) { return "Você confirmou que gosta de GNU/Linux"; } else { return "Que pena! Você não gosta de GNU/Linux!"; } } var x = Pergunta(); document.write(x); </script> </head> </html> Vamos a um exemplo que ilustra a parametrização (passagem de parâmetros) por valor: <html> <head> <title> Página teste </title> <script language="JavaScript"> function Calcula(x, y) { var soma; soma = x + y; return soma; } var numero1; var numero2; var resultado; numero1=prompt("Digite um número qualquer", ""); numero2=prompt("Digite outro número qualquer", ""); resultado=Calcula(numero1, numero2); document.write(numero1+" somado com "+numero2+" = "+resultado); </script> </head> </html> Podemos enviar parâmetros a uma função utilizando parâmetros anônimos, os quais ficam disponíveis ao programador através do array arguments. Veja o exemplo seguinte: Página 10 de 20 E-mail professor: sandrotc@anhanguera.edu.br –Arquivo: dw02 Javascript.doc A linguagem JavaScript acrescenta interatividade às páginas HTML permitindo escrever código orientado a eventos. Podemos, por exemplo, executar uma função JavaScript quando o usuário clicar em um botão. O trecho de código HTML a seguir ilustra a possibilidade da chamada de uma função JavaScript através do click de um objeto do tipo botão. <input type=button name=envia onClick="funcao_teste"> A tabela seguinte ilustra os gerenciadores de evento suportados pela Linguagem JavaScript. Nome do objeto Gerenciadores de evento Area onClick, onMouseOut, onMouseOver Button onBlur, onClick, onFocus Checkbox onBlur, onClick, onFocus FileUpload onBlur, onChange, onFocus Form onReset, onSubmit Frame onLoad, onUnload Image onAbort, onError, onLoad Link onClick, onMouseOut, onMouseOver Radio onBlur, onClick, onFocus Reset onBlur, onClick, onFocus Select onBlur, onChange, onFocus Submit onBlur, onClick, onFocus Text onBlur, onChange, onFocus Textarea onBlur, onChange, onFocus Window onBlur, onError, onFocus, onLoad, onUnload Abrindo Janelas Popup Usamos o comando window.open, que possui a seguinte sintaxe: window.open(endereço, nome da janela, opções); O terceiro parâmetro (opções) define algumas configurações da janela, como altura, largura, exibição da barra de rolagem, entre outras. <html> <script language="JavaScript"> function JanelaMensagem() { janela=window.open('','Cadastro','width=200,height=200, toolbar=no,location=no,status=no,scrollbars=no,resizable=no'); janela.document.write("<p>Mensagem: Você deve se cadastrar!</p>"); janela.document.write("<p><a href='javascript:window.close();'> Clique aqui para fechar esta janela</a></p>"); </script> <body> <p><a href="#" onClick="JanelaMensagem();">Clique aqui para acessar</a></p> </body> </html> Podemos usar JavaScript para manipular os elementos de uma página, como campos de formulário e camadas DIV identificadas (camadas DIV serão estudadas quando iniciarmos nossos estudos sobre a tecnologia Ajax). O programa a seguir ilustra um exemplo de manipulação de um campo do tipo texto em um formulário, onde a cada clique em um botão, o valor do campo é incrementado. Página 11 de 20 E-mail professor: sandrotc@anhanguera.edu.br –Arquivo: dw02 Javascript.doc <html> <script language="JavaScript"> function Incrementa() { document.formulario.numero.value++; } </script> <body> <form name="formulario"> <input type="text" name="numero" value="1"> <input type="button" value="Incrementar" onClick="Incrementa();"> </form> </body> </html> A seguir, os métodos que podem ser invocados em um campo de texto de um formulário HTML: Método Descrição Blur() Retira o foco da aplicação do campo de texto. Focus() Coloca o foco da aplicação do campo de texto. Select() Seleciona o texto do campo. O trecho de código JavaScript seguinte posiciona o cursor no campo numero e seleciona o texto desse campo: function Seleciona_e_Foca() { document.formulario.numero.focus(); document.formulario.numero.select(); } Objetos Checkbox, Botões Radio e Listas de Seleção É possível, através da linguagem JavaScript, fazermos a verificação do estado de um elemento checkbox por meio da propriedade checked, que armazena o valor true se o elemento estiver marcado e false, caso contrário. Veja o exemplo seguinte: <html> <script language="JavaScript"> function Verifica() { if (document.formulario.concorda.checked==false) alert("Você deve concordar com os termos do contrato! "); else alert("Contrato aceito! "); } </script> <body> <form name="formulario"> <input type="checkbox" name="concorda" value="sim">Concordo<br> <input type="button" value="Continuar" onClick="Verifica();"> </form> </body> </html> Para manipular botões radio, usamos o atributo length, que contém o número de botões radio que fazem parte do grupo. Cada botão equivale a uma posição no vetor relativo a esse grupo, iniciando no índice zero. Veja o exemplo seguinte e note que o atributo onClick foi colocado no próprio botão radio, e não em um campo do tipo button, como nos exemplos anteriores. Página 12 de 20 E-mail professor: sandrotc@anhanguera.edu.br –Arquivo: dw02 Javascript.doc <html> <script language="JavaScript"> function AlteraCor() { for (var i = 0; i < document.form.cor.length; i++) { if (document.form.cor[i].checked) break; } document.bgColor = document.form.cor[i].value; } </script> <body> <form name="form"> <input type="radio" name="cor" value="FFFFFF" onClick="AlteraCor();">Branco<br> <input type="radio" name="cor" value="FF0000" onClick="AlteraCor();">Vermelho<br> <input type="radio" name="cor" value="00FF00" onClick="AlteraCor();">Verde<br> <input type="radio" name="cor" value="0000FF" onClick="AlteraCor();">Azul<br> <input type="radio" name="cor" value="000000" onClick="AlteraCor();">Preto<br> </form> </body> </html> Podemos usar JavaScript para obter o valor e o texto da opção selecionada pelo usuário, alterar a opção selecionada, dentre outras tarefas. O exemplo seguinte mostra uma mensagem com informações sobre a opção escolhida pelo usuário. <html> <script language="JavaScript"> function Propriedades() { var indice = document.form.avaliar.selectedIndex; var texto = "Indice da opção escolhida: " + indice; texto += "\nNúmero de opções do select: " + document.form.avaliar.length; texto += "\nValor da opção escolhida: " + document.form.avaliar.options[indice].value; texto += "\nTexto da opção escolhida: " + document.form.avaliar.options[indice].text; alert(texto); } </script> <body> <form name="form"> <select name="avaliar"> <option value="1">Bom <option value="2">Médio <option value="3">Ruim </select> <input type="button" value="Ok" onClick="Propriedades();"> </form> </body> </html> Página 15 de 20 E-mail professor: sandrotc@anhanguera.edu.br –Arquivo: dw02 Javascript.doc Experimente trocar o evento onLoad por onUnLoad, ou adicionar o evento onUnLoad no tag body do exemplo acima. O evento onUnLoad ocorre quando a página é descarregada, ou seja, quando o usuário deixar a página atual. A título de curiosidade, experimente alterar, por exemplo, a cor de fundo da página através da propriedade bgColor do documento, assim: document.bgColor = "green"; // cor de fundo da página alterada para verde Você pode utilizar tanto o nome da cor em inglês como também o código da cor. OnError Você pode definir eventos que ocorram quando o carregamento de uma imagem não for bem sucedido, ou quando o usuário cancelar o carregamento de uma imagem, ou ainda, se o usuário mover o mouse sobre uma imagem. Veja os seguintes exemplos: <img src="imagem.jpg" width="80" height="100" onError="minha_funcao();"> <img src="imagem.jpg" width="80" height="100" onAbort="minha_funcao();"> <img src="imagem.jpg" width="80" height="100" onMouseMove="minha_funcao();"> Utilize o gerenciador de eventos onMouseDown ou onMouseUp para acionar uma função caso o usuário pressione uma tecla qualquer do mouse ou solte um botão qualquer do mouse, respectivamente. <img src="imagem.jpg" width="80" height="100" onMouseDown="minha_funcao();"> <img src="imagem.jpg" width="80" height="100" onMouseUp="minha_funcao();"> Podemos definir, através de um link, que o navegador mostre em sua barra de status um texto qualquer quando o usuário move o ponteiro do mouse sobre este link, assim: <a href="mailto='sandrotc@anhanguera.edu.br'" onMouseOver="self.status='Envie um e-mail ao professor';return true;"> E-mail para contato </a> O inverso pode também ser feito, bastando trocar o gerenciador do exemplo acima para onMouseOut. OnSelect Este evento ocorre quando um objeto é selecionado. <input type="text" name="idade" onSelect="minha_funcao();"> Bloqueando botão direito de mouse em uma página O evento onmousedown do exemplo seguinte deve ser escrito em minúsculas para evitar incompatibilidades entre navegadores. Note que a instrução “document.onmousedown = verifica_botao_mouse;” deve ser definida antes de todas as funções do script da página. Assim, esta instrução será executada no momento do carregamento da página. <script language="JavaScript"> document.onmousedown = verifica_botao_mouse; function verifica_botao_mouse() { if (event.button == 2) { alert("Botão direito desabilitado!"); } } </script> Página 16 de 20 E-mail professor: sandrotc@anhanguera.edu.br –Arquivo: dw02 Javascript.doc Analisando tecla pressionada na página De maneira semelhante ao exemplo anterior, que verifica qual botão do mouse foi pressionado, podemos também verificar qual tecla foi pressionada, através do gerenciador de eventos onKeyPress definido na tag body de um documento. Veja o exemplo seguinte: <html> <head> <script language="JavaScript"> function verifica_tecla() { var tecla = window.event.KeyCode; if (tecla > 47 && tecla < 58) alert("Você teclou um número"); else alert("Você teclou uma letra"); } </script> </head> <body onKeyPress="verifica_tecla(form);"> Pressione qualquer tecla para verificação </body> </html> Exibindo algumas informações básicas do navegador document.write(navigator.appName); document.write(navigator.appVersion); document.write(navigator.platform); Redirecionando usuário para outra página var navegador = navigator.appName; if (navegador == "Netscape") location.href = "pagina_1.html"; else if (navegador == "Microsoft Internet Explorer") location.href = "pagina_2.html"; else location.href = "pagina_3.html"; Definindo um timer para a aplicação O exemplo seguinte ilustra a execução de uma função JavaScript quando decorridos alguns segundos pré- determinados após o carregamento da página. <html> <head> <script language="JavaScript"> function mensagem() { alert("Seja bem-vindo a esse site!"); document.form_teste.idade.value=""; document.form_teste.idade.focus(); } Página 17 de 20 E-mail professor: sandrotc@anhanguera.edu.br –Arquivo: dw02 Javascript.doc function alerta() { alert("Passaram-se 5 segundos desde o carregamento desta página"); } </script> </head> <body onLoad="mensagem();setTimeOut('alerta()', 5000);"> <form name="form_teste"> Informe sua idade:<br> <input type="text" name="idade"> <input type="button" value="Faz nada"> </form> </body> </html> No exemplo acima, note a presença de duas instruções JavaScript definidas entre “;” no gerenciador de eventos onLoad, na tag body. Assim é possível definir duas tarefas para onLoad. Cancelando a ação do timer Para permitir ao usuário desativar o timer, defina uma variável para a função setTimeOut, assim: <body onLoad="mensagem();cancela=setTimeOut('alerta()', 5000);"> Em seguida, adicione um botão ao formulário para realizar a ação de desativar o timer, assim: <input type="button" value="Desativa timer" onClick="clearTimeout(cancela)"> A função clearTimeout não deve ser criada por você, pois a mesma já constitui um método pré-definido da linguagem JavaScript. Manipulando o objeto DATE Estude o código a seguir para compreender como funciona basicamente o objeto DATE da linguagem JavaScript. hoje = new Date(); var dia_do_mes = hoje.getDate(); var dia_da_semana = hoje.getDay(); // 0 = domingo, ... var hora = hoje.getHours(); var minuto = hoje.getMinutes(); var mes = hoje.getMonth(); // 0 = janeiro var segundos = hoje.getSeconds(); var ano = hoje.getFullYear(); // ano c/ 4 digitos var ano = hoje.getYear(); // ano c/ 2 digitos hoje.setDate(20); // altera o dia do mês Randomizando e arredondando com JavaScript Randomizar significa gerar número aleatório via programação. var x = Math.random(); // gera um número aleatório var y = Math.round(x); // arredonda o valor de x em y var z = Math.random() * 100; // gera número aleatório de 0 a 100 var a = Math.floor(15.8); // retorna 15 (a parte inteira) var b = Math.round(15.8); // retorna 16