JScript Perspectiva histórica Conceitos básicos - exemplos de utilização - comparação crítica Webliografia

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)... indica como URL original guide/guide.10.html

Páginas estáticas vs. interactivas

Código embebido em HTML

‘Aonde’ na página html ? No cabeçalho (tipicamente) function nome() {... } A ‘meio’ do código html document.write((new Date()).toLocaleString());

‘Aonde’ na página html ? Num ficheiro à parte 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 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 OQEUF ?

Elementos de formulários 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 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 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

Modificação de uma página

Passagem de parâmetros

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-base 1) das variáveis Lógicos (Boolean) true ou false Números (Number) String 1) ou tipos primitivos

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 !