INTRODUCTION TO JAVASCRIPTAND YOOLKUI
About Me var name = “Suylong Khou”; var profession = “Javascript Developer”; var partTime = “Missionary”; var myCore =...
Data Types   Object   Function   Numbers   Strings   Booleans   null - a value that isn’t anything   undefined - de...
Objects Objects can contain data and methods Objects can inherit from other objects An object contain an unordered coll...
Object Literals Objects are wrapped in {} Names can be string Value can be an expression ; used for separation , sepa...
Object Example var myobject = {       name : “Jack Appleseed”,       “data”: { foo: 10, bar: 20} }; var data = myobject.da...
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...
Array Methods concat join (can also be used for concatenating    multiple strings)   pop   push   slice   sort   sp...
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 Func...
Function Cont... Functions can be contained inside other  functions Inner function has access to the variable and  param...
Closurefunction sayHello2(name) {  var text = Hello  + name; // local variable  var sayAlert = function() { alert(text); }...
Function Cont... Function inside an object is called a method When invoked with too many arguments, the  rest are ignore...
Function’s arguments var showMe = function(f00, bar){     return foo + bar, } showMe(“foo”, “bar”, “foobar”); //Last argum...
Function Cont... When a function is invoked in method  format, this refers to the object containing it. var foo = {     b...
Function Cont... When object is invoked in function, this refers  to the global object var global_variable = 5; function ...
Function Cont... When new Function is used (implicit return is  optional), then this returns the new object  createdvar T...
Function (arguments) When function is invoked, in addition to its    parameters it has a special parameter called    argu...
Function (arguments)var foo = function() {  var a = new Array();  console.log( typeof a );  console.log( typeof arguments ...
(global) Object As crockford says, the object that dare not  speak of its name It is the container for all global variab...
GLOBAL VARIABLES ARE EVIL Un-namespaced values can clash each others  values Use of it should be minimized or gotten rid...
Object Oriented Javascript
Object-Oriented Basics Object (instance): representation of a "thing"  (someone or something) Class - a blueprint, or re...
Object Creation Two simple ways  var obj = new Object();  obj.name = “Foo”;  obj.say = function(){ return “hello”;};  var...
Methods When a property is a function we can call it a  method          var object = {             method: function(){   ...
prototype JavaScript functions work as  methods, constructors and modules It has Prototypal Inheritance, which offers  g...
prototype Each object is linked to its parent via a magic  link When a member is accessed the compiler  looks at the obj...
prototype Looking for my_object.foo, found it in the object itself Looking for my_object.baz looks in the object and if ...
prototypevar Person = function(){      this.name = “Mr.Foo”;      this.callMe = function(){            alert(“I am “ + thi...
Object Augmentation  New members can be added to any objectPerson.prototype.callMeAgain = function(){      alert(“I said ...
Prototype usage callMeAgain() is a property of the prototype object but it behaves as if its a property of the dude object
Own properties vs. prototype’s  personObj.hasOwnProperty(“callMe”);   will return true  personObj.hasOwnProperty(“callMeA...
isPrototypeOf()Person.prototype.isPrototypeOf(personObj); true
Inheritance OOP ensures code reuse Two forms of OOP     Classical with Mixin     Prototypal
Prototypal Inheritancevar Boy = function(){};Boy.prototype = new Person();var boyObj = new Boy();boyObj.callMe();
Inheritance through Mixinvar Person = function(name){   this.greet = function(){      alert("Hello, Im " + name);   }};var...
Singleton There is no need to produce a class-like  constructor for an object that will have  exactly one instance This ...
Module Pattern The methods of a singleton can enjoy access  to shared private datum and private methods Variables define...
Module Patternvar my_module = function() {      var privateVariable,      privateFunction = function() {            // stu...
Dom and Event
Dom Dom (document object modeling) Retrieving Nodes   document.getElementById(id)   document.getElementsByName(name)  ...
Document Tree Structure     #document               <html>                              <body>         HTML               ...
firstChild        firstChild                     H1#text        lastChild                                               BO...
child, sibling, parent       BODY                                 lastChildfirstChild                          nextSibling...
child, sibling, parent       BODY                                       lastChild              parentNodefirstChild       ...
child, sibling, parent       BODYfirstChild                     nextSibling                    nextSibling                ...
childNodes  BODY      childNodes  0                1       2        3      H1               P       H2       P
Style     node.style.stylename          CSS                JavaScript   background-          backgroundColor    color  ...
Making Elementsdocument.createElement(tagName)document.createTextNode(text)node.cloneNode()   Clone an individual element...
Linking Elementsnode.appendChild(new)node.insertBefore(new, sibling)node.replaceChild(new, old)old.parentNode.replaceChild...
Removing Elementsnode.removeChild(old)  It returns the node.  Be sure to remove any event handlers.old.parentNode.remove...
innerHTML                                             Parse The W3C standard does not provide access to the  HTML parser....
Which Way Is Better? It is better to build or clone elements and append  them to the document? Or is it better to compil...
Events                                                 Event The browser has an event-driven, single-  threaded, asynchro...
Mouse Events The target is the topmost (z-index) node containing  the cursor.    click    dblclick    mousedown    mo...
Input Events The target is the node having focus.    blur    change    focus    keydown    keypress    keyup    re...
Event Handlers Classic   node["on" + type] = handler; Microsoft   node.attachEvent("on" +    type, handler); W3C   n...
Event Handlers The handler takes an optional event parameter.      Microsoft does not send an event parameter, use the  ...
Event Handlersvar 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 unti...
Why Bubble? Suppose you have 100 draggable objects. You could attach 100 sets of event handlers to  those objects. Or y...
Cancel Bubbling Cancel bubbling to keep the parent nodes from  seeing the event.     e.cancelBubble = true;     if (e.sto...
Prevent Default Action An event handler can prevent a browser action associated  with the event (such as submitting a for...
Introduction to YoolkUi
What is YoolkUi The YoolkUI is a comprehensive suite of  controls, written with JavaScript and CSS, for  building rich re...
Componetns Events   Dom event handler   Object event hander following observer parttern Util: provides all necessary u...
Dom event handler  Help to bind the event and its handlers to    domVar div = YK.domBuilder.create({tag: “div”, append:do...
Object event handler Follow Observer partternVar obj = new Object();YK.Event.addListener(obj, “showMe”, function(){      ...
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• Y...
Control widget      Have ui presentation      Most of the time, will be wrapped around and       positioned inside Conta...
Reference The theory of dom by Douglas Crockford A Quick Intro to Javascript by Rajat Pandit  (rajat_pandit@ipcmedia.com...
Upcoming SlideShare
Loading in …5
×

Introduction to javascript and yoolkui

684 views
684 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
684
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to javascript and yoolkui

  1. 1. INTRODUCTION TO JAVASCRIPTAND YOOLKUI
  2. 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. 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. 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. 5. Object Literals Objects are wrapped in {} Names can be string Value can be an expression ; used for separation , separate pairs
  6. 6. Object Example var myobject = { name : “Jack Appleseed”, “data”: { foo: 10, bar: 20} }; var data = myobject.data; var foo = myobject.data.foo;
  7. 7. typeof Prefix Operator The typeof prefix operator returns a string identifying the type of value Use instanceof instead
  8. 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. 9. Array Methods concat join (can also be used for concatenating multiple strings) pop push slice sort splice
  10. 10. Checking for Array• Use construction value.constructor === Array• User instanceof value instanceof Array
  11. 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. 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. 13. Closurefunction sayHello2(name) { var text = Hello + name; // local variable var sayAlert = function() { alert(text); } return sayAlert;}var say2 = sayHello2(“Foo”);Say2();
  14. 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. 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. 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. 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. 18. Function Cont... When new Function is used (implicit return is optional), then this returns the new object createdvar 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. 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. 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. 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. 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
  23. 23. Object Oriented Javascript
  24. 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. 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. 26. Methods When a property is a function we can call it a method var object = { method: function(){ alert("here’s method"); } }
  27. 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. 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. 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. 30. prototypevar 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. 31. Object Augmentation  New members can be added to any objectPerson.prototype.callMeAgain = function(){ alert(“I said my name is: “ + this.name);};personObj.callMeAgain();
  32. 32. Prototype usage callMeAgain() is a property of the prototype object but it behaves as if its a property of the dude object
  33. 33. Own properties vs. prototype’s personObj.hasOwnProperty(“callMe”);  will return true personObj.hasOwnProperty(“callMeAgain”);  will return false;
  34. 34. isPrototypeOf()Person.prototype.isPrototypeOf(personObj); true
  35. 35. Inheritance OOP ensures code reuse Two forms of OOP  Classical with Mixin  Prototypal
  36. 36. Prototypal Inheritancevar Boy = function(){};Boy.prototype = new Person();var boyObj = new Boy();boyObj.callMe();
  37. 37. Inheritance through Mixinvar Person = function(name){ this.greet = function(){ alert("Hello, Im " + name); }};var Employee = function(name){ Person.apply(this, [name]); this.getTeam = function(){ return "UI Library";}}//instantiate object of Employeevar employee = new Employee("Borey");employee.greet();var team = employee.getTeam();alert("Team: " + team);
  38. 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. 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. 40. Module Patternvar my_module = function() { var privateVariable, privateFunction = function() { // stuff }; return { firstMethod: function(a,b) { // can access privateVariable // can access privateFunction } }}();my_module.firstMethod();
  41. 41. Dom and Event
  42. 42. Dom Dom (document object modeling) Retrieving Nodes  document.getElementById(id)  document.getElementsByName(name)  node.getElementsByTagName(tagNam e)
  43. 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. 44. firstChild firstChild H1#text lastChild BODY firstChild lastChild P#text lastChild firstChild H2#text lastChild child, sibling, parent firstChild P#text lastChild
  45. 45. child, sibling, parent BODY lastChildfirstChild nextSibling nextSibling nextSibling H1 P H2 P previousSibling previousSibling previousSiblingfirstChild firstChild firstChild firstChild lastChild lastChild lastChild lastChild #text #text #text #text
  46. 46. child, sibling, parent BODY lastChild parentNodefirstChild nextSibling nextSibling nextSibling H1 P H2 P previousSibling previousSibling previousSibling parentNode parentNode parentNode parentNodefirstChild firstChild firstChild firstChild lastChild lastChild lastChild lastChild #text #text #text #text
  47. 47. child, sibling, parent BODYfirstChild nextSibling nextSibling nextSibling H1 P H2 PfirstChild firstChild firstChild firstChild #text #text #text #text
  48. 48. childNodes BODY childNodes 0 1 2 3 H1 P H2 P
  49. 49. 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
  50. 50. Making Elementsdocument.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.
  51. 51. Linking Elementsnode.appendChild(new)node.insertBefore(new, sibling)node.replaceChild(new, old)old.parentNode.replaceChild(new, old)
  52. 52. Removing Elementsnode.removeChild(old)  It returns the node.  Be sure to remove any event handlers.old.parentNode.removeChild(old)
  53. 53. innerHTML Parse The W3C standard does not provide access to the HTML parser. All A browsers implement Microsofts innerHTML property. node.innerHTML = “<p> this is text </p>”;
  54. 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. 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. 56. Mouse Events The target is the topmost (z-index) node containing the cursor.  click  dblclick  mousedown  mousemove  mouseout  mouseover  mouseup
  57. 57. Input Events The target is the node having focus.  blur  change  focus  keydown  keypress  keyup  reset  submit
  58. 58. Event Handlers Classic  node["on" + type] = handler; Microsoft  node.attachEvent("on" + type, handler); W3C  node.addEventListener(type, handler, fal se);
  59. 59. Event Handlers The handler takes an optional event parameter.  Microsoft does not send an event parameter, use the global event object instead.
  60. 60. Event Handlersvar handler = function (e) { e = e || event; var target = e.target || e.srcElement; ...}
  61. 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. 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. 63. Cancel Bubbling Cancel bubbling to keep the parent nodes from seeing the event. e.cancelBubble = true; if (e.stopPropagation) { e.stopPropagation(); }
  64. 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;
  65. 65. Introduction to YoolkUi
  66. 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. 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. 68. Dom event handler  Help to bind the event and its handlers to domVar div = YK.domBuilder.create({tag: “div”, append:document.body});YK.Event.addDomListener(div, “click”, function(e){ alert(“hello world”); YK.Event.stopBubble(e);});
  69. 69. Object event handler Follow Observer partternVar obj = new Object();YK.Event.addListener(obj, “showMe”, function(){ alert(“show me please”);});YK.Event.trigger(obj, “showMe”);
  70. 70. YK.Util Provide all the utilities needed for Yoolkui. See http://ui.yoolk.com/yoolkui- documentation/
  71. 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. 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. 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

×