Embed Size (px)
Citation preview
Programação Dinâmica para Web
Prof.º Thyago MaiaSistemas para Internet
Objetivos
Aula 6: Javascript
• Introduzir a Linguagem Javascript• Apresentar alguns conceitos básicos da
linguagem• Fazer com que o aluno desenvolva seus
primeiros scripts
2
Mudar o conteúdo de um elemento HTML
Exemplo
4
<!– 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 6
5
<!– 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>
Mudar atributos de um elemento HTML
Exemplo
7
<!– Exemplo --><html>
<body>
<script> function mudaFigura() {
var imagem = document.getElementById(“imagem");if(imagem.src.match(“sport2”))
imagem.src = “sport.gif”;else
imagem.src = “sport2.gif”; } </script>
<img id=“imagem” src=“sport.gif” onclick=“mudaFigura()“>
</body>
</html>
Validando Dados
Exemplo
9
<!–- Exemplo --><html> <body>
<script> function validaNegativo() {
var numero = document.getElementById(“campo").value;if(numero >= 0)document.getElementById(“resp").innerHTML = “Inválido”;elsedocument.getElementById(“resp").innerHTML = “Válido”;
} </script>
Digite um número negativo: <input type=“text” id=“campo”> <button type=“button” onclick=“validaNegativo()“>Validar</button> <div id=“resp”></div>
</body></html>
Exercícios
Exercícios
• Faça um documento HTML que permita ao usuário digitar seu RG e CPF. Como tais campos são obrigatórios, faça um script que verifica se os campos realmente foram preenchidos.
11
Exercícios
12
<!– Exemplo -->
<html> <body>
<script> function obrigatorio(x) {
if(x.value == “”)alert(‘Campo obrigatório');
} </script>
RG: <input id=“rg" type="text“ onblur=“obrigatorio(this)” /><br/> CPF: <input id=“cpf" type="text“ onblur=“obrigatorio(this)” /><br/>
</body></html>
Exercícios
• Faça um documento HTML que permita ao usuário digitar sua idade. Em seguida, faça um script que receba a idade do indivíduo e informe se o mesmo atingiu a maioridade.
13
Exercícios
14
<!– 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í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.
15
Exercícios
16
<!– 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í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.
17
CÓDIGO CARGO PERCENTUAL
1 ESCRITURÁRIO 50%
2 SECRETÁRIO 35%
3 CAIXA 20%
4 GERENTE 10%
5 DIRETOR Não tem aumento
Exercícios
18
<!– 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>
Exercícios
19
<!– 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ícios
• Faça um script que simula uma calculadora simples (calcula apenas as operações básicas entre números inteiros);
20
Exercícios
21
<!– 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>
Exercícios
22
<!– 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>
Desafio
• Envie sua solução para [email protected] com o título atividade Javascript• Tal atividade vale 2,0 pontos para a nota do 1º Estágio
Desafio
• A cifra de césar é uma técnica simples de criptografia por substituição de caracteres. Pesquise o algoritmo, faça um documento HTML que permita ao usuário digitar uma determinada mensagem e um script que criptografe esta mensagem a partir da cifra de césar, exibindo a mensagem criptografada no próprio corpo do site.
24
