A maior rede de estudos do Brasil

Grátis
55 pág.
Apostila HTML

Pré-visualização | Página 12 de 17

e 
opcionalmente inicializa a variável com um 
valor. 
var 
var1=valor, var2; 
 
while estrutura de controle que avalia uma 
expressão e se ela for verdadeira executa o 
grupo de comandos. Quando a expressão 
se torna falsa o fluxo do programa é 
continuado sendo executada a instrução 
seguinte ao comando while. 
while (condição) { 
 comandos 
} 
x = 0; 
while (x <= 10) { 
 document.write(x*2); 
 x++; 
} 
 
7.4 JAVASCRIPT BÁSICO 
A JavaScript é uma linguagem interpretada pelo navegador. O código é um tipo de hóspede 
dentro de um programa HTML. No mesmo arquivo .HTML que estão os comandos básicos da 
linguagem HTML, o código JavaScript é inserido de maneira a ser interpretado quando 
necessário. 
Existem duas formas de incluir um código JavaScript dentro do documento HTML. A 
primeira é embutir o código inteiramente dentro do documento e a segunda é criar um arquivo 
externo com os comandos e que é referenciado por um comando dentro do programa HTML 
que o carrega automaticamente. 
Embutir o código dentro do programa HTML tem a vantagem de deixar tudo à mão para a 
edição do código. É ideal quando o código JavaScript vai ser usado apenas naquele 
documento. A criação de um arquivo separado é interessante quando um mesmo código 
JavaScript é utilizado por vários documentos. 
7.4.1 EMBUTINDO O CÓDIGO JavaScript 
Para embutir o código JavaScript no programa HTML, deve ser usado o comando <SCRIPT 
language = JavaScript> ..... </SCRIPT>. Dentro desta tag você deve inserir os comandos 
da linguagem. Este código é avaliado depois da página HTML ter sido carregada. Se existirem 
07 – Java Script 
HTML – Lucilia Ribeiro 37
funções definidas pelo usuário dentro desse código, elas serão apenas carregadas e 
executadas somente quando algum evento as acionar. 
 
EX14.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>EX14 - embutindo um código JavaScript</TITLE> 
 <SCRIPT language="JavaScript"> 
 alert( "Esta caixa de diálogo foi exibida pelo código JavaScript embutido no programa" ) 
 document.write("Esta linha também foi escrita pelo código JavaScript") 
 </SCRIPT> 
 </HEAD> 
 <BODY bgcolor="#FFFFFF"> 
 <HR> 
 Esta linha já é parte do documento HTML. 
 </BODY> 
</HTML> 
7.4.2 CARREGANDO UM ARQUIVO EXTERNO 
Usar um arquivo externo é bastante simples, basta adicionar na linha do comando 
<SCRIPT> o endereço do arquivo através do atributo src. Veja o código abaixo: 
 
EX15.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>EX15 – carregando arquivo JavaScript externo</TITLE> 
 <SCRIPT language=JavaScript src=ex15.js> 
 </SCRIPT> 
 </HEAD> 
 <BODY bgcolor="#FFFFFF"> 
 <HR> 
 Esta linha já é parte do documento HTML. 
 </BODY> 
</HTML> 
O arquivo ex15 é um arquivo texto normal. O seu conteúdo é: 
 
EX15.JS 
 
alert( "Esta caixa de diálogo foi exibida pelo código JavaScript embutido no programa" ) 
document.write("Esta linha também foi escrita pelo código JavaScript") 
7.4.3 EXTENSÕES JavaScript PARA A LINGUAGEM HTML 
O container definido pelo comando <SCRIPT>...</SCRIPT> é usado para armazenar 
comandos que devem ser executados imediatamente após o carregamento do documento 
HTML e funções definidas pelo usuário que são executadas em função da ocorrência de um 
determinado evento com um objeto. 
No exemplo a seguir, dentro da tag <SCRIPT> são criadas duas funções, uma chamada 
Quadrado() e outra Cubo(). Ainda dentro do container, são inseridos alguns comandos que 
inicializam uma variável e acionam a função Quadrado(), exibindo uma frase no documento 
contendo o valor original e o seu Quadrado. 
Ao terminar a execução do script, o documento HTML é carregado normalmente. Através 
de uma extensão do JavaScript à linguagem HTML, pode-se controlar os eventos que ocorrem 
com um objeto e tomar uma ação baseada neste evento. 
O comando input, conforme já foi visto, é usado para receber a digitação de um número. 
Ao digitar o número e teclar enter, o gerenciador de eventos do JavaScript chamado onBlur 
ativa a caixa de diálogo Alert e a função Cubo mostrando o resultado da operação: 
 
07 – Java Script 
HTML – Lucilia Ribeiro 38
EX16.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>EX16 - eventos - OnChange</title> 
 </HEAD> 
 <SCRIPT language=”javascript”> 
 document.write("Linha gerada pelo JavaScript durante o seu carregamento"+"<br>") 
 function quadrado(x) // Função executada por comandos dentro do container Script. { 
 document.write( x*x) 
 } 
 function cubo(x) // Função executada apenas quando um evento ocorrer { 
 return x*x*x 
 } 
 a=5 
 document.write("A raiz de "+ a +" é igual a = " ) 
 quadrado(a) 
 </SCRIPT> 
 <BODY bgcolor="#FFFFFF"> 
 <HR> 
 <FORM> 
 <INPUT type=text name=teste Value="" 
 onChange="alert('O cubo de '+ this.value + ' é ' +cubo(this.value))" > 
 </FORM> 
 <HR> 
 </BODY> 
</HTML> 
7.5 ELEMENTOS ESSENCIAIS DO JavaScript 
Veremos agora alguns elementos essenciais mínimos para trabalhar com a linguagem. 
7.5.1 O OBJETO DOCUMENT 
O objeto document é criado automaticamente pelo comando HTML <HEAD> e <BODY>. 
Como todo objeto, ele possui características ou propriedades que podem ser acessadas ou até 
mesmo alteradas. Para usar uma propriedade ou método deste objeto deve ser usada a 
seguinte sintaxe: document.nome_da_propriedade. 
O MÉTODO DOCUMENTO.WRITE(): um dos elementos da linguagem JavaScript mais 
utilizados é o método write do objeto document. Ele tem como finalidade escrever na página 
HTML o conteúdo especificado entre parênteses. Sintaxe: document.write(mensagem) onde 
mensagem pode representar uma string, que neste caso deve estar entre aspas, qualquer 
expressão válida incluindo o conteúdo de variáveis e propriedades. 
O MÉTODO ALERT(): na verdade pertence ao objeto window. Ele é largamente utilizado 
para a criação de caixas de diálogo interativas com o usuário. Sintaxe: alert(mensagem) onde 
mensagem pode representar uma string entre aspas. 
O MÉTODO CONFIRM(): é uma alternativa ao método alert. Ele exibe uma caixa de 
diálogo com a mensagem específica e dois botões, OK e CANCEL. Se for pressionado o botão 
OK o método retorna TRUE. Dessa forma podemos usar esse método para a tomada de 
decisões dentro de um script. 
7.5.2 MANIPULAÇÃO E ALTERAÇÃO DO VALOR DE UMA PROPRIEDADE 
Uma propriedade de um objeto pode ser vista como se fosse uma variável de memória. 
Quando um objeto é criado, um conteúdo é atribuído a ela. Para alterar o conteúdo de uma 
propriedade usamos um método parecido com o usado para alterar o conteúdo de uma 
variável normal. Basta especificar o nome da propriedade, o sinal de igualdade e o novo 
conteúdo. 
Por exemplo: document.bgColor=red muda a cor de fundo do documento para vermelho. 
Você pode atribuir o conteúdo de uma propriedade a uma variável: cor=document.bgcolor 
 
07 – Java Script 
HTML – Lucilia Ribeiro 39
 
EX17.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>EX17 - Objetos e propriedades</TITLE> 
 </HEAD> 
 <BODY bgcolor="#FFFFFF"> 
 <SCRIPT language=JavaScript> 
 document.write("A cor dos links do documento é : "+ document.alinkColor+ "<br>") 
 document.write("A cor dos links visitados é : "+ document.vlinkColor+ "<br>") 
 document.write("A cor de fundo do documento é : "+ document.bgColor+ "<br>") 
 document.write("A cor de frente do documento é : "+ document.fgColor+ "<br>") 
 document.write("O título do documento é : "+ document.title+ "<br>") 
 alert("A cor de fundo do Documento será alterada") 
 document.bgColor="#FFFF00" 
 document.write("A nova cor de fundo é : "+ document.bgColor) 
 </SCRIPT> 
 <HR> 
 Os dados acima foram obtidos pelo Javascript 
 </BODY> 
</HTML> 
7.6 EVENTOS 
Em uma linguagem baseada em objetos, uma das características principais é a 
possibilidade de gerenciar eventos relacionados com um objeto. A maioria dos eventos está 
relacionada com um campo de formulário,