MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

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

[Close]

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 Beginner Learners

In this article we will take an overview of JavaScript programming and also we will discuss the solution of problems related to JavaScript programming. Check it out.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Author: Faisal Title: JavaScript Overview for Beginner Learners Description: In this article we will take an overview of JavaScript programming and also we will discuss the solution of problems related to JavaScript programming. We will discuss many problems may be you never thought about them.

Setting Up your Browser for JavaScript Programming Errors:

Sometimes we use to do programming in JavaScript, and our programs don’t run due to having errors in the program. And we become confused to search the errors first then solve the problems. When we are using any browser, they are capable to find the errors of JavaScript programs. So let’s we change the settings of our browsers. Commonly we are using Internet Explorer and Firefox browsers. And now a days computer users are using mostly Google Chrome. As I am using it now frequently, due to some of its advantages.

Internet Explorer Settings

Figure 1: Internet Explorer Settings

As you can see the Figure 1, it is the settings of Internet Browser 7, how you can change the settings? First of all open the browser and then go to the Internet Explorer Settings, after this click on the advanced tab, you will see the Figure 1 window in front of you. Here you just disable the script debugging (other) option. And click on OK button to apply or click on apply first then press OK button.

Google Chrome Settings

Figure 2: Google Chrome Settings

As you can see in the Figure 2, Open your Google Chrome browser, then go to the settings and then click on the advanced Settings, once you clicked on the advanced settings then click on the proxy settings, you will see the same window as you can see it in Figure 2. Here click on the advanced tab and go to the list to disable the script debugging (other) options.

But if you are using Firefox browser, so Firefox is the browser which track your JavaScript errors. When you write your codes of JavaScript and there is an error, and you didn’t get any Pop up indication. So go to the Tools of Firefox and then click on the JavaScript Consoleoption from the dropdown menu. Where you will see the error line and it will tell you the reason of errors.

Using Variables in JavaScript:

It is easy to use variables in JavaScript, as when we need any variable in JavaScript programming we use “var” which is a reserved keyword. After var we use a name for the variable in JavaScript program. See the Listing 1 for details of variables use in JavaScript programming.

Listing 1: Declaring and Assigning Variables in JavaScript

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
var name;   //Declaration of Variable 
name = "MrBool";   //Assigning value to variable as string
var number = 1234567890;  //Initializaiton of Variable as integer(Declaration +  Assignment  of variable)
var balance = 200.23;   //Initializaiton of Variable as float
var character = 'A';  //Initializaiton of Variable as character
document.write("The website name is: "+name+"<br>");
document.write("The tony's number is: "+number+"<br>");
document.write("Hey! my balance is: "+balance+"<br>");
document.write("My grade in Class is: "+character);
</script>
</head>
<body>
</body>
</html>

Description of Listing 1:

In Listing 1, I tried to show you the way of using variables in JavaScript, and I used document.write() to output the data. As you can see inside the document.write(), I used HTML tag which is <br /> line break tag. So we can use html tags inside the statements of JavaScript. We use+ operator to concatenate the variable and the statement inside the document.write() to show the statement and data of variable at one palace in a line. And you can also use document.writeln() for automatically display data on newlines.

How to get input from the User at RunTime?

In JavaScript programming we can also get input from the user at the run time. For example we designed a webpage. And the webpage contains button, by which the user press the button and get allow to input his information. Let’s try…

Listing 2: Using Prompt() Function

<!DOCTYPE HTML>
<html>
<head>
<script>
function Input()
{
var name = prompt("Enter Your Full name Please");
var age = prompt("Enter Your Age Please");
document.write("Your Full Name is "+"<b>"+name+"</b><br>");
document.write("Your Real Age is "+"<b>"+age+"</b><br>");
}
</script>
</head>
<body>
<p>Hey! Welcome to the World Wide Website<br>Please Enter your Information by Pressing the Click me button...</p>
<button onclick="Input()">Click Me!</button>
</body>
</html>

Description of Listing 2:

If you use the above source code of JavaScript programming, you will see there will be a button on the browser. And when you will click the button there will be two pop up boxes which will ask you to enter the data one by one. When you done, it will show the data on your browser see the Figures 3-6. As you can see we also used a function in the Listing 2. The using of functions in JavaScript programming is also very easy. And which function we used it’s a user defined function with not return any argument and also not getting any argument.

JavaScript Program asking to press the button

Figure 3 JavaScript Program asking to press the button

In the above Figure 3, the program is asking to press the button and then you will able to input your data to the pop up boxes.

JavaScript Program asking for Input name

Figure 4: JavaScript Program asking for Input name

In the Figure 4, the JavaScript program is asking to input your Name, its mean that when you pressed the button in Figure 3 you are fully allow to input data.

 JavaScript Program asking for the age to be input

Figure 5: JavaScript Program asking for the age to be input

In the Figure 5, the window is showing to input your age now, when you entered you name in the previous pop up box.

Showing the actual result of the Listing 2

Figure 6: Showing the actual result of the Listing 2

Using of Decisions and User-defined Functions in JavaScript Programming:

Now we will use the Functions in different ways as sending data to the functions and also compare the data in the functions by using IF condition. There is an easy and simple way to use functions and decision making conditions in JavaScript. For more details check the Listing 3.

Listing 3: Conditions and user defined functions

<!DOCTYPE HTML>
<html>
<head>
<script>
var name;
var age;

function Input(){//Input() will not get any argument, nor return any value
	name = prompt("Enter Your Full name Please");
	age = prompt("Enter Your Age Please");
}

functionCheckAge(age){ //CheckAge function will get one argument and return a value
if(age == 18 && age == 20){
return age;
}else if(age == 22 && age == 24 ){
return age;
}else{
document.write("Sorry! Your age is fake...<br>");
}
}

function Print(name,age){ //Check() will get two arguemnts and not return any value
document.write("Your Full Name is "+"<b>"+name+"</b><br>");
document.write("Your Real Age is "+"<b>"+age+"</b><br>");
} 

Input();  //calling the Input() function
Print(name,age);  //calling the Print() function with two arguments
varMyAge;
MyAge = CheckAge(age);
document.write("Mr."+name+". You Entered real age "+MyAge+"<br>"+"Thanks You...");
</script>
</head>
<body>
</body>
</html>

Description of Listing 3:

In the Listing 3, we used three functions as sending arguments and returning values, sending arguments not returning values and also a function which not get any arguments either don’t return values. And we also used simple IF else statement.

Using Loops and Arrays in JavaScript Programming:

Now we will discuss the Array with their types, and we will also use loops to get the output of the arrays on the browser. The using of Array mean that the data is Homogeneous in the Array. Let’s check the Listing 4 for details of Arrays and using of Loops.

Listing 4: Arrays and Loops in JavaScript

<!DOCTYPE HTML>
<html>
<head>
<script>
vari; //declaring variable which will be use in loops itrations
var names = new Array(); //It is the way we declare an object as an array
//Assigning values to array
names[0] = "JavaScript";
names[1] = "PHP";
names[2] = "MySQL";
names[3] = "MFC";
for(i=0; i<names.length; i++)
{
document.writeln(names[i]+"\t");
}
//Using array with initializaiton method and using while loop
var names = new Array("JavaScript","PHP","MySQL","MFC");  // using condensed array
document.write("<br>");
i = 0; //assigning variable i, to be use in while loop
while(i<names.length)
{
document.write(names[i]+"\t");
i++;
}
document.write("<br>");
var names = ["JavaScript","PHP","MySQL","MFC"]; // using literal array
for(i in names){  //simple way of using for each loop in JavaScript
document.write(names[i]+"\t");
}
document.write("<br>");
var b = 0;
do{
document.write(names[b]+"\t");
b++;
}while(b<names.length);
</script>
</head>
<body>
</body>
</html>

Description of Listing 4:

In the Listing 4, you can see we used arrays in loops and declared them in three ways as by using the new Array() method and also using by this method we declared arrays as condensed and also literal.And then we used the loops in JavaScript i.e. for loop, while loop, do-while loop and also for each loop. Using of these all loops are as easy as piece of cake.

Objects in JavaScript Programming:

There is another great technique in JavaScript programming that is objects. It looks like structure in C/C++. Because first we define the properties of object then we use its objects to execute the data of objects, it seems little bit confusing but when we use it. It looks very easy. Let’s see the Listing 5…

Listing 5: Objects in JavaScript Programming

<!DOCTYPE HTML>
<html>
<head>
<script>
var record = {name:"Faisal Abdullah",age:"22", id:"BSCS/F10/0106"};
document.write("My name is "+record.name+"<br>"+"My age is "+record.age+"<br>"+"My ID is "+record.id);
</script>
</head>
<body>
</body>
</html>

Description of Listing 5:

In the Listing 5, we used to declare the properties of object then we used it in the document.write() method to output the data on the browser. As you can see we use (.) dot operator, to link the data object with the property of the object to execute the data from it.

Lets now we create a webpage in which we will design three CSS style files which will be external files. And we will also design another webpage then link the all three CSS style files with it. In which if we click the Style 1, so style1.css file Styles will be apply on the HTML webpage. We will do this using JavaScript.

Practice Program in JavaScript:

From this practice program you will understand the use of JavaScript in webpages. How it is important for web development. Let’s start to create something different.

Listing 6: Style1.css

body {
background-color:#FF0099;
}
#record {
background-color:#3366CC;
}
#record h1 {
font-family:"Times New Roman";
}
a:visited { color: #F00;}
a:hover { color:#063;}
a:active { color:#666666;} 

Listing 7: style2.css

body {
background-color:#999966;
}
#record {
background-color:#FF0033;
}
#record h1 {
font-family: "Arial";
}
a:visited {text-decoration: inherit;}
a:hover { color: #336; text-shadow:#9C3;}
a:active { text-decoration:overline;} 

Listing 8: style3.css

body {
background-color:#CC3399;
}
#record {
background-color:#996633;
}
#record h1 {
font-size:20%;
}
a {text-decoration:none;}
a:visited { color:#33F;}
a:hover { color:#963;}
a:active { text-emphasis:circle;}

Listing 9: style.css

/*CSS Style External File for Practice.html*/
body {background-color:#C0C0C0;}
#record {
margin-top:150px;
margin-bottom:150px;
margin-right:150px;
margin-left:450px;
padding:9px 35px; 
width:500px;
border-radius:20px;
background-color:#990033;
}
#buton {
margin-top: -350px;
margin-bottom:150px;
margin-left:0px;
background-color:#66FF99;
width:183px;
}
a {text-decoration:none;}
a:link {color:#FF0000;}
a:visited { color:#33F;}
a:hover { color:#963;}
a:active { text-emphasis:circle;}

Listing 10: practice.html

<!DOCTYPE HTML>
<html>
<head>
<title>Practice Program</title>
<link rel="stylesheet" type="text/css" href="styler.css">
<script type="text/javascript">
functionChangeStyle(filename, filetype){
if (filetype=="css"){ //if filename is an external CSS file
varfileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename);
 }
if (typeoffileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref);
}
</script>
</head>
<body>
<div id="record">
<h1 align="center">Stylish Form</h1>
<form>
<table>
<tr><td>First Name</td><td><input type="text"></td></tr>
<tr><td>Last Name </td><td><input type="text"></td></tr>
<tr><td>Gender</td><td><select>
<option value="0"></option>
<option value="1">Male</option>
<option value="2">Female</option>
</select></td></tr>
<tr>
<td>Comments</td><td><textarea rows="4" cols="50"></textarea></td>
</tr>
</table>
</form>
</div>
<div id="buton">
<table border="1">
<tr><td id="style1"><a href="javascript:ChangeStyle('Style1.css','css')">Click To Apply CSS Style 1</a></td></tr>
<tr><td id="style1"><a href="javascript:ChangeStyle('Style1.css','css')">Click To Apply CSS Style 2</a></td></tr>
<tr><td id="style1"><a href="javascript:ChangeStyle('Style1.css','css')">Click To Apply CSS Style 3</a></td></tr>
</table>
</div>
</body>
</html>

Description of Practice Program in JavaScript:

As you can see the Listings 6 to 10, we have four files. There three are CSS Styles files and one HTML file. The CSS style1.css, style2.css and style3.css are the external files which will be called when the user will click on the links. And the style.css is also an external file which is linked with the practice.html webpage file by using <link> tag. And in practice.html we used JavaScript programming which is calling the external CSS style files to apply on the practice.html. Following this article step by step you will understand the basic uses of JavaScript Programming.

Conclusion:

In this article we learnt the fully basics of JavaScript Programming. Now we can understand what JavaScript programming is, and we will easily learn the Advanced and Intermediate level programming of JavaScript. For any query kindly comments me. Thanks to all visitors.



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?

Did you like the post?

Help us to keep publishing good contents like this.

SUPPORT US

funded

remaining

[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