Media Notes / JavaScript

And no, it wasn't invented by wizards. Not in this world, at least.

JavaScript (often abbreviated as JS) is a dynamically typed, prototyped-based, object-oriented Programming Language. JavaScript is one of the core web technologies, along with HTML and CSS. It is used in almost every website as a way to provide interactive content, communicate with backend services, and arbitrarily manipulate the DOM^note Domain Origin Model, a programming interface for web documents. Even this very wiki uses JavaScript for features such as the ability to open and close folders. More recently, JavaScript has become a popular choice for both client-side (frontend) and server-side scripting (backend) with React and Node.js respectively, and for writing non-browser applications.

You can try out JavaScript in your browser by going to View > Developer > JavaScript Console if you're on desktop or go to a mobile friendly editor.

History

When browsers were first introduced, they could only display static, non-interactive webpages. Netscape decided to change this by collaborating with Sun Microsystems to add Java applets to their webpages, but soon Netscape decided that the best course of action was to create their own language. JavaScript was first released in the Navigator browser in 1995.

---

Code Examples

Hello JavaScript

console.log("Hello World!");

Outputs Hello World to console or command line depending on the environment. Single quotes can also be used for strings.

Variable Declaration and Concatenation

let a = 10;
let b = 7;
let c = "Bob";
console.log(a + b);
// Outputs 17
console.log(b + c);
// Outputs 7Bob
console.log("Hello, " + c);
// Outputs Hello, Bob

Although it is possible to declare variables without the 'let' keyword, it's not recommended because declaring variables in that way always makes it a Global variable regardless of context and that can lead to errors.^note Sometimes, older programs will use 'var' instead of 'let' but most recommend let now. See here why you should use let.

For Loops

for(let i=0;i<10;i++){
    console.log(i);
}

JavaScript uses a common C-like for loop. This style is used in most languages.

The Event Loop

When you write a program like this:

---

let n = 0;
while(true){
    console.log("I have run "+n+" times!");
}

You might expect that the program will output an infinite amount of numbers but what you might not expect is that this program will at best, force you to close a tab, and at worst, Force You To Restart Your Entire Computer.

DOM Manipulation

Note that this only works if JavaScript is in a browser environment!

A Title Change is Needed

document.getElementsByTagName('h1')[0].innerText = "I'm In!"
// Changes the text of the first h1 tag to I'm In!

This program, if run on this webpage, will change the title of this article to I'm In!. If JavaScript cannot find the target element however, it will throw an error.

Changing Fonts

let all = document.getElementsByTagName("*");
let n = all.length;
for (let k = 0; k < n; k++) {
    all[k].style.fontFamily = '"Comic Sans MS", "Chalkboard"';
}

This is an example of JavaScript changing properties of all the elements in the page.

Works that use/are written in JavaScript

Websites

• TV Tropes. In addition to the stuff discussed above, TVTropes uses JavaScript for the following features, among other things:
  • Displaying notes when clicked.
  • Adding and dropping threads from watchlists.
  • Powering launching and discarding in TLP.
  • Replying to queries in Ask The Tropers, You Know That Show, and so on.
  • Forum previews.
  • Toggling spoilers on and off.
  • Toggling dark mode, wide load, and avatar settings.
  • To display notes, make spoiler tags work, and make options like dark-mode and wide load work.
  • To delete your account.
  • To allow you to subscribe to our ad-free service.
• The Other Wiki, and users of MediaWiki can even write custom JavaScript code to be executed in the browser.

---