[Tutorial] Javascript Basics [Part 1]

Introduction:

> Javascript is client-side dynamic programming language. It syntactically resembles Java but being a scripting language such as VBS it is being interpreted rather than compiled. In Javascript every procedure is a function no matter whether it returns a value or not. Also, Javascript is case-sensitive which means that, for example, “A” is interpreted in one way and “a” in another.

Variables:

In Javascript we declare variables with the keyword var. You can also use variables without the need of declaring them:

var glblExample;  
var glblExample = 1;  

With the first one we simply declare the variable and with the second line we both, declare and assign an initial value for it. Take a loot at the glbl string we placed before the name of the variables. We can use it to define the scope of the variable as global which means we can use it anywhere in our code. So as for the variable to be valid in the whole code, it needs to be defined as global on the top of the code before any other functions. It is also not necessary to define the data type for the variables.

There are three types of variables:
[list]
[]Integers - containing numeric values (e.g. 4,88,33)
[]Strings - containing alpha values (e.g. keeper, hackforums)
[*]Booleans - containing logical operators (true() and false())
[/list]

During your process of coding you can assign different types of data for the variables, changing their subtype. For example:

var Firstone = 7;  
var Secondone = 19;  
var Both;  
var Both = Firstone + Secondone;  

The result of this will be 26. But let’s change the type of the first variable to string to see the output we’re gonna get.

var Firstone = "7";  
var Secondone = 19;  
var Both;  
var Both = Firstone + Secondone;  

Converting the first variable to a string value we’ll get the following: 719. Because of that, Javascript automatically converts the second variable to a string as well and the result will be just a merge of the values from both variables. This is called concatenation.

Creating objects:
The creation of objects in Javascript is done with the keyword new. The format is the following:

var Example = new ClassName;  

This line directs Javascript that we are creating a new instance of the class and assign her the name ClassName. In Javascript, strings, integers and arrays are objects. When we create a new instance for one of those types in the following way:

var Example = new String('Keeper');  

this is identical to a variable declared like so:

var Example = 'Keeper';  

Arrays:
Arrays are objects that allow you to store a number of variables into a single one. In arrays you can assign the values to the variables and refer to them without the need of defining a new name for each one.

Simple Arrays:

Every array is an instance for the class Array. As we explained above, we create classes with the keyword new. Let’s take a basic example of an array:

var Hackers = new Array(4);  
Hackers[0] = 'Kevin Mitnick'  
Hackers[1] = 'Robert Morris'  
Hackers[2] = 'Steve Wozniak'  
Hackers[3] = 'Adrian Lamo'  

Note: In Javascript indexing begins from 0 NOT from 1.

You can also declare the elements in the array the following way:

var Hackers = new Array('Kevin Mitnick', 'Robert Morris', 'Kevin Paulsen', 'Adrian Lamo');  

Complex (Multi-dimensional) Arrays

Multi-dimensional arrays are arrays containing arrays. Let’s say, we’ve decided to make our array a little bit more complex by adding another column to it, showing whether the hacker is blackhat, whitehat or grayhat. To create a two-dimensional array, we’ll consider each line as a new array.

var Mitnick = new Array('Kevin Mitnick', 'Blackhat');  
var Morris = new Array('Robert Moriss', 'Blackhat');  
var Steve = new Array('Steve Wozniak', 'Whitehat');  
var Lamo = new Array('Adrian Lamo', 'Grayhat');  

var Hackers = new Array(Mitnick, Morris, Steve, Lamo);  

Operators:
Below are the comparison operators:

[list]
[]== equality
[]!= inequality
[]< less than
[]> greater than
[]<= less than or equal to
[]=> greater than or equal to
[/list]

Below are the logical operators:

[list]
[]! NOT
[]&& AND
[*]|| OR
[/list]

Conditions:

If

The construction and purpose of the operator if is more than obvious.

if(condition){  
   construction 1;  
   construction 2;  
}  

If the value of the condition is true, both, construction 1 and construction 2 are being executed. If not, they don’t.

Else

Else is an expansion for if. It defines the code, that is going to be executed if the value of the condition is false.

if(condition){  
   construction 1;  
   construction 2;  
}  
else {  
  construction 3;  
  construction 4;  
}  

For
The cycle for is a fundamental way for organising the repetition of the programming code.

function Keeper(){  
for(a = 0; a < 5; a++){  
   document.forms[0].elements[0].value =  
   document.forms[0].elements[0].values + '\n' + "The value of a is: " + a;  
   }  
}  

Upon execution of this code you will get the following output:

The value of a is: 0
The value of a is: 1
The value of a is: 2
The value of a is: 3
The value of a is: 4

While
The purpose of the cycle while is the same as the one of for.

function Keeper(){  
while(a < 5){  
   document.forms[0].elements[0].value =  
   document.forms[0].elements[0].values + '\n' + "The value of a is: " + a;  

   a ++;  
   }  
}  

The result will be the same as the one for the previous code.

Do while
do while guarantees at least a single repetition of the code. In this cycle the condition is placed after the code which is to be executed.

function Keeper(){  
do {  
    document.forms[0].elements[0].value =  
    document.forms[0].elements[0].values + '\n' + "The value of a is: " + a;  

    a ++;  
    }  
while (a < 5)  
}  

Conclusion:
I tried to put it as most noob friendly as I could. I will for sure make a part 2 for the embedded objects and other stuff. For any questions leave a reply with them. Thanks for reading!