The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

Introduction To JavaScript

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines

What Is JavaScript?

24-Oct-2014: The JavaScript on these pages has been updated to reflect modern scripting techniques.

JavaScript is a wonderfully rich 'scripting' language that adds programmable interaction to a web page. It design is based on the 'C' programming language and the primary reason that it is not called a programming language is because it typically operates within the confines of a 'sandbox', in this context, a web browser. An similar example of a scripting language is VBScript which primarily operates within the confines of the Microsoft Office suite of programs.

JavaScript is often confused with the programming language 'Java' so it is worth noting that the scripting language JavaScript was originally developed by Netscape Communications Corporation whereas the programming language Java was developed by Sun Microsystems and they are different entities. You all too often see the term 'Java Script' used in relation to JavaScript but this is incorrect terminology because the term 'Java' can only relate to the Java programming language. The correct equivalent terminology in relation to JavaScript is 'JavaScript script' and the incorrect usage of these terms is very much the mark of the 'newbie' to the subject.

In the context that we are talking about here, JavaScript is an HTML (Hyper-text Markup Language) extension language which means that it adds programmable like interaction to HTML Markup and the following section provides a real-time example of JavaScript user interaction.

A JavaScript Example ...

We have created this example to demonstrate using JavaScript to add user interaction to a standard HTML link. If you click on the link you should see a JavaScript 'Confirm' popup asking you to confirm that you want to load the new page. If you click 'OK' then the new page will be loaded and if you click 'Cancel' then the new page will not be loaded. Incidentally, we have intervened in the script to make the target page load into a new browser window, above this browser window. When the target page has loaded and you understand the demonstration you can either close the new window or switch back to this window to continue studying this tutorial.

Click this link for an example of user interaction ...

Note:  The new target page is our 'JavaScript Alert/Confirm/Prompt' tutorial which is well worth studying in relation to this tutorial, once you have grasped the issues discussed on this page.

How Is It Done?

Because this tutorial is aimed at newcomers to JavaScript we have provided a 'complete' basic web page that includes the HTML link, located in the BODY section of the page and a JavaScript section, located in the HEAD section of the page. You can copy/paste the Markup into your text editor (or better still, type it in for reinforcement) and then save the page with an '.html' extension. You should then be able to load the page into your browser to see it working and edit/test the Markup to explore different ideas for yourself. You will have to provide your own URL to replace our page URL in the ANCHOR Href attribute (the <a href=""> tag) and this can be a page on your own hard-drive or any Web Address.

The JavaScript section is rather verbose and you could achieve the same result with a lot less scripting. However, if we excluded the comments and crunched the script into one or two lines then you would probably find the whole thing difficult to understand. When you are learning JavaScript it is better to write scripts in this manner because you can better understand what the script is doing.

A complete basic web page with the JavaScript highlighted in red ...

<html>

<head>

	<title>Web-Wise-Wizard - JavaScript User Interaction Demo</title>
	
	<script type="text/javascript">
	<!-- HIDE FROM OLD BROWSERS

	function ckeckOkToLoad(link) {

		// THE '\n' AT THE END OF THE FIRST MESSAGE LINE CAUSES
		// THE NEXT PART OF THE MESSAGE TO START ON A NEW LINE
		var message = "Please confirm that it is OK to load this page\n";

		// NOTE THAT THIS LINE ADDS THE TARGET PAGE ADDRESS TO THE MESSAGE
		message += link.href;

		// THIS LINE INVOKES THE INBUILT JAVASCRIPT CONFIRM FUNCTION
		if (confirm(message) == true) {
			return(true);
		} else {
			return(false);
		}

		// A SHORTHAND WAY TO PRODUCE THE SAME RESULT WOULD BE
		// 'return(confirm(message));'
	}

	// END HIDING -->
	</script>
	
</head>

<body>

<h2>Web-Wise-Wizard - JavaScript User Interaction Demo</h2>

<p><a href="javascript-popup-alert-confirm-prompt.html" onclick="return(ckeckOkToLoad(this))">
JavaScript Popup Boxes Tutorial</a></p>

<p>You should note that it is the 'onclick' Attribute that creates the JavaScript extension to the 
HTML ANCHOR Tag (hyper-text link).</p>

</body>

</html>
 
+++ JavaScript Errors +++
At the source of every error which is blamed on JavaScript you will find at least two human errors, including the error of blaming it on JavaScript.
 

Depreciation Warning ...

You are likely to come across many references to the SCRIPT Language Attribute. In common with many other HTML Tags and Attributes, W3C have now depreciated the SCRIPT Language Attribute and it should not be used. I have provided examples of both old style SCRIPT Tags and the new style of SCRIPT Tag that you should now use. For future reference only, you should note that the TYPE attribute refers to the MIME type of the contents of the Tag.

Examples of the old style SCRIPT Tag now depreciated ...

<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>

-- or --

<script language="JavaScript1.2" type="text/javascript">
</script>

The SCRIPT Tag should no longer include the Language Attribute ...

<script type="text/javascript">
</script>
 

Validation And Accessibility ...

Added March, 2014

The latest web standards also require you to include the following META Tag in the HEAD section of your web pages that contain any JavaScript scripts. This META Tag tells User Agents and page validators that the page contains JavaScript scripting and you will note the use of the MIME Type Content attribute in a similar manner to the JavaScript SCRIPT Tag.

<meta http-equiv="Content-Script-Type" content="text/javascript">
 

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - Introduction to JavaScript This simple but carefully written tutorial is ideal for those who are new to JavaScript and we have provided a demonstration to show you how you can use JavaScript to add interaction to an HTML link.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
JavaScript Beginners Tutorials
 
 
 
 
 
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England