Unidade 4 Concepção de web sites. Subunidade 3 - Client-side scripting. -Geração de scripts client-side - Introdução ao Javascript

Transcrição

1 Unidade 4 Concepção de web sites. Subunidade 3 - Client-side scripting -Geração de scripts client-side - Introdução ao Javascript o Introdução o Noções elementares sobre programação por objectos o Scripts e HTML o Prevenção com a compatibilidade com os browsers mensagens de erro o Variáveis e tipos de dados o Operações com dados o Estruturas de controlo o Tratamento de excepções o Arrays o Funções o Programação Orientada a Objectos em Javascript o O HTML Document Object Model (DOM) e a Javascript o Alguns Scripts o Bibliografia - 1 -

2 O O que são linguagens de scripting Introdução As linguagens de scripting são linguagens de programação interpretadas, cujo o código fonte é interpretado directamente pelo programa onde está a ser executado e no momento da sua execução. Estas linguagens utilizam geralmente um menor leque de funções e têm como objectivo acrescentar funcionalidades ao programa onde estão embutidas. Por sua vez, um script é um programa constituído por um conjunto de instruções, escritas numa determinada linguagem e dirigidas para uma aplicação que as execute e interpreta. Como os scripts são fáceis de editar, pois podem ser editados com qualquer editor de texto, eles são vulneráveis. É possível fazer um script para que execute actividades maliciosas ao ser interpretado - são designados por de scripts maliciosos. Esses scripts podem ser programados para editar códigos de outros scripts. Os scripts maliciosos executam actividades de vírus, por exemplo: criar e excluir ficheiros, modificar chaves do registo do windows e fazer download de ficheiros e executá-los. Client Client-side e server-side side scripting Quando se utiliza a designação Client-side scripting, fala-se de códigos de programas que são processados do lado do cliente. Em aplicações ligadas à internet, estes são processados pelo browser que estiver instalado no computador-cliente, quando receber a página web que solicitou. (ver figura) - 2 -

3 Quando se utiliza a designação server-side scripting, fala-se de códigos de programas que são processados do lado do servidor. Neste caso, o servidor encarrega-se de interpretar o código embebido na página web e envia uma página já processada como resposta ao cliente. Os servidores actuais alojam diferentes tipos de páginas web: dinâmicas, estáticas e activas. As páginas dinâmicas são páginas com capacidade de actualizarem automaticamente os seus conteúdos e de apresentarem interactividade entre cliente e o servidor. Este tipo de página contém códigos que são processados do lado do servidor antes de serem enviadas ao cliente. No processamento destas páginas podem ser executadas: -programas que entendem o servidor, como os CGI (Common Gateway Interface), as API ( Application Program Interface) e os Java Servlets; - código embebido no html como o ASP( Active Server Pages), o JSP(Java Server pages) e o PHP(Personal Home Pages) As páginas activas são páginas que apresentam algum dinamismo desenvolvido do lado do cliente. Estas páginas contêm código que são interpretados pelo browser do cliente, depois de enviadas pelo servidor. No processamento destas páginas podem ser executadas: -código embebido no HTML, como o Javascript, que são interpretadas pelo o browser ao mesmo tempo que a página é descarregada; -código pré-compilados de um objecto do documento, que são depois executados por plug-ins. As páginas estáticas são constituídas apenas por código HTML e não apresentam qualquer actividade ou dinamismo. A A linguagem JavaScript O JavaScript é uma linguagem de programação simples criada para dar mais interactividade e maior funcionalidade às páginas da Web. Foi inicialmente desenvolvida pela Netscape e era designada por LiveScript. Mais tarde resolveram trocar o nome para mostrar a sua proximidade com o JAVA, embora sejam linguagens totalmente distintas. A linguagem JavaScript acabou por dar origem à especificação técnica ECMAScript (ECMA-Europe Computer Manufactures Association), que é um padrão oficial reconhecido pela indústria. Apesar de esta linguagem ser mais conhecida pelo nome de JavaScript, e de a versão produzida pela Microsoft ter recebido o nome de JScript, a verdade é que se tratam de implementações que sendo fiéis à norma ECMAScript lhe acrescentaram novas funcionalidades úteis, mas respeitando sempre as especificações oficiais

4 O código escrito em JavaScript destina-se a ser executado pelo web browser quando a página HTML que o contém é visualizada. Ele é uma parte integrante da página e permite que o browser seja capaz de tomar decisões quanto ao modo como o conteúdo é apresentado ao utilizador e como pode ser manipulado. Compatibilidade com os browsers O inconveniente de se utilizar uma linguagem de scripting é a possibilidade de existir alguma incompatibilidade de interpretação desta por alguns browsers. O Microsoft Internet Explorer, por exemplo é capaz de interpretar o Visual Basic Script, porém o Netscape não o faz sem o auxílio de um plug-in. O Javascript é a linguagem indicada para se poder construir scripts devido à sua compatibilidade com a maioria dos browsers, nomeadamente o Netscape e o Microsoft Internet Explorer, que devem ser de versões iguais ou superiores à 3.0 e 4.0, respectivamente. O que posso fazer com o Javascript? A linguagem javascript possibilita realizar muitas tarefas importantes para o enriquecimento de uma página web. Da validação de dados à visualização de mensagens e efeitos dinâmicos, tudo é possível. As suas potencialidades são: -O JavaScript dá aos criadores em HTML uma ferramenta de programação Habitualmente, os autores de páginas HTML não são programadores, mas o JavaScript é uma linguagem de script com uma sintaxe muito simples, pelo que possibilita a criação de pequenos snippets nas páginas HTML. -O JavaScript permite inserir texto dinâmico nas páginas HTML Uma instrução em JavaScript tal como: document.write( <h1> + name + </h1> ) permite criar uma variável de texto numa página HTML. - O JavaScript reage a eventos Com JavaScript pode-se definir o que deve ser executado, quando algo acontece, como por exemplo, quando numa página é concluído um download, ou quando o utilizador clica sobre um elemento HTML. -O JavaScript pode ler e escrever elementos HTML O JavaScript pode ler e alterar o conteúdo de elementos HTML. -O JavaScript pode ser usado para validar dados O JavaScript pode ser usado para validar dados introduzidos em formulários antes de serem submetidos ao servidor, aliviando-o na sua carga de processamento

5 JavaScript é a mesma coisa que Java? Não, o Java e o JavaScript são linguagens completamente diferentes! O Java (desenvolvido pela Sun Microsystems) é uma linguagem de programação muito complexa e poderosa, baseada no paradigma da orientação a objectos, tal como o C++. O conceito Noções elementares sobre programação por objectos Na programação por objectos temos linguagens orientadas a objectos como o Java e linguagens baseadas em objectos como o JavaScript. Um software orientado a objectos é uma forma de criar software que usa classes e objectos para modelar as características dos objectos reais ou abstractos, utilizando mecanismos de encapsulamento, herança e polimorfismo. Um software baseado em objectos não utiliza os mecanismos de criação de classes e de herança utilizados no software orientado a objectos. Terminologia Numa linguagem de programação orientada a objectos os dois conceitos-chave da programação são as classes e os objectos. Classe Cada objecto é definido pelas suas características (atributos) e pelas suas acções (comportamento). Assim, um veículo motorizado pode ser caracterizado pelo tipo de motor diesel ou gasolina pela potência do motor e pela sua cor enquanto que podemos definir acções como acelerar, travar e parar. Consequentemente, podemos referir ao estado do objecto veículo automóvel como estando a acelerar ou parado ou a desacelerar. A produção de cada objecto é realizada a partir de uma matriz à semelhança da reprodução de uma publicação, seja livro ou jornal, em que os diversos exemplares são reproduzidos a partir do fotolito nas máquinas da tipografia. Essa matriz, no modelo orientado a objectos, é a classe. Sendo uma matriz, a classe é constituída pelas características do objecto a que passamos a designar por atributos ou variáveis de objecto variáveis ou dados no modelo modular e pelas acções que são designadas por métodos funções e procedimentos no modelo modular. Com a classe automóvel (matriz) são produzidos dois automóveis (objectos) com as características definidas na matriz: atributos: quatro rodas, motor e velocidade; acções: travar e acelerar

6 Objecto Os objectos são criados à imagem e semelhança das classes. São concretizações das classes. São em linguagem no modelo orientado a objectos instâncias das classes. Os métodos (funções e procedimentos) são sempre aplicados a um objecto. Por exemplo, sendo dias um objecto de inteiros. No modelo Orientado a Objectos, poderse-ía escrever a seguinte instrução: dias.setinteger(25); supondo-se que a classe inteiros teria um método setinteger para alterar o valor do objecto dias. Usando o exemplo dos automóveis podíamos ter: táxi.acelerar() para aumentar a velocidade do táxi. No conceito do modelo orientado a objectos quando se aplicam métodos aos objectos, diz-se que estamos a enviar mensagens aos objectos. Por exemplo, para definir o ano do objecto umadata, definido por uma classe Data, que tem um método setyear, dizse que foi enviado ao objecto umadata a mensagem para que este use o método setyear para definir o seu atributo ano com o valor do argumento da mensagem. Mensagens As mensagens são invocações dos métodos, sendo estes a interface de comunicação entre os objectos. A figura exemplifica a comunicação entre dois objectos das classes professor e aluno e quadro identifica as classes, os objectos, os métodos e as mensagens presentes na comunicação. Realizar teste Professora Paula O javascript é uma linguagem baseada em objectos Aluna Cláudia Responder teste sim Classe Professora Aluna Instância da classe ou objecto Professora Paula Aluna Cláudia Método Realizar Teste Responder Teste Mensagem O javascript é uma linguagem baseada em objectos Sim - 6 -

7 Mecanismos em que se fundamenta Encapsulamento e abstracção A necessidade de construir módulos de software de pequena dimensão, com uma identidade e individualidade próprias é uma estratégia fundamental para levar a bom porto o navio das aplicações complexas e de grande dimensão. Estes módulos de software permitem uma mais fácil detecção e correcção de erros e criar-lhes uma robustez confirmada por testes que darão ao programador a segurança da sua utilização. Acrescenta-se, ainda, a vantagem de promover a reutilização de software. Um módulo de software testado garante a qualidade das aplicações desenvolvidas, assim, não há necessidade de reinventar o que está feito e provado. A esta estratégia dá-se o nome de encapsulamento devido ao isolamento que promove da peça de software. Nas linguagens procedimentais modulares como o C e o Pascal tal é realizado, respectivamente, com as bibliotecas e as unidades (unit). No modelo orientado a objectos usam-se as classes. Numa outra vertente do encapsulamento aparece o isolamento da estrutura interna do módulo sendo criado um interface esse, público e conhecido pelo programadorque transforma o módulo numa caixa negra produtora de resultados sujeita a regras de utilização conhecidas definidas pelo interface. A isto designa-se por abstracção. Voltando às linguagens referidas a zona interface da unit apresenta a parte pública e interface com o programador isolando a estrutura e implementação dessa unit. Herança As classes podem ser relacionadas entre si por sistemas de herança. Este conceito leva a uma descendência que vai na direcção do refinamento e consequente particularização. Parte-se da generalização do modelo no sentido do particular. Usando a classe automóvel posso construir outras viaturas, um veículo pesado com seis rodas ou um desportivo

8 As classes pesado e desportivo são construídas a partir da classe automóvel herdando as suas características. O pesado passa a ter seis rodas (4+2) e além de travar e acelerar também atrela e desatrela os atrelados. Neste caso, seria pertinente construir uma classe atrelado que não seria da família automóvel, pois as suas características são diferentes. Polimorfismo Designa-se polimorfismo à variação de formatos que um objecto pode apresentar. Neste caso vamos debruçar nos métodos, pois nas linguagens em análise esta característica restringe-se aos métodos. Enquanto que na programação procedimental não é possível criar procedimentos ou funções diversas com o mesmo nome, tal é possível no modelo orientado a objectos. As chamadas linguagens no modelo orientado a objectos puras, esta característica é encontrada, também, nas variáveis. Como exemplo, poderia criar novos métodos travar e acelerar na classe desportivo salientando que o carro desportivo acelera e trava como qualquer automóvel, mas de modo diferente. Apesar de os métodos terem o mesmo nome e objectivo, eles funcionam, internamente, de modo diferente dos da classe automóvel

9 Scripts e HTML Aspectos relacionados com a inserção de scripts Para inserir código JavaScript dentro do HTML é necessário identificar o início e o fim do código. Para tal, utiliza-se a tag <script>para indicar o início e </script> para indicar o fim do script. Utiliza-se o atributo type para definir a linguagem ou o tipo de texto que vai ser usada na escrita do script: <script type="text/javascript"> <script language= JavaScript > A tag <noscript> é utilizada para mostrar um conteúdo alternativo quando o browser não reconhece a tag <script> ou para as situações em que o utilizador desactivou a execução dos scripts no computador. Para indicar o fim deste código, coloca-se a tag </noscript>. Terminar as instruções com ponto-e-vígula -vígula (;)? O JavaScript não nos obriga a terminar as instruções com ponto e vírgula, visto que é opcional. O Javascript reconhece que uma instrução chegou ao fim quando se muda de linha, não necessitando portanto do ponto e vírgula. No entanto isso torna mais difícil a localização dos erros e pode também contribuir para a criação de mais erros. É conveniente que se terminem todas as instruções com o carácter ;. Os comandos JavaScript são sensíveis ao tipo de letra (maiúsculas e minúsculas) O JavaSscript é sensível à troca das letras maiúsculas por minúsculas e vice-versa (é Case sensitive). Esta regra aplica-se a nomes de instruções, nomes de variáveis, nomes de funções, nomes de objectos e a tudo o que possa existir num script. Comentários e blocos de código Os comentários permitem-nos descrever o código JavaScript que produzimos tornandoo mais legível e mais fácil de manter. Em JavaScript podemos usar comentários com uma única linha e comentários com várias linhas. Os comentários com uma única linha começam com os caracteres //. Isto dá ao interpretador de JavaScript a indicação de que o resto da linha é um comentário, pelo que este ignora o resto da linha, continuando a interpretar o código na linha seguinte

10 Um comentário que se estende por várias linhas começa com a sequência de caracteres /* e continua até ser econtrada a sequência de caracteres */, que marcam o fim do comentário. Ao encontrar a sequência /* o interpretador de JavaScript procura imediatamente a sequência de fecho */, continuando aí a interpretação do código e ignorando o que está no meio. Aqui ficam alguns exemplos de comentários em JavaScript. // Isto é um comentário com uma única linha /* Este comentário ocupa uma só linha mas podia ocupar mais */ /* */ Este comentário ocupa várias linhas. Tudo o que for escrito aqui dentro será ignorado pelo interpretador de JavaScript Blocos de código - Um bloco de código é uma sequência de instruções compostas por várias linhas agrupadas. Para agrupar é necessário colocar a sequência de instruções entre chavetas ({.) Exemplo: { var i = 0; var j = i * 3; Colocação dos Scripts Os scripts em Javascript podem ser colocados num documento HTML na secção <head>, na secção <body> ou em ambas as secções. Os scripts também pdem ser colocados externamente a um documento HTML. Script internos São escritos no mesmo ficheiro externos Na secção head Na secção boby São executados quando são despoletados São executados quando a página é carregada São escritos noutro ficheiro Quando o script é usado em várias páginas

11 Scripts na secção head Sintaxe: - São executados apenas quando são chamados para serem executados quando um evento é despelotado - Os scripts são carregados antes de serem usados <head> </head> Exemplo: <html> <head> <script type="text/javascript"> </script> sequência de instruções <script type="text/javascript"> <!-- alert("isto é uma caixa de diálogo") // --> </script> <title></title> </head> <body> </body> </html> Scripts na secção body Sintaxe: - São executados quando a página é carregada - Quando um script é colocado na secção body, este cria o conteúdo da página <head> </head> <body> </body> <script type="text/javascript"> </script> sequência de instruções

12 Exemplo: <html> <head> <title></title> </head> <body> <script type="text/javascript"> <!-- document.write("esta mensagem refere-se ao Javascript") // --> </script> </body> </html> Scripts em ambas as secções head e body -É possível escrever um número ilimitado de scripts no documento -Podem ser colocados em ambas as secções head e body Sintaxe: <html> <head> <script type="text/javascript"> sequência de instruções </script> </head> <body> <script language= JavaScript > sequência de instruções </script> </body>

13 Scripts Externos Sintaxe: -Escreve-se o script num ficheiro externo, que se grava com a extensão.js document.write( This script is external ) -Invoca-se o script, usando o atributo src, nas páginas HTML: <html> <head> </head> <body> </body> <script type="text/javascript" src= xxx.js > </script> Nota: Os scripts externos não devem conter a tag <script> e deve ser colocado exactamente onde se escreveria o script Exemplo: <html> </html> <head> <title></title> </head> <body> <p> </p> <p> </p> </body> O script encontra-se num ficheiro externo designado por "ext.js". <script type="text/javascript" src="ext.js"> </script>

14 Prevenção com a compatibilidade com os browser-mensagem de erro As mensagens de erro podem surgir quando um script está a ser carregado ou executado e podem ser devidas a erros de sintaxe, uso incorrecto dos comandos ou objectos do Javascript e por incompatibilidade com os browsers. A solução na maioria dos casos passa pela correcção dos erros. Os scripts são incompatíveis com alguns browsers, e nestes casos mostram o código script como se fosse o conteúdo de uma página. Para prevenir esta situação, deve usar-se a tag de comentário do HTML ou a tag noscript. Sintaxe: <script type="text/javascript" > <! sequência de instruções // > </script> As 2 barras (//) no final do comentário são os símbolos de comentário. Previnem o compilador (interpretador) Javascript de proceder à compilação da linha. Não se pode colocar as 2 barras no início do comentário (e.g. //<! ), porque os browser mais antigos, mostram-nas. Exemplo: <html> <head><title></title></head> <body> <script type="text/javascript"> <!-- document.write("<h1>olá Mundo!</h1>") --> </script> <p> Olá </p> </body> </html>

15 Variáveis e tipos de Dados O que são as Variáveis? As variáveis são objectos que servem para guardar informação. Elas permitem-nos dar nomes a cada um dos fragmentos de informação com que temos de lidar. Existem regras a respeitar na atribuição de um nome a uma variável: 1º - O nome das variáveis é case sensitive 2º - Deve começar com uma letra ou um underscore (_) 3º - O nome não deve ser nenhuma palavra reservada 4º- Os restantes caracteres que compoem o nome podem igualmente conter números, letras ou sinal de cifrão ($). Para além do atributo nome, uma variável é caracterizada pelo seu valor e pelo tipo de dados que a identifica. O valor é o conteúdo armazenado no espaço de memória associado à variável. O tipo de dados indica o conjunto de dados que uma variável pode conter. O valor de uma variável pode ser alterado durante o script. Pode-se referir à variável pelo seu nome, para saber o seu valor, para usar o seu valor, para o alterar, para o visualizar, etc. Tipos de dados T ipo numérico Descriçã o representa os números inteiros (decimal, octal ou hexadecimal) ou reais de vírgula flutuante. t exto Representa uma cadeia de caracteres(string) entre aspas ou plicas. booleano null Representa um dos seguintes valores lógicos: True ou False Representa um valor nulo, ou seja, a inexistência de um valor associado a uma variável. Uma variável inicializada com null não assume qualquer valor, ou seja, está vazia. undefined objecto array Representa o conteúdo de variáveis não inicializadas ou indefinidas, ou seja, armazenam o valor especial undefined. Representa um objecto que é uma colecção de valores (propriedades) e métodos (funções). As propriedades podem assumir valores de qualquer tipo. Representa um tipo de objectos da linguagem JavaScript. Um array é uma colecção sequencial de valores ou elementos. Cada valor pode ser acedido, para leitura ou escrita, através de um número inteiro ou índice

16 Declaração de Variáveis - Variáveis locais e globais Ao acto de criar uma variável dá-se o nome de declaração. As variáveis que são declaradas fora de qualquer função são designadas por variáveis globais. Aqui o termo global significa que a variável em causa pode ser utilizada em qualquer parte do script; ela está permanentemente acessível. Quando uma variável é declarada dentro de uma função ela é uma variável local porque só pode ser utilizada dentro dessa função. Se tentarmos aceder a uma variável local fora da função em que ela foi declarada é criado um erro porque a variável só existe no universo da função em que foi declarada; ela não faz parte do mundo exterior a essa função e como tal não pode ser aí utilizada. Exemplos de declaração de variáveis: divisor = 3; cor= amarelo ; pi = ; As variáveis declaradas nos exemplos acima são variáveis globais. Para declarar variáveis locias (variáveis cuja existência se limite a uma pequena secção do código) usamos a declaração var, assim: var divisor = 3; Se a declaração var for utilizada fora de qualquer função então, a variável é declarada na base da estrutura do código, e sendo assim a variável é global.numa variável global não existe a necessidade de colocar a declaração var, pois esta é opcional. Exemplo: <html> <head> <title></title> </head> <body> <script type= text/javascript > var a = 5, b = 8 var soma soma = a + b alert( Resultado da soma: + soma) </script> </body> </html>

17 Variáveis locais e globais- - resumidamente Variável Locais - São variáveis declaradas dentro de funções - Apenas podem ser acedidas dentro da função - Quando a função termina, a variável é destruída - Podem existir variáveis locais com o mesmo nome em diferentes funções, porque cada uma delas só é reconhecida dentro da função onde se encontra declarada Variável Globais - São variáveis declaradas fora de uma função - Todas as funções da página podem aceder a ela - Estas variáveis são criadas quando são declaradas e só deixam de existir quando a página é fechada Atribuição de Variáveis Para atribuir um valor a uma variável, este deve ser colocado do lado direito do sinal de igual, enquanto que o nome da variável se encontra do lado esquerdo. Exemplo: var cor= azul Uma variável é inicializada quando lhe é atribuído um valor. Neste exemplo acima a variável cor foi inicializada com o valor azul. Outras atribuições de variáveis: var x=1, y, z=0 - declaração de três variáveis na mesma linha. Duas foram inicializadas, uma com o valor de 1 e outra com o valor de 0. A variável y foi inicializada com o valor undefined. var nome= Paula Alcobia - declara a variável nome e inicializa-a com o valor Paula Alcobia do tipo string

18 Constantes As constantes, têm a mesma função que as variáveis, mas o valor de uma constante não pode ser alterado. Na declaração de uma constante utiliza-se a palavra reservada const. Exemplo: const maximo=10; Não se pode declarar uma constante dentro do corpo de uma função. Também não se pode declarar uma constante com o nome de uma variável existente. // Estas declarações estão incorrectas function f { const g=5; var g; Literais As expressões literais representam valores fixos e não variáveis. T ipo Exempl o 54 Inteiro decimal 0xA153 Inteiro hexadecimal( número que começa por 0x) 0671 Inteiro Octal (número que começa por 0) numérico 5,41-2E8 3E-10 Real ou vírgula flutuante I nfinity Infinito positivo (x/0) - Infinity Infinito negativo (-x/0) NaN Indeterminação (0/0) (Not a Number) string booleano null undefined "Isto é uma string" "50" "amarelo" true false null undefined a rray ["aluno, "professor", funcionário" ]

19 Números inteiros Os números inteiros podem ser expressos na forma decimal (base 10), hexadecimal (base 16) ou octal (base 8). Um número decimal consiste numa sequência de dígitos que nunca deve começar por 0 (zero). Se escrevermos um número com um zero no início isso significa que se trata de um número escrito na forma octal. Por outro lado, se no início escrevermos os caracteres 0x (ou 0X) isso significa que o número está escrito na forma hexadecimal. Os números escritos na forma decimal podem conter os dígitos (0-9), a forma octal aceita apenas dígitos de (0-7) e a forma hexadecimal aceita os dígitos (0-9) mais as letras a-f e A-F. Números com vírgula flutuante Uma expressão literal com vírgula flutuante representa um número que não é inteiro mas que contém uma parte inteira e uma parte fraccionária. Os números 21.37e são exemplos disto. A representação que a máquina constrói para estes números baseia-se na notação científica. Por exemplo, o número é igual a a multiplicar por 10 elevado a 3, e escreve-se como E3, em que E3 representa 10 elevado a 3. Um outro exemplo é o número , que é representado na forma E-4, ou seja a multiplicar por 10 elevado a - 4. Expressões de texto Uma expressão de texto é composta zero ou mais caracteres colocados entre aspas ("), como por exemplo "esta é uma expressão de texto", ou entre plicas ('), como por exemplo 'esta é outra expressão de texto'. Para além dos caracteres normais, as expressões de texto podem conter os caracteres especiais apresentados na lista seguinte: C arácter r Significad o \ b backspace \ f form feed \ n new line \ r carriage return \ t tab \\ backslash Cada um destes caracteres produz o mesmo resultado que se obtém carregando na tecla indicada na segunda coluna. Assim o carácter \b equivale a carregar na tecla backspace (apagar o carácter à esquerda). O carácter \n provoca uma mudança de linha tal como a tecla "enter". O carácter \ é usado como prefixo dos outros caracteres especiais, o que faz também dele um carácter especial. Por isso, para obtermos este carácter temos de temos escrevê-lo duas vezes (\\)

20 Caracteres Unicode O uso de caracteres Unicode permite que os computadores processem caracteres de diversas línguas. As novas versões da linguagem Javascript suportam nativamente caracteres Unicode, enquanto que as versões anteriores à 1.3 não o faziam. O código Unicode permite codificar uma enorme quantidade de caracteres e é compatível com o código ASCII e ISO (International Standard ISO). Sequências de escape Unicode - podemos utilizar sequências de escape Unicode em literais de strings (conforme página 19). A sequência de escape consiste na utilização de seis caracteres ASCII: \u e mais 4 caracteres hexadecimais. Por exemplo: \u00a9 que representa o símbolo de copyright. Cada sequência de escape Unicode no Javascript é interpretado como um caracter. Lista de alguns caracteres de sequência de escape C ategorai ai V a ol ru n ci od e N om e Form at o Espaços em branco u\ 0009 T ab <TAB> u\ 000B V er cit alta b <VT> u\ 000C F orm Feed <FF> u\ 0020 S pace ( espaço ) <SP> Va ol res de mif de nil ha u\ 000A L ni e Feed <LF> u\ 000D C arrai ge R e ut rn <C R > Va ol res ad ci oi na si de Sequencai s de escape u\ 000b B ackspac e <BS > u\ 0009 H orzion at ltab <H T> u\ 0022 D oub el Q uo et ( aspas ) " u\ 0027 S ni g el Q uo et ( p cil as) ' u\ 005C B acksal sh ( barra ) \ Para obter mais informações sobre Unicode, consulte o site Unicode Consortium Web site:

21 Operações com dados As operações com dados permitem criar expressões que são sequências de operadores (aritméticos e outros) e operandos(variáveis, literais e subexpressões), cujo resultado pode originar valores do tipo número, string, booleano, null e undefined. Operadores de atribuição de valor Um operador de atribuição é um operador que afecta o lado esquerdo do sinal de igual(=) com o valor resultante da expressão do seu lado direito. O perador r E xem p ol E qu vi a êl nc ai = x= y x= y + = x+= y -= x-= y * = x*= y x=x+ y x=x- y x=x* y =/ x=/ y x=x y/ % = x% = y x=x% y Os operadores mais conhecidos são as quatro operações aritméticas básicas (adição subtracção, multiplicação e divisão.) Para estes a linguagem JavaScript define as seguintes versões curtas. Operador String Uma string é uma sequência de caracteres (letras, números, pontuação, etc). Por exemplo: Olá Mundo!. Para concatenar duas ou mais strings, usa-se o operador +. Exemplo: txt1= O meu nome é: txt2= txt3=txt1+ +txt2 O resultado da variável txt3 seria: O meu nome é Outro exemplo: a= 6 b=dto c= a+b O resultado da variável c seria 6Dto Quando um do operandos não é do tipo string (variável a)é feita a conversão automática desse operando para o tipo string

22 pitl Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano Operadores de aritméticos Um operador aritmético recebe valores numéricos (tanto variáveis como expressões literais) e produz um valor numérico como resultado. Os operadores numéricos mais importantes são a adição (+), a subtracção (-), a multiplicação (*), a divisão (/) e o resto da divisão (%). O funcionamento destes operadores em JavaScript respeita todas as regras da álgebra. O perador r D escrçi ã o E xem p ol R esu tlad o + ad çiã o - sub rtacçã o * m u cil açã o / d vi siã o x=2 x+2 x=2 5-x x=4 x*5 15 5/ 5 2/ % m ódu ol ( ob ét m ni et ria) o res ot de um a d vi sião 5% 2 10% 8 10% nicrem en ot x= 5 x decrem en ot - m enos unároi x=5 x-- x=3 -x 4-3 O seguinte quadro mostra as formas de incrementar e decrementar um determinado valor. E xpressão X A X=A++ A+ 1 A+ 1 X=++A A A+ 1 X=A-- A-1 A-1 X=--A A A

23 Operadores de comparação Um operador de comparação compara os valores que lhe são fornecidos e retorna um valor lógico que indica se o resultado da comparação é verdadeiro ou falso. O perador r D escriçã o Exempl o Igualdade (==) Verifica se os dois operandos são iguais x==y dá true se x igualar y 5==8 Falso Devolve Desigualdade (!=) Verifica se os operandos são desiguais x!=y dá true se x não for igual a y 5!=8 Devolve verdadeiro Maior do que (>) Verifica se o operando da esquerda é maior do que o da direita x>y dá true se x for maior do que y 5>8 Devolve Falso Maior ou igual (>=) Verifica se o operando da esquerda é maior ou igual ao da direita x>=y dá true se x for maior ou igual a y 5>=8 falso Devolve Menor do que (<) Verifica se o operando da esquerda é menor do que o da direita x<y dá true se x for menor do que y 5<8 Devolve verdadeiro Menor ou igual (<=) verifica se o operando da esquerda é menor ou igual ao da direita x<=y dá true se x for menor ou igual a y 5<=8 Devolve verdadeiro Para comparar diferentes operandos entre si, é necessário salientar algumas regras: -o valor null é igual ao valor undefined; -dois valores booleanos são iguais se forem ambos true e false; - duas strings são iguais se contiverem a mesma sequência de caracteres; - duas variáveis diferentes são iguais se referenciarem o mesmo objecto. A comparação de strings é feita por ordem alfabética. No caso de um dos operandos ser do tipo número, o interpretador faz a conversão do operando string para número e faz uma comparação numérica. E xemplo " 12"<"5" Alfabética "12"<5 "doze"<5 T ipo de comparaçã o o"12" é convertido Numéricaem12 Numéricaa "doze" não pode ser convertido em número e conversão resulta em NaN. Resultad o verdadeiro falso falso

24 Operadores lógicos Os operadores lógicos aceitam os valores lógicos true e false (verdadeiro e falso) como operandos e retornam valores lógicos como resultado. Os operadores lógicos base encontram-se listados a seguir: O perador r U tilizaçã o D escriçã o Exempl o e (&&) b && c Dá true se b for true e c for true. x=6 y=3 (x<10 && y>1) devolve verdadeiro ou ( ) b c Dá false se b for false e c for false. Dá true nos casos restantes. x=6 y=3 (x==5 ==5) devolve falso negação (!)! b Dá true se b for false e dá false se b for true. x=6 y=3!(x==y) devolve verdadeiro E xpressão E XP 1 E XP 2 Resultad o V V V EXP1 && EXP2 V F F F V F F F F V V V EXP1 EXP2 V F V F V V F F F!!EXP EXP1 V F F V

25 Outros operadores Existem outros operadores que são designados por operadores especiais, visto que não se encaixam nas categorias anteriores, que são: Operador Condicional (?:) Operador vírgula (,) Operador Delete Operador In Operador Instanceof Operador New Operador This Operador Typeof Operador void Operador Condicional (?:) O operador condicional é o único operador que no Javascript admite três operandos. O operador pode ter um ou dois valores baseado numa condição (permite implementar um if-else). A sintaxe é a seguinte: condição? val1: val2 é equivalente a : if (condição) else val1 val2 Se a condição for verdadeira, o operador assume o valor de val1, caso contrário assume o valor val2. Exemplo: status= (idade>=18)? adulto : menor Esta expressão assume o valor de adulto se a idade for 18 ou mais, caso contrário assume o valor de menor. Operador vírgula (,) Permite criar uma expressão através da concatenação de outras expressões. Este operador é basicamente utilizado dentro de um ciclo FOR, para permitir a actualização de multiplas variáveis ao longo ciclo

26 Exemplo: for (var i=0, j=9; i <= 9; i++, j--) document.writeln("a["+i+","+j+"]= " + a[i,j]) Operador Delete Permite eliminar um objecto, uma propriedade de um objecto ou um elemento com um determinado índice num array. A sintaxe é a seguinte: Exemplos: delete objecto delete objecto.propriedade delete objecto[índice] delete propriedade //permitido apenas dentro da instrução with x=42 var y= 43 myobj=new Number() myobj.h=4 // cria a propriedade h delete myobj.h // apaga a propriedade delete myobj // apaga o objecto Operador In Devolve verdadeiro(true) se uma determinada propriedade existe num determinado objecto. Sintaxe: Propriedade in objecto Operador Instanceof Devolve verdadeiro(true) se um determinado objecto é um determinado tipo de objecto. Sintaxe: Objecto instanceof tipoobjecto Operador New Permite criar uma instância de um objecto de um tipo definido pelo utilizador ou de um dos tipos já construídos no JavaScript: Array, Boolean, Date, Function, Image, Number, Object, Option, RegExp, ou String. No servidor podemos usar também DbPool, Lock, File, ou SendMail. Sintaxe do new:objecto = new tipoobjecto ([param1] [,param2]...[,paramn])

27 Operador This Palavra-chave que é usada para referir um objecto em uso. Sintaxe: this[.propriedade] this[.método] Exemplo: <B>Insira a idade entre 18 e 99:</B> <INPUT TYPE = "text" NAME = "age" SIZE = 3 onchange="validate(this, 18, 99)"> Operador Typeof O typeof é utilizado de uma das seguintes formas: 1. typeof operando 2. typeof (operando) O operador typeof retorna uma string indicando o tipo da variável. Os parêntesis são opcionais. Operador void O void é utilizado de uma das seguintes formas: 1. void expressão 2. void (expressão) O operador void especifica uma expressão para ser avaliada, mas não retorna nenhum valor. Os parêntesis são opcionais. Exemplo:<A HREF="javascript:void(0)">Clique aqui</a> A presente expressão cria uma hiperligação que não faz nada quando o utilizador clica no link. Quando o utilizador clica no link, void(0) retorna 0, o que não tem nenhum efeito no Javascript. O exemplo a seguir, cria uma hiperligação que submete um form quando o utilizador clica no link. <A HREF="javascript:void(document.form.submit())"> Clique aqui para submeter o form.</a>

28 Precedências dos Operadores A precedência dos operadores determina a ordem pela qual é avaliada uma expressão. Pode-se ultrapassar esta precedência usando-se parêntesis. A tabela a seguir apresenta a precedência dos vários operadores da ordem mais alta para a mais baixa. O rdem O perado r Descriçã o 1.[]() Acesso a propriedade, indexação em array, chamada a função e agrupamento de expressões 2 -! ~ new delete void typeof Peradores unários e de objectos 3 * / % Multiplicação, divisão e resto Adição/ concatenação e subtracção 5 > > << >> > Deslocamentos 6 > >= < <= in Comparação 7 = ==!= ===!== Igualdade e desigualdade 8 & E sobre Bits 9 ^ Ou exclusivo sobre Bits 10 Ou sobre Bits 11 && E lógico 12 OU lógico 13?: Condicional ou decisão binária com operador ternário 14 = += -= *= /= %= <<= >>= >>>= &= ^= Atribuição associada e atribuição com operação 15, Avaliação múltipla

29 Estruturas de controlo Existem dois tipos de estruturas de controle: estruturas de repetição(ciclos) e estruturas de decisão(condicionais). A estrutura de repetição permite que um bloco de instruções seja executado repetidamente uma quantidade controlada de vezes. A estrutura de decisão permite executar um entre dois ou mais blocos de instruções. Estruturas de decisão - condicionais As instruções condicionais testam uma condição e com base no resultado do teste decidem se uma parte do código deve ou não ser executada. Elas permitem-nos executar código diferente em situações diferentes. A A instrução if A instrução if é utilizada para testar uma condição e executar um bloco de código apenas quando ela é satisfeita. Sintaxe: if (condição) { bloco de instruções Se a condição for verdadeira, o bloco é executado. Caso contrário, o bloco não é executado. Exemplo: <script language= JavaScript > // Se o tempo no browser for inferior a 12, aparecerá escrito Bom dia var d=new Date() var tempo=d.gethours() if (tempo<10) { document.write( <b>bom dia</b> ) </script>

30 A A instrução if... else A instrução if... else é utilizada para testar uma condição. Se a condição for satisfeita é executado um bloco de código e no caso de não satisfazer a condição é executado um outro bloco de código alternativo. Sintaxe: if(condição) { bloco 1 else { bloco 2 Se a condição for verdadeira o bloco 1 é executado. Caso contrário, o bloco 2 é executado. Exemplo: <script language= JavaScript > //Se o tempo no browser é inferior a 12, sera ecrito Bom dia //Caso contrário será escrito Boa tarde var d = new Date() var tempo = d.gethours() if (tempo < 10) { document.write( Bom dia! ) else { document.write( Boa tarde! ) </script>

31 A A instrução if... else if else Também é possível escrever uma estrutura que execute um entre múltiplos blocos de instruções. Sintaxe: if(condição 1) { bloco 1... else if(condição N) { bloco N else { bloco P Se a condição 1 for verdadeira o bloco 1 é executado. Caso contrario, a condição 2 é avaliada. Se a condição 2 for verdadeira o bloco 2 é executado. Caso contrario, a condição 3 é avaliada e assim sucessivamente. Se nenhuma condição é verdadeira bloco P é executado. Observe que apenas um dos blocos é executado

32 Atribuição condicional de valores A linguagem JavaScript possui um operador que nos permite escolher o valor a atribuir a uma variável consoante o resultado do teste que é feito a uma condição. Esse operador é um operador condicional de atribuição de valor e é composto por diversas partes: uma condição, um ponto de interrogação e dois valores que podem ser atribuídos à variável separados pelo carácter : (dois pontos). Sintaxe: variável = (condição)? valor1 : valor2 Este operador actua do seguinte modo: se a condição for verdadeira a variável passará a ter o valor1; se a condição não for satisfeita será atribuído o valor2 à variável. Estrutura switch...case A estrutura switch...case é uma estrutura de decisão que permite comparar o valor do seu argumento (uma variável ou uma expressão) com vários valores. Para cada caso em que houver uma igualdade será executada uma determinada porção de código. Sintaxe: switch (expressão) { case label1: código a ser executado se expressão = label1 break case label2: default: código a ser executado se expressão = label2 break código a ser executado se expressão for diferente de label1 e label2 Modo de funcionamento do switch - Parte-se de uma expressão simples (frequentemente uma variável), que é avaliada. - O valor dessa expressão é comparado com os valores de cada um dos casos existentes na estrutura. - Se coincide, é executado o bloco de instruções associado a esse caso

33 - Usa-se o break no final do bloco de instruções para impedir que sejam as instruções contíguas (já pertencentes a outro bloco subsequente) - O valor default é usado para representar os casos em que expressão assume valores diferentes de label1, label2, Exemplo: // este exemplo usa a instrução switch para dizer se um número i // pertence ou não ao conjunto {6, 12, 32, 66 var i = 12 var s = "O número " + i switch(i) { case 6: s += " pertence " break case 12: s += " pertence " break case 32: s += " pertence " break case 66: s += " pertence " break default: s += " não pertence " s += "ao conjunto {6, 12, 32, 66" document.write(s)

34 Estruturas de Repetição - ciclos As estruturas de repetição são usados para executar o mesmo bloco de código diversas vezes. Em JavaScript existem os seguintes ciclos de repetição: -for - executam um bloco de código enquanto uma condição for satisfeita. -while - repetem a execução de um bloco de código enquanto uma condição for satisfeita. -do...while - repetem a execução de um bloco de código enquanto uma condição for satisfeita mas executam-no pelo menos uma vez, mesmo que a condição nunca seja satisfeita. Estrutura for A estrutura for costuma ser utilizada quando se quer um número determinado de ciclos. A contagem dos ciclos é feita por uma variável chamada de contador. A estrutura for é, as vezes, chamada de estrutura de repetição com contador. A sintaxe é a seguinte: for(inicialização; condição;pós-instrução) { bloco onde: inicialização é uma expressão de inicialização do contador. condição é uma expressão lógica de controle de repetição. pós-instrução é uma expressão de incremento/decremento do contador. bloco é um conjunto de instruções a ser executado. Nota: O ciclo for identifica três componentes, separadas por ponto e vírgula. Se for necessário realizar mais do que uma inicialização ou pós-instrução, estas deverão ser separadas por vírgulas. Exemplo: for (i = 0; i < 2; i++) { a = i

35 Estrutura while A estrutura de repetição condicional while é semelhante a estrutura do...while. A sintaxe é a seguinte: while(condição) { bloco Esta estrutura faz com que a condição seja avaliada em primeiro lugar. Se a condição é verdadeira o bloco é executado uma vez e a condição é avaliada novamente. Caso a condição seja falsa a repetição é terminada sem a execução do bloco. Observe que nesta estrutura, ao contrário da estrutura do...while, o bloco de instruções pode não ser executado nenhuma vez, basta que a condição seja inicialmente falsa. Exemplo: <script type="text/javascript"> <!-- var i = 0 while (i <= 5) { document.write("o número é " + i) document.write("<br/>") i++ document.write("o ciclo terminou<br/>") // --> </script>

36 Estrutura do...while Esta é uma estrutura básica de repetição condicional. Permite a execução de um bloco de instruções repetidamente. A sintaxe é a seguinte: do { bloco while(condição) Esta estrutura faz com que o bloco de instruções seja executado pelo menos uma vez. Após a execução do bloco, a condição é avaliada. Se a condição é verdadeira o bloco é executado outra vez, caso contrário a repetição é terminada. Exemplo: <script type= text/javascript > <! i = 0 do { document.write( O número é + i) document.write( <br/> ) i++ while (i <= 5) document.write( O ciclo terminou<br/> ) // > </script> Ciclos Infinitos Ciclos infinitos, são ciclos que nunca terminam, isto é, apresentam condições que são sempre verdadeiras. Exemplos: do instrução while (1) while (1) instrução for ( ; ; ) instrução

37 Outros tipos de Instruções A instrução break -Esta instrução serve para terminar a execução das instruções de um ciclo de repetição (for, do...while, while) ou para terminar um conjunto switch. Quando em um ciclo de repetição, esta instrução força a interrupção do ciclo independentemente da condição de controle. Exemplo: for (i = 0; i < a.length; i++) { if (a[i] = thevalue); break; A instrução continue - Esta instrução opera de modo semelhante à instrução break dentro de um ciclo de repetição. Quando executada, ela salta as instruções de um ciclo de repetição sem sair do ciclo. Isto é, a instrução força a avaliação da condição de controle do ciclo. Exemplo: i = 0 n = 0 while (i < 5) { i++ if (i == 3) continue n += i A instrução return(expressão) - só pode ser usada dentro das funções, terminando de imediato a sua execução a partir do local onde está inserida. A expressão associado (opcional) é o valor retornado pela função. Exemplo: function factorial(n) { if ((n == 0) (n == 1)) return 1 else { result = (n * factorial(n-1) ) return result

38 Tratamento de excepções Por vezes surgem situações em que uma parte de um script é executada em condições desfavoráveis. Isso acontece sempre que um script tenta usar um objecto que não está definido ou tenta realizar uma operação que não pode ser realizada. Sempre que aparece uma situação deste tipo surge uma excepção na execução do código. O comportamento normal do interpretador de JavaScript é parar a execução do script porque não sabe o que deve fazer a seguir. Porém, há situações adversas das quais o script pode recuperar em boas condições desde que o programador lhe dê instruções para tal. Isso consegue-se fazendo a captura da excepção criada pelo erro e executando código capaz de fazer a recuperação. Para tal usa-se as instruções try...catch, que têm a sintaxe seguinte: try { bloco com código normal mas que pode gerar erros catch(excepção) { bloco com código capaz de fazer a recuperação dos erros A secção try contém o código normal logo a seguir à instrução try. Ao chegar a esta instrução o interpretador de JavaScript tenta executar esse bloco da forma habitual. Se não ocorrer nenhum erro o interpretador ignora o código que está na secção catch e continua a executar o resto do script. Se ocorrer um erro no bloco try esse erro é capturado pelo bloco catch. É aí que o interpretador de JavaScript continua a executar o código imediatamente após o erro. No bloco catch devemos colocar o código de recuperação. Exemplo: try { s = a[1].substring(0,4) catch(e) { s = Ocorreu um erro no script: +e

39 Throw A instrução throw é utilizada para lançar uma excepção e quando utilizada na instrução try, permite controlar o fluxo do programa, criando mensagens de erro para a instrução cacth. Sintaxe: Definição: throw expressão Arrays - O objecto Array é usado para armazenar um conjunto de valores numa única variável. -Este tipo de objectos é constituído por diversos compartimentos, em que cada um destes armazena um valor. -Cada valor armazenado num dos campor do array encontra-se associado a um índice. Exemplo: var frutas_tropicais = new Array("Goiaba", "Manga", "Maracujá"); var frutas_nacionais = new Array(3); frutas_nacionais[0] = "Maçã"; frutas_nacionais[1] = "Cereja"; frutas_nacionais[2] = "Laranja"; Ao declararmos a variável frutas_tropicais nós declarámos o Array e atribuímos-lhe os valores numa única operação. Já no segundo caso primeiro declarámos o Array e só depois definimos os valores que ele deve conter. Neste caso temos que a variável frutas_tropicais[3] possui o valor "Maracujá" e a variável frutas_nacionais[0] possui o valor "Maçã". Em JavaScript as variáveis não têm um tipo definido, por isso um array pode conter valores de tipos diferentes que podemos alterar sempre que necessário

40 Exemplo: var sortido = new Array(8975, "Livro", false, , "Bolachas"); document.write("sortido = " + sortido); sortido[0] = ; sortido[2] = true; sortido[6] = "Caderno"; document.write("<br/>"); document.write("sortido = " + sortido); Se atribuirmos um valor a um elemento do array com um índice mais alto do que o seu comprimento, o sistema JavaScript resolve o problema aumentando o tamanho do array até chegar ao índice pretendido. É isso que acontece no exemplo anterior quando se chega à linha que tem sortido[6] = "Caderno"; Os arrays são objectos, e entre as suas propriedades conta-se a propriedade length, que nos dá o número de elementos (variáveis) que ele contém num determinado momento. Assim, se ao exemplo anterior juntarmos uma linha com o seguinte código: var numerodeelementos = sortido.length; a variável numerodeelementos ficará com o valor 7 (repare que inserimos um elemento adicional com o índice 6, o que fez crescer o array). De forma análoga se usarmos frutas_nacionais.length iremos obter 3. Criação de um Array - Para criar um objecto Array usa-se a palavra-chave new Exemplo: var familia_nomes=new Array(3) var familia_nomes =new Array( Maria, João, Pedro ) Neste exemplo são criados dois arrays, ambos com 3 elementos. Na primeira linha é apenas criado o array. Na segunda linha, além de ser criado o array, são atribuídos valores a cada um dos seus elementos. Acesso a um Array Para aceder a um elemento do array é necessário referir: - O nome do array - O número do índice