Issuu on Google+

SISTEMAS DE INFORMAÇÃO

Mod. 4 – Linguagens de Programação III

Linguagem JavaScript


O que é JavaScript ?

* Linguagem de programação interpretada (scripting), baseada em objetos e sem declaração de tipos; * O código é executado na presença de um interpretador;


O que é JavaScript ?

* Os browsers mais divulgados (Internet Explorer, Google Chrome, Modzilla, etc.) são interpretadores de código JavaScript inserido em páginas HTML;


Versões de JavaScript

* A linguagem JavaScript foi inicialmente desenvolvida pela Netscape; » Versões da Netscape: versão inicial 1.0, seguiu-se a 1.1, 1.2, 1.3 , 1.4 e 1.5, cujo lançamento coincidiu com as várias versões do browser.


Versões de JavaScript

* A versão standard (ECMAScript) foi definida pela ECMA (European Computer Manufacturers Association) e aprovada pela ISO .

* A Microsoft definiu a linguagem JScript que é uma extensão da ECMAScript, só reconhecida em ambiente Windows.


Associar código JavaScript ao clique no botão <html> <head> <title>Clicar no botão</title> </head> <body> <input type="button" value="Clique aqui" onclick='alert(“Olá");' /> </body> </html>

Quando for dado um clique no botão é executado o troço de código (em JavaScript), neste caso: alert(“Ola");


Eventos * Um evento é gerado através de uma ação: » Um clique; » Um movimento do rato; » Uma seleção de texto; » O fecho de uma página; » etc.


Eventos

* O tratamento de eventos é feito por blocos de código associados a eventos específicos; * A associação é realizada em HTML nos elementos que suportam eventos do tipo Event através dos atributos: onEvent


Eventos » Por exemplo, para capturar o clique num botão (evento click) seria:

<input type = "button" onclick = 'alert(“Ola");' />


Funções Área de definição de código (em JavaScript) Definição da função function nome(argumentos) { sequência de instruções }

A função touch não tem argumentos e contem uma só instrução Chamada a função nome(argumentos)

A função alert tem um argumento: string com o texto a ser apresentado

<html> <head> <title>Clicar no botão</title> <script type="text/javascript" > function touch() { alert("Ui"); } </script> </head> <body> <input type="button" value="Clique aqui" onclick='touch();' /> </body> </html>


Identificadores Os nomes das funções e variáveis cumprem as seguintes regras: * Só pode conter letras, dígitos e _; * Tem que começar por uma letra; * Existe distinção entre minúsculas e maiúsculas; * Diferente de qualquer palavra reservada.

Correcto

Errado

tarefa

tarefa#4

Dim24

7vezes

NomeCompleto

nome completo

nome_completo

function


Palavras reservadas break

delete

function

return

typeof

case

do

if

switch

var

catch

else

in

this

void

continue

false

instanceof

throw

while

debugger

finally

new

true

with

default

for

null

try

Reservadas mas "ainda" n達o usadas abstract

double

goto

native

static

boolean

enum

implements

package

super

byte

export

import

private

synchronized

char

extends

int

protected

throws

class

final

interface

public

transient

const

float

long

short

volatile


Variáveis Podem armazenar valores de qualquer tipo, por exemplo: strings ou valores numéricos. <html>

Enquanto não forem iniciadas <head> (primeira atribuição) armazenam o <title>Clicar no botão</title> valor especial: undefined <script> Definição da variável var nome [ = expressão ] ;

Atribuir a variável Consultar a variável

function touch() { var oldColor; //Para repor a cor oldColor = document.bgColor; document.bgColor = "red"; alert("Ui"); document.bgColor = oldColor; } </script> </head> ...


Eventos dos elementos HTML Elementos com representação visual Todos excepto: <br>, <head>, <html>,

<script>, <style>, <title>

<a>,<input>,<select>,<textarea>

onclick

Clique no botão rato

onfocus

Ganha o foco

ondblclick

Duplo clique no rato

onblur

Perde o foco

onkeydown

Tecla for premida

onkeypress

Tecla premida e libertada

onkeyup

Tecla libertada

onmousedown Botão do rato premido onmouseup

Botão do rato libertado

<body>

onload

Acabado de carregar

onunload

Antes de abandonar

<input>, <select>, <textarea>

onmouseover Rato entrou no elemento

onchange

O valor foi alterado

onmousemove Rato movido no elemento

onselect

Texto foi seleccionado

onmouseout

Rato saiu do elemento


Decisão binária (if)

Instrução de decisão binária if ( condição ) instrução1 else instrução2 Só é executada a instrução1 se a condição for verdadeira (valor lógico true). A instrução2 é executada se a condição for falsa (valor lógico false).

if ( condição ) instrução instrução1

Mais do que uma instrução terão que estar entre chavetas ({...}).


Valores lógicos • Os valores lógicos são apenas dois: true e false; • Das comparações (operadores relacionais) resultam valores lógicos; • Existem operadores lógicos.

Operadores lógicos

Operadores relacionais

Resultado é true se:

Resultado é true se:

A&&B

A e B têm valor lógico true

A==B

O valor de A é igual a B

A||B

A ou B tem valor lógico true

A!=B

A é diferente de B

!A

A tem valor lógico false

A===B A é igual a B (sem conversão)

A e B são convertidos para valores lógicos, caso não sejam: • Qualquer objecto é true • String é false se estiver vazia • Número é true se for diferente de 0 • null e undefined são false

A!==B A diferente de B (sem conv.) A<B

A é menor que B

A<=B

A é menor ou igual a B

A>=B

A é maior ou igual a B

A>B

A é maior que B


Acesso ao objecto document O documento HTML é representado pelo objeto document O objeto document tem várias propriedades, por exemplo: Nome Descrição bgColor Cor de fundo fgColor Cor de escrita title

Título do documento

url

Endereço da página Efeitos

Comentário de fim de linha ... // comentário

<html> <head> <title>Clicar no botão</title> <script> // Fundo vermelho enquanto // janela "alert" aberta function touch() { document.bgColor = "red"; alert("Ui"); document.bgColor = "white"; } </script> </head> ...

Acesso a propriedade objeto.propriedade


Objectos em JavaScript Um objeto é uma coleção de propriedades; Cada propriedade tem um nome: • As propriedades armazenam valores que podem ser lidos ou escritos. • As propriedades que armazenam funções denominam-se métodos, que podem ser chamados. obj.prop

Nome da propriedade Nome do objeto

obj.method (argumentos) Nome do método


Objectos predefinidos

Existem três tipos de objetos: • Intrínsecos da linguagem (ex: String, Math) • Fornecidos pelo browser (ex: window, navigator) • Criados pelo código em JavaScript.


Objectos predefinidos O objeto window é usado quando nenhum objeto for explicitamente indicado. Por exemplo: •

alert é um método de window alert("olá") é equivalente a window.alert("olá")


Objectos predefinidos

document ĂŠ uma propriedade de window document.bgColor ĂŠ equivalente a window.document.bgColor


JavaScript