DOM Scripting & jQuery

DOM Scripting & jQuery
- First Step -

performed by A.Yonekura

DOM Scripting 1
Web 準拠による JavaScript

JavaScript
スクリプト言語
（動作・ふるまい）
Behavior

Content
CSS
プレゼンテーション言語 HTML
( レイアウト・装飾 ) Presentation 構造化言語
（要素・文章）

W3C による「Web 準拠」の概念では、構造化言語の HTML とプレゼンテーション言
語の CSS を役割で分離するよう推奨している。

DOM Scripting & jQuery performed by A.Yonekura

DOM Scripting 2
DOM 概念
JavaScript
Behavior （動作・ふるまい）

Document
Object
Model HTML
構造化言語
Content （要素・文章）

構造化言語（HTML）をスクリプトやプログラム言語（JavaScript) から利用するため
の仕組み < インターフェイス > を DOM(Document Object Model) と呼ぶ。


DOM Scripting 3
DOM 概念
JavaScript
Behavior （動作・ふるまい）

DOM Scripting
HTML
Content 構造化言語
（要素・文章）

JavaScriptが DOMを利用して HTML+CSSにアクセスすると Web標準に準拠した、機
能の分離が図れる。この方式を DOM Scriptingと呼ぶ。


DOM Scripting 4
旧式での JavaScript のの記述方法

<title>JavaScript - old type</title>
<script type="text/javascript">

</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 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 6
DOM ツリー図

body div #container h2 #drink

p a #addMenu

ul #menu li

li

li

li

HTMLの各要素をプログラムで扱う為には、要素をオブジェクトとみなし扱うことにな
る。HTMLの要素を DOMツリーで表すことで構造を把握することができる


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

ノードネーム属性
node name attribute

<h2 title=" メニュー "> コーヒー </h2>
ノード node

ドキュメント上の要素
（オブジェクト）を DOMでは、ノードと呼ぶ。ノードの属性を取
得したり、ノード自体を書き換えたりすることでドキュメントを動的に操作する。


DOM Scripting 8
テキストノード <text node> について

テキストノード
text node

<h2 title=" メニュー "> コーヒー </h2>
テキストノードの前後にも
<> が隠れて存在していると
考えるとわかりやすい

テキストノードもオブジェクトに含まれるので、ノードが存在する。テキストノード自
体はオブジェクトなので、”コーヒーという文字列を取得するためには nodeValeを使う


DOM Scripting 9
DOM で取り扱うプロパティ

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

lastChild 　子供ノードの最後を取得 p a #addMenu

childNodes　子供たち（配列で返す）
ul #menu li

parentNode　親ノード
li

nodeValue　テキストノードの文字列を取得
li
nodeName 　ノードの名前（タグ名を）取得
li


DOM Scripting 10
DOM で取り扱うメソッド

getElementById()　 id を取得

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

appendChild() 新しいノードを追加する
ul #menu li
removeChild() ノードを削除する
li
createElement() 指定した要素を作る
li
createTextNode() テキストノードを作る
li


DOM Scripting 11
サンプル例　（dom0.html）　

〜省略〜
</head>

<body>


<ul id="menu">
<li> カプチーノ </li>
<li> カフェラテ </li>
</ul>
</div>
</body>


DOM Scripting 12

〜省略〜



<ul id="menu">
<li> カプチーノ </li> ・getElementByIdを使い idを取得
<li> カフェラテ </li> ・nodeNameからタグ名を取得
</ul>
</div>

var drink = document.getElementById('drink');
alert(drink.nodeName);

</script>
</body>


DOM Scripting 13

〜省略〜

<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>

var drink = document.getElementById('drink');
alert(drink.firstChild.nodeValue);
// アラート結果本日のコーヒー
：
</script>
</body>


DOM Scripting 14

〜省略〜



<ul id="menu">
<li>ブレンドコーヒー</li> ・getElementsByTagNameを使い<li>を取得
<li>カプチーノ</li>
<li>カフェラテ</li> ・配列からlengthで<li>のノード数を取得
</ul>
</div>

var menuList = document.getElementsByTagName("li");
alert(menuList.length);
// アラート結果 4 ：
</script>
</body>


DOM Scripting 15

〜省略〜



<ul id="menu">
<li>ブレンドコーヒー</li> ・getElementsByTagNameを使い<li>を取得
<li>カフェラテ</li> ・配列からlengthで<li>のノード数を取得
<li>キャラメルマキアート</li> ・<li>の1番目の文字列を取得
</ul>
</div>

var menuList = document.getElementsByTagName("li");
alert(menuList.item(0).firstChild.nodeValue);
// アラート結果ブレンドコーヒー
：
</script>
</body>


DOM Scripting 16

〜省略〜



<ul id="menu">
<li>ブレンドコーヒー</li>
<li>カプチーノ</li> ・getElementByIdを使いid"drink"を取得
<li>キャラメルマキアート</li> ・getAttributeから属性"title"の値を取得
</ul>
</div>


var drink = document.getElementById("drink");
var drinkTitle = drink.getAttribute("title")
alert(drinkTitle);
// アラート結果ドリンクメニュー
：
</script>
</body>


DOM Scripting 17

〜省略〜


<ul id="menu"> ・getElementByIdを使いid"menu"を取得
<li>ブレンドコーヒー</li> ・createElementで<li>を新規に作成
<li>カフェラテ</li> ・createTextNodeでテキストノード「カフェモカ」
<li>キャラメルマキアート</li> を新規に作成
<li>カフェモカ</li> ・appendChildで<li>の中にテキストノードを追加
</ul>
</div> ・appendChildで<ul>の中に新規<li>を追加

var menu = document.getElementById("menu");

var newList = document.createElement("li");
var newText = document.createTextNode("カフェモカ");

newList.appendChild(newText);
menu.appendChild(newList);
</script>
</body>


DOM Scripting 18

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> 〜省略〜
<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 19

<script type="text/javascript" src="dom8.js"></script>
</head>

<body>


<ul id="menu">
<li>ブレンドコーヒー</li> ・JavaScriptの記述を外部ファイルに移動
<li>カプチーノ</li> ・リンクさせる
</ul>
</div>

</body>
</html>


jQuery 1
JavaScript ライブラリ

jquery-1.3.2.min.js

<script type="text/javascript" src="jquery-1.3.2.min.js">
</script>
</head>
<body>

・外部ファイルとしてリンクさせる
http://jquery.com/

jQuery とは JavaScript フレームワーク。軽量で短いコードの記述が短い。
CSS 風にアクセスするので理解しやすい点が特徴。


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>


jQuery 3
ウインドウの読み込み

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

$(function() {

ここに記述

});
</script>


jQuery 4
イベントハンドラ

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

)}

$(function() {
$("a").click(function(){
alert("クリックしました");
});
}); ・<a>タグをクリックしたら、アラートを表示
</script>


jQuery 5
CSS セレクタ
$("a")　a 要素

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

$("p.myClass") class 属性

$("p#myId") id 属性

$(function() {
$("a#menu").click(function(){
alert("クリックしました");
});
});
</script>
〜省略〜
<a href="#" id="menu">クリック</a>

jQuery 6

#box { background: red; width:300px; height:300px; }
</style>
$(function() {
$('a').click(function(){
$('#box').fadeOut('fast');
});
});
</script> ・<a>タグをクリックしたら、 #boxがフェードアウト
</head>
<body>



</body>
</html>


jQuery 7

#box {
background: red;
width:300px;
height:300px;
display: none;
}
</style>
$(function() { ・ <a>タグをクリックしたら、 3000ミリ秒で
$('a').click(function(){ 　#boxがスライドして表示
$('#box').slideDown(3000);
});
});
</script>
</head>
<body>
</body>


jQuery 8

#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>


DOM Scripting & jQuery

..... to be continued

参考：
「DOM Scripting 標準ガイドブック」
「Web クリエイティブのための DOM Scripting」


DOM Scripting & jQuery

More Related Content

Similar to DOM Scripting & jQuery

More from smallworkshop

DOM Scripting & jQuery