JavaScript

*Were you looking for Java (programming language)?*

**JavaScript** (often shortened to JS) is an Event and Function based programming language created by the Netscape development team on December 4th, 1995. It is seen as one of three major building blocks of web development, along with HTML and CSS.

## Functionality

JavaScript uses curly-bracket and dynamically typed syntax similar to Java. It can be categorized as an "event and function based" programming language. It allows for things such as customs variables (`var`), strings (`" "`), basic or complex math, and much more. A basic math problem could be something such as `2 + 2;`, but can be more complex in general with combining numbers. Some boolean operations are allowed in addition to the basic functions.

### Examples

#### Alert function example

You can make custom alerts on web pages by adding the following code: `alert("Hello world!");`, which would make Hello world! appear in the alert. The two `" "` that the text rests in is what defines a string.

#### Custom variables

JavaScript allows programmers to add their own variables as well. An up-to-date version of a pre-written code will be presented below, which detects a logged in wiki users username.

```
;(function (window, $, mw) {
 'use strict';
 var username = mw.config.get('wgUserName');
 if (
 !username
 ) {
 return;
 }
 window.disableUsernameReplace = true;
 var $rail = $('#WikiaRail'),
 customSelector = window.UsernameReplaceSelector
 ? ', ' + window.UsernameReplaceSelector
 : '';
 function inputUsername($content) {
 $content.find('.InputUsername, .insertusername' + customSelector).text(username);
 }
 mw.hook('wikipage.content').add(inputUsername);
 if ($rail.hasClass('loaded')) {
 inputUsername($rail);
 } else if ($rail.length) {
 $rail.on('afterLoad.rail',
 $.proxy(inputUsername, null, $rail)
 );
 }
})(window, jQuery, mediaWiki);

```

Now another code (`Hello, <span class="InputUsername">anonymous user</span>!`) could be used to present the following text:

Hello, anonymous user!
#### Advanced

The following code can serve multiple functions in JavaScript.

```
/\* Finds the lowest common multiple (LCM) of two numbers \*/
function LCMCalculator(x, y) { // constructor function
 let checkInt = function(x) { // inner function
 if (x % 1 !== 0)
 throw new TypeError(x + "is not an integer"); // var a = mouseX

 return x;
 };

 this.a = checkInt(x)
 // semicolons ^^^^ are optional, a newline is enough
 this.b = checkInt(y);
}
// The prototype of object instances created by a constructor is
// that constructor's "prototype" property.
LCMCalculator.prototype = { // object literal
 constructor: LCMCalculator, // when reassigning a prototype, set the constructor property appropriately
 gcd: function() { // method that calculates the greatest common divisor
 // Euclidean algorithm:
 let a = Math.abs(this.a), b = Math.abs(this.b), t;

 if (a < b) {
 // swap variables
 // t = b; b = a; a = t;
 [a, b] = [b, a]; // swap using destructuring assignment (ES6)
 }

 while (b !== 0) {
 t = b;
 b = a % b;
 a = t;
 }

 // Only need to calculate GCD once, so "redefine" this method.
 // (Actually not redefinition—it's defined on the instance itself,
 // so that this.gcd refers to this "redefinition" instead of LCMCalculator.prototype.gcd.
 // Note that this leads to a wrong result if the LCMCalculator object members "a" and/or "b" are altered afterwards.)
 // Also, 'gcd' === "gcd", this['gcd'] === this.gcd
 this['gcd'] = function() {
 return a;
 };

 return a;
 },

 // Object property names can be specified by strings delimited by double (") or single (') quotes.
 lcm: function() {
 // not using |this.a\*this.b| to avoid FP precision issues
 let lcm = this.a / this.gcd() \* this.b;

 // Only need to calculate lcm once, so "redefine" this method.
 this.lcm = function() {
 return lcm;
 };

 return lcm;
 },

 toString: function() {
 return "LCMCalculator: a = " + this.a + ", b = " + this.b;
 }
};

// Define generic output function; this implementation only works for Web browsers
function output(x) {
 document.body.appendChild(document.createTextNode(x));
 document.body.appendChild(document.createElement('br'));
}

// Note: Array's map() and forEach() are defined in JavaScript 1.6.
// They are used here to demonstrate JavaScript's inherent functional nature.
[
 [25, 55],
 [21, 56],
 [22, 58],
 [28, 56]
].map(function(pair) { // array literal + mapping function
 return new LCMCalculator(pair[0], pair[1]);
}).sort((a, b) => a.lcm() - b.lcm()) // sort with this comparative function; => is a shorthand form of a function, called "arrow function"
 .forEach(printResult);

function printResult(obj) {
 output(obj + ", gcd = " + obj.gcd() + ", lcm = " + obj.lcm());
}

```

## References

1. ↑ https://web.archive.org/web/20070916144913/http://wp.netscape.com/newsref/pr/newsrelease67.html