Introdução a Logica de Programação para Web-JavaScript

Prévia do material em texto

Introdução à Lógica!
Lógica de programação para Web.
Lógica!
Agenda
O que vamos aprender?
• Lógica antes de codar!
• O que é algorítmo?
• Ferramentas.
• HTML e JavaScript.
• Comandos e variáveis.
• Operadores.
• Primeiros Programas.
• Atividades.
• Dicas.
• Referências
Lógica!
Se sua meta é:
• Criar uma aplicação web;
• Criar um aplicativo para seu 
smartphone;
• Automatizar tarefas do dia a dia.
O seu ponto de partida será o mesmo 
- a lógica de programação.
Trilha Lógica!
Imagem de Pete Linforth por Pixabay
https://pixabay.com/pt/users/thedigitalartist-202249/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1181586
https://pixabay.com/pt/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1181586
Lógica,
antes de codar!
Lógica!
Estudo do raciocínio dedutivo.
Modo de raciocinar coerente que 
expressa uma relação de causa e 
consequência;
Lógica, antes de codar!
Imagem de nugroho dwi hartawan por Pixabay
https://pixabay.com/pt/users/jambulboy-4860762/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=2519654
https://pixabay.com/pt/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=2519654
Lógica!
Pode-se distinguir três tipos de
raciocínio lógico:
• Dedução.
• Indução.
• Abdução.
Lógica, antes de codar!
Imagem de Gerd Altmann por Pixabay
https://pixabay.com/pt/users/geralt-9301/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=3829057
https://pixabay.com/pt/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=3829057
Lógica!
Dedução.
Utiliza-se da regra e sua premissa 
para chegar a uma conclusão.
Lógica, antes de codar!
"Quando chove, a grama fica 
molhada. Choveu hoje. Portanto, a 
grama está molhada."
Lógica!
Lógica, antes de codar!
Indução.
É determinar a regra. É aprender 
a regra a partir de diversos 
exemplos.
"A grama ficou molhada todas as 
vezes em que choveu. Então, se 
chover amanhã, a grama ficará 
molhada."
Lógica!
Abdução.
Significa determinar a premissa. 
Usa-se a conclusão e a regra para 
defender que a premissa poderia
explicar a conclusão.
Lógica, antes de codar!
"Quando chove, a grama fica 
molhada. A grama está molhada, 
então pode ter chovido."
Lógica!
Lógica!
Comunicação!
As pessoas se conectam!
O que é algoritmo?
Lógica!
É uma sequência finita de 
ações executáveis que visam
obter uma solução para um 
determinado tipo de problema.
ZIVIANI, NIVIO. Projeto de algoritmos: com implementações em Java e C++. São 
Paulo: Cengage Learning, 2011
O que é algoritmo?
Lógica!
São procedimentos precisos, 
não ambíguos, padronizados, 
eficientes e corretos.
• DASGUPTA, SANJOY; PAPADIMITRIOU, CHRISTOS; VAZIRANI, UMESH. Algoritmos. 
Porto Alegre: AMGH, 2010
O que é algoritmo?
Lógica!
Tem
algoritmo!
Iniciar FazerBolo
 Misture os ingredientes
 Bata os ingredientes numa vasilha
 Unte a forma com manteiga
 Despeje a mistura na forma
 Se houver coco-ralado:
 então despeje-o sobre a mistura
 Leve a forma ao forno
 Enquanto não corar:
 deixe a forma no forno
 Retire do forno
 Deixe estriar
Fim
Lógica!
Formas de algoritmo:
Fluxograma!!
O que é algoritmo?
Lógica!
Formas de algoritmo:
Pseudo-Código!!
O que é algoritmo?
Lógica!
A linguagem:
O que é algoritmo?
HTML!
JavaScript!
Ferramentas!
Como instalar?
Lógica!
Ferramentas necessárias:
O navegador Google Chrome, 
Microsoft Edge ou outros.
Ferramentas!
O editor de texto Notepad++ ou 
Sublime Text.
As linguagens: HTML e Javascript.
Lógica!
Acesse os sites indicados para instalação:
Google Chrome ---> https://www.google.com.br/chrome/
Sublime Text: ---> https://www.sublimetext.com/3
Ferramentas!
Como codar
com JavaScript e HTML?
Lógica!
HTML
É uma linguagem de marcação!!
Desenvolvido por meio de TAGs: , e etc.
O HTML é estático. Impossível fazer algo muito sofisticado com ele.
Isso reforça a importância de outra linguagem ser utilizada.
O navegador é poliglota e pode entender HTML e JavaScript. 
Lógica!
JavaScript
É uma linguagem de script!
É uma linguagem de 
programação de propósito geral 
e dinâmica.
Possui características do 
paradigma de orientação a 
objetos.
É rodado no browser do cliente.
Auxilia na criação de Home 
Pages.
JavaScript reside dentro de 
documentos HTML. 
Lógica!
WEB
Lógica!
Interpretação!
HTML é uma linguagem de marcação!!
Para o navegador interpretar uma instrução JavaScrip, não basta 
coloca-la dentro da estrutura HTML.
JavaScript deve ser escrito dentro da TAG:
 
 escreva aqui o código!!
Lógica!
Estrutura Padrão
 
 Aqui é código HTML
 escreva aqui o código JavaScript
 Aqui é código HTML
Comandos e Variáveis
Entrada, Processamento e Saída.
Lógica!
Comandos de Saida:
document.write("frase")
Comandos e Variáveis
O JavaScript é uma linguagem 
orientada a objetos.
Primeiro Objeto: document 
console.log(“frase"); Todo navegador tem um 
depurador (atalho F12), que 
indica onde o código tem 
problemas. Na aba Console, 
temos a saída do código. 
Lógica!
Primeiro Programa: 
Olá, Mundo!!
Comandos e Variáveis
Lógica!
Linha 1: resolve problemas de 
acentuação.
Comandos e Variáveis
Linha 3: tag para destacar o texto.
Linha 5 e 7: tag para quebra de linha.
Linha 9 e 11: tag para abrir documento 
html.
Linha 10: contém classe document e 
método write().
Lógica!
Comandos e Variáveis
Lógica!
Exemplo:
Escreva um algoritmo que imprima 
o seu nome, a sua profissão e a 
cidade que você mora.
Salve como "apresentação1"
Comandos e Variáveis
Lógica!
Comando de Saída:
document.write("frase")
Comandos e Variáveis
Salta uma linha: 
Lógica!
Comandos e Variáveis
Comandos e Variáveis
Entrada, Processamento e Saída.
Lógica!
Comandos e Variáveis
Como iniciar uma variável em JavaScript?
Sabia que podemos usar var, const e let ?
var nome = “Jose”;
let nome = “Jose”;
const nome = “Jose”;
var podem ser atualizadas e declaradas novamente dentro de seu escopo.
let podem ser atualizadas, mas não podem ser declaradas novamente.
const não podem ser atualizadas nem declaradas novamente (são utilizadas 
para valores constantes, como o valor de pi, por exemplo)
Lógica!
Comandos e Variáveis
Pontos importantes:
Enquanto var e let podem ser declarados sem serem inicializadas, variáveis 
declaradas com const devem ser inicializadas no momento da declaração.
Uma das grandes vantagens de let é que em códigos muito extenso, criado por um 
grupo de pessoas, por exemplo, evita que ocorra de duas variáveis distintas serem 
declaradas com o mesmo nome, o que causaria conflito e um retorno totalmente 
diferente do esperado. 
Ela(let) foi criada posteriormente, na linguagem JavaScript (e também const), 
justamente para evitar confusão.
Lógica!
Comandos e Variáveis
Em JavaScript não é necessário declarar o tipo de uma variável; 
Todas as variáveis são objetos (referência);
Números são todos reais de 64bits; 
A variável irá “alterar” o seu tipo de dado conforme os valores forem atribuídos.
Tipos de variáveis
Lógica!
Comandos e Variáveis
var x; // x é indefinido 
x = 5; // x é um número 
x = "John"; // x é uma string 
x = true; // x é um valor lógico 
x = null; // x é nulo 
Tipo de dado dinâmico: 
Lógica!
Comandos e Variáveis
Nomes de Variáveis e sua Declaração
Os nomes das variáveis devem 
começar por uma letra e depois 
conter letras, números ou 
underline.
 = 
var ano;
var nome;
var idade;
Lógica!
Comandos e Variáveis
Nomes de Variáveis e sua Declaração
A atribuição de valores a variáveis é feita com o sinal =
a = 3
valor1 = 1.5
nome_do_aluno = "José da Silva"
sinalizador = false
Lógica!
Comandos e Variáveis
Como deixaro programa 
mais interativo?
Lógica!
Comando de Entrada:
O método prompt() faz 
com que uma mensagem 
seja exibida para o usuário 
e o processamento do 
software pare, aguardando 
uma resposta do usuário.
Comandos e Variáveis
Método prompt()
Para strings!!
Método +prompt()
Para variáveis numéricas.
Lógica!
Exemplo: 
Refaça o código da "Apresentação". No entanto, utilize variáveis e o comando de entrada.
Comandos e Variáveis
Operadores
Lógica!
Operadores Aritméticos
Sinal Explicação Exemplo
+, -
Operadores unários, isto é, são aplicados a um 
único operando
+3, -x
+, - , *, /
Operadores aritméticos tradicionais de adição, 
subtração, multiplicação e divisão
5+2 = 7
5*2 = 10
5/2 = 2.5
%
% Operador de módulo, isto é, resto da divisão 
inteira
5 % 2 = 1
** Operador de potenciação 5 ** 2 = 25
Lógica!
Operadores
Sinal Explicação Exemplo
A++ Soma +1 e guarda na variável A
Se A = 1, então A++ igual a ? 
++A
Soma +1 imprime e guarda na variável A Se A = 1, então ++A igual a ? 
B-- Subtrai -1 e guarda na variável B
Se B = 2, então B++ igual a ? 
--B
Subtrai -1 imprime e guarda na variável B Se B = 2, então ++B igual a ? 
Incremento e Decremento!
Lógica!
Operadores
Sinal Explicação Exemplo
+ 
Operador de concatenação de strings 
(isto é, cadeias de caracteres), quando 
usado com dois valores (variáveis ou 
constantes) do tipo "caractere"
"Rio " + " de Janeiro" =
"Rio de Janeiro".
Operadores de Caracteres
Lógica!
Operadores Atribuição
Sinal Explicação Exemplo
A += A = A + ? A += 3 → 4
A -=
A = A - ? A -= 1 → 3
A *= A = A*? A *= 3 → 9 
A /= A = A/? A /= 2 → 4,5
A %= A = A%? A %= 2 → 0,5
Suponha A = 1;
Lógica!
Operadores Relacionais
Sinal Explicação Exemplo
== Igual a 3 == 3 → VERDADEIRO
=== Extritamente igual (compara valor e tipo) 3 === “3” → FALSO
 Maior que 3 > 3 → FALSO
= Maior ou igual a 3 >= 3 → VERDADEIRO
!= Diferente de 3 != 3 → FALSO
!== Extritamente diferente (compara valor e tipo) 3 !== “3” → TRUE
Lógica!
Operadores Lógicos
Sinal Explicação Exemplo
&& E lógico X && Y
|| OU lógico X || Y
! Negação lógica !X
Lógica!
Operadores
Exemplo 1: Duas variáveis 
lógicas.
Qual o resultado ao rodar o 
código?
Onde encontrar a saída para 
cada um dos casos: 
document e console?
Vamos Praticar!
Primeiros Programas
Lógica!
Vamos praticar?
Exemplo 2:
Faça um programa que 
leia dois valores 
numéricos, e calcule e 
exiba a sua média 
aritmética.
Lógica!
Vamos praticar?
Quando inserimos os números 10 e 10 em campos de texto os valores retornados 
para cada campo também são texto ("string"). 1010/2 = 505
Existem métodos para contornar essa questão:
Função parseInt() - Esta função do JavaScript analisa o argumento "string" e retorna 
um valor numérico inteiro na base especificada.
Função parseFloat() - analisa o argumento "string" e retorna um número de ponto 
flutuante, ou seja, retorna valores decimais.
Usar o operador unário "+", colocando sinal + antes do prompt.
Lógica!
Vamos praticar?
Exemplo 2:
Veja que foi 
acrescentado o 
operador unitário “+”
Veja que foi inserido 
um alert. pop ups
Lógica!
Vamos praticar?
Exemplo 3:
Faça um algoritmo que 
leia a base e a altura de 
um triangulo. Em seguida, 
calcule a sua área e 
imprima os seguintes 
valores: base, altura e 
área.
Lógica!
Vamos praticar?
Exemplo 4:
Construa um algoritmo para 
ler dois números. Em 
seguida, calcule a soma, a 
subtração, a multiplicação e a 
divisão desses números, 
armazenando os resultados 
em outras variáveis. Imprimir 
os dados iniciais e os 
resultados.
Lógica!
Vamos praticar?
Exemplo 5:
Construa um algoritmo para 
dividir dois números e 
imprimir o resultado.
Perceba que a impressão 
pode sair com diferentes 
arredontamentos.
Atividades
Lógica!
Primeiros Programas
Atividade 1) Crie um algoritmo que leia o nome de um aluno, as 
notas de suas três provas. Calcule e exiba a média das provas com o 
nome do aluno.
Atividade 2) Crie um algoritmo que leia o valor do raio e calcule
a área e o perímetro do círculo correspondente.
Perímetro do círculo = 2*π*r
Área do círculo = π*r2
Lógica!
Primeiros Programas
Atividades:
Atividade 4) Crie um algoritmo que leia três valores a, b e c. Indique 
se a=b, a>b, a>=b, cc e (a+c)>b e (b+c)>a
Equilátero: todos os lados iguais. Escaleno: todos os lados diferentes.
Isósceles: dois lados são iguais.
Dicas!
Introdução à Logica!
Lógica!
Dicas!
• O medium é um site excelente
para quem busca bons textos de 
tecnologia para leitura. Acesse o 
link abaixo e leia sobre a história
do JavaScript!
• https://medium.com/@rafaelsouz
aim/javascript-everywhere-ato-1-
hist%C3%B3ria-do-javascript-
f26bea74b6d0
https://medium.com/@rafaelsouzaim/javascript-everywhere-ato-1-hist%C3%B3ria-do-javascript-f26bea74b6d0
https://medium.com/@rafaelsouzaim/javascript-everywhere-ato-1-hist%C3%B3ria-do-javascript-f26bea74b6d0
https://medium.com/@rafaelsouzaim/javascript-everywhere-ato-1-hist%C3%B3ria-do-javascript-f26bea74b6d0
https://medium.com/@rafaelsouzaim/javascript-everywhere-ato-1-hist%C3%B3ria-do-javascript-f26bea74b6d0
Referências!
Lógica!
[1] P. Balduino; Dominando JavaScript com jQuery. 2012. Ed. Casa do Código.
[2] Tutorial JavaScript W3Schools. Learn to code. https://www.w3schools.com/js/default.asp. Acessado 
em Julho/2023. 
[3] Douglas Crockford. Javascript: The world’s most misunderstood programming language, 2001. 
https://www.crockford.com/javascript/. Curso acessado em Julho/2023. 
[4] A. Goldman, F. Kon, Paulo J. S. Silva; Introdução à Ciência da Computação com Java e Orientação a 
Objetos (USP). 2006. Ed. USP.
[5] Algoritmo e lógica de programação. Acessado julho/2023: https://visualg3.com.br/
[6] G. Silveira; Algoritmos em Java; Ed. Casa do Código.
[7] M. T. Goodrich, R. Tamassia; Estrutura de dados e algoritmos em Java. Ed Bookman. 2007.
[8] Algoritmo e lógica de programação. Acessado julho/2023: https://www.cursoemvideo.com/
[9] P. Silveira, R. Turini; Java 8 Pratico: lambdas, streams e os novos recursos da linguagem. Ed. Casa do 
Código.
[10] Linguagem Java: Curso acessado em Julho/2023: https://www.udemy.com/
[11] Linguagem JavaScript: Curso acessado em Julho/2023: https://www.cursoemvideo.com/
Referências
https://www.w3schools.com/js/default.asp
https://www.crockford.com/javascript/
Até a próxima!
	Slide 1: Introdução à Lógica!
	Slide 2: Agenda
	Slide 3: Trilha Lógica!
	Slide 4: Lógica, antes de codar!
	Slide 5: Lógica, antes de codar!
	Slide 6: Lógica, antes de codar!
	Slide 7: Lógica, antes de codar!
	Slide 8: Lógica, antes de codar!
	Slide 9: Lógica, antes de codar!
	Slide 10
	Slide 11: O que é algoritmo?
	Slide 12: O que é algoritmo?
	Slide 13: O que é algoritmo?
	Slide 14: Tem  algoritmo! 
	Slide 15: O que é algoritmo?
	Slide 16: O que é algoritmo?
	Slide 17: O que é algoritmo?
	Slide 18: Ferramentas!
	Slide 19: Ferramentas!
	Slide 20: Ferramentas!
	Slide 21: Como codar com JavaScript e HTML?
	Slide 22: HTML
	Slide 23: JavaScript
	Slide 24: WEB
	Slide 25: Interpretação!
	Slide 26: Estrutura Padrão
	Slide 27: Comandos e Variáveis
	Slide 28: Comandos e Variáveis
	Slide 29: Comandos e Variáveis
	Slide 30: Comandos e Variáveis
	Slide 31: Comandos e Variáveis
	Slide 32: Comandos e Variáveis
	Slide 33: Comandos e Variáveis
	Slide 34: Comandos e Variáveis
	Slide 35: Comandos e Variáveis
	Slide 36:Comandos e Variáveis 
	Slide 37: Comandos e Variáveis 
	Slide 38: Comandos e Variáveis 
	Slide 39: Comandos e Variáveis 
	Slide 40: Comandos e Variáveis 
	Slide 41: Comandos e Variáveis 
	Slide 42: Comandos e Variáveis 
	Slide 43
	Slide 44: Comandos e Variáveis 
	Slide 45: Operadores
	Slide 46: Operadores Aritméticos 
	Slide 47: Operadores 
	Slide 48: Operadores 
	Slide 49: Operadores Atribuição 
	Slide 50: Operadores Relacionais 
	Slide 51: Operadores Lógicos 
	Slide 52: Operadores 
	Slide 53: Vamos Praticar!
	Slide 54: Primeiros Programas
	Slide 55: Vamos praticar? 
	Slide 56: Vamos praticar? 
	Slide 57: Vamos praticar? 
	Slide 58: Vamos praticar? 
	Slide 59: Vamos praticar? 
	Slide 60: Vamos praticar? 
	Slide 61: Atividades
	Slide 62: Primeiros Programas 
	Slide 63: Primeiros Programas 
	Slide 64: Primeiros Programas 
	Slide 65: Dicas!
	Slide 66: Dicas!
	Slide 67: Referências!
	Slide 68: Referências
	Slide 69: Até a próxima!