Download - Basic Javascript
![Page 1: Basic Javascript](https://reader034.vdocuments.mx/reader034/viewer/2022052601/559445811a28ab0e738b458a/html5/thumbnails/1.jpg)
Click to add Text
Javascript
Presented by Bunlong VAN
http://geekhmer.github.io
Basic
![Page 2: Basic Javascript](https://reader034.vdocuments.mx/reader034/viewer/2022052601/559445811a28ab0e738b458a/html5/thumbnails/2.jpg)
The Disclaimer
![Page 3: Basic Javascript](https://reader034.vdocuments.mx/reader034/viewer/2022052601/559445811a28ab0e738b458a/html5/thumbnails/3.jpg)
Data Types
•Object•Function•Number•Strings•Booleans•Null – a values isn't anything•Underfined – default value for variables and parameters, value of missing members in the object etc.
![Page 4: Basic Javascript](https://reader034.vdocuments.mx/reader034/viewer/2022052601/559445811a28ab0e738b458a/html5/thumbnails/4.jpg)
typeof Prefix Operator
•The typeof prefix operator returns a string identifying the type of value•Use instanceof instead
typeof(true); // “boolean”
[] instanceof Array; // true
![Page 5: Basic Javascript](https://reader034.vdocuments.mx/reader034/viewer/2022052601/559445811a28ab0e738b458a/html5/thumbnails/5.jpg)
Object
•Objects can contain data and methods•Objects can inherit from other objects•An object contain an unordered collection of name/value pairs•Values can be any type including other objects•JSON
![Page 6: Basic Javascript](https://reader034.vdocuments.mx/reader034/viewer/2022052601/559445811a28ab0e738b458a/html5/thumbnails/6.jpg)
Object Literals
•Object are wrapped in {}•Names can be string•Value can be an expression•; used for separation•, separate pairs
var myObject = {name: “Javascript”,“data”: { foo: 10, bar: 20 }
}
var name = myObject.name;var foo = myObject.data.foo;
![Page 7: Basic Javascript](https://reader034.vdocuments.mx/reader034/viewer/2022052601/559445811a28ab0e738b458a/html5/thumbnails/7.jpg)
Array
•Array inherits from Object (like every other object in JavaScript)•No need to provide length when creating a new one•Unlike 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
![Page 8: Basic Javascript](https://reader034.vdocuments.mx/reader034/viewer/2022052601/559445811a28ab0e738b458a/html5/thumbnails/8.jpg)
Array (Con.)
value.constructor === Array
• Use construction
value instanceof Array
• Use instanceof
[].constructor === Array; // true
[] instanceof Array; // true
![Page 9: Basic Javascript](https://reader034.vdocuments.mx/reader034/viewer/2022052601/559445811a28ab0e738b458a/html5/thumbnails/9.jpg)
Function
•They are first class Objects•Can be passed, stored and returned just like any value•Inherit from Object•Function can appear anywhere an expression can appear
![Page 10: Basic Javascript](https://reader034.vdocuments.mx/reader034/viewer/2022052601/559445811a28ab0e738b458a/html5/thumbnails/10.jpg)
Closure (Function Con.)
function sayHello(name) {var text = 'Hello ' + name;var sayAlert = function() { alert(text); };return sayAlert;
}var say = sayHello(“Foo”);say();
•Function can be contained inside other functions•Inner function has access to the variable and parameters of the function it is contained within•This is static or lexical scoping•The scope that inner function has access to continues even after the parent function has returned is called Closure
![Page 11: Basic Javascript](https://reader034.vdocuments.mx/reader034/viewer/2022052601/559445811a28ab0e738b458a/html5/thumbnails/11.jpg)
Function (Con.)
•Function inside an object is called a method•When invoked with too many arguments, the rest are ignored•When 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 ignoredshowMe(“foo”); // bar will be undefined
![Page 12: Basic Javascript](https://reader034.vdocuments.mx/reader034/viewer/2022052601/559445811a28ab0e738b458a/html5/thumbnails/12.jpg)
Function (Con.)
•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();
![Page 13: Basic Javascript](https://reader034.vdocuments.mx/reader034/viewer/2022052601/559445811a28ab0e738b458a/html5/thumbnails/13.jpg)
Function (Con.)
•When object is invoked in function, this refers to the global object.
var globalVariable = 5;function test() {
console.log(this.globalVariable);}test
![Page 14: Basic Javascript](https://reader034.vdocuments.mx/reader034/viewer/2022052601/559445811a28ab0e738b458a/html5/thumbnails/14.jpg)
Function (Con.)
•When 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);t.foo();t1.foo();
![Page 15: Basic Javascript](https://reader034.vdocuments.mx/reader034/viewer/2022052601/559445811a28ab0e738b458a/html5/thumbnails/15.jpg)
Function (Con.)
•When function is invoked, in addition to its parameters it has a special parameter called arguments•Contains all arguments from invocation•Arguments.length will tell you how many arguments were passed •Arguments is not of type Array even•Though 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();
![Page 16: Basic Javascript](https://reader034.vdocuments.mx/reader034/viewer/2022052601/559445811a28ab0e738b458a/html5/thumbnails/16.jpg)
global object
•As crockford says, the object that dare not speak of its name•It is the container for all global variables and all built in objects•On browsers window is the global object•Variable defined with a var makes it local to the scope
![Page 17: Basic Javascript](https://reader034.vdocuments.mx/reader034/viewer/2022052601/559445811a28ab0e738b458a/html5/thumbnails/17.jpg)
global variables are evil
•Un-namespaced values can clash each others values•Use 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 scope
![Page 18: Basic Javascript](https://reader034.vdocuments.mx/reader034/viewer/2022052601/559445811a28ab0e738b458a/html5/thumbnails/18.jpg)