Press "Enter" to skip to content

Document Examples in JavaScript

Definition:

It is an object of java script which is meant for referring complete the web page for performing and accessing elements of the web page writing or reading the content on liable on the web page.

This will also provide you the methods for accessing the various components available on the web page.

Write :

Write is a function of document object which is meant for writing the content on the web page.

Program :

<html>

     <head>

                     <script language=”javascript”>

                                      function display ()

                                                  {

                                                     a=10;

                                                                 b=20;

                                                                 c=a+b;

                                                    document.write(“<h1> <center> “+c+”</center> </h1> “);

                                                  }

                                </script>

                </head>

                <body>

                     <input type=”button” value=”First button” onclick=”display()”/> <br>

                </body>

</html>

Ways to access the components in the web page :

    There are 5 different ways to access the components on the web page those are

  • Based on the form name and element name :

   It is a process of accessing the components based on the forms and elements available on the web page then it is called as forms and elements.

Program :

<html>

     <head>

                     <script language=”javascript”>

                                      function display()

                                                  {

                                                    a=parseFloat(document.frm.t1.value);

                                                                b=parseFloat(document.frm.t2.value);

                                                                c=a+b;

                                                                document.frm.t3.value=c;

                                                  }

                                </script>

                </head>

                <body>

                     <form name=”frm”>

                                     <input type=”text” name=”t1″/> <br>

                                                 <input type=”text” name=”t2″/> <br>

                                                 <input type=”text” name=”t3″/> <br>

                                                 <input type=”button” value=”first button” onclick=”display()”/>

                                </form>

                </body>

</html>

  • Get Element by Id :

This is a function which is meant for accessing the components based on the id associated to the components. Id’s for the component needs to be unique. This is the best performer.

Program :

<html>

     <head>

                     <script language=”javascript”>

                                     function display()

                                                 {

                                                   a=parseFloat(document.getElementById(“t1”).value);

                                                   b=parseFloat(document.getElementById(“t2”).value);

                                                   c=a+b;

                                                   document.getElementById(“t3”).value=c;

                                                 }

                                </script>

                </head>

                <body>

                     <input type=”text” Id=”t1″/> <br>

                                 <input type=”text” Id=”t2″/> <br>

                                 <input type=”text” Id=”t3″/> <br>

                                 <input type=”button” value=”First button” onclick=”display()”/>

                </body>

</html>

  • Get Elements By Name :

This is a function which is meant for retrieving the components based on the names associated to the components.

Program :

<html>

   <head>

      <script language=”javascript”>

                  function display()

                  {

                  a=parseFloat(document.getElementsByName(“t1”)[0].value);

                  b=parseFloat(document.getElementsByName(“t1”)[1].value);

                  c=a+b;

                  document.getElementsByName(“t1”)[2].value=c;

                  }

                  </script>

                 </head>

                 <body>

                   <form name=”frm”>

                     <input type=”text” name=”t1″/> <br>

                                 <input type=”text” name=”t1″/> <br>

                                 <input type=”text” name=”t1″/> <br>

                                 <input type=”button” value=”first button” onclick=”display()”/>

                                </form>

                </body>

</html>

  • Get Element By Class Name :

This is the function which allows to access is meant for accessing the components based on the class name associated to the component.

Class name can be duplicated among all the 5 types this is the worst performer.

Program :

<html>

   <head>

      <script language=”javascript”>

                  function display()

                  {

                  a=parseFloat(document.getElementsByClassName(“t1”)[0].value);

                  b=parseFloat(document.getElementsByClassName(“t1”)[1].value);

                  c=a+b;

                  document.getElementsByClassName(“t1”)[2].value=c;

                  }

                  </script>

                 </head>

                 <body>

                   <form name=”frm”>

                     <input type=”text” class=”t1″/> <br>

                                 <input type=”text” class=”t1″/> <br>

                                 <input type=”text” class=”t1″/> <br>

                                 <input type=”button” value=”first button” onclick=”display()”/>

                                </form>

                </body>

</html>

  • Get Element By Tag Name :

This is a function which is meant for accessing the components based on the tag name associated to it’s created then it is called as get Elements by tag name.

Program :

<html>

   <head>

      <script language=”javascript”>

                  function display()

                  {

                  a=parseFloat(document.getElementsByTagName(“input”)[0].value);

                  b=parseFloat(document.getElementsByTagName(“input”)[1].value);

                  c=a+b;

                  document.getElementsByTagName(“input”)[3].value=c;

                  }

                  </script>

                 </head>

                 <body>

                   <form name=”frm”>

                     <input type=”text” /> <br>

                                 <input type=”text” /> <br>

                                 <input type=”button” value=”first button” onclick=”display()”/>

                                 <input type=”text”/> <br>

                                </form>

                </body>

</html>

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *