Presentation is loading. Please wait.

Presentation is loading. Please wait.

Click to add Text Javascript Presented by Bunlong VAN Basic.

Similar presentations


Presentation on theme: "Click to add Text Javascript Presented by Bunlong VAN Basic."— Presentation transcript:

1 Click to add Text Javascript Presented by Bunlong VAN http://geekhmer.github.io Basic

2 The Disclaimer

3 Data Types ObjectObject FunctionFunction NumberNumber StringsStrings BooleansBooleans Null – a values isn't anythingNull – a values isn't anything Underfined – default value for variables and parameters, value of missing members in the object etc.Underfined – default value for variables and parameters, value of missing members in the object etc.

4 typeof Prefix Operator The typeof prefix operator returns a string identifying the type of valueThe typeof prefix operator returns a string identifying the type of value Use instanceof insteadUse instanceof instead typeof(true); // “boolean” [] instanceof Array; // true

5 Object Objects can contain data and methodsObjects can contain data and methods Objects can inherit from other objectsObjects can inherit from other objects An object contain an unordered collection of name/value pairsAn object contain an unordered collection of name/value pairs Values can be any type including other objectsValues can be any type including other objects JSONJSON

6 Object Literals Object are wrapped in {}Object are wrapped in {} Names can be stringNames can be string Value can be an expressionValue can be an expression ; used for separation; used for separation, separate pairs, separate pairs var myObject = { name: “Javascript”, “data”: { foo: 10, bar: 20 } } var name = myObject.name; var foo = myObject.data.foo;

7 Array Array inherits from Object (like every other object in JavaScript)Array inherits from Object (like every other object in JavaScript) No need to provide length when creating a new oneNo need to provide length when creating a new one Unlike object they have a length member and is always 1 larger than the highest subscriptUnlike object they have a length member and is always 1 larger than the highest subscript concat, join (can also be used for concatenating multiple strings), pop, push, slice, sort, splice

8 Array (Con.) value.constructor === Array Use construction Use construction value instanceof Array Use instanceof Use instanceof [].constructor === Array; // true [] instanceof Array; // true

9 Function They are first class ObjectsThey are first class Objects Can be passed, stored and returned just like any valueCan be passed, stored and returned just like any value Inherit from ObjectInherit from Object Function can appear anywhere an expression can appearFunction can appear anywhere an expression can appear

10 Closure (Function Con.) function sayHello(name) { var text = 'Hello ' + name; var text = 'Hello ' + name; var sayAlert = function() { alert(text); }; var sayAlert = function() { alert(text); }; return sayAlert; return sayAlert;} var say = sayHello(“Foo”); say(); Function can be contained inside other functionsFunction can be contained inside other functions Inner function has access to the variable and parameters of the function it is contained withinInner function has access to the variable and parameters of the function it is contained within This is static or lexical scopingThis is static or lexical scoping The scope that inner function has access to continues even after the parent function has returned is called ClosureThe scope that inner function has access to continues even after the parent function has returned is called Closure

11 Function (Con.) Function inside an object is called a methodFunction inside an object is called a method When invoked with too many arguments, the rest are ignoredWhen invoked with too many arguments, the rest are ignored When invoked with fewer arguments, the rest are set to undefinedWhen invoked with fewer arguments, the rest are set to undefined var showMe = function(foo, bar) { return foo + bar; } showMe(“foo”, “bar”, “foobar”); // 3rd argument will be ignored showMe(“foo”); // bar will be undefined

12 Function (Con.) When a function is invoked in method format, this refers to the object containing it.When a function is invoked in method format, this refers to the object containing it. var foo = { baz: 10, bar: function() { console.log(this.baz);}};foo.bar();

13 Function (Con.) When object is invoked in function, this refers to the global object.When object is invoked in function, this refers to the global object. var globalVariable = 5; function test() { console.log(this.globalVariable);}test

14 Function (Con.) When new function is used (implicit return is optional), then this returns the new object createdWhen new function is used (implicit return is optional), then this returns the new object created var Test = function(id) { this.something = id; this.foo = function() { console.log(“this is a test: ” + this.something); }} var t = new Test(10), t1 = new Test(11); t1 = new Test(11);t.foo();t1.foo();

15 Function (Con.) When function is invoked, in addition to its parameters it has a special parameter called argumentsWhen function is invoked, in addition to its parameters it has a special parameter called arguments Contains all arguments from invocationContains all arguments from invocation Arguments.length will tell you how many arguments were passedArguments.length will tell you how many arguments were passed Arguments is not of type Array evenArguments is not of type Array even Though it has lengthThough it has length var foo = function() { var a = new Array(); console.log(typeof a); console.log(typeof arguments); console.log(arguments instanceof Object); console.log(arguments instanceof Array) }foo();

16 global object As crockford says, the object that dare not speak of its nameAs crockford says, the object that dare not speak of its name It is the container for all global variables and all built in objectsIt is the container for all global variables and all built in objects On browsers window is the global objectOn browsers window is the global object Variable defined with a var makes it local to the scopeVariable defined with a var makes it local to the scope

17 global variables are evil Un-namespaced values can clash each others valuesUn-namespaced values can clash each others values Use of it should be minimized or gotten rid of totallyUse of it should be minimized or gotten rid of totally Variables defined in the function / module should start with var otherwise they have a global scopeVariables defined in the function / module should start with var otherwise they have a global scope

18


Download ppt "Click to add Text Javascript Presented by Bunlong VAN Basic."

Similar presentations


Ads by Google