5,321
edits
JavaScript: Difference between revisions
no edit summary
(Created page with "This page is a mostly about browser-based JavaScript or ECMAScript usage and interaction with the HTML DOM (window). For server and desktop application JavaScript usage, pleas...") |
No edit summary |
||
| (7 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
For server and desktop application JavaScript usage, please see the [[NodeJS]] page. | For server and desktop application JavaScript usage, please see the [[NodeJS]] page. | ||
=Usage= | ==Usage== | ||
== | ===Arrays=== | ||
== | <syntaxhighlight lang="javascript"> | ||
let arr = [1,2,3]; | |||
= | // Map | ||
arr.map(x => x > 2); // [false, false, true] | |||
=Modules= | // Reduce or Fold | ||
// Note that if you do not provide an initial accumulator, | |||
// then the first element will be your accumulator | |||
// I.e. the first call to your function will be (arr[0], arr[1]) | |||
arr.reduce((acc, x) => acc + x, 0); // 6 | |||
</syntaxhighlight> | |||
===Canvas=== | |||
===Video=== | |||
===Regular Expressions (Regex)=== | |||
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions Reference] | |||
<syntaxhighlight lang="javascript"> | |||
var myRegex = /(\d+),(\d+)/; | |||
var myStr = "124,52"; | |||
var match = myStr.match(myRegex); | |||
// Captures | |||
console.log(match[1], match[2]); | |||
console.table(match); | |||
</syntaxhighlight> | |||
===Classes=== | |||
Traditionally, classes are done using functions in JavaScript.<br> | |||
{{hidden | Traditional JS Classes | | |||
<syntaxhighlight lang="javascript"> | |||
function Rectangle(height, width) { | |||
this.height = height; | |||
this.width = width; | |||
} | |||
// To extend some Shape class | |||
Rectangle.prototype = Object.create(Shape.prototype); | |||
// To add to the prototype | |||
Object.assign(Rectangle.prototype, { | |||
getSize: function() { | |||
return this.height * this.width; | |||
} | |||
}); | |||
</syntaxhighlight> | |||
}} | |||
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes Mozilla Reference]<br> | |||
ES2015 adds syntax for classes in JavaScript.<br> | |||
<syntaxhighlight lang="javascript"> | |||
class Rectangle extends Shape { | |||
constructor(height, width) { | |||
this.height = height; | |||
this.width = width; | |||
} | |||
getSize() { | |||
return this.height * this.width; | |||
} | |||
} | |||
</syntaxhighlight> | |||
==Compilation== | |||
===Webpack=== | |||
===Babel=== | |||
==Websockets== | |||
How to use Websockets | |||
===Getting Started=== | |||
<syntaxhighlight lang="javascript"> | |||
let ws = new WebSocket(this.SERVER_URL); | |||
ws.onopen = function(event) { | |||
console.log("Websocket opened"); | |||
ws.send("Hi"); | |||
}; | |||
ws.onmessage = function(event) { | |||
console.log("message received"); | |||
console.log(event.data); | |||
}; | |||
ws.onclose = function() { | |||
console.log("WS Closed"); | |||
}; | |||
</syntaxhighlight> | |||
==Modules== | |||
===Getting Started=== | |||
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules MDN Guide to Modules]<br> | |||
<syntaxhighlight lang="javascript"> | |||
</syntaxhighlight> | |||