javascript aula 01 - visao geral

67
JavaScript - Introdução Cristiano Pires Martins 1

Upload: cristiano-pires-martins

Post on 28-Jun-2015

1.879 views

Category:

Technology


5 download

TRANSCRIPT

Page 1: Javascript   aula 01 - visao geral

JavaScript - IntroduçãoCristiano Pires Martins

1

Page 2: Javascript   aula 01 - visao geral

Referência

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

2

Page 3: Javascript   aula 01 - visao geral

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

Page 4: Javascript   aula 01 - visao geral

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

Page 5: Javascript   aula 01 - visao geral

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

Page 6: Javascript   aula 01 - visao geral

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

Page 7: Javascript   aula 01 - visao geral

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

Page 8: Javascript   aula 01 - visao geral

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

Page 9: Javascript   aula 01 - visao geral

Funcionalidades• Interagir com Formulários

• É capaz de acessar formulários HTML;

• Validar os dados;

• Realizar cálculos;

• Fornecer dicas de preenchimento dos campos.

9

Page 10: Javascript   aula 01 - visao geral

Funcionalidades

• Interagir com outras linguagens dinâmicas

• Pode ser usada em conjunto com outras linguagens.

10

Page 11: Javascript   aula 01 - visao geral

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

Page 12: Javascript   aula 01 - visao geral

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

Page 13: Javascript   aula 01 - visao geral

Camadas de Desenvolvimento

• Camadas de Desenvolvimento

• Estruturação de Conteúdo: HTML;

• Apresentação: CSS;

• Comportamento: Scripts.

13

Page 14: Javascript   aula 01 - visao geral

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

Page 15: Javascript   aula 01 - visao geral

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

Page 16: Javascript   aula 01 - visao geral

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

Page 17: Javascript   aula 01 - visao geral

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

Page 18: Javascript   aula 01 - visao geral

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

Page 19: Javascript   aula 01 - visao geral

Inserir JavaScript na HTML

• Inline: na seção body (prática não recomendada).

• Exemplo: <button type="button" onclick="alert('Olá visitante');">

19

Page 20: Javascript   aula 01 - visao geral

Inserir JavaScript na HTML

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

</head>...

20

Page 21: Javascript   aula 01 - visao geral

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

Page 22: Javascript   aula 01 - visao geral

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

Page 23: Javascript   aula 01 - visao geral

Sistema Léxico da JavaScript• Comentários:

• Em linha única:

• //

• <!-- (não precisa fechar)

• Em múltiplas linhas:

• /* ... */

23

Page 24: Javascript   aula 01 - visao geral

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

Page 25: Javascript   aula 01 - visao geral

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

Page 26: Javascript   aula 01 - visao geral

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

Page 27: Javascript   aula 01 - visao geral

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

Page 28: Javascript   aula 01 - visao geral

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!

Page 29: Javascript   aula 01 - visao geral

Sistema Léxico da JavaScript

• Literais: designa qualquer tipo de dados

• Exemplo:

• a = 45;

• mensagem = “Alô mundo!”;

29

Page 30: Javascript   aula 01 - visao geral

Sistema Léxico da JavaScript• Tipos de Dados Literais:

• inteiros;

• decimais;

• booleanos;

• strings;

• arrays;

• objetos.

30

Page 31: Javascript   aula 01 - visao geral

Sistema Léxico da JavaScript

• Inteiros (exemplos):

• c = 32; //base 10

• d = -119; //base 10

• e = 0x110B6; //base hexadecimal

• f = 0xf56a2; //base hexadecimal

31

Page 32: Javascript   aula 01 - visao geral

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

Page 33: Javascript   aula 01 - visao geral

Sistema Léxico da JavaScript

• Booleanos (exemplo):

• a = true;

• b = false;

33

Page 34: Javascript   aula 01 - visao geral

Sistema Léxico da JavaScript

• String (exemplo):

• mensagem = “Olá! \n Tudo bem?”;

34

Page 35: Javascript   aula 01 - visao geral

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

Page 36: Javascript   aula 01 - visao geral

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 Bem Vindo !!!");

Page 37: Javascript   aula 01 - visao geral

Escrever HTML com JavaScript

37

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"><head><title>Escrever HTML com JavaScript</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></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

Page 38: Javascript   aula 01 - visao geral

Escrever Após Carregamento da Página

38

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"><head><title>Atrelar um Evento com JavaScript</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></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>

Page 39: Javascript   aula 01 - visao geral

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">

Exemplodocument.bgColor="red";

• document.fgColor : altera a cor da letra na páginaExemplo

document.fgColor="orange";

Page 40: Javascript   aula 01 - visao geral

document

40

• document.title : Define um título para a página atual, mesmo efeito que a tag <title>..</title>

Exemplodocument.title="Curso de Javascript";

• document.lastModified : Exibe a data da última atualização da página

Exemplo document.write(document.lastModified);

Page 41: Javascript   aula 01 - visao geral

Objeto Window

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

41

Page 42: Javascript   aula 01 - visao geral

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

Page 43: Javascript   aula 01 - visao geral

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>

Page 44: Javascript   aula 01 - visao geral

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>

Page 45: Javascript   aula 01 - visao geral

Caixa de Confirmação

45

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"><head><title>Caixa de Diálogo de Confirmação</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">window.confirm("Você tem certeza que quer apagar o arquivo?\nEsta operação não poderá ser desfeita.")

</script></head><body></body></html>

Page 46: Javascript   aula 01 - visao geral

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

Page 47: Javascript   aula 01 - visao geral

Caixa de Entrada de String

47

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"><head><title>Caixa de Diálogo para Entrada de String</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><script type="text/javascript">data_aniv = window.prompt("Olá visitante\nInforme a data do seu nascimento.", "dd/mm/aaaa");window.alert(data_aniv);

</script></head><body></body></html>

Page 48: Javascript   aula 01 - visao geral

Atrelar um Evento com JavaScript

48

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"><head><title>Atrelar um Evento com JavaScript</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head><body><h1>Evento onclick - Click os botões abaixo</h1><button type="button" onclick="alert('Caixa de alerta');">Alert</button> <button type="button" onclick="confirm('Caixa de confirmação');">Confirm</button> <button type="button" onclick="prompt('Caixa de dados');">Prompt</button>

</body></html>

Page 49: Javascript   aula 01 - visao geral

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

49

Page 50: Javascript   aula 01 - visao geral

Sistema Léxico da JavaScript• Arrays: conjunto de zero ou mais valores;

• separados por vírgula e envolvidos por [];

• Índice sequencial começando com zero;

• Sintaxe:

• frutas = [“laranja”, “pera”, “goiaba”];

• ArrayMisto = [“laranja”, 34, “casa”, true, [1,3,5], a+b];

50

Page 51: Javascript   aula 01 - visao geral

51

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"><head><script type="text/javascript">

a = 4; b = 12;arrayMisto = [ "laranja", 34, "casa", true, [1,3,5], a+b ];var executar = function( ) {

alert( arrayMisto[0] );alert( arrayMisto[1] );alert( arrayMisto[3] );alert( arrayMisto[4][1] );alert( arrayMisto[5] );

}</script></head><body><h1>Arrays literais</h1><button type="button" onclick="executar()">Mostrar array</button></body></html>

Page 52: Javascript   aula 01 - visao geral

Sistema Léxico da JavaScript

• Objetos: literais objetos são conjuntos de pares nome/valor separados por vírgula e envolvidos por chaves ({});

52

Page 53: Javascript   aula 01 - visao geral

53

Carro = {

marca: “Renault”, //propriedade/valormodelo: “Logan”, //propriedade/valoripva: “valor(‘rb15’)”, //propriedade/métododimensoes:{

c: “4.250mm”l: “1.735mm”h: “1.525mm”

}};

Sintaxe:

Page 54: Javascript   aula 01 - visao geral

54

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"><head><script type="text/javascript">Carro = { marca: "Renault", modelo: "Logan", ipva: "valor('rb15')", dimensoes: { c: "4.250mm", l: "1.735mm", h:"1.525mm" }}marca = Carro.marca;modelo = Carro.modelo;comprimento = Carro.dimensoes.c;

executar = function() {alert( marca ); alert( modelo ); alert( comprimento ); }</script></head><body><h1>Literais objetos.</h1><button type="button" onclick="executar()">Mostrar propriedades</button></body></html>

Page 55: Javascript   aula 01 - visao geral

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.

55

Page 56: Javascript   aula 01 - visao geral

Sistema Léxico da JavaScript• Exemplo de nomes de variáveis:

• a

• _xpto

• minha_variavel

• minhaVariavel

• minha-variavel

• cd456

56

Page 57: Javascript   aula 01 - visao geral

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;

57

Page 58: Javascript   aula 01 - visao geral

Sistema Léxico da JavaScript

58

JavaScript Ŷ Guia do Programador56

Ŷ� Evite nomes de variáveis como a, f34, YDULDYHO3DUD$UPD]HQDU8P2EMHWR, pois são muito sucintas ou verbosas. Use as letras i, j, k,... para nomear variáveis contadoras.

Ŷ� Variáveis nomeadas com um nome composto podem ser escritas de várias formas. Por exemplo: nomevendedor, nome-vendedor, nome_vendedor e�QRPH9HQGHGRU são todos nomes válidos e podemos escolher qualquer um deles. As formas mais usadas são nome_vendedor e QRPH9HQGHGRU, e essa última usa a grafia conhecida como CamelCase. O importante é que o desenvolvedor escolha uma das formas mostradas ou mesmo outra forma válida por ele inventada e adote-a para desenvolver todos os seus projetos, mantendo a consistência de escrita.

Ŷ� Há, ainda, restrição final para escolher nomes de variáveis. Algumas palavras fazem parte da sintaxe da linguagem JavaScript e não podem ser usadas para nomear variáveis. Tais palavras estão agrupadas em três categorias distintas, a saber: palavras próprias e internas da JavaScript (Tabela 1.4), palavras reservadas pelas especificações ECMA-262 para uso em futuras versões da JavaScript (Tabe-la 1.5) e palavras que fazem parte da implementação JavaScript nos dispositivos que hospedam a linguagem, como um navegador, por exemplo (Tabela 1.6).

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

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

Page 59: Javascript   aula 01 - visao geral

Sistema Léxico da JavaScript

59

JavaScript Ŷ Guia do Programador56

Ŷ� Evite nomes de variáveis como a, f34, YDULDYHO3DUD$UPD]HQDU8P2EMHWR, pois são muito sucintas ou verbosas. Use as letras i, j, k,... para nomear variáveis contadoras.

Ŷ� Variáveis nomeadas com um nome composto podem ser escritas de várias formas. Por exemplo: nomevendedor, nome-vendedor, nome_vendedor e�QRPH9HQGHGRU são todos nomes válidos e podemos escolher qualquer um deles. As formas mais usadas são nome_vendedor e QRPH9HQGHGRU, e essa última usa a grafia conhecida como CamelCase. O importante é que o desenvolvedor escolha uma das formas mostradas ou mesmo outra forma válida por ele inventada e adote-a para desenvolver todos os seus projetos, mantendo a consistência de escrita.

Ŷ� Há, ainda, restrição final para escolher nomes de variáveis. Algumas palavras fazem parte da sintaxe da linguagem JavaScript e não podem ser usadas para nomear variáveis. Tais palavras estão agrupadas em três categorias distintas, a saber: palavras próprias e internas da JavaScript (Tabela 1.4), palavras reservadas pelas especificações ECMA-262 para uso em futuras versões da JavaScript (Tabe-la 1.5) e palavras que fazem parte da implementação JavaScript nos dispositivos que hospedam a linguagem, como um navegador, por exemplo (Tabela 1.6).

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

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

Page 60: Javascript   aula 01 - visao geral

Sistema Léxico da JavaScript

60

57Capítulo 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

/HPEUH�VH�GH�TXH�-DYD6FULSW�p�VHQVtYHO�DR�WDPDQKR�GD�FDL[D��FDVH�VHQVLWLYH���$VVLP��DV� YDULiYHLV�nomevendedor, nome-vendedor, nome_vendedor e QRPH9HQGHGRU VmR�GLIHUHQWHV�

1.9.1 Declarar variáveisJavaScript é uma linguagem de programação não tipificada, pois, ao contrário da maioria das linguagens de programação, as variáveis da JavaScript podem conter qualquer tipo de dado. Observe o exemplo a seguir:

...PLQKD9DULDYHO� ��$O{�0XQGR��// aqui scriptPLQKD9DULDYHO� �����// aqui mais script...

Note que a variável PLQKD9DULDYHO começa com um valor do tipo string e, em um ponto posterior no script, a mesma variável assume um valor tipo numérico. Tal fato é legal em JavaScript, pois a linguagem reconhece o tipo de dado quando a variável é declarada. Na maioria das linguagens de programação, isso é ilegal, pois uma determinada variável deverá ser declarada para um tipo de dado e conter sempre esse tipo.

Um conceito importante ao declararmos uma variável é o chamado escopo da variável, que é o ambiente ou, mais precisamente, o trecho ou região do script no qual a variável assume o valor que foi para ela declarado.

Uma variável pertence ao escopo global e denomina-se variável global quando seu valor é reconhecido em qualquer trecho do script. Por outro lado, diz-se que uma variável é local e pertence ao escopo local quando seu valor é reconhecido somente no trecho do script no qual ela foi declarada.

Page 61: Javascript   aula 01 - visao geral

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

61

Page 62: Javascript   aula 01 - visao geral

<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>

62

Page 63: Javascript   aula 01 - visao geral

63

• <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>

Page 64: Javascript   aula 01 - visao geral

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!”;

64

Page 65: Javascript   aula 01 - visao geral

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:

65

var a = null;

var a;

var a = 3 * “Olá”;

-1.7976931348623157e+308 e 1.7976931348623157e+308

Page 66: Javascript   aula 01 - visao geral

Sistema Léxico da JavaScript• Objeto Global

• Quando abrimos o navegador, cria-se um objeto global Window;

• Esse objeto tem todas as propriedades e métodos da linguagem e do navegador;

• Pode-se fazer referência ao objeto window usando this quando usada fora do corpo de uma função:

66

window.alert(“Olá mundo”); <=> this.alert (“Olá mundo”);

Page 67: Javascript   aula 01 - visao geral

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().

67