-
Notifications
You must be signed in to change notification settings - Fork 0
/
javascript-basics.html
83 lines (76 loc) · 18.9 KB
/
javascript-basics.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
<!DOCTYPE html><html lang="de-ch"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>JavaScript basics - Finecloud</title><meta name="description" content="What JavaScript is A scripting language originally designed for web browsers Object-oriented, however prototype-based and not class-based Supporting first-class functions A multi-paradigm language, supports imperative, object-oriented and functional programming style Untyped Moving from an interpreted language to just-in-time compilation Nowadays used for server-side programming too…"><meta name="generator" content="Publii Open-Source CMS for Static Site"><link rel="stylesheet" href="https://www.finecloud.ch/media/plugins/syntaxHighlighter/prism-black.css"><link rel="canonical" href="https://www.finecloud.ch/javascript-basics.html"><link rel="alternate" type="application/atom+xml" href="https://www.finecloud.ch/feed.xml"><link rel="alternate" type="application/json" href="https://www.finecloud.ch/feed.json"><meta property="og:title" content="JavaScript basics"><meta property="og:site_name" content="Finecloud"><meta property="og:description" content="What JavaScript is A scripting language originally designed for web browsers Object-oriented, however prototype-based and not class-based Supporting first-class functions A multi-paradigm language, supports imperative, object-oriented and functional programming style Untyped Moving from an interpreted language to just-in-time compilation Nowadays used for server-side programming too…"><meta property="og:url" content="https://www.finecloud.ch/javascript-basics.html"><meta property="og:type" content="article"><link rel="shortcut icon" href="https://www.finecloud.ch/media/website/finecloud.png" type="image/png"><link rel="stylesheet" href="https://www.finecloud.ch/assets/css/style.css?v=39da73365516a098a9b73b721fc970e2"><script type="application/ld+json">{"@context":"http://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://www.finecloud.ch/javascript-basics.html"},"headline":"JavaScript basics","datePublished":"2023-01-17T14:53","dateModified":"2023-03-29T20:14","description":"What JavaScript is A scripting language originally designed for web browsers Object-oriented, however prototype-based and not class-based Supporting first-class functions A multi-paradigm language, supports imperative, object-oriented and functional programming style Untyped Moving from an interpreted language to just-in-time compilation Nowadays used for server-side programming too…","author":{"@type":"Person","name":"Finecloud","url":"https://www.finecloud.ch/authors/finecloud/"},"publisher":{"@type":"Organization","name":"Finecloud"}}</script><meta name="google-site-verification" content="seFY9U12uiEq5U3_MyZiX6XWzk0AVFl9zITr2ZKsytY"></head><body><div class="site-container"><header class="top" id="js-header"><a class="logo" href="https://www.finecloud.ch/">Finecloud</a><nav class="navbar js-navbar"><button class="navbar__toggle js-toggle" aria-label="Menu" aria-haspopup="true" aria-expanded="false"><span class="navbar__toggle-box"><span class="navbar__toggle-inner">Menu</span></span></button><ul class="navbar__menu"><li><a href="https://www.finecloud.ch/" target="_self">Blog</a></li><li><a href="https://www.finecloud.ch/tags/" target="_self">Tags</a></li></ul></nav><div class="search"><div class="search__overlay js-search-overlay"><div class="search__overlay-inner"><form action="https://www.finecloud.ch/search.html" class="search__form"><input class="search__input js-search-input" type="search" name="q" placeholder="search..." aria-label="search..." autofocus="autofocus"></form><button class="search__close js-search-close" aria-label="Close">Close</button></div></div><button class="search__btn js-search-btn" aria-label="Search"><svg role="presentation" focusable="false"><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#search"/></svg></button></div></header><main><article class="post"><div class="hero"><figure class="hero__image hero__image--overlay"><img src="https://www.finecloud.ch/media/website/download.jpg" srcset="https://www.finecloud.ch/media/website/responsive/download-xs.jpg 300w, https://www.finecloud.ch/media/website/responsive/download-sm.jpg 480w, https://www.finecloud.ch/media/website/responsive/download-md.jpg 768w, https://www.finecloud.ch/media/website/responsive/download-lg.jpg 1024w, https://www.finecloud.ch/media/website/responsive/download-xl.jpg 1360w, https://www.finecloud.ch/media/website/responsive/download-2xl.jpg 1600w" sizes="100vw" loading="eager" alt=""></figure><header class="hero__content"><div class="wrapper"><div class="post__meta"><time datetime="2023-01-17T14:53">Januar 17, 2023</time></div><h1>JavaScript basics</h1></div></header></div><div class="wrapper post__entry"><div class="post__toc"><h3>Table of Contents</h3><ul><li><a href="#mcetoc_1gmvv0co91">What JavaScript is</a></li><li><a href="#mcetoc_1gmvve8qg1r">JavaScript and the Browser</a></li><li><a href="#mcetoc_1gmvve8qg1s">Node.js</a></li><li><a href="#mcetoc_1gn00enet3r">Variable Declaration and Value Assignment</a></li><li><a href="#mcetoc_1gn00enet3s">JavaScript is untyped</a></li><li><a href="#mcetoc_1gn00tl6e8i">Block Scope</a></li><li><a href="#mcetoc_1gn00tl6e8j">Equality and Identicalness</a></li></ul></div><h2 id="mcetoc_1gmvv0co91">What JavaScript is</h2><ul><li>A scripting language originally designed for web browsers</li><li>Object-oriented, however prototype-based and not class-based</li><li>Supporting first-class functions</li><li>A multi-paradigm language, supports imperative, object-oriented and functional programming style</li><li>Untyped</li><li>Moving from an interpreted language to just-in-time compilation</li><li>Nowadays used for server-side programming too</li><li>Relying on a host/run-time environment (web browser, Node.js)</li></ul><h2 id="mcetoc_1gmvve8qg1r">JavaScript and the Browser</h2><ul><li>The browser is the most common host environment</li><li>It provides a graphical user interface (via DOM)</li></ul><pre class="hljs" style="color: #a9b7c6; background: #282b2e; display: block; overflow-x: auto; padding: 0.5em;"><span class="xml"><span class="hljs-meta" style="color: #bbb529;"><!doctype html></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">title</span>></span>JavaScript<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">title</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name" style="color: #e8bf6a;">script</span>></span><span class="javascript">
<span class="hljs-comment" style="color: grey;">// Output to the console</span>
<span class="hljs-built_in">console</span>.log(<span class="hljs-string" style="color: #6a8759;">"Hello world"</span>);
</span><span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name" style="color: #e8bf6a;">html</span>><br></span></span></pre><h2 id="mcetoc_1gmvve8qg1s">Node.js</h2><ul><li>Node.js is a server-side host environment</li><li>Initially conceived to facilitate asynchronous I/O</li></ul><pre class="hljs"><span class="hljs-built_in">let</span> x = Math.<span class="hljs-built_in">floor</span>((Math.<span class="hljs-built_in">random</span>() * <span class="hljs-number">10</span>) + <span class="hljs-number">1</span>);
console.<span class="hljs-built_in">log</span>(<span class="hljs-string">"Your random number is: "</span> + x);</pre><p>this can be executed with:</p><pre>$ node example.js<br>Your random number is: 42</pre><h2 id="mcetoc_1gn00enet3r">Variable Declaration and Value Assignment</h2><ul><li>Variables are declared using the let keyword or const if no reassignment is needed</li><li>The old var keyword shouldn’t be used anymore</li></ul><blockquote><p>Tip: always use const. Only need let if you really need to change the variable later on</p></blockquote><pre class="hljs" style="color: #a9b7c6; background: #282b2e; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-comment" style="color: grey;">// Declare a variable</span>
<span class="hljs-keyword" style="color: #cc7832;">let</span> x;
<span class="hljs-built_in">console</span>.log(x); <span class="hljs-comment" style="color: grey;">// >> undefined</span>
<span class="hljs-comment" style="color: grey;">// Assign a value to a variable</span>
x = <span class="hljs-number" style="color: #6897bb;">42</span>;
<span class="hljs-built_in">console</span>.log(x); <span class="hljs-comment" style="color: grey;">// >> 42</span>
<span class="hljs-comment" style="color: grey;">// Declare and assign in one stroke</span>
<span class="hljs-keyword" style="color: #cc7832;">let</span> y = 2;
<span class="hljs-comment" style="color: grey;">// Variables declared using ’let’ can be reassigned</span>
y = 1;
<span class="hljs-comment" style="color: grey;">// Variables declared using ’const’ cannot be reassigned</span>
<span class="hljs-keyword" style="color: #cc7832;">const</span> z = 99;
z = <span class="hljs-number" style="color: #6897bb;">16</span>; <span class="hljs-comment" style="color: grey;">// ERROR</span></pre><h2 id="mcetoc_1gn00enet3s">JavaScript is untyped</h2><p>So JavaScript has no Types? Well it has, but not before runtime. JavaScript is dynamically typed, i.e., the type of a variable is determined at runtime and may change during program execution.</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #cc7832;">let</span> x = <span class="hljs-number" style="color: #6897bb;">12</span>;
<span class="hljs-built_in">console</span>.log(<span class="hljs-keyword" style="color: #cc7832;">typeof</span> x); <span class="hljs-comment" style="color: grey;">// >> number</span>
<span class="hljs-comment" style="color: grey;">// Values of different types can be assigned to a variable</span>
x = <span class="hljs-string" style="color: #6a8759;">"Hello World"</span>;
<span class="hljs-built_in">console</span>.log(<span class="hljs-keyword" style="color: #cc7832;">typeof</span> x); <span class="hljs-comment" style="color: grey;">// >> string</span>
<span class="hljs-comment" style="color: grey;">// Automatic type conversion</span>
<span class="hljs-keyword" style="color: #cc7832;">let</span> y = <span class="hljs-number" style="color: #6897bb;">12</span>+<span class="hljs-string" style="color: #6a8759;">"10"</span>;
<span class="hljs-built_in">console</span>.log(<span class="hljs-keyword" style="color: #cc7832;">typeof</span> y); <span class="hljs-comment" style="color: grey;">// >> string ('1210')</span>
y = <span class="hljs-number" style="color: #6897bb;">12</span>-<span class="hljs-string" style="color: #6a8759;">"10"</span>;
<span class="hljs-built_in">console</span>.log(<span class="hljs-keyword" style="color: #cc7832;">typeof</span> y); <span class="hljs-comment" style="color: grey;">// >> number (2)</span>
<span class="hljs-comment" style="color: grey;">// Explicit type conversion with Number(), String() and Boolean()</span>
<span class="hljs-keyword" style="color: #cc7832;">let</span> z = <span class="hljs-number" style="color: #6897bb;">12</span>+<span class="hljs-built_in">Number</span>(<span class="hljs-string" style="color: #6a8759;">"10"</span>);
<span class="hljs-built_in">console</span>.log(<span class="hljs-keyword" style="color: #cc7832;">typeof</span> z); <span class="hljs-comment" style="color: grey;">// >> number</span>
<span class="hljs-built_in">console</span>.log(z); <span class="hljs-comment" style="color: grey;">// >> 22</span></pre><h2 id="mcetoc_1gn00tl6e8i">Block Scope</h2><ul><li>Variables declared with let and const are block-scoped</li><li>Before ES6, JavaScript had no block scope and hence variables declared with var are not block-scoped</li></ul><pre class="hljs" style="color: #a9b7c6; background: #282b2e; display: block; overflow-x: auto; padding: 0.5em;">{
<span class="hljs-keyword" style="color: #cc7832;">let</span> x = <span class="hljs-number" style="color: #6897bb;">12</span>;
<span class="hljs-keyword" style="color: #cc7832;">const</span> y = <span class="hljs-number" style="color: #6897bb;">13</span>;
}
<span class="hljs-comment" style="color: grey;">// x and y cannot be used here</span>
{
<span class="hljs-keyword" style="color: #cc7832;">var</span> z = <span class="hljs-number" style="color: #6897bb;">14</span>;
}
<span class="hljs-built_in">console</span>.log(z); <span class="hljs-comment" style="color: grey;">// >> 14</span>
</pre><h2 id="mcetoc_1gn00tl6e8j">Equality and Identicalness</h2><ul><li>== and != compare only values (equality)</li><li>=== and !== compare values and types (identicalness)</li></ul><pre class="hljs" style="color: #a9b7c6; background: #282b2e; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #cc7832;">const</span> a = <span class="hljs-number" style="color: #6897bb;">7</span>;
<span class="hljs-keyword" style="color: #cc7832;">const</span> b = <span class="hljs-string" style="color: #6a8759;">"7"</span>;
<span class="hljs-comment" style="color: grey;">// a and b are equivalent...</span>
<span class="hljs-built_in">console</span>.log(a == b); <span class="hljs-comment" style="color: grey;">// >> true</span>
<span class="hljs-comment" style="color: grey;">// ... but not identical (number vs. string)</span>
<span class="hljs-built_in">console</span>.log(a === b); <span class="hljs-comment" style="color: grey;">// >> false</span>
<span class="hljs-built_in">console</span>.log(a === <span class="hljs-built_in">parseInt</span>(b)); <span class="hljs-comment" style="color: grey;">// >> true</span>
<span class="hljs-keyword" style="color: #cc7832;">const</span> x = <span class="hljs-number" style="color: #6897bb;">0</span>;
<span class="hljs-keyword" style="color: #cc7832;">const</span> y = <span class="hljs-literal" style="color: #6897bb;">false</span>;
<span class="hljs-comment" style="color: grey;">// x and y are equivalent...</span>
<span class="hljs-built_in">console</span>.log(x == y); <span class="hljs-comment" style="color: grey;">// >> true</span>
<span class="hljs-comment" style="color: grey;">// ...but not identical (number vs. boolean)</span>
<span class="hljs-built_in">console</span>.log(x === y); <span class="hljs-comment" style="color: grey;">// >> false</span>
</pre><h2>Strict mode</h2><p>The <code class="w3-codespan">"use strict"</code> directive was new in ECMAScript version 5. It is not a statement, but a literal expression, ignored by earlier versions of JavaScript. The purpose of <code class="w3-codespan">"use strict"</code> is to indicate that the code should be executed in "strict mode". With strict mode, you can not, for example, use undeclared variables. All modern browsers support "use strict". The numbers in the table specify the first browser version that fully supports the directive. <strong><span style="color: var(--text-primary-color); font-family: var(--editor-font-family); font-size: inherit;">You can use strict mode in all your programs. It helps you to write cleaner code, like preventing you from using undeclared variables.</span></strong></p><p> </p></div><footer class="wrapper post__footer"><p class="post__last-updated">This article was updated on März 29, 2023</p><ul class="post__tag"><li><a href="https://www.finecloud.ch/tags/javascript/">javascript</a></li><li><a href="https://www.finecloud.ch/tags/softwareentwicklung/">software development</a></li></ul><div class="post__share"></div></footer></article><nav class="post__nav"><div class="post__nav-inner"><div class="post__nav-prev"><svg width="1.041em" height="0.416em" aria-hidden="true"><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#arrow-prev"/></svg> <a href="https://www.finecloud.ch/deploy-your-java-web-app-to-heroku.html" class="post__nav-link" rel="prev"><span>Previous</span> Deploy your Java Web App to Heroku</a></div><div class="post__nav-next"><a href="https://www.finecloud.ch/javascript-functions.html" class="post__nav-link" rel="next"><span>Next</span> JavaScript functions </a><svg width="1.041em" height="0.416em" aria-hidden="true"><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#arrow-next"/></svg></div></div></nav><div class="post__related related"><div class="wrapper"><h2 class="h5 related__title">You should also read:</h2><article class="related__item"><div class="feed__meta"><time datetime="2023-01-17T19:48" class="feed__date">Januar 17, 2023</time></div><h3 class="h1"><a href="https://www.finecloud.ch/javascript-arrays.html">JavaScript arrays</a></h3></article><article class="related__item"><div class="feed__meta"><time datetime="2023-01-17T15:46" class="feed__date">Januar 17, 2023</time></div><h3 class="h1"><a href="https://www.finecloud.ch/javascript-functions.html">JavaScript functions</a></h3></article><article class="related__item"><div class="feed__meta"><time datetime="2022-08-30T16:28" class="feed__date">August 30, 2022</time></div><h3 class="h1"><a href="https://www.finecloud.ch/java-basics-dates-and-time.html">Java basics: Dates and Time</a></h3></article></div></div></main><footer class="footer"><div class="footer__copyright"><p>Powered by Publii</p></div><button onclick="backToTopFunction()" id="backToTop" class="footer__bttop" aria-label="Back to top" title="Back to top"><svg><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#toparrow"/></svg></button></footer></div><script>window.publiiThemeMenuConfig = {
mobileMenuMode: 'sidebar',
animationSpeed: 300,
submenuWidth: 'auto',
doubleClickTime: 500,
mobileMenuExpandableSubmenus: true,
relatedContainerForOverlayMenuSelector: '.top',
};</script><script defer="defer" src="https://www.finecloud.ch/assets/js/scripts.min.js?v=6ca8b60e6534a3888de1205e82df8528"></script><script>var images = document.querySelectorAll('img[loading]');
for (var i = 0; i < images.length; i++) {
if (images[i].complete) {
images[i].classList.add('is-loaded');
} else {
images[i].addEventListener('load', function () {
this.classList.add('is-loaded');
}, false);
}
}</script><script defer="defer" src="https://www.finecloud.ch/media/plugins/syntaxHighlighter/prism.js"></script></body></html>