Your SlideShare is downloading. ×
0
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
DOM Scripting & jQuery
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

DOM Scripting & jQuery

1,709

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,709
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
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. DOM Scripting & jQuery - First Step - performed by A.Yonekura
  • 2. DOM Scripting 1 Web 準拠による JavaScript JavaScript スクリプト言語 (動作・ふるまい) Behavior Content CSS プレゼンテーション言語 HTML ( レイアウト・装飾 ) Presentation 構造化言語 (要素・文章) W3C による「Web 準拠」の概念では、構造化言語の HTML とプレゼンテーション言 語の CSS を役割で分離するよう推奨している。 DOM Scripting & jQuery performed by A.Yonekura
  • 3. DOM Scripting 2 DOM 概念 JavaScript スクリプト言語 Behavior (動作・ふるまい) Document Object Model HTML 構造化言語 Content (要素・文章) 構造化言語(HTML)をスクリプトやプログラム言語(JavaScript) から利用するため の仕組み < インターフェイス > を DOM(Document Object Model) と呼ぶ。 DOM Scripting & jQuery performed by A.Yonekura
  • 4. DOM Scripting 3 DOM 概念 JavaScript スクリプト言語 Behavior (動作・ふるまい) DOM Scripting HTML Content 構造化言語 (要素・文章) JavaScriptが DOMを利用して HTML+CSSにアクセスすると Web標準に準拠した、機 能の分離が図れる。この方式を DOM Scriptingと呼ぶ。 DOM Scripting & jQuery performed by A.Yonekura
  • 5. DOM Scripting 4 旧式での JavaScript のの記述方法 <title>JavaScript - old type</title> <script type="text/javascript"> <!-- function imgChg(imageName,i){ if(navigator.appVersion.charAt(0) >= 4 && loadfinish == true){ document.images[imageName].src=preImage[i].src; } } function init(){ preloadImage(); } //--> </script> </head> <body onLoad="init()"> <a href="#" onMouseOver="imgChg('b2',3)"> <img src="img/button02.gif" name="b2"></a> </body> HTMLのコード内に JavaScriptを入れて記述していた為、HTMLソースが煩雑になり 容量や動作が重くなる原因となっていた。 DOM Scripting & jQuery performed by A.Yonekura
  • 6. DOM Scripting 5 DOM の記述方法 <title>DOM Scripting</title> <script type="text/javascript" src="dom8.js"></script> </head> <body> <div id="container"> <h2 id="drink" title=" ドリンクメニュー "> 本日のコーヒー </h2> <p><a href="#" id="addMenu"> メニュー追加 </a></p> <ul id="menu"> <li> ブレンドコーヒー </li> <li> カプチーノ </li> <li> カフェラテ </li> <li> キャラメル マキアート </li> </ul> </div> </body> 外部 JavaScriptファイルへのリンクのみで動作させることができる DOM Scripting & jQuery performed by A.Yonekura
  • 7. DOM Scripting 6 DOM ツリー図 body div #container h2 #drink p a #addMenu ul #menu li li li li HTMLの各要素をプログラムで扱う為には、要素をオブジェクトとみなし扱うことにな る。HTMLの要素を DOMツリーで表すことで構造を把握することができる DOM Scripting & jQuery performed by A.Yonekura
  • 8. DOM Scripting 7 ノード <node> について ノードネーム 属性 node name attribute <h2 title=" メニュー "> コーヒー </h2> ノード node ドキュメント上の要素 (オブジェクト)を DOMでは、ノードと呼ぶ。ノードの属性を取 得したり、ノード自体を書き換えたりすることでドキュメントを動的に操作する。 DOM Scripting & jQuery performed by A.Yonekura
  • 9. DOM Scripting 8 テキストノード <text node> について テキストノード text node <h2 title=" メニュー "> コーヒー </h2> テキストノードの前後にも <> が隠れて存在していると 考えるとわかりやすい テキストノードもオブジェクトに含まれるので、ノードが存在する。テキストノード自 体はオブジェクトなので、”コーヒーという文字列を取得するためには nodeValeを使う DOM Scripting & jQuery performed by A.Yonekura
  • 10. DOM Scripting 9 DOM で取り扱うプロパティ firstChild  子供ノードの一番目を取得 lastChild  子供ノードの最後を取得 p a #addMenu childNodes 子供たち(配列で返す) ul #menu li parentNode 親ノード li nodeValue テキストノードの文字列を取得 li nodeName  ノードの名前(タグ名を)取得 li DOM Scripting & jQuery performed by A.Yonekura
  • 11. DOM Scripting 10 DOM で取り扱うメソッド getElementById()  id を取得 getElementsByTagName() 同じタグ名の要素を取得 appendChild() 新しいノードを追加する ul #menu li removeChild() ノードを削除する li createElement() 指定した要素を作る li createTextNode() テキストノードを作る li DOM Scripting & jQuery performed by A.Yonekura
  • 12. DOM Scripting 11 サンプル例 (dom0.html)  〜省略〜 <title>DOM Scripting</title> </head> <body> <div id="container"> <h2 id="drink" title=" ドリンクメニュー "> 本日のコーヒー </h2> <p><a href="#" id="addMenu"> メニュー追加 </a></p> <ul id="menu"> <li> ブレンドコーヒー </li> <li> カプチーノ </li> <li> カフェラテ </li> <li> キャラメル マキアート </li> </ul> </div> </body> DOM Scripting & jQuery performed by A.Yonekura
  • 13. DOM Scripting 12 サンプル例 (dom1.html)  〜省略〜 <div id="container"> <h2 id="drink" title=" ドリンクメニュー "> 本日のコーヒー </h2> <p><a href="#" id="addMenu"> メニュー追加 </a></p> <ul id="menu"> <li> ブレンドコーヒー </li> <li> カプチーノ </li> ・getElementByIdを使い idを取得 <li> カフェラテ </li> ・nodeNameからタグ名を取得 <li> キャラメル マキアート </li> </ul> </div> <script type="text/javascript"> var drink = document.getElementById('drink'); alert(drink.nodeName); </script> </body> DOM Scripting & jQuery performed by A.Yonekura
  • 14. DOM Scripting 13 サンプル例 (dom2.html)  〜省略〜 <div id="container"> <h2 id="drink" title="ドリンクメニュー">本日のコーヒー</h2> <p><a href="#" id="addMenu">メニュー追加</a></p> <ul id="menu"> <li>ブレンドコーヒー</li> ・getElementByIdを使いidを取得 <li>カプチーノ</li> ・nodeValueから文字列を取得 <li>カフェラテ</li> <li>キャラメル マキアート</li> ・テキストノードが挟まるため </ul> firstChildが必要になる </div> <script type="text/javascript"> var drink = document.getElementById('drink'); alert(drink.firstChild.nodeValue); // アラート結果 本日のコーヒー : </script> </body> DOM Scripting & jQuery performed by A.Yonekura
  • 15. DOM Scripting 14 サンプル例 (dom3.html)  〜省略〜 <div id="container"> <h2 id="drink" title="ドリンクメニュー">本日のコーヒー</h2> <p><a href="#" id="addMenu">メニュー追加</a></p> <ul id="menu"> <li>ブレンドコーヒー</li> ・getElementsByTagNameを使い<li>を取得 <li>カプチーノ</li> <li>カフェラテ</li> ・配列からlengthで<li>のノード数を取得 <li>キャラメル マキアート</li> </ul> </div> <script type="text/javascript"> var menuList = document.getElementsByTagName("li"); alert(menuList.length); // アラート結果 4 : </script> </body> DOM Scripting & jQuery performed by A.Yonekura
  • 16. DOM Scripting 15 サンプル例 (dom4.html)  〜省略〜 <div id="container"> <h2 id="drink" title="ドリンクメニュー">本日のコーヒー</h2> <p><a href="#" id="addMenu">メニュー追加</a></p> <ul id="menu"> <li>ブレンドコーヒー</li> ・getElementsByTagNameを使い<li>を取得 <li>カプチーノ</li> <li>カフェラテ</li> ・配列からlengthで<li>のノード数を取得 <li>キャラメル マキアート</li> ・<li>の1番目の文字列を取得 </ul> </div> <script type="text/javascript"> var menuList = document.getElementsByTagName("li"); alert(menuList.item(0).firstChild.nodeValue); // アラート結果 ブレンドコーヒー : </script> </body> DOM Scripting & jQuery performed by A.Yonekura
  • 17. DOM Scripting 16 サンプル例 (dom5.html)  〜省略〜 <h2 id="drink" title="ドリンクメニュー">本日のコーヒー</h2> <p><a href="#" id="addMenu">メニュー追加</a></p> <ul id="menu"> <li>ブレンドコーヒー</li> <li>カプチーノ</li> ・getElementByIdを使いid"drink"を取得 <li>カフェラテ</li> <li>キャラメル マキアート</li> ・getAttributeから属性"title"の値を取得 </ul> </div> <script type="text/javascript"> var drink = document.getElementById("drink"); var drinkTitle = drink.getAttribute("title") alert(drinkTitle); // アラート結果 ドリンクメニュー : </script> </body> DOM Scripting & jQuery performed by A.Yonekura
  • 18. DOM Scripting 17 サンプル例 (dom6.html)  〜省略〜 <p><a href="#" id="addMenu">メニュー追加</a></p> <ul id="menu"> ・getElementByIdを使いid"menu"を取得 <li>ブレンドコーヒー</li> ・createElementで<li>を新規に作成 <li>カプチーノ</li> <li>カフェラテ</li> ・createTextNodeでテキストノード 「カフェモカ」 <li>キャラメル マキアート</li> を新規に作成 <li>カフェモカ</li> ・appendChildで<li>の中にテキストノードを追加 </ul> </div> ・appendChildで<ul>の中に新規<li>を追加 <script type="text/javascript"> var menu = document.getElementById("menu"); var newList = document.createElement("li"); var newText = document.createTextNode("カフェモカ"); newList.appendChild(newText); menu.appendChild(newList); </script> </body> DOM Scripting & jQuery performed by A.Yonekura
  • 19. DOM Scripting 18 サンプル例 (dom7.html)  <title>DOM Scripting</title> <script type="text/javascript"> window.onload = function(){ var menu = document.getElementById("menu"); var newList = document.createElement("li"); var newText = document.createTextNode("カフェモカ"); var addMenu = document.getElementById("addMenu"); addMenu.onclick = function(){ newList.appendChild(newText); menu.appendChild(newList); } } </script> </head><body> 〜省略〜 <p><a href="#" id="addMenu">メニュー追加</a></p> <ul id="menu"> <li>ブレンドコーヒー</li> <li>カプチーノ</li> ・ window.onloadを使い読み込み後の実行 <li>カフェラテ</li> ・ getElementByIdで"addMenu"を取得 <li>キャラメル マキアート</li> ・ <a>タグのaddMenuをクリックすると <li>カフェモカ</li> </ul> appendChildで<li>カフェモカ</li>が追加 DOM Scripting & jQuery performed by A.Yonekura
  • 20. DOM Scripting 19 サンプル例 (dom8.html)  <title>DOM Scripting</title> <script type="text/javascript" src="dom8.js"></script> </head> <body> <div id="container"> <h2 id="drink" title="ドリンクメニュー">本日のコーヒー</h2> <p><a href="#" id="addMenu">メニュー追加</a></p> <ul id="menu"> <li>ブレンドコーヒー</li> ・JavaScriptの記述を外部ファイルに移動 <li>カプチーノ</li> ・リンクさせる <li>カフェラテ</li> <li>キャラメル マキアート</li> </ul> </div> </body> </html> DOM Scripting & jQuery performed by A.Yonekura
  • 21. jQuery 1 JavaScript ライブラリ jquery-1.3.2.min.js <title>DOM Scripting</title> <script type="text/javascript" src="jquery-1.3.2.min.js"> </script> </head> <body> ・外部ファイルとしてリンクさせる http://jquery.com/ jQuery とは JavaScript フレームワーク。軽量で短いコードの記述が短い。 CSS 風にアクセスするので理解しやすい点が特徴。 DOM Scripting & jQuery performed by A.Yonekura
  • 22. jQuery 2 サンプル例 (jq0.html)  <title>jQuery</title> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <style type="text/css"> #box { background: red; width:300px; height:300px; } </style> </head> <body> <div id="box"></div> <a href="#">クリック!</a> </body> </html> DOM Scripting & jQuery performed by A.Yonekura
  • 23. jQuery 3 ウインドウの読み込み ・window.onloadのショートカット <script type="text/javascript"> $(function() { ここに記述 }); </script> DOM Scripting & jQuery performed by A.Yonekura
  • 24. jQuery 4 イベントハンドラ $( ). イベント名 (function( ){ )} <script type="text/javascript"> $(function() { $("a").click(function(){ alert("クリックしました"); }); }); ・<a>タグをクリックしたら、アラートを表示 </script> DOM Scripting & jQuery performed by A.Yonekura
  • 25. jQuery 5 CSS セレクタ $("a") a 要素 $("p a") p 要素の子孫の a 要素 $("p.myClass") class 属性 $("p#myId") id 属性 <script type="text/javascript"> $(function() { $("a#menu").click(function(){ alert("クリックしました"); }); }); </script> 〜省略〜 <a href="#" id="menu">クリック</a> DOM Scripting & jQuery performed by A.Yonekura
  • 26. jQuery 6 サンプル例 (jq1.html)  <title>jQuery</title> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <style type="text/css"> #box { background: red; width:300px; height:300px; } </style> <script type="text/javascript"> $(function() { $('a').click(function(){ $('#box').fadeOut('fast'); }); }); </script> ・<a>タグをクリックしたら、 #boxがフェードアウト </head> <body> <div id="box"></div> <a href="#">クリック!</a> </body> </html> DOM Scripting & jQuery performed by A.Yonekura
  • 27. jQuery 7 サンプル例 (jq2.html)  <title>jQuery</title> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <style type="text/css"> #box { background: red; width:300px; height:300px; display: none; } </style> <script type="text/javascript"> $(function() { ・ <a>タグをクリックしたら、 3000ミリ秒で $('a').click(function(){  #boxがスライドして表示 $('#box').slideDown(3000); }); }); </script> </head> <body> <div id="box"></div> <a href="#">クリック!</a> </body> DOM Scripting & jQuery performed by A.Yonekura
  • 28. jQuery 8 サンプル例 (jq3.html)  <title>jQuery</title> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <style type="text/css"> #box { background: red; width:300px; ・ <a>タグをクリックしたら、 height:300px; #boxが1000ミリ秒でleft300pxの位置へ移動 position:relative; } 連続で </style> <script type="text/javascript"> #boxが3000ミリ秒で幅50pxに縮小 $(function() { $('a').click(function(){ $('#box').animate({"left":"300px"},1000); $('#box').animate({"width":"50px"},3000); }); }); </script> </head> <body> <div id="box"></div> <a href="#">クリック!</a> DOM Scripting & jQuery performed by A.Yonekura
  • 29. DOM Scripting & jQuery ..... to be continued 参考: 「DOM Scripting 標準ガイドブック」 「Web クリエイティブのための DOM Scripting」 DOM Scripting & jQuery performed by A.Yonekura

×