Javascript basics

Javascript code can be declared in various places and can be used to print text as well as contain HTML tags.

This tutorial focuses on:

Declaring a script within a webpage
Declaring a script in an external file
Printing text on a webpage
Including HTML tags in a script
Including comments in a script
Handling browsers that do not support Javascript
Handling browsers that do not have Javascript enabled

Declaring a script within a webpage

A javascript script is declared using HTML's <script> tag. This tag denotes that there will be a script on a webpage, and the scripting language that will be used in the script is denoted by this tag's type attribute. When working with Javascript, it should be set to "text/javascript"

Example:

A script can be placed in the head section or the body section of a webpage, but a script will be executed differently depending on where it is placed.

A script placed in the head section of a webpage

A script placed in the head section of a webpage will be executed when it is called, or when certain events are triggered such as the clicking of a button or when a form is submitted.

Example of a script placed in the head section of a webpage:

<html> <head> <title>Javascript script in the head section</title> <script type="text/javascript"> script content goes here </script> </head> <body> </body> </html>

A script placed in the body section of a webpage

A script placed in the body section of a webpage will be executed when the page loads. A script placed in the body section of a webpage generates the content of the page.

Example of a script placed in the body section of a webpage:

<html> <head> <title>Javascript script in the head section</title> </head> <body> <script type="text/javascript"> script content goes here </script> </body> </html>

You can have as many scripts on a webpage as you want, this includes both scripts in the head section and the body section of a webpage.

Example:

<html> <head> <title>Javascript script in the head section</title> <script type="text/javascript"> </script> </head> <body> <script type="text/javascript"> </script> </body> </html>

Declaring a script in an external file

An external file in which a script is declared should have a .js extension. This file will be included within the source code of a webpage. An external script is called by the <script> tag using its src attribute. The advantage to using external scripts is that you can include the same script(s) on several pages without having to rewrite them.

Example:

<html> <head> <title>External scripts</title> <script type="text/javascript" src="script1.js"></script> </head> <body> </body> </html>

In this example, the <script> tag calls the external script named script1.js.

NOTE: External scripts cannot contain the <script> tag!

Printing text on a webpage

Printing text on a webpage is accomplished with the document.write() command.

Syntax:

document.write("textToPrint");

Example:

<html> <head> <title>Printing text</title> </head> <body> <script type="text/javascript"> document.write("Here is some text"); </script> </body> </html>

Output:

Here is some text

You may have noticed the semicolon at the end of the line of code document.write("Here is some text");. In Javascript, semicolons at the end of statements are optional, unlike some languages such as Java and C++. However, semicolons are required if you put more than one statement on a single line.

Including HTML tags in a script

HTML tags can be included in a script using the document.write() command mentioned above. Any tags included in a script with this command will be interpreted by the web browser as regular HTML.

Example:

<html> <head> <title>HTML tags in scripts</title> </head> <body> <script type="text/javascript"> document.write("<b><i>Here is some bold italic text</i></b>"); </script> </body> </html>

Output:

Here is some bold italic text

Including comments in a script

Comments in Javascript are declared so that code would be easier to understand and navigate. Comments are not seen on a webpage, but only within the source code of a webpage. Comments can be placed anywhere within Javascript source code. In Javascript you can have single line comments and multi-line comments.

Single line comments in Javascript are declared with two / symbols. Multi-line comments are declared with a starting /* and an ending */

Example:

<html> <head> <title>Javascript comments</title> </head> <body> <script type="text/javascript"> //this is a single line comment //this is another single line comment /* here is a multi-line comment it will span multiple lines this is the third line of the multi line comment */ document.write("Here is some text") </script> </body> </html>

Output:

Here is some text

Handling browsers that do not support Javascript

There are older browsers still in use that do not recognize the <script> tag and consequently will not be able to execute scripts. In such a case, the content inside the <script> tag will be displayed on the page as regular text. To prevent this from happening, the content of a script can be placed within comment tags. In such a case, older browsers that do not recognize the <script> tag will ignore the script and the content inside the <script> tag will not be displayed on the page. Browsers that can execute scripts will ignore the comments and execute the script anyway.

Example:

<html> <head> <title>A script</title> </head> <body> <script type="text/javascript">  </script> </body> </html>

Output:

Here is some text

NOTE: The two forward slashes at the beginning of the line //--> are a JavaScript comment symbol. Using this comment symbol will prevent the line from being interpreted by the Javascript interpreter.

Handling browsers that do not have Javascript enabled

There may be a situation where a user is using a browser that supports Javascript, but currently has Javascript disabled. In such a situation, you can use HTML's <noscript> tag.

Example:

<html> <head> <title></title> </head> <body> <script type="text/javascript">  </script> <noscript> You do not have Javascript enabled. </noscript> </body> </html>

In this example, if Javascript is enabled then the script will execute and the message "You have Javascript enabled!" will be printed onto the page. If Javascript is not enabled, then the script will not be executed and the message found in the <noscript> tag will be printed onto the page.