Javascript basics
Javascript code can be declared in various places and can be used to print text as well as contain HTML tags.
This lesson 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
- Dealing with browsers that do not support Javascript
- Dealing with 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 tags type attribute. When working with Javascript, it should be set to "text/javascript"
Example:
<script type="text/javascript"> script contents go here </script>
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 content goes here </script> </head> <body> <script type="text/javascript"> script content goes here </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 of this script:
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 underlined text</i></b>");
</script>
</body>
</html>
Output:
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
Single line comments in Javascript are declared with two / symbols.
Example:
<html>
<head>
<title>Single line comments</title>
</head>
<body>
<script type="text/javascript">
//this is a single line comment
//this is another single line comment
</script>
</body>
</html>
NOTE: Single line comments can span only a single line.
Multi line comments
Multi line comments in Javascript are declared with a starting /* and an ending */
Example:
<html>
<head>
<title>Multi line comments</title>
</head>
<body>
<script type="text/javascript">
/*
here is a multi line comment
it will span multiple lines
this is the third line of the multi line comment
*/
</script>
</body>
</html>
NOTE: Multi line comments can span as many lines as you want.
Dealing with 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"> <!-- document.write("Here is some text."); //--> </script> </body> </html>
The output of this script:
Here is some text.
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"> <!-- document.write("You have Javascript enabled!"); //--> </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 which states "You do not have Javascript enabled" will be printed onto the page.
