módulo 5 – desenvolvimento de páginas web dinâmicas: javascript

19
Agrupamento de Escolas da Batalha Miguela Fernandes Janeiro 2011

Upload: miguela-fernandes

Post on 05-Jul-2015

1.590 views

Category:

Documents


0 download

DESCRIPTION

Curso Técnico de Gestão e Programação de Sistema Informáticos, ano lectivo 2010/2011.

TRANSCRIPT

Page 1: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Agrupamento de Escolas da Batalha

Miguela Fernandes

Janeiro 2011

Page 2: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Sumário

Iremos abordar:

Variáveis

Constantes

Janelas de mensagens

Operadores

Caracteres especiais

Funções

Exemplo prático

MF. 2

Page 3: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Variáveis (1)

o As variáveis são usadas para guardar valores. No Javascript não há necessidade de definir um tipo.

o As variáveis podem conter qualquer valor, taiscomo: números, strings, valores booleanos ouobjectos. Exemplos:

Idade=15;

Nome=“MF”;

Adivinha=“124”;

MF. 3

Page 4: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Variáveis (2)

o As variáveis podem ser Locais ou Globais:

– Locais: são criadas dentro de uma função e existem apenas dentro da função.

– Globais: são criadas fora das funções e existem em qualquer parte do código.

var x=2;

var y=“2”;

MF. 4

Page 5: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Constantes

o São variáveis que assumem um valor fixo. Usa-se habitualmente maiúscula, tal como no C. Exemplo:

const ERR_INVALID_USERID;

const ERR_INVALID_USERID = 300;

ERR_INVALID_USERID = 300;

MF. 5

Page 6: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Arrays

o var ar = new Array(20); //declara um array

o var nomes=[“joão”, “joana”, “marco”]

o ar[0]=10;

o ar[1]=“ok”;

MF. 6

Page 7: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Arrays : exemplo

var ar = new Array(10);

//declara um array

for (var i=0; i <= ar.length; i++){

document.writeln(“ar["+i+"]= " +

ar[i])

}

MF. 7

Page 8: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Janelas de mensagens (1)

o O JavaScript permite utilizar 3 tipos de janelasde mensagens nas páginas web:

– Mensagem de alerta

– Mensagem de confirmação

– Mensagem de input

MF. 8

Page 9: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Janelas de mensagens: alerta

o As janelas de mensegem são definidas com funções. Exemplo:

alert(„Olá aqui estamos nós com o

javascript‟);

MF. 9

Page 10: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Janelas de mensagens: confirmação

o Janela de mensagem que retorna confirmação de OK ou CANCELAR

o A variável resultado vai conter um resultadoverdadeiro de clicar no OK e falso caso seja no cancelar.

resultado= confirm („Estás a gostar do

Javascript‟);

MF. 10

Page 11: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Janelas de mensagens: input

o Esta janela recebe uma mensagem através da caixa de texto Input.

o A variável resultado vai conter um resultadodo tipo string.

resultado= prompt ("Qual o teu

nome?","Escreve a tua mensagem");

MF. 11

Page 12: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Operadores (1)

MF. 12

Page 13: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Operadores (2)

MF. 13

o Logicos

||, &&, !, >, <, !=, ==, ?:, >=, <=

o Computacionais

+,-,*,/, ++, --, %

o Bitwise

~, >>, <<, &, ^, |

o Atribuicao

=, +=, -=, /=, *=, etc.

Page 14: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Funções (1)

MF. 14

o Uma função tem um conjunto de instruções, que só devem ser executadas quando a função for chamada. Deverão ser definidas no cabeçalho, preferencialmente. A sintaxe é:

function NomeFunção (Parâmetros)

{ instruções;

}

Page 15: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Caracteres especiais

o \b - backspaceo \n - new line caracterso \r - carriage returno \t - tab caracterso // - Linha de comentárioo /*....*/ - Comentário com mais do que uma

linha. o “ ou ‘ – delimitadores para uma string. Caso seja

necessário a sua utilização como parte da string, utiliza \ antes do " ou ‘. Exemplo:alert (“Vou usar as\" e a \‟");

MF. 15

Page 16: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Funções (2)

MF. 16

o <html><head><script type="text/javascript">function mensagem(){

alert(“A minha primeira função ;-)!");}</script></head>

<body><form>

<input type="button" value=“Clica aqui!" onclick=“mensagem()" />

</form></body></html>

Page 17: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Exercício prático

o Escreve uma função que calcule a soma de 2 números digitados pelo utilizador.

MF. 17

Page 18: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Exercício prático

o Escreve uma função que tem como objectivo informar se uma pessoa é maior ou menor de idade, recebendo como parâmetro a sua idade.

function Idade (Anos)

{

if (Anos > 17) {

alert ("Maior de Idade") }

else {

alert ("menor de Idade") }

}

MF. 18

Page 19: Módulo 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript

Webgrafia e Bibliografia

o http://www.w3schools.com/JS/

o http://javascript.internet.com/

o https://woc.ipca.pt/est/class/getmaterial.do?idclass=627&idyear=13

o Teagu, J. C. (2004). DHTML and CSS for the World Wide Web (2ª Ed.). USA:Peachpit Press.

MF. 19