HCI Lab 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

Introduction to Javascript Most popular programming language on the web http://githut.info/ 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

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 (http://kripken.github.io/emscripten-site/) 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.

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

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)

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.

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

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.

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.

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.

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; }

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; }

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

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

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

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.

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

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

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.

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 | ----------------------------------------------------------|

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

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 */ })();

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

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();

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();

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();

Candy Crush Code

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

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

Create a new table  we will implement this

Now the page looks like this