Javascript aula 01 - visao geral

2,433 views
2,303 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,433
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
178
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Javascript aula 01 - visao geral

  1. 1. JavaScript - Introdução Cristiano Pires Martins 1
  2. 2. Referência • Silva, Maurício Samy (Maujor), JavaScript: Guia do Programador. São Paulo: Novatec Editora, 2010. 2
  3. 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. 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. 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. 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. 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. 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. 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. 10. Funcionalidades • Interagir com outras linguagens dinâmicas • Pode ser usada em conjunto com outras linguagens. 10
  11. 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. 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. 13. Camadas de Desenvolvimento • Camadas de Desenvolvimento • Estruturação de Conteúdo: HTML; • Apresentação: CSS; • Comportamento: Scripts. 13
  14. 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. 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. 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. 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. 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. 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. 20. Inserir JavaScript na HTML • Incorporado: na seção head; ... <head> ... <script type="text/javascript"> ... </script> ... </head> ... 20
  21. 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. 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. 23. Sistema Léxico da JavaScript • Comentários: • Em linha única: • // • <!-- (não precisa fechar) • Em múltiplas linhas: • /* ... */ 23
  24. 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. 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. 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. 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. 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. 29. Sistema Léxico da JavaScript • Literais: designa qualquer tipo de dados • Exemplo: • a = 45; • mensagem = “Alô mundo!”; 29
  30. 30. Sistema Léxico da JavaScript • Tipos de Dados Literais: • inteiros; • decimais; • booleanos; • strings; • arrays; • objetos. 30
  31. 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. 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. 33. Sistema Léxico da JavaScript • Booleanos (exemplo): • a = true; • b = false; 33
  34. 34. Sistema Léxico da JavaScript • String (exemplo): • mensagem = “Olá! n Tudo bem?”; 34
  35. 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. 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. 37. 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
  38. 38. 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>
  39. 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. 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. 41. Objeto Window • Comando responsável por estabelecer uma melhor interação com o usuário. 41
  42. 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. 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. 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. 45. 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>
  46. 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. 47. 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á visitantenInforme a data do seu nascimento.", "dd/mm/aaaa"); window.alert(data_aniv); </script> </head> <body> </body> </html>
  48. 48. 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>
  49. 49. 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
  50. 50. 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. 51. 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>
  52. 52. 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. 53. 53 Carro = { marca:“Renault”, //propriedade/valor modelo: “Logan”, //propriedade/valor ipva:“valor(‘rb15’)”, //propriedade/método dimensoes: { c:“4.250mm” l:“1.735mm” h:“1.525mm” } }; Sintaxe:
  54. 54. 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>
  55. 55. 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
  56. 56. Sistema Léxico da JavaScript • Exemplo de nomes de variáveis: • a • _xpto • minha_variavel • minhaVariavel • minha-variavel • cd456 56
  57. 57. 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
  58. 58. Sistema Léxico da JavaScript 58 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
  59. 59. Sistema Léxico da JavaScript 59 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
  60. 60. Sistema Léxico da JavaScript 60 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
  61. 61. 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
  62. 62. <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. 63. 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>
  64. 64. 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
  65. 65. 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
  66. 66. 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”);
  67. 67. 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

×