Skip to main content

Java Script

1. First Program for Java Script

<html>
<head>
<script>
document.write("<B>My first Java Script Program</B>");
</script>
</head>
<body>
<h1>My First Java Script Program</h1>
</body>
</html>

2. Use of variables in Java Script

<html>
<head>
<script>
var n=10;
document.write("<br/><B>Numerical Integer Value : "+n+"<B/>");
n=234.56;
document.write("<br/><B>Numerical Fractional Value : "+n+"<B/>");
n="Java Script";
document.write("<br/><B>String Value : "+n+"<B/>");
</script>
</head>
<body>
<h2>Example of Variables</h2>
</body>
</html>

3. An Example of if-else statement.

<html>
<head>
<script>
var age=10;
if(age < 18)
{
document.write("<br/><B>You are a Minor, You can't Access<B/>");
}
else
{
document.write("<br/><B>You are an Adult<B/>");
}
</script>
</head>
<body>
<h2>Example of if-else</h2>
</body>
</html>

4. An Example of Switch Statement

<html>
<head>
<script>
var n=11;
switch(n)
{
case 1:
document.write("<br/><I>Number is One</I>");
break;
case 2:
document.write("<br/><I>Number is Two</I>");
break;
case 3:
document.write("<br/><I>Number is Three</I>");
break;
case 4:
document.write("<br/><I>Number is Four</I>");
break;
case 5:
document.write("<br/><I>Number is Five</I>");
break;
case 6:
document.write("<br/><I>Number is Six</I>");
break;
case 8:
document.write("<br/><I>Number is Eight</I>");
break;
case 9:
document.write("<br/><I>Number is Nine</I>");
break;
case 0:
document.write("<br/><I>Number is Zero</I>");
break;
default:
document.write("<br/><I>Error: Enter Between 0 and 9</I>");
}
</script>

</head>
<body>
          <h3>Switch Statement</h3> </body>
</html>

5. Finding Character is vowel or Not.

<html>
<head>
<script>
var n='e';
switch(n)
{
case 'A':
case 'E':
case 'I':
case 'O':
              case 'U':
case 'a':
case 'e':
case 'i':
case 'o':
case 'u':
document.write("<br/><I>Character is a Vowel</I>");
break;
default:
document.write("<br/><I>Character is not a Vowel</I>");
}
</script>
</head>
<body>
         <h2>Vowels Example</h2>
</body>
</html>

6. Different blocks of the script are one script.

<html>
<head>
<script>
var a=30;
var b=20;
</script>
</head>
<body>
<script>
s=a+b;
</script>
</body>
</html>
<script>
document.write("Sum : "+s);
</script>

7. While loop in Java Script

<html>
<head>
<script>
var i=1;
while(i<=10)
{
document.write(i+"<br/>");
i++;
}
</script>
</head>
<body>
<script>
document.write("While Loop Example");
</script>
</body>
</html>

8. Do While loop in Java Script

<html>
<head>
<script>
var i=1;
do
{
document.write(i+"<br/>");
i++;
}
while(i<=20);
</script>
</head>
<body>
<script>
document.write("Do While Loop Example");
</script>
</body>
</html>

9. For Loop in Java Script

<html>
<head>
<script>
var i;
for(i=1;i<=10;i=i+2)
{
document.write(i+"<br/>");
}
</script>
</head>
<body>
<script>
document.write("Odd Numbers using For Loop");
</script>
</body>
</html>

10. Event Handling - onload event.

<html>
<head>
<script>
function show()
{
document.write("Load Event is called");
return;
}
</script>
</head>
<body onload="show()">


</body>
</html>

11. Click Event- Simple Example

<html>
<head>
<script>
function clshow()
{
document.write("Click Event is called");
}
</script>
</head>
<body>
   <form name="f1">
    <br/><br/><br/><br/><br/>
    <input type="Button" value="Click Here" onclick="clshow()"> </form>
</body>
</html>

12. Mouse Over Event in Java Script

<html>
<head>
<script>
function show()
{
document.write("Mouse Over event is called");
}
</script>
</head>
<body>
        <img src="img8.jpg" height="400" onmouseover="show()">
</body>
</html>

13. Adding two values- getting values from the input boxes.

<html>
<head>
<script>
function add()
{
var a,b,s;
if(f1.t1.value=="" || f1.t2.value=="")
{
document.write("Error: Input Box can not be Empty");
}
else
{
a=parseInt(f1.t1.value);
b=parseInt(f1.t2.value);
s=a+b;
document.write(s);
}
}
</script>
</head>
<body>
<form name="f1">
Enter First Number : <input type="text" name="t1" /><br/>
Enter Second Number : <input type="text" name="t2" /><br/><br/>
<input type="Button" name="B1" value="Add" onclick="add()" />
</body>
</html>

14. Adding values - Using elements Array

<html>
<head>
<script>
function add()
{
var a,b,s;
if(f1.elements[0].value=="" || f1.elements[1].value=="")
{
document.write("Error: Input Box can not be Empty");
}
else
{
a=parseInt(f1.elements[0].value);
b=parseInt(f1.elements[1].value);
s=a+b;
document.write(s);
}

}
</script>
</head>
<body>
    <form name="f1">
     Enter First Number : <input type="text" name="t1" /><br/>
     Enter First Number : <input type="text" name="t2" /><br/><br/>
     <input type="Button" name="B1" value="Add" onclick="add()" />
</body>
</html>

15. Accessing HTML elements using getElementById.

<html>
<head>
  <script language="JavaScript">
       function show()
{
               document.getElementById('display').innerHTML =
                    document.getElementById("u_input").value;
       }
  </script>

</head>
<body>
    <form>
          <label>Enter Your Name : </label>
          <input type="text" name="msg" id="u_input">
          <input type="button" value="Send" onclick="show();"><br/>
 </form>
     <p>  <label>Your Name : </label>
     <span id='display'></span></p>
</body>
</html>

16. Adding two values using getElementById.

<html>
<head>
   <script>
function add()
{
var a=parseInt(document.getElementById('t_in1').value);
var b=parseInt(document.getElementById('t_in2').value);
var c=a+b;
document.getElementById('t_out').value=c;
document.getElementById('t_out').disabled=true;
}
   </script>
</head>
<body>
     <form name="f1">
           Enter First Number : <input type="text" name="t1" id="t_in1" /> <br/>
           Enter Second Number : <input type="text" name="t2" id="t_in2" /><br/> 
           Result : <input type="text" name="t2" id="t_out"/> <br/>
<br/>
           <input type="Button" name="b1" id="btn" onclick="add();" value="Add"/> 
    </form>

</body>
</html>


17. An example of Date in JavaScript-Printing the day.

<html>
     <head>
            <title>Date</title>
     </head>
<body>
     <script>
        switch (new Date().getDay()) 
        {
            case 0:
                   day = "Sunday";
                   break;
            case 1:
                   day = "Monday";
                   break;
            case 2:
                   day = "Tuesday";
                   break;
            case 3:
                   day = "Wednesday";
                   break;
            case 4:
                   day = "Thursday";
                   break;
            case 5:
                  day = "Friday";
                  break;
            case 6:
                day = "Saturday";
        }
document.write("Today is "+day);
</script>
</body>
</html>

18. Calculation of square and cube -- using checkboxes 

<html>
<head>
    <script>
         function cal()
         {
var n,s,v;
n=parseInt(f1.t1.value);
if(f1.c1.checked==true)
{
s=n*n;
v=f1.c1.value;
}
if(f1.c2.checked==true)
{
s=n*n*n;
v=f1.c2.value;
}
document.write(v+" "+s);
        }
</script>
</head>
<body>
      <form name="f1">
           <label>Enter a Number </label><input type="text" name="t1"><br/>
           <br/><h3>Choose One Operation</h3>
           <input type="checkbox" name="c1" value="Square"><label>Square </label>
           <input type="checkbox" name="c2" value="Cube"><label>Cube </label><br/><br/>
           <input type="button" name="b1" value="Click" onclick="cal()">
     </form>
</body>
<html>

19. How to use Radio Buttons for making choice.


<html>
<head>
    <script>
        function show()
        {
if(f1.r1.value=="ug")
{
document.write("Your qualification is Graduation");
}
if(f1.r1.value=="pg")
{
document.write("Your qualification is Post Graduation");
}
       }

</script>
</head>
<body>
      <form name="f1">
          <br/><h3>Select Your Qualification</h3>
           <input type="radio" name="r1" value="ug"><label>Graduation </label>
           <input type="radio" name="r1" value="pg"><label>Post Graduation </label><br/><br/>
           <input type="button" name="b1" value="Click" onclick="show()">
      </form>
</body>
<html>

20. An example of drop down list <select>.

<html>
<head>
     <script>
         function show()
         {
document.write("Your City is "+f1.city.value);
         }
     </script>
</head>
<body>
      <form name="f1">
              <br/><label>Select Your City</label>
                    <select name="city">
                           <option>Ludhiana</option>
                           <option>Khanna</option>
                           <option>Chandigarh</option>
                           <option>Mohali</option>
                    </select>
            <br/><br/>
            <input type="button" name="b1" value="Click" onclick="show()">
      </form>
</body>
<html>

21. Different Date Examples 

 <html>
<body>
   <script>
        //Date(year, month, day, hours, minutes, seconds, milliseconds)
         document.write("<h2>JavaScript new Date()</h2>");
         var d = new Date();
         document.write(d);
         var d1 = new Date(2020, 10, 15, 10, 23, 20, 20);
         document.write("<br/>"+d1);
         var d2 = new Date(2020, 10, 12, 10, 13);
         document.write("<br/>"+d2);
         var d3 = new Date(2020, 1, 14, 11);
         document.write("<br/>"+d3);
         var d4 = new Date(2020, 2, 14);
         document.write("<br/>"+d4);
         var d5 = new Date(2020, 2);
         document.write("<br/>"+d5);
         var d6 = new Date(2020);
         document.write("<br/>"+d6);
         //date(string)
         var d7 = new Date("April 18, 2020 09:13:00");
         document.write("<br/>"+d7);
   </script>
</body>
</html>

22. Form Validation-Checking Text Field is Filled or not

<html>
<head>
<script>
function validForm() 
{
          var nm = document.forms["mForm"]["s_nm"].value;
if (nm == "") 
{
alert("Enter the your Name");
return false;
}
}
</script>
</head>
<body>
<form name="mForm" action="" onsubmit="return validForm()" method="post">
  Enter Your Name: <input type="text" name="s_nm">
  <input type="submit" value="Submit">
</form>
</body>
</html>


23. Form Validation- Checking input is a Number or not

<html>
<head>
<script>
function myFunction() 
{
        var x, text;
        x = form1.age.value;
        if (isNaN(x))
        {
text="Plz !! Enter a Number";
        }
        else
        {
                 if ( x <18 || x > 60) 
                 {
                           text = "Plz !! Enter a Valid Age";
                 } 
                 else 
                 {
                           text = "You are Eligible";
                 }
         }
         document.getElementById("disp").innerHTML = text;
}
</script>
</head>
<body>
<h3>Please Enter Your age</h3>
<form name="form1">
<input type="text" name="age">
<input type="button" onclick="myFunction()" value="Check"></input>
<from/>
<p id="disp"></p>
</body>
</html> 

24. String Example-Searching Strings.


<html>
<head>
<script>
      var str="This is Java Script";
      document.write("<br/> String : "+str);
      document.write("<br/> String Length : "+str.length); //length is a property
      document.write("<br/>Location of s in String : "+ str.indexOf("s"));
      document.write("<br/>Location of s in String : "+ str.indexOf("s",4)); //Starts searching from 4th        index
      document.write("<br/>Location of last : "+ str.lastIndexOf("a")); //Returns the last occurance of a
      document.write("<br/>Location of a : "+ str.search("a"));
</script>
</head>
<body>
       <h2>String Example</h2>
</body>
</html>

25. Extracting the parts of the String

<html>
<head>
<script>

        var str="This is Java Script";
        document.write("<br/> String Slice : "+str.slice(8,12));
        document.write("<br/> String Slice : "+str.slice(-11,-7));
        document.write("<br/> String Slice : "+str.slice(8));
        document.write("<br/> String Slice : "+str.slice(-11));
        document.write("<br/> Sub-String : "+str.substr(8, 4));
        document.write("<br/> Sub-String : "+str.substr(8));
        document.write("<br/> Sub-String : "+str.substr(-8));
        document.write("<br/> String Replace : "+str.replace("Java","VB"));

</script>
</head>
<body>
<h2>String Example</h2>
</body>
</html>


26. String Concatenation and Changing the case.

<html>
<head>
<script>
        var str1="This is Java Script";
        var str2="it is a Client Side Script";
        var str=str1+". "+str2; //Concatenating Strings using + operator
        document.write("<br/> String Cocatenation : "+str);
        var str3=str1.concat(". ",str2);
        document.write("<br/> String Concateation : "+str3);
        document.write("<br/> String to Upper Case : "+str1.toUpperCase());
        document.write("<br/> String to Lower Case : "+str1.toLowerCase());
</script>
</head>
<body>
<h2>String Example</h2>
</body>
</html>

27. Character based function-Returning the character and code at particular location in string

<html>
<head>
    <script>
        var str1="This is Java Script";
        var str2="      Java Script        ";
        document.write("<br/> Character at Location - 0 : "+str1.charAt(0));
        document.write("<br/> Code at Location - 9 : "+str1.charCodeAt(9));
        document.write("<br/>");
        for(i=0;i<str1.length;i++)
        {
          document.write("<br/> Charater : "+str1.charAt(i));
                  document.write(" Code : "+str1.charCodeAt(i));
        }
    </script>
</head>
<body>
<h2>String Example</h2>
</body>
</html> 

28. Creating Arrays in Java Scripts.

<html>
<head>
    <script>
           var COURSE=["BA","BSc","BBA","BCom"];
           document.write("<br/><B>List of Courses</B>");
           for(i=0;i<COURSE.length;i++)
           {
              document.write("<br/>"+COURSE[i]);
           }
    </script>
</head>
<body>
<h2>Arrays</h2>
</body>
</html> 

29. Creating Arrays using new keyword in Java Scripts.


<html>
<head>
<script>
var COURSE=new Array("BA","BSc","BBA","BCom","MA");
document.write("<br/><B>List of Courses</B>");
for(i=0;i<COURSE.length;i++)
{
document.write("<br/>"+COURSE[i]);
    
}
</script>
</head>
<body>
<h2>Arrays</h2>
</body>
</html>


30. Array Object- using names to access array elements.

<html>
<head>
<script>
var STUDENT={name:"Ravi",course:"BCA",rno:"801"};
document.write("<br/><B>Student Detail</B>");
document.write("<br/>Name of the Student : <b>"+STUDENT["name"]+"</b>");
document.write("<br/>Class : <b>"+STUDENT["course"]+"</b>");
document.write("<br/>Roll No : <b>"+STUDENT["rno"]+"</b>");
</script>
</head>
<body>
<h2>Arrays</h2>

</body>

</html>

Popular posts from this blog