Skip to content

Commit 9070e69

Browse files
Ca788Ca788
committed
Hoje eu estudei os principais conceitos de funções e eventos. Eu já tinha um pouco de conhecimento em funções pois já vinha utilizando desde o inicio do livro de lógica, então foi muito simples entender os principais conceitos. Fiz alguns exemplos dois quais eu já estou habituado.
1 parent b3b97ed commit 9070e69

File tree

5 files changed

+198
-0
lines changed

5 files changed

+198
-0
lines changed

‎cap08-Funções-Eventos/ArrowFunction.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/* Uma função em javaScript pode ser construida com a palavra reservada (funtion)
2+
ou com uma declaração de constante - Usando a notação conhecida como arrow funtion
3+
Observe a sintaxe das duas formas. */
4+
function ola() {
5+
console.log("Olá seja muito bem vindo!");
6+
}
7+
ola();
8+
9+
const ola2 = () => {
10+
console.log("Olá seja muito bem vindo, novamente!");
11+
};
12+
ola2();
13+
14+
/* As vantanges da segunda forma estão relacionadas a proteção dada as consts
15+
em javaScript e uma sintaxe mais curta - que não necessita de um return - em
16+
funções que podem ser construidas com uma única atribuição. Se, por exemplo,
17+
executarmos um programa que contenha a declaração de duas functions com o mesmo
18+
nome, o programa irá rodar, sem acusar erro. Caso isso aconteça a partir da declaração
19+
de const, a linguagem alerta para um erro no código. */

‎cap08-Funções-Eventos/css/style.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
*{
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: Arial, sans-serif;
9+
margin: 0;
10+
padding: 0;
11+
text-align: center;
12+
margin-top: 100px;
13+
}
14+
15+
img {
16+
max-width: 210px;
17+
height: auto;
18+
margin-top: 100px;
19+
}
20+
21+
h1 {
22+
color: #333;
23+
font-size: 28px;
24+
margin-top: 20px;
25+
}
26+
27+
form {
28+
margin-top: 20;
29+
}
30+
31+
p {
32+
margin: 10px 0;
33+
}
34+
35+
input[type="text"],
36+
[type="number"] {
37+
padding: 5px;
38+
font-size: 16px;
39+
border: 1px solid #ccc;
40+
border-radius: 4px;
41+
}
42+
43+
input[type="submit"],
44+
input[type="button"] {
45+
padding: 5px 10px;
46+
font-size: 16px;
47+
border: none;
48+
border-radius: 4px;
49+
background-color: #007bff;
50+
color: #fff;
51+
cursor: pointer;
52+
}
53+
54+
input[type="submit"]:hover,
55+
input[type="button"]:hover {
56+
background-color: #0056b3;
57+
}
58+
59+
h3 {
60+
margin-top: 20px;
61+
font-size: 20px;
62+
color: #007bff;
63+
}
64+
65+
.fonte-azul {
66+
color: #007bff;
67+
}
68+
69+
.entre-lentras {
70+
margin-top: 10px;
71+
padding: 10px;
72+
background-color: #f5f5f5;
73+
border: 1px solid #ccc;
74+
font-size: 14px;
75+
white-space: pre-wrap;
76+
word-wrap: break-word;
77+
}

‎cap08-Funções-Eventos/ex8_1.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!--EXEMPLO DE FUNÇÃO COM PASSAGEM DE PARÂMETRO-->
2+
<script>
3+
/*
4+
Exemplo 01
5+
const situacao = (nota, media) => {
6+
if (nota >= media) {
7+
alert("Aprovado")
8+
} else {
9+
alert("Reprovado")
10+
}
11+
}
12+
13+
const prova1 = Number(prompt("Qual a nota: "));
14+
15+
situacao(prova1, 7)
16+
*/
17+
18+
const situacao = (nota, media) => {
19+
const resultado = nota >= media ? alert("Aprovado") : alert("Reprovado")
20+
return resultado
21+
}
22+
const prova1 = Number(prompt("Qual a nota: "));
23+
const aluno1 = situacao(prova1, 7)
24+
25+
</script>
26+
27+
28+
<!-- Exemplo 01 - A função situacao() recebeu dois parâmetros nota e media. O programa inicia
29+
pela leitura da nota do aluno. Em seguida, é realizada uma chamada da função.
30+
O conteudo da variavel prova1 e 7 são então passadados para a função. Nela, esses
31+
valores são atribuidos para nota e média.-->
32+
33+
<!--(nota, media) são chamadas de parâmetros já os valores reais desses parâmetros
34+
(O valor da prova1 e o valor 7) são chamados de argumentos da função.-->

‎cap08-Funções-Eventos/ex8_2.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="css/style.css">
8+
<title>Exemplo revenda avenidade</title>
9+
</head>
10+
11+
<body>
12+
<h1>Revenda Avenidade - Promoção</h1>
13+
<form>
14+
<p>Modelo Veiculo:
15+
<input type="text" id="inModelo" required autofocus>
16+
</p>
17+
<p>Ano Veiculo:
18+
<input type="number" id="inAno" required>
19+
</p>
20+
<p>Preco R$:
21+
<input type="number" min="0" step="0.01" id="inPreco" required>
22+
</p>
23+
<input type="submit" value="Classificar - Calcular Entrada e Parcelas">
24+
</form>
25+
<h3 id="outResp1"></h3>
26+
<h3 id="outResp2"></h3>
27+
<h3 id="outResp3"></h3>
28+
29+
<script src="js/ex8_2.js"></script>
30+
</body>
31+
32+
</html>

‎cap08-Funções-Eventos/js/ex8_2.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const frm = document.querySelector("form");
2+
const resp1 = document.querySelector("#outResp1");
3+
const resp2 = document.querySelector("#outResp2");
4+
const resp3 = document.querySelector("#outResp3");
5+
6+
frm.addEventListener("submit", (e) => {
7+
e.preventDefault();
8+
const modelo = frm.inModelo.value;
9+
const ano = Number(frm.inAno.value);
10+
const preco = Number(frm.inPreco.value);
11+
const classificacao = classificarVeiculo(ano); //Chama a função e atribui
12+
const entrada = calcularEntrada(preco, classificacao); // ...Retorno das variáveis
13+
const parcela = (preco - entrada) / 10;
14+
15+
resp1.innerText = modelo + " - " + classificacao;
16+
resp2.innerText = `Entrada R$ ${entrada.toFixed(2)}`;
17+
resp3.innerText = `+10x de ${parcela.toFixed(2)}`;
18+
});
19+
20+
// Função rececbe ano do veiculo como parâmetro
21+
const classificarVeiculo = (ano) => {
22+
const anoAtual = new Date().getFullYear();
23+
let classif;
24+
if (ano == anoAtual) {
25+
classif = "Novo";
26+
} else if (ano == anoAtual - 1 || ano == anoAtual - 2) {
27+
classif = "SemiNovo";
28+
} else {
29+
classif = "Usado";
30+
}
31+
return classif;
32+
};
33+
34+
//Função recebe valor e status do veiculo como parâmetro
35+
const calcularEntrada = (valor, status) =>
36+
status == "Novo" ? valor * 0.5 : valor * 0.3;

0 commit comments

Comments
 (0)