Javascript: Loops and Conditional Statements

Hi Everyone,

This is the 3rd installment of the Javascript series. Here, we will look at loops and conditional statements for Javascript.

Loops

The coding below shows how a Javascript for loop looks like:

var count = 10;
for (var i=0; i < count; i++)
{
    // statements
}

This will loop from i = 0 until i = 9. The counter, which is i, will increment after each loop (notice i++).  i++ can be changed to i-- if the counter starts from a high number and then incrementally decreasing.

Another loop will be the while loop as shown below. The statements in the while loop will be performed while the condition is true or being met.

while (condition)
{
   // statements
}

Conditional Statements

We can also perform conditional statements using Javascript. The most common one will be the if...else and the if...else if...else statements.


if (condition)
{

}
else
{

}


or 


if (condition)
{

}
else if (condition)
{


}
else
{


}

If there are more conditions, then the if...else statement should be used. The else statement will be perform the required coding if any of the conditions is not met. It is the default action to be performed. 

If there is only one condition to check, then if the condition is not met, it will immediately performs the action in the else statement.

Another conditional statement will be the switch statement. If there are a lot of conditions to check, the switch statement is the alternative way of the if...else statements. It will look simplified and improves the performance of Javascript programming. 

The syntax is as below:

switch (condition)
{
       case value1:
             statement
             break;


       case value2:
            statement
            break;
       case value3: value4:...
            statement
            break;
       default:
            // break
}


The first line will indicate which condition will be checked. Then, the case statements will indicate the possible values that we need to check. There can be multiple values for a case as indicated in case value3: value4:. It is neater if there are a lot of values to be checked.

That's all for today. 

Please feel free to comment or indicate if there are any mistakes I made. Learning does not end. It is a continuous process. I may have a lot of experience in Javascript (nearly 4 years now) but I may not know everything about Javascript because I may not use them.

Cheers,

Rogerkoo

Javascript: Functions and Variable Declarations

This is Part II of the Javascript Series.


Javascript Functions


We can write functions in Javascript. The coding for functions is this:


function testFunction()
{


}


I prefer to group the {} in one line. It is neater and it is not as confusing. You can see it at the same line. It is useful if there are a lot of functions written.


Functions is used to perform actions that user requires. 


Examples of actions are as below: 

1. Perform screen navigations from one page to another or opening a popup
2. Save information to the system
3. Able to execute server script such as VBScript
4. Hide and display certain fields 
5. Perform validation checking
6. Perform simple calculations
7. Control how a page is being displayed on the screen

Variable Declarations


Here are how we declare variables in Javascript. There are several ways to declare methods. We can declare variables in one line or multiple lines as shown below.


var a;
var b;


var a,b;


Assigning Variables
After declaring variables, we can assign values to the variables.


var a = "First variable";
var b = "Second variable";


var a = "First variable";var b = "Second variable";


We can also assign value using this method:


var a,b;
a = "First variable";
b = "Second variable";


This concludes the second part on Javascript. We will be looking at "For" loops and "If' statements. It is slightly similar to the style used in Java and C#. 


For your information, Javascript <> Java. 


Cheers,


Rogerkoo

Javascript: Introduction

Javascript is a scripting language used to enhance interactivity to HTML. It is able to detect various events such as onClick (when user clicks on a button or any HTML element), onChange (when user selects a value from a drop down or list box), onBlur (when user clicks outside the HTML element or lost focus), onKeyUp (when user presses a key and releases it) and onKeyDown (when a user presses the keyboard). 


It is also used to control the design of the HTML webpage. This is used together with the events mentioned above. A web designer can use it to control how HTML elements are being displayed on the webpage. It can automatically converts all text that are typed in to uppercases. If a user clicks on a drop down value, the web developer can display those elements that needs to be shown and hide the others.


It can also be used to get the values of a textbox or a drop down or field by using Javascript methods which will be discussed later.


It can be added into the HTML page directly or linked to an external Javascript file (.js). Below is an example of how Javascript is added to the HTML code:


<script type="text/javascript">
    // add javascript coding here.
</script>


Javascript can also be placed to an external file. This is separate the HTML code with the Javascript code. It also enhances the performance of the webpage. The Javascript file will be cached and thus reduces the loading time. It can be linked from HTML to the external Javascript using this code below. For example, my external script name is test.js.


<script type="text/javascript" src="test.js"></script>


Other references:

1. W3Schools:Javascript Tutorial
2. Internet.com: How to place Javascripts in External Files

Brief Introduction

Welcome to Programmer's Vault. This is the place where you learn and understand programming. It also serves as a programming reference site.


Here's a brief introduction of myself:


I have been working for nearly 4 years in an IT software provider specialising in banking systems. I also have a Bachelor of Computing degree from Monash University. 


Throughout my university and working experiences, I have studied and learned software engineering skills. I also studied the Software Development Life Cycle (SDLC) before.


Here are some of my skillsets:
Javascript
VBScript
SQL & SQL Server Reporting Services
Java
C#.NET / Visual Studio.NET
HTML / XHTML
CSS
XML
MYOB