Don’t be fooled by the term Java in both. Both are quite different technologies. The key differences can be summarized as follows:

JavaScript variables are dynamically typed, whereas the Java variables are statically typed.

var myVar1 = “Hello”; //string type

var myVar2 = 5; //number type

var myVar3 = new Object( ); //empty object type

var myVar4 = {}; //empty object type — JSON (JavaScript Object Notation) style.

In JavaScript properties and methods are dynamically added, whereas Java uses a template called a class. The myVar3 empty object dynamically adds properties and a method.

myVar3.firstName = “Test1”; // add a property to object

myVar3.lastName = “Test2”; // add a property to object

// add a method

myVar3.someFunction = function( ) {

//.…………

}

JavaScript function can take variable arguments. You can call the function shown below as myFunction( ), myFunction(20), or myFunction(20,5).

function myFunction( value ) {

//.…. do something here

}

JavaScript has an implicit keyword known as the “arguments”, which holds all the passed arguments. It also has a “length” property as in arguments.length to display the number of arguments. Technically an “arguments” is not an array as it does not have the methods like push, pop, or split that an array has. Here is an example.

myFunction(5,10,15,20);

function myFunction(value) {

//value is 5;

//arguments[0] is 5

//arguments[1] is 10

//arguments[2] is 15

//arguments[3] is 20

//arguments.length is 4

}

JavaScript objects are basically like name/value pairs stored in a HashMap<string,object>.

For example, a JavaScript object is represented in JSON style as shown below.

var personObj = {

firstName: “John”,

lastName: “Smith”,

age: 25,

printFullName: function() {

document.write(this.firstName + ” ” + this.lastName);

} ,

printAge: function () {

document.write(“My age is: ” + this.age);

}

You can invoke the methods as shown below

personObj.printFullName();

personObj.printAge();

JavaScript functions are objects as well. Like objects, the functions can be stored to a variable, passed as arguments, nested within each other, etc. In the above example, nameless functions are attached to variables “printFullName” and “printAge” and invoked via these variables. A function that is attached to an object via a variable is known as a “method”. So, printFullName and printAge are methods.

Technically, what is done with the “add” and “sum” functions is that we have created a new function object and attached them to the variables “add” and sum. As you can see in the example below, the “add” variable is assigned to variable “demo”, and the function is invoked via demo(2,5) within the “sum” function.

function add(val1, val2) {

var result = val1 + val2;

alert(“The result is:” + result);

return result;

}

var demo = add;

function sum() {

var output = demo(5, 2);

}

Now the above temp.js under tutorial/js folder can be invoked from an HTML file under tutorial/html as shown below.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

</script>

<title>Insert title here</title>

</head>

<body>

</form>

</body>

</html>

This demonstrates that the functions in JavaScript are objects, and can be passed around. Every function in JavaScript also has a number of attached methods including toString( ), call( ), and apply( ). For example, The temp2.js is stored under js_tutorial/js.

function add(val1, val2) {

var result = val1 + val2;

alert(“Result is:” + result);

return result;

}

var printAdd = add.toString(); //converts the “add” function to string.

function demo() {

alert(printAdd); //alerts the whole source code of the “add” function

}

The demo function can be invoked from an html.The temp2.html is stored under js_tutorial/html.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

</script>

<title>Insert title here</title>

</head>

<body>

</form>

</body>

</html>

The printAdd cannot be invoked from the HTML because this variable stores the string representation of the source code of the “add”function and not the function itself.

JavaScript variables need to be treated like records stored in a HasMap and referenced by name, and not by memory address or pass-by-reference as in Java. The following code snippet demonstrates this.

var x = function () { alert(“X”); }

var y = x;

x = function () { alert(“Y”); };

y(); // alerts “X” and NOT “Y”

x(); // alerts “Y”

Java does not support closure till atleast version 6. A closure is a function plus a binding environment. closures can be passed downwards (as parameters) or returned upwards (as return values). This allows the function to refer to variables of its environment, even if the surrounding code is no longer active. JavaScript supports closure.

In JavaScript a closure is created every time you create a function within a function. When using a closure, you will have access to all the variables in the enclosing (i.e. the parent) function.

var calculate = function(x) {

var myconst = 2;

return function(y) {

return x + y + myconst; // has visibility to parent variable ‘const’

};

}

var plus5 = calculate(5); //plus5 is now a closure

alert(plus5(3)); //returns 10 i.e. x=5, y=3, myconst=2

alert(plus5(7)); //returns 14 i.e x=5, y=7, myconst=2

alert(plus5(10)); //returns 17 i.e x=5, y=10, myconst=2

Java programs can be single threaded or multi-threaded. JavaScript engines only have a single thread, forcing events like

Asynchronous UI Events like mouse click, focus, etc. It is asynchronous because you don’t know when a user is going to click or change a text.
Timer functions like
var id = setTimeout(function, delay); // Initiates a single timer which will call the specified function after the delay. The function returns a unique ID with which the timer can be canceled at a later time.
var id = setInterval(function, delay); // Similar to setTimeout but continually calls the function (with a delay every time) until it is canceled.
clearInterval(id); // Accepts a timer ID (returned by either of the aforementioned functions) and stops the timer callback from occurring. clearTimeout(id);

Ajax responses asynchronously invoking a callback function when the response is sent back from the server. It is asynchronous because, you don’t know how long a server will take to process the ajax request and then to send the responseto execute within the same thread.

Even though all the above time based events appear to be run concurrently, they are all executed one at a time by queuing all these events. This also mean that if a timer is blocked from immediately executing, it will be delayed until the next possible point of execution making it to wait longer than the desired delay. This might also cause the intervals execute with no delay.

Having said this, HTML5 specifies Web Workers, which is a standardized API for multi-threading JavaScript code.

Here are the key points to remember:

JavaScript variables are dynamically typed.
In JavaScript properties and methods are dynamically added.
JavaScript function can take variable arguments.
JavaScript objects are basically like name/value pairs stored in a HashMap<string,object>.
JavaScript functions are objects as well.

Here are some working examples: For the examples shown below, the HTML files are stored under /html sub-folder and JavaScript files are stored under /js sub-folder. The console.log(…) statements are written to your browser’s web console. For example, in firefox, you can view the web console via tools – Web Developer – Web Console. Make sure that the version of Firefox you use has this option. The Web Console is handy for debugging as well.

Example 1: two input values are either added or concatenated depending on their types. If both values of type number then add them, otherwise just concatenate the values. Take note of the JavaScript keywords and functions like typeof, isNaN(..), Number(..), parseInt(..), etc. The “document” is part of the DOM tree representing an HTML document in memory. The method “getElementById(…)” will return the relevant “input” element from the DOM tree, and “value” will return the input value that was entered.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

</script>

<title>Insert title here</title>

</head>

<body>

<p>

</p>

</form>

</body>

</html>

function addOrConcat() {

var val1 = document.getElementById(“val1”).value; //string

var val2 = document.getElementById(“val2”).value; //string

var result = document.getElementById(“result”); //object

var ans = -1; //number

// if val1 and val2 are numbers, add them

if(!isNaN(val1) && typeof parseInt(val2) == ‘number’) {

ans = Number(val1) + Number(val2); //add numbers

}else {

ans = val1 + val2; //string concat

}

result.innerHTML = “Result is: ” + ans;

// write to browser console.

console.log(“val1 is of type ” + typeof val1);

console.log(“result is of type ” + typeof result);

console.log(“ans is of type ” + typeof ans);

}

Example 2: Very similar to Example 1, but uses objects, and passes the relevant values from the call within HTML itself. It also uses the toString( ) method to convert a function object to display its source code.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

“http://www.w3.org/TR/html4/loose.dtd”>

<html>

<head>

</script>

<title>Insert title here</title>

</head>

<body>

<input type=”button” value=”evaluate”

onclick=”addOrConcat(document.getElementById(‘val1’).value,document.getElementById(‘val2’).value)”/>

<p>

</p>

</form>

</body>

</html>

function addOrConcat(val1,val2) {

var evalObj = new Object(); //create an empty object

evalObj.input1 = val1; // add a property of type string

evalObj[‘input2’] = val2; // add a property of type string

evalObj.result = document.getElementById(“result”); // add a property of type object

//add a method

evalObj.evaluate = function() {

if(!isNaN(this.input1) && typeof parseInt(this.input2) == ‘number’) {

this.ans = Number(this.input1) + Number(this.input2); //add numbers

}else {

this.ans = evalObj.input1 + this.input2; //string concat

}

this.result.innerHTML = “Result is: ” + this.ans;

}

evalObj.evaluate(); //call the method evaluate and “this” refers to evalObj

console.log(evalObj.evaluate.toString());

}

Example 3: Similar to Example 2, with minor modifications to the JavaScript file to demonstrate keywords like “arguments”

function addOrConcat() {

var evalObj = new Object(); // create an empty object

evalObj.input1 = arguments[0]; // this is value1

evalObj[‘input2’] = arguments[1]; // this is value2

evalObj.result = document.getElementById(“result”); // add a property of type object

//add a method

evalObj.evaluate = function() {

if(!isNaN(this.input1) && typeof parseInt(this.input2) == ‘number’) {

this.ans = Number(this.input1) + Number(this.input2); //add numbers

}else {

this.ans = evalObj.input1 + this.input2; //string concat

}

this.result.innerHTML = “Result is: ” + this.ans;

}

evalObj.evaluate(); //call the method evaluate and “this” refers to evalObj

console.log(evalObj.evaluate.toString());

}