SlideShare a Scribd company logo
1 of 21
JavaScript Lunch 6
       June 12, 2008

         Naofumi HAIDA
     Cirius Technologies
JavaScript Lunch 目次

                                      ライブラリ
    Object 指向的 JavaScript (第1回)   •
•
                                       • jQuery
     • 継承
                                           • Introduction ($ 関数) (第2
     • クロージャ
                                             回)
    Reusable Codes
•
                                           • jQuery UI
     • Packaging
                                       • prototype.js
    デバッグ、テストツール
•                                      • Yahoo! UI
     • Firebug                         • Mochi Kit
    DOM
•                                     Effect
                                  •
     • Basics of DOM (第5回)             • JavaScript & CSS (第4回)
                                                               Today’s
                                       • Improving Forms
     • DOM要素の挿入
                                                                Topic!
                                      その他
     • XPath                      •
                                       • JavaScript 言語の展望
    Events
•
                                       • Processing JS
     Ajax
•
     • 仕組み (第3回)
     • デザインパターン
アジェンダ

• JavaScript 言語の展望
• Web Application 1.0 Specification.
各ブラウザの JavaScript サポート
                     Firefox         Safari          Opera                  Internet Explorer
Version
               3.0             2.0    3.0     9.50           9.24     8.0         7.0           6.0
  2.0                                         Yes            Yes
  1.9
  1.8          Yes
  1.7          Yes             Yes    Yes
  1.6          Yes             Yes    Yes
                                                                      Yes         Yes        Yes
  1.5          Yes             Yes    Yes     Yes            Yes    (JScript    (JScript   (JScript
                                                                      6.0)        5.7)       5.6)
  1.4          Yes             Yes    Yes     Yes            Yes      Yes         Yes           Yes
  1.3          Yes             Yes    Yes     Yes            Yes      Yes         Yes           Yes
  1.2          Yes             Yes    Yes     Yes            Yes      Yes         Yes           Yes
  1.1          Yes             Yes    Yes     Yes            Yes      Yes         Yes           Yes
          http://diaspar.jp/node/56 及び http://en.wikipedia.org/wiki/JavaScript より一部抜粋
JavaScript 2.0 へ

 ※ ECMAScript: 互換性の低いJavaScriptと
 JScriptを標準化すべく、両方の言語に共通
 する部分を取り入れて作られた言語仕様。
 現在の最新バージョンは3 (3rd edition)
                                                              JavaScript 2.0
                                                              - ECMAScript 4
                                            JavaScript 1.7    準拠
                                            - Array           - Classes
                                            Comprehension
                                                              - Packages
                         JavaScript 1.6     - Let Scoping
                                                              - object
                         - ECMAScript for   - Destructruing   protection
                         XML (E4X)
                                                              - dynamic
                         - Array Extras
        JavaScript 1.5                                        types
        今ここ。                                                  - scoping
JavaScript 1.6 主要リリース

• ECMAScript for XML: E4X
  – JavaScript 言語中、inline で XML を簡単に記述
    するためのプログロミング言語拡張
    • http://www.ecma-
      international.org/publications/standards/Ecma-357.htm

• Array 拡張
  – 配列に便利な関数を追加
ECMA Script for XML (例)

<script type=”text/javascript;e4x=1”>

var html = <html/>;

html.head.title = 'My page title';
html.body.@bgcolor = '#e4e4e4';
                                                このJavaScript
html.body.form.@action = 'someurl.cgi';        コードは次ページ
html.body.form.@name = 'myform';               のような html を
html.body.form.@method = 'post';               生成したのと同じ
html.body.form.@onclick = 'return somejs()';

html.body.form.input[0] = '';
html.body.form.input[0].@name = 'test';

</script>
ECMA Script for XML (例) (cont.)

<html>
 <head>
  <title>My page title</title>
 </head>

 <body bgcolor=quot;#e4e4e4quot;>

  <form method=quot;postquot; name=quot;myformquot; action=quot;someurl.cgiquot;
  onclick=quot;return somejs();quot;>
   <input value=quot;quot; name=quot;testquot; />
  </form>

 </body>
</html>
余談。

バージョンを指定した JavaScript コードの書
 き方

<script type=quot;text/javascript;version=1.6quot;
  language=quot;JavaScript1.6quot;>
// ここにソースを書く
</script>
Array 拡張

• indexOf(), lastIndexOf()
  – String 型オブジェクトが備えるメソッドと同じ
• forEach(), some(), many()
  – ループ処理を完結に記述可能
• filter(), map()
  – Perl の grep, map 関数と同じ
Array 拡張(例)

var tmp = [1, 2, 3, 4, 5, 3];

// indexOf( Object )
tmp.indexOf( 3 ) == 2;
tmp.indexOf( 8 ) == -1;

// lastIndexOf( Object )
tmp.lastIndexOf( 3 ) == 5;

// forEach( Function )
tmp.forEach( alert );
Array 拡張(例)(cont.)

var tmp = [1, 2, 3, 4, 5, 3];

// every( Function )
tmp.every( function( num ) {
  return num < 6;
}); // true

// some( Function )
tmp.some( function( num ) {
  return num > 6;
}); // false
Array 拡張(例)(cont.)

var tmp = [1, 2, 3, 4, 5, 3];

// filter( Function )
tmp.filter( function( num ) {
  return num > 3;
}); // [4, 5];

// map( Function )
tmp.map( function( num ) {
  return num + 2;
});// [3, 4, 5, 6, 7, 5];
余談。これらの拡張は実装できます

 例)
Array.prototype.forEach = function(block) {
 for (var i = 0, l = this.length; i < l; ++i) {
   var item = this[i];
   block(item, i)
 }
 return(this)
};
JavaScript 1.7 主要リリース

• Array Comprehension
  – 洗練された Array 記述を可能に
• Let Scoping
  – ブロックレベルでの変数スコープを可能に
• Destructing
  – 複雑なデータ構造を演算子の左側に持てる
  – http://wiki.ecmascript.org/doku.php?id=disc
    ussion:destructuring_assignment
Array comprehension
// [1,2,3,4,5,6,7,8,9,10]   // [1,2,3,4,5,6,7,8,9,10]
var array = [];             var array =
for(var i=0; i<10; i++){     [i for (i=0; i<10; i++)];
  array.push( i );
}


var array = [];             var array =
for ( var key in obj ) {     [ key for ( key in
                               obj ) ];
  array.push( key );
}
Let Scoping
                          var test = 10;
var test = 10;
                          if ( test == 10 ) {
let( test = 20 ) {          let newTest = 20;
  alert( test ); // 20      test += newTest;
                          }
}
                          alert( test ); // 30
alert( test ); // 10      alert( newTest ); // undefined

                          for( let i=0; i<10; i++)
var test = 10;
                             {
alert( let( test = 20 )
                            alert( i );
  test ); // 20
                          }
alert( test ); // 10
                          alert( i ); // undefined
Destructuring

// 値の入れ替え
[ b, a ] = [ a, b ];

// 複数値への代入
var [ name, sex ] = [ 'Bob', 'Man' ];

var { name: myName } = { name: 'Bob' };
// myName == 'Bob'
Destructuring (cont.)

var users = [
  { name: 'John', sex: 'Man'},
  { name: 'Bob', sex: 'Man'},
  { name: 'Jane', sex: 'Female'}
];

for( let { name: name, sex: sex } in users ) {
  alert( name + ' is a ' + sex.toDowncase() );
}
Web Applications 1.0

• Web Hypertext Application Technology Working
  Group: WHAT-WG
  – ウェブアプリケーション 1.0 の仕様の整理をする団体
  – DOM, HTML5, JavaScript…
     • The entire Web Applications 1.0 specification:
       http://whatwg.org/specs/web-apps/current-work/
• Canvas
  – WHAT-WG で注目の仕様
  – 画像の回転、線や図形を描くなどが可能に。
     • The subsection of the specification dealing specifically with
       the new <canvas> element: http://whatwg.org/specs/web-
       apps/current-work/#the-2d
Canvas を利用したデモ

 1. http://dev2.cirius.
    co.jp/~haida/jslun
    ch/canvas.html

 2. http://dev2.cirius.
    co.jp/~haida/jslun
    ch/canvas2.html

More Related Content

Viewers also liked

Social Networks and Traditional Media
Social Networks and Traditional MediaSocial Networks and Traditional Media
Social Networks and Traditional MediaDiyako
 
NES - 2da.jornada - 4abril2013 - Síntesis Escuela Walsh
NES - 2da.jornada - 4abril2013 - Síntesis Escuela WalshNES - 2da.jornada - 4abril2013 - Síntesis Escuela Walsh
NES - 2da.jornada - 4abril2013 - Síntesis Escuela WalshGustavo Damián Cucuzza
 
Constitución 2016 en el CCEE Reyes Católicos
Constitución 2016 en el CCEE Reyes CatólicosConstitución 2016 en el CCEE Reyes Católicos
Constitución 2016 en el CCEE Reyes CatólicosJuliete Kiko
 
International Marketing of Star Wars
International Marketing of Star WarsInternational Marketing of Star Wars
International Marketing of Star WarsGurinder Singh Virk
 
Portraits de jeunes caennais engagés
Portraits de jeunes caennais engagésPortraits de jeunes caennais engagés
Portraits de jeunes caennais engagésVilledeCaen
 

Viewers also liked (8)

KFC Pitch
KFC PitchKFC Pitch
KFC Pitch
 
Social Networks and Traditional Media
Social Networks and Traditional MediaSocial Networks and Traditional Media
Social Networks and Traditional Media
 
NES - 2da.jornada - 4abril2013 - Síntesis Escuela Walsh
NES - 2da.jornada - 4abril2013 - Síntesis Escuela WalshNES - 2da.jornada - 4abril2013 - Síntesis Escuela Walsh
NES - 2da.jornada - 4abril2013 - Síntesis Escuela Walsh
 
Constitución 2016 en el CCEE Reyes Católicos
Constitución 2016 en el CCEE Reyes CatólicosConstitución 2016 en el CCEE Reyes Católicos
Constitución 2016 en el CCEE Reyes Católicos
 
International Marketing of Star Wars
International Marketing of Star WarsInternational Marketing of Star Wars
International Marketing of Star Wars
 
Incineration
IncinerationIncineration
Incineration
 
Portraits de jeunes caennais engagés
Portraits de jeunes caennais engagésPortraits de jeunes caennais engagés
Portraits de jeunes caennais engagés
 
morahi tsotetsi
morahi tsotetsimorahi tsotetsi
morahi tsotetsi
 

Similar to Jslunch6

Performance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptPerformance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptjeresig
 
DOSUG Intro to JQuery JavaScript Framework
DOSUG Intro to JQuery JavaScript FrameworkDOSUG Intro to JQuery JavaScript Framework
DOSUG Intro to JQuery JavaScript FrameworkMatthew McCullough
 
Automated Frontend Testing
Automated Frontend TestingAutomated Frontend Testing
Automated Frontend TestingNeil Crosby
 
JSplash - Adobe MAX 2009
JSplash - Adobe MAX 2009JSplash - Adobe MAX 2009
JSplash - Adobe MAX 2009gyuque
 
Mockingbirdの実装@拡張機能勉強会
Mockingbirdの実装@拡張機能勉強会Mockingbirdの実装@拡張機能勉強会
Mockingbirdの実装@拡張機能勉強会Sotaro Karasawa
 
Efficient JavaScript Development
Efficient JavaScript DevelopmentEfficient JavaScript Development
Efficient JavaScript Developmentwolframkriesing
 
Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)
Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)
Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)taiwanweb20
 
JavaScript 1.5 to 2.0 (TomTom)
JavaScript 1.5 to 2.0 (TomTom)JavaScript 1.5 to 2.0 (TomTom)
JavaScript 1.5 to 2.0 (TomTom)jeresig
 
History of jQuery
History of jQueryHistory of jQuery
History of jQueryjeresig
 
High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)Stoyan Stefanov
 
Shibuya.abc - Gnashで遊ぼう
Shibuya.abc - Gnashで遊ぼうShibuya.abc - Gnashで遊ぼう
Shibuya.abc - Gnashで遊ぼうgyuque
 
Working With Rails
Working With RailsWorking With Rails
Working With RailsDali Wang
 
Glass Fish V3 University Amers May2009
Glass Fish V3  University Amers May2009Glass Fish V3  University Amers May2009
Glass Fish V3 University Amers May2009Eugene Bogaart
 
Building a JavaScript Library
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Libraryjeresig
 
Ajax и будущее Java Script
Ajax и будущее Java ScriptAjax и будущее Java Script
Ajax и будущее Java ScriptConstantin Kichinsky
 
Ruby on Rails Tutorial Part I
Ruby on Rails Tutorial Part IRuby on Rails Tutorial Part I
Ruby on Rails Tutorial Part IWei Jen Lu
 

Similar to Jslunch6 (20)

Performance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptPerformance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScript
 
DOSUG Intro to JQuery JavaScript Framework
DOSUG Intro to JQuery JavaScript FrameworkDOSUG Intro to JQuery JavaScript Framework
DOSUG Intro to JQuery JavaScript Framework
 
Automated Frontend Testing
Automated Frontend TestingAutomated Frontend Testing
Automated Frontend Testing
 
JSplash - Adobe MAX 2009
JSplash - Adobe MAX 2009JSplash - Adobe MAX 2009
JSplash - Adobe MAX 2009
 
Mockingbirdの実装@拡張機能勉強会
Mockingbirdの実装@拡張機能勉強会Mockingbirdの実装@拡張機能勉強会
Mockingbirdの実装@拡張機能勉強会
 
Efficient JavaScript Development
Efficient JavaScript DevelopmentEfficient JavaScript Development
Efficient JavaScript Development
 
Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)
Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)
Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)
 
JavaScript 1.5 to 2.0 (TomTom)
JavaScript 1.5 to 2.0 (TomTom)JavaScript 1.5 to 2.0 (TomTom)
JavaScript 1.5 to 2.0 (TomTom)
 
History of jQuery
History of jQueryHistory of jQuery
History of jQuery
 
High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)
 
Shibuya.abc - Gnashで遊ぼう
Shibuya.abc - Gnashで遊ぼうShibuya.abc - Gnashで遊ぼう
Shibuya.abc - Gnashで遊ぼう
 
Implementing SSH in Java
Implementing SSH in JavaImplementing SSH in Java
Implementing SSH in Java
 
What Can Compilers Do for Us?
What Can Compilers Do for Us?What Can Compilers Do for Us?
What Can Compilers Do for Us?
 
Working With Rails
Working With RailsWorking With Rails
Working With Rails
 
Glass Fish V3 University Amers May2009
Glass Fish V3  University Amers May2009Glass Fish V3  University Amers May2009
Glass Fish V3 University Amers May2009
 
Building a JavaScript Library
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Library
 
Better code in JavaScript
Better code in JavaScriptBetter code in JavaScript
Better code in JavaScript
 
Ajax и будущее Java Script
Ajax и будущее Java ScriptAjax и будущее Java Script
Ajax и будущее Java Script
 
yonex
yonexyonex
yonex
 
Ruby on Rails Tutorial Part I
Ruby on Rails Tutorial Part IRuby on Rails Tutorial Part I
Ruby on Rails Tutorial Part I
 

More from Nao Haida

プロダクトマネージャとセールスチームはどう連携すべきか 〜 失敗例と方針
プロダクトマネージャとセールスチームはどう連携すべきか 〜 失敗例と方針プロダクトマネージャとセールスチームはどう連携すべきか 〜 失敗例と方針
プロダクトマネージャとセールスチームはどう連携すべきか 〜 失敗例と方針Nao Haida
 
OpenID Tutorials
OpenID TutorialsOpenID Tutorials
OpenID TutorialsNao Haida
 

More from Nao Haida (6)

プロダクトマネージャとセールスチームはどう連携すべきか 〜 失敗例と方針
プロダクトマネージャとセールスチームはどう連携すべきか 〜 失敗例と方針プロダクトマネージャとセールスチームはどう連携すべきか 〜 失敗例と方針
プロダクトマネージャとセールスチームはどう連携すべきか 〜 失敗例と方針
 
Jslunch5
Jslunch5Jslunch5
Jslunch5
 
Jslunch3
Jslunch3Jslunch3
Jslunch3
 
Jslunch2
Jslunch2Jslunch2
Jslunch2
 
Jslunch1
Jslunch1Jslunch1
Jslunch1
 
OpenID Tutorials
OpenID TutorialsOpenID Tutorials
OpenID Tutorials
 

Recently uploaded

Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
Bluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdfBluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdfngoud9212
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
costume and set research powerpoint presentation
costume and set research powerpoint presentationcostume and set research powerpoint presentation
costume and set research powerpoint presentationphoebematthew05
 
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDGMarianaLemus7
 

Recently uploaded (20)

Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
Bluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdfBluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdf
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptxVulnerability_Management_GRC_by Sohang Sengupta.pptx
Vulnerability_Management_GRC_by Sohang Sengupta.pptx
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
costume and set research powerpoint presentation
costume and set research powerpoint presentationcostume and set research powerpoint presentation
costume and set research powerpoint presentation
 
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDG
 

Jslunch6

  • 1. JavaScript Lunch 6 June 12, 2008 Naofumi HAIDA Cirius Technologies
  • 2. JavaScript Lunch 目次 ライブラリ Object 指向的 JavaScript (第1回) • • • jQuery • 継承 • Introduction ($ 関数) (第2 • クロージャ 回) Reusable Codes • • jQuery UI • Packaging • prototype.js デバッグ、テストツール • • Yahoo! UI • Firebug • Mochi Kit DOM • Effect • • Basics of DOM (第5回) • JavaScript & CSS (第4回) Today’s • Improving Forms • DOM要素の挿入 Topic! その他 • XPath • • JavaScript 言語の展望 Events • • Processing JS Ajax • • 仕組み (第3回) • デザインパターン
  • 3. アジェンダ • JavaScript 言語の展望 • Web Application 1.0 Specification.
  • 4. 各ブラウザの JavaScript サポート Firefox Safari Opera Internet Explorer Version 3.0 2.0 3.0 9.50 9.24 8.0 7.0 6.0 2.0 Yes Yes 1.9 1.8 Yes 1.7 Yes Yes Yes 1.6 Yes Yes Yes Yes Yes Yes 1.5 Yes Yes Yes Yes Yes (JScript (JScript (JScript 6.0) 5.7) 5.6) 1.4 Yes Yes Yes Yes Yes Yes Yes Yes 1.3 Yes Yes Yes Yes Yes Yes Yes Yes 1.2 Yes Yes Yes Yes Yes Yes Yes Yes 1.1 Yes Yes Yes Yes Yes Yes Yes Yes http://diaspar.jp/node/56 及び http://en.wikipedia.org/wiki/JavaScript より一部抜粋
  • 5. JavaScript 2.0 へ ※ ECMAScript: 互換性の低いJavaScriptと JScriptを標準化すべく、両方の言語に共通 する部分を取り入れて作られた言語仕様。 現在の最新バージョンは3 (3rd edition) JavaScript 2.0 - ECMAScript 4 JavaScript 1.7 準拠 - Array - Classes Comprehension - Packages JavaScript 1.6 - Let Scoping - object - ECMAScript for - Destructruing protection XML (E4X) - dynamic - Array Extras JavaScript 1.5 types 今ここ。 - scoping
  • 6. JavaScript 1.6 主要リリース • ECMAScript for XML: E4X – JavaScript 言語中、inline で XML を簡単に記述 するためのプログロミング言語拡張 • http://www.ecma- international.org/publications/standards/Ecma-357.htm • Array 拡張 – 配列に便利な関数を追加
  • 7. ECMA Script for XML (例) <script type=”text/javascript;e4x=1”> var html = <html/>; html.head.title = 'My page title'; html.body.@bgcolor = '#e4e4e4'; このJavaScript html.body.form.@action = 'someurl.cgi'; コードは次ページ html.body.form.@name = 'myform'; のような html を html.body.form.@method = 'post'; 生成したのと同じ html.body.form.@onclick = 'return somejs()'; html.body.form.input[0] = ''; html.body.form.input[0].@name = 'test'; </script>
  • 8. ECMA Script for XML (例) (cont.) <html> <head> <title>My page title</title> </head> <body bgcolor=quot;#e4e4e4quot;> <form method=quot;postquot; name=quot;myformquot; action=quot;someurl.cgiquot; onclick=quot;return somejs();quot;> <input value=quot;quot; name=quot;testquot; /> </form> </body> </html>
  • 9. 余談。 バージョンを指定した JavaScript コードの書 き方 <script type=quot;text/javascript;version=1.6quot; language=quot;JavaScript1.6quot;> // ここにソースを書く </script>
  • 10. Array 拡張 • indexOf(), lastIndexOf() – String 型オブジェクトが備えるメソッドと同じ • forEach(), some(), many() – ループ処理を完結に記述可能 • filter(), map() – Perl の grep, map 関数と同じ
  • 11. Array 拡張(例) var tmp = [1, 2, 3, 4, 5, 3]; // indexOf( Object ) tmp.indexOf( 3 ) == 2; tmp.indexOf( 8 ) == -1; // lastIndexOf( Object ) tmp.lastIndexOf( 3 ) == 5; // forEach( Function ) tmp.forEach( alert );
  • 12. Array 拡張(例)(cont.) var tmp = [1, 2, 3, 4, 5, 3]; // every( Function ) tmp.every( function( num ) { return num < 6; }); // true // some( Function ) tmp.some( function( num ) { return num > 6; }); // false
  • 13. Array 拡張(例)(cont.) var tmp = [1, 2, 3, 4, 5, 3]; // filter( Function ) tmp.filter( function( num ) { return num > 3; }); // [4, 5]; // map( Function ) tmp.map( function( num ) { return num + 2; });// [3, 4, 5, 6, 7, 5];
  • 14. 余談。これらの拡張は実装できます 例) Array.prototype.forEach = function(block) { for (var i = 0, l = this.length; i < l; ++i) { var item = this[i]; block(item, i) } return(this) };
  • 15. JavaScript 1.7 主要リリース • Array Comprehension – 洗練された Array 記述を可能に • Let Scoping – ブロックレベルでの変数スコープを可能に • Destructing – 複雑なデータ構造を演算子の左側に持てる – http://wiki.ecmascript.org/doku.php?id=disc ussion:destructuring_assignment
  • 16. Array comprehension // [1,2,3,4,5,6,7,8,9,10] // [1,2,3,4,5,6,7,8,9,10] var array = []; var array = for(var i=0; i<10; i++){ [i for (i=0; i<10; i++)]; array.push( i ); } var array = []; var array = for ( var key in obj ) { [ key for ( key in obj ) ]; array.push( key ); }
  • 17. Let Scoping var test = 10; var test = 10; if ( test == 10 ) { let( test = 20 ) { let newTest = 20; alert( test ); // 20 test += newTest; } } alert( test ); // 30 alert( test ); // 10 alert( newTest ); // undefined for( let i=0; i<10; i++) var test = 10; { alert( let( test = 20 ) alert( i ); test ); // 20 } alert( test ); // 10 alert( i ); // undefined
  • 18. Destructuring // 値の入れ替え [ b, a ] = [ a, b ]; // 複数値への代入 var [ name, sex ] = [ 'Bob', 'Man' ]; var { name: myName } = { name: 'Bob' }; // myName == 'Bob'
  • 19. Destructuring (cont.) var users = [ { name: 'John', sex: 'Man'}, { name: 'Bob', sex: 'Man'}, { name: 'Jane', sex: 'Female'} ]; for( let { name: name, sex: sex } in users ) { alert( name + ' is a ' + sex.toDowncase() ); }
  • 20. Web Applications 1.0 • Web Hypertext Application Technology Working Group: WHAT-WG – ウェブアプリケーション 1.0 の仕様の整理をする団体 – DOM, HTML5, JavaScript… • The entire Web Applications 1.0 specification: http://whatwg.org/specs/web-apps/current-work/ • Canvas – WHAT-WG で注目の仕様 – 画像の回転、線や図形を描くなどが可能に。 • The subsection of the specification dealing specifically with the new <canvas> element: http://whatwg.org/specs/web- apps/current-work/#the-2d
  • 21. Canvas を利用したデモ 1. http://dev2.cirius. co.jp/~haida/jslun ch/canvas.html 2. http://dev2.cirius. co.jp/~haida/jslun ch/canvas2.html