-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
316 lines (209 loc) · 11.4 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="images/favicon-html-css.png" type="image/x-icon">
<title>My JavaScript Lessons</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 class="hello">Hello, world!</h1>
<p>
This is Ricardo Barros Becheli's notebook with exercices and remarks about the <strong>JavaScript</strong> course from <a href="http://www.youtube.com/channel/UCrWvhVmt0Qac3HgsjQK62FQ" target="_blank" rel="noopener noreferrer">"Curso em Vídeo"</a>.
</p>
<p class="hello">
<a href="mailto:ricardobarrosbecheli@gmail.com"> <img src="https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white"/></a>
<a href="https://www.linkedin.com/in/ricardo-becheli-36843659/"> <img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white"/></a>
<a href="http://github.com/ricardobecheli" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white"></a>
</p>
</header>
<main>
<article class="pause">
<div class="flex1">
<p>Hello world accomplished and so was the first lesson but I decided to pause
this JavaScript course while I'm doing two HTML/CSS courses (Curso em Vídeo and Rocketseat). JavaScript will be re-started later. <br>
</p>
</div>
<div class="flex1">
<p>
Today I decided to come back to JS because I'm almost reaching the "main 20%" knowledge of CSS and the conbined date to deploy the first JS code in my HTML/CSS/JS Github repo website project is near.
</p>
</div>
<div class="flex1">
<p>
Well, I found this way of making "post-it" remarks in CSS. Cool!
</p>
<p>
<a href="#again">And I will do all those lessons AGAIN. Click here to go below and redo "7 to 12" with me</a>.
</p>
</div>
</article>
<div class="first-code">
<h1>Back in the first JS coding lessons:</h1>
<p>All this frame's content was taken from the JS code.</p>
<h2>Where is the JS code?</h2>
<p>The JS code can be placed:</p>
<ul>
<li>In the head area, inside a <script> tag (less usual);</li>
<li>Directly at the end of the HTML <body>, inside a <script> tag;</li>
<li>Linked to a separate file at the end of the HTML <body>, inside a <script> tag; (see the figure below)</li>
</ul>
<img src="images/js-link.png" width="90%" alt="JS file link.">
<h2>Why comments? </h2>
<p>Comments are useful for:</p>
<ul>
<li>Helping people (including you, in the - near - future) to understand why something was done in the code;</li>
<li>Testing the code, by making that snippet "on - off" *</li>
</ul>
<p>
* Yes, because when you "comment", that snippet stops running. It stops being part of the valid code.
</p>
<p>Double slash <strong>//</strong> means "ONE LINE COMMENT" in any Javascript code. </p>
<p>
This here is a transcript from the JavaScript code wherever it is, be it in the end of the HTML "body" or in the resperctive separate ".js" file. Just to show you how it works.
</p>
<p>And <strong>/*</strong> to open and <strong>*/</strong> to close mean "SEVERAL LINES COMMENT" (just like in CSS).</p>
<p>
Comments are useful to explain parts of the code for either yourself in the future or some other person that has to check the code for any reason. <br>
</p>
<p>
// window.alert("Click OK to continue"). <strong>I have taken this command out of use (BY USING COMMENT). Only lesson 1 used it and it was tyring to face that every page refresh</strong>.
</p>
<p>
// window.confirm("How do you like JS?"). <strong>I have taken this command out of use (BY USING COMMENT). Only lesson 1 used it and it was tyring to face that every page refresh</strong>.
</p>
<h2>The same goes to the below "one line comments":</h2>
<section class="indent">
<p style="color: darkgreen;">
<code>var nome = window.prompt("What's your name?")</code>
</p>
<p style="color: darkgreen;">
<code>window.alert("It's a great pleasure to meet you, " + nome + "!")</code>
</p>
<p>// The + (plus) signal produces concatenation.</p>
<div class="parse">
<p style="color: darkgreen;"><code>var n1 = Number.parseInt(window.prompt("Digite um número: "))</code> //
<br>
<strong>See "several lines comment" below</strong></p>
<p style="color: darkgreen;"><code>var n2 = Number.parseInt(window.prompt("Digite outro número: "))</code></p>
<p style="color: darkgreen;"><code>var s = n1 + n2</code></p>
<p style="color: darkgreen;"><code>window.alert("A soma dos valores é " + s)</code></p>
</div>
</section>
<h2>Several lines comment</h2>
<p><strong>/*</strong> Must put:</p>
<section class="indent">
<p>Number.parseInt</p>
<p>For JS stop concatenating the 2 numbers instead of summing them.
(i.e. returning 42 instead of 6 for "4 + 2" is concatenating)</p>
<p>This command returns an integer number (= no decimals)</p>
<p>Or...</p>
<p>For floating point (floating point = real number = a number with decimals) it should be:</p>
<p>Number.parseFloat.</p>
<p>Note the capital letters because they make a difference!</p>
<p>EVEN BETTER:</p>
<p>You can also force JS stop concatenating instead of summing by the following command:</p>
<p style="color: darkgreen;"><code>var n1 = Number(window... etc... as coded above - or whatever you want to be contained in your variable and fits here)</code></p>
<p>And JavaScript will decide if "Number" is an integer or a real number.</p>
</section>
<strong>*/</strong>
<h2>Grip the code!</h2>
<figure>
<img src="images/grip-the-code.jpg" width="50%" alt="code locked bike">
</figure>
<h2>Variables</h2>
<p>So it's widely sayd that "variables are containers for storing values" (w3schools).</p>
<p>Therefore</p>
<h3>Aren't variables tiny databanks?</h3>
<p>To be or not? The question is that.</p>
<p>And the informal answer given by myself (at least at this point of study) is <strong>YES!</strong></p>
<p>Think about that when you go into real data bases, banks or lakes.</p>
<p>
The data is calmly laying there.
</p>
<p>
Until one fine day when you invoke them and they rise from the tomb...
</p>
</div>
<section class="transformation">
<h1>More transformations</h1>
<h2>The JS commands:</h2>
<p><code>String(n)</code></p>
<p>Or</p>
<p><code>n.toString()</code></p>
<p> <strong>Make whatever is "n" into a string.</strong></p>
<p>Thus, the code to return the result of the given numbers as a string would be:</p>
<p><code>window.alert("A soma dos valores é " + String(s))</code></p>
<p>Or...</p>
<p><code>window.alert("A soma dos valores é " + n.toString(s)</code></p>
<p>The "s" above is the variable that contais the sum. Check the frame above or the code itself.</p>
<h2>So, depending on what you code...</h2>
<P>A "string" + a "string" JS uses the plus sign to CONCATENATE.</P>
<p>And</p>
<p>A "number" + a "number" JS uses the plus sign to SUM.</p>
<h2>Some exercices in the terminal.</h2>
<p>Concatenation and sum. (= quoted text x unquoted numbers)</p>
<h3>Another way of making the same concatenation of text and variables is through</h3>
<h3>Template literals (Template strings)</h3>
<p>Synonyms:</p>
<ul>
<li>Template Literals</li>
<li>Template Strings</li>
<li>String Templates</li>
<li>Back-Tics Syntax</li>
</ul>
<p>Template strings will be used in this course to interpolate. JavaScript string interpolation is the process of embedding an expression into part of a string. Plain text and JS variables together in the same paragraph, for instance.</p>
<a href="https://www.w3schools.com/js/js_string_templates.asp" target="blank" rel="noopener noreferrer">Please ckeck w3schools for details</a>
</section>
<article class="morecode">
<h1>Practice code 1</h1>
<h2>Speeding Ticket System</h2>
<p>
Car speed: <input type="number" name="txtvel" id="txtvel"> Km/h.
<input type="button" value="Check if higher than 60 Km/h" onclick="calcular()">
</p>
<div id= "res"> </div>
<h1>Practice code 2</h1>
<h2>Age check</h2>
<p>
Age: <input type="number" name="idadevalor" id="idadevalor"> years old.
<input type="button" value="Check if older than 40 anos" onclick="computaridade()">
</p>
<div id= "aging"> </div>
<h1>Practice code 3</h1>
<h2>Let's play evens or odds</h2>
<p>
Game result: <input type="number" name="parouimpar" id="parouimpar"> fingers.
<input type="button" value="Check if even or odd" onclick="eukvcl()">
</p>
<div id= "dispute"> </div>
<h1>Practice code 4</h1>
<h2>"Never odd or eveN" (wow!):</h2>
<h2>Is this a palindrome? Check for yourself.</h2>
<p>
Type here: <input type="text" name="palindrome" id="palindrome">.
<input type="button" value ="Check if this is a palindrome" onclick="direction()">
</p>
<div id= "palresult"> </div>
</article>
<hr>
<section class="again" id="again">
<h1>Do the lessons again</h1>
<p>
Without the "alerts" because they're a pain in the neck. Once is enough.
</p>
<p>
...
</p>
</section>
</main>
<footer>
<h2 class="hello">Thanks for visiting this page!</h2>
<p><a href="http://html-css-module1-curso-em-video.vercel.app" target="_blank" rel="noopener noreferrer">Take a look at the beginning of my HTML lessons</a></p>
</footer>
<script src="script.js"></script>
</body>
</html>