-
Notifications
You must be signed in to change notification settings - Fork 1
/
post.html
598 lines (566 loc) · 32.6 KB
/
post.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
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Welcome to Mensah Tribe Web Solution, lets bring your vision to fruition.">
<meta name="keywords" content="chicago,web design, webpage, website,mensah,tribe,web,solutions,development">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<link rel="stylesheet" href="utilities.css">
<link rel="stylesheet" href="style.css">
<title>Blog Post| What is Javascript?|MTS </title>
</head>
<body>
<header class="hero blog">
<div id="navbar" class="navbar top">
<h1 class="logo">
<a href="index.html">
<span class="text-primary"><i class="fas fa-flask"></i> MensahTribe</span><br>WebSolutions
</a>
</h1>
<nav>
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#portfolio">Projects</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="post.html" class="current">Post</a></li>
<li><a href="index.html#services">Services</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
</nav>
</div>
<div class="content">
<h1>Blog</h1>
</div>
</header>
<nav id=sec-navbar>
<ul>
<li><a class='nav-link' href="#what_is_Javascript?">What is Javascript?</a></li>
<li><a class='nav-link' href="#a_high_definition">A high definition</a></li>
<li><a class='nav-link' href="#so_what_can_it_really_do">So what can it really do ?</a></li>
<li><a class='nav-link' href="#browser_API's">Browser API's</a></li>
<li><a class='nav-link' href="#third_party_API's">Third party API's</a></li>
<li><a class='nav-link' href="#what_is_JavaScript_doing_on_your_page?">What is JavaScript doing on your page?</a>
</li>
<li><a class='nav-link' href="#browser_Security">Browser Security</a></li>
<li><a class='nav-link' href="#javaScript_running order">JavaScript running order</a></li>
<li><a class='nav-link' href="#interpreted_versus_compiled_code">Interpreted versus compiled code</a></li>
<li><a class='nav-link' href="#server_v_client">Server-side versus client-side code</a></li>
<li><a class='nav-link' href="#dynamic_v_static">Dynamic versus static code</a></li>
<li><a class='nav-link' href="#add_javascript">How do you add JavaScript to your page?</a></li>
<li><a class='nav-link' href="#internal_js">Internal JavaScript</a></li>
<li><a class='nav-link' href="#external_js">External JavaScript</a></li>
<li><a class='nav-link' href="#inline_js">Inline JavaScript</a></li>
<li><a class='nav-link' href="#loading">Script loading strategies</a></li>
<li><a class='nav-link' href="#async_defer">Async and defer</a></li>
<li><a class='nav-link' href="#comments">Comments</a></li>
<li><a class='nav-link' href="#summary">Summary</a></li>
</ul>
</nav>
<!--Main:What is Javascript -->
<main id="main-doc">
<section id="what_is_Javascript?" class="main-section post">
<h2>What is Javascript?</h2>
<p class="meta">
<i class="fas fa-user"></i>Posted by <strong> Nick M.</strong>| May 19 2020
</p>
<img src="JavaScript_web_design.jpg" alt="JavaScript web design">
<p> In this article we will look at JavaScript from a high level, answering questions such as "What is it?"
and
"What can you do with it?", and making sure you are comfortable with JavaScript's purposes.</p>
</section>
<section id="a_high_definition" class="main-section post">
<h2>A high-level definition</h2>
<p> JavaScript is a scripting or programming language that allows you to implement complex features on web
pages —
every time a web page does more than just sit there and display static information for you to look at —
displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes,
etc. —
you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web
technologies, two of which (HTML and CSS) we have covered in much more detail in other parts of the Learning
Area.</p>
<img id='cake' src="cake.png" alt="the layers of front end development">
<ul>
<li>HTML is the markup language that we use to structure and give meaning to our web content, for example
defining paragraphs, headings, and data tables, or embedding images and videos in the page.</li>
<li>CSS is a language of style rules that we use to apply styling to our HTML content, for example setting
background colors and fonts, and laying out our content in multiple columns.</li>
<li>JavaScript is a scripting language that enables you to create dynamically updating content, control
multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what
you
can achieve with a few lines of JavaScript code.)</li>
</ul>
<p>The three layers build on top of one another nicely. Let's take a simple text label as an example. We can
mark
it up using HTML to give it structure and purpose:
<code>
1|<p>Player 1:Zoe<p/>
</code>
</p>
<p>player 1: Zoe</p>
<p>Then we can add some CSS into the mix to get it looking nice:</p>
<code>
p {
font-family: 'helvetica neue', helvetica, sans-serif;<br>
letter-spacing: 1px;<br>
text-transform: uppercase;<br>
text-align: center;<br>
border: 2px solid rgba(0,0,200,0.6);<br>
background: rgba(0,0,200,0.3);<br>
color: rgba(0,0,200,0.6);<br>
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);<br>
border-radius: 10px;<br>
padding: 3px 10px;<br>
display: inline-block;<br>
cursor: pointer;<br>
}
</code>
<p class="css-example">player 1: Zoe</p>
<p>And finally, we can add some JavaScript to implement dynamic behaviour:</p>
<code>
const para = document.querySelector('p');<br>
para.addEventListener('click', updateName);<br>
function updateName() {<br>
let name = prompt('Enter a new name');<br>
para.textContent = 'Player 1: ' + name;<br>
}
</code>
<p id="js-example"></p>
<p>JavaScript can do a lot more than that — let's explore what in more detail.</p>
</section>
<section id="so_what_can_it_really_do" class="main-section post">
<h2>So what can it really do?</h2>
<p>The core client-side JavaScript language consists of some common programming features that allow you to do
things like:</p>
<ul>
<li>Store useful values inside variables. In the above example for instance, we ask for a new name to be
entered
then store that name in a variable called name.</li>
<li>Operations on pieces of text (known as "strings" in programming). In the above example we take the
string
"Player 1: " and join it to the name variable to create the complete text label, e.g. ''Player 1: Chris".
</li>
<li>Running code in response to certain events occurring on a web page. We used a click event in our example
above to detect when the button is clicked and then run the code that updates the text label.</li>
<li>And much more!</li>
</ul>
<p>What is even more exciting however is the functionality built on top of the client-side JavaScript
language.
So-called <bold>Application Programming Interfaces (APIs)</bold> provide you with extra superpowers to use
in
your JavaScript code.</p>
<p>APIs are ready-made sets of code building blocks that allow a developer to implement programs that would
otherwise be hard or impossible to implement. They do the same thing for programming that ready-made
furniture
kits do for home building — it is much easier to take ready-cut panels and screw them together to make a
bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to
the
right size and shape, find the correct-sized screws, and then put them together to make a bookshelf.</p>
<p> They generally fall into two categories.</p>
</section>
<section id="browser_API's" class="main-section post">
<h2>Browser API's</h2>
<p>
<bold>Browser APIs </bold>are built into your web browser, and are able to expose data from the surrounding
computer environment, or do useful complex things. For example:
</p>
<ul>
<li>The <span class="gry-hl">DOM (Document Object Model) API</span> allows you to manipulate HTML and CSS,
creating, removing and changing HTML, dynamically applying new styles to your page, etc. Every time you
see a
popup window appear on a page, or some new content displayed (as we saw above in our simple demo) for
example,
that's the DOM in action.</li>
<li>The <span class="gry-hl">Geolocation API</span> retrieves geographical information. This is how Google
Maps
is able to find your location and plot it on a map.</li>
<li>The <span class="gry-hl">Canvas</span> and <span class="gry-hl">WebGL</span> APIs allow you to create
animated 2D and 3D graphics. People are doing some amazing things using these web technologies —see Chrome
Experiments and webglsamples.</li>
<li>Audio and Video APIs like <span class="gry-hl">HTMLMediaElement</span> and <span
class="gry-hl">WebRTC</span> allow you to do really interesting things with multimedia, such as play
audio
and video right in a web page, or grab video from your web camera and display it on someone else's
computer
(try our simple Snapshot demo to get the idea).</li>
</ul>
</section>
<section id="third_party_API's" class="main-section post">
<h2>Third party API's</h2>
<p>The Twitter API allows you to do things like displaying your latest tweets on your website.
The Google Maps API and OpenStreetMap API allows you to embed custom maps into your website, and other such
functionality.</p>
<p>There's a lot more available, too! However, don't get over excited just yet. You won't be able to build the
next Facebook, Google Maps, or Instagram after studying JavaScript for 24 hours — there are a lot of basics
to
cover first. And that's why you're here — let's move on!</p>
</section>
<section id="What_is_JavaScript_doing_on_your_page?" class="main-section post">
<h2>What is JavaScript doing on your page?</h2>
<p> Here we'll actually start looking at some code, and while doing so, explore what actually happens when you
run
some JavaScript in your page.</p>
<p>Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in
our
How CSS works article). When you load a web page in your browser, you are running your code (the HTML, CSS,
and
JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw
materials (the code) and outputs a product (the web page).</p>
<img id="execution" src="execution.png" alt="execution of html,css,JavaScript">
<p>A very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the
Document Object Model API (as mentioned above). Note that the code in your web documents is generally loaded
and
executed in the order it appears on the page. If the JavaScript loads and tries to run before the HTML and
CSS
it is affecting has been loaded, errors can occur. You will learn ways around this later in the article, in
the
Script loading strategies section.</p>
</section>
<section id="browser_Security" class="main-section post">
<h2>Browser security</h2>
<p>Each browser tab has its own separate bucket for running code in (these buckets are called "execution
environments" in technical terms) — this means that in most cases the code in each tab is run completely
separately, and the code in one tab cannot directly affect the code in another tab — or on another website.
This
is a good security measure — if this were not the case, then pirates could start writing code to steal
information from other websites, and other such bad things.</p>
</section>
<section id="javaScript_running order" class="main-section post">
<h2>JavaScript running order </h2>
<p> When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This
means that you need to be careful what order you put things in. For example, let's return to the block of
JavaScript we saw in our first example:</p>
<code>
const para = document.querySelector('p');<br>
para.addEventListener('click', updateName);<br>
function updateName() { <br>
let name = prompt('Enter a new name'); <br>
para.textContent = 'Player 1: ' + name; <br>
}
</code>
<p>Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that
when
the paragraph is clicked, the updateName() code block (lines 5–8) is run. The updateName() code block (these
types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that
name
into the paragraph to update the display.</p>
<p>If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an
error
returned in the browser developer console — TypeError: para is undefined. This means that the para object
does
not exist yet, so we can't add an event listener to it.</p>
</section>
<section id="interpreted_versus_compiled_code" class="main-section post">
<h2>Interpreted versus compiled code</h2>
<p>You might hear the terms <bold>interpreted</bold> and <bold>compiled</bold> in the context of programming.
In
interpreted languages, the code is run from top to bottom and the result of running the code is immediately
returned. You don't have to transform the code into a different form before the browser runs it. The code is
received in its programmer-friendly text form and processed directly from that.</p>
<p>Compiled languages on the other hand are transformed (compiled) into another form before they are run by
the
computer. For example, C/C++ are compiled into assembly language that is then run by the computer. The
program
is executed from a binary format, which was generated from the original program source code.</p>
<p>JavaScript is a lightweight interpreted programming language. The web browser receives the JavaScript code
in
its original text form and runs the script from that. From a technical standpoint, most modern JavaScript
interpreters actually use a technique called <bold>just-in-time compiling</bold> to improve performance; the
JavaScript source code gets compiled into a faster, binary format while the script is being used, so that it
can
be run as quickly as possible. However, JavaScript is still considered an interpreteted language, since the
compilation is handled at run time, rather than ahead of time.</p>
<p>There are advantages to both types of language, but we won't discuss them right now.</p>
</section>
<section id="server_v_client" class="main-section post">
<h2>Server-side versus client-side code</h2>
<p> You might also hear the terms <bold>server-side</bold> and <bold>client-side</bold> code, especially in
the
context of web development. Client-side code is code that is run on the user's computer — when a web page is
viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this module we
are
explicitly talking about client-side JavaScript.</p>
<p>Server-side code on the other hand is run on the server, then its results are downloaded and displayed in
the
browser. Examples of popular server-side web languages include PHP, Python, Ruby, ASP.NET and... JavaScript!
JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you
can
find out more about server-side JavaScript in our Dynamic Websites – Server-side programming topic.</p>
</section>
<section id="dynamic_v_static" class="main-section post">
<h2>Dynamic versus static code</h2>
<p>
The word dynamic is used to describe both client-side JavaScript, and server-side languages — it refers to
the
ability to update the display of a web page/app to show different things in different circumstances,
generating
new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data
from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the
client, e.g. creating a new HTML table, filling it with data requested from the server, then displaying the
table in a web page shown to the user. The meaning is slightly different in the two contexts, but related,
and
both approaches (server-side and client-side) usually work together.</p>
<p>A web page with no dynamically updating content is referred to as <bold>static</bold> — it just shows the
same
content all the time.</p>
</section>
<section id="add_javascript" class="main-section post">
<h2>How do you add JavaScript to your page?</h2>
<p>JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses <span class="gry-hl">
<link></span>elements to apply external stylesheets and <span class="gry-hl"><style></span>
elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the
<span class="gry-hl"><script></span> element. Let's learn how this works.</p>
</section>
<section id="internal_js" class="main-section post">
<h2>Internal JavaScript</h2>
<ol>
<li>First of all, make a local copy of our example file apply-javascript.html. Save it in a directory
somewhere
sensible.</li>
<li>Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web
page containing a clickable button.</li>
<li>Next, go to your text editor and add the following in your head — just before your closing </head> tag:
</li>
<code>
<script><br>
// JavaScript goes here <br>
</script> <br>
</code>
<li>Now we'll add some JavaScript inside our <script> element to make the page do something more
interesting — add the following code just below the
<code> "// JavaScript goes here" </code> line:</li>
<code>
document.addEventListener("DOMContentLoaded", function() {<br>
function createParagraph() {<br>
let para = document.createElement('p');<br>
para.textContent = 'You clicked the button!';<br>
document.body.appendChild(para);<br>
} <br>
const buttons = document.querySelectorAll('button'); <br>
for(let i = 0; i < buttons.length ; i++) { <br>
buttons[i].addEventListener <br>('click', createParagraph); } }); <br>
</code> <br>
<li>Save your file and refresh the browser — now you should see that when you click the button, a
new paragraph is generated and placed below.</li>
</ol>
</section>
<section id="external_js" class="main-section post">
<h2>External JavaScript</h2>
<p> This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.
</p>
<ol>
<li>First, create a new file in the same directory as your sample HTML file. Call it <span
class="gry-hl">script.js</span> — make sure it
has that .js filename extension, as that's how it is recognized as JavaScript.</li>
<li>Replace your current <span class="gry-hl"><script></span> element with the following:
</li>
<code>
<script src="script.js" defergt;</script>
</code>
<li>Inside <span class="gry-hl">script.js</span>, add the following script:</li>
<code>
function createParagraph() { <br>
let para = document.createElement('p');<br>
para.textContent = 'You clicked the button!';<br>
document.body.appendChild(para);<br>
}
const buttons = document.querySelectorAll('button');<br>
for(let i = 0; i < buttons.length ; i++) {<br>
buttons[i].addEventListener('click', createParagraph);<br>
}
</code>
<li>Save and refresh your browser, and you should see the same thing! It works just the same, but now we've
got
our JavaScript in an external file. This is generally a good thing in terms of organizing your code and
making
it reusable across multiple HTML files. Plus, the HTML is easier to read without huge chunks of script
dumped
in it.</li>
</ol>
</section>
<section id="inline_js" class="main-section post">
<h2>Inline JavaScript</h2>
<p> Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. </p>
<p><strong>Please don't do this</strong>, however. It is bad practice to pollute your HTML with JavaScript,
and it
is inefficient — you'd have to include the onclick="createParagraph()" attribute on every button you want
the
JavaScript to apply to.</p>
</section>
<section id="loading" class="main-section post">
<h2>Script loading strategies</h2>
<p>There are a number of issues involved with getting scripts to load at the right time. Nothing is as simple
as
it seems! A common problem is that all the HTML on a page is loaded in the order in which it appears. If you
are
using JavaScript to manipulate elements on the page (or more accurately, the Document Object Model), your
code
won't work if the JavaScript is loaded and parsed before the HTML you are trying to do something to.</p>
<p>In the above code examples, in the internal and external examples the JavaScript is loaded and run in the
head
of the document, before the HTML body is parsed. This could cause an error, so we've used some constructs to
get
around it.</p>
<p>In the internal example, you can see this structure around the code:</p>
<code>
document.addEventListener("DOMContentLoaded", function() {<br>
... <br>
});
</code>
<p>This is an event listener, which listens for the browser's "DOMContentLoaded" event, which signifies that
the
HTML body is completely loaded and parsed. The JavaScript inside this block will not run until after that
event
is fired, therefore the error is avoided (you'll learn about events later in the course).</p>
<p>In the external example, we use a more modern JavaScript feature to solve the problem, the <span
class="gry-hl">defer</span> attribute,
which tells the browser to continue downloading the HTML content once the <span class="gry-hl">
<script></span> tag element has been
reached.</p>
<code>
<script src="script.js" defer> </script>
</code>
<p>In this case both the script and the HTML will load simultaneously and the code will work.</p>
</section>
<section id="async_defer" class="main-section post">
<h2>async and defer</h2>
<p>There are actually two modern features we can use to bypass the problem of the blocking script — <span
class="gry-hl">async</span> and
<span class="gry-hl">defer</span> (which we saw above). Let's look at the difference between these two.</p>
<p>Scripts loaded using the <span class="gry-hl">async</span> attribute (see below) will download the script
without blocking rendering the
page and will execute it as soon as the script finishes downloading. You get no guarantee that scripts will
run
in any specific order, only that they will not stop the rest of the page from displaying. It is best to use
<span class="gry-hl">async</span> when the scripts in the page run independently from each other and depend
on
no other script on the page.
</p>
<p>For example, if you have the following script elements:</p>
<code>
<script async src="js/vendor/jquery.js"> </script><br>
<script async src="js/script2.js"></script><br>
<script async src="js/script3.js"></script><br>
</code>
<p>You can't rely on the order the scripts will load in. <span class="gry-hl">jquery.js</span> may load before
or
after <span class="gry-hl">script2.js</span> and
<span class="gry-hl">script3.js</span> and if this is the case, any functions in those scripts depending on
<span class="gry-hl">jquery</span> will produce an error
because <span class="gry-hl">jquery</span> will not be defined at the time the script runs.</p>
<p><span class="gry-hl">async</span> should be used when you have a bunch of background scripts to load in,
and
you just want to get them in
place asap. For example, maybe you have some game data files to load, which will be needed when the game
actually begins, but for now you just want to get on with showing the game intro, titles, and lobby, without
them being blocked by script loading.</p>
<p>Scripts loaded using the <span class="gry-hl">defer</span> attribute (see below) will run in the order they
appear in the page and execute
them as soon as the script and content are downloaded:</p>
<code>
<script defer src="js/vendor/jquery.js"> </script><br>
<script defer src="js/script2.js"></script><br>
<script defer src="js/script3.js"></script><br>
</code>
<p>All the scripts with the <span class="gry-hl">defer</span> attribute will load in the order they appear on
the
page. So in the second
example, we can be sure that <span class="gry-hl">jquery.js</span> will load before <span
class="gry-hl">script2.js</span> and <span class="gry-hl">script3.js</span> and that <span
class="gry-hl">script2.js</span> will load
before <span class="gry-hl">script3.js</span>. They won't run until the page content has all loaded, which
is
useful if your scripts depend
on the DOM being in place (e.g. they modify one of more elements on the page).</p>
<p>To summarize:</p>
<p><span class="gry-hl">async </span>and <span class="gry-hl">defer</span> both instruct the browser to
download
the script(s) in a separate thread, while the rest of the
page (the DOM, etc.) is downloading, so the page loading is not blocked by the scripts.</p>
<p>If your scripts should be run immediately and they don't have any dependencies, then use <span
class="gry-hl">async</span>.</p>
<p>
If your scripts need to wait for parsing and depend on other scripts and/or the DOM being in place, load
them
using <span class="gry-hl">defer</span> and put their corresponding<span class="gry-hl">
<script></span>
elements
in the order you want the browser to execute
them.</p>
</section>
<section id="comments" class="main-section post">
<h2>Comments</h2>
<p> As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by
the
browser, and exist simply to provide instructions to your fellow developers on how the code works (and you,
if
you come back to your code after six months and can't remember what you did). Comments are very useful, and
you
should use them often, particularly for larger applications. There are two types:</p>
<p>A single line comment is written after a double forward slash (//), e.g.
// I am a comment</p>
<code>
// I am a comment
</code>
<p>A multi-line comment is written between the strings /* and */, e.g.
</p>
<code>
/*
I am also <br>
a comment <br>
*/
</code>
<p>So for example, we could annotate our last demo's JavaScript with comments like so:</p>
<code>
// Function: creates a new paragraph and appends it to the bottom of the HTML body. <br>
// Function: creates a new paragraph and appends it to the bottom of the HTML body. <br>
function createParagraph() { <br>
let para = document.createElement('p'); <br>
para.textContent = 'You clicked the button!'; <br>
document.body.appendChild(para); <br>
}
/*
1. Get references to all the buttons on the page in an array format. <br>
2. Loop through all the buttons and add a click event listener to each one. <br>
When any button is pressed, the createParagraph() function will be run. <br>
*/
const buttons = document.querySelectorAll('button'); <br>
for (let i = 0; i < buttons.length ; i++) { <br>
buttons[i].addEventListener('click', createParagraph); <br>
}
</code>
<p>Note: In general more comments are usually better than less, but you should be careful if you find yourself
adding lots of comments to explain what variables are (your variable names perhaps should be more
intuitive), or
to explain very simple operations (maybe your code is overcomplicated).</p>
</section>
<section id="summary" class="main-section post">
<h2>Summary</h2>
<p>So there you go, your first step into the world of JavaScript. We've begun with just theory, to start
getting
you used to why you'd use JavaScript and what kind of things you can do with it. Along the way, you saw a
few
code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other
things.</p>
<p>JavaScript may seem a bit daunting right now, but don't worry — in this course, we will take you through it
in
simple steps that will make sense going forward. In the next article, we will plunge straight into the
practical, getting you to jump straight in and build your own JavaScript</p>
</section>
</main>
<footer id="main-footer" class='footer bg-dark'>
<div class="social">
<a href="#"><i class="fab fa-twitter fa-2x"></i></a>
<a href="#"><i class="fab fa-github fa-2x"></i></a>
<a href="#"><i class="fab fa-youtube fa-2x"></i></a>
<a href="#"><i class="fab fa-facebook fa-2x"></i></a>
</div>
<p>Mensah Tribe Web Solutions © 2020, All Rights Reserved</p>
All the documentation in this page is taken from <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">MDN</a>
</footer>
<script src="script.js"></script>
</body>
</html>