-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (126 loc) · 4.44 KB
/
index.html
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repaso JavaScript</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="navbar">
<div class="container">
<img src="./imgs/logo.webp" alt="js" class="logo">
<h2>JavaScript</h2>
</div>
<div class="links">
<li><a href="./index.html">Home</a></li>
<li><a href="https://github.com/PetusoTwo" target="_blank">Contact</a></li>
<li><a href="./about.html">About</a></li>
</div>
</div>
<input id="scene-1" type="radio" name="scene" value="1" checked />
<input id="scene-2" type="radio" name="scene" value="2" />
<input id="scene-3" type="radio" name="scene" value="3" />
<input id="scene-4" type="radio" name="scene" value="4" />
<main class="site">
<div class="landscape">
<div class="landscape-text">
JavaScript
</div>
</div>
<!-- <div class="left-side">
<div class="page-numbers" data-total='04'>
<div class="page-number page-number--tens">0</div>
<div class="page-number page-number--ones">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</div> -->
<div class="hero">
<nav class="slide-nav">
<div class="button-container">
<button class="nav-button">Anterior</button>
<button class="nav-button"> Siguiente </button>
</div>
<div class="nav-button-container">
<label class="nav-button" for="scene-1" data-scene="1">1</label>
<label class="nav-button" for="scene-2" data-scene="2">2</label>
<label class="nav-button" for="scene-3" data-scene="3">3</label>
<label class="nav-button" for="scene-4" data-scene="4">4</label>
</div>
</nav>
</div>
<div class="right-content">
<div class="layer" data-scene="1">
<h2 class="heading">1. Variables con let, var y const</h2>
<!-- <p class="paragraph">
</p> -->
<section>
<h3>Variables con <code>var</code></h3>
<p><strong>Inicialización y Declaración:</strong></p>
<ul>
<li>No deben comenzar con un número.</li>
<li>Se puede reescribir el valor de la variable después de su declaración.</li>
<li>Puede ser de cualquier tipo de dato.</li>
</ul>
</section>
<section>
<h2>Variables con <code>const</code></h2>
<p><strong>Inmutabilidad:</strong></p>
<ul>
<li>No se puede reescribir la variable; una vez asignado un valor, no puede ser cambiado.</li>
</ul>
<p><strong>Inicialización Obligatoria:</strong></p>
<ul>
<li>Deben ser inicializadas al momento de la declaración.</li>
</ul>
<p><strong>Convenciones de Nomenclatura:</strong></p>
<ul>
<li>Generalmente se escriben en mayúsculas (aunque esto es una convención y no una regla estricta).</li>
</ul>
<p><strong>Tipos de Dato:</strong></p>
<ul>
<li>Pueden ser de cualquier tipo de dato.</li>
</ul>
</section>
<section>
<h2>Variables con <code>let</code></h2>
<p><strong>Reescribibilidad:</strong></p>
<ul>
<li>Permite reescribir el valor de la variable después de su declaración.</li>
</ul>
<p><strong>Similar a <code>var</code>:</strong></p>
<ul>
<li>Se comporta de manera similar a <code>var</code>, pero con un alcance (scope) más limitado (local en bloques).</li>
</ul>
</section>
</div>
<div class="layer" data-scene="2">
<h2 class="heading">2. Scope en JS</h2>
<p class="paragraph">
</p>
</div>
<div class="layer" data-scene="3">
<h2 class="heading">3. Template Strings JS</h2>
<p class="paragraph">
</p>
</div>
<div class="layer" data-scene="4">
<h2 class="heading">4. Arrow functions</h2>
<p class="paragraph">
</p>
<p class="paragraph">
</p>
</div>
</div>
</main>
<div class="footer">
<div>
<p>© 2024 PetusoTwo</p>
</div>
</div>
</body>
</html>