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

Viewers also liked

Similar to Introduction to javascript and yoolkui

Recently uploaded

Introduction to javascript and yoolkui