2. About Me
var name = “Suylong Khou”;
var profession = “Javascript Developer”;
var partTime = “Missionary”;
var myCore = “Give, and it will be given to
you. A good measure, pressed down, shaken
together and running over, will be poured
into your lap. For with the measure you use, it
will be measured to you.“.luke(6, 38);
3. Data Types
Object
Function
Numbers
Strings
Booleans
null - a value that isn’t anything
undefined - default value for variables and
parameters, value of missing members in the
object etc
4. Objects
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
5. Object Literals
Objects are wrapped in {}
Names can be string
Value can be an expression
; used for separation
, separate pairs
6. Object Example
var myobject = {
name : “Jack Appleseed”,
“data”: { foo: 10, bar: 20}
};
var data = myobject.data;
var foo = myobject.data.foo;
7. typeof Prefix Operator
The typeof prefix operator returns a
string identifying the type of value
Use instanceof instead
8. 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
9. Array Methods
concat
join (can also be used for concatenating
multiple strings)
pop
push
slice
sort
splice
10. Checking for Array
• Use construction
value.constructor === Array
• User instanceof
value instanceof Array
11. 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
12. Function Cont...
Functions 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
13. Closure
function sayHello2(name) {
var text = 'Hello ' + name; // local variable
var sayAlert = function() { alert(text); }
return sayAlert;
}
var say2 = sayHello2(“Foo”);
Say2();
14. Function Cont...
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
15. Function’s arguments
var showMe = function(f00, bar){
return foo + bar,
}
showMe(“foo”, “bar”, “foobar”); //Last
argument will be ignore
showMe(“foo”) //bar will be undefined
16. Function Cont...
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();
17. Function Cont...
When object is invoked in function, this refers
to the global object
var global_variable = 5;
function test() {
console.log(this.global_variable);
}
test();
18. Function Cont...
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 o = new Test(10),
i = new Test(111);
o.foo();
i.foo();
19. Function (arguments)
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
20. Function (arguments)
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();
21. (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
Variables defined with a var makes it local to
the scope
22. 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
24. Object-Oriented Basics
Object (instance): representation of a "thing"
(someone or something)
Class - a blueprint, or recipe for an object
Encapsulation : illustrates the fact that an
object contains (encapsulates) :
Data (stored in properties)
The means to do something with the data (using
methods)
Inheritance
25. Object Creation
Two simple ways
var obj = new Object();
obj.name = “Foo”;
obj.say = function(){ return “hello”;};
var obj = {
name: “Foo”,
say: function(){
return “helllo”;
}
}
26. Methods
When a property is a function we can call it a
method
var object = {
method: function(){
alert("here’s method");
}
}
27. prototype
JavaScript functions work as
methods, constructors and modules
It has Prototypal Inheritance, which offers
great expressive powers
All objects are directly or indirectly linked to
Object.prototype
28. prototype
Each object is linked to its parent via a magic
link
When a member is accessed the compiler
looks at the object and then looks up to its
parent via the magic link
It keeps going all the way up to
Object.prototype
Go to console of firebug and type
Object.prototype
29. prototype
Looking for my_object.foo, found it in the object itself
Looking for my_object.baz looks in the object and if it
doesn’t find it there it goes to my_object_parent which is
my_object.prototype
Looking for my_object.some_random_member can’t
find it in the object, look at my_object_parent, can’t find
it
there either, goes to Object can’t find it there and is set
to undefined
30. prototype
var Person = function(){
this.name = “Mr.Foo”;
this.callMe = function(){
alert(“I am “ + this.name );
}
}
var personObj = new Person();
personObj.callMe();
personObj.constructor();
personObj.myFoo(); //will return undefined
31. Object Augmentation
New members can be added to any object
Person.prototype.callMeAgain = function(){
alert(“I said my name is: “ + this.name);
};
personObj.callMeAgain();
32. Prototype usage
callMeAgain() is a property of
the prototype object
but it behaves as if it's a
property of the dude object
33. Own properties vs. prototype’s
personObj.hasOwnProperty(“callMe”);
will return true
personObj.hasOwnProperty(“callMeAgain”);
will return false;
37. Inheritance through Mixin
var Person = function(name){
this.greet = function(){
alert("Hello, I'm " + name);
}
};
var Employee = function(name){
Person.apply(this, [name]);
this.getTeam = function(){ return "UI Library";}
}
//instantiate object of Employee
var employee = new Employee("Borey");
employee.greet();
var team = employee.getTeam();
alert("Team: " + team);
38. Singleton
There is no need to produce a class-like
constructor for an object that will have
exactly one instance
This is typical of JavaScript applications
Use an object literal to get started instead
39. Module Pattern
The methods of a singleton can enjoy access
to shared private datum and private methods
Variables defined in a module are only visible
in a module
Variables defined in a function are only visible
to the function
Function can be used as module containers
40. Module Pattern
var my_module = function() {
var privateVariable,
privateFunction = function() {
// stuff
};
return {
firstMethod: function(a,b) {
// can access privateVariable
// can access privateFunction
}
}
}();
my_module.firstMethod();
42. Dom
Dom (document object modeling)
Retrieving Nodes
document.getElementById(id)
document.getElementsByName(name)
node.getElementsByTagName(tagNam
e)
43. Document Tree Structure
#document <html>
<body>
HTML <h1>Heading 1</h1>
<p>Paragraph.</p>
HEAD
<h2>Heading 2</h2>
<p>Paragraph.</p>
BODY </body>
</html>
H1
#text
P
#text
H2
#text
P
#text
44. firstChild firstChild
H1
#text
lastChild
BODY
firstChild
lastChild
P
#text
lastChild
firstChild
H2
#text
lastChild
child, sibling, parent
firstChild
P
#text
lastChild
45. child, sibling, parent
BODY
lastChild
firstChild
nextSibling nextSibling nextSibling
H1 P H2 P
previousSibling previousSibling previousSibling
firstChild
firstChild
firstChild
firstChild
lastChild
lastChild
lastChild
lastChild
#text #text #text #text
53. innerHTML
Parse
The W3C standard does not provide access to the
HTML parser.
All A browsers implement Microsoft's innerHTML
property.
node.innerHTML = “<p> this is text
</p>”;
54. Which Way Is Better?
It is better to build or clone elements and append
them to the document?
Or is it better to compile an HTML text and use
innerHTML to realize it?
Favor clean code and easy maintenance.
Favor performance only in extreme cases.
55. Events
Event
The browser has an event-driven, single-
threaded, asynchronous programming model.
Events are targeted to particular nodes.
Events cause the invocation of event handler
functions.
56. Mouse Events
The target is the topmost (z-index) node containing
the cursor.
click
dblclick
mousedown
mousemove
mouseout
mouseover
mouseup
57. Input Events
The target is the node having focus.
blur
change
focus
keydown
keypress
keyup
reset
submit
59. Event Handlers
The handler takes an optional event parameter.
Microsoft does not send an event parameter, use the
global event object instead.
60. Event Handlers
var handler = function (e) {
e = e || event;
var target =
e.target || e.srcElement;
...
}
61. Bubbling
Bubbling means that the event is given to the
target, and then its parent, and then its
parent, and so on until the event is canceled.
62. Why Bubble?
Suppose you have 100 draggable objects.
You could attach 100 sets of event handlers to
those objects.
Or you could attach one set of event handlers to
the container of the 100 objects.
63. Cancel Bubbling
Cancel bubbling to keep the parent nodes from
seeing the event.
e.cancelBubble = true;
if (e.stopPropagation) {
e.stopPropagation();
}
64. Prevent Default Action
An event handler can prevent a browser action associated
with the event (such as submitting a form).
e.returnValue = false;
if (e.preventDefault) {
e.preventDefault();
}
return false;
66. What is YoolkUi
The YoolkUI is a comprehensive suite of
controls, written with JavaScript and CSS, for
building rich responsive windows style web
applications
It is an open source
Copatible with
67. Componetns
Events
Dom event handler
Object event hander following observer parttern
Util: provides all necessary utilities methods
Widget
Container widget
Control widget
Ajax, Sadly we don’t provide any ajax helper
68. Dom event handler
Help to bind the event and its handlers to
dom
Var div = YK.domBuilder.create({tag: “div”, append:
document.body});
YK.Event.addDomListener(div, “click”, function(e){
alert(“hello world”);
YK.Event.stopBubble(e);
});
69. Object event handler
Follow Observer parttern
Var obj = new Object();
YK.Event.addListener(obj, “showMe”, function(){
alert(“show me please”);
});
YK.Event.trigger(obj, “showMe”);
70. YK.Util
Provide all the utilities needed for Yoolkui.
See http://ui.yoolk.com/yoolkui-
documentation/
71. Container Widget
Provide wrapper for control widget and
position it accordingly.
Complet list of Container widget
• YK.Accordion • YK.Scroller
• YK.Container • YK.Table
• YK.Dragger
• YK.Frame
• YK.Hbox
• YK.Vbox
• YK.LiquidBox
• YK.MultiPanelContainer
• YK.NoteBook
• YK.VPaned
• YK.HPanded
72. Control widget
Have ui presentation
Most of the time, will be wrapped around and
positioned inside Container widget
Complet list of control widget
• YK.Button •YK.EntryDropDown • YK.SmartEntry
• YK.CheckButton • YK.Image • YK.SmartEntryDropDon
• YK.ClipBoard • YK.JustifiedLabel • YK.TextEditor
• YK.ComboBox • YK.Label • YK.TextView
• YK.ComboEntry • YK.LiquidLabel • YK.UnicodeEditor
• YK.DatePicker • YK.List • YK.TreeView
• YK.Dom • YK.ListView
• YK.Entry • YK.RadioButton
• YK.EntrySearch
73. Reference
The theory of dom by Douglas Crockford
A Quick Intro to Javascript by Rajat Pandit
(rajat_pandit@ipcmedia.com)
YoolkUi http://ui.yoolk.com