Instituto Federal de Santa Catarina – Campus Tubarão

JavaScript

Prof. Karolini Rodrigues

[email protected]
JavaScript

● A linguagem de programação JS permite ao desenvolvedor

implementar diversos itens de alto nível de complexidade em páginas
web, como animações, mapas, gráficos ou informações que se
atualizam em intervalos de tempo padrão.
● Desenvolvimento separando em camadas, ou seja, existem três
camadas básicas no desenvolvimento para Web.
● Javascript é a terceira camada do “bolo” de desenvolvimento web e
front-end, junto com HTML, CSS.
Camadas
● A primeira camada é a informação que fica com o HTML, onde você vai
dar significado à informação
● Quando desenvolvemos páginas web, utilizamos como base a linguagem
de marcação de hipertexto (HTML), que forma toda a estrutura do
documento a partir de tags, trechos de código que são identificados e
interpretados pelo navegador para montar algum elemento.

Informação
Camadas
● A formatação é a segunda camada, que fica com o CSS, que é como
você vai dar estilo a toda informação marcada com HTML
● Aliando essa estrutura às CSS (Cascading Style Sheets), conseguimos
estilizar os elementos da página, garantindo uma formatação visual mais
completa e de fácil manutenção.
● Temos assim uma página bem estruturada, com vários elementos visuais
(e não visuais) como formulários e tabelas bem formatados, com bordas,
cores de plano de fundo, imagens, etc.

Informação Formatação
Camadas
○ Porém, não vamos muito além disso, utilizando apenas HTML e
CSS se obtemos apenas documentos estáticos, sem interação
com o usuário, como caixas de diálogo e validação de entrada de
dados.
○ Falta algo?
Informação

Formatação
Camadas
○ Foi criada o que considera-se a terceira camada, ou seja, a de
comportamento, que é o que controla os elementos do HTML com Javascript
e seus frameworks.
○ Imagine que você precise de um Slider de imagens. Toda a movimentação,
ações de cliques nas setinhas e etc, é o JavaScript que vai ser o
responsável por essas ações. Isso chamamos de comportamento.

Informação Comportamento

Formatação
O que é JavaScript
● JavaScript é uma linguagem de programação interpretada criada
em 1995 como uma extensão do HTML.

● O JS oferece recursos que faltam no HTML, permitindo a criação

de páginas interativas e dinâmicas, que são interpretadas
localmente, sem precisar recorrer a execução remota de programas
no servidor.
O que podemos fazer com JS?

● Realizar operações matemáticas e de computação.

● Gerar documentos com aparência definida na hora da

visualização, com base em informações do cliente.
O que podemos fazer com JS?
● Abrir janelas, trocar e manipular informações como o histórico,
barra de estado, plug-ins, etc.
● Interagir com o conteúdo do documento, alterando
propriedades da página.
● Interagir com o usuário através de eventos.
Inserindo o código JavaScript na página HTML

Códigos JavaScript podem ser inseridos na página HTML de duas formas:

○ Interno: para inserir o código direto na estrutura do HTML:
■ Utilizamos <script> código vai aqui </script>
■ Exemplo:
Inserindo o código JavaScript na página HTML
Externo: o código JavaScript também pode ser mantido em um arquivo separado do
HTML. Para isso, deve-se referenciar tal arquivo na página
Exemplo:

O arquivo deve ser salvo com a extensão .JS e sua estrutura é a mesma utilizada quando
o código é posto internamente no documento.
Obs: a tag <script> requer a tag de fechamento separada, não podendo ser fechada em si
própria como <script type=.. />.
Sintaxe e Estrutura
● JS foi criada com base na ECMAScript e sua sintaxe é bastante semelhante
a linguagens de alto nível muito utilizadas como C e Java, como veremos a
seguir. As variáveis têm diferentes tipos de dados:
● 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:
○ var x = 2; -> numérico (inteiro, float, etc.)
○ var nome = “José”; -> string
○ var flag = false; -> booleano
○ var nula = null; -> nulo
Variáveis

● Para definir uma variável, basta escolher um nome que não

seja uma palavra reservada e atribuir um valor:

preco = 10;
produto = ‘Caneta’;

● Uma variável também pode ser declarada sem um valor. Para

isto é necessário usar a palavra-chave var (valor undefined):

var ladrao;
Variáveis

Exemplos:
Escopo de variáveis

● Uma variável declarada pela primeira vez dentro de um

bloco de função tem escopo local e não existe fora dele.

● Variáveis declaradas ou definidas fora do bloco da função

são globais e são visíveis em toda a página.
Escopo de variáveis

● O uso de var é opcional na definição de variáveis globais.

● Variáveis locais devem ser definidas com var para garantir
que são locais mesmo havendo uma variável global com o
mesmo nome.
● Variáveis dentro de blocos, podem ser definidas com a palavra
chave let.
● Constantes são definidas pela palavra reservada const.
Tipos de dados

O JS possui 6 tipos de dados fundamentais:

▪ string
▪ number
▪ boolean
▪ undefined
▪ null
▪ Object
Operadores Aritméticos

Operador Descrição
-n Negação
++n, n++ Incremento
--n, n-- Decremento
* Multiplicação
/ Divisão
% Resto
+ Adição e Concatenação
- Subtração
= Atribuição
Operadores Lógicos

Operador Descrição
!= Diferente de
== Igual a
> Maior que
< Menor que
>= Maior ou igual a
<= Menor ou igual a
|| Ou
&& E
! Negação
?: Ternário
Estrutura de controle e fluxo

● As estruturas de controle de fluxo são praticamente as

mesmas utilizadas em outras linguagens estruturadas
populares.

● A sintaxe das principais estruturas em JS é idêntica à

sintaxe usada em C, C++ e Java.
Trabalhando com funções

● JS fornece também suporte a funções, aliado às facilidades da tipagem

dinâmica, o que torna a definição de métodos simples e prática.
● Para criar funções, utilizamos a palavra reservada function.
● As funções podem receber parâmetros e retornar valores, mas o tipo de
retorno e o tipo dos parâmetros não precisa ser previamente definido.
● Exemplo de função em JS sem parâmetro e sem retorno:
Trabalhando com funções

● Exemplo de função em JS com parâmetro e com retorno:

● Para definir o valor de retorno da função, deve-se utilizar a palavra

reservada return seguida do valor ou expressão do resultado.
Estruturas de controle de fluxo

● O if é um comando utilizado para tomar a decisão de executar o próximo

comando baseado numa expressão lógica, se esta expressão for
verdadeira o próximo comando é executado, caso contrário ele é ignorado.
Estruturas de controle de fluxo

● O comando switch verifica o valor de uma variável e, para cada uma das
opções, executa um conjunto de ações. Se nenhum dos valores for
verificado, os comandos do bloco default são executados.
● O comando break força o fluxo sair fora do comando switch.
Estruturas de controle de fluxo

● O comando switch verifica o valor de uma variável e, para cada uma das
opções, executa um conjunto de ações. Se nenhum dos valores for
verificado, os comandos do bloco default são executados.
● O comando break força o fluxo sair fora do comando switch.
Estruturas de controle de fluxo

● O bloco default, porém, pode ser omitido caso não exista uma ação padrão
a ser executada se nenhuma das opções for observada.
Estruturas de controle de fluxo

● A estrutura de repetição while é usada para executar um conjunto de ações

enquanto uma condição for verdadeira.
● Quando a condição se tornar falsa, o bloco é finalizado.
Estruturas de controle de fluxo

● A seguir temos um exemplo que exibe uma mensagem para o usuário

enquanto uma variável for menor que 5.
Estruturas de controle de fluxo

● Uma outra estrutura muito semelhante ao while é a do - while, que executa

um bloco de ações até que uma condição seja falsa.
● Porém, essa condição é avaliada após a execução dos comandos, fazendo
com que estes sejam executados pelo menos uma vez.
Estruturas de controle de fluxo

● Exemplo usando o do - while:

Estruturas de controle de fluxo

● E temos o comando for, que usa um contador para executar um bloco de

ações uma determinada quantidade de vezes.
Estruturas de controle de fluxo

● O entendimento dessa estrutura é explicado através do exemplo, onde uma variável

contador é inicializada com o valor zero, e enquanto for menor que 10, o laço for
deve ser executado.

● Obs: são sempre 3 condições que devem ser atendidas na estrutura for:
○ Contador inicia em zero (0);
○ Enquanto contador for menor que o valor estipulado (10), ele repetirá o laço.
○ Toda vez que ele realiza uma rodada o contador é incrementado em 1.
MATERIAL COMPLEMENTAR
Sites

developer.mozilla.org
Site

https://developer.mozilla.org/pt-BR/docs/Web/Tutorials
Site

https://developer.mozilla.org/pt-BR/docs/Web/Tutorials
Site

https://pt.stackoverflow.com/
Material complementar

● O que é o JavaScript é capaz de fazer?

https://www.youtube.com/watch?v=Ptbk2af68e8

● Exemplos: https://www.w3schools.com/js/js_examples.asp
Exercícios

1. Fazer o seguinte exemplo no seu site do vídeo abaixo:

● https://www.youtube.com/watch?v=OmmJBfcMJA8
Exercícios

2. Faça o exemplo abaixo usando JavaScript:

 FONTE: W3schools

JavaScript Tutorial (w3schools.com)