Embed Size (px)
DESCRIPTION
Tecnologias para Internet - 2014.2 - Aula 5
Citation preview
Tecnologias para Internet
Prof.º Thyago MaiaGestão da TI – 2014.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é 16/09/2014;– Grupos de até 4 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
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
Javascript
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
A TAG <script>
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
A TAG <script>
Exemplo:
8
<html>
<body>
<script>// Código-fonte Javascript
</script>
</body>
</html>
Exemplos
Exemplo 1
10
<!– Exemplo --><html>
<body>
<script> function checa_data() { 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_data()">Checar</button>
</body>
</html>
Exemplo 2
11
<!– 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>
Exemplo 3
12
<!– 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>
Exemplo 4
13
<!– 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>
Exercícios
Exercícios
• Faça um script que receba a idade de um indivíduo e informe se o mesmo atingiu a maioridade.
15
Exemplo
16
<!– 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>
Exercício
• 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.
17
Exemplo
18
<!– 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>
Exercício
• 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.
19
CÓDIGO CARGO PERCENTUAL
1 ESCRITURÁRIO 50%
2 SECRETÁRIO 35%
3 CAIXA 20%
4 GERENTE 10%
5 DIRETOR Não tem aumento
Exemplo
20
<!– 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>
Exemplo
21
<!– Exemplo -->
Codigo: <input id="codigo" type="number" /><br/> Salario: <input id="salario" type="number" /><br/>
<button type="button" onclick="calcula()">Calcula</button>
</body></html>
Exercício
• Faça um script que simula uma calculadora simples (calcula apenas as operações básicas entre números inteiros);
22
Exemplo
23
<!– 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>
Exemplo
24
<!– 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>
