Liew Voon Kiong, Author at JavaScript tutorial

Document Object and its Methods and Properties

JavaScript uses objects and methods to display output on a webpage. One of the most commonly used objects is document. The document object uses the write method to create new content on a webpage. Method is also known as a member of the document object. To access the write method, we use a dot to link the document object with its write method, as follows:
document.write(‘text’);

Besides methods, the document object also has properties. One of the properties is bgcolor that determines the background colour of a webpage. The syntax to access the properties is the same as the syntax to access the method.

For example,

document.bgColor = “cyan”;
produces a webpage with cyan background.

Writing a JavaScript

Writing a JavaScript is very simple, you do not need a special program to create a JavaScript, what you need is a simple text editor like Notepad. However, a better editor is Notepad++, which is available online for free. Click to download https://notepad-plus-plus.org/download/v6.9.html.

You can either embed a JavaScript in a HTML document or you can create a JavaScript file and then reference it in a HTML document using the keyword SRC.

For example, you can embed the text “Welcome to my tutorial” in the following HTML document

<!DOCTYPE html>

<html>
<head>
<title>JavaScript Demo 1</title>
</head>
<body>
<h1>JavaScript Demo 1</h1>
<Script type=”text/javascript”>
document.write(‘<h2>Welcome to my tutorial></h2>’);
</script>
</body>
</html>

Alternatively you can create a JavaScript file and referencing it from a HTML document, as follows:

Open notepad and enter the following line

document.write(‘<h1>Welcome to my tutorial</h1>’)

save the file as j01.js and save it in the folder jscript

Now use notepad to create the following HTML file

<html>
<head>
<title>Javascript Demo 1</title>
</head>
<body>
<h1>JavaScript Demo 1</h1>
<script src=”jscript/j01.js”></script>
</body>
</html>

The <script> element is used to load the JavaScript file into the page using the attribute src, which link to the path of the script that we have created.

Comparing the two methods, it is always better to create the JavaScript file than embedding it into the HTML document as it made debugging simpler. If errors occur you just need to edit the JavaScript file. Further, you can reuse the script in another part of the document or other HTML documents.

Creating a Slideshow in JavaScript

To create the JavaScript slideshow, first of all you need to create a few images using some graphics tools, or you can snap some photos with your digital camera or your smartphone. In our example, we have created four images and we named them as banner1.jpg, banner2.jpg, banner3.jpg and banner4.jpg. Save the images in the same folder as the HTML file slideshow.htm which will be used to show the slides.

What is Function in JavaScript?

What is function in JavaScript? A function is a type of program, or part of the program, that can be called from the main JavaScript program to perform certain tasks. We can also define a function as a module of the main JavaScript program. A professionally written JavaScript program usually consists of numerous functions. It is easier to construct , debug and maintain a large program that make up of smaller modules, because the programmer needs only debug a module or modules if certain errors occur, instead of having to search for the whole program and trying to locate the error code.

Creating Events in JavaScript

What is an event? Any action that triggers the execution of JavaScript program code is called an event. Events are usually triggered by the web users. For example, clicking the mouse is an event, dragging the mouse over a hyperlink is also an event. There are three categories of events or rather event handlers in JavaScript, namely events associated with forms, events associated with links and events associated with windows.