【Javascript・ＤＯＭ】少しでも実用的なモノを作る～WebTodoリスト～
【今回の紹介】
今回は、
たいした理由はなくて、
会社の先輩がJavascript・ＤＯＭを勉強をする過程でWebTodoリストとかを作成し、自分で使いながら改造していた
からです。笑
【ＷｅｂＴｏＤｏ】
目的：ＤＯＭの勉強
・各ノード（要素ノード・テキストノード・属性ノード）へのアクセスの練習
・少しでも実用的なモノを作るため
【デザイン別】
１、Todo doing doneの三分割（<div>区切りか）
２、ボタン押下で簡易に追加できる
【機能別】
✔ １、リストを動的に生成する機能
✔ ２、Todo doing done間を順番に移動する機能（逆は必要なし）
✔ ３、リストを削除する機能
✔ ４、選んでいるリストが明確になる機能
未 ５、優先度をつける機能
未 ６、日付をつける機能
未 ７、・内容変更機能
✔ ８、カテゴリー内全削除
【機能実現方法】
✔１、リストを動的に生成する機能（function add_list()）
→Javascriptで動的に要素を生成する。
1-1 テキストボックスのテキストを取得
1-2 li要素を生成する
1-3 生成したli要素に、以下の属性・テキストノードを追加する
・onDblClick ・onmoseover ・onmouseout ・テキスト
1-4 ul要素（todo）にli要素を追加する
✔２、Todo doing done間を順番に移動する機能（逆は必要なし）（function moveList(obj)
→移動したいリストをダブルクリックすることでカテゴリー間（todo・doing・done間）を
移動する
2-1クリックされたリストが今どのカテゴリーにいるかを把握する。
→クリック時に受け取るthisから親ノード(div)にアクセスして判定する
2-2選択しているリストのコピーを作成
2-3作成したコピーを移動先に追加
2-4コピー元を削除
✔３、リストを削除する処理（function moveList(obj)）
→doneの位置でダブルクリックした場合に、削除とする
具体的には、２の機能を実現したfunctionに分岐処理を追加した
3-1 ２の機能で選択したリストがdoneの位置にあると判断
3-2 removeメソッドで削除する
✔４、カーソルを当てるとリストの色が変化する処理（function defaultcolor function addcolor(obj)）
→１の処理時に、カーソルを当てるとfunctionを呼ぶ処理を追加し、実現
4-1 カーソルのあたっているリスト（this）をパラメータとして取得
4-2 thisの色の情報を持っている属性（obj.style.color）にアクセスする
✔ ８、カテゴリー内全削除（function allDel_li（）で実現）
→カテゴリー（todo・doing・done）をダブルクリックすると、配下のノードを削除とする
参考サイト：http://jsajax.com/Articles/listbox/339（要素の移動について）
【ソース】
[cssファイル style.css」
li{
list-style-type:decimal;
font-weight:bolder;
margin-top:0.5em;
margin-left:0.5em;
}
#input{
border bottom:solid 1px;
}
#frame_toDo{
float:left;
width:30%;
}
#frame_Doing{
float:left;
width:30%;
}
#frame_Done{
float:left;
width:30%;
}
「htmlファイル WebToDo.htm」
<html>
<head>
<script src="" ></script>
<body>
<div id="input">
<input type="text" value="" id="add_text">
<input type="button" value="追加" id="button" onclick="add_list()">
</div>
<div id="frame_toDo">
<h1 id="h1_ToDo" onDblClick="allDel_li(this)">To Do</h1>
<ul id="ul_toDo"></ul>
</div>
<div id="frame_Doing">
<h1 id="h1_Doing" onDblClick="allDel_li(this)";>Doing</h1>
<ul id="ul_Doing"></ul>
</div>
<div id="frame_Done">
<h1 id="h1_Done" onDblClick="allDel_li(this)">Done</h1>
<ul id="ul_Done"></ul>
</div>
<script Language="JavaScript" type="text/javascript">
var count=1;
<!--動的のリストを追加する処理-->
function add_list(){
var add_text=document.getElementById("add_text").value;
var list_text=document.createTextNode(add_text);
var new_list=document.createElement("li");
new_list.appendChild(list_text);
new_list.id="new_list"+count;
new_list.setAttribute("onDblClick","moveList(this)");
new_list.setAttribute("onmouseover","addcolor(this)");
new_list.setAttribute("onmouseout","defaultcolor(this)");
document.getElementById("ul_toDo").appendChild(new_list);
}
<!--ダブルクリックしたリストを移動する処理-->
function moveList(obj){
var ul_toDo=document.getElementById("ul_toDo");
var ul_Doing=document.getElementById("ul_Doing");
var ul_Done=document.getElementById("ul_Done");
<!--どのカテゴリ(todo or doing or done)にあるリストか判定する処理-->
if("frame_toDo"==obj.parentNode.parentNode.id){
var clone=obj.cloneNode(true);
ul_Doing.appendChild(clone);
ul_toDo.removeChild(obj);
}
else if("frame_Doing"==obj.parentNode.parentNode.id){
var clone=obj.cloneNode(true);
ul_Done.appendChild(clone);
ul_Doing.removeChild(obj);
}
else{
ul_Done.removeChild(obj);
}
}
<!--リストにカーソルが当たると色を変える処理-->
function addcolor(obj){
obj.style.color="#ff0000";
}
function defaultcolor(obj){
obj.style.color="#000000";
}
<!--カテゴリー名（todo or doing or done）をダブルクリックすると配下の全リストを削除する処理-->
function allDel_li(obj){
var allDel_ul=obj.nextSibling.nextSibling;
var allDel_li=obj.nextSibling.nextSibling.childNodes;
for(var i=allDel_li.length-1;i>=0;i--){
allDel_ul.removeChild(allDel_li[i]);
}
}
</script>
</body>
</html>
