Tecnologia para Web
JavaScript
Enrique Pimentel Leite de Oliveira
[email protected]
O que é JavaScript
JavaScript é uma linguagem que permite
escrever scripts, ou pequenos programas nãocompilados, que são executados por um
navegador Web
As linguagens de script são linguagens de
programação, portanto podem fazer cálculos,
manipular objetos e responder a uma ampla
variedade de eventos de usuário
Por que usar JavaScript?
A linguagem JavaScript possibilita manipular
páginas Web sem enviar uma requisição ao
servidor
Algumas das vantagens:
Facilidade de utilização
Aumento da eficiência do servidor
Integração com o Navegador (nativo)
Características do JavaScript
Os scripts são inseridos em documentos HTML usando
um dos três métodos:
Incluir scripts nas tags em resposta a eventos
Inserir scripts na seção head ou body do documento
Criar links com arquivos de script externos
Toda expressão ou comando termina com ponto-evírgula (;)
As expressões podem ser agrupadas em blocos entre
chaves { } (Funções)
Comentários são criados utilizando // ou /* */
A tag <script>
Ao colocar uma tag <script> em um documento, diz-se
ao navegador Web para tratar todas as linhas de texto
que estão após a tag como script, e não como conteúdo
da página Web
Quando escrevemos script em JavaScript, devemos usar
o atributo language=“JavaScript”
Podemos usar o atributo src para incluir um script
armazenado em um arquivo separado como parte da
página Web
<script language=“JavaScript” src=“script.js”> //código </script>
Variáveis em JavaScript
Uma variável é um container que pode armazenar um
número, texto ou um objeto
Sintaxes para declaração de variáveis:
nome_variavel = valor;
var nome_variavel = valor;
Os nomes de variáveis seguem as seguintes regras:
Devem ser únicos
Aceitam somente letras, números e caractere sublinhado
Não podem começar com um número
Abrangência de variáveis (Local e Global)
Palavra-chave this
Utilizamos this para referir-se ao objeto atual. Em geral
refere-se ao objeto chamado no método
Sintaxe:
this[.propertyName]
Exemplo:
function validate(obj, lowval, hival) {
if ((obj.value < lowval) || (obj.value > hival))
alert("Invalid Value!")
}
HTML:
<B>Enter a number between 18 and 99:</B>
<INPUT TYPE = "text" NAME = "age" SIZE = 3
onChange="validate(this, 18, 99)">
Estrutura de decisão If...else
Sintaxe:
if (condiçaõ) {
//comandos1
}
[else {
comandos2
} ]
Laços for e while
Sintaxe for( )
for(var i=1; i<=10; i++)
{
<comando 1>;
<comando 2>;
}
Sintaxe while( )
while(condição)
{
<comando 1>;
<comando 2>;
}
Funções
Sintaxe para criação de funções
function nomeFunção(argumentos)
{
<comando 1>;
<comando 2>;
}
Funções
function fatorial(n) {
if ((n == 0) || (n == 1))
return 1;
else {
result = (n * fatorial(n-1) )
return result;
}
}
HTML
a=fatorial(1)
b=fatorial(2)
c=fatorial(3)
d=fatorial(4)
//
//
//
//
retorna
retorna
retorna
retorna
1
2
6
24
Array de Argumentos
Exemplo: considere uma função que concatena
diversas strings. O único argumento definido é a
string que recebe o caractere de separação dos
itens concatenados:
function myConcat(separator) {
result=""; // initialize list
// iterate through arguments
for (var i=1; i<arguments.length; i++) {
result += arguments[i] +
separator;
}
return result;
}
Array de Argumentos
Continuação:
// returns "red, orange, blue, "
myConcat(", ","red","orange","blue")
// returns "elephant; giraffe; lion; cheetah;"
myConcat("; ","elephant","giraffe","lion", "cheetah")
// returns "sage. basil. oregano. pepper. parsley. "
myConcat(". ","sage","basil","oregano", "pepper",
"parsley")
Objeto Date
Possibilita trabalhar com data e hora
Construtores:
new Date()
new Date(milliseconds)
new Date(dateString)
new Date(yr_num, mo_num, day_num [, hr_num,
min_num, sec_num, ms_num])
Ver página 72 do arquivo clientreferenceJS13.pdf
Objeto Date
Exemplo:
<h4>Hoje é:<script type="text/javascript">
<!-var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
document.write(day + "/" + month + "/" +
year);
//-->
</script>
</h4>
Eventos
“Eventos ocorrem como resultado de uma ação
do usuário no sistema”
Ver capítulo 10 do arquivo ClientGuideJS13.pdf
Alguns dos principais eventos:
Evento
Quando é chamado
onBlur
Sempre que o visitante deixar um campo de formulário
onChange
Sempre que o visitante mudar o conteúdo de um campo
onClick
Sempre que o visitante clicar em um botão
onFocus
Sempre que o visitante digitar algo em um campo
onLoad
Sempre que uma página Web é carregada ou recarregada
onMouseOver
Sempre que o visitante colocar o mouse sobre um objeto
onSelect
Sempre que o visitante selecionar o conteúdo de um campo
onSubmit
Sempre que o visitante submeter um formulário
onUnload
Sempre que a página Web atual for trocada
Validação de Formulário
A validação de formulários via scripts é uma das
mais importante formas de utilização de
JavaScript
Reduz o processamento de informações
inconsistentes no servidor
Reduz o tempo de espera do usuário para receber
uma mensagem de erro
Normalmente a validação é realizada de duas
formas:
Enquanto o usuário digita uma informação (evento
Onchange)
Quando o usuário envia o formulário (evento
OnSubmit)
Validação de Formulário
Exemplo HTML:
<form method="post"
action="http://teste.aspx"
onSubmit="return checkform(this)">
<input type=“text” name=“theName” />
</form>
Função JavaScript:
function checkform(thisform){
if (thisform.theName.value == null ||
thisform.theName.value == ""){
alert ("Por favor, entre seu nome");
thisform.theName.focus();
thisform.theName.select();
return false;
}
}
Exercícios
1. Criar uma função em javascript para validar um
email;
2. Criar uma função em javascript que concatene
o conteúdo dos itens selecionados de uma
listbox exiba-os em um textArea separados por
ponto e vírgula;
Bibliografia
www.javascriptmall.com
www.mozilla.org/js/language
www.javascript.com
www.javascriptkit.com/javatutors
www.mozilla.org/js/language/
www.jsexamples.com/page/core_manual__contents.ht
ml