JavaScript Tutorial JavaScript Examples CSS Tutorial HTML Tutorial About Us

Lesson 2: JavaScript Basics


2.1 Creating a JavaScript

The JavaScript is a plain text file similar to HTML or CSS files. To create a JavaScript, you can use any standard text editors such as the Notepad, WordPad or FrontPage. However, we encourage you to use Notepad++ which you can download it for free. Now, launch Notepad++ and enter the following  code:
document.write(' Welcome to JavaScript Tutorial')
Save this file with an extension .js in a folder of your choice. We advise you to create a particular folder to store all your JavaScript files for this tutorial. You can access the file from a webpage by using the HTML <script></script> tag. Let's say you save the aforementioned file with the name welcom.js, you can access this file by linking it from a webpage as shown in Example 2.1.

Example 2.1

<html>
<head>
<title>My first JavaScript</title>
</head>
<body>
<script src="welcome.js"></script>
</body>
</html>

The output is a one-line sentence that shows

2.2 Embedding JavaScript in a Webpage

You can also embed the JavaScript within an HTML document using the HTML <Script></Script> tags, as follows:

<Script>
Statements
</Script>

The <Script></Script> tags tell the web browser that the content in between is actually part of a script. In addition, you can also specify the "type" attribute of the script tag. Let's examine  example below:

Example 2.2

<html>
<head>
<title>My FirstJavaScript</title>
</head><body>
<script>
document.write( "<b> Welcome to JavaScript Tutorial </b>" );
</script>
</body>
</html>

2.3 The Basic Structure of a JavaScript

A JavaScript  structure comprises a series of statements that enables a webpage to perform certain tasks, for example,  to display a sentence on your browser. We can take a look at Example 2.3 .

Example 2.3<

CurDate=new Date();
timeNow=CurDate.getHours();
var greeting;
if (timeNow>18) {
greeting='Good Evening';
} else if(timeNow>12){
greeting='Good Afternoon';
} else if(timeNow>0) {
greeting='Good Morning';
} else {
greeting='Good Day';
}
greeting=greeting.fontcolor("red");
greeting=greeting.bold();
greeting=greeting.fontsize("10");
greeting=greeting.italics();
document.write(greeting);
The curly bracket { } indicates the start and end of a JavaScript code block. Each statement is separated by a semicolon. The JavaScript code usually includes objects and their associated methods. Let's explore the document object and its write and writeln methods.

2.4 The write and writeln Methods

document is an object in JavaScript and write is a method that displays text in an HTML document. The statement must end with a semicolon ;. Therefore, document.write displays the text enclosed in the brackets on the HTML document. Another method to display text HTML document is the writeln method. Write and writeln are basically the same, except that writeln appends a new line at the end of the text. Writeln has to be used together with the <PRE> or <TEXTAREA> tags. Let me illustrate the difference with the following example:

Example 2.4

<html>
<head>
<title>Write and Writeln</title>
<script >
document.write( "<pre><b>Displaying text with the write method</b>" );
document.write( "<b> The following sentence appear on the same line </b></pre>" );
document.write("<hr>");
document.writeln( "<pre><b>Displaying text with the writeln method</b>" );
document.writeln( "<b>The following sentence appear on a new line </b></pre>" );
</script>
</head><body></body>
</html>
The output

Note: document.write("<hr>"); add a horizontal line across the web page


❮ Previous Lesson Next Lesson ❯


Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy