Você está na página 1de 15

JavaScript – Introdução;

Comandos entrada e saída de dados e informações;


Eventos;
Objetos de formulário;
 Todas as linguagens de script são linguagens
interpretadas.

 Os programas escritos em linguagens de script são,


normalmente, referidos como scripts.

 São linguagens de programação executadas do


interior de programas e/ou de outras linguagens de
programação, não se restringindo a esses ambientes.

 As linguagens de script servem para estender a


funcionalidade de um programa e/ou controlá-lo.
 Permite tornar as páginas mais activas,
possibilitando:
▪ A entrada de dados pelo utilizador, através de
formulários;
▪ A realização de cálculos em tempo real;
▪ O controlo de janelas e botões;
▪ Alguma interacção com o utilizador, permitindo
alterar comportamentos presentes nas páginas;
▪ A integração com outros scripts.
Objecto Atributo Função
Carro Motor Acelerar
Comprimento Travar
Peso Curvar

Classes e Eventos
Classes - famílias de objectos, determinando as variáveis
(atributos ou propriedades) e os métodos (funções) comuns a
todos eles.
Eventos - Sempre que algo acontece numa página Web, ocorre
um evento – um botão recebe um clique, o rato é arrastado,
uma página é carregada, um formulário é enviado...
Criar uma página de com a tag script
Exercício 1 (comandos: document.write e window.prompt)
<html> <html>
<head> <head>
<script language="javascript"> <script language="javascript">
var nome <!--
nome = window.prompt("Digita o teu var nome
nome:"); nome = window.prompt("Digita o teu
document.write("Bom dia, " + nome + nome:");
"!<BR>"); document.write("Bom dia, " + nome +
</script> "!<BR>");
</head> //-->
<body> </script>
</body> </head>
</html> <body>
</body>
</html>
Exercício 2
Criar uma página usando o comando alert para
desejar um Bom Dia.
<html>
<head><title>exercício nº 2 </title></head>
<script language="Javascript">
alert("Bom dia? Tudo Bem?");
</script>
<body> Segundo exercício em JAVA SCRIPT
</body>
</html>
 Exercício 3:
 Criar uma página usando o comando window.prompt e alert
com variável - para permitir a entrada de um nome numa
variável e depois exibi-lo numa caixa de diálogo
<html>
<head><title>exercício com uso de
variável</title></head>
<script language="Javascript">
var nome=window.prompt("Digita o teu
nome.","Nome");
alert("Olá "+nome+" Seja Bem Vindo !!!");
document.write("Olá "+nome+" Seja Bem Vindo !!!");
</script>
<body> Terceiro exercício em JAVA SCRIPT </body>
</html>
 Eventos do Rato: São aqueles que accionam acções mediante o uso do
rato.
 Ex:
onClick : Ocorre quando o botão do rato for clicado
onDblclick: Ocorre quando o botão do rato sofrer um clique duplo
onmouseMove: Ocorre quando o ponteiro do rato passar sobre o objecto
onmouseOver: Ocorre quando o ponteiro do rato ficar acima do objecto
onmouseOut: Ocorre quando você retirar o ponteiro do rato do objecto
onSubmit: Ocorre quando o internauta clica no botão enviar em formulários
onFocus: Ocorre quando um objecto ganhar o foco com o click do rato ou o
uso da tecla TAB
onChange : Ocorre quando o conteúdo de uma caixa de texto for alterado
 Os objectos de formulário permitem a
construção de páginas com botões de
comando, botões de rádio, caixa de texto,
caixa de selecção, para construção de
formulários de envio de dados a um
destinatário.
 Para construir um formulário todas as tags
deverão ser escritas entre as
<form> ....... </form>.
<html>
<head><title>botão</title></head>
<form>
<input type="button" name="bt1" value="clica
no botão"
onclick="alert(‘que belo clique')">
</form>
</html>
<html>
<head><title>botão de rádio</title></head>
<form>
<input type="radio" name="opt1"
onclick="alert('Você clicou no botão')">Clique
na opção
</form>
<html>
<head><title>caixa verificação</title></head>
<form>
<input type="checkbox" name="chk1"
onclick="alert('Você clicou no botão')">Clique
na opção
</form>
<html>
<head><title>Caixa texto</title></head>
<form>
<input type="text" name="texto1" size="35"
maxlength="35" value="Curso de Javascript"
onChange="alert('Você alterou o conteúdo')">
</form>
</html>
Cria um script que permita ao escolher,
através de um clique num botão, uma cor
de fundo para sua página.

Cria 4 botões para 4 diferentes cores.

No início da página, antes dos botões, deve


aparecer o texto (centrado):
“Clica num botão para mudar a cor do fundo
da página”
<html>
<head><title>botão</title></head>
<form>
<body>
<align="center"><br><h3> Clique num dos botões para alterar a cor da tua página</h3>
<input type="button" name="btazul" value="Azul" onclick="document.bgColor=('blue')">
<input type="button" name="btvermelho" value="vermelho"
onclick="document.bgColor=('red')">
<input type="button" name="btverde" value="verde"
onclick="document.bgColor=('green')">
<input type="button" name="btamarelo" value="amarelo"
onclick="document.bgColor=('yellow')">
<input type="button" name="btazulclaro" value="Azul claro"
onclick="document.bgColor=('cyan')">
</form>
</script>
</body>
</html>

Você também pode gostar