Ling.

de Programação - Capítulo 2
sites.google.com/ifsuldeminas.edu.br/linguagem-de-programacao/capítulo-2

Javascript e suas regras de sintaxe

2.0 Objetivos

Compreender a relação entre Javascript e HTML;

Conhecer e saber como utilizar variáveis e seu escopo de atuação;

Conhecer e saber como utilizar operadores aritméticos e funções matemáticas;

2.1 Conceitos importantes

Como vimos no conteúdo anterior, Javascript é considerada a linguagem de programação
mais usada pelas pessoas programadoras ao redor do mundo, Dessa forma, para quem
deseja seguir uma carreira na área de tecnologia, principalmente desenvolvimento de
software, é estratégico aprender essa Javascript. No desenvolvimento web, o Javascript
pode ser usado no Frontend, Backend e até mesmo na comunicação com banco de dados.

JavaScript é uma linguagem de script do lado do cliente muito poderosa e robusta

usada para fornecer experiências perfeitas ao usuário no uso de uma página da web.
JavaScript pode tornar sua página da web dinâmica. Ele colabora com HTML e CSS
para criar páginas ou aplicativos interativos da Web.

No frontend é possível manipular os elementos da página, como já exploramos. No

backend é possível tratar requisições e executar diversas tarefas através de frameworks.
Já para o banco de dados, o alguns gerenciadores (exemplo: MongoDB) permite que a
mesma tecnologia seja usada em consultas.
Figura 2.1: Onde utilizar Javascript

Assim, com o conhecimento de apenas uma linguagem, a pessoa pode se tornar um full-
stack (pilha completa) — termo que descreve a pessoa capaz de desenvolver em todas as
etapas de um sistema web. Ter esse tipo de pessoa na equipe é vantajoso para as
empresas, pois dispensa a necessidade de mais contratações.

Contudo, estamos falando de uma tecnologia que vai além da web.

Figura 2.2: Tipos de desenvolvedores Full Stack Javascript

Atualmente, ela é importante também para o desenvolvimento de aplicações mobile,

através de frameworks como por exemplo o React Native e o Cordova. É possível também
criar aplicações desktop, com o Electron, por exemplo.

Com o passar dos anos, a demanda dos usuários por uma experiência muito mais rica em
sites está aumentando. Espera-se o mesmo nível de desempenho e o ambiente interativo
que costumam obter com aplicativos móveis e desktop nativos.

Um desenvolvedor full-stack é um indivíduo que é versátil em vários fluxos, ou seja,

front-end, back-end, banco de dados, aplicativo móvel e teste. Agora, a arena de
desenvolvimento e as tendências apenas mudaram.

Por que contratar um desenvolvedor Full-Stack?

Redução de custos, pois não há necessidade de contratar um desenvolvedor front-
end e back-end.
 Responsável por toda a estrutura de projeto e trabalho em qualquer nível conforme
necessário no processo de desenvolvimento.

Fácil de se apropriar do design e implementação em um site ou aplicativo.

Fácil de atualizar com novas tecnologias e ferramentas mais rápido do que alguém
especializado apenas em front-end ou back-end.

Um desenvolvedor full-stack oferece a flexibilidade de passar de uma tarefa para

outra de acordo com a necessidade do projeto.

MEAN Stack
MongoDB: Um banco de dados de documentos que é utilizado por seu aplicativo
da Web para armazenar seus dados cruciais como documentos JSON (JavaScript
Object Notation)

Express.js: É um framework de aplicação web back-end que roda em Node.js

Angular.js: É uma estrutura de aplicativo da Web de front-end que executa seu

código JavaScript no navegador do usuário, permitindo que a interface do usuário
do aplicativo seja dinâmica

Node.js: fornece um ambiente de tempo de execução JavaScript que permite

executar o back-end de seu aplicativo da Web em JavaScript

MERN Stack
MongoDB: É um banco de dados de documentos que é usado pelo seu aplicativo
de back-end para armazenar seus dados como documentos JSON (JavaScript Object
Notation)

Express.js: É uma estrutura de aplicativo da Web de back-end que executa

aplicativos no Node.js

React.js: É uma biblioteca front-end JavaScript para desenvolvimento de

interfaces de usuário

Node.js: um ambiente de tempo de execução JavaScript que permite executar o

back-end de seu aplicativo em JavaScript

2.2 A Relação do Javascript com o HTML

Reforçando, a utilização de Javascript necessita de certas noções

1. HTML: para definir o conteúdo das páginas da web.

2. CSS: para especificar o layout das páginas da web.

3. Lógica de Programação: base para qualquer linguagem de programação.

Perguntas frequentes

Como faço para obter JavaScript?

Você não precisa obter ou baixar JavaScript.

Onde posso baixar o JavaScript?

O JavaScript já está sendo executado em seu navegador, em seu computador,

em seu tablet e em seu smartphone (é nativo ou seja, faz parte dos sistemas).

O JavaScript é gratuito?

O JavaScript é gratuito para todos.

Como te tornar um bom programador?

A única maneira de se tornar um bom programador é: Praticar. Praticar.

Praticar. Código. Código. Código!

2.2.1 Como executar seu primeiro código JavaScript

Para executar seu primeiro código JavaScript, podemos utilizar qualquer editor de textos,
como exemplo. Para isso, crie um arquivo html simples, com o conteúdo a seguir (use
esse padrão inicial para nossas aulas):

<!DOCTYPE html><html lang="pt-br"> <head> <meta charset="utf-8"> <title>Começando com

JavaScript</title> </head> <body> <h2>Começando com JavaScript</h2> </body>
</html>

Observe que este código tem somente marcações HTML estáticas. Abra em seu navegador
a página que criou e veja o que é exibido. Posteriormente, edite seu arquivo inserindo as
modificações propostas abaixo, não se esqueça de salvar:

<!DOCTYPE html><html lang="pt-br"> <head> <meta charset="utf-8"> <title>Começando com

JavaScript</title> </head> <body> <h2>Começando com JavaScript</h2> <script>alert("Olá Técnico em
Informática!");</script> </body>
</html>
Além do código (óbvio) o que mudou quando você executa (abre) sua página após o
salvamento? O que aconteceu foi que criamos uma caixa de diálogo (uma janela de
comunicação do site com o usuário). Acabamos de executar nossa primeira função em
JavaScript (ver Figura 2.3). Este foi um exemplo simples pra ter noção, na prática, do
que é efetivamente o JavaScript.

Figura 2.3: Resultado da execução dos scripts.

2.2.2 A tag <script>

Em HTML, o código JavaScript é inserido entre as tags <script> e </script>. Uma função
JavaScript é um bloco de código JavaScript, que pode ser executado quando "chamado".
Por exemplo, uma função pode ser chamada quando ocorre um evento , como quando o
usuário clica em um botão. Você aprenderá muito mais sobre funções e eventos
em capítulos posteriores.

Você pode colocar qualquer número de scripts em um documento HTML. Os scripts

podem ser colocados no <body>, ou na seção <head> de uma página HTML, ou em
ambos. Também podemos deixar nossos scripts em um arquivo separado e "apontar"
para ele para conseguirmos acessar seu conteúdo. Veremos a seguir três formas de se
acessar um código Javascript.

Exemplos antigos de JavaScript podem usar um atributo de tipo: <script

type="text/javascript">.

O atributo type não é obrigatório.

2.2.3 JavaScript na seção <head>

Neste exemplo, uma função JavaScript é colocada na seção <head> de uma página
HTML. A função é invocada (chamada) quando um botão é clicado:

<!DOCTYPE html>

<html>

<head>

<script>

function minhaFuncao() {

document.getElementById("alvo").innerHTML = "Parágrafo modificado.";

</script>

</head>

<body>

<h2>Demonstração de JavaScript na seção Head</h2>

<p id="alvo">Apenas um parágrafo</p>

<button type="button" onclick="minhaFuncao()">Clique</button>

</body>

</html>

Comentando o Código...

Veja que neste exemplo introduzimos mais algumas "palavras mágicas" de nosso novo
dialeto (idioma). Observe que dentro da seção head, criamos uma função chamada de
"minhaFuncao()", existem também várias funções pré-prontas para manipulação de
outros atributos (matemáticas, arquivos, css, etc).

Você deve se lembrar das aulas de Lógica de Programação, lá aprendemos que para
instanciar (criar) uma variável, na programação, não podemos utilizar caracteres
especiais (*, /, ^, <, >, -, etc), espaços ou iniciar com números. A mesma regra se aplica
para os nomes das funções, veja que dei um nome sugestivo, porém sem usar "ç" e "ã".

Os parênteses no final da função também são obrigatórios, como dito anteriormente,

veremos mais a frente em nosso curso os tipos de funções, mas neste momento basta-nos
saber que uma função é um subprograma ou seja um trecho de código reutilizável.
 Dentro de minhaFuncao, podemos também ver observar um novo código,
composto por 4 partes:

1. document: comando que serve para selecionar/apontar para a página html que
estamos editando;

2. getElementById("alvo"): atributo de seleção. A tradução livre seria "selecione

no documento o elemento que possui o ID". Ou seja, permite que você selecione
algum elemento de sua página. Em nosso caso, informei dentro das aspas a palavra
"alvo", que é o id (identificador) que usei para nomear a tag <p> (<p id="alvo">),
alvo poderia ser substituída por qualquer outra palavra, desde que seja ajustado na
ID da tag e na função. Existem outras formas de selecionar itens na página,
veremos mais tipos em nossos próximos conteúdos.

3. innerHTML: informa ao seletor que queremos incluir ou modificar um conteúdo

interno do elemento selecionado. Ou seja, quero usar o espaço entre as tags
selecionadas no caso, a tag <p id="alvo"> </p>.

4. "Parágrafo modificado.";: texto que vamos utilizar para modificar o texto pré-
existente na tag selecionada. Observação importante: todo comando Javascript
deve ser finalizado por ";" (ponto e vírgula). Já funções ou blocos de comando são
iniciados por "{" (abertura de chaves) e finalizados por "}" (fechamento de chaves.

Dentro da seção <body> também podemos ver que temos uma nova tag, a
<button>, vamos entendê-la:

1. type="button": informamos o formato da tag, no caso, um botão convencional

(existem outros)

2. onclick="minhaFuncao()": evento que vai disparar a execução (chamada) da

função "minhafuncao" que foi criada na seção head.

3. Clique: texto que aparecerá no botão (rótulo).

Você aprenderá muito mais sobre funções e eventos em capítulos posteriores.

2.2.4 JavaScript na seção <body>

Neste exemplo, uma função JavaScript é colocada na seção <body> de uma página
HTML. A função é invocada (chamada) quando um botão é clicado:

<!DOCTYPE html>

<html>

<head>
</head>

<body>

<h2>Demonstração de JavaScript na seção Body</h2>

<p id="alvo">Apenas um parágrafo</p>

<button type="button" onclick="minhaFuncao()">Clique</button>

<script>

function minhaFuncao() {

document.getElementById("alvo").innerHTML = "Parágrafo modificado.";

</script>

</body>

</html>

Comentando o Código...

Observe que dentro da seção head não tem mais a presença do script, esta foi transferida
para o final da seção body. A recomendação para melhor efetivação do código é
exatamente esta: no caso de o Javascript ser inserido na seção body, deve ser a
última tag de todas. Ademais, os comandos inseridos são os mesmos do primeiro
exemplo, somente reposicionados.

Colocar scripts na parte inferior do elemento <body> melhora a velocidade de exibição,

porque a interpretação do script torna a exibição mais lenta.

2.2.5 JavaScript externo

Neste exemplo, vamos separar o Javascript em outro arquivo (externo). Scripts externos
são práticos quando o mesmo código é usado em muitas páginas web diferentes
(reutilização de código). Os arquivos JavaScript têm a extensão de arquivo ".js". Para usar
um script externo, na mesma pasta/diretório onde você criou sua página html,
crie um outro arquivo com o nome que desejar (utilize nomes sugestivos, facilita
posteriormente a manutenção), aqui neste exemplo vou usar o nome "meuScript.js"
com o seguinte conteúdo:
function minhaFuncao() {

document.getElementById("alvo").innerHTML = "Parágrafo modificado.";

Veja que o conteúdo do arquivo deverá ter apenas os comandos Javascript, a

tag <script> não entra, pois ela faz parte da estrutura do HTML.

Figura 2.4: Pasta/Diretório com os dois arquivos

Figura 2.5: Conteúdo do arquivo meuScript.js

Modifique seu arquivo HTML para o seguinte conteúdo:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>Demonstração de JavaScript na seção Body</h2>

<p id="alvo">Apenas um parágrafo</p>

<button type="button" onclick="minhaFuncao()">Clique</button>

<script src="meuScript.js"></script>

</body>

</html>

Comentando o Código...

Você pode colocar uma referência de script externa na seção <head> ou na seção
<body>,como desejar. O script se comportará como se estivesse localizado exatamente
onde a tag <script> está localizada. Veja que o comportamento dos demais elementos da
página continuam se comportando como antes. Este é o padrão utilizado pelas
empresas desenvolvedoras de código, pois separa seu código em camadas e
facilita sua manutenção.

Vantagens externas do JavaScript

Colocar scripts em arquivos externos tem algumas vantagens:

Separa HTML e código;

Torna o HTML e o JavaScript mais fáceis de ler e manter;

Arquivos JavaScript em cache podem acelerar o carregamento da página.

Você pode inclusive adicionar vários arquivos de script a uma página, veja
como no exemplo a seguir:

<script src="meuScript1.js"></script>

<script src="meuScript2.js"></script>

Referências externas

Um script externo pode ser referenciado de 3 maneiras diferentes:

Com um URL completo (um endereço web completo);

Com um caminho de arquivo dentro do servidor (exemplo: /js/meuScript.js);

Sem nenhum caminho (quando o arquivo está no mesmo diretório da página html).
Este exemplo usa uma URL completa para vincular ao script meuScript.js:

<script src="https://tco.ifsuldeminas.edu.br/js/meuScript.js"></script>

Este exemplo usa um caminho de arquivo para vincular ao script

meuScript.js:

<script src="/js/meuScript.js"></script>

Este exemplo não usa nenhum caminho para vincular ao script meuScript.js:

<script src="meuScript.js"></script>

Scripts externos não podem conter tags <script>.

2.3 Variáveis e Constantes

Variáveis são nomes simbólicos para representar valores em sua aplicação, ou seja, os
valores que você irá trabalhar em seu código. Elas são responsáveis por tornar sua
estrutura compreensível e dinâmica e podem ser alteradas ao longo da construção. Já as
constantes são representam um valor fixo que não poderá ser alterado ou declarado ao
longo da execução.

Em resumo, variáveis ​são contêineres para armazenar dados (armazenando valores de

dados).

Agora que você já sabe onde e como criar um script e para entender melhor
como declarar, utilizar e ver os resultados, sugiro que você crie uma página
HTML como utilizada nos exemplos para praticar.
Figura 2.6: representação lúdica de uma variável

Existem basicamente três maneiras de declarar uma variável em

JavaScript:
Usando var

Usando let

Usando const

2.3.1 Utilizando Var

Antes do advento do ES6, as declarações de var eram a regra. No entanto, havia
problemas associados à declaração de variáveis com var. Por isso, foi necessário o
surgimento de novas formas de declarar variáveis. Primeiro, vamos entender melhor o
var antes de discutir esses problemas.

Escopo do var

Escopo, essencialmente, significa onde essas variáveis poderão ser utilizadas. Declarações
com var tem escopo global ou escopo de função/local. O escopo é global quando uma
variável var é declarada fora de uma função. Isso significa que qualquer variável que seja
declarada com var fora de um bloco de função pode ser utilizada na janela inteira. A
declaração var terá escopo local quando for utilizada dentro de uma função. Isso significa
que estará disponível e pode ser acessado somente de dentro daquela função.

Para entender melhor, veja o exemplo abaixo:

var saudacao = "Olá, tudo bem?"; function novaFuncao() { var oi = "Bem vindo!";
}

Aqui, a variável "saudacao" tem um escopo global, pois foi criada fora de uma função,
enquanto a variável "oi" tem escopo de função (local). Por isso, neste caso, não podemos
acessar a variável "oi" fora da função "novaFuncao". Assim, se fizermos isso:

var saudacao = "Olá, tudo bem?"; function novaFuncao() { var oi = "Bem vindo!";
}

alert(oi);

Teremos um erro resultante do fato de "oi" não estar disponível fora da função e a caixa
de diálogo (alert) não abre. Por outro lado se você modificar seu código para utilizar a
variável "saudacao", esta estará visível. Tente o exemplo abaixo:

var saudacao = "Olá, tudo bem?"; function novaFuncao() { var oi = "Bem vindo!";
}

alert(saudacao);

Variáveis var podem ser declaradas de novo e atualizadas

Isso significa que é possível fazer o seguinte dentro do mesmo escopo e não gerar um
erro:

var saudacao = "Bem vindo!";

var saudacao = "Diga olá novamente!";

Ou dessa forma:

var saudacao = "Bem vindo!";

saudacao = "Diga olá novamente!";

Problema com var

Há um ponto fraco no uso de var. Como uma variável pode ser novamente instanciada, se
você sem querer, fazer isso, pode se surpreender com o resultado que vai obter. Isso
provavelmente causará vários bugs no seu código. É por isso que let e const são
necessários.

2.3.2 Utilizando Let

Um bloco é uma porção de código cercado por { } (abertura e fechamento de chaves). Um
bloco vive dentro dessas chaves. Tudo o que estiver cercado por chaves é um bloco.
Assim, uma variável declarada com let em um bloco estará disponível apenas dentro
daquele bloco. Vamos explicar isso com um exemplo:

function minhafuncao(){

let saudacao = "Diga olá!";

let oi = "Bem vindo!";

alert(saudacao);

alert(oi);

Vemos que o uso da variável "saudacao" fora de seu bloco (as chaves dentro das quais a
variável foi definida) retorna um erro e não exibe a caixa de diálogo. Isso ocorre porque as
variáveis de let têm escopo de bloco ou seja, local.

let pode ser atualizado, mas não declarado novamente

Assim como var, uma variável declarada com let pode ser atualizada dentro de seu
escopo. Diferente de var, no entanto, uma variável let não pode ser declarada novamente
dentro de seu escopo. O código a seguir funciona:

let saudacao = "Diga olá!";

saudacao = "Diga olá novamente!";

Este outro código, no entanto, retornará um erro:

let saudacao = "Diga olá!";

let saudacao = "Diga olá novamente!";

Porém, se a mesma variável for definida em escopos diferentes, não haverá erro:

function minhafuncao(){

let saudacao = "Diga olá!";

alert(saudacao);

let saudacao = "Bem vindo!";

alert(saudacao);

Por que isso não retorna um erro? Porque as duas instâncias são tratadas como variáveis
diferentes, já que são de escopos diferentes. Este fato torna o let uma escolha melhor do
que var. Ao usar let, você não precisa se preocupar se usou o nome para uma variável
antes, já que a variável existe somente dentro daquele escopo.

Além disso, como uma variável não pode ser declarada mais de uma vez dentro de um
escopo, o problema que ocorre com var que discutimos antes não acontece.

2.3.3 Utilizando Const

Variáveis declaradas com const mantêm valores constantes. Declarações com const
compartilham algumas semelhanças com as declarações com let. Declarações com const
têm escopo de bloco (local). Assim como as declarações de let, as declarações de const
somente podem ser acessadas dentro do bloco onde foram declaradas.

Uma premissa importante é que uma declaração de variável do tipo const não
pode ser atualizada nem declarada novamente. Isso significa que o valor de uma
variável declarada com const se mantém o mesmo dentro do escopo.

Veja exemplos a seguir que causariam erro ao utilizar uma const:

 erro: atribuição a uma variável constante

const saudacao = "Diga oi!";

saudacao = "Diga oi novamente!";

erro: identificador "saudacao" já declarada

const saudacao = "Diga oi!";

const saudacao = "Diga oi novamente!";

Cada declaração com const, portanto, deve ser inicializada no momento da declaração.
Embora um objeto declarado com const não possa ser atualizado, é possível atualizar as
propriedades desse objeto. Assim, podemos declarar um objeto com const dessa forma:

const saudacao = {

mensagem: "Olá!",

numero: 4

Não será possível fazer isso (modificar parâmetros internos):

const saudacao = {

palavra: "Olá!",

numero: 4

Contudo, será possível fazer isso:

saudacao.mensagem = "Olá!";

Isso atualizará o valor de saudacao.menssagem sem retornar erros.

2.4 Vamos codar?

Sem enrolação, codar é programar. Portanto, o termo se tornou um verbo no dia a dia
do developer (desenvolvedor). É muito comum ouvir um colega falando que vai codar em
Java ou que aprendeu a linguagem C, mas ainda não codou, por exemplo.
2.4.1 Variáveis e Constantes

Watch Video At: https://youtu.be/KG1uwe6QnSQ

Variáveis são nomes simbólicos para representar valores em sua aplicação, ou seja, os
valores que você irá trabalhar em seu código. Elas são responsáveis por tornar sua
estrutura compreensível e dinâmica e podem ser alteradas ao longo da construção. Já as
constantes são representam um valor fixo que não poderá ser alterado ou declarado ao
longo da execução.

2.4.2 Tipos Primitivos

Watch Video At: https://youtu.be/a1NiHwH9clE

Tipos primitivos são dados básicos que possuem apenas um valor. Tipos Primitivos não
são objetos, portanto, não possuem métodos. Em Javascript temos os seguintes tipos
primitivos:

Strings: É uma sequência de caracteres utilizados para representar textos.

Number: É um tipo de dado que representa números.

Boolean: é um tipo de dado lógico que pode ter apenas dois valores: true ou false.

Null: em Javascript representa um valor nulo ou vazio. Pode representar também

um objeto inexistente;

Undefined: é um tipo de dados especial atribuído automaticamente a variáveis

criadas sem valor ou a parâmetros de uma função que não recebeu argumentos;

Symbol: Introduzido no ES6;

2.4.3 Operadores Aritméticos

Watch Video At: https://youtu.be/wkradRZd93g

Em Javascript é possível realizar operações matemáticas de maneira simples, através dos

operadores aritméticos.

Os operadores usam valores numéricos para realizar “cálculos”, esses cálculos retornam
um único valor, o resultado da operação. Ele se dividem em operadores unários e
binários.

2.4.4 Operadores Relacionais

Watch Video At: https://youtu.be/hoPy34YaR4U

Estes operadores comparam dois valores e retorna um resultado boleando, valor lógico
(boolean). São eles:

Maior que (>): retorna verdadeiro caso o valor da esquerda seja maior que o valor
da direita.

Maior que ou igual (>=): retorna verdadeiro caso o valor da esquerda seja maior
ou igual ao valor da direita.

Menor que (<): retorna verdadeiro caso o valor da esquerda seja menor que o
valor da direita.

Menor que ou igual (<=): retorna verdadeiro caso o valor da esquerda seja
menor ou igual ao valor da direita.

Igualdade (==): retorna verdadeiro caso os valores sejam iguais.

Desigualdade (!=): retorna verdadeiro caso os valores sejam diferentes.

Estritamente Igual (===): retorna verdadeiro caso os valores e os tipos sejam

iguais.

Estritamente Desigual (!==): retorna verdadeiro caso os valores e/ou tipos não
sejam iguais.

2.4.5 Operadores Lógicos

Watch Video At: https://youtu.be/ivGxVPnWSCA

Os operadores lógicos são utilizados com valores boolean ou expressões e retornam um

valor boolean como resultado da operação, sendo eles:

Lógico

Não lógico

2.5 Resumo
Nessa aula, compreendemos que as declarações de var tem escopo global ou de função,
isto é, ficam visíveis para toda a aplicação, enquanto as declarações de let e de const têm
escopo de bloco ou local (são visíveis apenas dentro do bloco ou função onde foram
criadas/instanciadas).

Variáveis de var podem ser atualizadas e declaradas novamente dentro de seu escopo. As
variáveis de let podem ser atualizadas, mas não podem ser declaradas novamente. As
variáveis const não podem ser atualizadas nem declaradas novamente.

Enquanto var e let podem ser declaradas sem ser inicializadas, const precisa da
inicialização durante a declaração.

Começar a aprender Javascript pode parecer uma tarefa desafiadora, mas é possível
torná-la bem prática e intuitiva apenas com a organização dos tópicos principais dessa
linguagem!

2.6 Extras
Fontes:

https://www.classicinformatics.com/

https://www.w3schools.com/

https://www.freecodecamp.org/

https://coodesh.com/

Página atualizada

Denunciar abuso