Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to javascript and yoolkui

816 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×