Javascript

Introduction

I will not cover every aspect of Javascript but will create a quick cheatsheet of the fundamentals of the language, I will not be covering any web application frameworks, this will be pure Javascript tutorial.

Javascript first appeared in 1995, when Netscape decided to incorporate Javascript into webrowser it change the way web developers programmed as it offered many adavantages, over the years every major web browser now inacts with Javascript with every aspect of the browser window and its contents. Javascript is a full programming language which includes advanced features like closures, lambda, OOP and metaprogramming. Javascript is made up of three parts

The core (ECMAScript)
The Document Object Model (DOM)
The Browser Object Mode (BOM)

Note that ECMAScript is not tied to any web browser, ECMA-262 defines the langauge as a base upon which more-robust scripting lanaguage may be built, web browsers being one area, NodeJS (server-side platform) being another. There have been a number of Editions of ECMA-262 over the resent years, each brower and version of browser will be compliant to at least one of the editions below which means it will support the features of that ECMAScript edition.

Edition (ES)	Date Published	Name
6	June 2015	ECMAScript 2015 (ES2015)
7	June 2016	ECMAScript 2016 (ES2016)
8	June 2017	ECMAScript 2017 (ES2017)
9	June 2018	ECMAScript 2018 (ES2018)
10	June 2019	ECMAScript 2019 (ES2019)

Document Object Model (DOM)

The Document Object Model or DOM for short, is a programming interface for XML and HTML, the DOM maps out an entire page as a hierarchy of nodes, each node containg data. Below is a simple example of a HTML code that maps into a DOM hierarchy. The reason of the DOM is that it allows you to alter pieces of the DOM without having to reload the entire web page and thus reducing network load.

<html>
    <head>
        <title>Sample Page</title>
    </head>
    <body>
        <p> Hello World!</p>
    </body>
</html>

There are 3 DOM levels and particular browsers support a specific level.

Level 1 - core and html
Level 2 - core2 (extends core), views, events, style, traversal and range.
Level 3 - core3 (extends core2), load/save, validation, events amd xpath

I have a whole section on the DOM

Browser Object Model (BOM)

The Browser Object Model also know as the BOM, allows you access and to manipulate the browser window. HTML5 makes it easy to standardize the BOM between different browsers, you can do things such as below (not all listed here):

pop up new browser windows
move, resize and close windows
the navigator object provides details of the window
the location object details the loaded page
the screen object details the browser screen resolution
the performance object details browser memory consumption, navigational behavior, timming stats.
support for cookies

I have a whole section on the BOM

HTML and Javascript

Web Browsers uses the Hyper Text Markup Language (HTML) to display web pages, however HTML has a number of elements that it can use to call Javascript code, the code may change elements on a web page, wait for something to happen like click a button (event handler) before running the Javascript code.

The <script> element is the primary method to inserting Javascript into a HTML web page, there are two ways to incorporate Javascript into the HTML page.

<script> element	There are a number of options you can use with the script element, all are optional async - download script immediately but dont stop other actions on the page charset - the character set, many browser may not honor this value crossorigin - you can configure CORS for the request defer - you can defer execution of the script until the page is fully loaded and displayed integrity - allows for verification of Subresource Integrity (SRI), used by Content Delivery Network (CDN) src - the location of an external Javascript file type - replaces language and indicates the content type (MIME type) for example "text/javascript"
Embeded Javascript	<script> function sayHi() { console.log("Hi!"); } </script>
External File (best practice)	<script src="external_js_file.js"></script> <script src="http://www.datadisk.co.uk/javascript_code/external_js_file.js"></script>

A point to remember is where to place the script tag, traditonally it was placed in the head tag of the html page, however it is now common that the javascript code may need elements on the web page to perform some operation, if those elements have yet to be loaded into the DOM an error may occur, it is now commonly to place the script tags at the end of the html page. You can still place the code in the head and as I mentioned above there are options to indicate that the code won't be changing the web page (for example the defer option).

Its best practice to try and use external Javascript files this is because it easy to maintain and test code, browsers tend to cache externally linked Javascript files to increase performance and it furture proofs as inclduing the external file there is no need to use XHTML or comment hacks.