AULA 01 - Introdução a Lógica de Programação em JavaScript

Prévia do material em texto

Prof. Guibson Santana
SEJAM BEM VINDOS!!!
Prof. Guibson Santana
Introdução a Lógica de 
Programação em JavaScript
AULA 01
Prof. Guibson Santana
Agenda
• Informações sobre a DISCIPLINA
• Introdução a Programação Web
• HTML e CSS 
• São Linguagens de Programação?
• Por que eu preciso estudar?
• JavaScript
• Por que é uma linguagem tão poderosa? 
• Aonde podemos aplicar?
• De que forma posso criar os meus primeiros scripts?
• Como utilizar variáveis
• Funções de entrada e saída de dados
Slide 3
Prof. Guibson Santana
O QUE VAMOS ESTUDAR?
A disciplina aborda os conceitos de lógica e de
programação de computadores para a resolução de
problemas através de uma sequência de instruções.
Os conceitos que estudaremos são: variáveis,
expressões, operadores e estruturas de decisão.
Utilizaremos a Linguagem JavaScript para tal
compreendimento.
Slide 4
Prof. Guibson Santana
Orientações Complementares
O curso possui 6h com o professor(nos dias
estipulados pelo calendário, nas aulas virtuais)
mais 4h de atividades práticas(disponíveis na Sala
Google) totalizando 10h.
O estudante terá direito ao certificado, após
concluir e postar as atividades em um prazo
máximo de 3 dias após o termino da ultima aula
prevista no calendário.
Slide 5
Prof. Guibson Santana
Algumas perguntas antes de iniciarmos
1. Por que devo entender Lógica para ser um bom
programador?
2. O que Lógica de Programação tem haver com
tudo que faço em meu dia a dia?
3. Por que eu não devo somente estudar a
linguagem de programação na qual escolhi
utilizar?
Para responder todas essas perguntas, precisamos entender
alguns conceitos citados nelas.
Slide 6
Prof. Guibson Santana
Para VOCÊS o que é LÓGICA?
Slide 7
Prof. Guibson Santana
Lógica
Lógica é uma parte da filosofia que estuda o
fundamento, a estrutura e as expressões
humanas do conhecimento. A lógica foi criada
por Aristóteles no século IV a.C. para estudar o
pensamento humano e distinguir interferências
e argumentos certos e errados.
Mas e o que isso tem haver com Lógica de
Programação?
Slide 8
Prof. Guibson Santana
Lógica de Programação
O objetivo da lógica de programação é exercitar
os métodos de raciocínio e elaborar soluções
coerentes para determinados problemas, utilizando
se estruturas básicas de programação, construção e
representação de algoritmos para posterior
codificação em linguagens de programação.
Slide 9
Prof. Guibson Santana
É a técnica de encadear pensamentos para resolver
determinado problema computacional, considerando os
limites que a tecnologia da informática impõe.
Então se analisarmos bem, quando programamos,
precisamos utilizar as estruturas lógicas.
Com esses conhecimentos adquiridos, podemos
entender tranquilamente a importância dos dois e assim
responder sem pestanejar, as duas primeiras perguntas
feitas no inicio da aula.
Slide 10
Lógica de Programação
Prof. Guibson Santana
Outros Conceitos básicos
Quando pensamos em resolver um problema,
devemos analisar e ver que não existe uma única
forma de resolução. Para que consigamos traduzir
um algoritmo em uma linguagem, precisamos
analisar bem as formas de resolução possíveis e
escolher a mais adequada.
Mas o que seria um algoritmo?
Slide 11
Prof. Guibson Santana
Algoritmo
Segundo Forbellone, algoritmo pode ser
definido como uma sequência de passos que
visam atingir um objetivo bem definido.
Quando elaboramos um algoritmo, devemos
especificar ações claras e precisas que possam
resultar na solução de um problema proposto.
Slide 12
Prof. Guibson Santana
Sequência Lógica
Convém ressaltar que uma ordem isolada não
permite realizar o processo completo, para isso é
necessário um conjunto de instruções colocadas
numa ordem sequencialmente lógica.
Sequência Lógica são passos executados até
atingir um objetivo ou solução de um problema.
Será que existe uma forma de praticarmos, para
melhorarmos nosso raciocínio lógico?
Slide 13
Prof. Guibson Santana
Jogos lógicos
Mecanismo utilizado para desenvolver a
lógica, praticando alguns conceitos como a
matemática.
Slide 14
Prof. Guibson Santana
Exemplo de Jogo de Lógica
Regras:
• Atravessar com o lobo, a ovelha e os alfaces sem que 
a ovelha se alimente dos alfaces e sem que o lobo se 
alimente da ovelha.
• O barco só permite que atravesse um por vez.
• É permitido ir voltar com qualquer um dos três, mas 
apenas um por vez.
• O jogo termina quando todos os três estiverem na 
outra margem do rio. 
Slide 15
Prof. Guibson Santana
Solução
• Levar a ovelha para a outra margem do rio. Voltando 
assim sem nada.
• Levar o lobo para a outra margem do rio. Voltando 
com a ovelha.
• Levar os alfaces para a outra margem do rio. 
Voltando sem nada.
• Levar a ovelha para a outra margem do rio. Assim 
concluindo o jogo lógico.
Slide 16
Prof. Guibson Santana
Sucesso de um Algoritmo
Quando estudamos sobre variáveis, precisamos
entender que elas são um dos fatores que garante o
sucesso de um algoritmo ou programa, e por isso
devemos garantir a correta utilização delas.
Precisamos também entender que a utilização de
operadores é fundamental, se utilizados erroneamente, o
programa pode apresentar o famoso: erro de lógica.
E então respondemos a 3º pergunta feita no inicio
da aula. E ai vem uma nova: O que é Linguagem de
Programação e o que ela tem haver com tudo isso?
Slide 17
Prof. Guibson Santana
Assim como em nossa língua nativa, quando vamos pensar em
computação, precisamos entender que devemos escrever para o
computador em um formato que possamos nos comunicar com ele, e
para isso foram criadas as linguagens de programação. Precisamos
colocar em mente que são elas que determinam o conjunto de instruções
e regras usadas para que possamos criar algo computacional, um sistema
lógico, construir nossos algoritmos.
A linguagem que estudaremos para programar o que necessitamos e
entender tudo isso é o JavaScript. Aconselho a quem gostar, se
aprofundar nesta linguagem e no poder que ela tem.
Slide 18
Linguagem de programação
Prof. Guibson Santana
Indo para o que interessa, O JavaScript foi originalmente
desenvolvido por Brendan Eich da Netscape sob o nome de
Mocha, posteriormente teve seu nome mudado para
LiveScript e por fim JavaScript.
E ai vamos então conhecer as vantagens e como utilizar
esta poderosa linguagem.
JavaScript
Slide 19
Prof. Guibson Santana
O JavaScript já foi ridicularizado por ser uma
linguagem simples demais e limitadora do potencial de
um programador. Ainda hoje, muitos devs ainda torcem o
nariz para ela, mas a verdade é que, desde o seu
lançamento oficial em 1996 até os dias de hoje, o
JavaScript evoluiu muito e não foi à toa que se tornou a
linguagem mais popular do mundo, desbancando Java,
C#, PHP, Phyton e outras.
Por que usar JavaScript?
Slide 20
Prof. Guibson Santana
Segundo a analise trazida pelo site “olhar digital”, através de
dados colhidos pelo Ranking da RedMonk, hoje a linguagem
mais popular no mundo é o JavaScript, mas que existem outras
linguagens bem próximas: O Java e o Python.
Obs: O ranking da RedMonk é formulado com base em duas
plataformas populares entre desenvolvedores: o GitHub e o Stack
Overflow, o que dá uma ideia de popularidade das linguagens de
programação, mas existem na internet outros Ranking que
podemos analisar como a analise dos requisitos em vagas de
emprego na área de desenvolvimento de sistemas.
Por que usar JavaScript?
Slide 21
Prof. Guibson Santana
Entre as vantagens de utilização dessa linguagem em
todas as camadas de uma aplicação, a mais clara é a
padronização: com tudo sendo escrito em JavaScript, a
uniformidade da linguagem é maior e o trabalho é mais
compreensivo para quem está envolvido no projeto, seja um
dev front-end, back-end ou full stack.
Com o MongoDB, é possível usar o JavaScript no banco
de dados. Isso faz com que realmente todo o fluxo de um
objeto em uma aplicação seja realizado com o JavaScript.
Vantagens do JavaScriptSlide 22
Prof. Guibson Santana
Outra vantagem bem significativa é a possibilidade de
reaproveitamento do código. Reutilizar trechos de código
que já foram feitos é uma forma de reduzir a carga de
trabalho dos desenvolvedores e acelerar o término do
projeto.
Mas o que são esses danados do 
Front End e do Back End?
Vantagens do JavaScript
Slide 23
Prof. Guibson Santana
FRONTEND VS BACKEND
Slide 24
Prof. Guibson Santana
• Desenvolvedor front-end: é o responsável que projeta as interfaces de
um website. São eles que trabalham com o HTML, o CSS e o
JavaScript, para construir as páginas web.
• Desenvolvedor back-end: é o responsável por dinamizar o site através
das linguagens de programação (Java, C#, PHP,...).
Slide 25
Front-End e Back-End
Prof. Guibson Santana
Os pilares da web
Existem diversas tecnologias para criar aplicações e
páginas para a web. Todo desenvolvedor front-end e back-
end deve possuir um bom entendimento nas seguintes áreas:
• HTML e CSS
• JavaScript
• Linguagem de Programação
• Testes
• Encontrando erros (debugging)
• Frameworks
• Design responsivo
• SGBD
Slide 26
Prof. Guibson Santana
HTML e CSS
Dois carinhas que andam muito em conjunto com o JS
são: HTML e CSS. Mas como o curso não é de HTML e CSS,
iremos apenas entender quem são eles.
• HTML: é uma linguagem de marcação que é usado para
definir como o conteúdo de um determinado documento
será exibido, ou seja, as páginas possuem uma serie de
codificação e o browser se encarrega de transformar esse
código em algo adequado a visualização.
• CSS: é uma linguagem de formatação de estilo, utilizada
quando queremos criar paginas ou layout de aplicações,
juntamente com o html.
Slide 27
Prof. Guibson Santana
HTML e CSS
Alguns conceitos destas linguagens precisarão ser inseridos
durante as aulas e quando necessário, tudo será explicado. Não
precisa se aperriar em aprofundar nestas duas linguagens neste
momento, a não ser que você já queira ir mais longe.
Aconselho que vá com calma. Tudo no seu momento.
Slide 28
Prof. Guibson Santana
JavaScript
Quando pensamos em JavaScript, precisamos
entender que podemos inserir ou trabalhar ele de
diversas formas diferentes. Algumas delas nós iremos
utilizar durante nossos encontros.
Outro pontos que precisamos analisar hoje, são as
ferramentas utilizadas para programar em JS, e ai vem a
pergunta: Quais vocês conhecem e caso use
alguma, qual seria?
Slide 29
Prof. Guibson Santana
JavaScript
Principais Ferramentas:
• Notepad++ : se destaca pelo recurso que permite a identificação
da linguagem que está sendo usada. Leve, tem como ponto
negativo estar disponível apenas para Windows. Suporta Assembly,
Ruby C, HTML, PHP, JavaScript, ASP, SQL, C++, Java, C#, XML,
Objective-C, CSS, Pascal, Perl, Python, Lua,...
• Sublime Text : um dos mais populares, tem como principal
recurso a possibilidade de instalar plugins de acordo com a
necessidade do usuário. Suporta C, C++, C#, CSS, HTML,
Haskell, Java, Python, Latex, PHP, Ruby, SQL, XML, JavaScript,
Groovy,...
Slide 30
Prof. Guibson Santana
Notepad++
Slide 31
Prof. Guibson Santana
Notepad++
Slide 32
Para quem programa, o Notepad++ tem suporte à
diferenciação de comandos através de cores, um
recurso muito usado em ambiente de programação
(IDE). Ele já traz embutido o reconhecimento para
linguagens com C, C++, Java, HTML, XML, PHP,
JavaScript, Python e várias outras. Mas, se a
linguagem que você usa não for suportada, é possível
personalizar o programa para reconhecê-la, usando um
"sistema de definição de linguagem" integrado.
Prof. Guibson Santana
Notepad++
Slide 33
Justamente por causa de sua versatilidade ao
lidar com diferentes linguagens de programação e
arquivos de texto gigantes, o aplicativo é muito usado
por programadores, analistas de banco de dados e
vários outros profissionais ligados à informática. E é
justamente ele que iremos utilizar durante nossas aulas,
mas nada impedi você de utilizar outra.
Prof. Guibson Santana
• Este é o nosso primeiro exemplo de JS incluído dentro do corpo do html :
<html>
<head>
<title>Meu primeiro Javascript</title>
</head>
<body>
<h1>Meu primeiro Javascript</h1>
<script type="text/javascript"> 
document.write("alo mundo !!!");
</script>
</body>
</html>
JavaScript
Slide 34
Prof. Guibson Santana
• Neste segundo exemplo, podemos ver que o JS esta no cabeçalho do html, executando
uma função determinada pelo programador, no texto html:
<html lang="pt-BR"> 
<head>
<meta charset="UTF-8" /> 
<title>JavaScript</title>
<script> 
window.onload = function () { document.getElementById("hello").addEventListener("click", function () { 
alert("Bem-vindo!"); }, false); }; 
</script>
</head>
<body>
<noscript>Seu navegador não suporta JavaScript ou ele está desabilitado.</noscript>
<button id="hello">Dizer "Olá"</button>
</body>
</html>
JavaScript
Slide 35
Prof. Guibson Santana
Podemos também criar um arquivo externo aonde podemos chamar qualquer
função nele existente:
Slide 36
JavaScript
<!--Arquivo HTML-->
<!DOCTYPE html>
<html>
<head> 
<script src=“script.js"></script>
</head>
<body>
<button onclick="clique_botao1();">BOTÃO 
1</button>
<button onclick="clique_botao2();">BOTÃO 
2</button>
</body></html>
//Funções do JavaScript script.js
function clique_botao1() {
alert("Você clicou no botão 1");
}
function clique_botao2() {
alert("Você clicou no botão 2");
}
Prof. Guibson Santana
JavaScript
Com o JS, você pode mostrar mensagens e outras
informações interessantes, fazer verificações ou mudar
dinamicamente a apresentação visual das páginas,
conforme o comportamento que você deseja que sua
página (ou aplicação) possua. Tudo através do
navegador do usuário. É possível fazer isso, até mesmo
sem conexão com a internet.
Mas como programar em JS?
Slide 37
Prof. Guibson Santana
• Usando variáveis
Essa linguagem possui tipagem dinâmica, ou seja, não é necessário
definir o tipo das variáveis ao declará-las, para isso basta usar a palavra
reservada “var”.
A seguir temos alguns exemplos de utilização de variáveis.
Exemplo:
var nome;
nome = “Fulano de Tal”;
var idade = 30;
idade = 30 + 20 - 10*5;
Slide 38
JavaScript
Prof. Guibson Santana
• Usando variáveis
Quando pensamos em variáveis, precisamos pensar nos
tipos de dados que elas podem armazenar, mesmo que na
linguagem não seja necessário especificar o tipo (inteiro, real,
caracteres ou lógico). Exemplo:
1. Será que poderíamos somar ‘A’ + ‘C’?
2. Será que um número com casas decimais se comporta da
mesma forma do que um número inteiro?
3. ...
Slide 39
JavaScript
Prof. Guibson Santana
ATENÇÃO
Estejam sempre de olho na SALA 
GOOGLE, pois é um mecanismo muito 
importante para o BOM 
DESENVOLVIMENTO da disciplina e 
dos CONTEÚDOS ABORDADOS.
Slide 40
Prof. Guibson Santana
Slide 41
Dúvidas?