Embed Size (px)
Citation preview
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 originalwww.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’
objectoObjecto.propriedade=‘4’
Objecto.função()
Elementos de formulários
• Form xptoxpto.length - nº de componentes do formulárioxpto.elements - tabela de componentes do formulário (índice de 0 a xpto.length-1)
• Text textotexto.value - texto digitado na caixa
• Checkbox caixacaixa.checked - valor boleano (V/F)caixa.value - valor associado à caixa
OQEUF ?
Elementos de formulários
• Radio xpto com n posiçõesxpto[i].value - valor do botão ixpto[i].checked - valor boleano (V/F)
• Lista listalista.selectedIndex - índice da opção escolhidalista.options - Tabela de opçõeslista.options[i].value - valor da opção Ilista.options[lista.selectedIndex].value - valor da opção escolhida
OQEUF ?
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 htmlnome - Nome (title) da janelawidth, height - dimensão da janela em pixels… outras opções:
menubar = falsetop = … - posição da janela a partir do topo do ecranleft = … - posição da janela a partir do lado esquerdo
Navegação - criação de uma página
Sintaxe
• // comentário até ao fim da linha• /* bloco de comentário */• declaração de variável: var X = expressão;
• o terminador de instruções é ;• Blocos de instruções definidos por {} • Atribuição X = expressão;
• Case sensitive (X e x são variáveis diferentes)• O tipo de X pode variar ao longo da execução do programa
Tipos-base1) das variáveis
• Lógicos (Boolean)true ou false
• Números (Number)
• String
1) ou tipos primitivos
Tipos-derivados das variáveis
• Arraysvar 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)
CheckboxRadioResetGo !
