Your SlideShare is downloading. ×
JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript

1,441

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,441
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Ajax サイトの実例  ・gucci   http://www.gucci.com/    ・symbaloo   http://www.symbaloo.com/jp/    ・Amazon.com Loose Diamonds   ※URL が長い為省略     ・Ajax で作られた OS「StartForce」   http://www.startforce.jp/ その他参考サイト あるSEのつぶやき:Ajax ライブラリまとめ http://fnya.cocolog-nifty.com/blog/2006/08/ajax_76d4.html EfficientJavaScript - Dev.Opera - 効率的な JavaScript http://www.hyuki.com/yukiwiki/wiki.cgi?EfficientJavaScript jQuery http://jquery.com/ Canvas tutorial - MDC - Mozilla Firefox http://developer.mozilla.org/en/docs/Canvas_tutorial Flash|Ajax ベストサイトセレクション 20 -つくるぶ 特集 http://www.tkrb.jp/modules/feature0/index.php?id=12 Web OS について調べてみよう http://d.hatena.ne.jp/NGC2237/20070106/1168097986 1
  • 2. JS サンプル:要素の状態を変更する & ボタンがクリック されたら処理を行う <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript テスト(Q1)</title> </head> <body> <h1>div 要素に色を付ける</h1> <form> <input type="button" id="button1" value="クリック" /> </form> <div id="box1">BOX</div> <script type="text/javascript"> var button1 = document.getElementById( 'button1' ); button1.onclick = function(){ // box1 の div 要素を取得して変数に入れる var box1 = document.getElementById( 'box1' ); // box1 のスタイルを変更する box1.style.backgroundColor = 'lime'; // box1 の内容を変更する box1.innerHTML = 'FITEA セミナーへようこそ!'; }; </script> </body> </html> 2
  • 3. JS サンプル:画像をズームするアニメーション <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript テスト</title> </head> <body> <h1>画像のズーム</h1> <img id="image1" src="http://farm3.static.flickr.com/2245/2204016428_17ff31a22c_m.jpg" alt="image1" width="40" height="30" /> <script type="text/javascript"> function zoomIn(){ var image1 = document.getElementById( 'image1' ); image1.width += 8; image1.height += 6; if ( image1.width > 200 ) { clearInterval( timer1 ); } } var timer1 = setInterval( zoomIn, 100 ); </script> </body> </html> 3
  • 4. Ajax ライブラリ ・便利な処理をまとめたライブラリがたくさんある。 ・ブラウザ間の互換性も吸収されている。 ・大きく分けて ・・  ・基本系(Ajax 通信や便利関数)  ・GUI 部品系(タブ、スライダ、ポップアップ、カレンダー…)  ・エフェクト系(アニメーション等)  などがある。 Ajax ライブラリ ・基本系+エフェクト系+GUI 部品系 ・prototype.js + script.aculo.us + GUI 部品系 ・jQuery (+ GUI 部品系)  ※jQuery UI は、まだ整備中の段階 ・dojo ・adobe spry  ※spry の GUI 部品はそれほど多くない GUI 部品系 ・Yahoo! UI Library(ウェブデザイナ向き) ・Ext(プログラマ向き) ・dojo の GUI 部品も非常に豊富 ・この中でも今日は jQuery をご紹介。 4
  • 5. jQuery サンプル:$関数と簡単なエフェクト <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery テスト</title> <script type="text/javascript" src="jquery.js"></script> </head> <body> <h1>jQuery テスト</h1> <div id="box1">BOX</div> <script type="text/javascript"> $('#box1').css( 'background-color', 'aqua' ).html( 'jQuery 最高!' ); // $('#box1').click( イベントハンドラ ); $('#box1').click( function(){ $(this) .html( 'クリックしたよ!' ) .fadeOut() .fadeIn() .slideUp() .slideDown() .animate( { fontSize:'5em', opacity:0.3 } ); } ); </script> </body> </html> 5
  • 6. jQuery サンプル:$関数と簡単なエフェクト <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript テスト</title> <script type="text/javascript" src="jquery.js"></script> </head> <body> <h1>テーブルを縞模様に</h1> <table id="table1"> <tr><td>FITEA へようこそ!</td></tr> <tr><td>FITEA へようこそ!</td></tr> <tr><td>FITEA へようこそ!</td></tr> <tr><td>FITEA へようこそ!</td></tr> <tr><td>FITEA へようこそ!</td></tr> <tr><td>FITEA へようこそ!</td></tr> <tr><td>FITEA へようこそ!</td></tr> <tr><td>FITEA へようこそ!</td></tr> <tr><td>FITEA へようこそ!</td></tr> </table> <script type="text/javascript"> $('#table1 td').css( 'background-color', 'aqua' ); $('#table1 td:even').css( 'background-color', 'lime' ); $('#table1 td:odd').css( 'background-color', 'yellow' ); $('#table1 td:first').css( 'background-color', 'red' ); $('#table1 td:last' ).css( 'background-color', 'blue' ); </script> </body> </html> 6
  • 7. jQuery サンプル:$.get 関数による非同期データ取得 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript テスト</title> <script type="text/javascript" src="jquery.js"></script> </head> <body> <h1>Yahoo!Pipes から JSONP</h1> <div id="message"></div> <form><input type="button" id="button1" value="クリック!" /></form> <script type="text/javascript"> $('#button1').click( function() { $.get( 'data.txt', done ); }); function done( data ) { $('#message').html( data ); } </script> </body> </html> 7
  • 8. jQuery サンプル:load 関数による非同期データ取得 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript テスト</title> <script type="text/javascript" src="jquery.js"></script> </head> <body> <h1>Yahoo!Pipes から JSONP</h1> <div id="message"></div> <form><input type="button" id="button1" value="クリック!" /></form> <script type="text/javascript"> $('#button1').click( function() { $('#message').load( 'data.txt' ); }); </script> </body> </html> 8
  • 9. jQuery サンプル:Yahoo!Pipes の JSONP を使ったクロス ドメイン間通信 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript テスト</title> <script type="text/javascript" src="jquery.js"></script> </head> <body> <h1>Yahoo!Pipes から JSONP</h1> <ul id="message"></div> <script type="text/javascript"> $.getJSON( 'http://pipes.yahoo.com/pipes/pipe.run? _id=SpL_UUfK3BGnV0DrGcevXg&_render=json&_callback=?', done ); function done( json ) { for ( var index in json.value.items ) { var item = json.value.items[ index ]; $('#message').append( '<li><a href="' + item.link + '">' + item.title + '</a></li>' ); } } </script> </body> </html> 9
  • 10. 正しい script タグの書き方 HTML4 <script type="text/javascript"> <!-- ここにコード //--> </script> XHTML1.0 <script type="text/javascript"> //<![CDATA[ ここにコード //]]> </script> script 中にタグが出現する場合 ・XHTML の仕様上は OK。 ・HTML4 の場合は以下のようにする div.innerHTML = '<span>あいう</span>'; この「</」が NG。 div.innerHTML = '<span>あいう</span>';   又は、 div.innerHTML = '<span>あいう<' + '/span>'; 外部 JavaScript の場合は問題なし。 SEO とアクセシビリティ ・JavaScript で生成したコンテンツはクロールされない。 ・スクリーンリーダーも読みあげてくれない。 ・display:none の要素もクロールされにくい。 ・操作性とのトレードオフ。 10
  • 11. script はどのタイミングで実行されるべきか? (1) body タグ内の script に直書き <body> <要素 1 /> <script type="text/javascript"> dosomething(); </script> <要素 2 /> </body> ・要素 1 が読み込まれた後に実行。 ・実行が終わってから要素 2 が読み込まれる。 ・ページ表示が遅くなるので極力この方法は使ってはいけない。 (2) head に書いて body.onload で実行 <head> <script type="text/javascript"> function dosomething(){ 処理 } // ここに body.onload = dosomething とは書けない。 </script> </head> <body onload="dosomething()"> <要素 1 /> <要素 2 /> </body> ・全ての要素が読み込まれた後に実行。 ・しかし、画像などのファイルも全て読むまで実行されない。 ・ユーザーを待たせる事になる。 11
  • 12. (3) HTML「だけ」が全て読み込まれた時点で実行したい ・DOMContentLoaded イベントがある。 ・IE と Safari は実装していない。 ・かなり無理やりな方法で実現することは可能。 ・でも、自分で作ってられない。  →Ajax ライブラリ (4) jQuery の場合  $(document).ready()が全部やってくれる! <head> <script type="text/javascript"> $(document).ready( イベントハンドラ ); </script> </head> ・他の Ajax ライブラリにも同様の機能がある。 12

×