はじめに
Pythonの勉強から始まり、あまりにもJavascriptの知識がなかったため、すこしでもJavascriptはどういう言語なのか体験するために、w3schoolsさんのチュートリアルを教科書として流れを書いてみました。
（備忘録のようなポストです。）
練習の流れ
https://www.w3schools.com/howto/howto_js_todolist.asp
を見本とし、ついて行きながらカスタムの練習もかねています。
HTMLの作成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href = "todolist.css">
</head>
<body>
<div id="myDIV" class="header">
<h1>To do List</h1>
<input type="text" id="myInput" placeholder="今日の予定は？">
<span onclick="newElement()" class="addBtn">追加</span>
</div>
<ul id="myUL">
</ul>
<script src = "todolist.js"></script>
</body>
</html>
見本の内容を
の内容とし、ToDoListのページを作成します。Title + Input + ボタンの基本枠です。
完成後、F12で検証のところから予定が追加されたとき、
<ul></ul>の間に追加した内容が<li></li>に囲まれてはいります。
CSSの作成
/* リストの設定 */
ul {
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
padding: 12px;
transition: 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul li:nth-child(odd) {
background: #f9f9f9;
}
ul li:hover {
background: #ddd;
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
ul li.checked::before {
content: '';
position:absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
/* リストの削除ボタン */
.close {
position:absolute;
top: 0;
right: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #3094ba;
color: white;
}
/* Header-Inputと追加ボタンを含む */
.header {
background-color: #5dbcd2;
padding: 30px 40px;
color:white;
text-align: center;
}
.header:after {
content:"";
display:table;
clear: both;
}
input {
margin: 0;
margin-top: -5px;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 10px;
}
.addBtn:hover {
background-color: #636b6d;
color: #fff
}
Title . Iuput(追加ボタン) . List(削除ボタン)のCSSを設定しています。見本を基準として、cssの練習で少しの内容の中でズレているところや色を変更してます。
Javascriptの作成
//削除ボタンを生成する。"\u00D7" → Unicode
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
//削除ボタンをクリックするとリストアイテムがなくなる。
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
//チェック表示
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
//追加ボタンを押すとリストアイテムが生成される。
function newElement(){
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("なんか書いてや！");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("myInput").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
- ボタンの生成
- リストからの非表示
- クリックすると ～なる。
練習してみたら....
HTMLやcssはpythonを勉強するときにも少し触ったことがあるのでわかりやすく優しく書いている見本を元に自分の思うことを変更しながら書いてみることができました。
しかし、Javascriptはやはり基本構文の知識がないため、見本を通じてできる機能や表現の仕方を分解しながら勉強する機会になりました。
これからの勉強の中で基本の構文の練習も続けながらいい例文の表現の分析勉強も続けたいと思います。