Author Topic: JavaScript - Running Code  (Read 82 times)

Offline Hooman

  • Administrator
  • Hero Member
  • *****
  • Posts: 4034
JavaScript - Running Code
« on: October 28, 2017, 01:14:10 PM »
Rather than just present a few JavaScript examples for people to look at, lets get in to actually running JavaScript code.

The first method, is to just use the browser. The browser already has a built in JavaScript engine, so no need to download any additional tools. You can access Developer Tools in most browsers by pressing F12. Feel free to do so from this page, it won't interrupt your browsing. The Developer Tools pane should appear at the bottom or side of the window. Pressing F12 again will close it. The "Console" tab of the developer tools allows you to enter JavaScript directly, which will run the code immediately and display the results.






For demo purposes, here's some sample JavaScript code. It's just a quick run through of a few basic JavaScript data types.

script.js:
Code: JavaScript [Select]

console.log("Hello World!");

var x = 2;
var y = 3;
console.log("x + y =", x + y);  /* 5 */

function f(a, b) {
  return a * b;
}
console.log("f(x, y) = ", f(x, y));   /* 6 */

var arr1 = [10, 11, 12];
var arr2 = [13, 14, 15];
var arr3 = arr1.concat(arr2);
console.log("arr3 = ", arr3);   /* [10, 11, 12, 13, 14, 15] */
console.log("arr3[0] =", arr3[0]);  /* 10 */
console.log("arr3[1] =", arr3[1]);  /* 11 */
console.log("arr3[2] =", arr3[2]);  /* 12 */

var obj = {
  prop1: "some string",
  prop2: 10,
  prop3: [3, 5, 7],
  prop4: f,
  prop5: {
    a: 1,
    b: 4,
    x,  /* shorthand for 'x: x' */
    y   /* shorthand for 'y: y' */
  }
};
console.log("obj = ", obj);
console.log("obj.prop5.y = ", obj.prop5.y);

console.log("typeof x =", typeof x);      /* number */
console.log("typeof 'Hello World!' =", typeof 'Hello World!');  /* string */
console.log("typeof f =", typeof f);      /* function */
console.log("typeof obj =", typeof obj);  /* object */
console.log("typeof [] =", typeof []);    /* object  (Array is an 'object') */


You could type, or copy/paste that into the Developer Tools Console. It would work. Though it's not much of a way to develop longer code. Instead, you could download, paste, or write code into a JavaScript file. The browser can't run just a raw JavaScript file though. It needs to be embedded into or linked from a page to run. Here's a minimal structure for an HTML page:

minimal.html:
Code: [Select]
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Minimal HTML Host for JS</title>
    <script src="script.js"></script>
  </head>
  <body>
  </body>
</html>

It's a blank page, with nothing to display, but serves as an adequate host for running some JavaScript. It contains a script tag, which links to the JavaScript file. These two files can be opened locally in a web browser (Linux screenshot):




If you have the Developer Tools Console open, you'll see the result of running the script when you load the page:





For more info on Developer Tools:
Chrome Developer Tools
Firefox Developer Tools
Explorer Developer Tools



Script files attached below.


« Last Edit: October 28, 2017, 01:44:39 PM by Hooman »

Offline Hooman

  • Administrator
  • Hero Member
  • *****
  • Posts: 4034
Re: JavaScript - Running Code
« Reply #1 on: November 06, 2017, 05:01:26 PM »
Another method for running JavaScript, is to use a standalone JavaScript runtime environment, such as NodeJS. This package includes the same JavaScript engine used in the Google Chrome browser. It allows you to run JavaScript programs from the command line, or even using it as an interactive console.

Running nodejs script.js will execute the named script file.



Running nodejs without parameters brings up the interactive console.





NodeJS can be used to run unit tests on JavaScript code. This can be done outside of the browser, in a fully automated way. With the right tooling, you can even watch your source code files for changes, and automatically re-run tests when you save changes. This gives you instant feedback on whether or not your changes broke any of your tests, or contain any syntax errors.

There are some differences between the NodeJS environment, and that of a browser. For most code, this doesn't matter so much. Browser code is often surprisingly not very dependent on the browser. Often there will be mock libraries available to paper over the differences for testing browser code with NodeJS.

One example difference between NodeJS and a browser is the lack of a "window" object, which gives access to an HTML page and other aspects of a browser window. Another difference is the NodeJS environment provides access to things like filesystems and network sockets; the kind of stuff you need for system level scripts, but would want to prevent access to in a browser for security reasons. With NodeJS, you are controlling what scripts are being run on your computer. In a browser, those scripts are coming in from over the internet, and so can't be allowed to provide such access.

With NodeJS you also have access to "npm" (the Node Package Manager), which provides a huge collection of JavaScript libraries, with easy one-line install of new project dependencies, update of all project dependencies, or re-install of all project dependencies on a new development machine.