-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
458 lines (446 loc) · 26.5 KB
/
index.html
File metadata and controls
458 lines (446 loc) · 26.5 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
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
<!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="stylesheet" href="./css/documentation.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<script src="https://kit.fontawesome.com/c2761d2df3.js" crossorigin="anonymous"></script>
<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=Montserrat&family=Poppins:wght@600&family=Roboto&display=swap" rel="stylesheet">
<script defer src="./js/documentation.js"></script>
<title>BASIC LANGUAGES</title>
</head>
<body>
<main id="main-doc">
<div id="wrapper">
<nav id="navbar">
<div class="sidebar">
<header>learn javascript</header>
<div id="nav-list">
<ul>
<li><a class="nav-link" href="#Home">Home</a></li>
<li><a class="nav-link" href="#Introduction">Introduction</a></li>
<li><a class="nav-link" href="#Syntax">Syntax</a></li>
<li><a class="nav-link" href="#Comments">Comments</a></li>
<li><a class="nav-link" href="#Variables">Variables</a></li>
<li><a class="nav-link" href="#Operators">Operators</a></li>
<li><a class="nav-link" href="#Function">Function</a></li>
</ul>
</div>
<div class="social_media">
<a href="#"><i class="fa-brands fa-free-code-camp"></i></a>
<a href="#"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
</div>
</div>
</nav>
<section class="main-section" id="Home">
<header id="headings">Home</header>
<div class="homeintro">
<p>
Javascript is a programming language of the web. It was invented by Brendan Eich in 1995.
</p>
</div>
<div class="homewhy">
<h4 class="subheadings">Why learn Javascript</h4>
<p>
<ol class="listlist">
<li>It's the most popular programming language.Javascript helps you develop great
front-end as well as back-end softwares using different Javascript based frameworks
like jQuery, Node.JS etc.</li>
<li>JavaScript is everywhere.It comes installed on every modern web browser and so to
learn Javascript you really do not need any special environment setup.</li>
<li>It's a valuable tool for game designers. Games are a big business today, and developers
who know JavaScript have that extra advantage. The language's versatility, power, and
ability to easily create visual effects make it a perfect fit for game developers.</li>
<li>Javascript helps you create really beautiful and crazy fast websites. You can develop
your website with a console like look and feel and give your users the best Graphical
User Experience</li>
<li>JavaScript is easy to learn</li>
</ol>
</p>
</div>
<div class="homeframeworks">
<h4>Javascript Frameworks</h4>
<p>
Thera are many javascript frameworks and libraries. They include:
<ol class="listlist">
<li>Angular</li>
<li>React</li>
<li>JQuery</li>
<li>Vue.js</li>
<li>Meteor</li>
<li>Node.js</li>
<li>Ember.js</li>
</ol>
</p>
</div>
</section>
</div>
<section class="main-section" id="Introduction">
<header id="headings">Introduction</header>
<div class="intro-wrapper">
<div class="intro-container">
Javascript is a tranlated language. JavaScript is an object-based scripting language
which is lightweight and cross-platform.
<h4> JavaScript History</h4>
<p>
In 1993, Mosaic, the first popular web browser, came into existence. In the year 1994, Netscape was
founded by Marc Andreessen. He realized that the web needed to become more dynamic. Thus, a 'glue
language' was believed to be provided to HTML to make web designing easy for designers and part-time
programmers. Consequently, in 1995, the company recruited Brendan Eich intending to implement and
embed Scheme programming language to the browser. But, before Brendan could start, the company
merged with Sun Microsystems for adding Java into its Navigator so that it could compete with
Microsoft over the web technologies and platforms. Now, two languages were there: Java and the
scripting language. Further, Netscape decided to give a similar name to the scripting language as
Java's. It led to 'Javascript'. Finally, in May 1995, Marc Andreessen coined the first code of
Javascript named 'Mocha'. Later, the marketing team replaced the name with 'LiveScript'. But,
due to trademark reasons and certain other reasons, in December 1995, the language was finally
renamed to 'JavaScript'. From then, JavaScript came into existence.
</p>
<h4>Application of Javascript</h4>
<ol class="listlist">
<li>Web application</li>
<li>Web Development</li>
<li>Mobile Application</li>
<li>Game Development</li>
<li>Client-side Validation</li>
<li>Server Applications</li>
<li>Web Server</li>
<li>Presentations and slideshows</li>
<li>Dynamic drop-down menus</li>
</ol>
</div>
</div>
</section>
<section class="main-section" id="Syntax">
<header id="headings">Syntax</header>
<div class="syntax-wrapper">
<div class="syntax-container">
<p>
JavaScript is implemented using JavaScript statements that are placed within <span> script </span> in HTML head.
</p>
<h4>Case Sensitivity</h4>
<p>
JavaScript is a case-sensitive language. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.
City and city in JavaScript have two very different meanings.
</p>
</div>
</div>
</section>
<!--COMMENT SECTION-->
<section class="main-section" id="Comments">
<header id="headings">Comments</header>
<div class="comments-container">
<div class="comments">
<p>
JavaScript comments are meaningful way to explain complex code in simple plain English.
Comments can also be used to add suggestions or put warnings in code. Any JavaScript
comment is ignored by the web browser. There are two different ways to write comments
in Javascript on a;
<ol class="listlist commentslist">
<li>Single line</li>
<li>Multiple lines</li>
</ol>
</p>
<div class="singlecomments">
<h4>Single line comments</h4>
<div class="scomments1">
<p>
Single line comments begin with two forward slashes (<span class="comment-span">//</span>).
<div class="js-code">
<code>
//Declare variable X and give it a value of 10. </br>
let X=10; <br>
//Declares variable Y and adds 5 to the variable X <br>
let Y=5+X <br>
</code>
</div>
</p>
</div>
</div>
<div class="multi-comments">
<h4>Multiline (Block) comments</h4>
<div class="mcomments">
Multi-line comments start with <span class="comment-span"> /*</span> and end with <span class="comment-span">*/</span> .
Any text between <span class="comment-span">/*</span> and <span class="comment-span">*/</span> will be ignored by JavaScript.
<div class="js-code">
<code>
/* <br>
This is a multiline comment 1 <br>
This is a multiline comment 2 <br>
This is a multiline comment 3 <br>
This is a multiline comment 4 <br>
This is a multiline comment 5 <br>
*/
</code>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="main-section" id="Variables">
<header id="headings">Variables</header>
<div class="var-wrapper">
<div class="var-container">
<div class="var-intro">
<p>
A variable is a storage location. There are a set of rules one needs to observe when naming variables:
<ol class="listlist">
<li>Name must start with a letter (a to z or A to Z).underscore( _ ), or dollar( $ ) sign.</li>
<li>Names can contain letters, digits, underscores, and dollar signs.</li>
<li>Name must not be a <a href="https://www.edureka.co/blog/javascript-reserved-words/" target="_blank">reserved</a> words.</li>
<li>After first letter we can use digits (0 to 9), for example value1.</li>
<li>JavaScript variables are case sensitive, for example x and X are different variables</li>
</ol>
</p>
</div>
<div class="var-syntax">
<h4>Variable Syntax</h4>
When declaring a variable one must declare with either <em>let</em> or <em>const</em>.
If you want a general rule: always declare variables with const. If you think the value of the variable can change, use let.
For example:
<div class="js-code">
<code>
const name; // declares a variable called name. <br>
or <br>
let Area; //declares a variable called area <br>
</code>
</div>
In JavaScript creating a variable is called <span>variable declaration</span>.
Storing a value in a variable is called <span> variable initialization</span>. An example is:
<div class="js-code">
<code>
//initializes a variable called width to 5 <br>
let width=5; <br>
</code>
</div>
</div>
<div class="var-scopes">
<h4>Javascript Variable Scope</h4>
<p>
In javascript there are two types of variables:
<ol class="listlist">
<li>Local Variable - A local variable is declared inside a function. It can only be accessible in that function.</li>
<li>Global Variable - A global variable has global scope which means it can be defined anywhere in your JavaScript code.</li>
</ol>
</p>
<div class="js-code">
<code>
//local variables <br>
function sum(){ <br>
let x = 10; <br>
let y = 5; <br>
let z = x + y; <br>
}
//global variable
let greetings = Buenos días; <br>
functionmorning(){ <br>
console.log(greetings); <br>
}//the function above will output Buenos días
</code>
</div>
</div>
</div>
</div>
</section>
<!--OPERATORS-->
<section class="main-section" id="Operators">
<header id="headings">Operators</header>
<div class="operator-wrapper">
<div class="operator-container">
<div>
JavaScript operators are symbols that are used to perform operations on operands. For example;
<div class="js-code">
<code>
var multiply = 10 * 20;
</code>
</div>
In the example above, 10 and 20 are the operands while = is the operator.
Javascript has the following operators;
<ol class="listlist">
<li>Arithmetic operators</li>
<li>Comparison Operators</li>
<li>Bitwise operators</li>
<li>Logical operators</li>
<li>Assignment Operators</li>
<li>Special Operators</li>
</ol>
</div>
<div class="arithmetic">
<h4>Arithmetic Operators</h4>
<p>Arithmetic operators perform arithmetic operation on operands. They include:</p>
<table class="tab_operators">
<tbody>
<tr><th>Operator</th><th>Description</th><th>Example</th></tr>
<tr><td>+</td><td>Addition</td><td>60+20 = 80</td></tr>
<tr><td>-</td><td>Subtraction</td><td>20-15 = 5</td></tr>
<tr><td>*</td><td>Multiplication</td><td>5*20 = 100</td></tr>
<tr><td>/</td><td>Division</td><td> 20/10 = 2</td></tr>
<tr><td>%</td><td>Modulus (Remainder)</td><td>20%10 = 0</td></tr>
<tr><td>++</td><td>Increment</td><td>var b=20; a++; Now b = 21</td></tr>
<tr><td>--</td><td>Decrement</td><td>var b=20; a--; Now b = 19</td></tr>
</tbody>
</table>
</div>
<div class="comparison">
<h4>Comparison Operators</h4>
<p>Comparison operators compare values between two operands. They include:</p>
<table class="tab_operators">
<tbody>
<tr><th>Operator</th><th>Description</th><th>Example</th></tr>
<tr><td>==</td><td>Is equal to</td><td>10==20 = false</td></tr>
<tr><td>===</td><td>Identical (equal and of same type)</td><td>10==20 = false</td></tr>
<tr><td>!=</td><td>Not equal to</td><td>10!=20 = true</td></tr>
<tr><td>!==</td><td>Not Identical</td><td> 20!==20 = false</td></tr>
<tr><td>></td><td>Greater than</td><td>20>10 = true</td></tr>
<tr><td>>=</td><td>Greater than or equal to</td><td>20>=10 = true</td></tr>
<tr><td><</td><td>Less than</td><td>20<10 = false</td></tr>
<tr><td><=</td><td>Less than or equal to</td><td>20<=10 = false</td></tr>
</tbody>
</table>
</div>
<div class="bitwise">
<h4>Bitwise Operators</h4>
<table class="tab_operators">
<p>Bitwise operators perform bitwise operations on operands. Bitwise operators include;</p>
<tbody>
<tr><th>Operator</th><th>Description</th><th>Example</th></tr>
<tr><td>&</td><td>Bitwise AND</td><td>(10==20 & 20==33) = false</td></tr>
<tr><td>|</td><td>Bitwise OR</td><td>(10==20 | 20==33) = false</td></tr>
<tr><td>^</td><td>Bitwise XOR</td><td>(10==20 ^ 20==33) = false</td></tr>
<tr><td>~</td><td>Bitwise NOT</td><td> (~10) = -10</td></tr>
<tr><td><<</td><td>Bitwise Left Shift</td><td>(10<<2) = 40</td></tr>
<tr><td>>></td><td>Bitwise Right Shift</td><td>(10>>2) = 2</td></tr>
<tr><td>>>></td><td>Bitwise Right Shift with Zero</td><td>(10>>>2) = 2</td></tr>
</tbody>
</table>
</div>
<div class="logical">
<h4>Logical Operators</h4>
<table class="tab_operators">
<p>The following operators are known as JavaScript logical operators</p>
<tbody>
<tr><th>Operator</th><th>Description</th><th>Example</th></tr>
<tr><td>&&</td><td>Logical AND</td><td>(10==20 && 20==33) = false</td></tr>
<tr><td>||</td><td>Logical OR</td><td>(10==20 || 20==33) = false</td></tr>
<tr><td>!</td><td>Logical Not</td><td>!(10==20) = true</td></tr>
</tbody>
</table>
</div>
<div class="assignment">
<h4>Assignment Operators</h4>
<p>The following operators are known as JavaScript assignment operators</p>
<table class="tab_operators">
<tbody>
<tr><th>Operator</th><th>Description</th><th>Example</th></tr>
<tr><td>=</td><td>Assign</td><td>10+10 = 20</td></tr>
<tr><td>+=</td><td>Add and assign</td><td>var a=10; a+=20; Now a = 30</td></tr>
<tr><td>-=</td><td>Subtract and assign</td><td>var a=20; a-=10; Now a = 10</td></tr>
<tr><td>*=</td><td>Multiply and assign</td><td>var a=10; a*=20; Now a = 200</td></tr>
<tr><td>/=</td><td>Divide and assign</td><td>var a=10; a/=2; Now a = 5</td></tr>
<tr><td>%=</td><td>Modulus and assign</td><td>var a=10; a%=2; Now a = 0</td></tr>
</tbody>
</table>
</div>
<div class="special">
<h4>Special Operators</h4>
<p>The following operators are known as JavaScript special operators</p>
<table class="tab_operators">
<tbody>
<tr><th>Operator</th><th>Description</th></tr>
<tr><td>(?:)</td><td>Conditional Operator returns value based on the condition. It is like if-else.</td></tr>
<tr><td>,</td><td>Comma Operator allows multiple expressions to be evaluated as single statement.</td></tr>
<tr><td>delete</td><td>Delete Operator deletes a property from the object.</td></tr>
<tr><td>in</td><td>In Operator checks if object has the given property</td></tr>
<tr><td>instanceof</td><td>checks if the object is an instance of given type</td></tr>
<tr><td>new</td><td>creates an instance (object)</td></tr>
<tr><td>typeof</td><td>checks the type of object.</td></tr>
<tr><td>void</td><td>it discards the expression's return value.</td></tr>
<tr><td>yield</td><td>checks what is returned in a generator by the generator's iterator.</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!--FUNCTION SECTION-->
<section class="main-section" id="Function">
<header id="headings">Function</header>
<div class="func-wrapper">
<div class="func-container">
<div class="func_intro">
<p>
A function is a reusable block of code that performs a specific task.
</p>
</div>
<div class="func-syntax">
<h4 class="subheadings">Function Syntax</h4>
<div class="func-syntax1">
<p>A JavaScript function is defined with the function keyword, followed by a function name,
followed by parentheses ().
<div class="js-code">
<code>
function functionname(){ <br>
//block of code <br>
}
</code>
</div>
</p>
</div>
<div class="func-syntax2">
In the parentheses, parameters can be passed. The parameters are separated
by a comma.
<div class="js-code">
<code>
function identifier(parameter 1, parameter 2, parameter 3){ <br>
//block of code <br>
}
</code>
</div>
</div>
</div>
<div class="func-call">
<h4 class="subheadings">Calling a function</h4>
<p>To call a function, you type the function name followed by parentheses.</p>
<div class="js-code">
<code>
//create a function called animal <br>
function animal(){ <br>
console.log("I love dogs"); <br>
} <br>
//calls the function animal <br>
animal(); <br>
</code>
</div>
</div>
<div class="func-return">
<h4 class="subheadings">Return statement</h4>
<p>
To pass information from a function, Javascript uses <em>return statement</em>.
When JavaScript reaches a return statement, the function will stop executing.
<div class="js-code" style="margin-bottom: 10px;">
<code>
function rectanglearea(){ <br>
let width=10; <br>
let height=5; <br>
let area=width*height; <br>
return area; <br>
}
</code>
</div>
</p>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
<!--
15. at least one media query
-->