Javascript aula 01 - visao geral

JavaScript - IntroduçãoCristiano Pires Martins

1

Referência

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

2

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

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

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

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

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

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

Funcionalidades• Interagir com Formulários

• É capaz de acessar formulários HTML;

• Validar os dados;

• Realizar cálculos;

• Fornecer dicas de preenchimento dos campos.

9

Funcionalidades

• Interagir com outras linguagens dinâmicas

• Pode ser usada em conjunto com outras linguagens.

10

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

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

Camadas de Desenvolvimento

• Camadas de Desenvolvimento

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

• Apresentação: CSS;

• Comportamento: Scripts.

13

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

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

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

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

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

Inserir JavaScript na HTML

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

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

19

Inserir JavaScript na HTML

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

</head>...

20

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

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

Sistema Léxico da JavaScript• Comentários:

• Em linha única:

• //

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

• Em múltiplas linhas:

• /* ... */

23

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

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

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

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

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!

Sistema Léxico da JavaScript

• Literais: designa qualquer tipo de dados

• Exemplo:

• a = 45;

• mensagem = “Alô mundo!”;

29

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

• inteiros;

• decimais;

• booleanos;

• strings;

• arrays;

• objetos.

30

Sistema Léxico da JavaScript

• Inteiros (exemplos):

• c = 32; //base 10

• d = -119; //base 10

• e = 0x110B6; //base hexadecimal

• f = 0xf56a2; //base hexadecimal

31

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

Sistema Léxico da JavaScript

• Booleanos (exemplo):

• a = true;

• b = false;

33

Sistema Léxico da JavaScript

• String (exemplo):

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

34

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

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

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

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>

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

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

Objeto Window

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

41

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

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>

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>

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>

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

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>

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>

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

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

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>

Sistema Léxico da JavaScript

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

52

53

Carro = {

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

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

}};

Sintaxe:

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>

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

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

• a

• _xpto

• minha_variavel

• minhaVariavel

• minha-variavel

• cd456

56

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

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

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

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.

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

<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

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>

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

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

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

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