Bem-vindo ao segundo mdulo do nosso curso! Nele voc aprender como incluir programas, ou scripts, em suas pginas Web. Este mdulo ser todo dedicado linguagem JavaScript. E nessa aula voc aprender o que JavaScript, o que pode fazer com ela, e como inclui-la nas suas pginas HTML.
Objetivos: Nesta aula voc aprender os fundamentos de JavaScript e ver: - os tipos e as verses do JavaScript; - como incluir cdigo na pgina HTML (tag script); - a estrutura da linguagem; - suas constantes e variveis; - a concatenao de strings.
Pr-requisitos: As aulas 1 a 3 e a aula 7 do mdulo anterior.
1. Introduo JavaScript JavaScript, que aprenderemos neste mdulo, como HTML, uma linguagem interpretada, mas, diferentemente de HTML, uma linguagem de programao que inclusive tem caractersticas rudimentares de Orientao a Objetos, O.O. , e programao dirigida por eventos (no decorrer do mdulo, voc entender melhor o que estas caractersticas acrescentam linguagem). Esta linguagem foi desenvolvida (por Bredan Eich da Netscape) num convnio entre a Netscape e a Sun. Inicialmente, chamava-se LiveScript, mas mudou de nome s vsperas do lanamento por questes de marketing. O cdigo fonte fica embutido na pgina HTML e interpretado pelo navegador. Apesar da expectativa criada pelo nome, esta linguagem tem muito pouco a ver com Java. Alm de alguma semelhana sinttica e do fato de que, tanto Java quanto JavaScript, podem fornecer um contedo executvel pelos navegadores Web, a principal relao entre as duas linguagens vem de sua origem comum: as linguagens C e C++. Na linguagem Java, o cdigo fonte compilado para um cdigo intermedirio, que pode ser executado em qualquer mquina que possua um interpretador Java (no necessariamente o interpretador embutido no navegador). Alm desta diferena, h muitas outras diferenas em termos de sintaxe, abrangncias e objetivos das duas linguagens.
Com JavaScript possvel manipular imagens embutidas na pgina; ler e escrever o estado do cliente em Cookies; interagir com o usurio; alterar caractersticas do documento; e controlar o comportamento do navegador fazendo este: carregar um novo documento; Bibliografia auxiliar para o segundo mdulo:
Goodman, Danny JavaScript, a Bblia , Rio de Janeiro: Editora Campus, 2001.
Moncur, Michael, Aprenda em 24 horas JavaScript 1.3, Rio de Janeiro: Editora Campus, 1999.
Flanagan, David , JavaScript the definitive guide, Cambridge: OReilly, 1988.
Negrino, T. e Smith,D., Java- Script para a WWW, Rio de Janeiro: Editora Campus,2000.
Documentao da Netscape: http://developer. netscape.com/docs/ manuals/ communicator/jsref/ index.htm .
Documentao da Microsoft: http://msdn. microsoft.com/ scripting/JScript/doc/ Jstoc.htm.
2 retornar para a pgina anteriormente visitada; abrir/fechar janelas; exibir pginas diferentes de acordo com o browser do usurio; controlar o contedo de formulrios HTML.
JavaScript, no entanto, no possibilita escrever ou ler arquivos; no possui capacidade de desenho, no suporta estabelecer conexes em rede, nem oferece possibilidades de processamento em segundo plano ou multitarefa (multithreading).
2. Tipos e Verses de JavaScript Existem variantes da linguagem dependendo do contexto onde se embute o JavaScript. Algumas destas so as chamadas Client-Side JavaScript ou "no lado do cliente" e Server-Side JavaScript ou "no lado do servidor".
Em nosso curso abordaremos apenas a forma executada no cliente (client-side). Nesta forma, que a variante mais comum, quando a maioria das pessoas se referem JavaScript est se referindo a esta forma, o interpretador se encontra embutido no navegador Web. A forma no lado do servidor (server-side) utilizada nos servidores Netscape como uma alternativa aos scripts CGI. Nesta forma, diferente da client-side, possvel ler e escrever arquivos e bancos de dados no servidor.
Como em HTML, h diferenas na linguagem JavaScript em funo do tipo de navegador onde o programa ser interpretado. O nome JavaScript propriedade da Netscape, a implementao da Microsoft da linguagem oficialmente denominada JScript. Verses de JScript so mais ou menos compatveis com as verses equivalentes do JavaScript. A tabela 9.1 mostra essas verses. Tabela 9.1 - Verses de JavaScript e navegadores Verses no Netscape Verses no Explorer Browser Javascript Browser JScript Netscape 2.0 Javascript 1.0 Netscape 3.0 Javascript 1.1 Explorer 3.0 JScript 1.0 Netscape 4.0 Javascript 1.2 Explorer 4.0 JScript 3.0 Netscape 4.5 Javascript 1.3 Explorer 5.0 JScript 5.0 Netscape 6.0 Javascript 1.5
3. Execuo de Programas JavaScript Os programas JavaScript so executados na ordem em que aparecem na pgina e no possvel fazer referncia a elementos HTML que ainda no foram definidos.
H trs formas de incluir um cdigo JavaScript em uma pgina: atravs da tag <SCRIPT> ... </SCRIPT>. atravs da seleo de um link. atravs da associao a um evento.
Cookie o termo usado (inicialmente pelo Netscape) para descrever uma pequena quantidade de dados armazenados pelo cliente de forma temporria ou permanente. Cookies so transmitidos de e para o servidor e permitem que a pgina ou o site lembre de coisas sobre o cliente, como por exemplo: que o usurio j visitou antes o site, j se registrou ou expressou anteriormente alguma preferncia sobre o layout da pgina. JavaScript permite ler e escrever valores nos cookies, podendo gerar HTML baseado nos valores descritos neles.
3 Na primeira forma, a tag <script> pode aparecer em qualquer lugar da pgina, inclusive na rea de cabealho (dentro da tag <HEAD> ... </HEAD>). Quando includa na rea de cabealho, o programa executado antes que a pgina seja totalmente carregada. As linhas abaixo exemplificam esta forma: <script language=Javascript> <!-- ...//codigo Javascript ... --> </script>
Quando esta forma de JavaScript for usada possvel utilizar a tag <NOSCRIPT> ... </NOSCRIPT> para exibir uma alternativa ao cdigo JavaScript em navegadores que no saibam execut-lo.
A incluso do cdigo entre comentrios (tag <!-- .... -->) recomendvel para que os navegadores que no conheam JavaScript no tentem exibir o cdigo.
possvel tambm no escrever o cdigo diretamente na pgina, colocando-o em um arquivo separado. Neste caso se usa o atributo SRC para indicar o nome do arquivo de onde vir o cdigo. Por exemplo: <script language=Javascript src=arquivo.js> </script>
Na segunda forma, o link ao ser selecionado promove a execuo do programa: <a href=javascript: > .... </a>
Quando associada a um evento a sintaxe usada : <tag-html onEvento= >
No exemplo atividade do final da aula, voc ter a oportunidade de ver com mais detalhes estas formas.
4. Estrutura Lxica da Linguagem
JavaScript uma linguagem case sensitivity (como C e diferente de HTML): as letras minsculas (lowercase) so diferenciadas das maisculas (uppercase). Isso significa que as palavras-chave da linguagem, as variveis, os nomes de funes ou qualquer outro identificador deve sempre ser escrito da mesma forma. A palavra-chave break, por exemplo, se for escrita Break ou BREAK representar outra coisa e no mais a palavra-chave.
Algumas excees a esta regra so, entretanto, encontradas na forma executada no cliente (client-side). No Explorer 3, por exemplo, todos os objetos e propriedades executados no cliente so case-insensitive. Outro exemplo so as folhas de estilo JavaScript executadas no cliente no Navigator 4, que permitem a especificao de estilos por tag HTML (projetadas com o propsito de serem case-insensitive).
Os espaos em branco, as tabulaes (tabs) e as mudanas de linha (newlines) entre os comandos so ignorados. Voc pode assim usar os espaos e as mudanas A estrutura lxica de uma linguagem de programao o conjunto de regras elementares que especificam como voc escreve programas com ela. Definindo coisas como a aparncia dos nomes, as formas usadas para comentrios, e como os comandos so separados uns dos outros.
4 de linha livremente ou de uma maneira consistente em seu programa de modo a torn-lo fcil de entender.
O caracter ponto e vrgula (;) deve ser usado como limitadores, aps cada comando. Esta a mesma forma de limitar comandos de C, C++ e Java. Mas em JavaScript voc pode omiti-los se os comandos se encontrarem em linhas diferentes. Por exemplo, nas linhas abaixo voc, poderia t-los omitido. a=3; b=5;
Mas o primeiro ";" no poderia ser omitido se voc escrevesse ambas as atribuies na mesma linhas, como: a=3;b=5;
No um bom hbito deixar por conta da linguagem, onde os comandos devem ser separados. O melhor voc se acostumar a sempre us-los. Saber que a linguagem JavaScript permite que dois comandos sejam separados por linhas, automaticamente inserindo ponto e vrgula por voc, evita alguns mal-entendidos.
A linguagem JavaScript possui duas formas de incluir comentrios em meio s instrues (herdadas das linguagens C e C++): // o conjunto: /* ... */
As barras duplas, //, em qualquer ponto da linha fazem com que o interpretador ignore todos os demais caracteres at o fim da linha.
A seqncia /* (barra seguida do asterisco) faz com que o interpretador ignore todos os caracteres (inclusive o de mudana de linha) at encontrar a seqncia */ (asterisco seguido da barra). Este tipo, no entanto, no pode ser aninhado, isto , no se pode ter outro comentrio do mesmo estilo no interior. As linhas que seguem mostram isso.
// essa linha e comentario /* esta tambem /* e esta por enquanto tambem */ mas o final da linha anterior confundiu tudo e as tres ultimas nao sao mais comentarios */
Alm do estilo C e C++, a forma client-side reconhece a seqncia de abertura de comentrios de HTML: <!--. Mas esta forma tratada como se fosse um comentrio de linha nica, // pois JavaScript no reconhece a seqncia de fechamento HTML: -->. H uma razo para isso: em programas JavaScript, se a primeira linha comear com <!-- e a ltima terminar com //-->, todo o programa contido dentro de um comentrio HTML e ignorado pelo browser que no suportar JavaScript. Desde que a primeira linha comece com <!-- e a ltima linha com //, JavaScript ignora ambas, mas no as linhas entre elas. Desta maneira possvel esconder o cdigo de um navegador que no pode entend-lo e "no esconder" se ele puder ser entendido pelo browser. Devido a este propsito especial do comentrio <!--, voc deve us-lo apenas na primeira linha de seus scripts, j que outra forma poderia causar confuso.
5 5. Tipos de Dados Os tipos de dados utilizveis por uma linguagem um dos seus aspectos mais fundamentais. JavaScript tem 3 tipos primitivos de dados: nmeros, strings e booleanos.
Um literal um dado que aparece diretamente no programa. A tabela a seguir mostra formas de representar literais na linguagem JavaScript:
Tabela 9.2 - Exemplos de literais Tipo Constante Lanchonete Bob's, "Pi = 3.14", "A" string 'vi o filme Central do Brasil','Pi=3.14','A' inteiro na base 10 8, -12, -9007199254740992, 9007199254740992 inteiro octal 056, -0123, 0377, inteiro hexadecimal 0x7A, -0x10, 0xCAFE911, 0xff, 0377 real 3.14, -10.28, .3333333, 6.02e+23, 1.4738E-32 booleano true , false
Uma varivel um nome associado a um dado ou valor, diz-se que uma varivel "armazena" ou "contm" um valor. Elas permitem que se armazene e manipule dados no programa, assumindo ou recebendo valores diferentes. Por exemplo, na linha abaixo se atribui varivel denominada inicio o valor 2, e depois adiciona-se a inicio o valor 3, e atribui-se o resultado a uma nova varivel. soma: inicio = 2; soma = inicio + 2; Os nomes de variveis podem conter letras, dgitos (desde que no seja o primeiro caracter do nome), o caracter _ e o caracter $. Algumas palavras no podem ser usadas como nome de varivel, pois so reservadas para comandos e expresses da linguagem, como por exemplo: true, var, if, while etc. Diferente de uma linguagem como Pascal, no preciso declarar previamente uma varivel nem definir explicitamente o seu tipo. Para declarar varivel, usa-se a palavra-chave: var. Assim, so exemplos de declaraes e usos de variveis: var i; // Cria a variavel i i = 10; // Guarda o valor 10 em i var i = 2; // Cria e armazena 2 i = 2; /*idem a linha anterior: a palavra "var" e opcional, a principio */ i = onze; /* agora o tipo da variavel passou a ser string. */
Se uma varivel criada no momento em que utilizada pela primeira vez, o seu tipo definido pelo tipo do valor que ela recebe. Se uma varivel utilizada sem que antes tenha um valor atribudo, o seu valor undefined.
6 Embora no seja muito recomendvel, possvel modificar o tipo de uma varivel que j tenha sido criada simplesmente atribuindo um valor de outro tipo. Isso ocorre porque JavaScript, diferente de C, Java, Pascal e de muitas outras uma linguagem no-tipada (untyped). Ela automaticamente converte valores de um tipo para outro se necessrio. Ns veremos mais sobre isso quando falarmos de Converso de tipos de dados, na prxima aula. A mudana do tipo de uma varivel , entretanto, uma fonte potencial de erros de execuo e deve ser no mnimo usada com conscincia.
5.1 - Nmeros
Nmero o tipo mais bsico possvel e no requer explicao, a no ser pela observao de que (diferente de C e Java) JavaScript no faz distino entre valores inteiros e reais (pontos flutuantes). Todos os nmeros em JavaScript so representados como valores de ponto flutuante em 8 bytes.
Quando um nmero aparece diretamente em um programa JavaScript, ns o chamamos literal numrico. Os formatos de literais numricos suportados pela linguagem so: Inteiros na base 10. Inteiros octais. Inteiros hexadecimais. Pontos flutuantes.
Inteiros na base 10 so representados como seqncia de dgitos que no comeam com o dgito zero, exceo feita ao prprio zero. Como todos os nmeros so representados como valores de ponto flutuante possvel especificar literais inteiros extremamente grandes. Todos os inteiros entre -2 53 (= - 9007199254740992) e 2 53 (= 9007199254740992), inclusive estes, podem ser representados exatamente.
Um valor literal octal (nmero na base 8) comea com o dgito zero, seguido por uma seqncia de nmeros entre 0 e 7. Como em C e C++ , um literal hexadecimal comea com 0x ou )X, seguido de dgitos de 0 a 9 ou letras a (ou A) a f (ou F), as quais representam os nmeros 10 a 15.
Os literais de ponto flutuante podem ter um ponto decimal, uma parte inteira do nmero e uma parte fracionria (depois do ponto decimal). Tambm podem ser representados na notao exponencial: onde a letra e (ou E) seguida de um sinal + ou - introduz expoentes inteiros que representam potncias de 10. De modo que 100.10=1.001e+2, ou 0.01=1E-2.
A linguagem tem alguns valores numricos especiais. Quando um ponto flutuante se torna maior que o valor mximo representvel, o resultado um valor especial que JavaScript imprime como Infinity. De maneira semelhante quando um valor negativo se torna mais negativo que o maior negativo possvel de ser representado, o resultado impresso -Infinity.
Outro valor numrico especial aparece quando uma operao matemtica resulta um valor indefinido (por exemplo em uma diviso de zero por zero). Neste caso, o
7 resultado um valor especial denominado "not-a-number" que impresso como NaN. Este valor tem uma propriedade especial: em uma operao de comparao (veremos estas operaes na prxima aula) no igual a nenhum nmero nem a ele prprio. Por este motivo existe uma funo especial isNaN() para testar este valor.
Existem constantes definidas para cada um dos valores numricos especiais. Estas so listadas na tabela 9.3. O exemplo atividade no final da aula, mostra como elas so vistas na pgina gerada pelo script.
Tabela 9.3 - Constantes numricas especiais Constante Significado Number.MIN_VALUE o maior valor possvel Number.MAX_VALUE o menor (mais prximo a zero) possvel Number.POSITIVE_INFINITY representao especial de infinito Number.NEGATIVE_INFINITY representao especial de infinito negativo Number.NaN o valor especial not-a-number 5.2. Strings
Strings uma seqncia de letras, dgitos, caracteres de pontuao e outros, que so representados pela linguagem como texto. Strings literais podem ser includas nos programas delimitando algo por pares de '...' ou "... ". JavaScript no tem um tipo de dado especial para um caracter isolado, como o char de C ou Java. Para representar um nico caracter, voc simplesmente o representa como uma string de tamanho 1.
Assim possvel criar strings entre aspas ou entre plicas. A utilizao de um ou de outro caracter como delimitador da string uma questo de convenincia do programador. Por exemplo, caso se deseje incluir uma plica em uma string, deve- se utilizar aspas como delimitador. Ou seja, uma " pode estar contida dentro de strings delimitada por ' , e ' pode aparecer dentro de strings delimitada por ".
O caracter \ (barra invertida) tem um significado especial, combinado com o caracter que o segue, ele pode representar um caracter que de outra maneira no poderia ser representado dentro da string. Como em C e C++, a barra invertida e o caracter seguinte so chamados "escape sequence".
Estas seqncias tm diversos usos. Permitem a representao de caracteres que no tm um smbolo grfico associado, como tabulaes (\t) e de mudana de linha (\n). Diversas seqncias podem representar smbolos especiais como \251 que permite imprimir o smbolo de copyright. possvel utilizar este caracter tambm para indicar que uma aspa (ou plica) no est sendo utilizada como fim de string (por exemplo, assim pode-se inserir um caracter \ numa string delimitada por aspas). Finalmente, se \ precede um caracter que no tem significado especial, como \a , ela simplesmente ignorada, e tem o mesmo sentido de apenas a.
Voc percebeu por que chamado de escape sequence (o que seria ao p da letra: seqncia de escape)? Porque uma forma de escapar da interpretao usual do caracter!
8 Como JavaScript usada para produzir pginas Web, voc provavelmente usar muitas strings literais em seus scripts. Uma das propriedades embutidas na linguagem a possibilidade de concatenar strings. Se voc usar o smbolo + (mais) com nmeros, ter como resultado uma operao de adio. Mas se voc usar este smbolo com strings, voc as juntar simplesmente acrescentando a segunda primeira, o que chamado de concatenao. Por exemplo: "2 dividido por " + "0" + " = " + "matematicamente indefinido !" 5.3. Booleanos
O tipo booleano de dados pode ter apenas 2 valores: true (verdadeiro) ou false (falso). Valores booleanos so geralmente o resultado de comparaes feitas no programa.
Por exemplo, o cdigo abaixo testa se a varivel a 4: a==4 Se a for 4, o resultado desta comparao ser true, se no for o resultado false.
Valores booleanos so tipicamente usados nas estruturas de controle (como veremos nas prximas aulas) do fluxo dos programas.
A melhor maneira de aprender fazendo! Por isso estamos propondo um exemplo atividade que alm de resumir o que vimos nesta aula, servir para voc exercitar o contedo.
Exemplo Atividade:
Neste exemplo, as linhas de cdigo mostram um programa JavaScript, ou script , embutido em uma pgina HTML.
<HTML>
<HEAD> <TITLE>Curso de Construção de Páginas WEB- Mod. 2 </TITLE> </HEAD>
<BODY> <H1 align=center > Primeiro Exemplo de JavaScript </H1> <H2> Usando os tipos de dados para calcular potências de 2. </H2> <script language=Javascript>
Bata estas linhas e carregue-as em uma pgina Web. Quando voc carregar esta pgina em um navegador que interpreta JavaScript ver a tela mostrada a seguir, na figura 9.1. Neste exemplo, voc usou a tag <script> para embutir o cdigo JavaScript dentro da pgina. Voc certamente ficou sem entender alguns detalhes. Sublinhe no cdigo acima as linhas em que no entendeu alguma coisa.
Voc merece parabns se a primeira linha que voc no entendeu foi: document.write("2 elevado a "+ i + " = "+ pot); Ela exemplifica o mtodo document.write( ); . Este mtodo usado para escrever textos, dinamicamente, na pgina HTML, e ns o usaremos muito ao longo do curso. Falaremos sobre ele detalhadamente nas prximas aulas. Mas agora, olhando para o resultado obtido na pgina, e, em todas as vezes que este mtodo foi usado, tente entender todas as outras linhas em que ele aparece.
Antes de passar aos exerccios, tente tambm adivinhar o que o comando for ( ...;...;...) deve estar fazendo no script.
Exerccios:
1. Utilize, no exemplo atividade, uma varivel em substituio ao texto: "2 elevado a " de modo que a pgina gerada no se altere. Alm disso, faa a tabela iniciar com a potncia de 1 e terminar com potncia de 20, e esconda o texto que segue a tabela. Visualize o novo aspecto que o exemplo ter agora!
10 Figura 9.1 - Pgina gerada pelo cdigo do exemplo atividade
2. Mude o programa de modo a atribuir ttulos s linhas da tabela, utilizando <H3> </H3>. Compare como fica a pgina agora.
3. No exerccio 2, ao final do arquivo, antes da tag </body> inclua as linhas de formulrio que seguem: <form> <input type="button" value="Aperte aqui" onClick="alert('clicaram-me!')"> </form> Veja o resultado e depois de reler a seo 3 desta aula responda: qual a forma de incluir JavaScript usada agora?
Resumo: Nesta aula, voc aprendeu a incluir programas nas pginas HTML. O que e como a estrutura bsica da linguagem JavaScript. Fez uso desta ferramenta escrevendo pginas com programas embutidos e testou seus novos conhecimentos nos exerccios.
Auto-avaliao: Voc concluiu com sucesso os exerccios? Se no entendeu bem apenas os mtodos que apareceram no exemplo atividade e nos exerccios ( isto : document.write( ); for(....), onClick="alert('clicaram- me!')" > ) no se preocupe, estes pontos so para estimular sua curiosidade e lhe mostrar as potencialidades de JavaScript, e ficaro bem claros nos assuntos das prximas aulas. Mas se teve outras dvidas, talvez seja melhor ler novamente a aula, antes de passar para os Comandos que sero apresentados na prxima.