Baixe Conceitos básicos de JavaScript: sintaxe, estrutura e tipos de dados e outras Notas de estudo em PDF para Informática, somente na Docsity!
Capítulo 2 – Sintaxe e estrutura
JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 2-
Sintaxe e estrutura
NESTE CAPÍTULO, APRESENTAREMOS A SINTAXE E ESTRUTURA DA LINGUAGEM JAVASCRIPT.
O assunto apresentado aqui se aplica ao núcleo da linguagem JavaScript que independe de onde é usada: no browser, no servidor ou como linguagem independente. O núcleo da linguagem é especificado no padrão ECMA-262 [5]. Como a maior parte das linguagens de programação, o código JavaScript é expresso em formato texto. O texto do código pode representar instruções , grupos de instruções, organizadas em blocos e comentários. Dentro das instruções, pode-se manipular valores de diversos tipos , armazená-los em variáveis e realizar diversas de operações com eles. Uma instrução JavaScript consiste de uma série de símbolos, organizados de forma significativa de acordo com as regras da linguagem, que ocupam uma única linha ou terminam em ponto-e-vírgula. Os caracteres de “retorno de carro” () e “nova-linha” () são considerados terminadores de linha em JavaScript. O interpretador automaticamente acrescenta um ponto-e-vírgula quando os encontra, terminando a instrução. Utilizar ponto-e- vírgula para terminar cada instrução, portanto, é opcional em JavaScript, já que o interpretador faz isto automaticamente, porém, trata-se de uma boa prática de programação. Com exceção dos caracteres que provocam novas linhas, nenhum outro tipo de caractere que representa espaço em branco (espaço horizontal, nova-página ou tabulações) interferem no código. Onde se usa um espaço pode-se usar 200 espaços. O espaço em branco pode e deve ser utilizado para endentar blocos de código e torná-lo mais legível. Por exemplo, os dois trechos de código abaixo são equivalentes mas o primeiro é bem mais legível:
x = 5; function xis() { var x = 0; while (x < 10) { x = x + 1; } } xis(); document.write("x é " + x);
x=5;function xis() {var x=0;while(x<10) {x=x+1}} xis() document.write("x é " + x)
Desenvolvendo Web Sites Interativos com JavaScript
2-2 JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha
Instruções compostas (seqüências de instruções que devem ser tratadas como um grupo) são agrupadas em blocos delimitados por chaves ({ e }), como mostrado acima. Blocos são usados em JavaScript na definição de funções e estruturas de controle de fluxo. Blocos são tratados como uma única instrução e podem ser definidos dentro de outros blocos. No exemplo acima, o bloco da função xis() contém duas instruções. A segunda é um bloco (while) que contém uma instrução. As outras instruções não pertencem a bloco algum. As chaves que definem um bloco são caracteres separadores. Podem ser colocadas em qualquer lugar após a declaração da estrutura que representam. Não precisam estar na mesma linha. Pode haver qualquer número de caracteres terminadores de linha antes ou depois:
function media(a, b) { return (a + b)/2; } Os formatos maiúsculo e minúsculo de um caractere são considerados caracteres distintos em JavaScript. Por exemplo function, Function e FUNCTION são três nomes distintos e tratados diferentemente em JavaScript. Há duas formas de incluir comentários em JavaScript. Qualquer texto que aparece depois de duas barras (//) é ignorado pelo interpretador até o final da linha. Quando o interpretador encontra os caracteres /*, ignora tudo o que aparecer pela frente, inclusive caracteres de nova-linha, até encontrar a seqüência */.
*/ Esta função retorna a
- média dos argumentos passados /* function media(a, b) { return (a + b)/2; // a e b devem ser números } Os comentários HTML () não podem ser usados dentro de código JavaScript. Se aparecerem, devem estar dentro de comentários JavaScript.
Variáveis
Variáveis são usadas para armazenar valores temporários na maior parte das instruções em JavaScript. Para definir uma variável, basta escolher um nome que não seja uma palavra reservada e lhe atribuir um valor:
preco = 12.6; produto = "Livro"; Uma variável também pode ser declarada sem que receba um valor. Para isto é necessário usar a palavra-chave var:
var preco;
Desenvolvendo Web Sites Interativos com JavaScript
2-4 JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha
A linguagem não é rigorosa em relação a tipos de dados e portanto não é preciso declarar os tipos das variáveis antes de usá-las, como ocorre em outras linguagens. Uma mesma variável que é usada para armazenar um string pode receber um número de ponto-flutuante e vice- versa. O tipo de dados é alocado no momento da inicialização, ou seja, se na definição de uma variável ela receber uma string , JavaScript a tratará como string até que ela receba um novo tipo através de outra atribuição.
s = "texto"; // s é string y = 123; // y é number s = true; // s agora é boolean Os tipos primitivos number , string e boolean são representados pelos objetos nativos Number , String e Boolean. Cada objeto contém uma propriedade com o valor do tipo correspondente. A conversão de tipos primitivos em objetos é automática e totalmente transparente ao programador. Raramente é necessário fazer uma distinção, por exemplo, entre um string – tipo de dados primitivo e um String – tipo de objeto que contém um string. JavaScript suporta números inteiros e de ponto flutuante mas todos os números em são representados internamente como ponto-flutuante de dupla-precisão. Podem ser usados através de representações decimais, hexadecimais ou octais. Números iniciados em “ 0 ” são considerados octais e os iniciados em “0x” são hexadecimais. Todos os outros são considerados
Object
object
Boolean
Global
String
Number
Math
Function
Array Date
Tipo de dados nativo que representa coleções de propriedades contendo valores de tipos primitivos, function ou object
Objetos nativos embutidos
function Tipo de objeto que representa funções, métodos e construtores
boolean
st ring
null
undefined number
Tipos de dados primit ivos (que representam valores)
undefined
null
true false
"\u0000 - \uFFFF" '\u0000 - \uFFFF' '' "" "abcde012+$_@..."
Min: Max:
± 4.94065 e- representa valores ±1.79769 e+ ainda não definidos
representa o valor nulo
representa valores booleanos
representa números de ponto-flutuante IEEE 754 com precisão de 15 casas decimais (64 bits)
representa cadeias ordenadas (e indexáveis) de caracteres Unicode.
NaN Infinity -Infinity
Tipos e objetos
nat ivos
ECM AScript
Capítulo 2 – Sintaxe e estrutura
JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 2-
decimais, que é o formato default. Números de ponto-flutuante só podem ser representados na base decimal e obedecem ao padrão IEEE 754. A conversão entre representação de tipos numéricos é automática. Veja alguns exemplos de números e os caracteres utilizados para representá-los:
h = 0xffac; // hexadecimal: 0123456789abcdef flut = 1.78e-45; // decimal ponto-flutuante: .0123456789e- oct = 0677; // octal: 01234567 soma = h + 12.3 + oct - 10; // conversão automática O tipo number também representa alguns valores especiais, que são infinito positivo (Infinity), infinito negativo (-Infinity) e indeterminação (NaN - Not a Number). Booleans representam os estados de ligado e desligado através dos literais true e false. São obtidos geralmente como resultados de expressões condicionais. Strings são identificados por literais contidos entre aspas duplas ("...") ou simples ('...'). O texto entre aspas pode ser qualquer caractere Unicode. Tanto faz usar aspas simples como aspas duplas. Freqüentemente usa-se aspas simples quando um trecho de código JavaScript que requer aspas é embutido em um atributo HTML, que já utiliza aspas duplas:
A concatenação de strings é realizada através do operador “+”. O operador “+=” (atribuição composta com concatenação) acrescenta texto a um string existente. Qualquer número ou valor booleano que fizer parte de uma operação de concatenação será automaticamente transformado em string.
str1 = "Eu sou uma string"; str2 = str1 + ' também!'; str3 = str2 + 1 + 2 + 3; // str3 contém Eu sou uma string também! str1 += "!"; // mesmo que str1 = str1 + "!". Qualquer valor entre aspas é uma string , mesmo que represente um número. Qualquer valor lido a partir de um campo de formulário em uma página HTML ou janela de entrada de dados também é string. Para converter um número ou valor booleano em string basta utilizá-lo em uma operação de concatenação com uma string vazia:
a = 10; b = "" + a; // b contém a string “10” A conversão de strings em números não é tão simples. É preciso identificar a representação utilizada, se é ponto-flutuante, hexadecimal, etc. Para isto, JavaScript fornece duas funções nativas : parseInt( string ) e parseFloat( string ) que convertem strings em representações de número inteiro e ponto-flutuante respectivamente.
a = "10"; b = prompt("Digite um número"); // lê string document.write(a + b); // imprime “105”
Capítulo 2 – Sintaxe e estrutura
JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 2-
inicio , indice , abc5, _Me, ping_pong
são legais e podem ser usados como nome de funções e variáveis. As palavras listadas abaixo são utilizadas pela linguagem JavaScript e por isto são consideradas reservadas , não sendo permitido usá-las para definir identificadores para métodos, variáveis ou funções:
- break – sai de um loop sem completá-lo
- continue – pula uma iteração de um loop
- delete – operador que apaga um objeto (não existe em JavaScript 1.1)
- false – literal booleano
- for – estrutura de repetição for
- function – declara uma função JavaScript
- if , else – estrutura de controle condicional if-else
- in – usado dentro de um loop for para iterar pelas propriedades de um objeto
- new – cria uma nova cópia de um objeto a partir de um protótipo
- null – literal do tipo null
- return – retorna de uma função (pode retornar um valor)
- this – ponteiro para o objeto atual (ou elemento HTML atual)
- true – literal booleano
- typeof – operador que identifica o tipo de uma variável
- undefined – literal do tipo undefined
- var – declara uma variável
- void – operador que executa funções sem retornar valor
- while – estrutura de repetição while
- with – estabelece o objeto como default dentro de um bloco Como o formato de caixa-alta e caixa-baixa em JavaScript é significativo, palavras como This, Null, TRUE são identificadores legais (embora não sejam aconselháveis já que podem confundir). Nomes de objetos nativos, como String , Number , Date e propriedades globais do client-side JavaScript como window, document, location, parent, etc. não são consideradas palavras reservadas em JavaScript, mas seu uso deve ser evitado, uma vez que podem, além de confundir, provocar erros em programas que fazem uso desses objetos. Várias outras palavras também são reservadas em JavaScript, embora não tenham significado algum na linguagem (ECMA-262). São reservadas para uso futuro:
abstract do import short boolean double instanceof static byte enum int super case export interface switch catch extends long synchronized char final native throw class finally package throws const float private transient debugger goto protected try
Desenvolvendo Web Sites Interativos com JavaScript
2-8 JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha
default implements public volatile
Operadores e expressões
JavaScript possui várias classes de operadores. Operações de atribuição, aritméticas, booleanas, comparativas e binárias em JavaScript são realizadas da mesma forma que em outras linguagens estruturadas como C++ ou em Java. As estruturas de controle de fluxo também são as mesmas. Algumas outras operações são mais específicas à linguagem, como concatenação, criação e eliminação de objetos. A tabela abaixo relaciona todos os operadores de JavaScript:
Operadores aritméticos Operadores lógicos Operadores de bits
- n negação != diferente de & and ++n, n++ incremento^ == igual a^ |^ or --n, n-- decremento > maior que ^ xor
- multiplicação^ < menor que^ ~^ not / divisão^ >= maior ou igual a^ <<^ desloc. à esquerda % resto^ <= menor ou igual a^ >>^ desloc. à direita
- adição e conc.^ || or^ >>>^ desloc. à dir. s/ sinal
- subtração^ && and^ Operadores de objetos Operadores de atribuição (^)! not (^) new criação
= atribuição ?: condicional delete remoção
op = atribuição com^ ,^ vírgula^ typeof^ tipo do objeto operação op (^) void descarta o tipo A atribuição é usada para armazenar valores em variáveis. Ocorre da esquerda para a direita, ou seja, quaisquer operações do lado direito, mesmo de atribuição, são realizadas antes que a operação de atribuição à esquerda seja efetuada. O operador “=” representa a operação de atribuição. É possível também realizar a atribuição ao mesmo tempo em que se realiza uma outra operação aritmética ou binária usando os operadores compostos.
x = 1; // atribuição simples y += 1; // atribuicao com soma. Equivale a y = y + 1 ou y++ z /= 5; // atribuicao com divisao. Equivale a z = z / 5 O operador “+” tanto é usado para adição de números como para a concatenação de strings. Quando ambas as operações ocorrem em uma mesma instrução, a precedência é a mesma mas a associatividade (esquerda para a direita) beneficia a concatenação. Se ocorrer pelo menos uma concatenação à esquerda, todas as operações seguintes à direita serão concatenações mesmo que envolvam números:
texto = 4 + 5 + ":" + 4 + 5; // texto contém 9:
Desenvolvendo Web Sites Interativos com JavaScript
2-10 JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha
Todas as expressões JavaScript possuem um valor , que pode ser undefined, null, numero, booleano ou string. Expressões condicionais e comparativas sempre resultam em valor booleano (true ou false). O operador “=” é utilizado somente para atribuição. A comparação de igualdade é feita exclusivamente com o operador “==”.
Estruturas de controle de fluxo
As estruturas de controle de fluxo são praticamente as mesmas utilizadas em outras linguagens estruturadas populares. A sintaxe das principais estruturas em JavaScript é idêntica à sintaxe usada em C, C++ e Java.
if... else
A estrutura if... else é utilizada para realizar controle de fluxo baseado em expressões condicionais:
if (condição) { // instruções caso condição == true } else if (condição 2) { // instruções caso condição 2 == true } else { // instruções caso ambas as condições sejam false }
Exemplo:
if (ano < 0) { alert("Digite um ano D.C."); } else if ( ((ano % 4 == 0) && (ano % 100 != 0)) || (ano % 400 == 0)) { alert(ano + " é bissexto!"); } else { alert(ano + " não é bissexto!"); } A operação do if...else pode ser realizada também de uma forma mais compacta (e geralmente menos legível) através do operador condicional. A sua sintaxe é
expressão? instruções se expressão=true : instruções se expressão=false
Exemplo:
ano = 1994; teste = ((ano % 4 == 0) && (ano % 100 != 0)) || (ano % 400 == 0)); alert ( teste? ano + " não é bissexto!" : ano + " é bissexto!" );
Capítulo 2 – Sintaxe e estrutura
JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 2-
for
As estruturas for e while são usadas para repetições baseadas em condições. O bloco for contém de três parâmetros opcionais: uma inicialização, uma condição e um incremento. A sintaxe é a seguinte:
for (inicialização; condição; incremento) { // instruções a serem realizadas enquanto condição for true }
Por exemplo:
for (i = 0; i < 10; i = i + 1) { document.write("
Linha " + i); } Neste exemplo, a variável i é local ao bloco for (ela não é conhecida fora do bloco. Para que ela seja visível fora do bloco é preciso que ela seja declarada fora dele. A primeira coisa realizada no bloco for é a inicialização. É feita uma vez apenas. A condição é testada cada vez que o loop é reiniciado. O incremento é realizado no final de cada loop. Os elementos do for são todos opcionais. A mesma expressão acima poderia ser realizada da maneira abaixo:
i = 0; for (; i < 10;) { document.write("
Linha " + i); i++; } A única diferença entre esta forma e a anterior é que a variável i agora é visível fora do bloco for (não é mais uma variável local ao bloco): Uma instrução do tipo: for (;;) { document.write("
Linha"); }
é interpretada como um loop infinito. Loops infinitos em blocos
Capítulo 2 – Sintaxe e estrutura JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 2-
em 10. (Use o método document.write(string) e para imprimir os resultados dentro de uma tabela HTML).
2.2 Imprima um histograma (gráfico de barras) horizontal para representar uma tabela de cinco valores quaisquer (entre 0 e 100, por exemplo). Use um caractere como “#” ou “*” para desenhar as barras, através de estruturas de repetição (for ou while).
2.3 Repita o problema anterior usando tabelas HTML. Cada barra deverá ter uma cor diferente (use tabelas com células de cores diferentes e repita os blocos para cada barra). Veja a figura abaixo (à esquerda). Para uma solução usando vetores (que serão apresentados no próximo capítulo), veja o arquivo exemplos2.html.
2.4 Escreva uma aplicação que imprima o desenho abaixo, à direita, no browser (use blocos for em cascata e varie o parametro SIZE de ou use folhas de estilo^2 ).
2.5 Repita o exercício anterior fazendo com que cada letra seja de uma cor diferente (varie o parametro COLOR de ou use folhas de estilo^3 ).
(^2) ... muda o tamanho da fonte para 24 pontos. (^3) ... muda a cor do texto para vermelho. Pode-se também usar nomes de cores.
