Curso de Gestão da Informação Prof. Dr. Daniel A. Furtado Módulo 4 – Introdução ao JavaScript Universidade Federal de Uberlândia Faculdade de Computação.

Apresentação em tema: "Curso de Gestão da Informação Prof. Dr. Daniel A. Furtado Módulo 4 – Introdução ao JavaScript Universidade Federal de Uberlândia Faculdade de Computação."— Transcrição da apresentação:

1 Curso de Gestão da Informação Prof. Dr. Daniel A. Furtado Módulo 4 – Introdução ao JavaScript Universidade Federal de Uberlândia Faculdade de Computação

2  JavaScript é uma linguagem de script orientada a objetos utilizada para desenvolvimento de aplicações Web;  A linguagem foi introduzida pela Netscape em 1995;  Os scripts em JavaScript são executados no lado do cliente, ou seja, no browser do usuário; Programação para Internet - Prof. Dr. Daniel A. Furtado 2

3  Em geral, o JavaScript deve ser utilizado em situações que exigem dinamismo e respostas imediatas do usuário, como, por exemplo:  Inserir e manipular elementos multimídia, como ocultar ou redimensionar imagens;  Criar páginas dinâmicas com base em escolhas do usuário, datas ou outros dados;  Pré-validar formulários, sugerindo correções em campos, etc;  Entretanto, questões relacionadas à segurança da aplicação, como validação efetiva dos formulários, validação de usuários, etc, devem ser implementadas em linguagem no lado do servidor, como PHP, ASP, etc. Programação para Internet - Prof. Dr. Daniel A. Furtado 3

4  Na página HTML, o código em JavaScript pode ser inserido em qualquer lugar, desde que esteja dentro do elemento  Pode-se utilizar a tag // código  Mas também é possível a inserção em arquivo separado com a extensão.js.  JavaScript é case sensitive;  Declarações em JavaScript devem terminar com o ponto-e-vírgula; Programação para Internet - Prof. Dr. Daniel A. Furtado 4

5  window.alert(“mensagem”); ou alert(“mensagem”);  Função que exibe uma caixa de diálogo contendo uma mensagem;  window é um objeto; alert é um método ; Programação para Internet - Prof. Dr. Daniel A. Furtado 5 1. 2. 3. Exemplo javascript 01 4. 5. 6. alert("Olá, mundo!"); 7. 8. 9. 10. JavaScript: Exemplo 1 11. 12.

6  Escrevendo no documento com o método write; Programação para Internet - Prof. Dr. Daniel A. Furtado 6 1. 2. 3. Outro exemplo simples 4. 5. document.write("Este texto foi gerado utilizando JavaScript"); 6. 7. 8. 9.

7  Comentários em JavaScript são inseridos exatamente como em C, C++ ou Java:  Utiliza-se // para um comentário de linha;  Comentários em bloco são da forma /* comentário */ Programação para Internet - Prof. Dr. Daniel A. Furtado 7 1.... 2. 3. /* Este eh um comentario de 4. multiplas linhas em JavaScript */ 5. alert('Olá, mundo!!'); 6. 7. // Este é um comentário de linha 8. <!–- Este também é um comentário de linha aceito em JavaScript 9. 10....

8  Variáveis podem ser declaradas com ou sem a palavra var;  Porém, o seu tipo é determinado automaticamente; Programação para Internet - Prof. Dr. Daniel A. Furtado 8 1. 2. 3. Outro exemplo simples 4. 5. var a = 1; b = 2; c = 3; 6. var delta = b*b - 4*a*c; 7. document.write('O valor do discriminante eh: ' + delta); 8. var str = 'Programação para Internet'; // str é uma string 9. var A = true; // A é uma variável booleana 10. 11. 12. 13.

9  Alguns atributos HTML também podem incluir código JavaScript Programação para Internet - Prof. Dr. Daniel A. Furtado 9 1. 2. Teste JavaScript 3. 4. Clique aqui! 5. 6.

10 Programação para Internet - Prof. Dr. Daniel A. Furtado 10 OperadorSignificado = Atribuição var x = 0; // atribui o valor 0 a x += Atribuição com soma var x += y; // equivalente a: x = x + y -= Atribuição com subtração var x += y; // equivalente a: x = x - y *= Atribuição com multiplicação var x *= y; // equivalente a: x = x * y /= Atribuição com divisão var x /= y; // equivalente a: x = x / y %= Atribuição com módulo var x %= y; // equivalente a: x = x % y

11 Programação para Internet - Prof. Dr. Daniel A. Furtado 11 OperadorSignificado + Adição - Subtração * Multiplicação / Divisão % Resto da divisão inteira (módulo) ++ Incremento -- Decremento

12 Programação para Internet - Prof. Dr. Daniel A. Furtado 12 OperadorSignificado == Comparação por igualdade != Diferente > Maior que >= Maior ou igual a < Menor que <= Menor ou igual a && “E” lógico || “Ou” lógico ! Negação lógica

13  Declaração if simples  Declaração if-else Programação para Internet - Prof. Dr. Daniel A. Furtado 13 if (expressão) { // operações a serem executadas // caso 'expressao' seja verdadeira } if (expressão) { // operações a serem executadas caso 'expressao' seja verdadeira } else { // operações a serem executadas caso 'expressao' seja falsa }

14  Declarações if-else aninhadas Programação para Internet - Prof. Dr. Daniel A. Furtado 14 if (expressao1) { // ops. a serem executadas caso 'expressao1' seja verdadeira } else if (expressao2) { // ops. a serem executadas caso 'expressao2' seja verdadeira } else if (expressao3) { // ops. a serem executadas caso 'expressao3' seja verdadeira } else { // ops. a serem executadas caso nenhuma expressão seja verdadeira }

15  Permite comparar uma expressão com diversas condições possíveis: Programação para Internet - Prof. Dr. Daniel A. Furtado 15 switch (expressao){ case condicao1: // bloco de operações break; case condicao1: // bloco de operações break;... case condicaon: // bloco de operações break; default: // bloco de operações }

16 Exemplo: Programação para Internet - Prof. Dr. Daniel A. Furtado 16 switch (new Date().getDay()) { case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Wednesday"; break; case 4: day = "Thursday"; break; case 5: day = "Friday"; break; case 6: day = "Saturday"; break; }

17  Repete um bloco de declarações enquanto uma expressão for verdadeira;  “operação” while (expressao) { // operações a serem executadas // enquanto 'expressao' for // verdadeira }

18  Semelhante à estrutura while, porém a condição é verificada após a execução do bloco de operações;  “operação” do { // Operações a serem executadas // enquanto 'expressao' for // verdadeira; // Este bloco de operações é sempre // executado pelo menos uma vez } while (expressao)

19  A estrutura for compreende três partes principais:  initialization: declaração executada uma única vez, antes do laço ter início;  test condition: condição que é verificada antes da execução do bloco de operações; se for verdadeira, o bloco é executado; se for falsa, o laço encerra.  iteration statement: executada após a execução do bloco de operações  Exemplo: for (initialization; test condition; iteration statement) { // operações a serem executadas caso // 'test condition' seja verdadeira } var soma = 0; for (var i=0; i<10; i++) { soma += i; } alert('A soma dos números de 0 a 10 é: ' + soma);

20  Sintaxe:  Exemplo: Programação para Internet - Prof. Dr. Daniel A. Furtado 20 function nomeFuncao(args) { // operações da função }... function max(a, b) { if (a > b) return a; else return b; }... alert('O maior numero entre 5 e 8 eh: ' + max(5,8));

21  Caso um argumento deixe de ser fornecido na chamada da função, o parâmetro correspondente receberá o valor undefined;  Exemplo:  OBS: O esquecimento de um argumento poderá causar erros inesperados. Programação para Internet - Prof. Dr. Daniel A. Furtado 21 1. function potencia(base, expoente) { 2. if (expoente == undefined) 3. expoente = 2; 4. 5. var resultado = 1; 6. for (var i = 0; i < expoente; i++) 7. resultado *= base; 8. return resultado; 9. } 10. console.log(potencia(2,5)); // a saída será 32 11. console.log(potencia(3)); // a saída será 9

22  A função confirm apresenta uma caixa de diálogo solicitando uma confirmação do usuário, geralmente com os botões “Ok” e “Cancelar”;  Devolve verdadeiro quando o botão “Ok” é pressionado; ou falso caso seja o botão “Cancelar”; Programação para Internet - Prof. Dr. Daniel A. Furtado 22 1.... 2. if (confirm('Deseja ir para o site da UFU?')) 3. window.location = "http://www.ufu.br"; 4....

23  A função prompt apresenta uma caixa de diálogo com um campo para preenchimento;  Retorna a string correspondente ou null caso o usuário clique no botão “Cancelar”; Programação para Internet - Prof. Dr. Daniel A. Furtado 23 1.... 2. var nome = prompt('Informe o seu nome:'); 3. if (nome != null) 4. alert('Bem vindo, ' + nome); 5....

24 1. 2. 3. 4. 5. Cabeçalhos 6. 7. function fatorial(n) { 8. var total = 1; 9. for (var i = 1; i <= n; i++) { 10. total = total * i; 11. } 12. 13. return total; 14. } 15. 16. function calculaFatorial() { 17. var num = prompt("Informe um numero inteiro positivo: "); 18. var numInt = parseInt(num); // converte a string em inteiro 19. var fat = fatorial(numInt); 20. document.write('O fatorial eh: ' + fat); 21. } 22. 23. 24. 25. 26. 27. 24

25  A depuração do código JavaScript pode ser realizada nos principais navegadores;  No caso do Google Chrome, siga os passos a seguir:  Pressione a tecla F12;  Escolha a aba sources e selecione o arquivo contendo o script;  Clique na linha de código que deseja interromper a execução;  Recarregue a página (F5);  Tecle F10 para executar o script passo a passou ou F8 para continuar a execução até o próximo breakpoint;  Acompanhe o valor das variáveis no painel lateral.

26

27  O código JavaScript pode ser inserido em arquivo separado e referenciado no arquivo HTML; Programação para Internet - Prof. Dr. Daniel A. Furtado 27 1. 2. 3. Cabeçalhos 4. 5. 6. 7. 8. 1. /* arquivo script.js */ 2. function fatorial(n) { 3. var total = 1; 4. for (var i = 1; i <= n; i++) { 5. total = total * i; 6. } 7. return total; 8. } 9. 10. function calculaFatorial() { 11. var num = prompt("Informe um numero inteiro positivo: "); 12. var numInt = parseInt(num); // converte a string em inteiro 13. var fat = fatorial(numInt); 14. document.write('O fatorial eh: ' + fat); 15. }

28  Em JavaScript, vetores (arrays) podem ser definidos colocando-se os elementos entre colchetes, separados por vírgula;  O primeiro elemento do array possui índice 0;  Os vetores são tratados como objetos; por exemplo, o número de elementos pode ser resgatado por meio da propriedade length;  Exemplo: Programação para Internet - Prof. Dr. Daniel A. Furtado 28 1. 2. var vetorDeNumeros = [4,1,6,3,8,1]; 3. var soma = 0; 4. for (var i=0; i < vetorDeNumeros.length ; i++) 5. soma = soma + vetorDeNumeros[i]; 6. 7. alert('A soma dos elementos do vetor eh: ' + soma); 8. 9.

29  É possível ter vetores com elementos de tipos diferentes; Programação para Internet - Prof. Dr. Daniel A. Furtado 29 1. 2. var vet = [5,'a',3,'java',2]; 3. 4. console.log(vet[1]); // a saída será o caracter 'a' 5. console.log(vet[2]) // a saída será o número 3 6. 7.

30  Em JavaScript, os vetores também podem ser utilizados como uma estrutura de dados pilha:  O método push insere um novo elemento no final (‘topo’) do vetor;  O método pop remove e retorna o último elemento do vetor; Programação para Internet - Prof. Dr. Daniel A. Furtado 30 1. 2. var vet = []; 3. 4. vet.push("Programacao"); 5. vet.push("para"); 6. vet.push("Internet"); 7. console.log(vet); // A saída será: ["Programacao", "para", "Internet"] 8. 9. var ultimo = vet.pop(); 10. console.log(ultimo); // A saída será: 'Internet' 11. console.log(vet); // A saída será: ["Programacao", "para"] 12. 13.

31 Programação para Internet - Prof. Dr. Daniel A. Furtado 31  DOM: Document Object Model  É um modelo utilizado pelos navegadores no qual os elementos de uma página Web são representados como uma hierarquia de objetos;

32 Minha página Web Minha página Web Primeiro parágrafo da página Segundo parágrafo com um link. Programação para Internet - Prof. Dr. Daniel A. Furtado 32

33 Programação para Internet - Prof. Dr. Daniel A. Furtado 33  A hierarquia de objetos de um documento também pode ser visualizada como uma árvore contendo nós internos e nós-folha;  No caso do exemplo anterior, temos:

34 Programação para Internet - Prof. Dr. Daniel A. Furtado 34  Assim, tudo no documento HTML corresponde a um nó:  O documento propriamente dito é um nó (do tipo document);  Todos os elementos HTML, como,, etc., são nós (do tipo element);  Todos os atributos HTML são nós (do tipo attribute)  Os textos dentro dos elementos HTML são nós (do tipo text)  E até mesmo os comentários são nós (do tipo comment)

35 Programação para Internet - Prof. Dr. Daniel A. Furtado 35  A estrutura de objetos do documento pode ser acessada por meio do objeto document, que é o nó raiz da hierarquia;  Um elemento específico no documento pode ser resgatado por meio do método getElementById de document;  O texto que compõe o elemento pode ser obtido pela propriedade innerHTML do elemento;

36 1. 2. Teste JavaScript 3. 4. Exemplo JavaScript-DOM 5. Base: 6. Expoente: 7. Calcular! 8. O resultado aparecera neste paragrafo! 9. 10. function calcularPotencia() { 11. 12. var inputBase = document.getElementById('base'); 13. var inputExpo = document.getElementById('expoente'); 14. 15. var base = parseInt(inputBase.value); 16. var expo = parseInt(inputExpo.value); 17. 18. var res = 1; 19. for (var i=0; i < expo; i++) { 20. res = res * base; 21. } 22. document.getElementById('pResultado').innerHTML = res; 23. } 24. 25. 26. Programação para Internet - Prof. Dr. Daniel A. Furtado 36

37 Programação para Internet - Prof. Dr. Daniel A. Furtado 37 1. 2. 3. 4. 5. Microsoft 6. Change link 7. 8. 9. function myFunction() { 10. document.getElementById("myAnchor").innerHTML = "W3Schools"; 11. document.getElementById("myAnchor").href = "http://www.w3schools.com"; 12. document.getElementById("myAnchor").target = "_blank"; 13. } 14. 15. 16. Ref.: www.w3schools.com/

38  Atributos CSS também podem ser explorados com JavaScript  Atenção para atributos com hífen Programação para Internet - Prof. Dr. Daniel A. Furtado 38 1. 2. 3. CSS e JavaScript 4. 5. Clique neste texto para mudar seu estilo! 6. 7. 8. function colorir() { 9. var elementoDiv = document.getElementById("divTexto"); 10. elementoDiv.style.backgroundColor = '#AA0000'; 11. elementoDiv.style.color='white'; 12. elementoDiv.style.textAlign='center'; 13. } 14. 15. 16. 17.

39 1. 2. 3. Validando Formulários com JavaScript 4. 5. function validaForm() { 6. var usuario = document.forms["form1"]["usuario"].value; 7. if (usuario == null || usuario == "") { 8. alert("O campo usuario deve ser preenchido"); 9. usuario.focus(); 10. return false; 11. } 12. var senha = document.forms["form1"]["senha"].value; 13. if (senha == null || senha == "") { 14. alert("O campo senha deve ser preenchido"); 15. return false; 16. } 17. 18. return true; 19. } 20. 21. 22. 23. 24. Usuário: 25. Senha: 26. 27. Programação para Internet - Prof. Dr. Daniel A. Furtado 39

40 1. 2. 3. Validando Formulários com JavaScript 4. 5. 6. Usuário: 7. Senha: 8. 9. 10. 11. 12. Programação para Internet - Prof. Dr. Daniel A. Furtado 40 Atributo required

41  www.eloquentjavascript.net www.eloquentjavascript.net  www.w3schools.com/js/ Programação para Internet - Prof. Dr. Daniel A. Furtado 41