1. HCI Lab 2

2. This Lab Introduction to JavaScript
Understand Javascript function definitions and function call
Understand Javascript scopes
Create a table in the main column
Write JS function to create a new table

3. Introduction to Javascript
Most popular programming language on the web
charts the number of active repositories and overall popularity of the language on GitHub
Javascripts’ popularity is attributed to famous browsers like Google Chrome, for which the V8 engine is written in Javascript

4. Javascript is used in: Web browsers
Databases such as MongoDB and CouchCB use JS as their scripting and query language
Projects such as Node.js and io.js provide powerful platforms to develop scalable server environments using JS
Emscripten ( is a low-level virtual machine based project that compiles C and C++ into highly optimizable JS in an asm.js format. This allows us to run C and C++ on the web at near native speed.

5. JS Variables
A JavaScript variable name must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0-9). As JavaScript is case sensitive, letters include the characters A through Z (uppercase) and the characters a through z (lowercase).
New variables in JavaScript should be defined with the var keyword.
If you declare a variable without assigning a value to it, its type is undefined by default.
If you don't declare your variable with the var keyword, they become implicit globals. implicit globals are a terrible thing—we will discuss this in detail later
Remember that you should always declare a variable with the var keyword

6. JS Variables
var a; //declares a variable but its undefined var b = 0; console.log(b); //0 console.log(a); //undefined console.log(a+b); //NaN (i.e. Not a Number)

7. JS Variables
There's no such thing as an integer in JavaScript. JavaScript uses a 64- bit floating point representation, which is the same as Java's double.
If you intend to code extremely precise financial systems, you should represent $ values as cents to avoid rounding errors.

8. JS Variable Type Conversion
You can use the parseInt() and parseFloat() methods to convert a string expression to an integer or float

9. JS Strings
In JavaScript, strings are a sequence of Unicode characters (each character takes 16 bits). Each character in the string can be accessed by its index. The first character index is zero. Strings are enclosed inside " or ‘ —both are valid ways to represent strings.

10. JS Functions, Objects, and Closures
 In JavaScript, there is a strong interconnection between objects, functions, and closures.
Understanding the strong relationship between these three concepts can vastly improve our JavaScript programming ability, giving us a strong foundation for any type of application development.

11. JS Functions
 The most important fact about functions is that in JavaScript, functions are first-class objects.
They are treated like any other JavaScript object.
Just like other JavaScript data types, they can be referenced by variables, declared with literals, assigned to variables or array entries, returned from other functions, and even passed as function parameters.

12. JS Functions: (1) function statement
Functions are the pieces where you will wrap all your code, hence they will give your programs a structure.
One way to declare a function is as a function statement (an object with the same name as the function is created during compilation):
function add(a,b) {
return a+b; }

13. JS Functions: (2) Function expression
We create an anonymous function and assign it to the “add” variable
The function is invoked just like the function statement
We CANNOT use recursion with this style of function declaration (because the function has no name so it cannot call itself)
var add = function(a,b){
return a+b; }

14. JS Functions: (3) Self-invoking function expressions
(function sayHello() { console.log("hello!"); })();

15. Passing function as function parameter
function changeCase(val) { return val.toUpperCase(); } function demofunc(a, passfunction) { console.log(passfunction(a)); } demofunc("smallcase", changeCase);

16. Scoping In JS, scope refers to the current context of code
A variable’s scope is the context in which the variable exists (i.e. from where we can access the variable)
Scopes can be locally or globally defined

17. Global Scope
Any variable that you declare is by default defined in global scope. This is one of the most annoying language design decisions taken in JavaScript.
As a global variable is visible in all other scopes, a global variable can be modified by any scope.
Global variables make it harder to run loosely coupled subprograms in the same program/module. If the subprograms happen to have global variables that share the same names, then they will interfere with each other and likely fail, usually in difficult-to-diagnose ways. This is sometimes known as namespace clash.

18. Global scope
If a variable is defined outside of any function, it is considered a global variable
//Global Scope
var a = 1;
function scopeTest() {
a = 2; //Overwrites global variable 2
console.log(a); }
console.log(a); //prints 1
scopeTest(); // global value is overwritten
console.log(a); //prints 2

19. Local Scope
 Variables declared within a function are local variables and are only accessible within that function or by functions inside that function
var scope_name = "Global";
function showScopeName () {
// local variable; only accessible in function
var scope_name = "Local";
console.log (scope_name); // Local }
console.log (scope_name); //prints - Global
showScopeName(); //prints – Local

20. Scopes
JavaScript variables are scoped at the function level. You can think of this as a small bubble getting created that prevents the variable to be visible from outside this bubble. A function creates such a bubble for variables declared inside the function.

21. Scopes You can visualize the bubbles as follows:
-GLOBAL SCOPE |
var g =0; |
function foo(a) { | |
var b = 1; | |
//code | |
function bar() { | | |
// |ScopeBar | ScopeFoo |
} | | |
// code | |
var c = 2; | |
} | |
foo(); //WORKS |
bar(); //FAILS | |

22. Scoping Rules
When resolving a variable, JavaScript starts at the innermost scope and searches outwards.
We can use functions to introduce different scopes for variables
There are certain problems to this:
If we must create a named function, we will pollute the global scope because we are creating too many function names
We have to keep calling these functions for them to execute. This can make the code harder to read

23. Immediately Invoked Function Expression (IIFE)
To solve the 2 problems above, we can create a function that executes itself immediately
Or you can omit the function name:
(function foo(){ /* code */ })();
(function(){ /* code */ })();

24. IIFE
Omitting function name avoids polluting the global namespace but it introduces some issues:
You can’t see the function name in the stack traces, debugging such code is very difficult
You cannot use recursion on anonymous functions
Overusing anonymous IIFEs sometimes results in unreadable code

25. Function invocation
As a function: if the keyword this is used in any of the functions below, it refers to the global object which is window
function add() {}
add();
var substract = function() { };
substract();

26. Function Invocation
As a method: here the keyword this is bound to the object
var person = {
name: 'Albert Einstein',
age: 66,
greet: function () {
console.log(this.name); } };
person.greet();

27. Function Invocation Constructor:
Each JS object has an internal state that holds the object’s variables and methods
The constructor definition is exactly the same as any function definition
The only difference is in the invocation
Constructor is always called with a new operator
ArrayList theList = new ArrayList();

28. Candy Crush Code

29. Step 1: Create the rules for new game Step 2: Create a new table

30. Step 1: Create the rules for new game  just call the function that is already available in rules.js

31. Create a new table  we will implement this

33. Now the page looks like this