DOM Scripting & jQuery
       - First Step -

      performed by A.Yonekura
DOM Scripting 1
Web 準拠による JavaScript


                                                  JavaScript
                      ...
DOM Scripting 2
DOM 概念
                                                JavaScript
                                        ...
DOM Scripting 3
DOM 概念
                                                JavaScript
                                        ...
DOM Scripting 4
旧式での JavaScript のの記述方法

  <title>JavaScript - old type</title>
  <script type="text/javascript">
  <!--
  ...
DOM Scripting 5
DOM の記述方法

 <title>DOM Scripting</title>
 <script type="text/javascript" src="dom8.js"></script>
 </head>
...
DOM Scripting 6
DOM ツリー図


 body      div #container   h2 #drink



                               p          a #addMenu

...
DOM Scripting 7
ノード <node> について



  ノードネーム             属性
  node name       attribute




  <h2 title=" メニュー "> コーヒー </h2...
DOM Scripting 8
テキストノード <text node> について




                              テキストノード
                               text nod...
DOM Scripting 9
DOM で取り扱うプロパティ



firstChild  子供ノードの一番目を取得

lastChild  子供ノードの最後を取得                p                 a #add...
DOM Scripting 10
DOM で取り扱うメソッド



getElementById()  id を取得

getElementsByTagName() 同じタグ名の要素を取得

appendChild() 新しいノードを追加する
...
DOM Scripting 11
サンプル例 (dom0.html) 


〜省略〜
<title>DOM Scripting</title>
</head>

<body>
    <div id="container">
    <h2 i...
DOM Scripting 12
サンプル例 (dom1.html) 

〜省略〜

<div id="container">
<h2 id="drink" title=" ドリンクメニュー "> 本日のコーヒー </h2>

<p><a hr...
DOM Scripting 13
サンプル例 (dom2.html) 


〜省略〜

<div id="container">
<h2 id="drink" title="ドリンクメニュー">本日のコーヒー</h2>

<p><a href=...
DOM Scripting 14
サンプル例 (dom3.html) 


〜省略〜

<div id="container">
<h2 id="drink" title="ドリンクメニュー">本日のコーヒー</h2>

<p><a href=...
DOM Scripting 15
サンプル例 (dom4.html) 


〜省略〜

<div id="container">
<h2 id="drink" title="ドリンクメニュー">本日のコーヒー</h2>

<p><a href=...
DOM Scripting 16
サンプル例 (dom5.html) 


〜省略〜

<h2 id="drink" title="ドリンクメニュー">本日のコーヒー</h2>

<p><a href="#" id="addMenu">メニュー...
DOM Scripting 17
サンプル例 (dom6.html) 


〜省略〜

<p><a href="#" id="addMenu">メニュー追加</a></p>

<ul id="menu">                    ...
DOM Scripting 18
サンプル例 (dom7.html) 


<title>DOM Scripting</title>
<script type="text/javascript">
window.onload = functio...
DOM Scripting 19
サンプル例 (dom8.html) 


<title>DOM Scripting</title>
<script type="text/javascript" src="dom8.js"></script>
...
jQuery 1
JavaScript ライブラリ



                     jquery-1.3.2.min.js

                      <title>DOM Scripting</title>
...
jQuery 2
サンプル例 (jq0.html) 


 <title>jQuery</title>
 <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
 <...
jQuery 3
ウインドウの読み込み

・window.onloadのショートカット


 <script type="text/javascript">
    $(function() {

                       ...
jQuery 4
イベントハンドラ

$( ). イベント名 (function( ){


)}


 <script type="text/javascript">
    $(function() {
         $("a").cl...
jQuery 5
CSS セレクタ
$("a") a 要素

$("p a") p 要素の子孫の a 要素

$("p.myClass") class 属性

$("p#myId") id 属性

 <script type="text/jav...
jQuery 6
サンプル例 (jq1.html) 


 <title>jQuery</title>
 <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
 <...
jQuery 7
サンプル例 (jq2.html) 


 <title>jQuery</title>
 <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
 <...
jQuery 8
サンプル例 (jq3.html) 


 <title>jQuery</title>
 <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
 <...
DOM Scripting & jQuery




           ..... to be continued


        参考:
       「DOM Scripting 標準ガイドブック」
       「Web クリエイ...
Upcoming SlideShare
Loading in …5
×

DOM Scripting & jQuery

2,012 views

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
2,012
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

DOM Scripting & jQuery

  1. 1. DOM Scripting & jQuery - First Step - performed by A.Yonekura
  2. 2. DOM Scripting 1 Web 準拠による JavaScript JavaScript スクリプト言語 (動作・ふるまい) Behavior Content CSS プレゼンテーション言語 HTML ( レイアウト・装飾 ) Presentation 構造化言語 (要素・文章) W3C による「Web 準拠」の概念では、構造化言語の HTML とプレゼンテーション言 語の CSS を役割で分離するよう推奨している。 DOM Scripting & jQuery performed by A.Yonekura
  3. 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. 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. 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. 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. 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. 8. DOM Scripting 7 ノード <node> について ノードネーム 属性 node name attribute <h2 title=" メニュー "> コーヒー </h2> ノード node ドキュメント上の要素 (オブジェクト)を DOMでは、ノードと呼ぶ。ノードの属性を取 得したり、ノード自体を書き換えたりすることでドキュメントを動的に操作する。 DOM Scripting & jQuery performed by A.Yonekura
  9. 9. DOM Scripting 8 テキストノード <text node> について テキストノード text node <h2 title=" メニュー "> コーヒー </h2> テキストノードの前後にも <> が隠れて存在していると 考えるとわかりやすい テキストノードもオブジェクトに含まれるので、ノードが存在する。テキストノード自 体はオブジェクトなので、”コーヒーという文字列を取得するためには nodeValeを使う DOM Scripting & jQuery performed by A.Yonekura
  10. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 23. jQuery 3 ウインドウの読み込み ・window.onloadのショートカット <script type="text/javascript"> $(function() { ここに記述 }); </script> DOM Scripting & jQuery performed by A.Yonekura
  24. 24. jQuery 4 イベントハンドラ $( ). イベント名 (function( ){ )} <script type="text/javascript"> $(function() { $("a").click(function(){ alert("クリックしました"); }); }); ・<a>タグをクリックしたら、アラートを表示 </script> DOM Scripting & jQuery performed by A.Yonekura
  25. 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. 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. 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. 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. 29. DOM Scripting & jQuery ..... to be continued 参考: 「DOM Scripting 標準ガイドブック」 「Web クリエイティブのための DOM Scripting」 DOM Scripting & jQuery performed by A.Yonekura

×