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