Escolar Documentos
Profissional Documentos
Cultura Documentos
Programacao ApostilaJavaScript PDF
Programacao ApostilaJavaScript PDF
Apostila sobre
Java Script
2
<SCRIPT>
instrues ...
</SCRIPT>
"oficial" mas acho que ela torna mais compreensvel a diferena entre Java e
JavaScript.
Exemplo 1:
<html>
<body>
<form>
<input type="button" name="Button1" value="Aperte-me"
onClick="mensagem()">
</form>
</body>
</html>
<script language="JavaScript">
function mensagem() {
alert("Alo!");
}
</script>
Existe uma coisa nova no tag de <input>. L voc pode ver 'onclick'. Isto diz
ao browser que funo ele tem que chamar quando o boto pressionado (
claro que s quando o browser suporta JavaScript). A funo 'mensagem()'
declarada na pgina. Quando o boto pressionado a funo executada.
Tem uma coisa nova neste script - o mtodo 'alerta'. Este mtodo j
declarado no JavaScript - desse modo voc s tem que cham-lo. Existem
muitos mtodos diferentes que voc pode chamar.
Exemplo 2:
<html>
<head>
<script language="JavaScript">
<!-- hide script from old browsers
function getname(str) {
alert("Oi, "+ str+"!");
}
// end hiding contents -->
</script>
</head>
6
<body>
Coloque o seu nome, por favor:
<form>
<input type="text" name="name"
onBlur="getname(this.value)" value="">
</form>
</body>
</html>
Abra o arquivo Saudacao.html com o seu navegador, digite seu nome na caixa
de texto e clique na parte em branco da pgina, o resultado ser este:
Exemplo 3:
<html>
<body>
Esta uma pgina-HTML simples.
<br>
ltimas modificaes:
<script language="JavaScript">
<!-- hide script from old browsers
document.write(document.lastModified)
// end hiding contents -->
</script>
</body>
</html>
8
x += y o mesmo que x = x + y
X = X + 1 ou X = X - 1 respectivamente.
== Igual
!= Diferente
> Maior
>= Maior ou Igual
9
< Menor
<= Menor ou Igual
&& E
|| Ou
\b backspace
\f form feed
\n new line caracters
\r carriage return
\t tab characters
// Linha de comentrio
/*....*/ Delimitadores para inserir um texto com mais de uma linha como
comentrio
Os delimitadores naturais para uma string so " ou ' . Caso seja necessrio a
utilizao destes caracteres como parte da string, utilize \ precedendo " ou '.
3 Comandos Condicionais
So comandos que condicionam a execuo de uma certa tarefa veracidade ou
no de uma determinada condio, ou enquanto determinada condio for
verdadeira.
So eles:
Comando IF
if (condio) {
ao para condio satisfeita
}
[ else {
ao para condio no satisfeita } ]
Ex.:
if (Idade < 18) {
Categoria = "Menor"
} else {
Categoria = "Maior"
}
Comando FOR
Ex.:
for (x = 0 ; x == 10 ; x++) {
alert ("X igual a " + x)
}
Comando WHILE
while (condio)
{ ao }
11
Ex.:
var contador = 10
Move condicional
Ex.:
NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino")
OBS:
Nos comandos FOR e WHILE a diretiva "break" pode ser utilizada para
interromper a condio principal e sair do loop. Da mesma forma, a diretiva
"continue" interrompe uma ao (se determinada condio ocorrer), mas volta
para o loop.
Diretivas/condies entre [ ] significam que so opcionais.
12
4 Eventos
Exemplo:
Crie uma pgina com o nome Eventos.html e insira este cdigo nela:
13
<html>
<body>
<a href="ColegiadoOrgaoManutencao.html"
onMouseOver="window.status='Curso de Java Script'; return
true"> Cadastro do Conselho </a>
</body>
</html>
Abra esta pgina com o seu navegador e veja o resultado. Posicione o mouse sob
o link e olhe para a barra de status na parte de baixo do seu browser.
A nica coisa que voc tem que fazer acrescentar a propriedade onMouseOver
ao seu tag de link <a>. O 'window.status' lhe permitir escrever coisas na barra de
status do seu browser. Como se pode ver, voc tem que alterar as aspas. Voc
no vai poder usar " todo o tempo, porque se no o JavaScript no ser capaz de
identificar a seqncia que voc quer imprimir na barra de status. Depois da
seqncia voc tem que escrever ;return true.
14
5 Criando variveis
A varivel criada automaticamente, pela simples associao de valores a
mesma.
Exemplo:
novaVariavel = "Jose"
Foi criada a varivel de nome novaVariavel que, passou a conter a string Jose.
As variveis podem ser Locais ou Globais. As variveis que so criadas dentro
de uma funo so Locais e referenciveis apenas dentro da funo. As variveis
criadas fora de funes so Globais, podendo ser referenciadas em qualquer parte
do documento.
Desta forma, variveis que precisam ser referenciadas por vrias funes ou em
outra parte do documento, precisam ser definidas como globais.
Embora no seja recomendvel, em uma funo, pode ser definida uma varivel
local com o mesmo nome de uma varivel global. Para isso utiliza-se o mtodo de
definio var.
Exemplo:
6 Escrevendo no documento
O JavaScript permite que o programador escreva linhas dentro de uma pgina
(documento), atravs do mtodo write. As linhas escritas desta forma, podem
conter textos, expresses JavaScript e comandos Html. As linhas escritas atravs
deste mtodo aparecero no ponto da tela onde o comando for inserido.
O objeto
nome_do_objeto.nome_do_mtodo
document.write();
Mtodo write()
A sintaxe bastante simples
write("seu texto");
Exemplos:
<script>
valor = 30
document.write ("Minha primeira linha")
document.write ("Nesta linha aparecer o resultado de : "
+ (10 * 10 + valor))
</script>
<script>
valor = 30
document.write ("<p>Minha primeira linha</p>")
document.write ("<p>Nesta linha aparecer o resultado de
: " + (10 * 10 + valor) + "</p>")
</script>
Isto resolve a questo da mudana de linha, porm, vai gerar uma linha em
branco, entre cada linha, por se tratar de mudana de pargrafo. Caso no seja
desejada a existncia da linha em branco, a alternativa utilizar o comando Html
<br> que apenas muda de linha.
<script>
valor = 30
document.write ("<br>Minha primeira linha")
document.write ("<br>Nesta linha aparecer o resultado
de : " + (10 * 10 + valor) )
</script>
17
O problema
Exemplo:
<html>
<head>
</head>
<body>
o documento...
</body>
</html>
18
7 Mensagens
Existem trs formas de comunicao com o usurio atravs de mensagens.
Apenas Observao.
alert ( mensagem )
Exemplo:
confirm (mensagem)
Exemplo:
Onde:
Ex.
8 Funes
Uma funo um set de instrues, que s devem ser executadas quando a
funo for acionada.
Suponha uma funo que tenha como objetivo informar se uma pessoa maior ou
menor de idade, recebendo como parmetro a sua idade.
Para acionar esta funo, suponha uma caixa de texto, em um formulrio, na qual
seja informada a idade e, a cada informao, a funo seja acionada.
<form>
<input type=text size=2 maxlength=2 name="Tempo"
onchange="Idade(Tempo.value)">
</form>
Exemplo:
Todo = "Elogica"
Parte = Todo.substring(1, 4)
Datas
Existe apenas uma funo para que se possa obter a data e a hora. a funo
Date (). Esta funo devolve data e hora no formato: Dia da semana, Nome do
ms, Dia do ms, Hora: Minuto: Segundo e Ano.
Exemplo:
22
Exemplo:
10 Manipulando Arrays
Para trabalhar com arrays necessria a criao de um objeto com a propriedade
de criao de um array.
No exemplo abaixo, criaremos um objeto tipo array de tamanho varivel e com a
funo de "limpar" o contedo das variveis cada vez que uma nova instncia seja
criada a partir dele.
DiaSemana = NomeDia[4]
Ocupao = Atividade[1]
Atividade = TabEmp[3].Prod
Obs:
document.forms[0]
document.nomeFormulario
a) Propriedade value
Sintaxe:
var texto;
texto = document.nomeFormulario.nomeCampoTexto.value;
<script language=JavaScript>
function upperMe(){
var campo = document.form_org.nomeAluno;
var valorUpper = campo.value.toUpperCase();
campo.value = valorUpper;
}
</script>
<FORM >
<input type=text name=nomeAluno value=exemplo
onChange = upperMe()>
</FORM>
Sintaxe:
document.nomeFormulario.nomeCampoTexto.blur();
Sintaxe:
document.nomeFormulario.nomeCampoTexto.focus();
a) Propriedade checked
Exemplo:
function verificaBox(){
if (document.form_org.campoChecagem.checked){
alert(Esta caixa de seleo est checada.);
}else{
alert(Esta caixa de seleo no est
checada);
}
}
Sintaxe:
document.nomeFormulario.campoCheckbox.blur();
Sintaxe:
document.nomeFormulario.campoCheckbox.focus();
Sintaxe:
document.nomeFormulario.campoCheckbox.click();
a) Propriedade length
Sintaxe:
document.form_org.nomeGrupo.length;
29
b) Propriedade checked
Sintaxe:
document.form_org.nomeGrupo[0].checked;
Sintaxe:
document.nomeFormulario.campoOption[indice].blur();
Sintaxe:
document.nomeFormulario.campoOption[indice].focus();
a) Propriedade selectedIndex
Sintaxe:
document.form_org.nomeSelecao.selectedIndex;
30
b) Propriedade text
Sintaxe:
document.form_org.nomeSelecao.options[n].text;
c) Propriedade value
Sintaxe:
document.form_org.nomeSelecao.options[n].value;
Onde:
n = ndice da lista;
31
function upperMe(campo){
instrues
}
32
Sintaxe:
window.nomePropriedade;
window.nomeMtodo([parmetros])
Sintaxe:
self.nomePropriedade;
self.nomeMtodo([parmetros])
a) Mtodo back
Sintaxe:
window.back();
b) Mtodo close()
Sintaxe:
window.close();
33
c) Mtodo open()
Sintaxe:
Exemplo:
d) Mtodo print()
Sintaxe:
window.print();
34
14 Exerccios
1) Criar uma nova pgina chamada script1.html que realize as seguintes
tarefas:
b) Crie uma funo que leia o valor da TEXT. Esta funo ser
chamada pelo evento onClick do boto que dever imprimir na tela
os seguintes valores a respeito da String que foi digitada no campo
TEXT:
- Tamanho da String;
- String em maisculo;
- String em minsculo;
c) Esta funo dever ser chamada pelo boto Salvar da tela no evento
onSubmit() do formulrio.
36