Tecnologias para Internet - 2015.1 - Aula 5

457 visualizações

Publicada em

Tecnologias para Internet - 2015.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
457
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
16
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Tecnologias para Internet - 2015.1 - Aula 5

  1. 1. Tecnologias para Internet Prof.º Thyago Maia Gestão da TI – 2015.1
  2. 2. Prática em Laboratório • Faça um Portal que aborde o seguinte conteúdo: “TI e Gestão a Serviço da Sociedade Digital na Área de Medicina” (Tema do Integrador). (0,0 a 5,0 pontos) – Data de entrega: Até 31/03/2015; – Grupos de até 5 alunos; – Critérios de avaliação: • Presença de um “menu” em cada página HTML (links que direcionam o usuário para cada página do portal); (0,0 a 1,0 ponto) • As páginas do portal refletem totalmente ou parcialmente o conteúdo proposto; (0,0 a 1,0 ponto) • Uso de CSS; (0,0 a 1,0 ponto) • Formatação; (0,0 a 1,0 ponto) • Publicação na Web (Ex.: http://www.xpg.com.br); (0,0 a 1,0 ponto) 2
  3. 3. Objetivos Aula 5: Javascript • Introduzir a Linguagem Javascript • Apresentar alguns conceitos básicos da linguagem • Fazer com que o aluno desenvolva seus primeiros scripts 3
  4. 4. Javascript
  5. 5. 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; 5
  6. 6. A TAG <script>
  7. 7. A TAG <script>  Para inserir código Javascript em uma página HTML, utiliza-se o conjunto de tags <script></script>;  Tais TAGs irão delimitar o código-fonte Javascript; 7
  8. 8. A TAG <script>  Exemplo: 8 <html> <body> <script> // Código-fonte Javascript </script> </body> </html>
  9. 9. Exemplos
  10. 10. Exemplo 1 10 <!– Exemplo --> <html> <body> <script> function confirmacao() { confirm("Parabéns!"); } </script> <button type="button" onclick="confirmacao()">Exibir</button> </body> </html>
  11. 11. Exemplo 2 11 <!– 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>
  12. 12. Exemplo 3 12 <!– 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" /> <button type="button" onclick="checa_time()">Checar</button> </body> </html>
  13. 13. Exemplo 4 13 <!– 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>
  14. 14. Exemplo 5 14 <!– Exemplo --> <html> <body> <script> function muda() { document.getElementById("palavra").innerHTML = "LIGADO"; } </script> <div id="palavra">DESLIGADO<div> <button type="button" onclick="muda()">Ligar</button> </body> </html>
  15. 15. Exemplo 6 15 <!– Exemplo --> <html> <body> <script> function muda() { document.getElementById("texto2").value = "Surpresa!"; } </script> <input id="texto1" type="text" onchange="muda()" /><br/> <input id="texto2" type="text" /> </body> </html>
  16. 16. Exercícios
  17. 17. Exercícios • Faça um script que receba a idade de um indivíduo e informe se o mesmo atingiu a maioridade. 17
  18. 18. Exercícios 18 <!– Exemplo --> <html> <body> <script> function checa() { if(document.getElementById('idade').value >= 18) alert('É de maior'); else alert('É de menor'); } </script> <input id="idade" type="text" /><br/> <button type="button" onclick="checa()">Checa</button> </body> </html>
  19. 19. Exercícios • Faça um script que lê o salário base de um funcionário, calcula e mostra o salário a receber, sabendo-se que o funcionário tem gratificação de 5% sobre o salário base e paga imposto de 7% sobre este salário. 19
  20. 20. Exercícios 20 <!– Exemplo --> <html> <body> <script> function calcula() { var salario = document.getElementById('salario').value; var grat = salario * 0.05; var imposto = salario * 0.07; alert(parseFloat(salario) + parseFloat(grat) - parseFloat(imposto)); } </script> <input id="salario" type="number" /><br/> <button type="button" onclick="calcula()">Calcula</button> </body> </html>
  21. 21. Exercícios • Faça um algoritmo que lê o código correspondente ao cargo de um funcionário, seu salário atual e escreva o cargo correspondente, o valor do aumento e seu novo salário. 21 CÓDIGO CARGO PERCENTUAL 1 ESCRITURÁRIO 50% 2 SECRETÁRIO 35% 3 CAIXA 20% 4 GERENTE 10% 5 DIRETOR Não tem aumento
  22. 22. Exercícios 22 <!– Exemplo --> <html> <body> <script> function calcula() { var codigo = document.getElementById('codigo').value; var salario = document.getElementById('salario').value; if(codigo == 1) { alert("Escriturário. Novo Salário: " + (salario * 0.5 + parseFloat(salario))); } // ... } </script>
  23. 23. Exercícios 23 <!– Exemplo --> Codigo: <input id="codigo" type="number" /><br/> Salario: <input id="salario" type="number" /><br/> <button type="button" onclick="calcula()">Calcula</button> </body> </html>
  24. 24. Exercícios • Faça um script que simula uma calculadora simples (calcula apenas as operações básicas entre números inteiros); 24
  25. 25. Exercícios 25 <!– Exemplo – Parte 1 --> <html> <body> <script> function calcula() { var num1 = document.getElementById('num1').value; var num2 = document.getElementById('num2').value; var resultado; if(document.getElementById('operador').value == "+") resultado = (parseInt(num1) + parseInt(num2)); if(document.getElementById('operador').value == "-") resultado = (num1 - num2); if(document.getElementById('operador').value == "*") resultado = (num1 * num2); if(document.getElementById('operador').value == "/") resultado = (num1 / num2); alert(resultado); } </script>
  26. 26. Exercícios 26 <!– Exemplo – Parte 2 --> <input id="num1" type="number" /> <select id="operador"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input id="num2" type="number" /> <button type="button" onclick="calcula()">=</button> </body> </html>

×