Lógica de
Programação
Java Script
Evandro Lucas
O que é lógica de programação?
A lógica de programação é a base para a criação de qualquer programa.
Trata-se da organização do pensamento para resolver problemas por meio de
instruções claras e sequenciais.
Como estruturar o pensamento para
resolver problemas
[Link] o problema – Leia atentamente e identifique os elementos
necessários para a solução.
[Link] a solução – Esboce um algoritmo, que é a sequência de passos
necessários para resolver o problema.
[Link] – Transforme o algoritmo em código JavaScript.
[Link] e depurar – Execute o programa e corrija erros se houver.
JavaScript
A linguagem JavaScript foi criada pela Netscape Communications
Corporation junto com a Sun Microsystems. Sua primeira versão foi
lançada em 1995. Na época, quem dominava o mercado de browsers era o
Netscape Navigator. Após, tivemos um período bastante conturbado de
guerra entre browsers, no qual códigos da linguagem funcionavam em um
navegador e não funcionavam em outro. Em 1996, a Óm de evitar esse
problema, a Netscape decidiu entregar o JavaScript para a ECMA
(European Computer Manufacturers Association). A ECMA é uma
associação dedicada à padronização de sistemas de informação. Em 1997,
foi lançada a primeira edição da linguagem gerenciada por essa
associação. Por isso, a linguagem JavaScript também é chamada de
ECMAScript e as versões da linguagem estão associadas a esse nome.
Editores de código JavaScript
Para criar programas JavaScript, podemos utilizar editores simples que já
estão instalados no computador, editores online disponíveis na internet
ou instalar programas proÓssionais de edição de código. Editores simples,
como o bloco de notas no Windows, não são muito recomendados pela
ausência de recursos de auxílio ao programador. Os editores online
contêm alguns recursos extras e a vantagem de poder acessar e
compartilhar os códigos na internet. Já os editores proÓssionais contêm
diversos recursos que facilitam o desenvolvimento dos programas.
Visual Studio Code Brackets
Notepad ++ Komodo Edit
Fundamentos do JavaScript
Saída de dados com alert()
Pra iniciar nossos estudos em programação visto que necessitamos que nosso
código seja executado no navegador é necessário que embarquemos nosso
script num aquivo .html. Para tal fim, primeiro vamos criar um diretório em
nosso computador com o nome logica_programacao_js (ou o nome que desejar)
depois iremos abri esse diretório em nosso Editor de texto, no meu caso vou
utilizar o VSCode.
Após a criação da pasta vá até seu powershell no windonws e mude o diretório
para sua pasta criada com o comando: “cd {caminho do folder}” e em seguida
utilize o camando : code .
Ao executar o comando acima (é preciso está com o VSCode já instalado), o
seu editor será aberto tal como mostra figura abaixo:
Em seguida iremos criar um arquivo .html com nome : [Link] para criar
aperte no icone ‘new file’ e nomeie com o nome informado. Apois criar o
arquivo digite “!” na linha 1 e o vscode irá criar uma estrutura de html
automáticamente no seu arquivo.
Escolha a opção que contém apenas uma exclamação e o codigo abaixo será
exibido:
Dentro da Tag <body>{aqui}</body> digite o seguite código
<script>
alert("Bem-Vindo ao Mundo JavaScript!");
</script>
Depois de salvar o arquivo, é necessário executá-lo, ou, no caso do
JavaScript, renderizá-lo em um navegador. Para isso, abra o seu navegador
favorito e na barra de endereços informe o caminho onde você salvou o
arquivo.
Ao executar o programa, a mensagem que
você escreveu dentro das aspas “Bem-Vindo ao Mundo JavaScript!” é
exibida em uma caixa no centro da tela, conforme mostra a Figura abaixo
Variáveis
As variáveis são espaços alocados na memória do computador que
permitem guardar informações e trabalhar com elas – como o valor que o
cliente deseja sacar no terminal do caixa eletrônico. Como o nome sugere,
os valores armazenados em uma variável podem ser alterados durante a
execução do programa.
As variáveis declaradas em um programa devem possuir um nome,
seguindo algumas regras de nomenclatura. Em JavaScript, os nomes de
variáveis não podem:
• Conter espaços.
• Começar por número.
• Conter caracteres especiais, como +,-,*, /, %, (,),{,},!,@,#.
• Utilizar nomes de palavras reservadas da linguagem, como function,
var, new, for ou return.
Para declarar uma variável em JavaScript, utiliza-se o comando:
var nome;
Para fazer com que uma variável receba um dado, utiliza-se o conceito de
atribuição. Em JavaScript, a atribuição de valor para uma variável é feita
com o sinal “=”.
var idade = 32;
Atribuindo valores a uma variável com o uso de prompt
Para receber dados do usuário, uma das formas possíveis em JavaScript é
utilizar o comando(método) prompt(), que mostra uma caixa com um texto,
semelhante ao alert() do primeiro exemplo, contudo dessa vez existe um
espaço para digitação.
no seu código subistitua o script do alert() pelo seguinte script:
<script>
var nome = prompt("Qual é o seu nome?");
alert("Olá " + nome);
</script>
Input (entrada) : O nome digitado pelo usuário na
caixa de diálogo do prompt é atribuído à variável
nome.
Output (saída) : O valo da variável nome que foi
atualizado é exibido no alert ()
Dessa forma sua variável é atribuida dinamicamente e seu valor é atualizado
outro exemplo :
no seu código subistitua o script do alert() pelo seguinte script:
<script>
let a = prompt("Digite um número?");
let b = 5;
alert(a * b);
</script>
Input (entrada)
Output (saída)
Nesse exemplo todo número inserido em let a será multiplicado por let b
Condicionais (if, else)
Utilizamos estruturas condicionais para tomar decisões no código.
Os comandos if...else e switch...case são os responsáveis por criar condições em
JavaScript (e na maioria das linguagens). Quando precisamos que o fluxo de
uma aplicação siga diferente caminhos dependendo que uma condição seja
satisfeita utilizamos essas estruturas.
If... else
Para criar essa estrutura clássica, utilizamos os comandos if... else (se...
senão). Eles possuem algumas variações. É possível utilizar apenas o if. E
também criar vários comandos else
Exemplos da sintaxe do comando if.
// define uma condição simples
if (condição) {
comandos;
}
// define uma condição de if... else
if (condição) {
comandos V;
} else {
comandos F;
}
Operadores relacionais
Para definir as condições utilizadas nas estruturas condicionais, deve-se
fazer uso dos operadores relacionais. Quando inseridas em um programa,
cada comparação deve retornar true (verdadeiro) ou false (falso).
outro exemplo :
no seu código dentro da Tag <body>{aqui}</body> digite o seguite código :
<h1>Verifica Idade</h1>
<p>Sua idade:
<input type="text" id="idade">
</p>
<p>
<input type="button" value="Exibir Média e Situação" id="btResultado">
</p>
<h3 id="resultado"></h3>
<script>
var btResultado = [Link]("btResultado");
[Link]("click", function(){
var idade = [Link]("idade").value;
if(idade >= 18){
[Link]("resultado").innerHTML = "Maior de idade";
}else{
[Link]("resultado").innerHTML = "Menor de idade";
}
});
</script>
Nesse programa atente-se para o código dentro da tag <script>, é possivél
notar que a condição if...else é definida na saída dos dados de modo que após o
usuário digitar o valor da idade o valor é recuperado pelo código javascript no
trecho var idade = [Link]("idade").value; e dentro do bloco
if o operador relacional >= verifica se o valor é maior ou igual a 18 se a
condição for true (verdadeira) então é exibido “Maior de idade” no resultado,
se a condição for false(falso) então é exibido “Menor de idade”
Teste outros operadores relacionais no seu código e veja os resultados
possíveis
Estruturas de Repetição (for)
As estruturas de repetição permitem executar um bloco de código múltiplas
vezes. As estruturas de repetição permitem fazer com que um ou mais
comandos em um programa sejam executados várias vezes. Essas
estruturas, também denominadas laços de repetição ou loops,
complementam a programação sequencial e a programação condicional
Repetição com variável de controle: laços for
A sintaxe do comando for é composta de três instruções, que deÓnem: a)
o valor inicial da variável de controle; b) a condição que determina se a
repetição deve ou não continuar; c) o incremento ou decremento da
variável de controle.
Entre as chaves {....} devem ser inseridos os comandos que serão executados
repetidas vezes. O incremento i = i + 1 pode ser abreviado por i++
exemplo :
<h1>Tabuada</h1>
<p>Número:
<input type="text" id="inNumero">
</p>
<input type="button" value="Mostrar Tabuada" id="btMostrar">
<pre id="outTabuada"></pre>
<script>
function mostrarTabuada() {
// cria referência aos elementos da página
var inNumero = [Link]("inNumero");
var outTabuada = [Link]("outTabuada");
// converte conteúdo do campo inNumero
var numero = Number([Link]);
// valida o número
if (numero == 0 || isNaN(numero)) {
alert("Informe um número válido...");
[Link]();
return;
}
// cria uma variável do tipo String, que irá concatenar a resposta
var resposta = "";
// cria um laço de repetição
for (var i = 1; i <= 10; i++) {
// a variável resposta vai acumulando os novos conteúdos
resposta = resposta + numero + " x " + i + " = " + numero * i +
"\n";
}
// o conteúdo da tag pre é alterado para exibir a tabuada do num
[Link] = resposta;
}
// cria referência ao botão e após associa function ao evento click
var btMostrar = [Link]("btMostrar");
[Link]("click", mostrarTabuada);
</script>
Ao Executar esse código no seu navegador você terá a seguinte saída :
O programa então lhe pede que seja inserido um número qualquer e o Evento
de Click do botão “Mostrar Tabuada” irá chamar o laço for que será repetido
até que a tabuada sejá conpletamente exibida no caso desse laço até que o
valor de i <= 10.
Conclusão
Você conseguiu visualizar projetos práticos para compreender a lógica de
programação e dar os primeiros passos na programação com JavaScript.
Praticar os conceitos apresentados ajudará a desenvolver habilidades
essenciais para resolver problemas de maneira eficiente. Continue explorando,
experimentando novos desafios e aprimorando seu conhecimento. A
programação é uma jornada contínua de aprendizado e evolução!
Referências
IEPSEN, Edécio Fernando. Lógica de Programação e Algoritmos com
JavaScript. 1. ed. São Paulo: Novatec Editora, 2020.
MOZILLA FOUNDATION. MDN Web Docs - JavaScript. Disponível em:
[Link] Acesso em: 13
mar. 2025.
W3SCHOOLS. JavaScript Tutorial. Disponível em:
[Link] Acesso em: 13 mar. 2025.
Evandro Lucas
@evandrolucas60