Apostila Linguagem JavaScript para Web - EFG

Linguagem Javascript
para Web
1-Autor
Ricardo André Naka 37 anos, reside em Goiânia, bacharel em Ciência da Computação

pela Anhanguera Educacional em 2012 em Campinas-SP, especialista em Gestão e Segurança
da Informação pela UEG Trindade – GO, trabalha atualmente como Professor Autor e Regente
nas Escolas do Futuro, Professor Universitário, atuando nos cursos tecnólogos e de graduação
na UNIALFA, além de fornecer Consultoria em Informática.
Desenvolve projetos ligados à informática educacional, sendo aplicados em escolas
particulares de Goiânia, incentivando crianças e adolescentes a desenvolverem de forma lúdica a
aprendizagem escolar.
É professor regente e coordenador de cursos técnicos voltados para a área de informática,
com mais de 16 anos de experiência, atuando em cursos profissionalizantes que visam a inserção
do aluno no mercado de trabalho.
Atualmente desenvolve websites e plataformas voltadas para o ensino a distância, cujo
objetivo principal é oferecer um ensino de qualidade, dinâmico, completo e eficiente através de
meios tecnológicos como a internet, vídeos aulas e materiais didáticos que forneçam uma
experiência de autoaprendizagem ao aluno.
2
Sumário
1-Autor 2
2-Introdução 4
3- 1° Capitulo- Introdução a área de Interação Humano Computador. 5
4- 2° Capitulo – Introdução ao Design de Páginas Web. 09
5. Referências Bibliográficas 51
3
2-Introdução
O Componente curricular de Linguagem Javascript para Web fornece a capacidade de

programação de páginas web, sendo a principal linguagem na comunidade de desenvolvimento
web.
Ao longo do Componente de Linguagem Javascript para Web, encontraremos exercícios
práticos e questionários com todas as orientações necessárias para a realização das atividades
para fixar o conteúdo e praticar os conhecimentos que serão abordados.
Para que você obtenha sucesso e aprendizagem satisfatória ao longo do componente
procure seguir algumas dicas para o estudo dirigido no ensino a distância.
Crie uma rotina diária de estudos, separe 20 minutos para estudar de forma ordenada os
módulos deste material, organizando o seu ambiente de estudos sem maiores obstáculos que
impeçam a sua concentração, assim como formas de distração que são as redes sociais, o seu
celular ou até mesmo qualquer outro barulho ou entretenimento que tome a sua atenção. Por fim,
utilize métodos de memorização e realize os exercícios para fixação do conteúdo.
Bons Estudos!
4
3 - 1° Capítulo - Introdução ao Javascript.
Também chamada de JS, é a linguagem de criação de scripts para a Web, é utilizada por bilhões de
páginas para adicionar funcionalidades, verificar formulários, comunicar com servidores, e tudo
relacionado a scripts características da usabilidade com o usuário.
Originalmente criada na Netscape por Brendam Eich em 1994, a Microsoft tem o Visual Basic com
linguagem similar de scripts. A Java da empresa Sun surge então como potencial e desenvolve o
Javascript para programadores não profissionais.
Java e Javascript são linguagens distintas e completamente desconexas. JavaScript não permite a
criação de applets nem de aplicativos. JavaScript reside dentro de documentos HTML e pode prover
diferentes níveis de interatividades não suportados pelo HTML sozinho. As diferenças chaves em relação
ao Java:
- Java é uma linguagem de programação;
- JavaScript é uma linguagem de script;
- Aplicativos Java são executados pela máquina virtual Java;
- Scripts JavaScript são executados pelos browsers;
- Java é compilado;
- JavaScript é texto puro;
- Cada tecnologia requer um plug-in diferente.
Atualmente, o maior mantedor da linguagem é a Fundação Mozilla, onde encontramos ótimos

materiais e tutoriais sobre a comunidade JavaScript. https://developer.mozilla.org/en/docs/JavaScript.
Com o tempo, muitas funcionalidades foram criadas em forma de Script para os browser e foram
“incorporadas” ao JavaScript: Java Script hoje é um conjunto de funcionalidades e, até mesmo, diferentes
padrões. Os principais padrões a destacar são:
- A Linguagem Núcleo: ECMAScript (Versão 7, de junho de 2016). Padrão mantido por ECMA
International Associação Industrial de padronização de tecnologias da Informação e Comunicação.
- DOM: Document Object Modelo: Define a Interface da Linguagem com o Browser, padrão este
mantido pro W3C.
No início da Internet as páginas eram pouco ou nada interativas, eram documentos que
apresentavam seu conteúdo exatamente como foram criados para serem exibidos no navegador.
Existiam algumas tecnologias para a geração de páginas no lado do servidor, mas havia
limitações no que diz respeito a como o usuário consumia aquele conteúdo. Navegar através de
5
links e enviar informações através de formulários era basicamente tudo o que se podia fazer.
Visando o potencial da Internet para o público geral e a necessidade de haver uma interação
maior do usuário com as páginas, a Netscape, criadora do navegador mais popular do início dos
anos 90, de mesmo nome, criou o Livescript, uma linguagem simples que permitia a execução de
scripts contidos nas páginas dentro do próprio navegador. Aproveitando o iminente sucesso do
Java, que vinha conquistando cada vez mais espaço no mercado de desenvolvimento de
aplicações corporativas, a Netscape logo rebatizou o Livescript como JavaScript num acordo com
a Sun para alavancar o uso das duas.
A então vice-líder dos navegadores, Microsoft, adicionou ao Internet Explorer o suporte a
scripts escritos em VBScript e criou sua própria versão de JavaScript, o JScript. JavaScript é a
linguagem de programação mais popular no desenvolvimento Web. Suportada por todos os
navegadores, a linguagem é responsável por praticamente qualquer tipo de dinamismo que
queiramos em nossas páginas. Se usarmos todo o poder que ela tem para oferecer, podemos
chegar a resultados impressionantes. Excelentes exemplos disso são aplicações Web complexas
como Gmail, Google Maps e Google Docs.
O JavaScript, como o próprio nome sugere, é uma linguagem de scripting. Uma linguagem
de scripting é comumente definida como uma linguagem de programação que permite ao
programador controlar uma ou mais aplicações de terceiros. No caso do JavaScript, podemos
controlar alguns comportamentos dos navegadores através de trechos de código que são
enviados na página HTML. Outra característica comum nas linguagens de scripting é que
normalmente elas são linguagens interpretadas, ou seja, não dependem de compilação para
serem executadas. Essa característica é presente no JavaScript: o código é interpretado e
executado conforme é lido pelo navegador, linha a linha, assim como o HTML. O JavaScript
também possui grande tolerância a erros, uma vez que conversões automáticas são realizadas
durante operações. Como será visto no decorrer das explicações, nem sempre essas conversões
resultam em algo esperado, o que pode ser fonte de muitos bugs, caso não conheçamos bem
esse mecanismo. O script do programador é enviado com o HTML para o navegador, mas como
o navegador saberá diferenciar o script de um código html? Para que essa diferenciação seja
possível, é necessário envolver o script dentro da tag <script>.
Para inserir códigos JavaScript, iremos fazê-lo em uma Tag HTML apropriada:
- <script>
6
- </script>
JavaScript Externo: Da mesma forma como nos arquivos CSS, podemos deixar funções e
comandos JavaScript em arquivos externos, estes arquivos dever tem a extensão .JS
Para importar:
<script src=”meuScript.js”></script>
Hello World
Crie uma nova página.
Dentro da seção <body> insira o trecho:
<script>
document.write(“Hello World!”);
</script>
Neste caso, o trecho “escrito” pelo JavaScript, será incorporado ao HTML apenas em sua
construção.
Classe document: Propriedades de Exemplo:
- title – Define ou retorna o Título da Página;
- URL – Retorna o URL completo da página;
Métodos de Exemplo:
- write() – Escreve texto no documento;
- writeln() – Escreve uma linha de texto no documento.
Hello World
Na página criada anteriormente:
- Defina um título: “JavaScript Hello World!”;
- Altere o script:
<script>
Document.write(“<h2>”+document.title+”</h2>”);
</script>
O que é necessário para programar em Javascript? Apenas um navegador, como o Mozilla

Firefox, Internet Explorer, Google Chrome e Safari, e um editor de texto, como o Bloco de Notas
(Microsoft Windows), GEdit (GNU/Linux com a interface Gnome) ou Vi (Utilizado em grande parte
7
das distribuições GNU/Linux), pode ser utilizado para programar em Javascript. Recomendo que
utilize um editor que tenha highlight (utiliza cores para mostrar diferentes elementos no
programa), como o Notepad++ (http://notepad-plus.sourceforge.net/), para que a programação
seja mais fácil e você possa encontrar erros mais rapidamente. É necessário também salvar o
arquivo com a extensão “.htm” ou “.html” para que o navegador execute o que está escrito no
arquivo.
Entendendo e Conhecendo o JavaScript:

- https://youtu.be/BXqUH86F-kA
- https://youtu.be/uzEhd3Lugik
O que o JavaScript é capaz de fazer?
- https://youtu.be/Ptbk2af68e8
- https://youtu.be/rUTKomc2gG8
Instalação das Ferramentas:
- https://youtu.be/FdePtO5JSd0?t=1560
Site oficial para download do VSCode e NodeJS
- https://code.visualstudio.com/download
- https://nodejs.org/en/
8
4 - 2° Capítulo – Linguagem JavaScript.
Inserir JavaScript numa página da Web

O elemento <script>
Os browsers capazes de executar código escrito em JavaScript reconhecem o elemento

<script>. É dentro desse elemento que se coloca todo o código, como ilustra o exemplo
seguinte:
<html>
<head>
<title>A Minha Página com JavaScript</title>
<script type="text/javascript">
alert("Seja bem vindo(a) à minha página!");
</script>
</head>
<body>
Aqui colocamos o conteúdo da página em HTML

</body>
</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 carácter; 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 utilizador. 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 comportamento pretendido.
9
O exemplo seguinte faz aparecer uma caixa de diálogo com um agradecimento sempre que
o link for clicado:
<html>
<body>
<a href="http://www.artifice.web.pt/" target="_blank"
onclick="alert('Obrigado por visitar o Artífice da Web!')">
visite o Artífice da Web</a>
</body>
</html>
Certamente já conhece bem o atributo href="...", que serve para especificar o URL da página
a que a ligação de hipertexto conduz, mas note que o atributo onclick="..." é bem diferente porque
o seu conteúdo é constituído por código JavaScript, que neste caso faz aparecer a caixa de
diálogo com a mensagem de agradecimento.
Durante este modulo de JavaScript, procure organizar as pastas onde estará os exemplos.
Dentro da pasta Documentos do seu computador, crie uma pasta chamada: javascript e dentro
desta pasta principal, crie outras duas: desafios e exercícios
Dentro da pasta exercícios, crie uma subpasta chamada ex001 e nesta pasta, crie um
arquivo no VS Code, chamado: index.html.
Vamos ao código:
10
Na recomendação atual, os scripts JS devem ser incluídos no final do corpo do documento
HTML, posicionando a tag <script></script> logo acima do fechamento da tag </body>. Sendo
que tudo aquilo que estiver dentro da tag de script será considerado automaticamente JavaScript
pelo seu navegador.
Perceba que dentro do comando acima que você digitou: windows.alert(‘Olá, Mundo!’), a
palavra windows (opctional) é um objeto que indica referência à janela atual do navegador. A
palavra alert() é um método capaz de disparar uma mini janela de alerta para avisar algo ao
usuário.
Dentro dos parênteses do método alert(), temos uma string entre aspas (que podem ser
‘aspas simples’, “aspas duplas” ou `crases´ para delimitar as palavras que efetivamente
aparecerão na janela de alerta.
Para executar o script, basta navegar até a pasta onde o documento está salvo:
Documentos/javascript/exercícios/ex001/, clique com o botão direito do mouse sobre o arquivo
index.html e escolha a opção: Abrir com o Google Chrome. Tenha certeza de ter digitado o
código acima corretamente, em caso de não aparecer a mensagem juntamente com o botão OK,
faça a revisão do seu código novamente.
Comentários e blocos de código
Comentários
Os comentários permitem-nos descrever o código JavaScript que produzimos tornando-o
mais legível e mais fácil de manter. Se comentar adequadamente o código que produz, quando
mais tarde precisar de o melhorar ou fazer alterações será mais fácil e rápido perceber o que fez
antes. Se produz código para partilhar com outras pessoas então os comentários são ainda mais
importantes para que os outros percebam aquilo que escreveu.
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.
Um comentário que se estende por várias linhas começa com a sequência de caracteres /* e
continua até ser encontrada 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.
11
Aqui ficam alguns exemplos de comentários em JavaScript.
// 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
*/
Blocos de código
Quando temos de executar funcionalidades não triviais é quase sempre preciso executar
sequências de instruções compostas por várias linhas. Se essas sequê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 consegue-
se colocando-as entre chaves ({ }.)
{ // isto é um bloco de código
var i = 0;
var j = i * 3;
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 de 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 que cada
variável guarda.
Assim, se escrevermos um programa que divide dois números é acertado chamar dividendo,
divisor e quociente aos 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
12
nome para uma variável:
• Todos os nomes têm de começar com uma letra ou com o carácter _.
• Os restantes caracteres que compõem o nome podem igualmente conter números. Nunca se
esqueça que para o JavaScript letra grande e letra pequena são coisas diferentes e que, por
exemplo, as variáveis variavel1, Variavel1 e vaRiavel1 são três objetos distintos.
Olha este exemplo, de interação com um botão pelo navegador:
Crie uma pasta chamada ex002 dentro da pasta exercícios, em seguida como realizado
anteriormente, crie um arquivo index.html e desenvolva o código abaixo:
Declaração de Variáveis
Olhe com atenção a linha 14, onde criamos o botão. Existe um parâmetro na tag <button> que é o
onclick. Note que dentro das aspas eu coloquei o nome de um evento que será tratado pelo
JavaScript. A ligação entre o HTML e o JS será pelo nome desse evento (não esqueça dos
parênteses no final, mais tarde você entenderá pra que eles servem).
Agora analise a linha 16. Ela é exatamente a definição da função que tratará do evento. Ao
contrário, o window.alert() não está sozinho dentro do <script>. Ele está justamente dentro da
função (identificada pela palavra function do JS).
Toda função em JS é relacionada a um bloco, que nada mais é do que um conjunto de
comandos que estão entre chaves { }. Tudo o que estiver entre chaves em JS, chamaremos de
bloco.
13
Sendo assim, o comando que está na linha 17 não vai executar assim que a página for
carregada. No lugar disso, ela será executada só quando a função será disparada, e o modo de
disparo nesse caso será feito na linha 14, pelo evento onclick do botão.
Interagindo com o usuário

Outra maneira de usar o JavaScript básico para criar interações é através do método
prompt(). Com ele, podemos pedir para o usuário digitar dados e usar isso para causar uma
resposta personalizada para ele.
Crie uma pasta chamada ex003, inicie um arquivo index.html e desenvolva o código abaixo:
O código que virá a seguir é muito parecido com o anterior, na parte de HTML e CSS.
Inclusive o botão, que na linha 14 vai disparar o evento de clique, chamando a função inicio().
A linha 17 tem o método window.prompt(), que gera uma solicitação para que o usuário
digite o seu nome. Essa janela se parece bastante com um alerta, mas tem a diferença de incluir
uma caixa disponível para aceitar a digitação.
Mas como vamos guardar o nome do visitante? Aí entra o início da linha 17. A instrução let
nome serve para declarar uma variável chamada nome, que vai guardar o nome que a pessoa vai
digitar. Em JavaScript, o símbolo de = não se lê como “igual”. Na verdade, sempre que você
14
encontrar um =, leia como “recebe”. Lendo então a linha 17 depois de aprender tudo isso, ficamos
com: let nome = window.prompt('Qual é seu nome?’) “A variável nome vai receber o resultado de
um prompt que vai aparecer na janela perguntando qual é o nome do usuário”.
Já na linha 18, temos também uma novidade. Note que dentro do alert(), usamos crases
para delimitar a string dessa vez. window.alert(`Olá, ${nome}! É um prazer te conhecer!`) Uma
string que está entre crases tem um nome especial: se chama template string. Esse tipo de string
é uma das novidades do ECMAScript.
Dentro de uma template string podemos usar placeholders no seu interior. Um placeholder é
representado pelos símbolos ${} e podem ser usados para facilitar a exibição de conteúdos de
variáveis ou expressões. Olhando a linha 18, perceba que ${nome} vai ser substituído pelo
conteúdo da variável nome, criada na linha 17 e que está guardando o nome da pessoa que está
rodando o script.
Ao criar uma variável dá-se 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.
Se tentarmos aceder a 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 aí 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 secçã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.
15
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 planear o modo como este
será organizado. Deve-se começar por 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.
Os valores das Variáveis

A linguagem JavaScript é capaz de reconhecer três tipos de dados:
• Números, como por exemplo 12 ou 3.14159
• 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.
Conversões de Valores
A linguagem JavaScript exige muito 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:
var resposta = 42;
resposta = "O JavaScript aprende muito depressa.";
ao chegar à segunda linha de código o interpretador mudará de ideias e a variável resposta
deixará de ser guardada internamente como um número inteiro para passar a ser guardada como
16
uma String (texto). Esta conversão no tipo da variável acontece de forma automática e o
programador não precisa de fazer nada para que ela aconteça.
Esta liberdade que nos é dada pelo JavaScript destina-se apenas a simplificar a escrita do
código. Quando é mal utilizada ela pode dar origem a código difícil de ler e a erros. As regras de
boa programação dizem que ao definir uma variável o programador deve decidir qual o tipo de
dados (número, texto ou valor lógico) que está irá conter e não deverá escrever código que
provoque uma conversão no tipo de dados que a variável guarda. Sempre que uma tal conversão
for necessária deverá ser definida uma nova variável para guardar o resultado da conversão,
mantendo inalterados os tipos das variáveis antigas. Na prática esta recomendação raramente é
seguida.
Expressões Literais
Representação de valores
As expressões literais representam valores fixos. Elas são escritas diretamente pelo
programador ao produzir o script. Exemplos de expressões literais podem ser: 123 ou "Isto é uma
expressão literal".
As expressões literais podem ser usadas de diversas maneiras, como ilustra o excerto de
código apresentado a seguir (o exemplo seguinte usa as instruções if/else que só são estudadas
mais à frente):
var nome = "visitante";
var hora = 11;
if(hora < 12)
document.write("Bom dia. Seja bem vindo senhor " + nome);
else
{ if(hora >= 13)
document.write("Boa tarde. Seja bem vindo senhor " + nome);
else
document.write("Seja bem vindo! Almoça conosco?");
}
Na primeira linha usamos a expressão literal "visitante" para dar um valor inicial à variável nome.
Na segunda linha usámos uma expressão literal numérica para dar um valor à variável hora.
17
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.
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.
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:
var i = 42; // decimal
var j = 052; // octal
var k = 0X2A; // hexadecimal
// quando executar este código repare que as variáveis
// têm todas o mesmo valor
document.write("i = " + i);
document.write("<br/>");
document.write("j = " + j);
document.write("k = " + k);
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.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 a multiplicar por 10 elevado a 3,
18
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 a multiplicar por 10
elevado a -4. Esta representação é construída automaticamente pela máquina, o programador
pode escrever o número na forma que gostar mais.
Valores lógicos (booleanos)

Estas expressões podem assumir apenas dois valores: true (verdadeiro) e false (falso.)
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 aspas simples ('), como por
exemplo 'esta é outra expressão de texto'. Se começarmos a expressão com aspas temos de
usar aspas para a terminar, e se a iniciarmos com aspas simples temos de usar outra aspas
simples para terminar.
Para além dos caracteres normais, as expressões de texto podem conter os caracteres
especiais apresentados na lista seguinte:
Caracter 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 carregando na tecla
indicada na segunda coluna. Assim o carácter \b equivale a carregar na tecla backspace (apagar
o caracter à esquerda). O carácter \n provoca uma mudança de linha tal como a tecla "enter". O
caracter \ é usado como prefixo dos outros caracteres especiais, o que faz também dele um
caracter especial. Por isso, para obtermos este carácter temos de temos escrevê-lo duas vezes
(\\). Se o escrevermos uma única vez em lugar de o obtermos estaremos a tentar introduzir um
outro caracter especial e o resultado será diferente do que pretendemos.
19
Caracteres de escape
Se o caracter que vem a seguir a \ não pertencer à lista anterior o seu efeito será nulo, mas
há duas excepções: as aspas (") e aspas simples ('). Se pretendermos escrever aspas dentro de
uma expressão de texto temos de colocar o carácter \ antes delas, como mostra o exemplo
seguinte:
var texto = "Ele leu o \"Auto da Barca do Inferno\" de Gil Vicente.";
document.write(texto);
O resultado será:
Ele leu o "Auto da Barca do Inferno" de Gil Vicente.
Se em vez de aspas usarmos apenas aspas simples teremos:
var texto = 'Ele leu o \'Auto da Barca do Inferno\' de Gil Vicente.';
O resultado será:
Ele leu o 'Auto da Barca do Inferno' de Gil Vicente.
Porém, a melhor solução para este problema não é nenhuma das anteriores. Se usarmos
aspas simples como caracteres delimitadores de uma string então passamos a poder usar as
aspas
como parte do conteúdo sem qualquer problema, como se mostra a seguir:
var texto = 'Ele leu o "Auto da Barca do Inferno" de Gil Vicente.';
Mas se quisermos colocar aspas simples no conteúdo a melhor forma de evitarmos os
problemas consiste em usar aspas como caracteres delimitadores da string, como se mostra a
seguir:
var texto = "Ele leu o 'Auto da Barca do Inferno' de Gil Vicente.";
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á");
20
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, como se mostra a seguir: var
sortido = new Array(8975, "Livro", false, -27.765, "Bolachas");
document.write("sortido = " + sortido);
sortido[0] = 0.0004763;
sortido[2] = true;
sortido[6] = "Caderno";
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 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:
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.
Operadores
A linguagem JavaScript possui muitos operadores de diversos tipos. Aqui iremos apenas
21
abordar os aspectos mais básicos dos operadores disponíveis.
Operadores de atribuição de valor

Uma das coisas que os operadores podem fazer é fornecer um valor àquilo que estivar à
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=x*y
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.
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 sequencialmente. 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
22
(!=) 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 é menor
do que o da direita
x<y dá true se x for menor
do que y
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
Operadores 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 subtraçã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.
Porque é muitas vezes necessário adicionar ou subtrair uma unidade a uma variável, a
linguagem JavaScript define dois operadores especiais com esta finalidade. Assim, para
adicionarmos uma unidade à variável variavel1 podemos escrever variavel1++, e para
subtrairmos uma unidade à variavel2 escrevemos variavel2--. Por ação destes operadores no
final do exemplo seguinte a variável variavel1 terá o valor 4 e a variável
variavel2 terá o valor 6.
23
var variavel1 = 3;
variavel1++;
var variavel2 = 7;
variavel2--;
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 (os restantes definem-se com base nestes três.)
Operador Utilização Descrição

e (&&) b && c Dá true se b for true e c for true.
ou (||) b || c Dá false se b for false e c for false. Dá true nos casos restantes.
negação (!) !b Dá true se b for false e dá false se b for true.
Os casos mais úteis e interessantes de uso destes operadores utilizam dois ou os três
operadores ao mesmo tempo, como se mostra a seguir:
Se tivermos x = 4 e y = 7 a operação
((x + y + 2) == 13) && (((x + y) / 2) == 2)
dá false.
((y - x + 9) == 12) || ((x * y) == 2)
dá true.
!((x/2 + y) == 9) || ((x * (y/2)) == 2)
dá false.
Objetos
A linguagem JavaScript é uma implementação do padrão ECMAScript. Esse padrão define
as regras de sintaxe que temos estado a estudar e um conjunto mínimo de objetos que fazem do
ECMAScript uma verdadeira linguagem de programação, mas não define os objetos que
24
permitem manipular e interagir tanto com o browser como com as páginas da Web. Para ser
verdadeiramente útil o JavaScript 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 5 e superior, Mozilla/Netscape 7 e
Opera 7.)
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
utilizador e pedir-lhe para nos dar uma resposta ou escrever alguma coisa. O código:
window.alert("Esta é uma janela com um aviso"); faz aparecer uma janela com um aviso para o
utilizador. A notação por pontos significa que estamos a chamar 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 são aceites abreviações.
Definir uma Função

25
As funções permitem-nos agrupar várias linhas de código que realizam um determinado
trabalho, dar-lhe um nome e pô-las a trabalhar chamando-as por esse nome.
O exemplo seguinte define uma função:
function dataActual()
{
/*
Cria um objeto com a data e hora atuais e mostra o seu valor na janela recorrendo ao método
toLocaleString() do objeto Date
*/
var d = new Date();
document.write("A data e hora são: " + d.toLocaleString());
}
dataActual(); // esta linha faz executar a função (nunca esqueça que em JavaScript as letras
maiúsculas não são equivalentes às letras minúsculas, por isso tenha sempre muita atenção ao
fato de que o nome que usa para chamar uma função tem de ser rigorosamente igual ao nome
que lhe deu ao defini-la.)
No exemplo anterior usámos os caracteres { e } para delimitar um bloco de código. Tudo o
que está dentro destes delimitadores faz parte da função e será executado sempre que esta for
invocada escrevendo dataActual() no seu código. Como resultado será escrita na página a data e
hora do momento em que a função foi chamada.
Também podemos passar argumentos para a função, como se mostra a seguir:
function cumprimentar(nome)
{
var d = new Date();
document.write("Olá " + nome + "<br/>A data e hora atuais são: " + d.toLocaleString());
}
cumprimentar('Zézinho'); // esta linha faz executar a função como teremos oportunidade de ver
quando aprofundarmos o nosso estudo, as funções têm uma importância fundamental na
programação de scripts complexos
As instruções condicionais if...else

26
Uma instrução if permite-nos executar uma porção de código apenas se for verdadeira uma
determinada condição. Se essa condição não for verdadeira essa porção de código não será
executada, podendo ser ou não executado outro código alternativo, que será especificado através
da palavra else.
A ideia principal que está na base das instruções if/else pode ser resumida numa frase: "Se
chegarmos antes da hora de almoço vamos dar um passeio e no caso contrário vamos para a
mesa". O exemplo seguinte ilustra esta ideia:
var hora = 10;
if(hora < 12)
document.write("Vamos passear");
else
document.write("Vamos para a mesa");
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 estar associada a uma instrução else. Quando isso acontece se a
condição não for verificada não será executado qualquer código alternativo
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.
Laço for
Um ciclo for consiste num conjunto de três expressões contidas entre parêntesis, separadas
pelo caracter ; (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 chaves.
A primeira das expressões do ciclo for declara a variável a usar como índice (funciona
apenas como contador) e inicializa-a. 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
27
para 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:
soma = 0;
for(var i = 0; i < 3; i++)
{ soma += i;
document.write("O valor do índice é agora de " + i + "<br/>");
}
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
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 por testar de
novo o respeito pela condição i < 3.
Se o resultado for true volta a executar o código que está entre chavetas com o valor atualizado
de i. Isto repete-se 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.
var nomes = new Array("Manuel", "Rita", "Joana", "Francisco", "Luís",
"Bernardo", "Helder", "Patrícia", "Hugo", "António", "Nuno");
for(var i=0; i < nomes.length;i++)
{
var nome = nomes[i]
if(nome.charAt(0) == "H")
alert("O nome " + nome + " começa com a letra H");
}
Neste exemplo usamos o método charAt() do objeto String para verificar se o carácter inicial do
nome (aquele está na posição zero) é igual à letra H.
28
Laço while
O ciclo while é muito parecido com o ciclo for. De fato tudo o que um faz pode ser feito com
o outro, embora por questões de legibilidade (e de elegância do código) cada um deles possa ter
áreas de aplicação que para as quais é mais indicado do que o outro.
O ciclo while avalia uma condição e se ela der true executa o bloco de código que vem
imediatamente a seguir. Se der false salta para a frente do bloco de código que vem a seguir sem
o executar.
Este exemplo usa um ciclo while para produzir o mesmo efeito que o exemplo que está
antes daquele que acabámos de ver:
soma = 0;
i = 0;
while(i < 3)
{
soma += i;
document.write("O valor da variável i é agora de " + i + "<br/>");
i++;
}
Funções
Funções possuem um papel muito importante na programação estrutural pelo fato de ajudar muito
na modularização no programa, ou seja, viabiliza a divisão do programa em partes menores e
logicamente relacionadas. Em JavaScript, existem diversas maneiras de se declarar uma função;
mostraremos todas elas aqui com exemplos.
Um ponto importante é que em JavaScript as funções são consideradas como dados, ou
seja, podemos atribuir uma função a uma variável ou propriedade de um objeto e a partir desde
momento usar a variável ou a propriedade da mesma forma que se usaria a função. Elas também
podem ser passadas como argumentos para outras funções e por isso funções de JavaScript são
chamadas funções de alta ordem, elas podem tanto receber funções como argumento quanto
retornar uma função.
Expressão function: A primeira maneira de se declarar uma função é através do uso da
palavra chave function de maneira similar a como elas são declaradas na linguagem C, com as
29
diferenças de que em JavaScript não definimos o tipo de retorno e nem mesmo o tipo dos
argumentos. Uma função complexa pode ser capaz de tratar argumentos diferentes e retornar
argumentos diferentes dependendo das circunstâncias nas quais foi invocada. Deve-se definir
seu nome e seus argumentos conforme mostra o exemplo a seguir.
Exemplo:
function incArray(array,valor) {
for(item in array) { array[item]+=valor;
}
return array;
}
// Para invocar essa função depois basta usar incArray(arg1,arg2)
O construtor Function() A segunda forma de se declarar uma função é utilizando o
construtor Function() e o operador new, pois em JavaScript funções e objetos são interligados.
Exemplo:
var areaTri = new Function("b","h","return (b*h)/2;");
// a função acima calcula a área de um triângulo dadas sua base
// altura. Para invocá-la basta usar areaTri(arg1,arg2)
Esse construtor aceita um número qualquer de strings como argumentos. O último
argumento será sempre o corpo da função contendo comandos separados por ponto-e-vírgula
normalmente e todos os outros argumentos do construtor serão considerados argumentos da
função que se está criando. Devido a sua estrutura, essa forma de se declarar funções costuma
ser mais usada quando precisamos declarar uma função pequena, ocupando apenas uma linha.
Funções como literais

Uma terceira e última forma de se declarar uma função em JavaScript é através de literais.
Exemplo: var areaTri = function(b,h) { return (b*h)/2; };
// Para invocar a função basta usar areaTri(arg1,arg2) como
// na declaração pelo construtor
Essa forma é basicamente a mesma que declarar através do construtor Function(). No
entanto, ela é melhor porque os comandos podem ser declarados com a sintaxe normal de
JavaScript ao invés de ser uma string como é o caso do construtor. Com literais não há
30
necessidade de manter a função em uma linha, dentro das chaves podemos construir a função
usando um comando por linha normalmente.
Objetos: Ao contrário de uma variável, um objeto pode conter diversos valores e de tipos
diferentes armazenados nele (atributos) e também possuir funções que operem sobre esses
valores (métodos). Tanto os atributos, quanto os métodos, são chamados de propriedades do
objeto. Para criar um objeto é muito simples, basta invocar seu construtor através do operador
new.
Exemplo:
var objeto = new Object();
// Quando usamos o construtor Object() criamos um objeto
// genérico
Outra forma de criar um objeto é através de literais.
Exemplo:
var nave = { nome: "coração de ouro",
propulsão: "Gerador de improbabilidade infinita",
dono: "Zaphod Bebblebrox"
}
// Dessa forma, o objeto nave foi criado possuindo os atributos
// nome, propulsão e dono com seus respectivos valores
Para acessar uma propriedade de um objeto, basta usar objeto. Propriedade e no caso de
métodos adicionar o operador (). Podemos definir, como já foi dito, um construtor para um objeto,
assim podemos inicializar atributos logo no momento da instanciação do objeto. Para que um
construtor inicialize um atributo, ele precisa ser referenciado através da palavra-chave this.
Exemplo:
function Carro(modelo, marca, ano, motor) {
this.modelo = modelo;
this.marca = marca;
this.ano = ano;
this.motor = motor;
}
// Depois para instanciar um objeto, basta usar:
31
var car = new Carro("G800" , "Gurgel" , 1976 , 1.0);
// Agora car já possui todos os atributos com dados:
document.write("Carro: "+car.modelo);
// o comando acima irá imprimir "Carro: G800"
Métodos: No paradigma de orientação a objetos, os métodos são simplesmente funções que são
invocadas por meio de um objeto! E em JavaScript isso é levado tão a sério que a maneira de se
criar métodos para seus objetos leva isso ao pé da letra. Basta criarmos uma função e atribuí-la a
uma propriedade do objeto.
Exemplo: // Uma função fictícia para cálculo de um consumo de combustível
function calc_consumo(distancia) {
return distancia/(15/this.motor);
}
// Agora atribuímos a função, sem os argumentos, para a
// propriedade consumo. Considerando o objeto já instanciado
// do exemplo anterior car.consumo = calc_consumo;
// Pronto! já podemos invocá-la fazendo:
var gas = car.consumo(200);
// calculando quanto o carro gastaria de
// combustível em 200 kilômetros
Também podemos definir os métodos dentro do próprio construtor de uma função, tanto
definindo a função fora e atribuindo no construtor, como definindo a própria função dentro do
próprio construtor uma vez que JavaScript suporta o aninhamento de funções.
Prototypes: Quando declaramos ou atribuímos um método no construtor de um objeto ele ficará

disponível para todas as instâncias criadas a partir desse construtor. No entanto, existe um modo
muito mais eficiente de se fazer isso, que é com o uso da propriedade prototype. Tudo o que for
definido no prototype de um objeto poderá ser referenciado por todas as instâncias desse objeto.
Mesmo as propriedades do prototype que forem definidas ou alteradas depois da instanciação
serão acessíveis aos objetos declarados anteriormente. Além disso, é importante ter em mente
32
que os atributos e funções declarados no prototype não são copiados para os objetos, portanto há
uma economia significativa de memória quando usamos muitas propriedades compartilhadas e
instâncias.
Exemplo:
// Vamos elaborar mais o exemplo do carro, mas dessa
// vez usando prototype
function calc_consumo(distancia) {
return distancia/(15/this.motor);
}
// Classe que representa um carro
function Carro(modelo, marca, ano, motor) {
this.modelo = modelo;
this.marca = marca;
this.ano = ano;
this.motor = motor;
}
Carro.prototype.rodas = 4;
Carro.prototype.consumo = calc_consumo;
// Agora a classe possui uma constante que informa
// o número de rodas e o método consumo em seu
// prototype
var car1 = new Carro("G800" , "Gurgel" , 1976 , 1.0);
var car2 = new Carro("147" , "Fiat" , 1984 , 2.0);
// Podemos acessar agora tanto a constante rodas
// quanto o método consumo if(car1.rodas == 4) window.alert("ainda bem!"); var gas =
car2.consumo(180); // e o mais importante é que ambas estão acessando
// apenas uma única constante e um único método
// na memória
Arrays Associativos: Para finalizar nossa discussão sobre objetos, vamos mostrar como eles
podem ser usados como arrays associativos, ou seja, um array com objetos indexados por
33
valores não numéricos. Isso só pode ser feito porque é possível acessarmos atributos de um
objeto usando MeuObjeto["atributo"]. Assim podemos simular o comportamento de um array
associativo armazenando cada item em um atributo.
Exemplo:
var arr = new Object();
arr["nome"] = "Zaphod Beeblebrox";
arr["cargo"] = "Presidente do Universo";
window.alert(arr["nome"]);
// Irá mostrar uma mensagem contendo:
// "Zaphod Beeblebrox"
// Note que não há nenhuma diferença se fizermos:
window.alert(arr.nome)
// Exceto que a string usada como índice no modo [ ]
// pode ser manipulada em tempo de execução
Eventos
Existem diversos eventos que podem ser utilizados para que a interação do usuário coma
página seja o ponto de disparo de funções que alteram os elementos da própria página:
• onclick: clica com o mouse
• ondblclick: clica duas vezes com o mouse
• onmousemove: mexe o mouse
• onmousedown: aperta o botão do mouse
• onmouseup: solta o botão do mouse (útil com os dois acima para gerenciar drag’n’drop)
• onkeypress: ao pressionar e soltar uma tecla
• onkeydown: ao pressionar uma tecla.
• onkeyup: ao soltar uma tecla. Mesmo acima.
• onblur: quando um elemento perde foco
• onfocus: quando um elemento ganha foco
• onchange: quando um input, select ou textarea tem seu valor alterado
• onload: quando a página é carregada
• onunload: quando a página é fechada
• onsubmit: disparado antes de submeter o formulário. Útil para realizar validações
34
Vamos construir um exemplo prático: crie uma pasta 004 dentro da pasta exercícios,
conforme recomendado no início deste material.
Ao criar o arquivo index.html nas pastas, desenvolva o seguinte código:
Olhemos atentamente nas linhas de 11 a 13, onde criei uma seção identificada como
resultado, com um parágrafo interno. Ele será o nosso elemento mais importante desse exercício.
Identificar os elementos que desejamos acessar via script é essencial para evitar dores de
cabeça futuros. Quando identificamos o com o nome resultado, deixamos as “portas abertas” para
o JavaScript entrar. Agora, para resolver esse exercício, vamos criar o método de resposta ao
evento onclick do botão. Monte uma tag <script> </script>na linha 14, logo depois do </section>
e escreva o código a seguir.
Dentro do script, entre as linhas 15 e 19, criamos a função inicio() e um bloco com {}. Dentro
declaramos duas variáveis: nome e res. A variável nome vai receber o resultado de um prompt().
35
A grande novidade aqui foi a linha 17. É nela onde vamos focar nossos esforços agora.
Iniciando a linha, usamos a instrução let que vai criar uma variável chamada res (na verdade, o
que é criado é um objeto. Mas por enquanto pense em um objeto como uma variável especial). O
objeto res será o nosso elo entre o JavaScript e o HTML. Lembra da linha 11 do código HTML?
Lá eu dei um id para o elemento section e agora vou tirar proveito disso. Só segue a linha 17 e
tenta ler em Português: “Na janela do navegador (window), dentro do documento atual
(document), pegue o elemento que tenha o id (getElementById) com o nome ‘resultado’.” É
exatamente isso que você leu! A partir de agora, tudo aquilo que eu fizer com o objeto res em
JavaScript, vai se refletir o objeto que tenha o id citado no código. Nesse código, se mexermos
com res, vamos afetar diretamente a do nosso documento HTML. Agora vamos olhar com
atenção para a linha 18 do código acima. Ela vai modificar o “HTML que está dentro” (innerHTML)
da section. Dá só uma olhada na linha 12 do nosso código HTML. Esse é o parágrafo que vai
aparecer no navegador quando abrirmos o index.html. Porém, a linha 18 vai mudar esse
parágrafo quando o botão da linha 10 for clicado.
Funções Temporais
Em JavaScript, podemos criar um timer para executar um trecho de código após um certo
tempo, ou ainda executar algo de tempos em tempos.
A função setTimeout permite que agendemos alguma função para execução no futuro e
recebe o nome da função a ser executada e o número de milissegundos a esperar:
// executa a minhaFuncao daqui um segundo
setTimeout(minhaFuncao, 1000);
Se for um código recorrente, podemos usar o setInterval que recebe os mesmos

argumentos, mas executa a função indefinidamente de tempos em tempos:
// executa a minhaFuncao de um em um segundo
setInterval(minhaFuncao, 1000);
Múltiplas ações em JavaScript

Até o momento, o que criamos aqui foram ações simples executadas em resposta a apenas
um evento por vez. Somente um botão estava sendo monitorado. Agora vamos ver como
36
podemos monitorar várias ações em um só código. Abra seu diretório de exercícios JavaScript e
crie uma pasta ex005. Nele, crie um arquivo chamado index.html e adicione as linhas básicas de
um documento HTML5.
Note que nas linhas de 11 até 14, criamos quatro botões diferentes e que cada um dispara
uma ação diferente e não uma única funcionalidade. Outra coisa que estamos fazendo pela
primeira vez é a linha 18. Com ela, estamos evitando colocar um código JavaScript dentro de um
arquivo HTML. Dessa maneira, nosso código fica muito mais enxuto e organizado, já que
estamos separando o que é HTML do que é JS. Ao digitar a linha 18, segure a tecla Ctrl e clique
sobre o nome do arquivo acoes.js (que até o momento não existe). Ao fazer isso, disparamos um
pedido ao VS Code para que ele crie o arquivo automaticamente!
No documento acoes.js que criamos, escreva apenas o código das funções.
37
Se você analisar o código acima com cuidado, a linha 2 está se repetindo várias vezes nas
linhas 7, 12 e 17. Até o momento, isso é necessário porque toda função tem um bloco (delimitado
por {}) e toda variável declarada dentro de um bloco só vai funcionar dentro desse bloco. O nome
que damos a essa característica é ESCOPO. De forma resumida, o escopo de uma variável é a
área onde ela existe e funciona (o que chamamos de escopo local). Na imagem acima, marquei o
escopo da variável resp que está dentro da function acao1(). A minha variável resp do acao1()
não vai funcionar fora daquela linha pontilhada. Por isso tivemos que criar várias versões da
mesma variável, cada uma dentro de cada ação. Porém, essa não é a melhor maneira de resolver
esse problema. Vamos ver uma nova versão, bem melhor.
Olha só o que aconteceu! Transferi a linha que declara a variável resp para fora das
funções, lá no início, na linha imediatamente acima da primeira (não pode ser no final). Agora
estamos dizendo ao JS que a variável criada tem escopo global, o que significa que ela vai
funcionar dentro de todas as funções, é só olhar a nova linha pontilhada do segundo caso.
Outra característica do código acima é o seu comportamento dinâmico. Conforme você usa
o site e vai clicando nos botões, ele vai adicionando conteúdo ao final da página sem apagar o
conteúdo anterior, que era o que estava acontecendo antes (veja na imagem ao lado). Isso tudo
está acontecendo, simplesmente porque estamos usando o operador += no lugar de usar o a
atribuição simples = nas linhas 4, 8, 12 e 16.
38
Pratique os exercícios abaixo, reescreva-os tentando assimilar o que cada linha faz
exatamente e compare com a teoria vista neste material.
1- Manipulando Números
<!DOCTYPE
html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Números com JS</title>
<style>
body { font: 12pt Arial; }
button { font-size: 12pt; padding: 30px; }
</style>
</head>
<body>
<h1>Trabalhando com números</h1>
<button onclick="calcular()">Clique para calcular</button>
<section id="res">
<p>O resultado vem aqui...</p>
</section>
<script>
// O que fica aqui fora vai executar automaticamente, SEMPRE que o site for
carregado
window.alert('Seja bem-vindo(a) ao meu site!')
// Já a função calcular() só vai executar quando o usuário pressionar o botão
function calcular() {
let n1 = Number(window.prompt('Digite um número: '))
let res = document.querySelector('section#res')
res.innerHTML = `<p>O dobro de ${n1} é ${n1*2} e a metade é ${n1/2}!</p>`

}
</script>
</body>
</html>
39
2- Somando dois números
<!DOCTYPE
html>
<html lang="pt-br">
<head>
<style>
</style>
</head>
<body>
<h1>Somando dois números</h1>
<button onclick="somar()">Iniciar a soma</button>
<section id="res">
<p>O resultado vem aqui...</p>
</section>
<script>
function somar() {
let n1 = Number(window.prompt('Digite um número: '))
let n2 = Number(window.prompt('Digite outro número:'))
soma = n1 + n2
let res = document.querySelector('section#res')

res.innerHTML = `<p>A soma entre <mark>${n1}</mark> e <mark>${n2}</mark> é
igual a <strong>${soma}</strong>!</p>`
}
</script>
</body>
</html>
40
3- Calculando a média de um aluno.
<!DOCTYPE
html>
<html lang="pt-br">
<head>
<style>
</style>
</head>
<body>
<h1>Média do aluno v1.0</h1>
<button onclick="media()">Calcular média</button>
<section id="situacao">
<p>O resultado vai aparecer aqui...</p>
</section>
<script>
function media() {
let nom = window.prompt('Qual é o nome do aluno?') // Já que o nome não é um
número e sim letras, não é preciso colocar Number() para fazer a covnersão
let n1 = Number(window.prompt(`Qual foi a primeira nota de ${nom}?`))
let n2 = Number(window.prompt(`Além de ${n1}, qual foi a outra nota de ${nom}?
`))
med = (n1 + n2)/2 // Se você não colocar os parênteses para forçar a
precedência, seu cálculo vai dar um resultado errado, já que a divisão será feita antes.
let res = document.getElementById('situacao')

res.innerHTML = `<p>Calculando a média final de <mark>${nom}</mark>.</p>`
res.innerHTML += `<p>As notas obtidas foram <mark>${n1} e
${n2}</mark>.</p>` // O += é necessário, pois indica um pedido de "mantenha a frase
anterior, adicionando essa outra frase". Se não fosse ele, a linha anterior seria apagada.
res.innerHTML += `<p>A média final será <mark>${med}</mark>.</p>`
}
41
</script>
</body>
</html>
4- Vários cálculos em JavaScript

<!DOCTYPE
html>
<html lang="pt-br">
<head>
<style>
</style>
</head>
<body>
<h1>Vários cálculos em JS</h1>
<button onclick="calcular()">Clique para calcular</button>
<section id="result">
<p>O resultado vai aparecer aqui...</p>
</section>
<script>
function calcular() {
let num = Number(window.prompt('Digite um número: '))
let res = document.querySelector('section#result')

res.innerHTML = `<p>O número a ser analisado aqui será o
<strong>${num}</strong></p><hr>`
res.innerHTML += `<p>O seu valor absoluto é ${Math.abs(num)}</p>`
res.innerHTML += `<p>A sua parte inteira é ${Math.trunc(num)}</p>`
res.innerHTML += `<p>O valor inteiro mais próximo é ${Math.round(num)}</p>`
res.innerHTML += `<p>A sua raiz quadrada é ${Math.sqrt(num)}</p>`
res.innerHTML += `<p>A sua raiz cúbica é ${Math.cbrt(num)}</p>`
42
res.innerHTML += `<p>O valor de ${num}<sup>2</sup> é ${Math.pow(num, 2)}</p>`
res.innerHTML += `<p>O valor de ${num}<sup>3</sup> é ${Math.pow(num, 3)}</p>`
}
</script>
</body>
</html>
5- Contador de Cliques: Criem 3 arquivos, sendo o primeiro index.html e execute o seguinte

código:
!DOCTYPE
<html>
<html lang="pt-br">
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Contador de Cliques</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Contador de cliques</h1>
<button onclick="contar()">Clique em mim</button>
<button onclick="zerar()">Zerar o contador</button>
<section id="result">
<p>O contador está com <mark>0</mark> cliques.</p>
</section>
<script src="scripts.js"></script>
</body>
</html>
O segundo arquivo deve se chamar scripts.js e deve conter as seguintes linhas de códigos:
let
contado
r = 0
let res = document.querySelector('section#result')
// As variáveis declaradas aqui fora são consideradas GLOBAIS e funcionam dentro do
43
programa inteiro
function contar() {
contador ++ // É a mesma coisa que contador = contador + 1
res.innerHTML = `<p>O contador está com <mark>${contador}</mark> cliques.</p>`
}
function zerar() {
contador = 0
res.innerHTML = null
}
E por fim o 3º arquivo: style.css
@import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap');
body { font: 12pt

Arial; }
h1, h2, h3 { font-
family: 'Pacifico',
cursive; font-weight:
normal;}
button { font-size:
12pt; padding: 30px; }
6- Usando o JavaScript externo.

São 3 arquivos, o primeiro: acoes.js
let resp =
window.document.getElementById('saida'
)
// Lembre-se que toda variável declarada aqui fora possui
escopo global. Veja mais sobre escopo no seu material em
PDF, na aula 07.
44
function acao1() {
resp.innerHTML += '<p>Clicou no primeiro botão</p>'
}
function acao2() {
resp.innerHTML += '<p>Clicou no segundo botão</p>'
}
function acao3() {
resp.innerHTML += '<p>Clicou no terceiro botão</p>'
}
function acao4() {
resp.innerHTML += '<p>Clicou no quarto botão</p>'
}
O segundo arquivo: index.html

<!DOCTYPE
html>
<html lang="pt-br">
<head>
<title>JavaScript externo</title>
</head>
<body>
<h1>JavaScript Externo</h1>
<button onclick="acao1()">Ação 1</button>
<section id="saida">
<p>Aqui vou registrar suas ações com os botões acima.</p>
</section>
45

<script src="acoes.js"></script>
</body>
</html>
O terceiro arquivo: style.css

@import url('https://fonts.googleapis.com/css?
family=Pacifico&display=swap');

h1, h2, h3 { font-family:
'Pacifico', cursive; font-
weight: normal;}
button { font-size: 12pt;
padding: 30px; }
7- O Usuário escolhe o cálculo:

Crie novamente 3 arquivos, sendo o primeiro: index.html
<!
DOCTYPE
html>
<html lang="pt-br">
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Múltiplas ações</title>
</head>
<body>
<h1>Múltiplas ações</h1>
<button onclick="calc()" id="botao">Clique para Iniciar</button>
46
<p>Clique no botão acima para começar.</p>
</section>
<script src="script.js"></script>
</body>
</html>
O segundo arquivo: script.js

functio
n
calc()
{
let n1 = Number(prompt('Primeiro valor:'))
let n2 = Number(prompt('Segundo valor:'))
let op = Number(prompt(`Valores informados: ${n1} e ${n2}. \nO que vamos fazer? \n[1]
Somar \n[2] Subtrair \n[3] Multiplicar \n[4] Dividir`))
let saida = document.getElementById('saida')

saida.innerHTML = `<h2>Calculando...</h2>`
switch (op) { // A estrutura switch basicamente permite você testar valores dentro de
uma variável ou expressão. Ela é compatível apenas com números inteiros e strings
case 1:
saida.innerHTML += `<p>${n1} + ${n2} = <strong>${n1+n2}</strong></p>`
break // O break é obrigatório em cada case. Se não for colocado, acontecerá a
execução de vários comandos indesejados de outros cases
case 2:
saida.innerHTML += `<p>${n1} - ${n2} = <strong>${n1-n2}</strong></p>`
break
case 3:
saida.innerHTML += `<p>${n1} x ${n2} = <strong>${n1*n2}</strong></p>`
break
case 4:
saida.innerHTML += `<p>${n1} / ${n2} = <strong>${(n1/n2).toLocaleString('pt-
BR')}</strong></p>` // O método toLocaleString() é muito útil para mostrar números de forma
mais compatível com o que usamos aqui no Brasil.
break
default: // Se o usuário não digitar nenhum dos valores acima, vai cair aqui
47
saida.innerHTML += `<p>OPÇÃO INVÁLIDA! Você digitou ${n1} e ${n2}, mas não sei
o que fazer com eles. </p>`
break
}
}


weight: normal;}
button { font-size: 12pt;
padding: 30px; }
8- Pegando dados de um formulário:

O primeiro arquivo: index.html
<!DOCTYPE
html>
<html lang="pt-br">
<head>
<title>Dados de Formulário</title>
</head>
<body>
<h1>Contando de 0 até um número positivo qualquer</h1>
<p>Escolha o limite final para a contagem a partir do 0 (digite apenas números
postivos)</p>
<section id="entrada">

<form action="#" method="get">
48

<label for="fnum">Valor final: </label>
<input type="number" name="num" id="fnum" placeholder="Apenas positivos">

<input type="submit" value="Contar" formaction="javascript:contagem()">

</form>
</section>
<p>Preencha os dados acima e aperte o botão.</p>
</section>
<script src="script.js"></script>
</body>
</html>
O segundo arquivo: script.js

function
contagem(
) {
let saida = document.getElementById('saida')
let num = Number(document.getElementById('fnum').value)
saida.innerHTML += `<h2>Contando de 0 até ${num}</h2>`
let cont = 0
while (cont <= num) {
saida.innerHTML += ` ${cont} 👉`
cont ++
}
saida.innerHTML += ` 🏁`
}

49
weight: normal;}
input[type=number] { font-
size: 12pt; }
input[type=submit] {
background-color: green;
color: white;
font-size: 12pt;
padding: 5px;
}
- https://youtu.be/1-w1RfGIov4 - Canal Curso em Vídeo com Aulas sobre JavaScript
50
5. Referências Bibliográficas
Básica:
- Curso em Vídeo: Gustava Guanabara: disponível em:
https://github.com/gustavoguanabra/javascript.
- LAWSON, B.; SHARP, R. Introdução ao HTML 5. São Paulo: Alta Books, 2011.
- MORRISON, M. Use a cabeça! JavaScript. São Paulo: Alta Books, 2008.
51

Apostila Linguagem JavaScript para Web - EFG

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila Linguagem JavaScript para Web - EFG

Enviado por

Direitos autorais:

Formatos disponíveis

Linguagem Javascript

Ricardo André Naka 37 anos, reside em Goiânia, bacharel em Ciência da Computação

3- 1° Capitulo- Introdução a área de Interação Humano Computador. 5

4- 2° Capitulo – Introdução ao Design de Páginas Web. 09

O Componente curricular de Linguagem Javascript para Web fornece a capacidade de

Atualmente, o maior mantedor da linguagem é a Fundação Mozilla, onde encontramos ótimos

Na página criada anteriormente:

- Defina um título: “JavaScript Hello World!”;

O que é necessário para programar em Javascript? Apenas um navegador, como o Mozilla

Entendendo e Conhecendo o JavaScript:

Inserir JavaScript numa página da Web

Os browsers capazes de executar código escrito em JavaScript reconhecem 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

Interagindo com o usuário

Os valores das Variáveis

Números com vírgula flutuante

Valores lógicos (booleanos)

Cadeias de variáveis (Array)

Operadores de atribuição de valor

Operador Descrição Exemplo

Operador Utilização Descrição

Document Object Model (DOM)

Exemplos práticos com objetos

Definir uma Função

As instruções condicionais if...else

Executar código repetidamente

Funções como literais

Prototypes: Quando declaramos ou atribuímos um método no construtor de um objeto ele ficará

Se for um código recorrente, podemos usar o setInterval que recebe os mesmos

Múltiplas ações em JavaScript

res.innerHTML = `<p>O dobro de ${n1} é ${n1*2} e a metade é ${n1/2}!</p>`

let res = document.querySelector('section#res')

let res = document.getElementById('situacao')

4- Vários cálculos em JavaScript

let res = document.querySelector('section#result')

5- Contador de Cliques: Criem 3 arquivos, sendo o primeiro index.html e execute o seguinte

E por fim o 3º arquivo: style.css

body { font: 12pt

6- Usando o JavaScript externo.

O segundo arquivo: index.html

O terceiro arquivo: style.css

body { font: 12pt Arial; }

7- O Usuário escolhe o cálculo:

O segundo arquivo: script.js

let saida = document.getElementById('saida')

O terceiro arquivo: style.css

body { font: 12pt Arial; }

8- Pegando dados de um formulário:

O segundo arquivo: script.js

O terceiro arquivo: style.css

- https://youtu.be/1-w1RfGIov4 - Canal Curso em Vídeo com Aulas sobre JavaScript

- Curso em Vídeo: Gustava Guanabara: disponível em:

- MORRISON, M. Use a cabeça! JavaScript. São Paulo: Alta Books, 2008.

Você também pode gostar