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

Apresentação em tema: "JScript Perspectiva histórica Conceitos básicos - exemplos de utilização - comparação crítica Webliografia"— Transcrição da apresentação:

1 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/

2 Perspectiva histórica História da Internet Aparecimento de ‘browser’ (1990) Páginas HTML, estáticas Necessidade de ‘interacção’

3 Conceitos básicos (parte I)... www.google.com indica como URL original www.maths.tcd.ie/pub/ guide/guide.10.html

4 Páginas estáticas vs. interactivas

5 Código embebido em HTML

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

7 ‘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’

8 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()

9 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 ?

10 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 ?

11 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

12 Navegação - criação de uma página

13 Modificação de uma página

14 Passagem de parâmetros

15 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

16 Tipos-base 1) das variáveis Lógicos (Boolean) true ou false Números (Number) String 1) ou tipos primitivos

17 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) = ?

18 Operadores Aritméticos -, +, *, /, %, ++, -- comparação ==,, !=, = Lógicos &&, ||, ! operação válida para números e strings

19 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...

20 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:... }

21 Estruturas de controlo for(i=1; i<10; i++) {... } while(condição) { } ou do { } while(condição);

22 (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

23 Bom trabalho !

24 Texto (curto) password DropDown Texto (longo) Checkbox Radio Reset Go !