This free JavaScript tutorial shows you some basis JavaScript tips and tricks to develop your JavaScript applications, web applications better. JavaScript tips and tricks mentioned in this free JavaScript article are: JavaScript Functions, JavaScript Looping, JavaScript Variables, JavaScript Pre-Built Functions and JavaScript Operators, Comments.

Try more JavaScript lessons on jsB@nk as you want:
- Some Basic Tips and Tricks for Speeding Up JavaScript
- The basics of Javascript for beginners
- JavaScript Tutorial 1.1 - The Very Basics

• Demo
• Enlarge
• Reload
• New window

Javascript Looping

The For Loop

You use looping to perform an action over and over again. One of the ways you can loop, is to use what is called a for loop. A for loop continues performing actions until a condition is met. This is the basic structure of a for loop:

for (initial expression; condition to be met; edit the value of expression)
{
... javascript code...
}

An example of a real for loop looks like this:

for (var i = 1; i < 100; i++)
{
document.writelin(i);
}

The above code performs the following actions:

• Create a variable i and assign it an initial value of 1
• Define that the code below will be performed over and over until i is no longer less than 100
• i++, is shorthand for add 1 to i. This action will be preformed after the code below is run through. So, the first number printed will be the number 1.
• The code document.writelin(i); prints the value of i on the browser screen. document.writeln, is a prebuilt function for writing to the browser screen and it is ended with a semicolon (;)
• The curly braces are used to define the code that needs to be performed over and over again.

The While Loop

A while loop can also be used for looping. It's basic structure is:

while (condition)
{
... code...
iterator
}

An example of a real while loop:

while ( i < 100)
{
document.writelin(i);
i++;
}

It performs the same action as the previous for loop.

The Do-While Loop

The Do-While loop is almost identical to the while loop except it doesn't check if the condition has been met before executing the code in curly braces first. It's basic structure is:

do {
... code...
}
while ( i < 100 )

An example of a real do-while loop:

var i = 1;
do{
document.writelin(i);
i++;
}
while( i < 100 )

This code performs the same exact actions as the previous for and while loop.

The For-In Loop

The final looping tool may be a little confusing. Everything in Javascript is considered an object. Objects have variables and functions that they can perform. Programming languages used to be called procedural languages because they mainly performed an action and then another over and over again. Then a new form of programming was invented called object oriented programming. Through OOP, you instead create a bunch of objects that interact with each other. I'll dive more into this subject later, but I thought I should explain OOP before I dive into the next loop.

You use the for-in loop for looping through all of the variables of an object. If you have variables assigned to an object you created, this loop cycles through them. Here is the basic structure of a for-in loop:

for (var objectVariable in objectItself)
{
... code...
}

Here is a real example:

for (var objectVariable in objectItself)
{
infoOnObject = objectName + "." + objectVariable + " = " + objectItself[objectVariable];
document.writelin(infoOnObject);
}

If the previous code is confusing, skip it and we'll come back to it later. Otherwise, this is what it is doing:

• The for-in loop, loops through all of the variables of the object, which is named "objectItself"
• Each time it finds a new variable it assigns that variable to the variable objectVariable
• Then the name of the objects variable and the value of that variable are combined and stored in the variable infoOnObject
• Then the function document.writelin prints out the variable name and variable value, to the browser screen. Ex. "variable1 = 23″

We'll talk a lot more about objects later. Don't worry if you didn't totally grasp this one concept.

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New