-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
118 lines (93 loc) · 6.78 KB
/
index.html
File metadata and controls
118 lines (93 loc) · 6.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fundamentos do JavaScript</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./src/styles.css">
<link rel="icon" type="image/png" href="./src/img/icons8-javascript-96.png">
</head>
<body>
<header>
<h1>Sintaxe JavaScript</h1>
</header>
<main class="data-container">
<div class="card-container">
<div class="card">
<img src="./src/img/Literais.png" alt="Literais - Imagem 1" class="card-image">
<h3>Literais</h3>
<p class="short-description">Valores fixos para representar dados primários, como números, strings, booleanos, arrays, objetos e expressões regulares.</p>
<p class="full-description hidden">Valores fixos para representar dados primários, como números, strings, booleanos, arrays, objetos e expressões regulares. Mais detalhes podem ser encontrados na <a href="#">documentação</a>.</p>
</div>
<div class="card">
<img src="./src/img/variáveis_2.png" alt="Variáveis - Imagem 2" class="card-image">
<h3>Variáveis</h3>
<p class="short-description">Usadas para armazenar dados; declaradas com var, let ou const, podendo ser modificadas.</p>
<p class="full-description hidden">São espaços de armazenamento de dados que podem ser modificados durante a execução do programa. São declaradas com as palavras-chave var, let ou const e podem conter diferentes tipos de dados.</p>
</div>
<div class="card">
<img src="./src/img/operadores_3.png" alt="Operadores - Imagem 3" class="card-image">
<h3>Operadores</h3>
<p class="short-description">Realizam operações em operandos, incluindo aritméticos, de comparação e lógicos.</p>
<p class="full-description hidden">São símbolos ou palavras reservadas que realizam operações em operandos. Existem operadores aritméticos (como +, -, *, /), de comparação (como ==, !=, <, >) e lógicos (como &&, ||).</p>
</div>
<div class="card">
<img src="./src/img/expressões_4 (1).png" alt="Expressões - Imagem 4" class="card-image">
<h3>Expressões</h3>
<p class="short-description">Combinações de valores, variáveis e operadores avaliáveis para produzir um valor.</p>
<p class="full-description hidden">São combinações de valores, variáveis e operadores que são avaliadas para produzir um valor. Podem ser simples (como 2 + 2) ou complexas (como (a * b) / (c - d)).</p>
</div>
<div class="card">
<img src="./src/img/palavraschave_5.png" alt="Palavras-chave - Imagem 5" class="card-image">
<h3>Palavras-chave</h3>
<p class="short-description">Definem a estrutura e lógica do código, como if, else, for, function, entre outras.</p>
<p class="full-description hidden">São palavras reservadas que têm significados especiais na linguagem JavaScript. Elas definem a estrutura e a lógica do código, como if, else, for, function, entre outras.</p>
</div>
<div class="card">
<img src="./src/img/comentários_6.png" alt="Comentários - Imagem 6" class="card-image">
<h3>Comentários</h3>
<p class="short-description">Trechos ignorados pelo interpretador; úteis para documentar e anotar o código.</p>
<p class="full-description hidden">São trechos de texto que são ignorados pelo interpretador JavaScript. São úteis para documentar o código, fazer anotações e explicar partes específicas do programa.</p>
</div>
<div class="card">
<img src="./src/img/tipos_de_dados_7.png" alt="Tipos de dados - Imagem 7" class="card-image">
<h3>Tipos de dados</h3>
<p class="short-description">Números, strings, booleanos, arrays, objetos, funções, null e undefined.</p>
<p class="full-description hidden">São as diferentes categorias de valores que podem ser manipulados em JavaScript. Incluem números, strings, booleanos, arrays, objetos, funções, null e undefined.</p>
</div>
<div class="card">
<img src="./src/img/funções_8.png" alt="Funções - Imagem 8" class="card-image">
<h3>Funções</h3>
<p class="short-description">Blocos de código reutilizáveis que executam tarefas específicas.</p>
<p class="full-description hidden">São blocos de código reutilizáveis que executam tarefas específicas. São definidas com a palavra-chave function e podem receber parâmetros e retornar valores.</p>
</div>
<div class="card">
<img src="./src/img/identificadores_8.png" alt="Identificadores - Imagem 9" class="card-image">
<h3>Identificadores</h3>
<p class="short-description">Nomes para variáveis, funções, etc., começam com letra, sublinhado ou cifrão.</p>
<p class="full-description hidden">São nomes dados a variáveis, funções, objetos, etc. Eles devem começar com uma letra, sublinhado (_) ou cifrão ($), seguido de letras, números, sublinhados ou cifrões. São utilizados para identificar e acessar diferentes elementos no código JavaScript.</p>
</div>
</div>
</main>
<div class="pagination" id="pagination">
<a href="#" id="prev">Anterior</a>
<div class="page-numbers">
<a href="#" class="page-link" data-page="1">1</a>
<a href="#" class="page-link" data-page="2">2</a>
<a href="#" class="page-link" data-page="3">3</a>
<!-- Adicione mais links de página conforme necessário -->
</div>
<a href="#" id="next">Próximo</a>
</div>
<!-- Modal -->
<div id="modal" class="modal">
<button id="close" class="close-btn">×</button>
<img id="modal-img" src="" alt="Modal Image">
</div>
<script src="./src/script.js"></script>
<script src="./src/expand.js"></script>
</body>
</html>