Learning JavaScript tutorial – First Look at Client-Side JavaScript

As we seen in our first article "Learning JavaScript – an introduction with JavaScript", JavaScript is mostly used as a client-side scripting language. With Client-side JavaScript, we are able to interpreter with the Document Object Model (DOM) of a web browser. On Client-Side, JavaScript add interactive features to your page. JavaScript allowing us to do plenty of tasks on Client-Side like mathematical calculations, form validation, drop down and sliding menus, message tickers, work with events, work with cookies, add special effects and animation, develop interactive games, customize graphics selections, and create security passwords and many more.

Embedding (using) JavaScript in HTML

Static Web pages are made using HTML. To use JavaScript on Client-Side, we need to embed JavaScript in an HTML document. Adding JavaScript to a web page is actually an easy task. We need to add JavaScript either in Body Section (between the <body></body> tags) or Head Section (between the <head></head> tags) of the web page.

HTML provides the script tag (script element) which is used to enclose a series of JavaScript statements that’s processed on the client side. We need to enclose JavaScript statements within the opening <script> and closing </script> tags. Some Browsers do not support JavaScript, will display JavaScript as page content. To overcome this issue just add an HTML comment tag <!– (start of comment) before the first JavaScript statement, and a –> (end of comment) after the last JavaScript statement.

The document.write() method ("Method" is the OOP term for function or procedure), which takes an argument contained in parentheses for writing output to a web page. Actually, document.write() and document.writeln() do not work in XHTML; XHTML documents that are rendered as XML, document.write() method’s output isn’t compatible with XML parsing requirements.

JavaScript code placed in another file

The best practice to embed JavaScript in a webpage is very simple. Just, place the entire JavaScript code in another JavaScript file and save it as a ‘fileName.js’. This external file can then be called using the SRC attribute of <script> tag.

JavaScript code with HTML tags

The real advantage of JavaScript on the client side is using it with HTML tags. JavaScript can handle not only the content of HTML web page but also the behavior of the documents. JavaScript program can respond by defining event handlers for the HTML tags which get executed when a particular event occurs, such as when the user clicks on a button. Check out this JavaScript sample code.

JavaScript sample code -Factorial

Now it’s time to implement script, Here we are going to generate Factorial of a given number. Take a look at code listed below…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Learning JavaScript tutorial - First Look at Client-Side JavaScript</title>
<script type="text/javascript" language="javascript">
<!–
function getFactorial()
{
var varNumber=document.getElementById("txtFactorial").value;
var varFactorial = 1;
for(i = 1; i <= varNumber; i++)
{
varFactorial=varFactorial*i;
}
alert(varNumber+"!="+varFactorial);
}
//–>
</script>
</head>

<body style="text-align:center;">
<h1>Learning JavaScript tutorial - First Look at Client-Side JavaScript</h1>
<h2>Learning JavaScript tutorial</h2>
<h3>JavaScript sample code -Factorial</h3>
<form name="frmMain">
<input type="text" name="txtFactorial" id="txtFactorial" value="5" />
<input type="button" name="btnClick" onclick="getFactorial();" value="Get Factorial!" />
</form>
</body>
</html>

In this JavaScript Factorial sample code, we have embedded (used) JavaScript in HTML as will as used JavaScript code with HTML tags. On the onclick event of input button btnClick we have called a JavaScript function getFactorial(). We have define that JavaScript function getFactorial() in the Head section of our web page with the help of <script> tag. Check out this JavaScript sample code -Factorial

At this stage don’t worry about the working of the getFactorial() function. You will get it indetails in next few Learning JavaScript tutorial.

Tips n Tracks

Reference

Reference