Incorporando JavaScript em HTML - PDF
Download "Incorporando JavaScript em HTML"
Joaquim Borba Marques
1 Incorporando JavaScript em HTML Existem quatro maneiras de incorporar JavaScript em HTML. Vamos abordar as três primeiras, por ser mais comum: Entre as tags <script></script> dentro do código HTML. A partir de um arquivo externo. Em atributos de tratamento de eventos HTML. Em uma URL que use o protocolo especial javascript O elemento <script> O código JavaScript pode estar dentro do código HTML, entre as marcações <script></script>. Observe a sintaxe abaixo: <script> // Seu código JavaScript aqui </script> Script em arquivo externo A marcação <script> suporta um atributo src, que especifica a URL de um arquivo contendo código JavaScript. Por convecção, os arquivos JavaScript têm nomes que terminam com a extensão.js. A sintaxe é: <script src="nome e caminho do arquivo"></script> Exemplo 01: No projeto, em NetBeans, crie um novo arquivo window.html com o seguinte conteúdo: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>cursos - JavaScript Básico</title> <script> </script> </head> <body>
2 <p>curso de JavaScript Básico - Objeto Window</p> </body> </html> Interação com o usuário Para exibir uma caixa de alerta, utilize o método window.alert(). Não é necessário usar a palavra window para utilizar as funções do objeto Window. Assim.Alert(), também irá funcionar. Inclua o código abaixo entre as tags <script></script> no código de exemplo criando anteriormente. Var nome = Treinamento JavaScript Curso Web ; Alert( Esta é uma mensagem do curso + nome ); Para incluir botões OK e Cancelar nas mensagens, utilize o método Confirm(). Ele retorna true se for clicado OK e false, caso contrário. Exemplo 02: var pergunta = confirm("você está gostando do curso?"); if(pergunta == true) { alert("ficamos imensamente felizes que você esteja gostando!"); else { alert("poxa! Em que podemos melhorar?"); Para interagir com o usuário, tem outro método interessante: a função prompt(). Com ela, é possível solicitar informações ao usuário. Exemplo 03: var nomeusuario = prompt("qual o seu nome?", "Nome"); if(nomeusuario!= '') { alert("seu nome é: "+nomeusuario+"!"); else { alert("pôxa, nem sei qual é seu nome =/");
3 Temporizador O método settimout() agenda a execução de uma função, decorrido o tempo especificado em milissegundos. Exemplo 04: settimeout('bemvindo()',5000); function bemvindo(){ alert("seja bem vindo!"); Além, do settimout(), há outro método setinterval(). Ele funciona de forma bem parecida com settimout(). A diferença é que ele irá repetir o código a cada intervalo de tempo informado, ou até que o método cleariterval(), seja executado. Exemplo 05: var cont = 0; var t = setinterval('tw()',5000); function tw() { cont++; alert("o contador está em: "+cont); if(cont == 5){ alert("fim da contagem!"); clearinterval(t); Manipulando Janela O método Open() pode ser usado para abrir uma nova janela do navegador.
4 Exemplo 06: function abrirjanela(){ open(" Para o teste será utilizado o evento onclick em um botão HTML. <input type="button" value="testes com Janelas" onclick="abrirjanela();" /> Introdução ao Objeto Document Descrevendo-se o objeto Document de forma mais simples, pode-se dizer que ele serve para consultar ou modificar os elementos HTML da página carregada. Para analisar o objeto Dcumento, crie o arquivo para teste chamado documento.html e defina para ele o seguinte código: Documento.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>treinaweb Cursos - JavaScript Básico</title> <script> </script> </head> <body> <strong>treinaweb Cursos - Curso de JavaScript Básico - Objeto 'Document'.</strong> <p><input type="button" value="testes com o documento" onclick="manipularelementos();" /></p> <form name="frmcadastro" id="frmcadastro"> <fieldset> <table>
5 <tr> <td>nome:</td> <td><input type="text" name="nome" id="nome" /></td> </tr> <tr> <tr> <td>sexo:</td> <td> <input type="radio" name="sexo" value="m">masculino<br /> <input type="radio" name="sexo" value="f">feminino </td> <td>interesses:</td> <td> <input type="checkbox" name="interesses" id="javascript" /><label for="javascript">javascript</label> <input type="checkbox" name="interesses" id="php" /><label for="php">php</label> <input type="checkbox" name="interesses" id="html" /><label for="html">html</label> <tr> </td> <td> <input type="button" id="enviar" name="enviar" value="enviar"/> </td> <td> <input type="reset" id="limpar" name="limpar" value="limpar"/> </td> </tr> </table> </fieldset> </form> </body>
6 </html> salve o arquivo e abra-o no navegador. Este é um formulário básico apenas para aplicar os testes. Principais Propriedades Forms[] Esta propriedade retorna os formulários do documento HTML e os elementos que estão contidos nele. Para entender melhor, insira o código a seguir entre as tags <scripr></script> no código anterior. alert(document.forms); Salve e execute novamente. Foi mostrado um alerta informando que você está tentando exibir um objeto. Lembre-se que você está trabalhando com objetos e a maiorias deles também possui propriedades que, em sua maioria, são comuns a todos os objetos. Utilize lenght para saber a quantidade de forms contidos no código HTML. alert(document.forms.length); Salve e execute.
7 Outra informação importante, e que você deve lembrar, é sobre acesso aos forms. Ele funciona como um array e, como todos os arrays, possui um índice que começa com 0 (zero). Então, quando a propriedade lenght informa que há 1 form, ele está na posição 0 (zero). Então, para saber o nome de form de índice 0, use a propriedade name do form. alert(document.forms[0].name); Salve e execute o projeto. Title Informa o título da página HTML atual. alert(document.title); URL Retorna o URL completa da página atual. alert(document.url); Principais Métodos O método write() é utilizado para imprimir uma informação na tela da janela atual. document.write("inserindo texto no documento."); Writeln() Funciona da mesma forma que write(). Porém insere uma quebra de linha. document.write("<pre>"); document.write("inserindo texto no documento com write()."); document.write("linha 1.");
8 document.write("linha 2."); document.write("linha 3."); document.write("</pre>"); document.writeln("<pre>"); document.writeln("inserindo texto no documento com writeln()."); document.writeln("linha 1."); document.writeln("linha 2."); document.writeln("linha 3."); document.writeln("</pre>"); getelementbyid() Este método encontra e retorna um objeto referente ao elemento com determinado ID. Por exemplo, se o objeto for um campo input, ele possui a propriedade value que retorna o seu valor. var nome = document.getelementbyid("nome"); alert("o nome é: " + nome.value); Com o método getelementbyid é possível realizar diversas operações com o elemento como, por exemplo, alterar sua formatação, alterar seu conteúdo, movê-lo pela tela e etc. Ele é útil para manipular elementos com JavaScript. document.getelementbyid("nome").style.color = "red"; document.getelementbyid("enviar").style.backgroundcolor = "green"; document.getelementbyid("limpar").style.fontstyle = "italic"; Salve e atualize o navegador. Digite um nome e clique no botão Teste com documento. Veja o resultado.
9 getelementsbyname() getelementsbyname() tem funcionalidade semelhante a getelementbyid(), com a diferença que ele encontra e retorna determinado elemento pelo Name. var nome = document.getelementsbyname("sexo"); alert("o total de elementos com o name 'sexo' é: " + nome.length); Salve e atualize o navegador e tecle no botão Testes com documento. Exemplo 2 // Seleciona os elementos e os armazena em variáveis var nome = document.getelementbyid("nome"); var sexo = document.getelementsbyname("sexo"); // Cria a variável que armazenará as informações e já a inicializa com o nome var informacoes = "Seu nome: " + nome.value; // Acrescenta o sexo if( sexo[0].checked ) informacoes += "\no seu sexo é: Masculino."; else if( sexo[1].checked ) informacoes += "\no seu sexo é: Feminino."; // Exibe um alerta com as informações obtidas alert(informacoes); Salve e atualize o navegador e tecle no botão Testes com documento. Introdução ao tratamento de eventos As propriedades de manipulação de eventos( handles) permite que os scripts especifique funções que devem ser chamadas de forma assíncrona, quando certos eventos ocorrem. Os mecanismos de tratamento de eventos permitem ao JavaScript alterar o comportamento de
10 janelas, de documentos e de elementos que compõem esses documentos. As propriedades de tratamento de evento têm nomes que começam com on. O exemplo a seguir utiliza o evento onclick. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>treinaweb Cursos - JavaScript Básico</title> <script> function executaracao(acao) { if(acao === 'click') { alert("o botão Enviar foi clicado!"); else if(acao === 'change') { </script> </head> <body> alert("a caixa de texto foi modificada!"); <p><input type="text" onchange="executaracao('change');" value="modifique o Texto" /></p> <p><input type="button" onclick="executaracao('click');" value="enviar" /></p> </body> </html> Salve e execute o arquivo.