Introduction to javascript and yoolkui

INTRODUCTION TO JAVASCRIPT
AND YOOLKUI

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

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

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

Object Literals

 Objects are wrapped in {}
 Names can be string
 Value can be an expression
 ; used for separation
 , separate pairs

Object Example

var myobject = {
name : “Jack Appleseed”,
“data”: { foo: 10, bar: 20}
};
var data = myobject.data;
var foo = myobject.data.foo;

typeof Prefix Operator

 The typeof prefix operator returns a
 string identifying the type of value
 Use instanceof instead

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

Array Methods

 concat
 join (can also be used for concatenating
multiple strings)
 pop
 push
 slice
 sort
 splice

Checking for Array

• Use construction
value.constructor === Array
• User instanceof
value instanceof Array

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

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

Closure
function sayHello2(name) {
var text = 'Hello ' + name; // local variable
var sayAlert = function() { alert(text); }
return sayAlert;
}
var say2 = sayHello2(“Foo”);
Say2();

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

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

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

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

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

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

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

(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

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

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

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

Methods

 When a property is a function we can call it a
method
var object = {
method: function(){
alert("here’s method");
}
}

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

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

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

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

Object Augmentation

 New members can be added to any object

Person.prototype.callMeAgain = function(){
alert(“I said my name is: “ + this.name);
};
personObj.callMeAgain();

Prototype usage

 callMeAgain() is a property of
the prototype object

 but it behaves as if it's a
property of the dude object

Own properties vs. prototype’s

personObj.hasOwnProperty(“callMe”);
 will return true
personObj.hasOwnProperty(“callMeAgain”);
 will return false;

isPrototypeOf()
Person.prototype.isPrototypeOf(personObj);
 true

Inheritance

 OOP ensures code reuse
 Two forms of OOP
 Classical with Mixin
 Prototypal

Prototypal Inheritance

var Boy = function(){};
Boy.prototype = new Person();
var boyObj = new Boy();
boyObj.callMe();

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

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

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

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

Dom

 Dom (document object modeling)
 Retrieving Nodes
 document.getElementById(id)

 document.getElementsByName(name)

 node.getElementsByTagName(tagNam
e)

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

firstChild firstChild

H1

#text
lastChild

BODY
firstChild
lastChild

P

#text
lastChild

firstChild
H2

#text

lastChild
child, sibling, parent

firstChild
P

#text

lastChild


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


BODY
lastChild
parentNode
firstChild

H1 P H2 P
previousSibling previousSibling previousSibling
parentNode

parentNode

parentNode

parentNode
firstChild

firstChild

firstChild

firstChild
lastChild

lastChild

lastChild

lastChild


BODY
firstChild

H1 P H2 P
firstChild

firstChild

firstChild

firstChild

childNodes

BODY
childNodes

0 1 2 3

H1 P H2 P

Style

 node.style.stylename
CSS JavaScript
 background-  backgroundColor
color
 borderRadius
 border-radius
 fontSize
 font-size
 listStyleType
 list-style-type
 word-spacing  wordSpacing
 z-index  zIndex

Making Elements

document.createElement(tagName)

document.createTextNode(text)

node.cloneNode()
 Clone an individual element.

node.cloneNode(true)
 Clone an element and all of its descendents.

 The new nodes are not connected to the document.

Linking Elements

node.appendChild(new)

node.insertBefore(new, sibling)

node.replaceChild(new, old)

old.parentNode.replaceChild(new, old)

Removing Elements

node.removeChild(old)
 It returns the node.
 Be sure to remove any event handlers.

old.parentNode.removeChild(old)

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

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.

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.

Mouse Events

 The target is the topmost (z-index) node containing
the cursor.
 click
 dblclick
 mousedown
 mousemove
 mouseout
 mouseover
 mouseup

Input Events

 The target is the node having focus.
 blur
 change
 focus
 keydown
 keypress
 keyup
 reset
 submit

Event Handlers

 Classic
 node["on" + type] = handler;

 Microsoft
 node.attachEvent("on" +
type, handler);

 W3C
 node.addEventListener(type, handler, fal
se);

Event Handlers

 The handler takes an optional event parameter.
 Microsoft does not send an event parameter, use the
global event object instead.

Event Handlers

var handler = function (e) {
e = e || event;
var target =
e.target || e.srcElement;
...
}

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.

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.

Cancel Bubbling

 Cancel bubbling to keep the parent nodes from
seeing the event.

e.cancelBubble = true;
if (e.stopPropagation) {
e.stopPropagation();
}

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;

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

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

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

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

YK.Util

 Provide all the utilities needed for Yoolkui.
 See http://ui.yoolk.com/yoolkui-
documentation/

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

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

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

Introduction to javascript and yoolkui

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Introduction to javascript and yoolkui (20)

Recently uploaded (20)

Introduction to javascript and yoolkui