|
|
|
|
|
|
Basics of JavaScript - Part 4
This article will explain, basics of JavaScript programming including Function Processing (by value and by reference), statements, if statement, if-else statement, if-elseif-elseif-else statement, switch statement, iteration, while loop, do while loop, for loop, for in loop etc.]
|
|
|
Author Rank :
|
|
|
Page Views :
|
1127
|
|
Downloads :
|
0
|
|
Rating :
|
Rate it
|
|
Level :
|
Beginner
|
|
|
Function Processing (Pass by Value/Reference)
In JavaScript, their no any pointer (*) and addressof (&) operator then, we
don't have highly defined concept over pass by value or pass by reference like
C, C++ or VB languages.
Note: [In this article, we have already aware about function in previous
article]
Pass by value
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
{
// x is equal to 4
x = 5;
// x is now equal to 5
}
var x = 4;
alert(x);
// x is equal to 4
myfunction(x);
alert(x);
// x is still equal to 4
}
</script>
</head>
<body>
<input type="button" value="Click me!" onclick="displaymessage()" />
</body>
</html>
Pass by reference
function myobject()
{
this.value = 5;
}
var o = new myobject();
alert(o.value);
// o.value = 5
function objectchanger(fnc)
{
fnc.value = 6;
}
objectchanger(o);
alert(o.value);
// o.value is now equal to 6
Calling a function
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
<body>
<input type="button" value="Click me!" onclick="displaymessage()" />
</body>
</html>
Function with arguments
<html>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt);
}
</script>
</head>
<body>
<input type="button" onclick="myfunction('Hello')" value="Call function">
</body>
</html>
Statements
A statement is an expression that has some side effect. In other word, it does
something that affects the overall functioning of the program. When we create
combine group of statements into a single statement, we cerate new statement
blocks and they also delimited by curly brackets as given in example,
function displaymessage()
{
abc=xyz;
abc=abc*10;
window.alert("xyz=="+(abc/10));
}
Statements are grouped into three primary categories:
(i) if statements (if, else, else if)
(ii) switch statements
(iii) iterative statements
If Statements
In if statements, if condition is true, then perform the statement block
associated with it, otherwise don't. Let's take a look at syntax
if (condition)
{
statement block;
}
The if-else Statements
In if-else statement, if condition is true, then perform the statement block
associated with it otherwise perform the statement of else block. Let's take a
look at syntax
if (condition)
{
statement block;
}
else
{
statement block;
}
The if-else-if Statements
In if-else-if statement, there are multiple conditions and one alternate
statement. If any of condition is not being fulfilled then alternate statement
block will execute. Let's take a look at syntax
if (condition)
{
statement block;
}
else
{
if(condition)
{
statement block
}
}
else
{
if(condition)
{
statement block;
}
}
else
{
statement block;
}
Example
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
var a=9;
if(a==8)
{
alert("equal to 8");
}
else if(a==9)
{
alert("equal to 9");
}
else if(a==11)
{
alert("equal to 11");
}
else
{
alert("equal to 10");
}
}
</script>
</head>
<body>
<input type="button" value="Click me!" onclick="displaymessage()" />
</body>
</html>
Switch Statements
Switch statements are used to perform different actions based on different
conditions. Switch only evaluate a single expression, it compares that single
expression to a series of possible values.
switch (expression)
{
case expression:
statement;
break;
case expression:
statement;
break;
case expression:
statement;
break;
default:
statement;
break;
}
Example to find day
<html>
<body>
<script type="text/javascript">
// Date() is object creates data object variable
/*
getTime()-Number of milliseconds since 1/1/1970 @ 12:00 AM
getSeconds()-Number of seconds (0-59)
getMinutes()-Number of minutes (0-59)
getHours()-Number of hours (0-23)
getDay()-Day of the week(0-6). 0 = Sunday, ., 6 = Saturday
getDate()-Day of the month (0-31)
getMonth()-Number of month (0-11)
getFullYear()-The four digit year (1970-9999)
*/
var d = new Date();
theDay=d.getDay();
switch (theDay)
{
case 1:
document.write("<b>Finally Monday</b>");
break;
case 2:
document.write("<b>Finally Tuesday</b>");
break;
case 3:
document.write("<b>Finally Wednesday</b>");
break;
case 4:
document.write("<b>Finally Thursday</b>");
break;
case 5:
document.write("<b>Finally Friday</b>");
break;
case 6:
document.write("<b>Super Saturday</b>");
break;
case 0:
document.write("<b>Sleepy Sunday</b>");
break;
default:
document.write("<b>I'm really looking forward to this weekend!</b>");
}
</script>
</body>
</html>
Example to find current time
<html>
<body>
<h4>It is now
<script type="text/javascript">
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10)
{
minutes = "0" + minutes
}
document.write(hours + ":" + minutes + " ")
if(hours > 11)
{
document.write("PM")
}
else
{
document.write("AM")
}
</script>
</h4>
</body>
</html>
Example to find Date
<html>
<body>
<h4>It is now
<script type="text/javascript">
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write(month + "/" + day + "/" + year)
</script>
</h4>
</body>
</html>
Iteration
Iteration statements determine how many times the delimited code is executed
based on the condition.
while Loop Statements
The while loop statement allows us to do something over and over while a
conditional statement is true. Let's take a look at example
<html>
<body>
<script type="text/javascript">
var myCounter = 0;
var linebreak = "<br />";
document.write("While loop is beginning");
document.write(linebreak);
while(myCounter < 10){
document.write("myCounter = " + myCounter);
document.write(linebreak);
myCounter++;
}
document.write("While loop is finished!");
</script>
</body>
</html>
Redirect example to new location
<html>
<head>
<script type="text/javascript">
function delayer()
{
window.location = "http://www.yahoo.com"
}
</script>
</head>
<body onLoad="setTimeout('delayer()', 5000)">
<h2>Prepare to be redirected!</h2>
<p>This will automatically be redirected to new page.
If on local host the use "../javascriptredirect.php".
</p>
</body>
</html>
do…while Loop Statement
It is similar to while loop statement unless it has only a do object to do the
work. The main difference between while loop and do while loop is, while only
executes when condition fulfils but do while first executes and then check for
condition to repeat. Do while executes once if condition is true or false. Let's
take a look at example
<html>
<body>
<script language="javascript">
day = 1;
do
{
if(day == 1){
document.write("Saturday<br>");
}else if (day == 2){
document.write("Sunday<br>");
}else if (day == 3){
document.write("Monday<br>");
}else if (day == 4){
document.write("Tuesday<br>");
}else if (day == 5){
document.write("Wednesday<br>");
}else if (day == 6){
document.write("Thursday<br>");
}else if (day == 7){
document.write("Friday<br>");
}
day++;
} while (day<=7)
</script>
</body>
</html>
for Loop Statement
For loop statement allows for incremental or detrimental processing based on
some incremental or detrimental variable. Let's take a look at syntax
for (initial_state; condition; increment/decrement)
{
statements;
}
Example
<html>
<body>
<script language="javascript">
var num=prompt("enter max number to print table :","type here");
var x;
var sum=0;
for(x=1;x<=num;x++)
{
sum=sum+x;
document.write(x + "<br>");
}
document.write("<b>Total=<b>");
document.write(sum + "<br>");
</script>
</body>
</html>
for….in Loop Statements
The for…in Loop Statement loops through the elements of an array or through the
properties of an object. Let's take a look at example
<html>
<body>
<script type="text/javascript">
var x;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (x in mycars)
{
document.write(mycars[x] + "<br />");
}
</script>
</body>
</html>
Output
Saab
Volvo
BMW
HAVE A HAPPY CODING!
|
|
Comment Request!
Thank you for reading this post. Please post your feedback, question, or comments about this post
Here.
|
|
|
|
|
Login
to add your contents and source code to this article
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
C# Consulting is founded in 2002 by the founders of C# Corner. Unlike a traditional
consulting company, our consultants are well-known experts in .NET and many of them
are MVPs, authors, and trainers. We specialize in Microsoft .NET development and
utilize Agile Development and Extreme Programming practices to provide fast pace
quick turnaround results. Our software development model is a mix of Agile Development,
traditional SDLC, and Waterfall models.
|
|
Click here to learn more about C# Consulting. |
|
|
|
|
|
|
|
Introducing MaxV - one click. infinite control. Hyper-V Hosting from MaximumASP.
Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon.
Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees.
As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
|
Dynamic PDF
ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications.
|
Nevron Chart for .NET 2010.1 Now Available
The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.
|
ASP.NET 4 Hosting
Get 2 Months Free of ASP.NET Hosting for Only $4.95/month! Receive FREE MS SQL and MySQL Databases Including ASP.NET 4/3.5, MVC 3.0, Silverlight 4, Windows 2008/IIS 7.0 Plus FREE IIS 7 Modules. Host UNLIMITED ASP.NET Web Sites – Click Here!
|
|
|
|
|
|
|
|
|
|
|
|
|