TECNOLOGIAS PARA INTERNET II (AULA 02)

•

ESTÁCIO

Junior Revoltei

14/06/2019

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Programação para Internet II

198 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

12/02/2019 
1 
TECNOLOGIAS PARA 
INTERNET II 
Aula 02 – Javascript : Estruturas de 
decisão e de repetição. 
 Construindo funções. 
Prof. Ronaldo Candido 
posinf_ronaldo@yahoo.com.br 2019.1 
AULA 02 
TECNOLOGIAS PARA INTERNET II 
Prof. Ronaldo Candido 
Conteúdo Programático 
1. Estrutura de decisão com 
comando if ; 
2. Estrutura de decisão com 
comando switch-case ; 
3. Estrutura de repetição com 
comando while ; 
4. Estrutura de repetição com 
comando do-while ; 
5. Estrutura de repetição com 
comando for ; 
6. Construindo funções ; 
7. Arquivo externo .js. 
12/02/2019 
2 
AULA 02 
TECNOLOGIAS PARA INTERNET II 
Prof. Ronaldo Candido 
Estrutura de decisão com comando if 
• Permite executar blocos de comandos caso uma condição seja 
verdadeira ou falsa. Sintaxe: 
if (condição) { 
 bloco de código para a condição verdadeira 
 } else { 
 bloco de código para a condição falsa } <!-– exemplo01a --> 
<html> 
 <body> 
 <script> 
 var x=10; 
 if (x<=10) { 
 alert(‘Número é menor ou igual a 10’); 
 } else { 
 alert(‘Número é maior que 10’); } 
 </script> 
 </body> 
</html> 
Altere o código 
para exemplo01b, 
solicitando a 
digitação do 
número em x !!! 
AULA 02 
TECNOLOGIAS PARA INTERNET II 
Prof. Ronaldo Candido 
Estrutura de decisão com comando switch-case 
• Substitui vários comandos if encadeados. Sintaxe: 
switch(expressão) { 
 case n: 
 bloco de código... 
 break; 
 case n: 
 bloco de código... 
 break; 
 ... 
 default: 
 bloco de código para nenhuma das anteriores 
} 
12/02/2019 
3 
AULA 02 
TECNOLOGIAS PARA INTERNET II 
Prof. Ronaldo Candido 
Estrutura de decisão com comando switch-case 
<!-– exemplo02 --> 
<html> 
 <body> 
 <script> 
 switch (new Date().getDay()) { 
 case 0: 
 dia = ‘Domingo’; 
 break; 
 case 1: 
 dia = ‘Segunda’; 
 break; 
 case 2: 
 dia = ‘Terça’; 
 break; 
 case 3: 
 dia = ‘Quarta’; 
 break; 
 case 4: 
 dia = ‘Quinta’; 
 break; 
 case 5: 
 dia = ‘Sexta’; 
 break; 
 case 6: 
 dia = ‘Sábado’; 
 } 
 window.alert(‘Hoje é ‘ + dia); 
 </script> 
 </body> 
</html> 
Retorna o número 
do dia da data atual 
AULA 02 
TECNOLOGIAS PARA INTERNET II 
Prof. Ronaldo Candido 
Estrutura de repetição com comando while 
• Repete um bloco de comandos enquanto a condição for 
verdadeira. Realiza o teste da condição antes de executar o 
bloco. Sintaxe: while (condição) { 
 bloco de código para a condição verdadeira 
} <!– exemplo03a --> 
<html> 
 <head> 
 <script> 
 var texto = '', i=0; 
 while (i < 10) { 
 texto+='<p>numero=‘+i+'</p>'; 
 i++; 
 } 
 </script> 
 </head> 
 <body> 
 <div id="exibe"></div> 
 <script> 
 document.getElementById 
 ('exibe').innerHTML=texto; 
 </script> 
 </body> 
</html> 
12/02/2019 
4 
AULA 02 
TECNOLOGIAS PARA INTERNET II 
Prof. Ronaldo Candido 
Estrutura de repetição com comando do-while 
• Executa o bloco de comandos ANTES de testar a condição. 
Sintaxe: do { 
 bloco de código para a condição verdadeira 
 } 
while (condição) ; 
<!– exemplo03b --> 
<html> 
 <head> 
 <script> 
 var texto = '', i=0; 
 do { 
 texto+='<p>numero=‘+i+'</p>'; 
 i++; 
 } 
 while (i > 10); // maior que 10 
 </script> 
 </head> 
 <body> 
 <div id="exibe"></div> 
 <script> 
 document.getElementById 
 ('exibe').innerHTML=texto; 
 </script> 
 </body> 
</html> 
AULA 02 
TECNOLOGIAS PARA INTERNET II 
Prof. Ronaldo Candido 
Estrutura de repetição com comando for 
• Repete um bloco de comandos enquanto a condição for 
verdadeira. Realiza o teste da condição antes de executar o 
bloco. O incremento é realizado dentro da estrutura. Sintaxe: 
for (inicialização; condição; contador) { 
 bloco de código para a condição verdadeira 
} <!-- exemplo04 --> 
<html> 
 <body> 
 <div id="exibe"></div> 
 <script> 
 var texto ; //undefined 
 for (i=0; i<10; i++) { 
 texto += "<p>numero=" + i +"<hr /></p>"; } 
 document.getElementById('exibe').innerHTML = texto; 
 </script> 
 </body> 
</html> 
12/02/2019 
5 
AULA 02 
TECNOLOGIAS PARA INTERNET II 
Prof. Ronaldo Candido 
Criando funções em Javascript 
• Funções permitem definir blocos de comandos para ser 
executado posteriormente ao serem chamadas. Sintaxe: 
function nome_função() { 
 bloco de código 
 } 
<!-- exemplo05a --> 
<html> 
 <head><title>Usando função</title> 
 <script> 
 function calcular() 
 { var salario = 1000 ; 
 var aumento = salario * 1.12 ; 
 return aumento ; 
 } 
 </script> 
 </head> 
 <body> 
 <h1>Salário:</h1> 
 <script> 
 document.write('<h2>R$ '+ 
 calcular().toFixed(2)+ 
 '</h2>'); 
 </script> 
 </body> 
</html> 
AULA 02 
TECNOLOGIAS PARA INTERNET II 
Prof. Ronaldo Candido 
Criando funções externas em Javascript 
• Separe o código do script e salve em um arquivo .js. Para 
carregar dentro da página use : 
<script src=“nomedoarquivo.js”></script> 
<!-- exemplo05b --> 
<html> 
 <head><title>Função externa</title> 
 <script src="funcao1.js"></script> 
 </head> 
 <body> 
 <h1>Salário:</h1> 
 <script> 
 document.write('<h2>R$ ' + 
 calcular().toFixed(2) + '</h2>'); 
 </script> 
 </body> 
</html> 
// função externa em 
// funcao1.js 
function calcular() 
{ 
 var salario = 2000 ; 
 var aumento = salario * 
 1.06 ; 
 return aumento ; 
} 
12/02/2019 
6 
AULA 02 
TECNOLOGIAS PARA INTERNET II 
Prof. Ronaldo Candido 
Estrutura de repetição for-in 
• Repete um bloco de comandos enquanto houverem objetos em 
uma lista a ser acessada. Sintaxe: for (variável in lista) { 
 bloco de código } 
<!– exemplo06 --> 
<html><body> 
 <button onclick="funcaoX()">Clique aqui</button> 
 <p id="parag1"></p> 
 <script> 
 function funcaoX() { 
 var pessoa = {nome:'Joao', sobrenome:'Neves', idade:25}; 
 var msg = ''; 
 var x; 
 for (x in pessoa) { 
 msg += pessoa[x] + ' '; } //tem espaço nas aspas simples 
 document.getElementById('parag1').innerHTML = msg; 
 } 
 </script> 
 </body></html> 
AULA 02 
TECNOLOGIAS PARA INTERNET II 
Prof. Ronaldo Candido 
Validações de dados 
• Javascript pode ser utilizado para validar a entrada do usuário 
antes que esta seja enviada para o servidor : 
 Campos obrigatórios foram deixados em branco ? 
 O usuário informou um e-mail válido ? 
 O usuário informou uma data válida ? 
 O usuário entrou com um texto em um campo numérico ? 
 
• Campos requeridos : 
function validarForm() { 
 var x = document.forms['meuForm'][‘pnome'].value; 
 if (x == null || x == '') { 
 alert('Primeiro nome deve ser preenchido'); 
 return false; 
 } 
} 
12/02/2019 
7 
AULA 02 
TECNOLOGIAS PARA INTERNET II 
Prof. Ronaldo Candido 
Validações de dados 
• E-mail: 
function validarForm() { 
 var x = document.forms['meuForm']['email'].value; 
 var atpos = x.indexOf('@');var dotpos = x.lastIndexOf('.'); 
 if (atpos < 1 || dotpos < atpos+2 || dotpos+2 >= x.length) { 
 alert('Não é um endereço de e-mail válido !'); 
 return false; 
 } 
} 
AULA 02 
TECNOLOGIAS PARA INTERNET II 
Prof. Ronaldo Candido 
1. Qual é a sintaxe correta para chamar uma referência a um script 
externo chamado "xxx.js" ? 
 
2. Como escrever “Alô Mundo” em uma caixa de alerta ? 
 
3. Assinale a alternativa correta sobre a sintaxe do comando for : 
a) for i = 1 to 5 
b) for (i = 0; i <= 5) 
c) for (i <= 5; i++) 
d) for (i = 0; i <= 5; i++) 
 
4. Qual é o jeito correto de escrever uma condição no qual “i não 
seja igual a 10” ? 
a) if (i != 10) 
b) if (i <> 10) 
c) if i =! 10 then 
d) if i <> 10 
Exercícios – Atividades do livro-texto pág. 36-37 
12/02/2019 
8 
AULA 02 
TECNOLOGIAS PARA INTERNET II 
Prof. Ronaldo Candido 
5. Crie um botão em html que, ao ser clicado, chama uma função 
em Javascript que abre uma janela com a mensagem "Olá 
mundo". O código em Javascript deverá ser criado em um arquivo 
externo. No arquivo em Javascript, insira o seguinte comentário: 
"Função criada em um arquivo externo que mostra uma mensagem". 
Exercícios práticos 
6. Faça uma página em html que solicite um cadastro de produtos 
com o nome do produto, a quantidade e o preço sugerido. Crie 
uma função em um arquivo externo que calcule 10% de desconto 
do preço, caso ele pague em dinheiro. Mostre o resultado ao 
clicar no botão “Pagar em dinheiro”. 
AULA 02 
TECNOLOGIAS PARA INTERNET II 
Prof. Ronaldo Candido 
7. Crie um formulário em html que solicite os dados de compra 
de um item em um site de e-commerce (Número do pedido, 
nome do cliente, a data da compra, o item escolhido, a 
quantidade e o valor do item). Use funções JS externas de 
validação desses dados, evitando seu preenchimento 
incorreto. Mostre mensagens de alerta caso não seja validado. 
Ao final, o botão “Enviar” deverá mostrar o total da compra e 
que a operação foi bem sucedida. 
Exercícios práticos 
12/02/2019 
9 
AULA 02 
TECNOLOGIAS PARA INTERNET II 
Prof. Ronaldo Candido 
1. SANTOS, F. G. Tecnologias para Internet II. Rio de Janeiro: 
SESES, 2018 (Livro-texto, Capítulo 1). 
 
2. DEITEL, H. M.; DEITEL, P. J. Ajax, Rich Internet Applications e 
desenvolvimento Web para programadores. São Paulo: 
Pearson, 2008. 
 
3. DALL´OGLIO, P. PHP: Programando com orientação a objetos. 
2. ed. São Paulo: Novatec, 2009. 
 
4. Tutoriais em Javascript (Acesso em 11/02/19) : 
https://www.w3schools.com/js/ 
Bibliografia Básica 
Fim da apresentação 
 
Prof. Ronaldo Candido 
posinf_ronaldo@yahoo.com.br 
Dúvidas, sugestões ou análises ??? 
 
TECNOLOGIAS PARA 
INTERNET II