Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

JavaScript Overview for Intermediate Learners

In this article we will discuss about the JavaScript using HTML at Intermediate level. In this article we will learn new techniques of JavaScript and also we will be able to know what DOM is and its usage.

Using HTML with JavaScript:

Commonly we use JavaScript programming when we are using forms in HTML. Because in webpages we commonly get input from the user, by the help of HTML forms. And we also use JavaScript for Form Validation. Let’s we use HTML forms and get input from the user.

Listing 1: HTML Forms with JavaScript Programming

<!DOCTYPE HTML>
<html>
<head>
<script>
function Display(x,y){
var x = document.forms['NumberGenrator']['txt1'].value;
var y = document.forms['NumberGenrator']['txt2'].value;
alert("You Enter First Number: "+x+"\nYou Enter Second Number: "+y);
}
</script>
</head>
<body>
<form name="NumberGenrator" action="JavaScript.html" method="POST" onsubmit="Display(txt1.value,txt2.value)">
Enter First Number: <input type="text" name="txt1">
Enter Second Number: <input type="text" name="txt2">
<input type="submit">
</form>
</body>
</html>

Description of Listing 1:

In the Listing 1, we used HTML form to get input data from the user and send the data to the JavaScript user-defined function. And then in function we used technique to display users’ entered data in the form on the pop up message box. You can also send data to the JavaScript user-defined function by another method see Listing 2 for details in which we used onclick method and in listing 1 we used onsubmit method.

Listing 2: Sending data from the submit button

<form name="NumberGenrator" action="JavaScript.html" method="POST"
Enter First Number: <input type="text" name="txt1">
Enter Second Number: <input type="text" name="txt2">
<input type="submit" onclick=”Display(txt1.value,txt2.value)”>
</form>

Description of Listing 2:

In listing 2, we used same webpage but we changed a little bit in it. As in Listing 1 we used onsubmit method to return data to the JavaScript user-defined function. But now in Listing 2 we used the same webpage and now we will send data by using the onclick method to the JavaScript user-defined function. One thing you should keep it in your mind the output and the process of the program will be same.

Using DOM (Document Object Model):

There is another great technique by which using we get solutions of our problems in JavaScript that is DOM. We usually use browsers, and when browser loads at that time it creates a DOM for the page loading and execution. By using the DOM the HTML webpage becomes Dynamic HTML webpage. So let’s we use DOM, check for details Listing 3, 4,5&6. We will use these given main techniques of DOM

  • getElementById()
  • getElementsByTagName()
  • getElementsByClassName()
  • getElementsByName()

Listing 3: Using getElementById() in JavaScript and HTML

<!DOCTYPE HTML>
<html>
<head>
<script>
function display()
{
document.getElementById("visit").style.visibility = "hidden";
document.write("Hey! what you did ");
}
</script>
</head>
<body>
<div id="visit">
<p>Do you want to learn, so Click me...</p>
<button onclick="display()">click me</button>
</div>
</body>
</html>

Listing 4: Using getElementById() in JavaScript and HTML

<html>
<head>
<title>
</title>
<script type="text/javascript">
function Measure ()
{
    var s =  'X Coordinate = ' + window.event.clientX +  ' Y Coordinate = ' + window.event.clientY ;
    document.getElementById('cordinate').innerText = s;
}  
</script>
</head>
<body onmousemove="Measure()">
<div id="cordinate">
</div>
</body>
</html>

Description of Listing 4:

In the Listing 4 we used the getElementById(), to calculate the coordinates of the webpage. When the mouse moves on the browser’s coordination it will show the exact coordinate value. Where the mouse is existing currently. We used the window.event.clientX and window.event.clientY objects to check the mouse current coordinate. And we used the innerHTM to replace the data on the browser for the output, when the user moves the mouse on the coordinates of browser.

Listing 5: Last visited or modified Date and Time

<script type=”text/javascript”>
lastview = document.lastModified;
alert("Last Modified Date and Time is: "+lastview);
</script >

Listing 6: Calculating the total links of webpage

<script type=”text/javascript”>
c = document.links.length;
alert("Number of Links are: "+c);
</script>

Description of Listing 5 and 6:

Sometimes we want to know when the last time the webpage viewed was. So you can use the Listing 5 to do it.

And if you want to count the number of links how many links you applied on the webpage. So you can use the Listing 6 to calculate the length of links. And we can also check what the link of the webpage is? By JavaScript on which webpage currently we are visiting, so you can use the source code of the Listing 7 for it:

Listing 7: Checking the URL of webpage

<script language="JavaScript"> 
titl = document.title;
url = document.URL;
alert("The Title of Page is: "+titl+"\nAnd the URL is: "+url);
</script>

Description of Listing 7:

As you can see the programming in Listing 7, by using JavaScript we can check the URL of any webpage. Its great technique to use it and get important information about any webpage. For URL we used the JavaScript Keyword as URL to get information with the help of document method.

Listing 8: Using getElementsByTagName()

<html>
<head>
<script type="text/javascript">
function Count()
  {
  var count=document.getElementsByTagName("input");
  alert(count.length);
  }
</script>
</head>
<body>
<form>
Enter String<input type="text" name="name"><br>
<input type="button" onclick="Count()" value="Count">
</form>
</body>
</html>

Description of Listing 8:

We can count the data how much user had entered data, as you can see it in the Listing 8. We used DOM with JavaScript programming to get data and count the strings.

Now we will use the method which is getElementsByClassName(), which is supported by some browser’s version and also not. Just like that Google’ Chrome, Safar, iOS Safari, Opera mini, Android Browser, Blackbery Browser, Opera Mobile, Chrome for Android, and Firefox for Android these browsers support it. But there are some versions of Firefox and Internet Explorer which doesn’t support it. And one important thing we should keep it in our minds that we can’t use the getElementsByClassName() without JQuery as a framework, because this method sets data as a collection.

Listing 9: getElementsByClassName()

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function CheckEvents(){
    var sitename = document.getElementsByClassName('SiteName');
    for(var x = 0; x < sitename.length; x++){
        var data = document.getElementById(sitename[x].id);
        data.innerHTML = "Paragraph name is "+sitename[x].id;
        data.onmouseover = ParaOver;
        function ParaOver(){
            alert(this.id);
        }
    }
}
window.onload = CheckEvents;
</script>
<style type="text/css">
.SiteName {
    float: left;
    margin: 10px;
    padding: 5px;
    width: 200px;
    height: 30px;
    background: #DEB887;
}
</style>
</head>
<body>
<p id="Sahara1" class="SiteName">Sahara Software Technology</p>
<p id="Sahara2" class="SiteName">Sahara Software Technology</p>
<p id="Sahara3" class="SiteName">Sahara Software Technology</p>
<p id="Sahara4" class="SiteName">Sahara Software Technology</p>
<p id="Sahara5" class="SiteName">Sahara Software Technology</p>
</body>
</html>

Description Listing 9:

As you can see the listing 9, there two things are used to get information from the HTML tags. By Id and also by Class, so these two methods help us to get information and when the mouse comes over the paragraph, the alert() method will show its paragraph number.

Now we will use the method which is getElementsByName(), this is used to access all elements by name and we will try to use a form tag to explain the importance of this method.

Listing 10: getElementsByName()

<!DOCTYPE html>
<html>
<head>
<script>
function Count()
{
var x=document.getElementsByName("data");
alert(x.length);
}
</script>
</head>
<body>
<form>
First Name:
<input type="text" name="data"><br>
Last Name:
<input type="text" name="data"><br>
Gender<select name="data"><option value="0"></option>
<option value="1">Male</option>
<option value="2">Female</option>
</select><br>
Country<select name="data"><option value="0"></option>
<option value="1">Pakistan</option>
<option value="2">India</option>
<option value="3">China</option>
</select><br>
<input type="button" onclick="Count()" value="Count">
</body>
</html>

Description of Listing 10

As you can see the listing 10, we did the same job as we done in last listing 8. So it’s another method of DOM which we can use it to get data by name of the Tags by using it in JavaScript.

Practice Program:

Now we are going to do JavaScript validation, in which we will take input from the user. And then we will check what user has been gave input.

Listing 11: Simple Form Validation.html

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Validation</title>
<script type="text/javascript">
function CheckAndGenerate(num1, num2)
{
	num1 = parseInt(num1);
	num2 = parseInt(num2);
	var limit=/^\d{3}$/;
	if(num1 >= num2)
	{
		alert("WRONG ENTRY...\nSecond Number \nShould Be Greater Than\nFirst Number...");
	}	
	else if(num1<0)
	{
		alert("First Number Should Be Positive Integer...");
	}
	else if(num2<0)
	{
		alert("Second Number Should Be Positive Integer...");
	}
	else if(num1%2==1)
	{
		alert("First Number Should be Even...");
	}
	else if(num2%2==1)
	{
		alert("Second Number Should be Even...");
	}
	else if(num1 == '')
	{
		alert("First Field Is Empty...\nPlease Enter any Integer...");
	}
	
	 else if (document.validation.one.value.search(limit)==-1) 
	 {  
                    alert("Sorry, Please Enter Any 3 digit Integer At First Number Field");
	 }
	 else if (document.validation.two.value.search(limit)==-1) 
	 {  
                    alert("Sorry, Please Enter Any 3 digit Integer At Second Number Field");
	 }
	 else if(!(num1 >=0 && num2 <= 1000 ))
	 {
		alert("Sorry, Your Entry Is Not A Valid Integer....Try It Again....");
		}
	else
	{
		while(num1<num2){
			document.write(num1+"<br>");
			num1+=2;
			}	
	}
}
</script>
</head>
<body>
<h4>Enter Any 3 Digit Integer... Please Don't Try To Input Any Alphabat...</h4>
<form name="validation">
    Enter First Number:<input name=one type=text size=3>
    Enter Second Number:<input name=two type=text size=3>
    <input type=button value=Generate onclick="CheckAndGenerate(one.value,two.value)">
    </form>
</body>
</html> 

Description of Listing 11:

In Listing 11, we design a webpage. In which we are checking the validation of inputted data. In this form the user just can enter integer, which should be in 3 digits. The user can’t enter any less than 3 digit integer either more than 3 digit integer. When user input the data according to the requirement, so the function will check the validation of the data. Then at last it will generate the series.

Conclusion:

In this article we learnt the intermediate stage functions and use of JavaScript programming. There are many other functions which are different to from these functions which we learnt from this article. I hope you understand the article and learnt new things from it. If you have any kind of query, so do a comment please without any hesitation.



Studing Computer Science and have knowledge in C/C++, Java, VB.net, C#, Assembly Programming, MFC, HTML, XML, JAVASCRIPT, AJAX, JQUERY, PHP, MYSQL, ORACLE

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login