Programação Dinâmica para Web - 2016.1 - Aula 5

442 visualizações

Publicada em

Programação Dinâmica para Web - 2016.1 - Aula 5

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
442
No SlideShare
0
A partir de incorporações
0
Número de incorporações
120
Ações
Compartilhamentos
0
Downloads
16
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Programação Dinâmica para Web - 2016.1 - Aula 5

  1. 1. Programação Dinâmica para Web Prof.º Thyago Maia Sistemas para Internet
  2. 2. Objetivos Aula 5: Javascript • Introduzir a Linguagem Javascript • Apresentar alguns conceitos básicos da linguagem • Fazer com que o aluno desenvolva seus primeiros scripts 2
  3. 3. Javascript
  4. 4. Javascript  É uma linguagem de programação script;  Permite que códigos de programação possam ser inseridos em páginas HTML;  Pode ser executada por todos os navegadores (browsers) modernos;  Linguagem de programação simples e leve; 4
  5. 5. Como inserir Javascript no HTML
  6. 6. Como inserir Javascript no HTML  Temos 3 formas:  Delimitando o código a partir dos conjuntos de tags HTML <script></script> em um documento HTML;  Normalmente logo após a tag <body>;  Relacionando um arquivo externo a partir do atributo src na tag de abertura do conjunto <script></script>;  Normalmente entre as tags <head></head>;  Implementando o script em um atributo de tag; 6
  7. 7. Como inserir Javascript no HTML  Exemplo – Importação de Script: 7 <html> <head> <script type=“text/javascript” src=“meu_script.js”> </head> <body> <!-- ... -->
  8. 8. Como inserir Javascript no HTML  Exemplo – Embarcando Javascript no HTML: 8 <html> <body> <script> // Código-fonte Javascript </script> </body> </html>
  9. 9. Forma Geral de um Javascript
  10. 10. Forma geral de um Javascript  Normalmente um script delimita blocos de instruções a partir de funções (functions): 10 <html> <body> <script> function exemplo1() { // Código-fonte da função } function exemplo2() { // Código-fonte da função } </script> <!-- ... -->
  11. 11. Sintaxe Básica
  12. 12. Sintaxe Básica  Declaração de variáveis será acompanhada da palavra reservada var;  Instruções, Operadores, Estruturas condicionais e de repetição terão sintaxe muito similares às utilizadas em C e Java;  Javascript faz uso de nós DOM para ter acesso às informações de documentos HTML; 12
  13. 13. Sintaxe Básica  DOM (Document Object Model)  Para o DOM, tudo no HTML é um nó (objeto):  O documento HTML;  Elementos HTML;  Atributos HTML;  Texto delimitado por tags HTML;  Etc...;  Para manipular dinamicamente hipertexto, utilizamos tais objetos; 13
  14. 14. Sintaxe Básica  Para executar funções Javascript dinamicamente, utilizamos atributos HTML que representam eventos. Exemplos:  Clicar em um botão: onclick;  Alterar o foco de um campo: onchange;  Concluir o carregamento de página: onload;  Efetuar uma submissão de formulário: onsubmit;  Tais atributos terão como valores uma chamada de função Javascript; 14
  15. 15. Exemplos de Uso
  16. 16. Exibição de Janelas de Diálogo
  17. 17. Exemplo 17 <!– Exemplo --> <html> <body> <script> function confirmacao() { confirm("Parabéns!"); } </script> <button type="button" onclick="confirmacao()">Exibir</button> </body> </html>
  18. 18. Exemplo 18 <!– Exemplo --> <html> <body onload="confirmacao()"> <script> function confirmacao() { confirm("Página carregada com sucesso!"); } </script> Sport Campeão de 87 </body> </html>
  19. 19. Exemplo 19 <!– Exemplo --> <html> <body> <script> function confirmacao() { confirm("Submissão realizada"); } </script> <form onsubmit="confirmacao()"> <input type=“submit” value=“Submeter”> </form> </body> </html>
  20. 20. Exibição de Janelas de Entrada
  21. 21. Exemplo 21 <!– Exemplo --> <html> <body> <script> function programa() { var nome = prompt(“Qual o seu nome?”); confirm(“Seja bem vindo, “ + nome); } </script> <button type="button" onclick=“programa()">Iniciar</button> </body> </html>
  22. 22. Obtendo dados de campos de formulário
  23. 23. Exemplo 23 <!– Exemplo --> <html> <body> <script> function checa_time() { var t = document.getElementById("time").value; if (t == 'Sport') alert("Parabéns!"); else alert("Erro!"); } </script> Time: <input type="text" id="time” onchange="checa_time()" /> </body> </html>
  24. 24. Alterar formatação de um elemento HTML
  25. 25. Exemplo 25 <!– Exemplo --> <html> <body> <script> function aumenta() { document.getElementById("palavra").style.fontSize = "60px"; } </script> <div id="palavra">Ola, mundo!!!</div> <button type="button" onclick="aumenta()">Aumenta</button> </body> </html>
  26. 26. Exemplo 26 <!– Exemplo --> <html> <body> <script> function azul() { document.getElementById("palavra").style.color = “blue"; } </script> <div id="palavra">Ola, mundo!!!</div> <button type="button" onclick=“azul()">Muda Cor</button> </body> </html>
  27. 27. Exemplo 27 <!– Exemplo --> <html> <body> <script> function vermelho() { document.getElementById("palavra").style.backgroundColor = “red"; } </script> <div id="palavra">Ola, mundo!!!</div> <button type="button" onclick=“vermelho()">Muda Cor</button> </body> </html>

×