Articles → JavaScript → Introduction To Javascript

Introduction To Javascript

This article introduces JavaScript.

What Is JavaScript?

JavaScript is a high-level, interpreted programming language that enables interactive and dynamic content on websites.

What Does The Word Dynamic Mean?

To understand the meaning of the word dynamic, let us go back to the early days of the web when websites were built using only HTML. Back then, all website content was static, meaning that any change, such as modifying the text color, required directly editing the HTML file. However, with the advent of JavaScript, it became possible to change elements like text color dynamically, without manually altering the HTML file.

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

Is JavaScript A Compiled Or A Interpreted Language?

JavaScript is an interpreted language because it runs directly in the browser or runtime environment without needing to be compiled into machine code first, unlike C or C++.

Document Object Model

According to the Document Object Model (DOM), all webpage elements are represented as objects that can be accessed and manipulated using programming languages like JavaScript. 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 code above is shown 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