SlideShare a Scribd company logo
1 of 73
Download to read offline
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 Javascript
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 and Event
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
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
child, sibling, parent


       BODY
                                       lastChild
              parentNode
firstChild




                                nextSibling                                nextSibling                               nextSibling
             H1                                           P                                       H2                                          P
                           previousSibling                            previousSibling                           previousSibling
              parentNode




                                                         parentNode




                                                                                                   parentNode




                                                                                                                                             parentNode
firstChild




                                           firstChild




                                                                                     firstChild




                                                                                                                               firstChild
                           lastChild




                                                                      lastChild




                                                                                                                lastChild




                                                                                                                                                          lastChild
             #text                                      #text                                     #text                                     #text
child, sibling, parent


       BODY
firstChild




                     nextSibling                    nextSibling                    nextSibling
             H1                              P                             H2                              P
firstChild




                               firstChild




                                                              firstChild




                                                                                             firstChild
             #text                          #text                          #text                          #text
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;
Introduction to YoolkUi
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

More Related Content

What's hot

Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScriptNascenia IT
 
Exploring Ceylon with Gavin King - JUG BB Talk - Belrin 2014
Exploring Ceylon with Gavin King - JUG BB Talk - Belrin 2014Exploring Ceylon with Gavin King - JUG BB Talk - Belrin 2014
Exploring Ceylon with Gavin King - JUG BB Talk - Belrin 2014hwilming
 
Class and Objects in PHP
Class and Objects in PHPClass and Objects in PHP
Class and Objects in PHPRamasubbu .P
 
The many facets of code reuse in JavaScript
The many facets of code reuse in JavaScriptThe many facets of code reuse in JavaScript
The many facets of code reuse in JavaScriptLeonardo Borges
 
Object Oriented Programming with PHP 5 - More OOP
Object Oriented Programming with PHP 5 - More OOPObject Oriented Programming with PHP 5 - More OOP
Object Oriented Programming with PHP 5 - More OOPWildan Maulana
 
Oops in PHP By Nyros Developer
Oops in PHP By Nyros DeveloperOops in PHP By Nyros Developer
Oops in PHP By Nyros DeveloperNyros Technologies
 
Oop in-php
Oop in-phpOop in-php
Oop in-phpRajesh S
 
Class 7 - PHP Object Oriented Programming
Class 7 - PHP Object Oriented ProgrammingClass 7 - PHP Object Oriented Programming
Class 7 - PHP Object Oriented ProgrammingAhmed Swilam
 
Object oreinted php | OOPs
Object oreinted php | OOPsObject oreinted php | OOPs
Object oreinted php | OOPsRavi Bhadauria
 
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Aaron Gustafson
 
SOLID Deconstruction
SOLID DeconstructionSOLID Deconstruction
SOLID DeconstructionKevlin Henney
 
The Sincerest Form of Flattery
The Sincerest Form of FlatteryThe Sincerest Form of Flattery
The Sincerest Form of FlatteryJosé Paumard
 
Introduction to OOP with PHP
Introduction to OOP with PHPIntroduction to OOP with PHP
Introduction to OOP with PHPMichael Peacock
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptObject Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptForziatech
 
[A 3]Javascript oop for xpages developers - public
[A 3]Javascript oop for xpages developers - public[A 3]Javascript oop for xpages developers - public
[A 3]Javascript oop for xpages developers - publicKazunori Tatsuki
 

What's hot (20)

Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
Exploring Ceylon with Gavin King - JUG BB Talk - Belrin 2014
Exploring Ceylon with Gavin King - JUG BB Talk - Belrin 2014Exploring Ceylon with Gavin King - JUG BB Talk - Belrin 2014
Exploring Ceylon with Gavin King - JUG BB Talk - Belrin 2014
 
PHP Classes and OOPS Concept
PHP Classes and OOPS ConceptPHP Classes and OOPS Concept
PHP Classes and OOPS Concept
 
Class and Objects in PHP
Class and Objects in PHPClass and Objects in PHP
Class and Objects in PHP
 
The many facets of code reuse in JavaScript
The many facets of code reuse in JavaScriptThe many facets of code reuse in JavaScript
The many facets of code reuse in JavaScript
 
Object Oriented Programming with PHP 5 - More OOP
Object Oriented Programming with PHP 5 - More OOPObject Oriented Programming with PHP 5 - More OOP
Object Oriented Programming with PHP 5 - More OOP
 
Oops in PHP By Nyros Developer
Oops in PHP By Nyros DeveloperOops in PHP By Nyros Developer
Oops in PHP By Nyros Developer
 
Clean coding-practices
Clean coding-practicesClean coding-practices
Clean coding-practices
 
Oop in-php
Oop in-phpOop in-php
Oop in-php
 
Class 7 - PHP Object Oriented Programming
Class 7 - PHP Object Oriented ProgrammingClass 7 - PHP Object Oriented Programming
Class 7 - PHP Object Oriented Programming
 
Php Oop
Php OopPhp Oop
Php Oop
 
Oops in PHP
Oops in PHPOops in PHP
Oops in PHP
 
Clean code
Clean codeClean code
Clean code
 
Object oreinted php | OOPs
Object oreinted php | OOPsObject oreinted php | OOPs
Object oreinted php | OOPs
 
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]
 
SOLID Deconstruction
SOLID DeconstructionSOLID Deconstruction
SOLID Deconstruction
 
The Sincerest Form of Flattery
The Sincerest Form of FlatteryThe Sincerest Form of Flattery
The Sincerest Form of Flattery
 
Introduction to OOP with PHP
Introduction to OOP with PHPIntroduction to OOP with PHP
Introduction to OOP with PHP
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptObject Oriented Programming In JavaScript
Object Oriented Programming In JavaScript
 
[A 3]Javascript oop for xpages developers - public
[A 3]Javascript oop for xpages developers - public[A 3]Javascript oop for xpages developers - public
[A 3]Javascript oop for xpages developers - public
 

Viewers also liked

Reporting of anco
Reporting of ancoReporting of anco
Reporting of ancomrleewq
 
Fotografía Documental
Fotografía DocumentalFotografía Documental
Fotografía DocumentalEdna Rheiner
 
Tim Bartlett - Document Control Analyst
Tim Bartlett - Document Control AnalystTim Bartlett - Document Control Analyst
Tim Bartlett - Document Control AnalystCageNutM5
 
Razones para usar software libre
Razones para usar software libreRazones para usar software libre
Razones para usar software libreEdna Rheiner
 
The OBREAU Tipod: A Tool for Finding Gold among the Rubble
The OBREAU Tipod: A Tool for Finding Gold among the RubbleThe OBREAU Tipod: A Tool for Finding Gold among the Rubble
The OBREAU Tipod: A Tool for Finding Gold among the RubbleEric Kaufman
 
Dreaming your story: Opportunities for Strengths Development
Dreaming your story: Opportunities for Strengths DevelopmentDreaming your story: Opportunities for Strengths Development
Dreaming your story: Opportunities for Strengths DevelopmentEric Kaufman
 
אבטחת ציוד קצה נייד
אבטחת ציוד קצה ניידאבטחת ציוד קצה נייד
אבטחת ציוד קצה ניידTal Ein - Habar
 
שירותי אבטחה בענן
שירותי אבטחה בענןשירותי אבטחה בענן
שירותי אבטחה בענןTal Ein - Habar
 
Eyes on Extension: A model for diverse advisory leadership
Eyes on Extension: A model for diverse advisory leadershipEyes on Extension: A model for diverse advisory leadership
Eyes on Extension: A model for diverse advisory leadershipEric Kaufman
 
Sesion 1 psicologia del consumidor
Sesion 1   psicologia del consumidorSesion 1   psicologia del consumidor
Sesion 1 psicologia del consumidorEdna Rheiner
 
Convergencia Multimedia
Convergencia MultimediaConvergencia Multimedia
Convergencia MultimediaEdna Rheiner
 
Todo se trata de infografías
Todo se trata de infografíasTodo se trata de infografías
Todo se trata de infografíasEdna Rheiner
 
3r eso tema 3 NATURALESA i SOCIETAT
3r eso  tema 3 NATURALESA i SOCIETAT3r eso  tema 3 NATURALESA i SOCIETAT
3r eso tema 3 NATURALESA i SOCIETATMario Vicedo pellin
 
La création de l’univers. french. français
La création de l’univers. french. françaisLa création de l’univers. french. français
La création de l’univers. french. françaisHarunyahyaFrench
 

Viewers also liked (20)

Reporting of anco
Reporting of ancoReporting of anco
Reporting of anco
 
Fotografía Documental
Fotografía DocumentalFotografía Documental
Fotografía Documental
 
Tim Bartlett - Document Control Analyst
Tim Bartlett - Document Control AnalystTim Bartlett - Document Control Analyst
Tim Bartlett - Document Control Analyst
 
Security is evolution
Security is evolutionSecurity is evolution
Security is evolution
 
Razones para usar software libre
Razones para usar software libreRazones para usar software libre
Razones para usar software libre
 
The OBREAU Tipod: A Tool for Finding Gold among the Rubble
The OBREAU Tipod: A Tool for Finding Gold among the RubbleThe OBREAU Tipod: A Tool for Finding Gold among the Rubble
The OBREAU Tipod: A Tool for Finding Gold among the Rubble
 
Save Farmers!!!!
Save Farmers!!!!Save Farmers!!!!
Save Farmers!!!!
 
Dreaming your story: Opportunities for Strengths Development
Dreaming your story: Opportunities for Strengths DevelopmentDreaming your story: Opportunities for Strengths Development
Dreaming your story: Opportunities for Strengths Development
 
Ojo de fotografo
Ojo de fotografoOjo de fotografo
Ojo de fotografo
 
אבטחת ציוד קצה נייד
אבטחת ציוד קצה ניידאבטחת ציוד קצה נייד
אבטחת ציוד קצה נייד
 
2. las fuentes de energia
2. las fuentes de energia2. las fuentes de energia
2. las fuentes de energia
 
שירותי אבטחה בענן
שירותי אבטחה בענןשירותי אבטחה בענן
שירותי אבטחה בענן
 
Demoweek
DemoweekDemoweek
Demoweek
 
Eyes on Extension: A model for diverse advisory leadership
Eyes on Extension: A model for diverse advisory leadershipEyes on Extension: A model for diverse advisory leadership
Eyes on Extension: A model for diverse advisory leadership
 
Sesion 1 psicologia del consumidor
Sesion 1   psicologia del consumidorSesion 1   psicologia del consumidor
Sesion 1 psicologia del consumidor
 
Scada Security
Scada SecurityScada Security
Scada Security
 
Convergencia Multimedia
Convergencia MultimediaConvergencia Multimedia
Convergencia Multimedia
 
Todo se trata de infografías
Todo se trata de infografíasTodo se trata de infografías
Todo se trata de infografías
 
3r eso tema 3 NATURALESA i SOCIETAT
3r eso  tema 3 NATURALESA i SOCIETAT3r eso  tema 3 NATURALESA i SOCIETAT
3r eso tema 3 NATURALESA i SOCIETAT
 
La création de l’univers. french. français
La création de l’univers. french. françaisLa création de l’univers. french. français
La création de l’univers. french. français
 

Similar to Introduction to javascript and yoolkui

Prototype 120102020133-phpapp02
Prototype 120102020133-phpapp02Prototype 120102020133-phpapp02
Prototype 120102020133-phpapp02plutoone TestTwo
 
Javascript Object Oriented Programming
Javascript Object Oriented ProgrammingJavascript Object Oriented Programming
Javascript Object Oriented ProgrammingBunlong Van
 
It Is Possible to Do Object-Oriented Programming in Java
It Is Possible to Do Object-Oriented Programming in JavaIt Is Possible to Do Object-Oriented Programming in Java
It Is Possible to Do Object-Oriented Programming in JavaKevlin Henney
 
JavaScript - Programming Languages course
JavaScript - Programming Languages course JavaScript - Programming Languages course
JavaScript - Programming Languages course yoavrubin
 
Basic Javascript
Basic JavascriptBasic Javascript
Basic JavascriptBunlong Van
 
JavaScript Workshop
JavaScript WorkshopJavaScript Workshop
JavaScript WorkshopPamela Fox
 
Understanding PHP objects
Understanding PHP objectsUnderstanding PHP objects
Understanding PHP objectsjulien pauli
 
JavaScript Literacy
JavaScript LiteracyJavaScript Literacy
JavaScript LiteracyDavid Jacobs
 
Javascript Objects Deep Dive
Javascript Objects Deep DiveJavascript Objects Deep Dive
Javascript Objects Deep DiveManish Jangir
 
JS Level Up: Prototypes
JS Level Up: PrototypesJS Level Up: Prototypes
JS Level Up: PrototypesVernon Kesner
 
How prototype works in java script?
How prototype works in java script?How prototype works in java script?
How prototype works in java script?InnovationM
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScriptJulie Iskander
 
Object Oriented PHP5
Object Oriented PHP5Object Oriented PHP5
Object Oriented PHP5Jason Austin
 
JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)Nicholas Zakas
 

Similar to Introduction to javascript and yoolkui (20)

Java script
Java scriptJava script
Java script
 
Prototype 120102020133-phpapp02
Prototype 120102020133-phpapp02Prototype 120102020133-phpapp02
Prototype 120102020133-phpapp02
 
Javascript Object Oriented Programming
Javascript Object Oriented ProgrammingJavascript Object Oriented Programming
Javascript Object Oriented Programming
 
JavsScript OOP
JavsScript OOPJavsScript OOP
JavsScript OOP
 
JavaScript Essentials
JavaScript EssentialsJavaScript Essentials
JavaScript Essentials
 
It Is Possible to Do Object-Oriented Programming in Java
It Is Possible to Do Object-Oriented Programming in JavaIt Is Possible to Do Object-Oriented Programming in Java
It Is Possible to Do Object-Oriented Programming in Java
 
JavaScript - Programming Languages course
JavaScript - Programming Languages course JavaScript - Programming Languages course
JavaScript - Programming Languages course
 
Basic Javascript
Basic JavascriptBasic Javascript
Basic Javascript
 
Oops concept in php
Oops concept in phpOops concept in php
Oops concept in php
 
About Python
About PythonAbout Python
About Python
 
Javascript tid-bits
Javascript tid-bitsJavascript tid-bits
Javascript tid-bits
 
JavaScript Workshop
JavaScript WorkshopJavaScript Workshop
JavaScript Workshop
 
Understanding PHP objects
Understanding PHP objectsUnderstanding PHP objects
Understanding PHP objects
 
JavaScript Literacy
JavaScript LiteracyJavaScript Literacy
JavaScript Literacy
 
Javascript Objects Deep Dive
Javascript Objects Deep DiveJavascript Objects Deep Dive
Javascript Objects Deep Dive
 
JS Level Up: Prototypes
JS Level Up: PrototypesJS Level Up: Prototypes
JS Level Up: Prototypes
 
How prototype works in java script?
How prototype works in java script?How prototype works in java script?
How prototype works in java script?
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScript
 
Object Oriented PHP5
Object Oriented PHP5Object Oriented PHP5
Object Oriented PHP5
 
JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)
 

Recently uploaded

UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 

Recently uploaded (20)

UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 

Introduction to javascript and yoolkui

  • 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;
  • 35. Inheritance  OOP ensures code reuse  Two forms of OOP  Classical with Mixin  Prototypal
  • 36. Prototypal Inheritance var Boy = function(){}; Boy.prototype = new Person(); var boyObj = new Boy(); boyObj.callMe();
  • 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
  • 46. child, sibling, parent BODY lastChild parentNode firstChild nextSibling nextSibling nextSibling H1 P H2 P previousSibling previousSibling previousSibling parentNode parentNode parentNode parentNode firstChild firstChild firstChild firstChild lastChild lastChild lastChild lastChild #text #text #text #text
  • 47. child, sibling, parent BODY firstChild nextSibling nextSibling nextSibling H1 P H2 P firstChild firstChild firstChild firstChild #text #text #text #text
  • 48. childNodes BODY childNodes 0 1 2 3 H1 P H2 P
  • 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. 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.
  • 52. Removing Elements node.removeChild(old)  It returns the node.  Be sure to remove any event handlers. old.parentNode.removeChild(old)
  • 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
  • 58. Event Handlers  Classic  node["on" + type] = handler;  Microsoft  node.attachEvent("on" + type, handler);  W3C  node.addEventListener(type, handler, fal se);
  • 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