SlideShare a Scribd company logo
1 of 107
Download to read offline
YUI Workshop
         @ncu




       October 6, 2008
http://josephj.com/entry.php?id=61
YUI

      http://josephj.com/entry.php?id=61
- -
What’s New in 2.5.0




        - -
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
- -
Getting Start




     - -
•
•
•
•
•
•
- -
- -
- -
<!DOCTYPE HTML PUBLIC quot;-//
  W3C//DTD HTML 4.01//ENquot;
  quot;http://www.w3.org/TR/html4/
  strict.dtdquot;>




              - -
<!DOCTYPE HTML PUBLIC quot;-//
  W3C//DTD HTML 4.01//ENquot;
  quot;http://www.w3.org/TR/html4/
  strict.dtdquot;>
  •




              - -
<!DOCTYPE HTML PUBLIC quot;-//
  W3C//DTD HTML 4.01//ENquot;
  quot;http://www.w3.org/TR/html4/
  strict.dtdquot;>
  •
      –




              - -
<!DOCTYPE HTML PUBLIC quot;-//
  W3C//DTD HTML 4.01//ENquot;
  quot;http://www.w3.org/TR/html4/
  strict.dtdquot;>
  •
      –
      –



              - -
- -
- -
- -
•
•
•
•
•
    –
•
•
    –
    –
•
•
    –
    –
    –
•
•
    –
    –
    –
•
•
•
    –
    –
    –
•
•
•
    –
    –
    –
•
•
•
    –
    –
    –
•
•
•
    –
    –
    –
•
- -
- -
YAHOO.util.Connect
YAHOO.util.DataSource
YAHOO.util.Resize
YAHOO.widget.DataTable
YAHOO.widget.Uploader
YAHOO.widget.ImageCropper


                - -
•
•
    –
•
    –
    –
•
    –
    –
•
•
    –
    –
•

•
YAHOO.util.Connect
YAHOO.util.DataSource
YAHOO.util.Resize
YAHOO.widget.Uploader
YAHOO.widget.DataTable
YAHOO.widget.ImageCropper


                - -
- -
- -
YAHOO.util.Event.on(
     formEl,
     ‘submit’,
     onFormSubmit
);
                 - -
•
•
    –
•
    –
•
•
    –
•
    • YAHOO.util.Event.addListener(
      document, ‘click’, onDocumentClick);
•
    –
•
    • YAHOO.util.Event.addListener(
      document, ‘click’, onDocumentClick);
    • addListener = on
•
    –
•
    • YAHOO.util.Event.addListener(
      document, ‘click’, onDocumentClick);
    • addListener = on
•
YAHOO.util.Event.on(
     formEl,
     ‘submit’,
     onFormSubmit
);
YAHOO.util.Event.on(
     formEl,
     ‘submit’,
     onFormSubmit
);
YAHOO.util.Event.on(
     formEl,
     ‘submit’,
     onFormSubmit
);
YAHOO.util.Event.on(
     formEl,
     ‘submit’,
     onFormSubmit
);
var YUD = YAHOO.util.Dom;

var linkEl = YUD.get(‘mylink’);

var listItems =

YUD.getElementsByClassName

  (‘list-item’, ‘li’);

                    - -
•
•
    –
•
    –
    –
•
    –
    –
    –
•
    –
    –
    –
•
•
    –
    –
    –
•
    –
•
    –
    –
    –
•
    –

    –
•
    –
    –
    –
•
    –

    –
var YUD = YAHOO.util.Dom;

var linkEl = YUD.get(‘mylink’);

var listItems =

YUD.getElementsByClassName

       (‘list-item’, ‘li’);
var YUD = YAHOO.util.Dom;

var linkEl = YUD.get(‘mylink’);

var listItems =

YUD.getElementsByClassName

       (‘list-item’, ‘li’);
var YUD = YAHOO.util.Dom;

var linkEl = YUD.get(‘mylink’);

var listItems =

YUD.getElementsByClassName

       (‘list-item’, ‘li’);
var YUD = YAHOO.util.Dom;

var linkEl = YUD.get(‘mylink’);

var listItems =

YUD.getElementsByClassName

       (‘list-item’, ‘li’);
var YUE = YAHOO.util.Event;

YUE.on(linkEl,‘click’, function(e){

  //



});
•
•
•


•
•


•


•
var YUE = YAHOO.util.Event;

YUE.on(linkEl,‘click’, function(e){

  //



});



                   - -
•
•


•
•


•
•


•
•


•
YUI Library Workshop (Yahoo! Course at NCU)

More Related Content

What's hot

Exemples de facteurs génétiques humains associés à une résistance contre le p...
Exemples de facteurs génétiques humains associés à une résistance contre le p...Exemples de facteurs génétiques humains associés à une résistance contre le p...
Exemples de facteurs génétiques humains associés à une résistance contre le p...Institut Pasteur de Madagascar
 
기획자는 무엇을 하는 사람일까?
기획자는 무엇을 하는 사람일까?기획자는 무엇을 하는 사람일까?
기획자는 무엇을 하는 사람일까?GOODgle :)
 
기획에서 요구사항이 중요한 이유
기획에서 요구사항이 중요한 이유기획에서 요구사항이 중요한 이유
기획에서 요구사항이 중요한 이유GOODgle :)
 
Bank Productivity seminar ver 03
Bank Productivity seminar ver 03Bank Productivity seminar ver 03
Bank Productivity seminar ver 03Reza Seifollahy
 
Lista comentada de los peces continentales argentinos
Lista comentada de los peces continentales argentinosLista comentada de los peces continentales argentinos
Lista comentada de los peces continentales argentinosAnibal Ruben Reyes
 
Wayne victory garden 2
Wayne victory garden 2Wayne victory garden 2
Wayne victory garden 2Jason Moussab
 
New holland vl570 grape harvester service repair manual
New holland vl570 grape harvester service repair manualNew holland vl570 grape harvester service repair manual
New holland vl570 grape harvester service repair manualfjjskksekmemm
 
당신이 9시부터 6시까지 근무해야 하는 이유
당신이 9시부터 6시까지 근무해야 하는 이유당신이 9시부터 6시까지 근무해야 하는 이유
당신이 9시부터 6시까지 근무해야 하는 이유zdnet_goodgle
 
Portugal 3 anos
Portugal 3 anosPortugal 3 anos
Portugal 3 anosSinapsa
 

What's hot (16)

Atext
AtextAtext
Atext
 
Exemples de facteurs génétiques humains associés à une résistance contre le p...
Exemples de facteurs génétiques humains associés à une résistance contre le p...Exemples de facteurs génétiques humains associés à une résistance contre le p...
Exemples de facteurs génétiques humains associés à une résistance contre le p...
 
Exercicio
ExercicioExercicio
Exercicio
 
GDC旅行記2013
GDC旅行記2013GDC旅行記2013
GDC旅行記2013
 
기획자는 무엇을 하는 사람일까?
기획자는 무엇을 하는 사람일까?기획자는 무엇을 하는 사람일까?
기획자는 무엇을 하는 사람일까?
 
المنطقة الحدودية العازلة تونس
المنطقة الحدودية العازلة تونسالمنطقة الحدودية العازلة تونس
المنطقة الحدودية العازلة تونس
 
기획에서 요구사항이 중요한 이유
기획에서 요구사항이 중요한 이유기획에서 요구사항이 중요한 이유
기획에서 요구사항이 중요한 이유
 
Master3
Master3Master3
Master3
 
Bank Productivity seminar ver 03
Bank Productivity seminar ver 03Bank Productivity seminar ver 03
Bank Productivity seminar ver 03
 
Lista comentada de los peces continentales argentinos
Lista comentada de los peces continentales argentinosLista comentada de los peces continentales argentinos
Lista comentada de los peces continentales argentinos
 
Wayne victory garden 2
Wayne victory garden 2Wayne victory garden 2
Wayne victory garden 2
 
New holland vl570 grape harvester service repair manual
New holland vl570 grape harvester service repair manualNew holland vl570 grape harvester service repair manual
New holland vl570 grape harvester service repair manual
 
Genetica cto 7
Genetica cto 7Genetica cto 7
Genetica cto 7
 
Ação Civil Pública: Viação ouro e prata
Ação Civil Pública: Viação ouro e prataAção Civil Pública: Viação ouro e prata
Ação Civil Pública: Viação ouro e prata
 
당신이 9시부터 6시까지 근무해야 하는 이유
당신이 9시부터 6시까지 근무해야 하는 이유당신이 9시부터 6시까지 근무해야 하는 이유
당신이 9시부터 6시까지 근무해야 하는 이유
 
Portugal 3 anos
Portugal 3 anosPortugal 3 anos
Portugal 3 anos
 

More from Joseph Chiang

不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会Joseph Chiang
 
Automatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabsAutomatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabsJoseph Chiang
 
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)Joseph Chiang
 
JavaScript Code Quality
JavaScript Code QualityJavaScript Code Quality
JavaScript Code QualityJoseph Chiang
 
前端的未來 - 前端工程實務訓練
前端的未來 - 前端工程實務訓練前端的未來 - 前端工程實務訓練
前端的未來 - 前端工程實務訓練Joseph Chiang
 
Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練Joseph Chiang
 
Debugging - 前端工程開發實務訓練
 Debugging - 前端工程開發實務訓練 Debugging - 前端工程開發實務訓練
Debugging - 前端工程開發實務訓練Joseph Chiang
 
Javascript 入門 - 前端工程開發實務訓練
Javascript 入門 - 前端工程開發實務訓練Javascript 入門 - 前端工程開發實務訓練
Javascript 入門 - 前端工程開發實務訓練Joseph Chiang
 
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Joseph Chiang
 
前端工程開發實務訓練
前端工程開發實務訓練前端工程開發實務訓練
前端工程開發實務訓練Joseph Chiang
 
YUI 教學 - 前端工程開發實務訓練
YUI 教學 - 前端工程開發實務訓練YUI 教學 - 前端工程開發實務訓練
YUI 教學 - 前端工程開發實務訓練Joseph Chiang
 
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練Joseph Chiang
 
HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練Joseph Chiang
 
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京Joseph Chiang
 
YUI is Sexy (for JSDC.tw)
YUI is Sexy (for JSDC.tw)YUI is Sexy (for JSDC.tw)
YUI is Sexy (for JSDC.tw)Joseph Chiang
 
YUI is Sexy - 使用 YUI 作為開發基礎
YUI is Sexy - 使用 YUI 作為開發基礎YUI is Sexy - 使用 YUI 作為開發基礎
YUI is Sexy - 使用 YUI 作為開發基礎Joseph Chiang
 

More from Joseph Chiang (20)

不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
 
Let's Redux!
Let's Redux!Let's Redux!
Let's Redux!
 
Automatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabsAutomatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabs
 
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)
 
JavaScript Promise
JavaScript PromiseJavaScript Promise
JavaScript Promise
 
F2E for Enterprise
F2E for EnterpriseF2E for Enterprise
F2E for Enterprise
 
JavaScript Code Quality
JavaScript Code QualityJavaScript Code Quality
JavaScript Code Quality
 
F2E, the Keystone
F2E, the KeystoneF2E, the Keystone
F2E, the Keystone
 
前端的未來 - 前端工程實務訓練
前端的未來 - 前端工程實務訓練前端的未來 - 前端工程實務訓練
前端的未來 - 前端工程實務訓練
 
Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練
 
Debugging - 前端工程開發實務訓練
 Debugging - 前端工程開發實務訓練 Debugging - 前端工程開發實務訓練
Debugging - 前端工程開發實務訓練
 
Javascript 入門 - 前端工程開發實務訓練
Javascript 入門 - 前端工程開發實務訓練Javascript 入門 - 前端工程開發實務訓練
Javascript 入門 - 前端工程開發實務訓練
 
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
 
前端工程開發實務訓練
前端工程開發實務訓練前端工程開發實務訓練
前端工程開發實務訓練
 
YUI 教學 - 前端工程開發實務訓練
YUI 教學 - 前端工程開發實務訓練YUI 教學 - 前端工程開發實務訓練
YUI 教學 - 前端工程開發實務訓練
 
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
 
HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練
 
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
 
YUI is Sexy (for JSDC.tw)
YUI is Sexy (for JSDC.tw)YUI is Sexy (for JSDC.tw)
YUI is Sexy (for JSDC.tw)
 
YUI is Sexy - 使用 YUI 作為開發基礎
YUI is Sexy - 使用 YUI 作為開發基礎YUI is Sexy - 使用 YUI 作為開發基礎
YUI is Sexy - 使用 YUI 作為開發基礎
 

YUI Library Workshop (Yahoo! Course at NCU)