Starting JavaScript -Introduction for Beginners

Many of the features you see on Web Pages like form checking, PopUps etc are not HTML features, but are created by using JavaScript.

What is JavaScript?

JavaScript is an interpreted language; meaning that the computer evaluates the commands before it executes them. The commands themselves are human readable.

JavaScript script commands are mixed with HTML commands, and are interpreted by the web browser.

Most modern web browsers have support for JavaScript but this support can be disabled/enabled for security reasons.

What You can do with JavaScript

  • Validate user data entry
  • Write dynamic HTML/XHTML
  • React to events like on page load on mouse over.
  • Set Cookies on the user machine

Adding JavaScript to a Web Page

As a website owner/builder you will probably never write your own scripts but you may need to use scripts on your pages.

To insert JavaScript into a web page you use the script tags as shown  below:

<SCRIPT>

JavaScript code goes here

</SCRIPT>

In order to hide the script from browsers that don’t understand JavaScript the script code is usually enclosed in comment tags. The comment tags are here shown in red:

<!–This is a comment enclosed in tags //–>

The code would now look like this:

<SCRIPT>

<!–

JavaScript code goes here//–>

</SCRIPT>

Notice the position of the comment tags they are inside the script tags. A common mistake is to enclose everything in comment tags which means your script gets completely ignored.

In addition for browsers that don’t understand JavaScript (not many today) what will they see.. Not the results of the script!

To cater for these it is normal to use the NOSCRIPT tag as follows:

<NOSCRIPT>

Your browser doesn’t support scripts so you are missing this functionality you should upgrade your browser if you want to see what is really here.

</NOSCRIPT>

Note: Due to the fact that all modern browsers support JavaScript then this is seldom seem in modern web pages.

Specify the Scripting Language

Although we are only discussing  JavaScript here, it is also possible to use VB script (Microsoft only).

Most web browsers will use JavaScript as the default scripting language but you should specify it anyway.

There are two methods of doing this:

You can specify it inside the opening script tag as follows:

<SCRIPT language=”Javascript” type=”text/javascript”>

<!–

JavaScript code goes here//–>

</SCRIPT>

or you can specify it for the entire page by using a meta tag as follows:

<META HTTP-EQUIV=”Content-Script-Type”  CONTENT=”text/javascript”>

which is placed at the top of the document between the header tags.

Implementing Scripts

Scripts are run when the script is read by the web browser,which means that the script must be located at the correct point in the HTML document.

You place it at the beginning if it is to be executed first, and at the end if it is to be executed last etc.

The example below shows  script code inserted into the HTML document (highlighted) so that it prints out between two lines on plain HTML.

<html><head><title>JavaScript Example</title></head><body>This is normal HTML line 1<BR>

<SCRIPT language=”Javascript” type=”text/javascript”>

<!–

document.write(“this is text printed by a script line 2 “+”<BR>”)

//–>

</SCRIPT>

This is normal html at the end line 3 <BR>

</body>

</html>

Internal And External Scripts

The script shown above was inserted directly into the HTML.

This is an internal script, and this form is commonly used for inserting small scripts.

Large scripts are usually placed into an external file . This has the advantage that the script is:

  • Effectively hidden from the user and search engines.
  • Can be used by other web pages.

Here is the example above replaced with an external script. Here is the html page:

<html><head><title>JavaScript Example</title></head><body>This is normal HTML line 1<BR>

<SCRIPT language = ” JavaScript” type= “text/javascript” src=”external.js”>

</SCRIPT>

This is normal html at the end line 3 <BR>

</body>

</html>

and here is the external.js file

document.write(“this is text printed by a script line 2 “+”<BR>”)

In this case the external file is only one line but it can be many hundreds.

The external file (script) is often on the internet an will be automatically downloaded by the web browser.

WordPress and JavaScript

WordPress themes and plugins make extensive use of JavaScript.

However you cannot add JavaScript code to a WordPress webpage using the WordPress editor.

Summary

JavaScript is a essential part of most web pages and especially web based applications.

Although you don’t meed to become a JavaScript programmer  It is important that you understand how to add scripts to your site.

 

Resources:

Related Articles and Resources:

Did this Tutorial Help? Please Rate
[Total: 0 Average: 0]