Resumo JS

P R O G R A M A O
JAVASCRIPT
CADERNO DE
EXERCCIOS
PRTICOS
Prof. Celso Gallo
CADERNO DE EXERCCIOS DE JAVASCRIPT

Prof. Celso Gallo
Linguagem JavaScript
Este material contm exerccios referentes ao Resumo das Aulas de JavaScript.
Exerccio 01: Editar e salvar com o nome de JS01.htm:

Utilizao das propriedades title e bgColor e do mtodo alert().
a)
Fora do Script, na rea de Cabealho:

Cabealho tamanho 1, com o texto: Exerccio 01 - Caixa de Mensagem, centralizado.
b)
Dentro do Script, na rea de Cabealho:

Definir o ttulo da pgina: Exerccio 01
Definir a cor do fundo da pgina: Verde
c)
Dentro do Script, na rea do Corpo Principal:

Exibir uma Caixa de Dilogo com a MENSAGEM Bem-Vindo ao JavaScript !!! - NomeAluno 01 - NomeAluno 02
d)
Fora do Script, na rea do Corpo Principal:

Exibir Linha Horizontal com 200px de comprimento e tamanho 5.
Exibir a frase Esta linha foi escrita em HTML, com a fonte arial, 4, negrito, amarelo e centralizado.

Utilizao das propriedades title e bgColor e dos mtodos write() e confirm().
a)

Cabealho tamanho 1, com o texto: Exerccio 02 - Caixa de Confirmao, centralizado.
b)
Dentro do Script, na rea de Cabealho:

Exibir a frase NomeAluno 01 - NomeAluno 02, com a fonte arial, 4, negrito, laranja e centralizado.
Exibir uma Caixa de Dilogo com a PERGUNTA Voc quer o fundo da pgina na cor azul ?
[OK]: Definir a cor do fundo da pgina: Azul
[CANCELA]: No alterar a cor do fundo da pgina.
Exerccio 03: Digitar e salvar com o nome de JS03.htm:

Utilizao das propriedades title, fgColor e bgColor e do mtodo write().
Utilizao de apstrofo dentro de aspas e aspas dentro de aspas com caracter especial \
Utilizao do operador de string + para concatenar contedos.
<html>
<head>
<script language="JavaScript">
<!-document.bgColor = "#FF0000"; document.fgColor = "yellow"; document.title = "JavaScript Exerccio 03"
a="O nome 'SINGULAR' ser exibido entres aspstrofo (ou aspas simples)."
document.write("<CENTER><B>" + a + "<P>")
b="Para o nome \"SINGULAR\" ser exibido entre aspas, devemos utilizar a barra invertida."
document.write(b + "<P>")
c="Nome_Aluno1"
d="Nome_Aluno2"
document.write("<HR>A nossa dupla composta por " + c + " e por " + d + "</CENTER></B><HR>")
//-->
</script>
</head>
<body>
<hr>
<h1><center>Exerccio 03<p></h1>
</body>
</html>
Colgio Singular - Caderno de Exerccio das Aulas de JavaScript - Prof. Celso Gallo
Pgina 1

Utilizao do mtodo write().
Utilizao de tabulao e quebra de linha com caracteres especiais \t e \n
Utilizao de literais com ponto flutuante.
<head><title>Exerccio 04</title></head>
<body bgcolor="#AAAAAA" text="blue">
<h2>Algumas Variveis e Literais</h2><p>
<h3>NomeAluno01 - NomeAluno02</center></h3>
<!-document.write("<pre>")
document.write("1 \t 2 \t 3 \t 4 \t 5")
document.write("<hr>Esta parte est numa linha \ne esta parte est na outra.
</pre><hr>")
a = 0.32e5
b = 0.32e-5
document.write("O valor de 0.32e5 " + a + "<br>")
document.write("O valor de 0.32e-5 " + b)
//-->
</script>
</body>
</html>

Utilizao do mtodo write().
Utilizao dos operadores incrementais e decrementais.
<head><title>Operadores JavaScript</title></head>
<body bgcolor="lightyellow">
<h3>NomeAluno01 - NomeAluno02</center></h3>
<font face="arial"color="darkgreen">
<h2>Utilizando Operadores Incrementais</h2><p>
<!-//Testando com ++A
document.write("<B> Que valores assumem x=++a para a=1 ? </B> <BR>")
a=1
x=++a
document.write("Primeiro: a=" + a + "<BR> Depois: x=" + x + "<HR>")
//Testando com A++
document.write("<B> Que valores assumem x=a++ para a=1 ? </B> <BR>")
a=1
x=a++
document.write("Primeiro: x=" + x + "<BR> Depois: a=" + a + "<HR>")
//-->
</script>
<font face="arial"color="darkblue">
<p><h2>Utilizando Operadores Decrementais</h2><p>
<script language="Javascript">
<!-//Testando com --A
document.write("<B> Que valores assumem x=--a para a=1 ? </B> <BR>")
a=1
x=--a
document.write("Primeiro: a=" + a + "<BR> Depois: x=" + x + "<HR>")
//Testando com A-document.write("<B> Que valores assumem x=a-- para a=1 ? </B> <BR>")
a=1
x=a-document.write("Primeiro: x=" + x + "<BR> Depois: a=" + a + "<HR>")
</script>
</body></html>
Pgina 2

Utilizao das propriedades title, bgColor, fgColor, alinkColor, vlinkColor e dos mtodos write() e alert().
a)

b)

Exibir a frase Exerccio 06 - Objetos e Propriedades, cabealho tamanho 1, centralizado.
Exibir a frase NomeAluno 01 - NomeAluno 02, com a fonte arial, 4, negrito, laranja e centralizado.
Linha Horizontal.
Exibir a frase, com a resposta capturada, A cor dos links da pgina :
Exibir a frase, com a resposta capturada, A cor dos links visitados da pgina :
Exibir a frase, com a resposta capturada, A cor do fundo da pgina :
Exibir a frase, com a resposta capturada, A cor da fonte da pgina :
Exibir a frase, com a resposta capturada, O ttulo da pgina :
Exibir uma Caixa de Dilogo com a MENSAGEM A cor do fundo da pgina ser alterada
[OK]: Alterar a cor do fundo da pgina: azul-claro
Linha Horizontal.
Exibir a frase, com a resposta capturada, A nova cor do fundo da pgina :
Exibir a frase, com a resposta capturada, A nova cor da fonte da pgina :
Linha Horizontal.

Para o completo funcionamento, devem tambm ser editados os Exerccios 07-V1 e 07-V2.
Utilizao do objeto window.location com a funo return (Redirecionamento automtico e com link).
a)

Cabealho tamanho 1, com o texto: Exerccio 07 - Redirecionamento, centralizado.
b)

Definir Script como JavaScript1.1
Redirecionar o usurio para a pgina JS07V2.htm
c)
Fora do Script, na rea do Corpo Principal:

Exibir a frase O seu navegador no aceita o JavaScript 1.1. Clique aqui e voc ser redirecionado para uma pgina
compatvel., sendo que Clique aqui um hiperlink com acesso pgina JS07V1.htm.
Exerccio 07-V1: Editar e salvar com o nome de JS07V1.htm:

<HTML> 
<HEAD>
<title>Exerccio 07 - V1</title>
</HEAD>
<BODY BGCOLOR="black" TEXT= yellow>
<h3><center>Exerccio 07-V1 - Redirecionamento Automtico No Foi Possvel<p></h3>
O seu navegador <b><u>NO ACEITA</b></u> o JavaScript 1.1.
</BODY>
</HTML>
Exerccio 07-V2: Editar e salvar com o nome de JS07V2.htm:

<HTML> 
<HEAD>
<title>Exerccio 07 - V2</title>
</HEAD>
<BODY BGCOLOR="silver" TEXT=gray>
<h3><center>Exerccio 07-V2 - Redirecionamento Automtico Funciona<p></h3>
O seu navegador <b><u>ACEITA</b></u> o JavaScript 1.1.
</BODY>
</HTML>
Pgina 3

A propriedade que possui a informao sobre o comprimento da resoluo da tela window.screen.width, logo, a largura da tela
dada pela propriedade window.screen.height.
Utilizao da estrutura condicional if/else aninhados, e do mtodo write().
a)
Na rea de Cabealho, fora do Script:

b)
Na rea do Corpo Principal, fora do Script:

Definir a cor do fundo da pgina: verde-claro.
Cabealho tamanho 1, com o texto: Exerccio 08 - Condicionais, centralizado.
Linha horizontal.
Cabealho tamanho 3, com o texto: Verificao da resoluo do monitor, centralizado, quebra de pargrafo.
Texto: NomeAluno01 - NomeAluno02, fonte arial, tamanho 4, verde-escuro, centralizado.
Linha horizontal.
Definir fonte arial, tamanho 5, vermelho.
c)
Na rea do Corpo Principal, dentro do Script:

Exibir o texto, com captura da configurao do monitor: A configurao do seu Monitor ??? x ??? pixels.
Verificar se o comprimento da tela de 640 pixels.
TRUE = Exibir o texto: Precisa aumentar, heim!!!
FALSE = Verificar se o comprimento da tela de 800 pixels.
TRUE = Exibir o texto: Configurao Boa!!!
FALSE = Verificar se o comprimento da tela de 1024 pixels.
TRUE = Exibir o texto: "UAU!!! Que Beleza!!!"
FALSE = Exibir o texto: "Que Configurao essa??"

Utilizao da estrutura de repetio for, e do mtodo write().
a)

b)

Definir a cor do fundo da pgina: Marrom.
Definir a cor dos textos: #AAFFAA
Cabealho tamanho 1, com o texto: Exerccio 09 - Loop, centralizado, quebra de linha.
Cabealho tamanho 3, com o texto: Nmeros PARES de 1 a 100, centralizado, quebra de pargrafo.
Texto: NomeAluno01 - NomeAluno02, fonte arial, tamanho 4, amarelo, centralizado, quebra de pargrafo.
Definir fonte arial, tamanho 5, branco, centralizado, negrito.
c)

Iniciar uma repetio (loop) para que sejam exibidos todos os nmeros inteiros PARES de 1 a 100. Os nmeros devem ser
exibidos na mesma linha, separados apenas por 1 espao.
Pgina 4

Utilizao de funo e dos mtodos write() e alert().
Utilizao das propriedades title, bgColor, fgColor na mesma linha, separadas por ponto-e-vrgula.
Utilizao da propriedade value para capturar o contedo de um campo de formulrio.
Utilizao do evento onBlur (quando o objeto perder o foco).
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-document.title="Exerccio 10"; document.bgColor="silver"; document.fgColor="blue"
document.write("<font color=yellow size=4 face=arial><b><center>")
document.write("Aluno01 - Aluno02")
document.write("</font></b></center>")
//-->
</SCRIPT>
</HEAD>
<BODY>
<h1><center>Exerccio 10 - Funes<br></h1>
<h3>Duas formas de Utilizao</h3><p></center>
<!-// Esta funo ser executada por comandos DENTRO DO SCRIPT.
function quadrado(x)
{
document.write(x*x)
}
// Esta funo ser executada apenas quando um evento ocorrer durante o programa, e FORA DO SCRIPT.
function cubo(x)
{
return x*x*x
}
document.write("<CENTER><HR>")
document.write("1 FORMA: Atribuir um valor e exibir o resultado dentro do Script<P>")
w=5
document.write("O quadrado de " + w + " igual a ")
quadrado(w)
document.write(".<HR>")
//-->
</SCRIPT>
<CENTER>
2 FORMA: Passar um valor para a Funo e Retornar o resultado para fora do Script<P>
<FORM NAME="Form01">
Digite um nmero inteiro qualquer para calcular o seu cubo:
<INPUT TYPE="text" NAME="tx01" VALUE="" SIZE="2" MAXLENGTH="2" onBlur="alert('O cubo de '+
this.value + ' ' + cubo(this.value))">
<HR>
</FORM>
</CENTER>
</BODY>
</HTML>
Pgina 5

Utilizao de funo e dos mtodos write() e alert().
Utilizao das propriedades title, bgColor, fgColor.
Utilizao do operador de string + para concatenar contedos e do operador mdulo %
Utilizao da propriedade value para capturar o contedo de um campo de formulrio.
Utilizao do evento onClick (quando o usurio clicar no objeto).
a)

Cabealho tamanho 1, com o texto: Exerccio 11 - Funes, centralizado, quebra de linha.
Cabealho tamanho 3, com o texto: Verificar se um nmero PAR ou MPAR, centralizado, quebra de pargrafo.
b)

Definir o ttulo da pgina: Exerccio 11.
Definir a cor do fundo da pgina: rosa-claro.
Definir a cor dos textos: #555555.
Texto: NomeAluno01 - NomeAluno02, fonte arial, tamanho 4, vermelho-escuro, centralizado, negrito, quebra de pargrafo.
Definir uma funo chamada par() que receber um determinado valor.
Verificar se este valor recebido par (se o resto da diviso deste valor por 2 for zero).
TRUE = Exibir a Caixa de Dilogo com a MENSAGEM, com o valor recebido: "O nmero ?? PAR !".
FALSE = Exibir a Caixa de Dilogo com a MENSAGEM, com o valor recebido: "O nmero ?? MPAR !".
c)

Criar um formulrio chamado FORM1.
Texto: Digite um nmero inteiro qualquer:, centralizado, negrito, quebra de linha.
Criar uma Caixa de Texto chamada TX1, tamanho 5, quebra de linha..
Criar um Boto chamado BT1, com o rtulo [VERIFICAR]. Quando o usurio clicar, executar a funo par() com o valor
que estiver digitado na Caixa de Texto.

Utilizao de funo e do mtodos confirm() e alert().
Utilizao do evento onClick (quando o usurio clicar no objeto).
a)
Na rea de Cabealho, dentro do Script:

Definir o ttulo da pgina: Exerccio 12.
Definir uma funo chamada resp() que no receber valores.
Exibir uma Caixa de Dilogo com a PERGUNTA "Voc tem muita curiosidade?".
[OK] = Exibir a Caixa de Dilogo com a MENSAGEM: " CUIDADO! Voc poderia ter apagado tudo !".
[CANCELA] = Exibir a Caixa de Dilogo com a MENSAGEM: " Resposta Certa! Cautela e Canja de Galinha no
fazem mal a ningum !".

Definir a cor do fundo da pgina: azul-claro.
Cabealho tamanho 1, com o texto: Exerccio 12 - Tratador de Evento, centralizado, quebra de linha.
Cabealho tamanho 3, com o texto: Utilizando o Evento onClick, centralizado.
Linha horizontal.
Exibir texto: NomeAluno01 - NomeAluno02, fonte arial, tamanho 4, azul-escuro, centralizado, quebra de pargrafo.
Criar um formulrio chamado FORM1.
Criar um Boto chamado BT1, com o rtulo [No aperte esse boto !], centralizado. Quando o usurio clicar, executar a
funo resp().
Linha horizontal.
Cabealho tamanho 2, com o texto: Teste de Fsica, centralizado, quebra de linha.
Exibir texto: Um ponto material livre da ao de foras ou est em repouso ou realiza movimento retilneo e uniforme,
itlico, negrito, quebra de linha.
Exibir texto: A afirmao refere-se a:, quebra de pargrafo.
Criar mais 4 (quatro) Botes chamados BT2, BT3, BT4 e BT5, com os rtulos [A], [B], [C] e [D], um em cada linha, sendo
que, aps cada Boto, dever ter os seguintes textos:
[A] 1 Lei de Newton.
[B] Princpio da Inrcia.
[C] Teoria da Relatividade.
[D] A e B so a mesma coisa.
Quando o usurio clicar, cada boto exibir uma Caixa de Dilogo com as seguintes mensagens:
A: Certa a resposta! Mas a B tambm !
B: Certa a resposta! Mas a A tambm !
C: Resposta Errada.
D: Certa a resposta!
b)
Pgina 6

Utilizao de formulrio.
Utilizao do evento onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp
<HEAD>
<TITLE>Exerccio 13</TITLE>
</HEAD>
<BODY BGCOLOR="lightgreen">
<H1><center>Exerccio 13 - Tratador de Evento<BR></H1>
<H3>Utilizando vrios Eventos</H3>
<h2><font face="arial" size="4" color="yellow">NomeAluno01 - NomeAluno02</center></font></h2>
<HR>
<FORM NAME="form01">
<CENTER>
<input
type="button"
value="OVER=Vermelho
||
OUT=Azul
||
CLICK=Azul"
onMouseOver="document.bgColor='red'"
onMouseOut="document.bgColor='#0000FF'"
onClick="document.bgColor='#0000FF'"><p>
<input type="button" value="DOWN=Verde || UP=Cinza" onMouseDown="document.bgColor='green' "
onMouseUp="document.bgColor='gray' ">
<hr>
</CENTER>
Escolha a cor do fundo desta pgina:<P>
<input type="radio" name="cor" onClick="document.bgColor='red' "> Vermelho<br>
<input type="radio" name="cor" onClick="document.bgColor='green' "> Verde<br>
<input type="radio" name="cor" onClick="document.bgColor='#0000FF' "> Azul
</FORM>
</BODY>
</HTML>

Utilizao de acesso ao Arquivo Externo.
Utilizao de funo.
a)

b)
Na rea do Corpo Principal, definir Script com acesso ao arquivo externo JS14extra.js:
c)
Na rea do Corpo Principal, fora do script:

Cabealho tamanho 1, com o texto: Exerccio 14 - Arquivo Externo, centralizado, quebra de linha.
Cabealho tamanho 3, com o texto: Calculando a Raiz Quadrada, centralizado, quebra de pargrafo.
Criar formulrio chamado FormRaiz, centralizado:
- Exibir o texto Digite um nmero positivo qualquer para calcular a sua Raiz Quadrada:
- Criar uma caixa de texto, tamanho 5, permitir digitao mxima de 5 caracteres e definir o seguinte evento: Quando o
objeto perder o foco, ser acessada uma funo chamada raiz(), contendo o nmero digitado na caixa de texto.
Exerccio 14: Editar e salvar com o nome de JS14extra.js:

Este ser o Arquivo Externo.
Utilizao de funo.
Definir a cor do fundo da pgina: verde-escuro.
Definir a cor dos textos: branco.
Criar uma funo chamada raiz():
- Verificar se o valor a ser calculado negativo:
- TRUE: exibir caixa de dilogo com a mensagem No existe raiz quadrada de nmero negativo!.
- FALSE: exibir caixa de dilogo com a mensagem A Raiz Quadrada de ___ ___..
Obs.: Para calcularmos a Raiz Quadrada de um nmero em JavaScript, devemos utilizar a funo Math.sqrt().
Pgina 7

Utilizao do mtodo window.open e close().
<HEAD>
<TITLE>Exerccio 15</title>
</HEAD>
<BODY>
<CENTER>
<!-document.bgColor=("#AAFFAA")
document.fgColor=("blue")
document.write("<font face='arial' size='5'><b>Exerccio 15 - Abrindo e Fechando Novas
Janelas</b></font><p>")
document.write("<font color='black' size='4' face='arial'><b><center>")
document.write("Aluno01 - Aluno02")
document.write("</font></b></center>")
// Abrindo duas novas janelas automaticamente
window.open("js15_01.htm")
js15b = window.open("js15_02.htm","", "menubar, status, scrollbars")
//-->
</SCRIPT>
<FORM>
<INPUT TYPE="button" VALUE="Fechar a 2 janela" onClick="js15b.close()"><p>
<INPUT TYPE="button" VALUE="Abrir a 2 janela com outra configurao" onClick="js15b =
window.open( 'js15_02.htm', ' ' , 'width=400, height=200' )">
</FORM>
</BODY></HTML>
Exerccio 15 (Continuao): Editar e salvar com o nome de JS15_01.htm:

<HTML>
<HEAD>
<TITLE>1 Janela Nova - Exerccio 15</TITLE>
function fechar() // Funo para fechar esta janela
{
close()
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="YELLOW" TEXT="RED">
<CENTER><FONT FACE="ARIAL" SIZE="5">
<B>TESTE DE JAVASCRIPT</FONT><P>
SOU A 1 JANELA NOVA DO EXERCCIO 15<P>
Obs.: A configurao desta janela est completa.
<FORM>
<INPUT TYPE="button" VALUE="Fechar esta janela" onClick="fechar()">
</FORM>
</B></CENTER></BODY></HTML>
Exerccio 15 (Continuao): Editar e salvar com o nome de JS15_02.htm:

<HTML>
<HEAD>
<TITLE>2 Janela Nova - Exerccio 15</TITLE>
</HEAD>
<BODY BGCOLOR="RED" TEXT="YELLOW">
<CENTER>
<FONT FACE="ARIAL" SIZE="5">
<B>TESTE DE JAVASCRIPT</FONT><P>
Sou a 2 Janela nova do Exerccio 15.<P >
Obs.: Repare as novas configuraes do browser.
</B>
</CENTER></BODY></HTML>
Pgina 8
Exerccio 16: Editar e salvar com o nome de JS16a.htm:

Utilizao do mtodo window.open e close().
Utilizao de Frames.
Criar uma Pgina Web para gerenciar 3 (trs) frames conforme segue:
Ttulo da Pgina: Exerccio 16
FrameAlto, JS16b.htm, 60px de altura, sem barra de rolagem, sem borda.
FrameEsquerda, JS16c.htm, 300px

de comprimento, barra de rolagem
automtica, sem borda.
FrameDireita, JS16d.htm, com barra de rolagem, sem borda.
Exerccio 16 (Continuao): Editar e salvar com o nome de JS16b.htm:

Definir a cor do fundo da pgina: amarelo.
Definir a cor dos textos: azul escuro.
Texto: Exerccio 16 - Acessando Pginas em Frames, centralizado, adicionar quebra de linha.
Texto: NomeAluno01 - NomeAluno02, fonte arial, tamanho 3, preto, centralizado.
Exerccio 16 (Continuao): Editar e salvar com o nome de JS16d.htm:

Definir a cor do fundo da pgina: laranja.
Definir a cor dos textos: marrom.
Texto: Este o Frame da Direita., centralizado.
Exerccio 16 (Continuao): Editar e salvar com o nome de JS16c.htm:

Definir as cores: fundo da pgina = azul escuro; Links = branco, Links Visitados = amarelo.
Dever ter uma tabela com 6 (seis) linhas e 2 (duas) colunas, com bordas, cor do fundo da tabela = azul claro.
Na primeira coluna devero estar os botes para as atividades JS02.htm at JS06.htm, e um link para a atividade JS01.htm, onde
cada atividade ser exibida de acordo com os seguintes parmetros:
- Rtulo JS01.htm, acesso atravs da tag <a href>, exibida em outra janela:
Obs.: Deve ser utilizado o parmetro target=_blank em <a href>.
- Rtulo JS02.htm, acesso atravs de boto, exibida no FrameDireita, com a configurao padro.
- Rtulo JS03.htm, acesso atravs de boto, exibida em nova janela, com as configuraes abaixo:
menubar=yes, scrollbars=yes, resizable=no, toolbar=no, location=no, directories=no.
- Rtulo JS04.htm, acesso atravs de boto, exibida em nova janela, com a configurao abaixo:
resizable=1, 250px de altura e 400px de comprimento.
toolbar, location, directories, scrollbars;
toolbar;
Na segunda coluna devero estar os botes para as atividades JS07.htm at JS09.htm, onde cada atividade ser exibida de acordo
com os parmetros abaixo, e ainda outros trs botes conforme seguem:
- Rtulo JS07.htm, acesso atravs de boto, exibida em nova janela, com a configurao padro, e atribuir varivel varjs07;
- Rtulo JS08.htm, acesso atravs de boto, exibida no FrameDireita.
- Rtulo JS09.htm, acesso atravs de boto, exibida em nova janela, com a configurao padro, e atribuir varivel varjs09;
- Rtulo Fechar JS07, para fechar a janela com a atividade JS07.htm;
- Rtulo Fechar JS09, para fechar a janela com a atividade JS09.htm;
- Rtulo Abrir Vazia, para abrir nova janela em branco.
Pgina 9

<HTML>
<HEAD>
<TITLE>EXERCCIO 17 - JANELA PRINCIPAL </TITLE>
</HEAD>
<FRAMESET ROWS=60%,*>
<FRAME NAME="FRA" SRC="JS17b.htm">
<FRAME NAME="FRB" SRC="JS17c.htm">
</FRAMESET>
</HTML>

<HEAD>
<TITLE>JS17B - FRAME ALTO</TITLE>
</HEAD>
<BODY BGCOLOR="YELLOW" TEXT="BLACK">
<CENTER>
<FONT FACE="ARIAL" SIZE="5">
<B>EXERCCIO 17 - PROPRIEDADES DOS FRAMES</B></FONT><P>
<!-document.write("<center><big>Ttulo desta Janela: " + window.self.document.title +
"</big><hr></center>")
document.write("<br>")
document.write("A mais antiga : " + window.top.document.title)
document.write("A janela me : " + window.parent.document.title)
document.write("Este Frame Filho : " + window.top.frames[0].document.title)
document.write("A quantidade de Janelas-Filha da Me Principal : " +
window.top.frames.length)
document.write("A quantidade de Janelas-Filha da Me Secundria : " +
window.top.frames[1].frames.length)
//->
</SCRIPT>
</CENTER>
</BODY>
</HTML>

<HEAD>
<TITLE>EXERCCIO 17 - FRAME SECUNDRIO</TITLE>
</HEAD>
<FRAMESET COLS=50%,*>
<FRAME NAME="FRC" SRC="JS17d.htm">
<FRAME NAME="FRD" SRC="JS17e.htm">
</FRAMESET>
</HTML>
Pgina 10

<HEAD>
<TITLE>JS17D - FRAME ESQUERDA</TITLE>
</HEAD>
<BODY>
<!-document.bgColor=("brown")
document.fgColor=("yellow")
document.write("<center><big>Ttulo desta Janela: " + window.self.document.title + "</big><hr></center>")
document.write("Este Frame Filho : " + window.top.frames[1].frames[0].document.title)
//-->
</SCRIPT>
</BODY>
</HTML>
Exerccio 17 (Continuao): Editar e salvar com o nome de JS17e.htm:

<HEAD>
<TITLE>JS17E - FRAME DIREITA</TITLE>
</HEAD>
<BODY>
<!-document.bgColor=("green")
document.fgColor=("white")
document.write("<center><big>Ttulo desta Janela: " + window.self.document.title + "</big><hr></center>")
document.write("Este Frame Filho : " + window.top.frames[1].frames[1].document.title)
//-->
</SCRIPT>
</BODY>
</HTML>
Pgina 11

Utilizao do objeto location.
<HTML>
<HEAD><TITLE> Exerccio 18 </TITLE></HEAD>
<BODY BGCOLOR="BROWN" TEXT="YELLOW">
<CENTER><B><FONT FACE="ARIAL" SIZE="5">EXERCCIO 18 - OBJETOS LOCATION</FONT><P>
<FONT FACE="ARIAL" SIZE="4" COLOR=WHITE>Aluno01 Aluno02</FONT></B>
<FORM NAME="NAVEGAR">
<INPUT TYPE="BUTTON" NAME="BOTAO1" VALUE="Portal Singular"
onClick = "window.location.href = 'http://www.singular.com.br' "><BR>
<INPUT TYPE="BUTTON" NAME="BOTAO2" VALUE="Pesquisa Google"
onClick = "window.location.href = 'http://www.google.com.br' "><BR>
<INPUT TYPE="BUTTON" NAME="BOTAO3" VALUE="Recarregar esta Pgina"
onClick = "window.location.reload()"><BR>
<INPUT TYPE="BUTTON" NAME="BOTAO4" VALUE="Carregar Globo.com como Pgina de Entrada"
onClick = "window.location.replace('http://www.globo.com')">
</CENTER><HR>
</FORM>
<FONT FACE="ARIAL" SIZE="2" COLOR="WHITE">
<CENTER>
<!-document.write("<BIG>(HREF) Endereo Completo do Documento:
</BIG><BR><FONT COLOR='yellow'>" + document.location.href + "</FONT></BIG><P>")
document.write("<BIG>(PATHNAME) Caminho do Link, a Partir da Barra do Nome do Servidor:
</BIG><BR><FONT COLOR='yellow'>"+ document.location.pathname + "</FONT></BIG><P>")
document.write("<BIG>(PROTOCOL) Protocolo Especificado no Endereo:
</BIG><BR><FONT COLOR='yellow'>"+ document.location.protocol + "</FONT></BIG><P>")
document.write("<BIG>(HOST) Nome do Servidor e a Porta de Endereo:
</BIG><BR><FONT COLOR='yellow'>"+ document.location.host + "</FONT></BIG><P>")
document.write("<BIG>(HOSTNAME) Nome do Servidor ou Endereo IP:
</BIG><BR><FONT COLOR='yellow'>"+ document.location.hostname + "</FONT></BIG><P>")
document.write("<BIG>(HASH) Nome da ncora (se houver):
</BIG><BR><FONT COLOR='yellow'>"+ document.location.hash + "</FONT></BIG>")
//-->
</SCRIPT>
</BODY>
</HTML>
Pgina 12
Exerccio 19: Editar e salvar com o nome de JS19a.htm:

Utilizao do objeto history.
<HTML>
<HEAD><TITLE> 1 Pgina Exerccio 19</TITLE></HEAD>
<BODY BGCOLOR="GRAY" TEXT="LIGHTYELLOW">
<CENTER><FONT FACE="ARIAL" SIZE="5"><B>Exerccio 19 - 1 Pgina Do Objeto History</FONT><P>
<FONT FACE="ARIAL" SIZE="3" COLOR=YELLOW>Aluno01 Aluno02</FONT></B>
<FORM NAME="NAVEGA">
<INPUT TYPE="BUTTON" NAME="BOTAO1" VALUE="Colgio Singular Diurno"
onClick="window.location.href='http://paginas.terra.com.br/educacao/portaisls/singular/principal/regulares/ensinomediod.htm
<INPUT TYPE="BUTTON" NAME="BOTAO2" VALUE="Colgio Singular Noturno"
onClick="window.location.href='http://paginas.terra.com.br/educacao/portaisls/singular/principal/regulares/ensinomedion.htm
<P>
<INPUT TYPE="BUTTON" NAME="BOTAO3" VALUE="Voltar Ao Anterior" onClick ="history.back()">
<INPUT TYPE="BUTTON" NAME="BOTAO4" VALUE="Voltar Ao Prof. Gallo" onClick = "history.go('celsogallao')"><P>
<INPUT TYPE="BUTTON" NAME="BOTAO5" VALUE="Avanar Ao Prximo" onClick ="history.forward()">
<INPUT TYPE="BUTTON" NAME="BOTAO7" VALUE="Avanar ltima Pgina" onClick =
"history.go(history.length - 1)"><HR>
<A HREF="JS19b.HTM">2 Pgina</A> Do Objeto History<BR>
<A HREF="JS19c.HTM">3 Pgina</A> Do Objeto History<BR>
<A HREF="JS19d.HTM">4 Pgina</A> Do Objeto History<BR><HR>
</FORM>
</CENTER>
<!-document.write("Quantidade de itens: "+ history.length + "<br>")
document.write("* URL atual: "+ history.current + "<br>")
document.write("* URL da pgina anterior: "+ history.previous + "<br>")
document.write("* URL da prxima pgina: "+ history.next + "<p>")
document.write("<small>( * Somente Netscape 4+ </small>")
//-->
</SCRIPT>
</BODY></HTML>

<BODY BGCOLOR="SILVER" TEXT="BLACK">
<INPUT TYPE="BUTTON" NAME="BOTAO1" VALUE="Pgina Do Prof. Gallo" onClick =
"window.location.href='http://www.celsogallao.hpg.com.br' ">
<INPUT TYPE="BUTTON" NAME="BOTAO2" VALUE="Portal Singular" onClick =
"window.location.href='http://www.singular.com.br' "><P>
<INPUT TYPE="BUTTON" NAME="BOTAO4" VALUE="Voltar Ao Prof. Gallo" onClick = "history.go('celsogallao')">
<INPUT TYPE="BUTTON" NAME="BOTAO6" VALUE="Voltar 1 Pgina" onClick = "history.go(-1)<P>
<A HREF="JS19c.HTM">3 Pgina</A> Do Objeto History<BR>
</FORM></CENTER>
Pgina 13

//-->
</SCRIPT></BODY></HTML>

<BODY BGCOLOR="BLACK" TEXT="LIGHTYELLOW">
<INPUT TYPE="BUTTON" NAME="BOTAO6" VALUE="Voltar 1 Pgina" onClick = "history.go(-2)<P>
</FORM></CENTER>
//-->
</SCRIPT></BODY></HTML>
Pgina 14

<HEAD>
<TITLE> 4 Pgina Exerccio 19</TITLE>
</HEAD>
<BODY BGCOLOR="BROWN" TEXT="YELLOW">
<INPUT TYPE="BUTTON" NAME="BOTAO6" VALUE="Voltar 1 Pgina" onClick = "history.go(-3)<P><HR>
</FORM>
</CENTER>
//-->
</SCRIPT>
</BODY>
</HTML>
Pgina 15

<HEAD><TITLE>JS20 - Propriedades dos Frames</TITLE>
<!-function mostrar() // Criao dos objetos de formulrio
{
cores = window.screen.colorDepth;
document.formteste.cor.value
= Math.pow(2, cores);
document.formteste.navegador.value
= navigator.appName;
document.formteste.versao.value
= navigator.appVersion;
document.formteste.confcor.value
= window.screen.colorDepth;
document.formteste.comp.value
= window.screen.width;
document.formteste.largura.value
= window.screen.height;
document.formteste.maxcomp.value
= window.screen.availWidth;
document.formteste.maxlargura.value
= window.screen.availHeight;
document.formteste.plataforma.value
= navigator.platform;
if (navigator.javaEnabled() < 1)
document.formteste.java.value="No";
if (navigator.javaEnabled() == 1)
document.formteste.java.value="Sim";
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="YELLOW" TEXT="WHITE" onLoad=mostrar()>

<CENTER><FONT FACE="ARIAL" SIZE="5"><B>Exerccio 20 - Objeto Navigator</FONT><P>
<FONT FACE="ARIAL" SIZE="3" COLOR=DARKBLUE>Aluno01 Aluno02</FONT></B>
<FONT SIZE=4 COLOR=DARKGREEN FACE=ARIAL>CARACTERSTICAS DO BROWSER</FONT></B>
<FORM NAME=formteste>
<TABLE BORDER=1 WIDTH=500 BGCOLOR="GRAY">
<TR>
<TD>BROWSER:</TD>
<TD ALIGN=CENTER><INPUT TYPE=TEXT SIZE=30 MAXLENGTH=50 NAME=navegador></TR>
<TR>
<TD>VERSO:</TD>
<TD ALIGN=CENTER><INPUT TYPE=TEXT SIZE=30 MAXLENGTH=50 NAME=versao></TR>
<TR>
<TD>RESOLUO ATUAL:</TD>
<TD ALIGN=CENTER>
<INPUT TYPE=TEXT SIZE=4 MAXLENGTH=4 NAME=comp> X
<INPUT TYPE=TEXT SIZE=4 MAXLENGTH=4 NAME=largura></TD></TR>
<TR>
<TD>RESOLUO MXIMA:</TD>
<TD ALIGN=CENTER>
<INPUT TYPE=TEXT SIZE=4 MAXLENGTH=4 NAME=maxcomp> X
<INPUT TYPE=TEXT SIZE=4 MAXLENGTH=4 NAME=maxlargura></TR>
<TR>
<TD>CONFIGURAO DE CORES:</TD>
<TD ALIGN=CENTER><INPUT TYPE=TEXT SIZE=2 MAXLENGTH=2 NAME=confcor></TR>
<TR>
<TD>QUANTIDADE DE CORES:</TD>
<TD ALIGN=CENTER><INPUT TYPE=TEXT SIZE=8 MAXLENGTH=8 NAME=cor></TR>
<TR>
<TD>PLATAFORMA:</TD>
<TD ALIGN=CENTER><INPUT TYPE=TEXT SIZE=15 MAXLENGTH=15 NAME=plataforma></TR>
<TR>
<TD>CONFIGURAO JAVASCRIPT:</TD>
<TD ALIGN=CENTER><INPUT TYPE=TEXT SIZE=3 MAXLENGTH=3 NAME=java></TR>
<TR>
<TD COLSPAN=2 ALIGN=CENTER>
<INPUT TYPE=BUTTON NAME=NOVO VALUE="DE NOVO" onClick="mostrar()"</TD></TR>
</TABLE>
</FORM>
<BODY></HTML>
Pgina 16

<HTML>
<HEAD>
<TITLE>JS21 Expresso Matemtica</TITLE>
<!-function calcular(x)
{
if (confirm("Tem Certeza?"))
{
x.resultado.value = eval(x.expressao.value)
}
else
{
alert("Pressione OK para voltar pgina")
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="ORANGE" TEXT="DARKBLUE">
<CENTER>
<FONT FACE="ARIAL" SIZE="5"><B>Exerccio 21 - Expresso Matemtica</FONT><P>
<FONT FACE="ARIAL" SIZE="3" COLOR=DARKBLUE>Aluno01 Aluno02</FONT></B></P>
<FORM>
<HR>
<table>
<tr>
<td align="right"><B>Digite uma expresso matemtica (exemplo: 2+2 ou 3*5):</B></td>
<td><input type="text" name="expressao" size="30" maxlength="30"></td></tr>
<tr>
<td align="right"><B>Resultado:</B></td>
<td><input type="text" name="resultado" size=10 maxlength="10></td></tr>
</table>
<input type="button" value="Calcula" onClick="calcular(this.form)">
<input type="reset" value="Limpa" onClick="expressao.focus()">
<HR>
</FORM>
</BODY>
</HTML>
Pgina 17

<HTML>

<HEAD>
<TITLE>JS22 Validao de Campos</TITLE>
<!-function campovital(x)
{
if (x.value=="")
{
if (confirm("O campo "+ x.name +" no pode ser deixado em branco. Quer retornar para digitar?"))
{
x.focus()
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="lightyellow" TEXT="DARKGREEN">
<CENTER>
<FONT FACE="ARIAL" SIZE="5"><B>Exerccio 22 - Validao de Campos</FONT><P>
<FONT FACE="ARIAL" SIZE="3" COLOR=DARKBLUE>Aluno01 Aluno02</FONT></B>
</CENTER>
<HR>
<PRE>
<FORM>
Digite seus Dados (Os campos com * so obrigatrios):<p>
<br>Cdigo*...:<input type="text" name="cdigo" value="" size="5" maxlength="5" onBlur="campovital(this)">
<br>Nome*.....:<input type="text" name="nome" value="" size="30" maxlength="30" onBlur="campovital(this)">
<br>Cargo.....:<input type="text" name="cargo" value="" size="20" maxlength="20">
<br>Telefone*.:<input type="text" name="telefone" value="" size="15" maxlength="15" onBlur="campovital(this)">
<br>Ramal.....:<input type="text" name="ramal" value="" size="4" maxlength="4">
</FORM>
</PRE>
</BODY>
</HTML>
Pgina 18

<HTML>
<HEAD>
<TITLE>JS23 - Objetos Math</TITLE>
</HEAD>
<BODY BGCOLOR="gray" TEXT="yellow"><center>
<CENTER>
<FONT FACE="ARIAL" SIZE="5"><B>Exerccio 23 - Objetos Math</FONT><P>
<FONT FACE="ARIAL" SIZE="3" COLOR="white">Aluno01 Aluno02</FONT></B>
</CENTER>
<HR>
<FORM NAME=calculos>
<TABLE WIDTH="100%" BORDER="0" BGCOLOR="silver">
<TR>
<TD ALIGN="right">Digite um nmero real qualquer:</TD>
<TD><input type="text" name="tx1" value=""></TD></TR>
<TR>
<TD ALIGN="right">Resultado:
<TD><input type="text" name="tx2" value=""></TD></TR>
<TR>
<TD ALIGN="right">
<input type="button" name="bt1" value="Dividir N por 3" onClick="calculos.tx2.value=(calculos.tx1.value)/3">
<TD>
<input type="button" name="bt2" value="Dividir N por 3 e arredondar" onClick="calculos.tx2.value=Math.round(calculos.tx1.value/3)">
</TD></TR>
<TR>
<TD ALIGN="right">
<input type="button" name="bt3" value="O menor inteiro maior que o N" onClick="calculos.tx2.value=Math.ceil(calculos.tx1.value)">
<TD>
<input type="button" name="bt4" value="O maior inteiro menor que o N" onClick="calculos.tx2.value=Math.floor(calculos.tx1.value)">
</TD></TR>
<TR>
<TD ALIGN="right">
<input type="button" name="bt5" value="Raiz Quadrada" onClick="calculos.tx2.value=Math.sqrt(calculos.tx1.value)">
<TD>
<input type="button" name="bt6" value="Logartmo Neperiano" onClick="calculos.tx2.value=Math.log(calculos.tx1.value)">
</TD></TR>
</TABLE>
</FORM>
</CENTER>
</BODY>
</HTML>
Pgina 19

<HTML>

<HEAD>
<TITLE>JS24 Alterando Campos</TITLE>
<!-function processa1()
{
d= eval(document.calculo.campo1.value) + eval(document.calculo.campo2.value) + eval(document.calculo.campo3.value)
document.calculo.campo4.value=d
}
function processa2()
{
d= eval(document.calculo.campo1.value) * eval(document.calculo.campo2.value) * eval(document.calculo.campo3.value)
document.calculo.campo4.value=d
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="darkred" TEXT="lightBLUE">
<CENTER>
<FONT FACE="ARIAL" SIZE="5"><B>Exerccio 24 - Alterando Campos</FONT><P>
<FONT FACE="ARIAL" SIZE="3" COLOR=white>Aluno01 Aluno02</FONT></B></P>
<FORM NAME="calculo">
Campo1....:<input type="text" name="campo1" value="" size=10 maxlength=10><br>
<HR>
<CENTER>
<input type="button" value="Soma" onClick="processa1()">
<input type="button" value="Multiplica" onClick="processa2()">
<HR>
Resultado....:<input type="text" name="campo4" value="" size=10 maxlength=10>
</CENTER>
</FORM>
</BODY>
</HTML>
Pgina 20

Resumo JS

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Resumo JS

Hochgeladen von

Copyright:

Verfügbare Formate

P R O G R A M A O

CADERNO DE EXERCCIOS DE JAVASCRIPT

Exerccio 01: Editar e salvar com o nome de JS01.htm:

Fora do Script, na rea de Cabealho:

Dentro do Script, na rea de Cabealho:

Dentro do Script, na rea do Corpo Principal:

Fora do Script, na rea do Corpo Principal:

Exerccio 02: Editar e salvar com o nome de JS02.htm:

Fora do Script, na rea de Cabealho:

Dentro do Script, na rea de Cabealho:

Exerccio 03: Digitar e salvar com o nome de JS03.htm:

Exerccio 04: Digitar e salvar com o nome de JS04.htm:

Exerccio 05: Digitar e salvar com o nome de JS05.htm:

Exerccio 06: Editar e salvar com o nome de JS06.htm:

Fora do Script, na rea de Cabealho:

Dentro do Script, na rea do Corpo Principal:

Exerccio 07: Editar e salvar com o nome de JS07.htm:

Fora do Script, na rea de Cabealho:

Dentro do Script, na rea do Corpo Principal:

Fora do Script, na rea do Corpo Principal:

Exerccio 07-V1: Editar e salvar com o nome de JS07V1.htm:

Exerccio 07-V2: Editar e salvar com o nome de JS07V2.htm:

Exerccio 08: Editar e salvar com o nome de JS08.htm:

Na rea de Cabealho, fora do Script:

Na rea do Corpo Principal, fora do Script:

Na rea do Corpo Principal, dentro do Script:

Exerccio 09: Editar e salvar com o nome de JS09.htm:

Na rea de Cabealho, fora do Script:

Na rea do Corpo Principal, fora do Script:

Na rea do Corpo Principal, dentro do Script:

Exerccio 10: Digitar e salvar com o nome de JS10.htm:

Exerccio 11: Editar e salvar com o nome de JS11.htm:

Na rea do Corpo Principal, fora do Script:

Na rea do Corpo Principal, dentro do Script:

Na rea do Corpo Principal, fora do Script:

Exerccio 12: Editar e salvar com o nome de JS12.htm:

Na rea de Cabealho, dentro do Script:

Na rea do Corpo Principal, fora do Script:

Exerccio 13: Editar e salvar com o nome de JS13.htm:

Exerccio 14: Editar e salvar com o nome de JS14.htm:

Na rea de Cabealho, fora do Script:

Na rea do Corpo Principal, fora do script:

Exerccio 14: Editar e salvar com o nome de JS14extra.js:

Exerccio 15: Editar e salvar com o nome de JS15.htm:

Exerccio 15 (Continuao): Editar e salvar com o nome de JS15_01.htm:

Exerccio 15 (Continuao): Editar e salvar com o nome de JS15_02.htm:

Exerccio 16: Editar e salvar com o nome de JS16a.htm:

FrameEsquerda, JS16c.htm, 300px

FrameDireita, JS16d.htm, com barra de rolagem, sem borda.

Exerccio 16 (Continuao): Editar e salvar com o nome de JS16b.htm:

Exerccio 16 (Continuao): Editar e salvar com o nome de JS16d.htm:

Exerccio 16 (Continuao): Editar e salvar com o nome de JS16c.htm:

Exerccio 17: Editar e salvar com o nome de JS17.htm:

Exerccio 17 (Continuao): Editar e salvar com o nome de JS17b.htm:

Exerccio 17 (Continuao): Editar e salvar com o nome de JS17c.htm:

Exerccio 17 (Continuao): Editar e salvar com o nome de JS17d.htm:

Exerccio 17 (Continuao): Editar e salvar com o nome de JS17e.htm:

Exerccio 18: Editar e salvar com o nome de JS18.htm:

Exerccio 19: Editar e salvar com o nome de JS19a.htm:

Exerccio 19 (Continuao): Editar e salvar com o nome de JS19b.htm:

document.write("* URL da prxima pgina: "+ history.next + "<p>")

Exerccio 19 (Continuao): Editar e salvar com o nome de JS19c.htm:

Exerccio 19 (Continuao): Editar e salvar com o nome de JS19d.htm:

Exerccio 20: Editar e salvar com o nome de JS20.htm: