JAVA SCRIPT - GEOCITIES.ws
Propaganda
Aula 2
JAVA SCRIPT
Introdução
Cores – Java Script
Este exercício trabalha com esquemas de cores. Inicialmente ele solicita que você informe seu
nome e sexo para poder fazer algumas consistências internas; depois de ter feito estas
consistências, a rotina em JavaScript lhe dá a oportunidade de passar para outros arquivos de
exercícios por meio de botões. Estes novos arquivos também possuem rotinas em JavaScript e
trabalham com opções de mudanças de cores nas páginas HTML.
O Exercício trabalha com mais dois arquivos HTML, são eles: Aula111.html e
Aula112.html. Vamos ver agora as listagens do código-fonte destes 3 arquivos e depois
discutiremos algumas linhas das rotinas em JavaScript de cada um deles. Ao final, você verá uma
seqüência de telas que mostram o funcionamento deste exercício completo.
Aula11.html
<html><title>Aula11 - JavaScript</title><head>
<script>
function MudaCor(Cor)
{
document.bgColor=Cor;
}
SeuNome=window.prompt("Digite seu nome:",'');
SeuSexo=window.prompt("Qual o seu sexo (F ou M):",'');
SeuSexo=SeuSexo.toUpperCase();
if (SeuSexo == "F")
{
MudaCor('pink');
alert("Ahhhhhhh... "+SeuNome+", você é uma garota!!! Dê um clique no
botão OK e observe a cor de fundo que escolhemos para você.");
document.write("Olá "+SeuNome+"<br>Esta foi a cor que escolhemos pra
você.");
}
else
if (SeuSexo == "M")
{
MudaCor('blue');
alert("Uuuuuuuhhhhh... "+SeuNome+", você é um rapaz!!! Dê um
clique no botão OK e observe a cor de fundo que escolhemos para você.");
document.write("Olá "+SeuNome+"<br>Esta foi a cor que
escolhemos pra você.");
}
else
{
MudaCor('yellow');
alert("Bemmmm... "+SeuNome+", você não informou nem F ou M.
Devido este 'impasse' escolhemos a cor amarela para você. Dê um clique no botão OK e
observe o resultado.");
document.write("Olá "+SeuNome+"<br>Esta foi a cor que
Professora Luciana Bührer
Página 1 de 6
Aula 2
JAVA SCRIPT
Introdução
escolhemos pra você.");
}
</script>
</HEAD>
<BODY>
<form name="Exemplo2">
<input type="button" value="Outro exemplo"
onClick="window.location='Aula111.html'";>
</form>
</BODY>
</HTML>
Onde:
function MudaCor(Cor)
a função MudaCor recebe um parâmetro para poder
trabalhar. Este parâmetro deve ser uma cor (em inglês)
predefinida.
document. bgColor=Cor;
após receber o parâmetro com o nome da cor, a
propriedade bgColor do objeto document é alterada para
esta nova cor.
SeuNome=window.prompt ("Digite pede ao usuário que digite seu nome e armazena esta
seu nome:",´´ );
informação na variável SeuNome.
SeuSexo=window.prompt("Qual o pede ao usuário que digite seu sexo e armazena esta
seu sexo (F ou M):",");
informação na variável SeuSexo.
SeuSexo=SeuSexo.toUpperCase(); transforma o valor da variável SeuSexo em maiúsculo.
if (SeuSexo == "F")
se o valor da variável SeuSexo for igual a F
MudaCor(' pink ' );
a função MudaCor é acionada com o valor pink e uma
caixa de mensagem de aviso é exibida.
if (SeuSexo == "M")
se o valor da variável SeuSexo for igual a M.
MudaCor (´blue´ );
a função MudaCor é acionada com o valor blue e uma
caixa de mensagem de aviso é exibida.
Professora Luciana Bührer
Página 2 de 6
Aula 2
JAVA SCRIPT
Introdução
Aula111.html
<html><title>Aula111.html - JavaScript</title><head>
<script>
function MudaCor(Cor)
{
document.bgColor=Cor;
}
Cor=window.prompt("Escreva (em inglês) a cor de fundo de sua preferência:",'');
MudaCor(Cor);
</script>
</HEAD>
<BODY>
Professora Luciana Bührer
Página 3 de 6
Aula 2
JAVA SCRIPT
Introdução
<center><b>Apenas as cores predefinidas são válidas.<br>Quer ver outro exemplo? Então dê um
clique no botão abaixo.</b></center>
<form name="Exemplo2">
<input type="button" value="Outro exemplo"
onClick="window.location='Aula112.html'";>
</form>
</BODY>
</HTML>
Onde,
Cor=window.prompt("Escreva (em inglês) a
cor de fundo de sua preferência:",’ ');
MudaCor(Cor);
Professora Luciana Bührer
solicita ao usuário que ele digite uma cor
predefinida e, em seguida, a armazena na
variável Cor.
aciona a função MudaCor com o parâmetro Cor
anteriormente definido.
Página 4 de 6
Aula 2
JAVA SCRIPT
Introdução
Aula112.html
<html><title>Aula112.html - JavaScript</title><head>
<script>
function MudaCor(Cor)
{
document.bgColor=Cor;
if (Cor == 'Black')
{
alert('Ops!!! Alguma coisa está estranha você não acha? Dê um
clique no botão OK e escolha outra cor.');
}
}
</script>
</HEAD>
<BODY>
<b>Na relação de cores a seguir, escolha uma cor de sua preferência:</b><p>
<input type="radio" Name="Cor1" value="Vermelho" onClick="MudaCor('Red');">Vermelho<br>
<input type="radio" Name="Cor1" value="Azul" onClick="MudaCor('Blue');">Azul<br>
<input type="radio" Name="Cor1" value="Amarelo" onClick="MudaCor('Yellow');">Amarelo<br>
<input type="radio" Name="Cor1" value="Preto" onClick="MudaCor('Black');">Preto<br>
<p>
<b>Você também pode escolher por aqui, dando um clique nos botões a seguir:</b><p>
<form name="CorDeFundo">
<input type="button" value="Vermelho" onClick="MudaCor('Red');">
<input type="button" value="Azul" onClick="MudaCor('Blue');">
<input type="button" value="Amarelo" onClick="MudaCor('Yellow');">
<input type="button" value="Preto" onClick="MudaCor('Black');">
</form>
<p>
<b>Ou por aqui, dando um clique na respectiva cor:</b><p>
<FONT STYLE="TEXT-DECORATION:NONE">
<img src="tabcor.gif" usemap="#tabcor" border="0" alt="Tabela de cores">
<map name="tabcor">
<area shape="rectangle" coords="0,0,65,40" onClick="MudaCor('Red');">
<area shape="rectangle" coords="0,41,65,80" onClick="MudaCor('Blue');">
<area shape="rectangle" coords="0,81,65,120" onClick="MudaCor('Yellow');">
<area shape="rectangle" coords="0,121,65,160" onClick="MudaCor('Black');">
<area shape="default" nohref>
</map>
</BODY>
</HTML>
Onde,
Professora Luciana Bührer
Página 5 de 6
Aula 2
if (Cor ==´ BLACK ')
Professora Luciana Bührer
JAVA SCRIPT
Introdução
se o valor cor definido for igual a Black então
exibirá uma caixa de mensagem de aviso para
o usuário.
Página 6 de 6
