Lesson 2: JavaScript Basics

Learn how to create JavaScript files, embed them in webpages, and use fundamental document methods.

❮ Previous Lesson Next Lesson: JavaScript Dialog ❯

2.1 Creating a JavaScript

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 Notepad, WordPad or FrontPage. However, we encourage you to use Notepad++ which you can download for free.

JavaScript files are saved with the .js extension. You can create them in any text editor and link them to your HTML documents.

Launch Notepad++ and enter the following code:

document.write('<strong>Welcome to JavaScript Tutorial</strong>')

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.

Try It Yourself

Enter your own message below and see how it would appear using the document.write method:

JavaScript Editor
document.write('Your message here');
Output will appear here

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 welcome.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 as follows:

Welcome to JavaScript Tutorial

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>
// JavaScript 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 the example below:

Example 2.2

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

Interactive Demo

Click the buttons to see different ways to embed JavaScript:

Output will appear here

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 the greeting message on your browser based on the local time, as shown in 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';
}

document.write(greeting);

The greeting message is as shown below:

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.

Time-based Greeting Generator

Adjust the time to see different greeting messages:

Good Afternoon

2.4 The write and writeln Methods

JavaScript comprises many objects, one of them is the document object and each object is associated with a method. The document object is associated with the write() method. The write() method writes HTML expressions or JavaScript code to a document. The syntax to write an HTML expression on the webpage is as follows:

document.write(HTML Expression)

Another method associated with the document object 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>
Every statement in a JavaScript must end with a semicolon ;

The output

Displaying text with the write method The following sentence appear on the same line 
Displaying text with the writeln method
The following sentence appear on a new line

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

Write vs. Writeln Comparison

See the difference between write and writeln:

Output will appear here
❮ Previous Lesson Next Lesson: JavaScript Dialog ❯