C C T B H P N

JavaScript Demo1 - Core Language

In this, and the following JavaScript demo pages, we are executing functions from a JavaScript Library, designed to enable well formatted text output from scripts. A lot of what you will see in these demos is a combination of script code in a <pre> element and output of that code, contained in a <script> element in the viewed page. You can view the JavaScript used in this page by right-clicking and selecting "View Page Source". Most of that code uses functions from a JavaScript library I wrote for these demos: JavaScriptDemoScript.js.

Styles:

indented text
colored text

Scripts:

Types and Variables:


Undefined:
Null:
Boolean:
Number:
Reference:
string:
Array:
Object:
Function:

All value types occupy a fixed size in memory and come and go as functions are called and return. Reference types are garbage collected. They are created with the keywork "new" when calling a constructor function (more about that later) or for objects, arrays, and strings can be created from literals. Reference types live in a JavaScript managed heap.

/* ----------------------------------------------------------
  * Set event handler
  */
function setHandler(id, event, handler) {
  var elem = find(id);
  if (elem === undefined)
    return;
  elem.addEventListener('click', handler, false /* don't use capture */);
}
<div id="button" class="buttonNoPress">
  Click me
  <script>
    // need an anonymous function to provide clickEvent with its argument
    var wrappedHandler = function () { clickEvent(this); };
    setHandler('button', 'click', wrappedHandler);
  </script>
</div>


Events:

There are UI, Keyboard, Mouse, Focus, and Mutation Events

Click me
Code on the right shows how an event handler function was attached to the button's click event.
If you put scripts anywhere in the body of the document before its end, the script won't have the complete document to process. That's why it is common to put scripts at the end or trigger them from a body "onload" event.