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

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

Example 2.2

<html>
<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 the greeting message on your browser based on the local time, as shown in Example 2.3.

Example 2.3

<script>
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);
</script>

The greeting message is as showns 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. Let's explore the document object and its write() and writeln() methods.

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

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

❮ Previous Lesson Next Lesson ❯