TrilhaDEV | Semana 2 - Aula 4

Operadores aritméticos e HTML

AGENDA

● Operadores Aritméticos
● Concatenação de strings
● Uso do prompt e do alert
● Select HTML
● Mais elementos semânticos
● Atividade prática

2
Operadores aritméticos
OPERADORES ARITMÉTICOS

● Operadores aritméticos: são operadores que realizam operações

aritméticas (matemáticas):

Operador Operação Exemplo

() agrupamento a + (b * c)

** exponenciação a ** b

*, /, % multiplicação, divisão, resto a * b, a / b, a % b

+, - adição, subtração a + b, a - b

= atribuição a=b+c

4
OPERADORES ARITMÉTICOS

● Operadores aritméticos: são operadores que realizam operações

aritméticas (matemáticas):

Operador Operação Exemplo

() agrupamento a + (b * c)
- precedência +

** exponenciação a ** b

*, /, % multiplicação, divisão, resto a * b, a / b, a % b

+, - adição, subtração a + b, a - b

= atribuição a=b+c

5
OPERADORES ARITMÉTICOS

● Operadores de atribuição podem ser combinados com operadores

aritméticos

Operador Operação Exemplo

**= exponenciação a **= b

*=, /=, %= multiplicação, divisão, resto a *= b, a /= b, a %= b

+=, -= adição, subtração a += b, a -= b

6
OPERADORES ARITMÉTICOS

Quando tentamos realizar operações aritméticas com strings, o

JavaScript se comporta de maneira diferente em cada situação abaixo:

● Operação de soma com string: converte os valores para string e

realiza a concatenação.
● Demais operações matemáticas: converte os valores para number e
realiza a operação.

7
OPERADORES ARITMÉTICOS

Quando tentamos realizar operações aritméticas com strings, o

JavaScript se comporta de maneira diferente em cada situação abaixo:

● Operação de soma com string: converte os valores para string e

realiza a concatenação.
● Demais operações matemáticas: converte os valores para number e
realiza a operação.
Caso a conversão da string para number não seja possível, o resultado é um NaN

8
OPERADORES ARITMÉTICOS

Quando tentamos realizar operações aritméticas com strings, o

JavaScript se comporta de maneira diferente em cada situação abaixo:

● Operação de soma com string: converte os valores para string e

realiza a concatenação. Concatenação é a junção de dois valores
● Demais operações matemáticas: converte os valores para number e
realiza a operação.

9
OPERADORES ARITMÉTICOS

Para convertermos strings em números, podemos usar ferramentas

embutidas na linguagem:

● parseInt: converte os valores para number do tipo inteiro.

● parseFloat: converte os valores para number do tipo decimal.

10
Concatenação de strings
Concatenação de strings

Para concatenar (unir) textos em Javascript pode usar duas formas:

● sinal de +:

let nome = "Bruno Costa";

let curso = "FMT";

console.log("O aluno " + nome + " está cursando o curso " + curso);

12
Concatenação de strings

● template literals (${})

let nome = "Bruno Costa";

let curso = "FMT";

console.log(`O aluno ${nome} está cursando o curso ${curso}`);

13
Uso do prompt e do alert
Uso do prompt e do alert

Além do console.log() existem mais formas de exibir e/ou receber dados.

Veremos aqui duas delas:

● prompt → serve para receber dados a partir de uma caixa de diálogo

do navegador;
● alert → exibe uma mensagem em forma de popup ao usuário;

15
Uso do prompt e do alert

Para usar o prompt use a seguinte sintaxe:

let nome = prompt("Digite seu nome:")

Os dados recebidos pelo prompt sempre serão do tipo string;

16
Uso do prompt e do alert

Para usar o alert use a seguinte sintaxe:

alert("Mensagem a ser exibida!")

17
Exercícios práticos
Exercícios práticos

1. Crie um programa que receba um número e verifique se ele é ímpar

ou par.

2. Crie um programa que receba quatro notas de um aluno e calcule a

média aritmética.

3. Crie um programa que calcule e apresente o volume de uma caixa

retangular conforme a fórmula abaixo:
VOLUME ← COMPRIMENTO * LARGURA * ALTURA

19
Select
Select

O elemento <select> é usado para criar uma lista de opções:

<select name="categoria" id="categoria">

<option value="front">Front End</option>
<option value="back" selected>Back end</option>
<option value="cloud">Cloud</option>
<option value="devops">Devops</option>
</select>

21
Mais elementos
semânticos
Mais elementos semânticos

Vamos aprender um pouco mais sobre outros elementos semânticos no

HTML:

● <section>: É usado para agrupar conteúdo relacionado em uma

página. Ele ajuda a organizar e estruturar o conteúdo, tornando a
página mais legível e acessível.

23
Mais elementos semânticos

● <main>: Representa o conteúdo principal de uma página. Deve haver

apenas um elemento <main> por página e ele geralmente contém o
conteúdo principal, como artigos, posts ou o núcleo da informação.

● <aside>: É usado para conteúdo que é tangencial ao conteúdo

principal da página. Pode conter informações complementares, como
barras laterais, anúncios ou links relacionados.

24
Mais elementos semânticos

● <header>: É geralmente usado para criar a seção de cabeçalho de uma

página. Isso pode incluir logotipos, títulos, menus de navegação e
outras informações importantes que aparecem no topo da página.

● <nav>: É usado para criar menus de navegação, links de navegação e

outros elementos relacionados à navegação. Ele ajuda os usuários a se
deslocarem facilmente pelo site.

25
Mais elementos semânticos

● <article>: É usado para marcar conteúdo independente, como uma

postagem de blog, um artigo de notícias ou um comentário. Ele deve
ser capaz de existir e fazer sentido por conta própria.

● <footer>: É usado para criar a seção de rodapé de uma página.

Normalmente, contém informações de contato, direitos autorais e
outros detalhes relevantes para o final da página.

26
Atividade prática
Atividade prática

Para treinar nossos conhecimentos sobre HTML vamos criar a estrutura de

um currículo em HTML, com nome, formação e também uma lista com
dados pessoais e formações acadêmicas.

28
Link dos códigos da aula

https://codesandbox.io/s/fmt-aula04-hwzgdc

29
OBRIGADO!
PODCAST SOBRE O UNIVERSO DE TI

Faaaala DEV!
Está a fim de turbinar o
aprendizado com
conteúdos extra sobre
programação, histórias
de superação,
empreendedorismo,
universo TI, dicas para
conseguir a primeira
vaga de emprego e
muito mais?

Então clica aqui e

conheça o labSHOW, o
podcast do LAB365 ;)

31