下の記事をリニューアル
テストコードtodo list
html/cssはBootstrapで書かれてるので、この点注意。
メモ
コールバック関数は他の関数に引数として渡される関数
JavaScriptでコールバック関数が使われるのって大抵は非同期処理なんですよね。
Promiseの普及もあってコールバック関数を見る機会も割と減った
今回のサンプルプログラムでは、同期型コールバックと非同期型コールバックの2つを確認します。
高階関数：関数を引数や戻り値として扱う関数のこと
functionの前にコロンを書いて、何かの名前を書いているコードを見かけたのですが(拝見したサイトのURLは忘れてしまいました)、これは何というものでしょうか？また、これを書くことによって、どのような効果があるのでしょうか？
|
1 2 3 |
setup: function(id, initialize) { //処理 } |
↑「オブジェクト初期化子の使用」のあたりを参照のこと。
|
1 2 3 |
satInfo: function() { //処理 } |
|
1 2 3 |
doAttack : function() { //処理 } |
★ソースコード
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <header class="text-center text-light my-4"> <h1 class="mb-4">Todo List</h1> <form action="" class="search"> <input type="text" class="form-control m-auto" name="search" placeholder="Search Keyword"> <i class="fas fa-search"></i> </form> </header> <ul class="list-group todos mx-auto text-light"> </ul> <form action="" class="add text-center my-4"> <label for="" class="text-light">ADDING TASK</label> <input type="text" class="form-control m-auto" name="add" placeholder="New Task"> </form> </div> </body> <script src="app.js"></script> </html> |
package.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "name": "js-pure-todo1-1", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "browserify": "^16.5.1", "gulp": "^3.9.1", "gulp-clean-css": "^4.3.0" } } |
gulpfile.js
|
1 2 3 4 5 6 7 8 9 10 11 |
var gulp = require('gulp'); var cleancss = require('gulp-clean-css'); gulp.task('clean-css', function(){ return gulp.src("css/style.css") .pipe(cleancss()) .pipe(gulp.dest('dist/css/')); }); // defaultで動かすタスクを指定する。 gulp.task('default',['clean-css']); |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
body{ background: #2D63B5; } .container{ max-width: 400px; } input[type=text], input[type=text]:focus { color: #9abca4; border: none; background: rgba(0,0,0,0.2); max-width: 400px; } .search{ position: relative; } .search-icon{ position: absolute; top: 10px; right: 20px; } .todos li{ background: #2c4b79; } .delete{ cursor: pointer; color: orange; } .filtered{ display: none !important; } |
dist/css/style.css
※圧縮されると横一列になる。|
1 |
body{background:#2d63b5}.container{max-width:400px}input[type=text],input[type=text]:focus{color:#9abca4;border:none;background:rgba(0,0,0,.2);max-width:400px}.search{position:relative}.search-icon{position:absolute;top:10px;right:20px}.todos li{background:#2c4b79}.delete{cursor:pointer;color:orange}.filtered{display:none!important} |
app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
//タスク追加機能 let todoApp = { addTask: document.querySelector('.add'), list: document.querySelector('.todos'), search: document.querySelector('.search input'), ///ローカルストレージに保存 init: function() { //初期化処理 //ローカルストレージに格納されてる値を取得し、リストを生成する for (var key in localStorage) { var html = localStorage.getItem(key); if (html) { todoApp.list.innerHTML += localStorage.getItem(key); } } }, createTodoList: function(task){ // HTML テンプレート生成 const html = ` <li class="list-group-item d-flex justify-content-between align-items-center"> <span>${task}</span> <i class="far fa-trash-alt delete"></i> </li> `; todoApp.list.innerHTML += html; //ローカルストレージに保存 todoApp.saveTaskLocalStorage(task, html); }, // サーチ機能 filterTasks: function(term){ Array.from(todoApp.list.children) // フィルタ条件 .filter((todo) => !todo.textContent.toLowerCase().includes(term)) .forEach((todo) => todo.classList.add('filtered')); Array.from(todoApp.list.children) .filter((todo) => todo.textContent.toLowerCase().includes(term)) .forEach((todo) => todo.classList.remove('filtered')); }, // ローカルストレージに保存 saveTaskLocalStorage: function(task, html) { // nullは、localStorageに保存しない if (html) { // localStorageは、0から始まる localStorage.setItem(task, html); return; } return; }, // ローカルストレージ削除（？） deleteTaskFromLocalStorage: function(task) { localStorage.removeItem(task); return; }, } todoApp.init(); todoApp.addTask.addEventListener('submit', e => { // デフォルトのイベントを無効 e.preventDefault(); // Taskに入力した値を、空白を除外して格納 const task = todoApp.addTask.add.value.trim(); if(task.length){ // Todo Listの HTMLを作成 todoApp.createTodoList(task); // Taskに入力した文字をクリア todoApp.addTask.reset(); } }); // タスク削除機能 todoApp.list.addEventListener('click', e => { if(e.target.classList.contains('delete')) { e.target.parentElement.remove(); } }); // サーチ機能 todoApp.search.addEventListener('keyup', () => { const term = todoApp.search.value.trim().toLowerCase(); todoApp.filterTasks(term); }); |
この記事へのコメントはありません。