Javascript Tutorial part 1 - An introduction

Javascript is a highly powerful language which runs seamlessly with HTML and CSS put together inside a web browser. It is based on ECMAScript which is an open standard. Although started as a client side scripting language, Javascript has evolved a lot and now is being used as server-side language too - e.g Node.js and thus replacing programming languages like PHP, ASP. Looking at the trends, Javascript has become the first choice for creating beautiful and interactive web pages amongst developer community. This article covers the basics of Javascript - what it is, how it is used and how it works in conjunction with the web browsers.

When you are creating a web page - it can simply be broken down into 2 pieces: content and presentation style.

* Write content in HTML:

The content of a web page can simply be put down in HTML markup tags e.g. header, paragraphs, tables, lists, images etc. Using this simple markup scheme one can write down any kind of web page - blog, technical article, search results, image gallery etc.

* Stylize content with CSS:

CSS is used to apply presentation styles to the HTML elements. Using CSS styles, one can define fonts, background color, indentation, placement and several other visual effects for individual html tags. CSS is the key element when one wants to create a good website that should look great in all the browsers and devices. It also helps in code segregation, so that content is not mixed with representation styles. Once a CSS style is created it can be reused across multiple HTML documents too.

HTML + CSS combination can create great web pages, but those pages would normally be static. What if you want to create a highly interactive web page, where some or the other action has to be taken when user clicks here and there. This requires some sort of dynamic interaction between the user operation and the html content being displayed by the browser (which is static). Javascript comes to the rescue here.

* Dynamic interaction with Javascript:

Suppose, you have a 'click-me' button and once clicked you want it to somehow display - 'clicked'. Now, using simple HTML code you can never achieve this as html content once created can never be modified, unless Javascript is used for that purpose. See the code below:

<html>
<head>
<title>Hello World </title>
<style>
  // CSS style information
  button {color: red;}
</style>
</head>

<body>
<button id="mybutton">Click Me</button>
<script>
    // Get the button element
    var button = document.getElementById('mybutton');

    // Assign an onclick event listener
    button.addEventListener("click", function(event) {

     // change the text for button
     button.innerHTML = 'Clicked';
    
    }, false);
</script>
</body>
</html>


Javascript code is contained within '<script></script>' tags. Here, we are assigning an event listener on the button for 'click' event. Which means that as soon as this button is clicked, our listener will be called, which is simply changing the HTML content for the button. Another important thing to note here is that, we need to know the exact button element on which we want to assign the event listener. For this, we are using in-built getElementById() routine and we are passing the exactly same 'id' which is associated with our '<button>' element.

* Developer tools required to play around with Javascript:

Because, Javascript works at client side - you do not need a full fledged web server to try it out. Moreover, it can run on any operating system. You can simply use a text editor of your choice + any web brower that has got javascript enabled (if not, modify the browser preferences).

However, if you want to become a pro - you can use any one of the developer's tools (which are generally shipped along with any browser) that can help you analyze and debug your javascript programs better. Have a look at few of them:


comments powered by Disqus