Técnicas de Programação - Paulo Roberto Bernardo 1 - Aula 05, 06, 07 e 08 - Técnicas de programação. (Revisão conceitos de lógica). Estruturas de Controle - Estrutura Seqüencial É uma instrução ou conjunto de instruções colocadas de forma seqüencial, não possuindo nenhum tipo de desvio ou repetição. Assim o processamento é executado instrução após instrução, de cima para baixo e da esquerda para a direita, na ordem em que forem escritas. Ex. Declaração de variáveis início Instrução Instrução Instrução Instrução 1 2 3 N fim Exercício 1 Construa um algoritmo (fluxograma e português estruturado) que calcule e exiba a média aritmética entre quatro notas bimestrais fornecidas por um aluno. Programa 1 Var N1, n2, n3, n4, med: real início n1 <- 0 n2 <- 0 n3 <- 0 n4 <- 0 med <-0 leia (n1) leia (n2) leia (n3) leia (n4) med <- (n1+n2+n3+n4) /4 escreva (med) fim -------------------------------------------------------------------------------- Técnicas de Programação - Paulo Roberto Bernardo 2 <script type="text/javascript"> var n1, n2, n3, n4, med; n1 = window.prompt("Informe a 1ª nota") / 1.0; n2 = window.prompt("Informe a 2ª nota") / 1.0; n3 = window.prompt("Informe a 3ª nota") / 1.0; n4 = parseFloat(window.prompt("Informe a 4ª nota")); med = (n1 + n2 + n3 + n4) / 4; document.write ("O valor da média é " + med); </script> ---------------------------------------------------------------------------------------Exercício 2 Elabore um algoritmo (diagrama de blocos e português estruturado) que receba dois valores inteiros. O programa deve trocar os valores entre as variáveis e exibi-los ao término do programa. Programa 2 Var n1, n2, x: inteiro início n1 <- 0 n2 <- 0 x <- 0 leia (n1) leia (n2) x <- n1 n1 <- n2 n2 <- x escreva (n1, n2) fim --------------------------------------------------------------------------------- Técnicas de Programação - Paulo Roberto Bernardo 3 <script type="text/javascript"> var n1, n2, x; n1 = window.prompt("Informe o n2 = window.prompt("Informe o x = n1; n1 = n2; n2 = x; document.write("O valor de N1 document.write("O valor de N2 //window.alert("O valor de N1 " + n2); </script> primeiro valor!"); segundo valor!"); é " + n1 + "<br>"); é " + n2); é " + n1 + " e o valor de N2 é --------------------------------------------------------------------------------Exercício 3 Elabore um algoritmo (diagrama de blocos e português estruturado) que efetue o cálculo e exiba o salário líquido de um profissional que trabalha por hora. Para a elaboração, os seguintes dados deverão ser obtidos: - Valor da hora de trabalho (VH); - Número de horas trabalhadas no mês (HT); - Percentual de desconto do INSS (PD). Calcular: - Salário bruto (SB = HT * VH); - Total de desconto (TD = (PD/100) * SB); - Salário líquido (SL = SB - TD) Programa 3 Var VH, HT, PD, TD, SB, SL: real Início SL <- 0 Leia (VH) Leia (HT) Leia (PD) SB <- VH * HT TD <- SB * (PD / 100) SL <- SB – TD Escreva (SL) fim --------------------------------------------------------------------------------------- Técnicas de Programação - Paulo Roberto Bernardo 4 <script type="text/javascript"> var vh, ht, pd, td, sb, sl; vh = parseFloat(window.prompt("Informe o valor da hora!")); ht = parseFloat(window.prompt("Informe as horas trabalhadas!")); pd = parseFloat(window.prompt("Informe o percentual de descontos!")); sb = vh * ht; td = sb * (pd / 100); sl = sb - td; document.write("O valor do salário líquido é " + sl); </script> ---------------------------------------------------------------------------------------- Estrutura de Decisão (Desvio Condicional Simples – se...então) Esta estrutura tem por finalidade tomar uma decisão e efetuar um desvio no processamento, dependendo da condição ser verdadeira ou falsa. EX. Se (condição) então Instrução para condição verdadeira fimse var R, N1, N2: inteiro Início Leia (N1) Leia (N2) R <- N1 + N2 Se R > 10 então Escreva (R) Fimse Fim ---------------------------------------------------------------------------------------<script type="text/javascript"> var n1, n2, r; n1 = parseInt(window.prompt("Informe o primeiro valor!")); n2 = parseInt(window.prompt("Informe o segundo valor!")); r = n1 + n2; if (r > 10) { document.write("O valor da soma é " + r); } </script> Técnicas de Programação - Paulo Roberto Bernardo 5 Exercício 4 Construa um algoritmo (fluxograma e português estruturado) que calcule e exiba a média aritmética entre quatro notas bimestrais fornecidas por um aluno. Se a média for maior ou igual a 7, exibir ‘Aluno aprovado’. Var N1, n2, n3, n4, med: real início n1 <- 0 n2 <- 0 n3 <- 0 n4 <- 0 med <-0 leia (n1) leia (n2) leia (n3) leia (n4) med <- (n1+n2+n3+n4) /4 se med >= 7 então escreva (“Aluno aprovado”, med) fim --------------------------------------------------------------------------------------<script type="text/javascript"> var n1, n2, n3, n4, med; n1 = parseFloat(window.prompt("Informe n2 = parseFloat(window.prompt("Informe n3 = parseFloat(window.prompt("Informe n4 = parseFloat(window.prompt("Informe med = (n1 + n2 + n3 + n4)/4; if (med >= 7) a a a a primeira nota!")); segunda nota!")); terceira nota!")); quarta nota!")); { document.write("Aluno aprovado! Média " + med); } </script> Técnicas de Programação - Paulo Roberto Bernardo 6 - Estrutura de Decisão (Desvio Condicional Composto – se...então...senão) Esta estrutura tem por finalidade, sendo a condição verdadeira, executar a instrução que estiver posicionada, entre e instrução se...então e a instrução senão. Se a condição for falsa, será executada a instrução que estiver posicionada logo após a instrução senão. Ex. Se (condição) então Instrução para condição verdadeira Senão Instrução para condição falsa fimse Exercício 5 Construa um algoritmo (fluxograma e português estruturado) que calcule e exiba a média aritmética entre quatro notas bimestrais fornecidas por um aluno. Se a média for maior ou igual a 7, exibir “Aluno aprovado” e média, caso contrário exibir “Aluno reprovado” e a média. Var N1, n2, n3, n4, med: real início n1 <- 0 n2 <- 0 n3 <- 0 n4 <- 0 med <-0 leia (n1) leia (n2) leia (n3) leia (n4) med <- (n1+n2+n3+n4) /4 se med >= 7 então escreva (“Aluno aprovado”, med) senão escreva (“Aluno reprovado”, med) fimse fim ---------------------------------------------------------------------------------------------- Técnicas de Programação - Paulo Roberto Bernardo 7 <script type="text/javascript"> var n1, n2, n3, n4, med; n1 = parseFloat(window.prompt("Informe a primeira nota!")); n2 = parseFloat(window.prompt("Informe a segunda nota!")); n3 = parseFloat(window.prompt("Informe a terceira nota!")); n4 = parseFloat(window.prompt("Informe a quarta nota!")); med = (n1 + n2 + n3 + n4)/4; if (med >= 7) { document.write("Aluno aprovado! Média " + med); } else { document.write("Aluno reprovado! Média " + med); } </script> - Estrutura de Decisão (Desvio Condicional Encadeado) Esta estrutura é utilizada quando uma determinada ação ou bloco deve ser executado se um grande conjunto de possibilidades ou combinações for satisfeito. Ex. Se (condição 1) então Se (condição 2) então Instrução para condição verdadeira Senão Se (condição) então Instrução para condição verdadeira senão Instrução para condição falsa Fimse Fimse Senão Instrução para condição falsa fimse Técnicas de Programação - Paulo Roberto Bernardo 8 Exercício 6 Dados três valores A, B, C, verificar se eles podem ser os comprimentos dos lados de um triângulo e, se forem, verificar se compõem um triângulo equilátero, isósceles ou escaleno. Informar se não compuserem nenhum triângulo. Dados de entrada: três lados de um suposto triângulo (A, B, C). Dados de saída – mensagens: não compõem um triângulo, triângulo equilátero, triângulo isósceles, triângulo escaleno. O que é um triângulo? Figura geométrica de três lados, em que cada um é menor do que a soma dos outros dois. Triângulo equilátero? Um triângulo com três lados iguais. Triângulo isósceles? Um triângulo com dois lados iguais. Triângulo escaleno? Um triângulo com todos os lados diferentes. Programa triangulo Var A, B, C: inteiro Início Leia (A) Leia (B) Leia (C) Se (A<B+C) ou (B<A+C) ou (C<A+B) então Se A=B e B=C então Escreva “triângulo equilátero” Senão Se A=B ou A=C ou C=B então Escreva (‘triângulo isósceles’) Senão Escreva (‘triângulo escaleno’) Fimse Fimse Fimse Fim ------------------------------------------------------------------------------ Técnicas de Programação - Paulo Roberto Bernardo <script type="text/javascript"> var a, b, c; a = parseInt(window.prompt("Informe o valor do lado A!")); b = parseInt(window.prompt("Informe o valor do lado B!")); c = parseInt(window.prompt("Informe o valor do lado C!")); if ((a < (b + c)) || (b < (a + c)) || (c < (a + b))) { if ((a == b) && (b == c)) { document.write("Triângulo equilátero!"); } else { if ((a == b) || (a == c) || (c == b)) { document.write("Triângulo isósceles!"); } else { document.write("Triângulo escaleno!"); } } } else { document.write("Não é um triângulo!"); } </script> 9 Técnicas de Programação - Paulo Roberto Bernardo 10 - Javascript O Javascript é uma linguagem específica para o desenvolvimento de aplicações para a Internet. Foi desenvolvida pela Netscape e, originalmente, se chamava Livescript. Mais tarde, aproveitando o sucesso da linguagem JAVA (Sun), a Netscape resolveu trocar o nome, para mostrar sua proximidade com a linguagem JAVA. O uso do Javascript permite que possamos desenvolver páginas que possam responder a situações como clique movimentação do mouse, entrada de dados etc. Podemos, por exemplo, criar um script para verificar se o usuário digitou algo em um formulário de dados, se um número de CPF é válido e até avisá-lo caso não tenha feito corretamente. Um script é uma seqüência de instruções que são interpretadas ou executadas por um outro programa (navegador). Isto significa que para criarmos um script não necessitamos de outro programa (compilador), basta apenas utilizarmos um editor de textos (bloco de notas). O Javascript é "case-sensitive", isto é, caracteres minúsculos são interpretados diferentemente dos caracteres maiúsculos. Para que a tendência a erros diminua, procure utilizar só letras minúsculas ao criar as suas páginas Web. - Javascript e HTML Os comandos do JavaScript podem ser escritos diretamente em uma página HTML, porém como o HTML e JavaScript são tecnologias inteiramente separadas, existem regras sobre como o JavaScript pode ser colocado na estrutura de um documento HTML. Devemos utilizar a o JavaScript dentro das tags <head></head>, porém adicionando mais um bloco denominado de <script></script>. A finalidade deste bloco é informar ao navegador que tudo que estiver dentro destas tags é um script. Este bloco pode ser acrescentado em qualquer lugar dentro do bloco <head>, mas normalmente é adicionado no fim, antes da tag </head> de encerramento. Exemplo. <html> <head> <title>Uma página simples</title> <script> </script> </head> <body> </body> </html> Técnicas de Programação - Paulo Roberto Bernardo 11 Para adicionarmos JavaScript ao bloco <script>, precisamos informar ao navegador que tipo de script está contido entre as tags. Isto porque o JavaScript não é a única linguagem script WEB que poderíamos utilizar. Uma outra linguagem é o VBScript da Microsoft. Assim, para avisarmos ao navegador que a linguagem que estamos utilizando é o JavaScript, devemos acrescentar o atributo type à tag <script>. Depois do atributo text, informamos a linguagem utilizada. <html> <head> <title>Uma página simples</title> <script type="text/javascript"> </script> </head> <body> </body> </html> - Linguagem orientada para objeto O JavaScript é uma linguagem orientada para objetos. - Objeto Em poucas palavras um objeto é uma coisa qualquer. Assim com coisas no mundo real são objetos (carros, jornais, notas de dinheiro etc), coisas no mundo dos computadores também são chamadas de objetos. Para o JavaScript, seus objetos vivem todos no navegador Web. objetos são coisas como o próprio navegador, formulários e partes formulários como botões e caixas de texto. as as Os de - Métodos Métodos são coisas que os objetos podem fazer (ações). No mundo real, os objetos têm métodos. Os carros se movem, os jornais informam, o dinheiro serve para comprar etc. Técnicas de Programação - Paulo Roberto Bernardo 12 - Usando o método prompt() Este método permite que o usuário digite sua própria resposta à pergunta. Além de adicionarmos o método prompt() é necessário acrescentarmos dois textos dentro dos parênteses. O primeiro é a mensagem que você quer fazer aparecer. <script type="text/javascript"> window.prompt("Qual é o seu nome!"); </script> O outro é o texto padrão que deve aparecer na caixa de entrada do prompt. Isto permite que o texto "undefined" não seja exibido. <script type="text/javascript"> window.prompt("Qual é o seu nome!","Digite o seu nome aqui."); </script> - Usando o método write() Este método é usado para escrever informações na tela do navegador. Write() é um método do objeto document(). Os parênteses assinalam que estão sendo usados métodos. <script type="text/javascript"> document.write("Escrevendo na janela!"); </script> - Usando o método alert() Este método é usado para mostrar informações textuais para o usuário de uma maneira simples. Quando o usuário acaba de ler a mensagem, basta que ele clique no botão OK para que ela desapareça. Esta mensagem deve estar entre aspas (“”), que, por sua vez, deve estar entre os parênteses. <script type="text/javascript"> window.alert("Um alerta disparado pelo javascript!"); /*O ponto e vírgula depois do método é chamado de terminador de linha.*/ </script> Técnicas de Programação - Paulo Roberto Bernardo 13 - Usando o método confirm() O método confirm() funciona de maneira semelhante ao método alert(), mas essa caixa é usada para dar ao usuário uma escolha entre OK e Cancelar. <script type="text/javascript"> window.confirm("Deseja realmente sair!"); </script> - Criando variáveis Para declararmos (criarmos) uma variável, usamos a instrução Javascript var (que significa variável) seguido do nome que desejamos atribuir. <script type="text/javascript"> var msg; // criando uma variável com o nome msg </script> - Nomes de variáveis inválidos 1msg --------------> (começa com um digito) olá vocês----------> (contém um espaço e dois acentos) var-----------------> (uma palavra reservada do JavaScript) dollar$-------------> (o navegador não consegue interpretar $) - Atribuindo um valor do tipo string à variável, na mesma linha. <script type="text/javascript"> var msg = "Este texto é o conteúdo da variável msg!"; window.alert(msg); document.write(msg); </script> Técnicas de Programação - Paulo Roberto Bernardo 14 - Também podemos fazê-lo em linhas separadas. <script type="text/javascript"> var msg; msg = "Este texto é o conteúdo da variável msg!"; window.alert(msg); document.write(msg); </script> - Atribuição de um número à variável msg <script type="text/javascript"> var msg = 22; window.alert(msg); document.write(msg); </script> - Criando múltiplas variáveis Haverá casos em que precisaremos de mais de uma variável. Uma das formas de fazer isto é criar uma em cada linha. <script type="text/javascript"> var msg1= "Olá!"; var msg2= "Eu tenho 20 anos!"; document.write(msg1 + "<br>"); document.write (msg2); </script> A outra maneira de fazermos isso é declarar todas as variáveis em uma mesma linha. <script type="text/javascript"> var msg1 = "Olá!", msg2 = "Eu tenho 20 anos!"; document.write(msg1 + "<br>"); document.write (msg2); </script> Técnicas de Programação - Paulo Roberto Bernardo 15 - Conversão de textos em valores para cálculos aritméticos Para convertermos um texto digitado pelo usuário em valores úteis para cálculos aritméticos, utilizamos as seguintes instruções de conversão: parseInt - converte um valor digitado pelo usuário em inteiro. Apenas a letra ‘I’ deve ser escrita em caixa alta. <script type="text/javascript"> var a, b, x; a = parseInt(window.prompt("Informe o valor de A!")); b = parseInt(window.prompt("Informe o valor de B!")); x = a + b; document.write("O valor de x é: " + x); </script> parseFloat - converte um valor digitado pelo usuário em real. Apenas a letra ‘F’ deve ser escrita em caixa alta. <script type="text/javascript"> var a, b, x; a = parseFloat(window.prompt("Informe o valor de A!")); b = parseFloat(window.prompt("Informe o valor de B!")); x = a / b; document.write("O valor de x é: " + x); </script> - Adicionando comentários ao Javascript Para facilitar o entendimento do código, os desenvolvedores adicionam linhas como comentários. Para inserirmos comentários apenas de uma linha, utilizamos os caracteres // no início da linha. <script type="text/javascript"> var msg1 = "Olá!", msg2 = "Eu tenho 20 anos!"; document.write(msg1 + "<br>"); /* a tag <br> salto de linha*/ document.write (msg2); </script> indica Para inserirmos comentários com mais de uma linha, utilizamos os caracteres de abertura de comentários /* e depois os próprios comentários seguidos pelos caracteres de fechamento */. Técnicas de Programação - Paulo Roberto Bernardo - Operadores relacionais Menor que < Menor que ou igual a <= Maior que > Maior que ou igual a >= Igual a == Diferente != - Operadores lógicos E (and) lógico && OU (or) lógico || - Operadores aritméticos Adição + Subtração Divisão / Multiplicação * 16