Articles → JavaScript → Introduction To Javascript

Introduction To Javascript

In this article, we will introduce JavaScript.

What Is JavaScript?

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

What Does The Word Dynamic Mean?

To elaborate on 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 the HTML document needs to be changed, but with JavaScript, you can change the color of text by changing the HTML file.

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

Is JavaScript A Compiled Or A Interpreted Language?

JavaScript is an interpreted language because it is typically executed line by line by an interpreter, rather than being compiled into machine code before execution, as is the case with languages like C or C++.

Document Object Model

According to this model, all the elements that make the webpage are considered objects. Consider the following example: -

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

The output of the above code is displayed in the picture below.

Picture showing the DOM on the web browser

In the Document Object Model, the topmost element is the document. The document acts as a container for all other elements. Inside the document, we have a form element. The form element contains multiple objects like a textbox, radio button, checkbox, etc.

In the above code, the document object contains the form object. Inside the form object, we have a label and a textbox object.

Calling Document Object Model Using JavaScript

In the above example, let me add a button. The button will get the value of the textbox using the Document Object Model and display the value in the form of an alert.

The first step is to add a script tag to the head section of the page.

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

Inside the script function add a method.

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

Finally, add an onclick event inside the button.

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

The final HTML code would 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>

Try It

Output

Picture showing calling the DOM element using JavaScript

Posted By -	Karan Gupta

Posted On -	Thursday, July 1, 2010

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**