Articles → JavaScript → Introduction To Javascript

Introduction To Javascript

JavaScript is a scripting language designed to make a website more dynamic.

To elaborate the word dynamic let us go back to the time when websites were made in HTML only. All the contents in the website were static i.e. if you want to change the color of text then HTML document needs to be changed, but with JavaScript you can change the color of text with changing the HTML file.

This is not the only thing you can do from JavaScript but you can also do validations, changing the content using JavaScript and many more. We will discuss all this in the later tutorials.

To execute a program code written in any programming language it is converted into machine language. Interpreter converts the code to machine language every time the code runs, but the compiler converts the code into machine language only once unless the programmer changes the code. So according to this JavaScript is an interpreted language(not the compiled language).

Document Object Model

According to this model all the elements that make the webpage are considered as object.

Consider an example

<html>
  <head>
    <title>DOM example</title>
  </head>
  <body>
    <form>Enter Name   <input type="text" name="txtName" /></form>
  </body>
</html>

When open this HTML file you will see the following output.

Picture showing the DOM on the web browser

Now consider the code and the image again.

There is an element called document which acts as a container for all the other elements. If you will check the figure white portion of the web browser is referred to as document. Inside the document there is a form element and inside the form there is a textbox and a text.

So in the above example web page is made up of document, form, text and a textbox so all these elements are objects.

Implementation

Let us consider the example I have mentioned above. In the above example there is a textbox and a text. Let us add a button the form say btnDOM

Our main objective is to get the value of textbox on button click.

First of all add a script tag in the head section of the page i.e.

<script language = "JavaScript">
</script>

Inside the script function add a method called ClickMe

function ClickMe() {
	alert(document.forms[0].txtName.value);
}

As you can see in the method above how we are accessing the value of textbox in JavaScript. As mentioned in the DOM there is an object called document, inside the document there is a form element and inside the form there is a textbox so document.forms[0].txtName is the object of textbox.

Finally add an event called onclick inside the button i.e.

<input
  type="button"
  name="btnDOM"
  value="Click Me"
  onclick="javascript:ClickMe();"
/>

So the code of HTML file will be

<html>
  <head>
    <title>DOM example</title>
    <script language="JavaScript">
      function ClickMe()
      {
      	alert(document.forms[0].txtName.value);
      }
    </script>
  </head>
  <body>
    <form>
      Enter Name  
      <input type="text" name="txtName" />
      <input
        type="button"
        name="btnDOM"
        value="Click Me"
        onclick="javascript:ClickMe();"
      />
    </form>
  </body>
</html>

Now run the application. Type and text in the textbox and click button. You will get the value of textbox in the form of alert(alert is for the popup message in JavaScript).

Posted By -	Karan Gupta

Posted On -	Thursday, July 1, 2010

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250