Curso de Programação em Javascript e HTML, Notas de estudo de Análise de Sistemas de Engenharia

Baixe Curso de Programação em Javascript e HTML e outras Notas de estudo em PDF para Análise de Sistemas de Engenharia, somente na Docsity!

www.baixebr.blogspot.com

Desenvolvimento, aplicações e referências de acordo com as normas do W3C

Índice

PARTE I: Introdução ao JavaScript

• 1 – Introdução PARTE I – Introdução ao JavaScript
• 2 – Inserir JavaScript numa página da Web
  • O elemento
    Desenvolvimento, aplicações e referências de acordo com as normas do W3C O JavaScript é uma linguagem de programação simples criada para dar mais interatividade e maior funcionalidade às páginas da Web. Tendo sido inicialmente desenvolvida pela Netscape, a linguagem JavaScript acabou por dar origem à especificação técnica ECMAScript, que é um padrão oficial reconhecido pela indústria. Apesar desta 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. 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 com que o conteúdo é apresentado ao usuário e como pode ser manipulado.

2. Inserir JavaScript numa página da Web

2.1 O elemento

Aqui colocamos o conteúdo da página em HTML

Repare que no final da linha de código colocamos o caractere ; o qual dá ao interpretador de JavaScript a indicação de que a instrução termina nesse local. O JavaScript não nos obriga a terminar as instruções deste modo, bastando que mudemos de linha para que ele perceba que a instrução chegou ao fim. No entanto isso torna mais difícil a localização dos erros e pode também contribuir para gerar mais erros. É conveniente que os principiantes terminem todas as instruções com o caractere ; e, se preferirem, só deixem de o fazer quando se sentirem completamente à vontade com a linguagem. Graças ao JavaScript podemos fazer com que os objetos gráficos apresentados na página (como por exemplo uma imagem, um botão ou uma ligação de hipertexto) respondam dinamicamente às ações do usuário. Para que isso aconteça basta adicionar um novo atributo ao elemento responsável pela apresentação desse objeto e escrever o código que ao ser executado dará origem ao

Desenvolvimento, aplicações e referências de acordo com as normas do W3C // Este é 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 */

3.2 Blocos de código

Quando temos que executar funcionalidades não triviais é quase sempre necessário executar seqüências de instruções compostas por várias linhas. Se essas seqüências tiverem de ser executadas condicionalmente (veja por exemplo a descrição da instrução if mais à frente), ou se formarem uma função, então elas constituem um bloco e têm de ser agrupadas. Isso se consegue colocando-as entre chaves ({ }.) { // isto é um bloco de código var i = 0; var j = i * 3; }

4. Variáveis

O que são as Variáveis? As variáveis são objetos que servem para guardar informação. Elas permitem- nos dar nomes a cada um dos fragmentos de informação com que temos que lidar. Se esses nomes forem bem escolhidos fica fácil saber onde é que se deve guardar um determinado pedaço de informação e onde é que se pode ir buscar a informação que se guardou antes. Para evitar erros e aumentar a produtividade é importante escolher nomes que descrevam aquilo que cada variável guarda. Assim, se escrevermos um programa que divide dois números é recomendado chamar dividendo, divisor e quociente os números envolvidos na operação. Escolhas como por exemplo n1, n2 e n3, apesar de funcionarem, provocam confusão e dão origem a erros difíceis de detectar porque tornam o código mais difícil de ler. É importante que saibamos quais as regras que temos de respeitar quando escolhemos um nome para uma variável:

• Todos os nomes têm que começar com uma letra ou com o caractere _.
• Os restantes caracteres que compõem o nome podem igualmente conter números. Nunca se esqueça que para o JavaScript letra maiúscula e letra minúscula são coisas diferentes e que, por exemplo, as variáveis variavel1, Variavel1 e vaRiavel1 são três objetos distintos.

4.1 Declaração de Variáveis

Ao ato de criar uma variável se dá o nome de declaração. As variáveis que são declaradas fora de qualquer função (mais à frente iremos ver exemplos de declarações de variáveis e o que são funções) 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 será uma variável local porque só pode ser utilizada dentro dessa função.

Desenvolvimento, aplicações e referências de acordo com as normas do W3C Se tentarmos acessar uma variável local fora da função em que ela foi declarada será gerado 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 utilizada. A seguir temos alguns exemplos de declaração de variáveis: dividendo = 12; divisor = 3; sabor = "Doce"; pi = 3.14159; Nestes exemplos todas as variáveis declaradas serão variáveis globais. Se quisermos declarar variáveis cuja existência se limite a uma pequena seção do código teremos de usar a declaração var, assim: var dividendo = 12; Se usarmos esta declaração fora de qualquer função então, porque a variável é declarada na base da estrutura de código, ela será global. Temos assim que a declaração var serve para limitar o contexto em que a variável existe e que:

• As variáveis declaradas sem a declaração var são variáveis globais;
• As variáveis declaradas usando a declaração var existem apenas no contexto em que foram definidas. Antes de começar a escrever código em JavaScript é importante planejar o modo como este será organizado. Deve-se começar a identificar os dados que vão ser utilizados. A seguir escolhem-se os nomes das variáveis que vão guardar esses dados e só depois é que se começa a escrever o código propriamente dito.

4.2 Os valores das Variáveis

A linguagem JavaScript é capaz de reconhecer três tipos de dados:

• Números, como por exemplo 12 ou 3.
• Texto (variáveis de tipo String), como por exemplo: "Seja Bem Vindo(a)!"
• Valores lógicos (true ou false)
• null, que é uma palavra especial que significa que a variável em causa não guarda qualquer valor, está vazia. Como iremos ter oportunidade de aprender neste e nos cursos seguintes, usando apenas estes tipos de dados podemos executar muitas ações úteis nas nossas páginas da Web.

4.3 Conversões de Valores

A linguagem JavaScript exige pouco trabalho ao programador para definir o tipo de dados que uma variável deve guardar. É o próprio interpretador de JavaScript que em função dos dados que recebe decide se estes representam um número, texto (string), um valor lógico, ou nada (null). Assim, se escrever: var resposta = 42; o interpretador decidirá guardar internamente a variável resposta como um número inteiro, mas se escrevermos:

Desenvolvimento, aplicações e referências de acordo com as normas do W3C Na primeira linha usamos a expressão literal "visitante" para dar um valor inicial à variável nome. Na segunda linha usamos uma expressão literal numérica para dar um valor à variável hora. O resto do código usa as expressões literais 12 e 13 para determinar a parte do dia (manhã, tarde ou hora de almoço) e cumprimentar usando o texto (expressão literal) mais adequado.

5.2 Números inteiros

Os números inteiros podem ser expressos na forma decimal (base 10), hexadecimal (base 16) ou octadecimal (base 8). Um número decimal consiste numa seqüê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 octadecimal. 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 octadecimal 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. Exemplos de números inteiros são: 42, 052, 0X2A, que representam todos o valor decimal 42. No exemplo seguinte as variáveis i, j, k possuem todas o mesmo valor, apesar de serem usadas bases diferentes para as inicializar:

Desenvolvimento, aplicações e referências de acordo com as normas do W3C

5.3 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 fracionária. Os números 21.37 e -0.0764 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 -7645.4532 é igual a -7.64532 multiplicado por 10 elevado a 3, e escreve-se como -7.6454532E3, em que E3 representa 10 elevado a 3. Um outro exemplo é o número 0.00045431, que é representado na forma 4.5431E-4, ou seja 4.5431 multiplicado por 10 elevado a -4. Esta representação é construída automaticamente pela máquina, o programador pode escrever o número na forma que mais lhe agradar.

5.4 Valores lógicos (booleanos)

Estas expressões podem assumir apenas dois valores: true (verdadeiro) e false (falso).

5.5 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 apóstrofos ('), como por exemplo 'esta é outra expressão de texto'. Se começarmos a expressão com aspas temos a obrigação de usar aspas para a terminar, e se a iniciarmos com um apóstrofo temos de usar outro apóstrofo para a terminar. Além dos caracteres normais, as expressões de texto podem conter os caracteres especiais apresentados na lista seguinte: Caractere Significado \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 acionando a tecla indicada na segunda coluna. Assim o caractere \b equivale a acionar a tecla backspace (apagar o caractere à esquerda). O caractere \n provoca uma mudança de linha tal como a tecla "enter". O caractere \ é usado como prefixo dos outros caracteres especiais, o que faz também dele um caractere especial. Por isso, para obtermos este caractere temos de temos escrevê-lo duas vezes (\). Se o escrevermos uma única vez ao invés de o obtermos estaremos tentando introduzir um outro caractere especial e o resultado será diferente do que pretendemos.

Desenvolvimento, aplicações e referências de acordo com as normas do W3C

6. Cadeias de variáveis (Array)

Uma cadeia de variáveis (objeto Array) é um objeto capaz de guardar muitos valores, tantos quanto a memória disponível na máquina permitir. Cada uma das variáveis que compõem o array possui um índice. Ilustremos isto com um 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 declaramos o Array e atribuímos-lhe os valores numa única operação. Já no segundo caso primeiro declaramos o Array e só depois definimos os valores que ele deve conter. Neste caso temos que a variável frutas_tropicais[2] 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, como se mostra a seguir:

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 objetos, 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:

Desenvolvimento, aplicações e referências de acordo com as normas do W3C 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.

7. Operadores

A linguagem JavaScript possui muitos operadores de diversos tipos. Aqui iremos abordar apenas os aspectos mais básicos dos operadores disponíveis.

7.1 Operadores de atribuição de valor

Uma das coisas que os operadores podem fazer é fornecer um valor àquilo que estiver à sua esquerda. Se o que está à esquerda for uma variável então o valor dela passará a ser aquilo que o operador forneceu, se for outro operador o valor fornecido será usado como operando. Os operadores mais conhecidos são as quatro operações aritméticas básicas (adição, subtração, multiplicação e divisão.) Para estes a linguagem JavaScript define as seguintes versões curtas: Versão curta Significado x+=y x=x+y x-=y x=x-y x=y x=xy x/=y x=x/y Repare que aqui o sinal = não representa a igualdade matemática. Ele serve apenas para indicar que a variável que está à sua esquerda deve passar a ter um valor igual ao valor da expressão que está à sua direita. Se tivermos x=5 e y=7 a expressão x=x+y não representa uma igualdade matemática mas sim a indicação que o valor de x deve passar a ser igual à soma do valor que tem atualmente com o valor de y. Neste caso x passaria a valer 12.

7.2 Operadores de comparação

Um operador de comparação compara os valores que lhe são fornecidos (que designamos por operandos) e retorna um valor lógico que indica se o resultado da comparação é verdadeiro ou falso. Os valores que recebe para analisar podem ser números ou variáveis de texto (string). Quando atuam sobre variáveis de texto, as comparações baseiam-se na forma como os caracteres estão ordenados seqüencialmente. Esta ordenação baseia-se na ordem alfabética. A lista seguinte apresenta estes operadores. Operador Descrição Exemplo Igualdade (==) Verifica se os dois operandos são iguais x==y dá true se x igualar y Desigualdade (!=) Verifica se os operandos são desiguais x!=y dá true se x não for igual a y 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 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 Menor do que Verifica se o operando da esquerda é x Desenvolvimento, aplicações e referências de acordo com as normas do W3C utilização dos objetos da linguagem JavaScript é aqui tratada de forma rápida. O estudo aprofundado deste tópico será feito no Curso de Programação em JavaScript. Objetos definidos no padrão ECMAScript A linguagem JavaScript é uma implementação do padrão ECMAScript. Esse padrão define as regras de sintaxe que estamos estudando e um conjunto mínimo de objetos que fazem do ECMAScript uma verdadeira linguagem de programação, mas não define os objetos que permitem manipular e interagir tanto com o browser como com as páginas da Web. Para ser verdadeiramente útil o JavaScrit tem de complementar o ECMAScript com objetos adicionais: Document Object Model (DOM) O W3C (World Wide Web Consortium) definiu o padrão DOM para padronizar a forma como os browsers e as aplicações da Web manipulam e interagem com as páginas da Web. Todos os browsers modernos implementam estes padrões. Apesar de essas implementações serem geralmente incompletas, elas são suficientes para que possamos programar quase tudo numa forma que funciona em todos os browsers dominantes (MSIE 6 e superior, Mozilla/Netscape e Opera.) Outros objetos úteis Quando a linguagem JavaScript surgiu, os seus criadores definiram aqueles objetos que lhe pareceram importantes. Dentre eles alguns foram incorporados pelo padrão ECMAScript, outros foram de alguma forma incorporados pelo DOM (geralmente com modificações), e outros não estão presentes em qualquer padrão oficial mas são suportados universalmente, o que faz deles padrões de fato.

8.1 Exemplos práticos com objetos

Dois dos objetos que ficam imediatamente disponíveis quando carrega um documento no browser são: o objeto document, que nos permite manipular e interagir com a página da Web, e o objeto window, que nos permite controlar a janela do browser que contém a página. O objeto window possui vários métodos. Entre eles temos os métodos close(), alert(), confirm() e prompt(), com os quais podemos fechar a janela do browser, apresentar avisos ao usuário e pedir-lhe para nos dar uma resposta ou escrever alguma coisa. O código:

Desenvolvimento, aplicações e referências de acordo com as normas do W3C faz aparecer uma janela com um aviso para o usuário. A notação por pontos significa que estamos chamando o método alert() pertencente ao objeto window. Neste caso podíamos ter escrito apenas alert(mensagem) e omitido a parte window (o browser já sabe que o método alert pertence ao objeto window). O objeto document contém uma representação da página HTML. Cada um dos elementos que compõem a página (formulários, parágrafos, imagens, links, etc) podem ser lidos e manipulados utilizando este objeto. Depois de uma página estar carregada, o código seguinte: alert("A segunda imagem desta página foi carregada a partir de: " + document.images[1].src); mostra a origem (src) de uma imagem. Repare que com o objeto document temos de usar sempre a notação por pontos, não sendo aceitas abreviações.

9. Definir uma Função

As funções permitem-nos agrupar várias linhas de código que realizam um determinado trabalho, dar-lhe um nome e executá-las chamando-as por esse nome. O exemplo seguinte define uma função:

Desenvolvimento, aplicações e referências de acordo com as normas do W3C

Neste exemplo a hora é de antes do almoço e será apresentada uma janela que tem escrito “Vamos passear”. Se a hora fosse 12 ou mais seria mostrado o texto “Vamos para a mesa”. Uma instrução if não precisa de ter associada a si uma instrução else. Quando isso acontece se a condição não se verificar não será executado qualquer código alternativo.

11. Executar código repetidamente

Um dos recursos mais poderosos no arsenal de qualquer linguagem de programação é a capacidade para repetir a realização de tarefas de uma forma simples. Para isso definem-se ciclos de repetição dentro dos quais se coloca o código que se pretende executar repetidamente.

11.1 Ciclos for

Um ciclo for consiste num conjunto de três expressões contidas entre parêntesis, separadas pelo caractere ; (ponto e vírgula) e pelo código a executar em cada um dos ciclos. Normalmente esse código estará contido entre chaves para formar um bloco, mas se consistir numa única linha não é preciso usar as chaves. A primeira das expressões do ciclo for declara a variável a usar como índice (funciona apenas como contador) e a inicia. A segunda expressão declara uma condição que deve ser testada sempre que se inicia um novo ciclo. Se essa condição der false como resultado o ciclo pára e o código definido abaixo não voltará a ser executado. A terceira expressão serve para atualizar o valor do índice no final de cada ciclo. Ilustremos isto com um exemplo simples:

Desenvolvimento, aplicações e referências de acordo com as normas do W3C soma = 0; for(var i = 0; i < 3; i++) { soma += i; document.write("O valor do índice é agora de " + i

• "
  "); } -->

Este pedaço de código começa por definir uma variável (global) chamada soma atribuindo-lhe o valor zero. O ciclo for define uma variável de índice (var i = 0) e verifica se a condição i < 3 é cumprida. Se o resultado da verificação for true será executado o código que se encontra entre as chaves mais abaixo, o qual adiciona i à variável soma e apresenta uma mensagem informando sobre o valor atual da variável i. Depois é executada a terceira instrução do ciclo (i++), a qual soma uma unidade ao valor do índice i e dá-se início a um novo ciclo. Este começa testando de novo o respeito pela condição i < 3. Se o resultado for true volta a executar o código que está entre as chaves com o valor atualizado de i. Isto se repete até que i < 3 dê false, o que termina a execução do ciclo for. O exemplo seguinte é mais elaborado e executa um ciclo que percorre todos os elementos de um array de nomes e destaca aqueles que começam com a letra H.