新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

このエントリーをはてなブックマークに追加

【Javascript・DOM】少しでも実用的なモノを作る~WebTodoリスト~

【今回の紹介】

今回は、

WebTodoリストを作成します。

 

たいした理由はなくて、

会社の先輩がJavascript・DOMを勉強をする過程でWebTodoリストとかを作成し、自分で使いながら改造していた

からです。笑

 

 

【WebToDo】

目的:DOMの勉強

   ・各ノード(要素ノード・テキストノード・属性ノード)へのアクセスの練習

   ・少しでも実用的なモノを作るため

 

【デザイン別】

  1、Todo doing doneの三分割(<div>区切りか) 

   2、ボタン押下で簡易に追加できる
 
 

【機能別】

✔ 1、リストを動的に生成する機能

✔ 2、Todo doing done間を順番に移動する機能(逆は必要なし)

✔ 3、リストを削除する機能

✔ 4、選んでいるリストが明確になる機能

未 5、優先度をつける機能

未 6、日付をつける機能

 7、・内容変更機能

✔ 8、カテゴリー内全削除

 

【機能実現方法】 

✔1、リストを動的に生成する機能(function add_list())

  →Javascriptで動的に要素を生成する。

  1-1 テキストボックスのテキストを取得

  1-2 li要素を生成する

  1-3 生成したli要素に、以下の属性・テキストノードを追加する

      ・onDblClick ・onmoseover  ・onmouseout  ・テキスト

  1-4  ul要素(todo)にli要素を追加する

  

✔2、Todo doing done間を順番に移動する機能(逆は必要なし)(function moveList(obj)

  →移動したいリストをダブルクリックすることでカテゴリー間(todo・doing・done間)を

   移動する

   2-1クリックされたリストが今どのカテゴリーにいるかを把握する。

     →クリック時に受け取るthisから親ノード(div)にアクセスして判定する

   2-2選択しているリストのコピーを作成

   2-3作成したコピーを移動先に追加

   2-4コピー元を削除

✔3、リストを削除する処理(function moveList(obj))

   →doneの位置でダブルクリックした場合に、削除とする

    具体的には、2の機能を実現したfunctionに分岐処理を追加した

   3-1 2の機能で選択したリストがdoneの位置にあると判断

   3-2  removeメソッドで削除する

✔4、カーソルを当てるとリストの色が変化する処理(function defaultcolor function addcolor(obj))

    →1の処理時に、カーソルを当てるとfunctionを呼ぶ処理を追加し、実現  

   4-1   カーソルのあたっているリスト(this)をパラメータとして取得

        4-2  thisの色の情報を持っている属性(obj.style.color)にアクセスする

   

✔ 8、カテゴリー内全削除(function allDel_li()で実現)

   →カテゴリー(todo・doing・done)をダブルクリックすると、配下のノードを削除とする

 
 
参考サイト:http://jsajax.com/Articles/listbox/339(要素の移動について)
       :http://www.openspc2.org/reibun/javascript2/DOM/node/0005/index.html(要素の削除について)
 

 

【ソース】

 

[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>
<link rel="stylesheet" type="text/css" href="style.css">
<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>
.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }