Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Implementation

A good first step in learning JavaScript is learning its implementation.

Using the <script> element

The html <script> element is the document's gateway to JavaScript. Authors can place <script> elements in the <head> or <body> elements at will, which provides a fair amount of script placement options directly inside the document.

<!doctype html> <html> <head> <script> var who = "George"; var yrs = 2; var mySentence = who + " has been writing script for " + yrs + " years."; </script> </head> <body> <script> document.write( mySentence ); </script> </body> </html>

Binding external JavaScript to the document

You can choose to use the <script> element to bind an external JavaScript file and all of its code to your document. Most JavaScript authors prefer externalizing their code to call on functions waiting in the external file. Externalizing your code means you can reuse the same code on many different web pages, it makes your html code appear slimmer and cleaner, and it helps one in beginning to understand code compartmentalization. It is much like externalizing your CSS into a style sheet which makes it available to more than one document.

<!doctype html> <html> <head> <script src="myFile.js"></script> </head> <body> <script> document.write( mySentence ); </script> </body> </html> Binding external JavaScript files(myFile.js) to your document is essentially the same as having the code sitting right there in the document as in the first code example above. To make it work exactly as the first example, your external JavaScript file would need to have this code in it to be able to write "mySentence": var who = "George"; var yrs = 2; var mySentence = who + " has been writing script for " + yrs + " years.";

HTML element event attributes

Authors may use the many HTML event attributes to execute code directly in their HTML markup. Which is not best practice moving forward, but it works just fine when you need to use it.

<button onclick="alert('hello')">click me</button> <button onclick="alert('Bye'); window.close();">click me too</button>

JavaScript

Fundamentals

IntroductionImplementationFallback ContentDevelopment OutputSyntax GuidelinesVariablesFunctionsStatementsOperatorsEvent HandlingObjects