DSI: JavaScript

Profª. Msc. Sahra Karolina

 O que é JavaScript?
O JavaScript é uma linguagem
de script popular para adicionar
funcionalidade interativa e outros
conteúdos dinâmicos da web às
páginas web.

2022 Desenvolvimento de Sistemas para Internet 2

 Exemplos bem conhecidos de conteúdo JavaScript incluem

formulários que gráficos animados apresentações de

podem ser slides de galeria de
preenchidos fotos

2022 Desenvolvimento de Sistemas para Internet 3

O JavaScript

• É a camada final de funcionalidade em sites altamente interativos. O HTML

fornece a estrutura básica para a página.
• CSS é o recurso para estilizar seu site – ele define o estilo do seu site.
• O JavaScript então adiciona tempero.

2022 Desenvolvimento de Sistemas para Internet 4

 JavaScript

Ao aprender JavaScript, é essencial

entender a relação entre HTML,
CSS e JavaScript, e como eles se
unem na exibição de um site.

2022 Desenvolvimento de Sistemas para Internet 5

 Para que é usado o JavaScript

2022 Desenvolvimento de Sistemas para Internet 6

 Embora o desenvolvimento de sites – incluindo a adição de elementos como formas interativas
e animações – seja o uso mais tradicional para o JavaScript, ele também encontra uso em:

• Jogos baseados em navegador da Web – incluindo jogos 2D e 3D

• Desenvolvimento de aplicativos móveis – benéfico porque é agnóstico da plataforma

telefônica

• Apresentações – a criação de plataformas de slides animados baseados na web

Embora a maioria dos aplicativos JavaScript sejam do lado do cliente, o JavaScript também é
útil em aplicativos do lado do servidor, tais como a criação de servidores web.

2022 Desenvolvimento de Sistemas para Internet 7

 Bibliotecas JavaScript
• Uma biblioteca JavaScript é uma coleção de código pré-escrito que
desempenha certas funções.

• As bibliotecas permitem que até mesmo usuários novatos construam sites

úteis rapidamente.

• E elas poupam tanto aos usuários novatos quanto aos experientes um tempo
significativo na construção de sites e aplicativos.

• Embora existam muitas bibliotecas JavaScript, algumas das mais populares

incluem jQuery, Anime.js, Animate on Scroll, e Leaflet.js.

2022 Desenvolvimento de Sistemas para Internet 8

 Como o JavaScript se relaciona com as
frameworks do site

As estruturas de sites são construtores avançados

de sites, normalmente com extensas bibliotecas
de funcionalidades e conjuntos de testes pré-
construídos.
Existem estruturas do lado do servidor, como
Laravel, Ruby on Rails ou Django.
Mas há também vários frameworks populares
baseados em JavaScript do lado do cliente,
incluindo React.js, Vue.js, e Node.js.

2022 Desenvolvimento de Sistemas para Internet 9

 Atividade de classe
1.Pesquise e explique cada um dos frameworks a seguir:

a)React.js
b)Vue.js
c)Node.js
2.Pesquise também:

a)Laravel
b)Ruby on Rails
c)Django

2022 Desenvolvimento de Sistemas para Internet 10

Prática
• Para começar, mostraremos como adicionar alguns JavaScript
básicos à sua página, criando um exemplo de "Olá mundo!“
• Primeiro, vá para o seu site de teste e crie uma nova pasta chamada
scripts. Em seguida, dentro da nova pasta de scripts que você
acabou de criar, crie um novo arquivo chamado main.js. Salve na
sua pasta de scripts.
• Em seguida, no seu arquivo index.html, insira o seguinte elemento
em uma nova linha logo antes da tag de fechamento </body>:

<script src="main.js"></script>
2022 Desenvolvimento de Sistemas para Internet 11
Prática
• Isso é basicamente a mesma coisa que o elemento <link> para o
CSS — ele aplica o JavaScript à página, para que ele tenha efeito
no HTML (junto com o CSS e qualquer outra coisa na página).
• Agora adicione o seguinte código no arquivo main.js

const meuCabecalho = document.querySelector('h1');

meuCabecalho.textContent = 'Ola mundo!';

2022 Desenvolvimento de Sistemas para Internet 12

Prática
• Por fim, verifique se os arquivos HTML e Javascript estão salvos e,
em seguida, carregue o index.html no navegador.

Nota: A razão pela qual colocamos o elemento <script> perto da parte

inferior do arquivo HTML, é que o HTML é carregado pelo navegador na
ordem em que ele aparece no arquivo. Se o JavaScript é carregado primeiro
ele pode afetar o HTML abaixo dele, mas as vezes isso pode não funcionar,
já que o JavaScript seria carregado antes do HTML em que ele deveria
trabalhar. Portanto, colocar o JavaScript próximo à parte inferior da página
HTML geralmente é um meio de corrigir isto.

2022 Desenvolvimento de Sistemas para Internet 13

Prática
• Seu texto de título foi alterado para "Hello world!" usando
JavaScript.
• Você fez isso primeiro usando uma função chamada
querySelector() para obter uma referência ao título e armazená-lo
em uma variável chamada meuCabecalho.
• Isso é muito parecido ao que fizemos usando seletores CSS.
• Quando queremos fazer algo em um elemento, primeiro você
precisa selecioná-lo.

2022 Desenvolvimento de Sistemas para Internet 14

Prática
• Depois disso, você define o valor da propriedade textContent para
"Hello world!", na variável meuCabecalho (que representa o
conteúdo do título).

2022 Desenvolvimento de Sistemas para Internet 15

Variáveis
• Variáveis são espaços na memória do computador onde você pode
armazenar dados.
• Você começa declarando uma variável com a palavra-chave var
(menos recomendado, se aprofunde mais para uma explicação) ou a
palavra chave let, seguida por qualquer nome que você queira
chamá-la:

let minhaVariavel;

2022 Desenvolvimento de Sistemas para Internet 16

Variáveis
• Depois de declarar uma variável, você pode dar a ela um valor:

minhaVariavel = ‘Débora';

2022 Desenvolvimento de Sistemas para Internet 17

Variáveis
• Depois de declarar uma variável, você pode dar a ela um valor:

minhaVariavel = ‘Débora';

• Você pode fazer as duas operações na mesma linha se você quiser:

let minhaVariavel = ‘Débora';

2022 Desenvolvimento de Sistemas para Internet 18

Variáveis
• Você pode retornar o valor chamando a variável pelo nome:

minhaVariavel;

• Depois de dar à variável um valor, você pode mudá-lo:

let minhaVAriavel = ‘Débora';

minhaVariavel = ‘Luís';

2022 Desenvolvimento de Sistemas para Internet 19

 Variáveis
• Note que as variáveis podem conter valores com diferentes tipos de
dados:
Variável Explicação Exemplo
String Uma sequência de texto é conhecida como uma string. Para let minhaVariavel = 'Bob';
mostrar que o valor é uma string, você deve envolvê-la em aspas.
Number Um número. Números não tem aspas ao redor deles. let minhaVariavel = 10;
Boolean Um valor verdadeiro ou falso. As palavras true e false são let minhaVariavel = true;
palavras-chaves especiais em JS e não precisam de aspas.
Array Uma estrutura que permite armazenar vários valores em uma let minhaVariavel = [1,'Bob','Steve',10];
única variável. Acesse cada item do array dessa
maneira: minhaVariavel[0],
minhaVariavel[1], etc.
Object Basicamente, qualquer coisa. Tudo em JavaScript é um objeto e let minhaVariavel =
pode ser armazenado em uma variável. Tenha isso em mente document.querySelector('h1’);
enquanto aprende. Todos os exemplos acima também.

2022 Desenvolvimento de Sistemas para Internet 20

Comentários
• Os comentários são, essencialmente, pequenos trechos de texto que
podem ser adicionados entre os códigos e são ignorados pelo
navegador. Você pode colocar comentários no código JavaScript,
assim como em CSS:
/*
Tudo no meio é um comentário.
*/
• Se o seu comentário não tiver quebras de linha, é mais fácil colocá-
lo depois de duas barras como esta:
// Isto é um comentário.

2022 Desenvolvimento de Sistemas para Internet 21

Operadores
• Um operador é um símbolo matemático que produz um resultado baseado em dois valores (ou
variáveis). Na tabela a seguir, você pode ver alguns dos operadores mais simples, além de
alguns exemplos para experimentar no console JavaScript.
Operador Explicação Simbolo(s) Exemplo
Adição Usado para somar dois números ou + 6 + 9;
juntar duas strings.
Subtração, multiplição, Fazem exatamente o que você espera -, *, / "Ola " + "mundo!"; 9 - 3; 8 * 2; // no JS a multiplicação é um
divisão que eles façam na matemática básica. asterisco 9 / 3;
Atribuição Você já viu essa, ela associa um valor a = let minhaVariavel = 'Bob';
uma variável.
Operador de igualdade Faz um teste para ver se dois valores === let minhaVAriavel = 3; minhaVariavel === 4;
são iguais, retornando um
resultado true/false (booleano).
Negação, não igual Retorna o valor lógico oposto do sinal; !, !== Para "Negação", a expressão básica é true, mas a comparação
transforma um true em um false, etc. retorna false porque a negamos:
Quando usado junto com o operador de let minhaVariavel = 3;
igualdade, o operador de negação testa !(minhaVariavel === 3);
se os valores são diferentes. "Não igual" dá basicamente o mesmo resultado com sintaxe
diferente. Aqui estamos testando "é minhaVariavel NÃO é
igual a 3". Isso retorna false porque minhaVariavel É igual a 3.
let minhaVariavel = 3; minhaVariavel !== 3;
2022 Desenvolvimento de Sistemas para Internet 22
 Funções
• Funções são uma maneira de encapsular funcionalidades que você deseja reutilizar.
Quando você precisa de um procedimento, você pode chamar a função com um nome,
em vez de reescrever o código inteiro a cada vez. Você já viu alguns usos de funções
acima, por exemplo:

let minhaVariavel = document.querySelector('h1’);

alert('Ola!');

• Essas funções, document.querySelector e alert são pré-definidas nos navegadores para

você usar quando quiser.

2022 Desenvolvimento de Sistemas para Internet 23

 Funções
• Se você ver algo que parece com um nome de variável, mas com parênteses — () —
depois, provavelmente é uma função. Funções geralmente tem Argumentos — pedaços
de dados que elas precisam para realizarem o seu trabalho. Os argumentos são colocados
dentro dos parênteses e separados por vírgulas, se houver mais de um.

• Por exemplo, a função alert() faz com que uma caixa pop-up apareça dentro da janela do
navegador, mas precisamos passar uma string como argumento para dizer à função o que
escrever na caixa pop-up.

2022 Desenvolvimento de Sistemas para Internet 24

 Funções
• A boa noticia é que você pode definir suas próprias funções — no próximo exemplo nós
escrevemos uma função simples que recebe dois números como argumentos e os
multiplica:

function multiplica(num1,num2) {
let resultado = num1 * num2;
return resultado;
}

2022 Desenvolvimento de Sistemas para Internet 25

 Funções
• Tente executar a função acima no console e teste com vários argumentos. Por exemplo:

multiplica(4, 7);
multiplica(20, 20);
multiplica(0.5, 3);

2022 Desenvolvimento de Sistemas para Internet 26

 Eventos
Clique no ícone para adicionar uma imagem

2022 Desenvolvimento de Sistemas para Internet 27

 Eventos
• Interatividade real em um site precisa de eventos. Estas são estruturas de código que
percebem as coisas que acontecem no navegador, executando o código em resposta. O
exemplo mais óbvio é o evento de clique, que é disparado pelo navegador quando você
clica em algo com o mouse. Para demonstrar isso, insira o seguinte código no seu console
e, em seguida, clique na página da Web atual:

document.querySelector('html').onclick = function() {
alert('Ai! Pare de me cutucar!');
}

2022 Desenvolvimento de Sistemas para Internet 28

 Eventos
• Há muitas maneiras de associar um evento a um elemento. Aqui selecionamos o elemento
<html>, definindo sua propriedade onclick igual a uma função anônima (ou seja, sem
nome), que contém o código que queremos que o evento clique execute.
• Observe que:
document.querySelector('html').onclick = function() {};
• Equivale a:

let meuHTML = document.querySelector('html');

meuHTML.onclick = function() {};

• É só uma maneira mais curta de escrever.

2022 Desenvolvimento de Sistemas para Internet 29

 Eventos
• Há muitas maneiras de associar um evento a um elemento. Aqui selecionamos o elemento
<html>, definindo sua propriedade onclick igual a uma função anônima (ou seja, sem
nome), que contém o código que queremos que o evento clique execute.
• Observe que:
document.querySelector('html').onclick = function() {};
• Equivale a:

let meuHTML = document.querySelector('html');

meuHTML.onclick = function() {};

• É só uma maneira mais curta de escrever.

2022 Desenvolvimento de Sistemas para Internet 30

 Exemplo
• Vá no seu arquivo main.js, e digite o seguinte código JavaScript (se seu "Ola mundo" em
JavaScript ainda estiver lá, delete-o):

let minhaImagem = document.querySelector('img');

minhaImagem.onclick = function() {
let meuSrc = minhaImagem.getAttribute('src');
if(meuSrc === 'images/firefox-icon.png') {
minhaImagem.setAttribute ('src','images/firefox2.png');
} else {
minhaImagem.setAttribute ('src','images/firefox-icon.png');
}
}
2022 Desenvolvimento de Sistemas para Internet 31
 Exemplo
• Escolha duas imagens de mesmo tamanho e vá no seu arquivo main.js, e digite o seguinte
código JavaScript (se seu "Ola mundo" em JavaScript ainda estiver lá, delete-o):

let minhaImagem = document.querySelector('img');

minhaImagem.onclick = function() {
let meuSrc = minhaImagem.getAttribute('src');
if(meuSrc === 'images/firefox-icon.png') {
minhaImagem.setAttribute ('src','images/imagem1.png');
} else { Salve todos os arquivos e carregue o
minhaImagem.setAttribute ('src','images/imagem2.png'); index.html no navegador. Agora
quando você clicar na imagem, ela
}
deve mudar para a outra!
}

2022 Desenvolvimento de Sistemas para Internet 32

 Exemplo
let minhaImagem = document.querySelector('img');

minhaImagem.onclick = function() {
let meuSrc = minhaImagem.getAttribute('src');
if(meuSrc === 'images/imagem1.png') {
minhaImagem.setAttribute ('src','images/imagem2.png');
} else {
minhaImagem.setAttribute ('src','images/imagem1.png');
}
} Você armazena uma referência ao seu
elemento <img> na variável minhaImagem.
Depois, você faz a propriedade do
manipulador de evento onclick dessa variável
igual a uma função sem nome (uma função
"anônima").

2022 Desenvolvimento de Sistemas para Internet 33

 Exemplo
let minhaImagem = document.querySelector('img');

minhaImagem.onclick = function() {
let meuSrc = minhaImagem.getAttribute('src');
if(meuSrc === 'images/imagem1.png') {
minhaImagem.setAttribute ('src','images/imagem2.png');
} else {
minhaImagem.setAttribute ('src','images/imagem1.png');
}
} Agora, toda vez que esse elemento de imagem é clicado:

• Você recupera o valor do atributo src da imagem.

• Você usa uma condicional para checar se o valor src é igual ao caminho da imagem original:
• Se for, você muda o valor de src para o caminho da segunda imagem, forçando a outra imagem a ser
carregada dentro do elemento <img>.
• Se não é (significando que já mudou), nós mudamos o valor src de volta ao caminho da imagem, para
o estado original.
2022 Desenvolvimento de Sistemas para Internet 34
 Exemplo
• Adicionando uma mensagem personalizada de boas vindas:
• Adicionaremos outro trecho de código, alterando o título da página para uma mensagem
personalizada de boas vindas quando o usuário realizar sua primeira visita ao site.
• Essa mensagem de boas vindas persistirá, quando o usuário deixar o site e voltar mais
tarde — salvaremos a mensagem usando a API de Armazenamento Web.
• Incluiremos também uma opção para mudar o usuário e, portanto, a mensagem de boas
vindas sempre que necessário.

2022 Desenvolvimento de Sistemas para Internet 35

 Exemplo
• Em index.html, adicione a seguinte linha de código antes do elemento <script>

<button>Mudar usuário</button>

• Em main.js, adicione o seguinte código no fim do arquivo, exatamente como está escrito —
isso pega referências para o novo botão que adicionamos e para o título, e guarda ambos em
variáveis:
let meuBotao = document.querySelector('button');
let meuCabecalho = document.querySelector('h1');

2022 Desenvolvimento de Sistemas para Internet 36

 Exemplo
• Agora adicione a seguinte função para criar a saudação personalizada — isso não vai fazer
nada ainda, mas corrigiremos isso em um momento:

function defineNomeUsuario() {
let meuNome = prompt('Por favor, digite seu nome.');
localStorage.setItem('nome', meuNome);
meuCabecalho.textContent = Meu script, ' + meuNome;
}

2022 Desenvolvimento de Sistemas para Internet 37

 Exemplo
function defineNomeUsuario() {
let meuNome = prompt('Por favor, digite seu nome.');
localStorage.setItem('nome', meuNome);
meuCabecalho.textContent = Meu script, ' + meuNome;
}
• Essa função contem uma função prompt(), que traz uma caixa de diálogo assim como
alert() faz. Este prompt(), no entanto, pede ao usuário para inserir algum dado e guarda os
dados em uma variável quando o botão OK é pressionado. Nesse caso, estamos pedindo ao
usuário para digitar seu nome. Em seguida, chamamos uma API denominada localStorage,
o que nos permite guardar dados no navegador para usarmos mais tarde. Usamos a função
setItem() de localStorage para criar e guardar um item de dado chamado 'nome', definindo
seu valor para a variável meuNome que contém o nome que o usuário digitou. Finalmente,
definimos o textContent do título como uma string, mais o nome recém-armazenado do
usuário.
2022 Desenvolvimento de Sistemas para Internet 38
 Exemplo
• Em seguida, adicione esse bloco if ... else — poderíamos chamar isso de código de
inicialização, pois ele estrutura o aplicativo quando é carregado pela primeira vez:

if(!localStorage.getItem('nome')) {
defineNomeUsuario();
} else {
let nomeGuardado = localStorage.getItem('nome');
meuCabecalho.textContent = Meu script, ' + nomeGuardado;
}

2022 Desenvolvimento de Sistemas para Internet 39

 Exemplo
• Primeiro, esse bloco usa o operador de negação (NÃO lógico representado pelo !) para
checar se o dado nome existe — se não existir, a função defineNomeUsuario() é executada
para criá-lo. Se ele já existir (isto é, se o usuário já tiver digitado quando visitou o site
anteriormente), nós recuperamos o nome guardado usando getItem() e associamos o
textContent do título a uma string, mais o nome do usuário, como fizemos dentro de
defineNomeUsuario().

2022 Desenvolvimento de Sistemas para Internet 40

 Exemplo
• Finalmente, coloque o evento onclick no botão, para que quando clicado, ele execute a
função defineNomeUsuario(). Isso permite que o usuário defina um novo nome sempre que
quiser ao pressionar o botão:

meuBotao.onclick = function() { defineNomeUsuario();

}

2022 Desenvolvimento de Sistemas para Internet 41

 Exemplo
• Um nome de usuário nulo

• Quando você executa o exemplo e obtém a caixa de diálogo que solicita a inserção do
seu nome de usuário, tente pressionar o botão Cancelar. Você deve terminar com um
título que diz "Mozilla is cool, null". Isso ocorre porque, quando você cancela o prompt,
o valor é definido como null, um valor especial em JavaScript que se refere
basicamente à ausência de um valor.

• Tente também pressionar OK sem digitar nenhum nome - você deve terminar com um
título que diz "Meu script,", por razões bastante óbvias.

2022 Desenvolvimento de Sistemas para Internet 42

 Exemplo
• Se você quiser evitar esses problemas, verifique se o usuário não inseriu um nome null ou
em branco, atualizando a função defineNomeUsuario() para isso:

function defineNomeUsuario() {
let meuNome = prompt('Por favor, digite seu nome.');
if(!meuNome || meuNome === null) {
defineNomeUsuario();
} else {
localStorage.setItem('nome', meuNome);
meuCabecalho.innerHTML = Meu script, ' + meuNome;
}
}

2022 Desenvolvimento de Sistemas para Internet 43

 Exemplo
• Na linguagem humana - se meuNome não tiver valor ou seu valor for null, execute
defineNomeUsuario() novamente desde o início. Se ele tiver um valor (se as instruções
acima não forem verdadeiras), armazene o valor em localStorage e defina-o como o texto
do cabeçalho.

2022 Desenvolvimento de Sistemas para Internet 44

 DSI: JavaScript
Profª. Msc. Sahra Karolina

2022 45