JScript
• Perspectiva histórica
• Conceitos básicos
- exemplos de utilização
- comparação crítica
• Webliografia
http://javascript.internet.com/
http://www.jsworld.com/
http://www.w3.org/
Perspectiva histórica
•
•
•
•
História da Internet
Aparecimento de ‘browser’ (1990)
Páginas HTML, estáticas
Necessidade de ‘interacção’
Conceitos básicos (parte I)...
www.google.com indica como URL original
www.maths.tcd.ie/pub/ guide/guide.10.html
Páginas estáticas vs. interactivas
Código embebido em HTML
‘Aonde’ na página html ?
• No cabeçalho (tipicamente)
<head>
<script language=javascript>
function nome()
{
...
}
</script>
</head>
• A ‘meio’ do código html
<script language=javascript>
document.write((new Date()).toLocaleString());
</script>
‘Aonde’ na página html ?
• Num ficheiro à parte
<script src=‘ficheiro.js’language=‘javascript’>
</script>
1. Os ficheiros (.htm e .js) são ‘copiados’1);
2. Interpretados e executados pelo browser
1)
Do ‘servidor’ para o ‘cliente’
Object-oriented
• Uma ‘nova’ forma de organizar a
programação (década de 1980)
• Relação mais estreita entre as ‘variáveis’ e
as ‘funções’ que as manipulam
• ‘Objectos’ caracterizados por ‘valores’ e
dispondo de ‘procedimentos’
objecto
Objecto.propriedade=‘4’
Objecto.função()
Elementos de formulários
OQEUF ?
• Form xpto
xpto.length - nº de componentes do formulário
xpto.elements - tabela de componentes do
formulário (índice de 0 a xpto.length-1)
• Text texto
texto.value - texto digitado na caixa
• Checkbox caixa
caixa.checked - valor boleano (V/F)
caixa.value - valor associado à caixa
Elementos de formulários
OQEUF ?
• Radio xpto com n posições
xpto[i].value - valor do botão i
xpto[i].checked - valor boleano (V/F)
• Lista lista
lista.selectedIndex - índice da opção escolhida
lista.options - Tabela de opções
lista.options[i].value - valor da opção I
lista.options[lista.selectedIndex].value - valor da
opção escolhida
Navegação - chamada de uma página
• Chamada de uma página
window.open(‘p.htm’, ‘nome’, width=200, height=400)
p.htm - nome do ficheiro html
nome - Nome (title) da janela
width, height - dimensão da janela em pixels
… outras opções:
menubar = false
top = … - posição da janela a partir do topo do ecran
left = … - posição da janela a partir do lado esquerdo
Navegação - criação de uma página
Sintaxe
• Case sensitive (X e x são
• // comentário até ao fim da linha
variáveis diferentes)
• /* bloco de comentário */ • O tipo de X pode variar ao
longo da execução do
• declaração de variável:
programa
var X = expressão;
• o terminador de instruções é ;
• Blocos de instruções definidos por {}
• Atribuição X = expressão;
1)
Tipos-base
• Lógicos (Boolean)
true ou false
• Números (Number)
• String
1)
ou tipos primitivos
das variáveis
Tipos-derivados das variáveis
• Arrays
var A = new Array(10);
var cor = new Array(“Azul”,
“Preto”, “Branco”);
• … para invocar:
cor[1] = ?
cor[1].length = ?
cor[1].charAt(2) = ?
Operadores
• Aritméticos
-, +, *, /, %, ++, --
• comparação
==, <, >, !=, <=, >=
• Lógicos
&&, ||, !
operação válida para
números e strings
Declaração de uma função
function nome(parâmetros)
{ // corpo da função
return resultado; //opcional
}
a lista de parâmetros pode ser
()
ou
(p1, p2, p3) , etc...
Estruturas de controlo
if (condição)
{ instruções...
}
ou
if (condição)
{ caso 1
}
else
{ caso 2
}
switch(expressão)
{ case c1:
...
break;
case c2:
...
break;
default:
...
}
Estruturas de controlo
for(i=1; i<10; i++)
{
...
}
while(condição)
{
}
ou
do
{
}
while(condição);
(alguns) Exemplos
•
•
•
•
•
•
•
•
•
•
•
umform - Exemplo de um formulário
posis - Exemplo de diferentes formas de invocação
soma2n - Exemplo da soma de 2 números
triang1 - Classificação de um triângulo
triang2 - Classificação de um triângulo - Vs. 2
totobo1 - Chave aleatória ade totobola
totobo2 - Chave aleatória de totobola - Vs. 2
fact1 - Cálculo do factorial de um número
fibo1 - Fibonacci
fibo2 - Outra versão do exemplo anterior
ordena - exemplo da ordenação de um vector
Bom trabalho !
Texto (curto)
password
DropDown
Texto (longo)
Checkbox
Radio
Reset
Go !
Download
