Apostila de JavaScript, Notas de estudo de Sistemas de Informação

Baixe Apostila de JavaScript e outras Notas de estudo em PDF para Sistemas de Informação, somente na Docsity!

Javascript

Autor:

Roberson Luiz

1 Introdução

O objetivo deste material é apresentar a linguagem Javascript, muito

utilizada atualmente, em conjunto com HTML, para construir páginas dinâmicas e interfaces de aplicações no ambiente Web. A partir deste estudo, espera-se posicionar a tecnologia Javascript no

contexto do desenvolvimento Web, a fim de que desenvolvedores conheçam o potencial das linguagens interpretadas pelos navegadores.

2 Javascript

2.1 O que é Javascript

Javascript é uma linguagem de script orientada a objetos, utilizada para desenvolver aplicações cliente para Internet/Intranet. Ela foi criada pela Netscape a fim de expandir a funcionalidade de seu popular browser: o Navigator.

2.1.1 CARACTERÍSTICAS BÁSICAS

Javascript é uma linguagem de script (scripts são “miniprogramas”

interpretados e voltados para execução de tarefas específicas) com uma sintaxe bastante similar a C, C++, Pascal e Delphi. Os comandos e funções de Javascript são inseridos dentro de um

documento da Web, junto com tags HTML e texto. Quando o navegador de um usuário acessa este documento, ele formata a página, executando o programa nela inserido. Para acessar uma página que possui scripts, o navegador deve ser

capaz de interpretar a linguagem. Javascript é uma linguagem baseada em objetos. Uma linguagem baseada

em objetos é uma linguagem orientada a objetos com um conjunto de objetos já embutidos. Sempre que algo acontece em uma página Web, ocorre um evento. Eventos

podem ser qualquer coisa – um botão recebe um clique, o mouse é arrastado, uma página é carregada, um formulário é enviado, e assim por diante. Javascript é uma linguagem dirigida por eventos, no sentido de que é projetada para reagir

quando um evento ocorre. A linguagem Javascript foi projetada para manipular e apresentar informação através de um navegador. Ela não é capaz de recuperar informações

de outro arquivo ou salvar dados em um servidor da Web, ou no computador do usuário. Isto significa que não é possível escrever um programa Javascript que,

por exemplo, varra os diretórios de um computador, lendo ou apagando arquivos do usuário.

Javascript é uma linguagem independente de plataforma, ou seja, o código escrito nesta linguagem não depende de uma plataforma específica (Windows,

Macintosh, UNIX, etc), depende apenas do navegador que a interpreta. Dessa forma, quer o usuário tenha um navegador para Windows, Macintosh ou UNIX, o código Javascript será executado sem que nenhuma adaptação seja necessária.

2.1.2 O QUE JAVASCRIPT NÃO É

Ainda é muito comum alguém confundir a linguagem Javascript com a

linguagem Java, mas, atenção, Javascript não é Java. Java (desenvolvida pela Sun Microsystems) é uma linguagem de programação orientada a objetos completa, que pode ser usada para projetar aplicações isoladas (que não exigem um browser

para rodar) ou mini-aplicações (applets).

Principais diferenças entre Javascript e Java:

− Javascript é baseada em objetos - tem seus próprios objetos embutidos. Java é orientada a objetos – os objetos são construídos a partir de classes; − código Javascript é embutido dentro de um documento HTML como texto simples. Applets Java são referenciados a partir de um documento, mas o código é mantido em um arquivo separado (em um formato binário); − Javascript é identificada em um documento HTML através da tag

documento). Colocar scripts dentro da tag faz com que seja possível criar, dinamicamente, partes de seu documento (exibindo, por exemplo, a hora).

A sintaxe do elemento

A tag

• Criando o primeiro script

O exemplo abaixo imprime a frase “Bom dia!” na página. Observe que, apesar de

não existirem elementos entre as marcações e , esta frase é exibida. Isto ocorre porque a função document.write() instrui o navegador a colocar o que estiver entre apóstrofos na página.

• Criando o segundo script

Uma das razões de utilizar Javascript é a possibilidade de montar um texto para ser exibido, incluindo valores de variáveis que podem ser inseridos pelo usuário.

var nome nome = window.prompt("Digite o seu nome:"); document.write("Bom dia, " + nome + "!");

Neste ponto, é importante lembrar que nem todos os navegadores

interpretam Javascript. Para evitar resultados indesejados (por exemplo, listagem do código da função Javascript que deveria ser interpretada), usam-se as marcações de comentários “”, conforme exemplo a seguir.

Os eventos de mouse disponíveis são: OnClick, OnFocus, OnBlur, OnChange, OnSelect, OnSubmit e OnMouseOver. Eles exigem a interação do usuário (através

do mouse ou não) para serem ativados.

2.4.1 ONLOAD

Este evento é ativado após a página HTML ser completamente carregada.

Ele pode ser associado às tags ou .

Exemplo:

Veja que interessante utilização do evento OnLoad.

2.4.2 ONUNLOAD

Este evento é ativado após a página HTML ser abandonada (seja através do clique sobre algum link, ou sobre os botões de avanço/retrocesso do browser).

Ele pode ser associado às tags ou . Exemplo:

Veja que interessante utilização do evento OnUnLoad.

2.4.3 ONCLICK

O evento mais básico de mouse é tratado pelo manipulador OnClick. Este evento é ativado sempre que se dá um clique sobre um objeto que aceita evento

de clique de mouse. Objetos que aceitam um evento OnClick são links, caixas de verificação e botões.

Exemplo:

Link comum

Radio Checkbox

2.4.4 ONFOCUS

O foco ocorre quando um objeto torna-se o item em foco. Isto acontece

quando o usuário clicar ou alternar para um objeto específico na página. Este evento pode ser associado aos objetos text, password, textarea e select (definidos

pelas tags , ).

Exemplo:

function mudou2() { document.form1.completo.value=document.form1.completo.value

• " ” + document.form1.sobrenome.value; }

Nome:

Sobrenome:

Nome completo:

2.4.7 ONSELECT

Este evento é ativado quando o usuário seleciona (deixa em destaque)

parte do texto em um dos objetos aos quais está associado. São eles: text, password e textarea (definidos pelas tags e Exemplo:

Campo input texto:

Campo input senha:

Campo textarea:

2.4.8 ONSUBMIT

Este evento é ativado no momento de enviar os dados do formulário. Ele é associado ao objeto form (definido pela tag ).

Exemplo:

Campo 1: Campo 2:

2.4.9 ONMOUSEOVER

Este evento é ativado quando o ponteiro do mouse passa sobre um objeto

do tipo links ou botões.

Exemplo:

Passe o mouse sobre este link

3 Construções de Javascript

3.1 Conceitos básicos de programação

3.1.1 CONSTRUÇÃO DE NOMES

Javascript apresenta algumas restrições quanto ao nome de variáveis/funções:

• não é permitido colocar espaço em branco em um nome;
• não é permitido incluir um hífen (“-”) em um nome;
• não é permitido colocar os seguintes caracteres em um nome:. , ; “ ‘?
• embora seja possível usar dígitos em um nome, ele precisa começar com uma letra;
• não é permitido utilizar, como nome de uma nova variável/função, alguma das palavras reservadas de Javascript.

Segue a relação de palavras que não podem ser usadas como nomes de

variáveis ou funções em Javascript:

abstract, boolean, break, byte, case, catch, char, class, const, continue, default, do, double, else, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, nt, interface, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, var, void, while, with.

3.1.2 DECLARAÇÃO DE VARIÁVEIS

Cada variável tem que ser declarada como global ou local. A única diferença entre estes dois tipos em Javascript é onde elas estão localizadas dentro

do código. É possível definir variáveis antes de atribuir um valor a elas, ou no momento em que fizer a atribuição.

• Variáveis Locais

São definidas dentro do corpo de uma função. Elas são válidas apenas dentro

do corpo da função onde foram definidas (escopo limitado).

Exemplo:

• Booleano: true ou false (sem aspas);
• String: conjunto de caracteres limitados por aspas/apóstrofos. Um string

exige um par de aspas (ou apóstrofos) para identificá-lo como string;

• Nulo: null (palavra chave que denota o valor nulo).

3.1.4 CARACTERES ESPECIAIS

Alguns caracteres especiais que são permitidos em valores do tipo string:

• \b: retrocesso (backspace);
• \f: nova página (form feed);
• \n: nova linha (line feed);
• \r: retorno de carro (carriage return);
• \t: caracter de tabulação (tab).

3.1.5 EXPRESSÕES

Expressão é um conjunto de literais (constantes), variáveis e operadores que, avaliados, resultam em um único valor (número, string ou booleano).

Existem 3 (três) tipos de expressões em Javascript:

• expressões aritméticas: resultam em um número;
• expressões de string: resultam em uma sequência de caracteres (string);
• expressões lógicas: resultam em verdadeiro ou falso, representados, respectivamente, pelas palavras reservadas true e false.

3.1.6 OPERADORES

Operadores são símbolos especiais que controlam como uma expressão deve ser avaliada. Um operador pode ser binário - exige dois operandos; ou

unário - exige apenas um operando (antes ou depois do operador). Os operadores podem, ainda, ser classificados de acordo com o tipo dos

operandos que manipulam: operadores aritméticos, operadores de comparação, operadores de string, operadores lógicos, operadores bit a bit e operadores de atribuição.

• OPERADORES ARITMÉTICOS

Operadores aritméticos constróem expressões aritméticas. Eles recebem e retornam números.

A tabela 1 mostra os operadores aritméticos básicos de Javascript.

Operador Função

• Soma

• Subtração

• Multiplicação / Divisão

Tabela 1 – Operadores aritméticos básicos

Existem outros operadores aritméticos em Javascript. São eles:

• Módulo (%) Retorna o resto da operação de divisão inteira entre os operandos. Exemplo: 22 % 5 => 2
• Incremento (++) É uma forma abreviada de adicionar 1 a um operando (o operando deve ser uma variável). Exemplo: operando++ => operando = operando + 1

O operador de incremento pode ser escrito como operando++ ou ++operando. O lado em que o operador está controla quando 1 é adicionado ao operando (com respeito ao resto da expressão). Se ele é usado depois do operando, retorna o valor do operando antes de incrementá-lo. Por exemplo, se x=3, a declaração y=x++ coloca primeiro o valor 3 em y e, depois, incrementa x para 4. Se, por outro lado, o operador de incremento for colocado antes do operando, ele retorna o valor do operando depois de o operando ser incrementado. O código y=++x primeiro incrementa o x para 4 e, então, coloca o valor 4 em y.

• Decremento (--) É uma forma abreviada de subtrair 1 de um operando (o operando deve ser uma variável). Exemplo: operando-- => operando = operando – 1

De forma semelhante ao operador de incremento, o operador de decremento pode ser escrito como operando-- ou --operando.

• Negação Unária (-)

Este operador nega o seu operando. Exemplo: x = 4 ; y = -x => y = -

• OPERADORES DE COMPARAÇÃO