Bits: Hello JavaScript

code, output, and build for JavaScript on Windows, macOS, and Linux

These pages support comparison of fragments of code in several different languages, much as you might compare a sentence of English with one in Spanish to help you learn Spanish or English.

Synopsis:

This page demonstrates use of Visual Studio Code to build and execute a simple JavaScript "Hello World" program, showing its build process. The purpose is to show how to get started quickly.

Companion pages for C++, Rust, C#, and Python are accessible from links in the fixed right panel.
Navigation through example levels for the same language is effected with the "Next" and "Prev" buttons in the menus or by using the "N" and "P" keys.
The links in the left panel point to major sections of this page and all of the Bits pages for JavaScript.

Note:
Most page links in this site refer to specific points in a target page, usually the top. For all of the code bits here, links return to the last scroll position. This supports quickly moving between similar code for each of the languages covered. That maintains context for comparisons.

Source Code - Js_Hello.html

Code below is a fragment taken from Bits Repository. You can download the repo containing code for all Bits by opening the "Code" dropdown in that page.

<!DOCTYPE html>
<html>
<!--
  Js_Hello.html
-->
<head>
  <script>
    function hello() {
         document.getElementById("hello").innerHTML = "<h2>Hello Javascript World</h2>";
    }
  </script>
  <style>
    body {
      font-family:'Comic Sans MS', Tahoma;
      padding:2em;
    }
  </style>
</head>
<body>
  <div id="hello"></div>
  <script>
    hello();
  </script>
</body>
</html>

Output

This is output from the JavaScript source code above, running in Firefox browser.

Hello Javascript World

Build

No explicit build process for JavaScript. On launch, source code is compiled to byte code that is interpreted in the JavaScript Virtual Machine.

local machine

C:\github\JimFawcett\Bits\Javascript\Js_Hello
> start firefox C:\github\JimFawcett\Bits\Javascript\Js_Hello\Js_Hello.html
C:\github\JimFawcett\Bits\Javascript\Js_Hello
>

github site

clone Bits repository and double click on Js_Hello.html

2.0 VS Code View

The code for this demo is available in github.com/JimFawcett/Bits. If you click on the Code dropdown you can clone the repository of all code for these demos to your local drive. Then, it is easy to bring up any example, in any of the languages, in VS Code.

Here, we do that for JavaScript\Js_Objects.

Figure 1. VS Code IDE - JavaScript Hello

Figure 2. Debugging JavaScript Hello

3.0 References

Reference	Description
JavaScript Tutorial - w3schools	Interactive examples
JavaScript Reference - MDN	Informal syntax reference
Bits Tooling	Tool chains, VS Code