JavaScript: Difference between revisions

JavaScript (view source)

Revision as of 20:28, 6 July 2020

553 bytes added , 6 July 2020

→‎Usage

David

Bureaucrats, Interface administrators, Administrators

5,321

edits

@@ Line 4: / Line 4: @@
 For server and desktop application JavaScript usage, please see the [[NodeJS]] page.
-==Usage==
+==Language Syntax==
-For basic dom manipulation, see [https://htmldom.dev/ https://htmldom.dev/].
+General Ecmascript syntax. Parts of this section applies to browser-side JS and server-side JS (Node.js, Deno), though details may vary between runtimes.
-===Inputs===
-====Showing an input image====
-<syntaxhighlight lang="javascript">
-const myInput = document.getElementById("myInput");
-const myImage = document.getElementById("myImage");
-myInput.addEventListener('change', function() {
-    if (myInput.files.length !== 1) {
-        return;
-    }
-    let image = myInput.files[0];
-    const reader = new FileReader();
-    reader.onload = function(e) {
-        myImage.src = e.target.result;
-    };
-    reader.readAsDataURL(image);
-});
-</syntaxhighlight>
-===Canvas===
-===Picture===
-===Video===
-Your HTML:
-<syntaxhighlight lang="html">
-<video id="myVideoElt" controls>
-</video>
-</syntaxhighlight>
-Your JS:
-<syntaxhighlight lang="javascript">
-const myVideo = document.getElementById("myVideoElt");
-// Create a new source
-const newSource = document.createElement("source");
-const myVideoUrl = "https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm";
-newSource.setAttribute("src", myVideoUrl);
-myVideo.appendChild(newSource);
-myVideo.play();
-</syntaxhighlight>
 ===Regular Expressions (Regex)===
-[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions Reference]
+[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions MDN Guide]
 <syntaxhighlight lang="javascript">
 var myRegex = /(\d+),(\d+)/;
@@ Line 58: / Line 17: @@
 console.table(match);
 </syntaxhighlight>
 ===Classes===
@@ Line 120: / Line 78: @@
 ===Async-await===
-Added in ES2017<br>
+Added in ES2017
 See [https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await Async_await]<br>
 Async functions return implicit promises. They allow you to use keyword <code>await</code> to get results from other promises or functions.
+===Enums===
+See [https://stackoverflow.com/questions/287903/what-is-the-preferred-syntax-for-defining-enums-in-javascript Stack overflow]
+Ecmascript doesn't have a built-in way to define ENUMS. One way is to use <code>Object.freeze</code>:
+<syntaxhighlight lang="js">
+const WORKERSTATUS = Object.freeze({
+  ACTIVE: "ACTIVE",
+  DISABLED: "DISABLED",
+});
+</syntaxhighlight>
+==Browser Usage==
+For basic dom manipulation, see [https://htmldom.dev/ https://htmldom.dev/].
+===Inputs===
+====Showing an input image====
+<syntaxhighlight lang="javascript">
+const myInput = document.getElementById("myInput");
+const myImage = document.getElementById("myImage");
+myInput.addEventListener('change', function() {
+    if (myInput.files.length !== 1) {
+        return;
+    }
+    let image = myInput.files[0];
+    const reader = new FileReader();
+    reader.onload = function(e) {
+        myImage.src = e.target.result;
+    };
+    reader.readAsDataURL(image);
+});
+</syntaxhighlight>
+===Canvas===
+===Picture===
+===Video===
+Your HTML:
+<syntaxhighlight lang="html">
+<video id="myVideoElt" controls>
+</video>
+</syntaxhighlight>
+Your JS:
+<syntaxhighlight lang="javascript">
+const myVideo = document.getElementById("myVideoElt");
+// Create a new source
+const newSource = document.createElement("source");
+const myVideoUrl = "https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm";
+newSource.setAttribute("src", myVideoUrl);
+myVideo.appendChild(newSource);
+myVideo.play();
+</syntaxhighlight>
 ==Compilation==