You are here:
Home JavaScript

How To Code JavaScript

Written by Creationz

JavaScript (JS) is the de facto standard client side scripting language for web based applications. It is a light weight language whose code snippets are simply embedded into HTML web pages and interpreted without compilation.

Before you start programming the language, let us take a quick look at the features or capabilities of JavaScript in our next section.

Features of JavaScript

  • It’s easy! Not any difficult programming skill is required to master JavaScript. Basic understanding of the simple syntax is enough to get started and you can learn it easily.
  • Makes your web pages dynamic and interactive. It is basically event-driven and you can change the components of the HTML page including text dynamically.
  • It is highly portable and supported by browsers including Internet Explorer, Firefox, Chrome, Opera, and Safari.

Before you start programming the JavaScript scripting language, it is recommended to brush up your HTML/XHTML knowledge.

The Basics and the syntax

The <script> tag of HTML is the basic tag to place the JavaScript into the HTML code. This tag tells the browser that the text which follows is a part of a script. We will see in detail about its usage and its fields in the next section. The end tag of script tag is the </script>

<script type-“text/javascript”>
<!-- 
script code here
//-->
</script>

JavaScript code in HTML - Your first JavaScript embedded HTML webpage

Let us begin by designing a simple HTML web page demonstrating the placement of our JavaScript code in the HEAD and the BODY section of our page.

 
<html>
<head> <title> Javascript is fun to learn! :) </title>
<script type=”text/javascript”>
<!—
Document.write(“<h2> Welcome to Javascript programming! </h2>”);
//-->
</script>
</head>
<body>
<script type="text/javascript">

Document.write(“<b><u>Red Leather, Yellow Leather</u></b>”);

</script>
</body>
</html>

The program illustrates several features of the JavaScript. In the head section, the browser first interprets the contents of the <head> section. As soon as the <script> tag is encountered the browser understands that it is a script embedded in the HTML.

<script type="text/javascript">

The type attribute specifies the type of file as well as the scripting language used in the script. From our example, it is obvious we have used a text file written in JavaScript. You may ask a question here, What if my browser does not support scripts? Well, it will simply ignore the code snippet as we have placed it inside a HTML comment. The browser which understands will interpret JavaScript code as you wish to.

Document.write

The line in our code containing Document.write(“.....”) has got special significance. We have used the browser’s Document object here. This allows you to specify a text to display in the HTML/XHTML document. There are many such objects which allow the programmer to access and manipulate elements of the webpage, but for the basic level we will not consider all of them here.

Now that was the simple static way of including text in the script.

Including an external JavaScript file

you might also want to include an external JavaScript File (.js) in the HTML webpage to implement code reuse. The syntax for that is

<script type="text/javascript" src=”external.js">
</script>

The src field specifies the name of the ‘.js’ you want as the JavaScript file.

Always remember not to include the <script> tag inside the external (.js) file.

Now that’s a handy and a smart way to use the same script across multiple HTML WebPages.

Browse more tutorials...