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

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
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
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsRoshan Dwivedi
 

Recently uploaded (20)

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
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
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 

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