OLPCities/JavaScript basic concepts

Variables

JavaScript data can be objects or not. By example: if you declare:

x = "Peter";

we don't have an object. But you can declare:

x = new String("Peter");

and we will have an object of the Class String having methods etc.. The same for numbers and booleans. If we have "not typed" data, conversions are done automatically sometimes. By example:

x = "12";
y = 10;
z = '7';

And we can have:

total = 8 + x;

where "total" will be: 20.

A "no value" is assigned with the word: null.

Operators

 
+    Addiction
-    Subtraction
*    Multiplication
/    Division

The operator Modulus: % is curious. If :

x = 10 % 3;

The x value is: 1.

The % operator yields the remainder of its operands from an implied division; the left operand is the dividend and the right operand is the divisor.

The possible result of a boolean operation is : true or false. The operators are:

==    is equal to
!=    is not equal to
>     is greater than
>=    is greater than or equal
<     is less than
<=    is less than or equal

We can use parenthesis to define better a operation - or its precedence. If we write:

x = (4 >= 5);

The value of x is: false.

An usual error is to use the assignment operator: = instead the boolean operator: ==

It's usual the use of the logical operators in boolean operations:

&&    Logical AND
||    Logical OR

What is the x value?: x = (4>=5) && (2==2);

The answer is: false. BOTH need to be true to have a true.

And what is the y value?:

y = (4>=5) || (2==2);

The answer is: true. Only ONE needs to be true to have a true

Using the operator: // in a line of code means that nothing until the end of the line will be processed. Example:

x = 10 % 3; //We will have this.x=1 because 10=3+3+3+1

We can use /* ... */ for a multi-line comment. Example:

/* This program was created by XYZ Company
   Version : 1.43
   Contact for help: John Doe - ramal 678
*/

before the "real" lines of code of the program.

For concatenation of strings, for example:

x = 'ABC' + 'DEF';

The x value is: ABCDEF.

It's usual, if we have a "counter", to do an operation like that:

 
i = i + 1;

Is the same to use only:

 
i++;

There are a decrement operator. So, what is this?:

i--;

Sometimes we need to define a collection of elements: an array.

We can create an array and fill it with elements using, for example:

weapons = new Array('Pistol','Rifle','Lance');

We can "read" an element of an array using its index ( the first is ZERO!!!). So, if:

myWeaponNow =  weapons[1];

in the property myWeaponNow we have a: Rifle..

We can create an empty array and fill it later.For example, an array with 100 elements:

myClients = new Array(100);
myClients[0] = 'ADOBE';
myClients[7] = 'Microsoft';

Functions

A function is a group of statements (lines of code) created to do a defined action.

They are created to facilitate the logic of the program or if a same group of statements is used many times in the script.

A function can (or not) have parameters and can (or not) rreturn a value. Lets go to see a function convertFC(parameter) we create, that have a parameter (the temperatute in Fahrenheit) and returns a value (the temperatute in Celsius).

 
 convertFC=function (fdegrees){ 
  cdegrees = (fdegrees - 32) * 5 / 9; 
 return  cdegrees; 
}

Conditional Statements

The classic if...then...else is used to run different blocks of lines of code depending on conditions:

if(1st condition){
 //code to be executed if 1st condition is true
}
else if(2nd condition){
 //code to be executed if 2nd condition is true
}
else{
 // code to be executed if all the other condition are false
}

Loop

The also classic loop for

for(initializer; test; update){
 //code 
 //code
}

There are three expressions inside the parentheses, separeted by semicolons. The first expression, usually called the initializer is where you set up the loop, giving values to any variable that are tested. The initializer expression in a loop block is only executed once, and it is always executed, regardless of whether the test condition is true or false.

The test condition is a boolean expression. The expression is evaluated each time and, if found true, the statements in the body of the block are executed. However, before the test condition evaluation, is executed the update expression.

Example:

for(i = 0; i< 10; i++){

//to do something

}

There are the while:

while(condition){
 //to do something
}

and the do while

do{
 //something
} while (condition);

The "time step" loop

The OLPCities architecture includes the creation of a loop that dependents of the framerate .

What is framerate?

An OLPCity is really a 2D figure that needs to be redesigned many times to show the eventual movement of the avatar, an animation etc. The interval between redesigns (re-renderings) depends of the velocity of the CPU of the user.It will be fast on fast computers and slow on slow computers. The same for our loop.

You can see examples of the use of the "time step" at the lessons of the tutorials serie. The basic lines of code are:

...
function init(){
  ...
  Gl_hook("timestep()");	 
  Gl_start();	 
}
function timestep(){
  //to do something at each timestep
}
...

There are many tutorials about JavaScript at the Internet. You can do a "google" using the words "JavaScript tutorials" by example.