JavaScript Lesson 2: JavaScript Basics

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

<Previous Lesson> [Table of Contents] <Next Lesson>

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 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 one-line JavaScript code:

document.write(' Welcome to JavaScript Tutorial')

Save this JavaScript file with an extension .js in a folder of your choice. We advice you to create a particular folder to store all your JavaScript files for this tutorial. You can access the JavaScript file from an 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
<!DOCTYPE html>
<html>
<head>
<title>My first JavaScript</title>
</head>
<body>
<h1>Hotel Name=<b id=”hotelname”></b></h1>
<h2>Rooms Available=<b id=”rooms”></b></h2>
<script src=”welcome.js”></script>
</body>
</html>

The output is a one line sentence that shows

Welcome to JavaScript Tutorial

2.2 Embedding JavaScript in a Webpage

You can also embed a JavaScript within an HTML document. To embed the JavaScript into an HTML document, we use the HTML <Script></Script> tags, as follows:

<Script  language=”JavaScript”>

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. The value in our case would be “text/javascript” since we want to use the JavaScript. However, it is not necessary to use this attribute. We explain this since there are still many old text book that use the type attribute. Let me illustrate in the  example below:

Example 2.2
<html>
<head>
<title>My FirstJavaScript</title>
</head><body>
<script type = “text/javascript”>
document.write( “<b> Welcome to JavaScript Tutorial </b>” );
</script>
</body>
</html>

2.3 The Basic Structure of JavaScript

JavaScript’s script comprises a series of statements that enables a webpage to perform certain tasks, such as to display a sentence on your browser. We can take a look at Example 2.3 (Don’t worry about the code yet).

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. 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 ;. so, 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 type = “text/javascript”>
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>

Click  Example 2,4 to view the output

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



<Previous Lesson> [Table of Contents] <Next Lesson>

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone