O documento fornece uma introdução sobre JavaScript, abordando seus principais tópicos: 1) JavaScript permite adicionar interatividade às páginas web; 2) Foi criada pela Netscape em 1995 para rodar no lado do cliente; 3) Possui funcionalidades como manipulação de conteúdo, formulários, janelas do navegador e interação com outras linguagens.

1. JavaScript - Introdução
Cristiano Pires Martins
1

2. Referência
• Silva, Maurício Samy (Maujor), JavaScript:
Guia do Programador. São Paulo: Novatec
Editora, 2010.
2

3. Visão Geral
• HTML é usado para estruturar uma página
web;
• Apresentação visual é trabalho para o CSS;
• As linguagens de programação são
responsáveis pela interatividade avançada
da página.
3

4. Visão Geral
• JavaScript foi criada pela Netscape em
parceria com a Sun Microsystems;
• Primeira versão foi lançada em 1995;
• Dentre as linguagens de programação para
processar dados na web:
• PHP,ASP, Java, Ruby, Phyton e ColdFusion.
4

5. Visão Geral
• Essas linguagens foram feitas para rodar no
lado do servidor (exceto o java);
• JavaScript é uma linguagem desenvolvida
para rodar no lado do cliente;
• No navegador (browser) existe um
interpretador JavaScript;
• Exemplo: o PHP precisa de um servidor.
5

6. Funcionalidades
• Manipular conteúdo e apresentação
• Inserção de data/hora no documento;
• Inserção de mensagem de boas vindas;
• Conteúdos diferenciados dependendo do navegador.
• Podendo até mesmo gerar o conteúdo completo de uma
página web.
6

7. Funcionalidades
• Manipular o Navegador
• Criar pou-up;
• Mensagens ao usuário;
• Alertar as dimensões do navegador;
• Interferir na barra de status;
• Retirar menus;
• Fechar e abrir janelas.
7

8. Funcionalidades
• Manipular o Navegador
• Comportamentos inesperados e não solicitados pelo
usuário contribuíram para a má fama da linguagem;
• Adote como regra geral não manipular a janela do
navegador (Maujor, 2010).
8

9. Funcionalidades
• Interagir com Formulários
• É capaz de acessar formulários HTML;
• Validar os dados;
• Realizar cálculos;
• Fornecer dicas de preenchimento dos
campos.
9

10. Funcionalidades
• Interagir com outras linguagens dinâmicas
• Pode ser usada em conjunto com outras
linguagens.
10

11. JavaScript e os Padrões Web
• Com o surgimento dos padrões Web,
surgiram 2 princípios básicos:
• JavaScript não obstrutivo;
• Melhoria progressiva.
11

12. JavaScript e os Padrões Web
• Escrever JavaScript não obstrutivo implica:
• Conteúdo da página estar presente e
funcional, mesmo sem suporte;
• Usar linguagem para incrementar a
usabilidade da página;
• Escrever scripts em arquivos externos.
Uso de camadas: HTML, CSS, SCRIPT.
12

13. Camadas de Desenvolvimento
• Camadas de Desenvolvimento
• Estruturação de Conteúdo: HTML;
• Apresentação: CSS;
• Comportamento: Scripts.
13

14. Camadas de Desenvolvimento
• Principais vantagens das camadas:
• Elimina a repetição de códigos em diferentes
páginas;
• Reaproveita trechos de códigos em outros
projetos;
• Busca e correção de bugs;
• Facilita manutenção e entendimento dos
códigos.
14

15. Camadas de Desenvolvimento
• Conceito da Melhoria Progressiva:
• Primeira etapa: estruturar os conteúdos
usando HTML;
• Segunda etapa: incrementar a
apresentação da página usando CSS;
• Terceira etapa: introduzir JavaScript
acrescentando interatividade à página.
15

16. Introdução à Linguagem
• Foi inventada por Brendam Eich, a primeira
versão foi JavaScript 1.0, implementada para
o Netscape 2.0, em 1996.
• Concorreu com a JScript 1.0 do Internet
Explorer 3.0.
• Atualmente, o nome oficial: ECMAScript e a
versão ECMA-262 v5.
16

17. Base para Estudos
• Orientação a objetos
• A linguagem suporta POO;
• É capaz de simular muitos dos fundamentos de POO;
• Os objetos da linguagem podem ser agrupados em:
• Objetos internos da linguagem (strings, arrays e datas);
• Objetos do ambiente de hospedagem (navegador, como window e
document);
• Objetos personalizados criados pelo desenvolvedor.
17

18. Inserir JavaScript na HTML
• Para escrever código não precisa instalar
software especial;
• Escreve em um editor de texto simples;
• Visualiza o resultado no browser;
• Os arquivos são gravados com extensão .js;
• Arquivos são executados dentro de um
arquivo HTML.
18

19. Inserir JavaScript na HTML
• Inline: na seção body (prática não
recomendada).
• Exemplo:
<button type="button" onclick="alert('Olá
visitante');">
19

20. Inserir JavaScript na HTML
• Incorporado: na seção head;
...
<head>
...
<script type="text/javascript">
...
</script>
...
</head>
...
20

21. Inserir JavaScript na HTML
• Externo: em um arquivo externo e inserir
com um link na seção head.
...
<head>
...
<script type="text/javascript" src=”scripts/
meu_script.js”></script>
</head>
...
21

22. Sistema Léxico da JavaScript
• Tamanho da caixa: case sensitive;
• Analisar:
• <button type="button" onClick="alert('Olá
visitante');">
• Sem problema: HMTL
• Com problema: XHTML
• Não é JavaScript
22

23. Sistema Léxico da JavaScript
• Comentários:
• Em linha única:
• //
• <!-- (não precisa fechar)
• Em múltiplas linhas:
• /* ... */
23

24. Sistema Léxico da JavaScript
• Declarações:
• Na mesma linha:
• a = 5 ; b = 8; alert(“Alô Mundo!”);
• Em linhas separadas:
• a = 5 //recomenda-se colocar “;”
• b = 8 //não é obrigatório
• alert(“Alô Mundo!”);
24

25. Sistema Léxico da JavaScript
• Espaços em branco e quebras de linha:
• Sintaxes válidas:
• a=27; e a = 27 ;
• alert(“Olá”); e alert ( “Olá” ) ;
• function(){...} e function () {...}
25

26. Sistema Léxico da JavaScript
• Espaços em branco e quebras de linha:
• Sintaxes com erros:
• a=2 7;
• document.write(“<p> Eu sou uma
string </p>”);
26

27. Sistema Léxico da JavaScript
• Espaços em branco e quebras de linha:
• Sintaxe válida:
• document.write(“<p> Eu sou uma
string </p>”);
27

28. Sistema Léxico da JavaScript
• Espaços em branco e quebras de linha:
• document.write
(“<p> Eu sou uma string </p>”);
• document.write
(“<p> Eu sou uma string </p>”);
28
Sintaxe com erro
Sintaxe correta!

29. Sistema Léxico da JavaScript
• Literais: designa qualquer tipo de dados
• Exemplo:
• a = 45;
• mensagem = “Alô mundo!”;
29

30. Sistema Léxico da JavaScript
• Tipos de Dados Literais:
• inteiros;
• decimais;
• booleanos;
• strings;
• arrays;
• objetos.
30

31. Sistema Léxico da JavaScript
• Inteiros (exemplos):
• c = 32; //base 10
• d = -119; //base 10
• e = 0x110B6; //base hexadecimal
• f = 0xf56a2; //base hexadecimal
31

32. Sistema Léxico da JavaScript
• Decimais (exemplo):
• a = 3.1416;
• b = -76.89;
• c = .3333;
• a = 3E5; //Notação científica
• b = -47.78965432E10; //Notação científica
32

33. Sistema Léxico da JavaScript
• Booleanos (exemplo):
• a = true;
• b = false;
33

34. Sistema Léxico da JavaScript
• String (exemplo):
• mensagem = “Olá! n Tudo bem?”;
34

35. Objeto document
• Forma de enviar informações para o
usuário;
• document.write( ): permite escrever
qualquer informação na página.Tanto um
texto quanto o conteúdo de uma variável.
35

36. Impressão de texto
36
impressão de texto:
document.write("Programando em Javascript");
impressão do conteúdo de uma variável:
var nome = “aluno”;
document.write("Olá "+nome+" Seja BemVindo !!!");

37. Escrever HTML com JavaScript
37
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write</title>
</head>
<body>
<script type="text/javascript">
document.write("<h2>O método <code>write()</code></h2>");
document.write("<p>O método <code>write()</code> do objeto
<code>document</code> destina-se a escrever marcação HTML com
uso da JavaScript</p>");
</script>
</body>
</html>
Exemplo de Impressão de Texto

38. Escrever Após
Carregamento da Página
38
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write</title>
</head>
<body>
<h2>document.write() - Após carregamento da página.</h2>
<h3>JavaScript</h3>
<button onclick="document.write('Conteúdo inserido após
carregamento da página')">Inserir conteúdo</button>
</body>
</html>

39. Manipulação de cores
39
• document.bgColor : modifica a cor de fundo da
página, mesmo efeito da tag em html <body
bgcolor="nome_da_cor">
Exemplo
document.bgColor="red";
• document.fgColor : altera a cor da letra na página
Exemplo
document.fgColor="orange";

40. document
40
• document.title : Define um título para a página atual,
mesmo efeito que a tag <title>..</title>
Exemplo
document.title="Curso de Javascript";
• document.lastModified : Exibe a data da última
atualização da página
Exemplo
document.write(document.lastModified);

41. Objeto Window
• Comando responsável por estabelecer uma
melhor interação com o usuário.
41

42. Base para Estudos
• Caixas de Diálogo:
• Janela do tipo pop-up para fornecer informações;
• Janela para coletar dados do usuário;
• Métodos (funções) para objeto Window:
• Caixa de alerta;
• Caixa de diálogo de confirmação;
• Caixa de diálogo para entrada de string.
42

43. Caixa de Alerta
43
window.alert(); ou alert();
Este comando exibe uma caixa de
diálogo
<script type="text/javascript">
window.alert ("Olá Mundo!");
</script>

44. Certo/Errado
44
Errado
<script type="text/javascript">
window.alert ("Olá Mundo! <br /> Cheguei!");
</script>
Certo
<script type="text/javascript">
window.alert ("Olá Mundo! n Cheguei");
</script>

45. Caixa de Confirmação
45
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write</title>
</head>
<body>
<script type="text/javascript">
var resp = window.confirm("Você tem certeza que quer apagar o
arquivo?nEsta operação não poderá ser desfeita.");
if(resp)
alert("Arquivo apagado!!!");
else
alert("Operação cancelada!!!");
</script>
</body>
</html>

46. Caixa de Entrada de String
• window.prompt(): Comando para realizar
uma entrada de dados em uma caixa
padrão e armazenar o dado digitado em
uma variável.
46

47. Caixa de Entrada de String
47
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write</title>
</head>
<body>
<script type="text/javascript">
var data = window.prompt("Digite sua data de nascimento:","dd/mm/
aaaa");
var dia_mes="";
for(i=0;i<5;i++)
dia_mes+=data[i];
document.write("Seu aniversário é em "+dia_mes);
</script>
</body>
</html>

48. Sistema Léxico da JavaScript
• Caractere de Escape “”: Representa caracteres especiais;
• Sintaxes válidas:
• “Os livros da editora O’Reilly são bons.” // aspas duplas fora e simples
dentro
• ‘Os livros da editora O’Reilly são bons.’ // aspas duplas fora e simples
dentro
• ‘Mac‘Neil disse:“Vim para ficar”.‘ //aspas simples fora, duplas e simples
escapadas dentro
• “Mac‘Neil disse: “Vim para ficar”.” //aspas duplas fora, duplas escapadas e
simples dentro
48

49. Sistema Léxico da JavaScript
• Variáveis
• Nome deve começar com:
• uma letra;
• um caractere underscore ( _ );
• um caractere cifrão ( $ ).
• A partir do JavaScript 1.5, permite-se usar letras
acentuadas, caracteres escapados, dígitos e demais
caracteres Unicode.
49

50. Sistema Léxico da JavaScript
• Exemplo de nomes de variáveis:
• a
• _xpto
• minha_variavel
• minhaVariavel
• minha-variavel
• cd456
50

51. Sistema Léxico da JavaScript
• Boas práticas:
• Escolha nomes que dão dicas do
conteúdo;
• Evite nomes como: a, f34,
variavelParaArmazenarUmObjeto;
• Nome composto. Sugestão:
nome_vendedor, nomeVendedor;
51

52. Sistema Léxico da JavaScript
52
ber: palavras próprias e internas da JavaScript (Tabela1.4),palavras re
lasespecificaçõesECMA-262parausoemfuturasversõesdaJavaScr
1.5) e palavras que fazem parte da implementação JavaScript nos dis
e hospedam a linguagem, como um navegador, por exemplo (Tab
Tabela 1.4 – Palavras-chave JavaScript
break else new var
case finally return void
catch for switch while
continue function this with
default if throw
delete in try
do instanceof typeof
Tabela 1.5 – Palavras reservadas pela especificação ECMA-262

53. Sistema Léxico da JavaScript
53
continue function this with
default if throw
delete in try
do instanceof typeof
Tabela 1.5 – Palavras reservadas pela especificação ECMA-262
abstract enum int short
boolean export interface static
byte extends long super
char final native synchronized
class float package throws
const goto private transient
debugger implements protected volatile
double import public public

54. Sistema Léxico da JavaScript
54
1 Introdução à JavaScript
Tabela 1.6 – Palavras reservadas dos dispositivos de hospedagem
alert eval location open
array focus math outerHeight
blur function name parent
boolean history navigator parseFloat
date image number regExp
document isNaN object status
escape length onLoad string
nomevendedor, nome-vendedor, nome_vendedor e

55. Sistema Léxico da JavaScript
• JavaScript não é tipificada;
• Para declarar local
• var a = 30; //variável local
• Para declarar global não use var.
• b = 25; //variável global
55

56. <script type="text/javascript">
a=10;
funcaoUm = function( ) {
var a=20;
alert(a); // alerta o valor 20
};
funcaoUm(); // executa a funcaoUm
funcaoDois = function() {
alert(a); // alerta o valor 10
};
funcaoDois(); // executa a funcaoDois
// mais script ...
alert(a); // alerta o valor 10
</script>
56

57. 57
• <script type="text/javascript">
a=10;
funcaoUm = function( ) {
var a=20;
alert(a); // alerta o valor 20
};
funcaoUm(); // executa a funcaoUm
funcaoDois = function() {
a = 40;
alert(a); // alerta o valor 40
};
funcaoDois(); // executa a funcaoDois
// mais script ...
alert(a); // alerta o valor 40
• </script>

58. Sistema Léxico da JavaScript
• Sintaxe para declarar variáveis:
• var a = 40; var b = 60; var c = “Olá mundo!”;
• var a = 40;
• var b = 60;
• var c = “Olá mundo!”;
• var a = 40, b = 60, c = “Olá mundo!”;
58

59. Sistema Léxico da JavaScript
• null, undefined, NaN, Infinity
• null: indica ausência de valor.
• undefined: declarada e não inicializada.
• NaN: representar um valor que não seja um número.
• Infinity: faixa de números manipuláveis:
59
var a = null;
var a;
var a = 3 * “Olá”;
-1.7976931348623157e+308 e 1.7976931348623157e+308

60. Cuidado!!!
60
var x = 0.1;
var y = 0.2;
var z = x + y // the result in z will not be 0.3
Para resolver
var z = (x * 10 + y * 10) / 10; // z will be 0.3
Todas as linguagens de programação, incluindo
JavaScript, têm dificuldades com valores de ponto
flutuante precisos

61. 61
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<button onClick="window.open(
'http://www.google.com','_blank','width=200, height=200’,false);">
Abrir Janela</button>
</body>
</html>

62. Exercícios
• Faça um programa que tenha 4 botões:
• Muda cor do fundo do texto;
• Muda cor da fonte;
• Muda o título da página;
• Abra um pop up. Utilize window.open().
62