/// BANGBOO BLOG ///

  • 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

January 5, 2016

Javascript

varを省略した場合は関数内での宣言であってもグローバル変数(window.と同じ)
関数外のvarはグローバル変数
関数内のvarのみローカル変数(だが、関数の中に関数を作るとスコープチェーンによって、内側のローカル変数から順に探していくので、関数の外からは見えないが関数の内からはアクセスされる恐れはある)

関数を変数の様に書ける(無名関数)、スコープチェーンやレンダリングが関係している(後述)
//関数式による定義、JSは全てobjでありobjを受け取ってその中のメソッドを使う、New不要のケース
create_row = function(){
  var tbody = document.getElementById("input_tbody");
  var new_row = tbody.insertRow(num_row+1);
  var cell1 = new_row.insertCell(0);
  var copy = function(cell,tb,arg){
    cell.innerHTML = tb.rows[num_row].cells[arg].innerHTML;
  }
  return {tbody: tbody, cell1: cell1, copy: copy};
};
copy_cell = function(obj_create_row){
  obj_create_row.copy(obj_create_row.cell1, obj_create_row.tbody, 0);
};
//ここからフロー
num_row = 1;
setTimeout(function(){
  console.log('setTimeOut');
  obj_cr = create_row();
  copy_cell(obj_cr);
  num_row++;
}, 2000);
//ここからHTML
<table border=1>
<thead><tr><th>Items</th><th>Expenditure</th></tr></thead>
<tbody id="input_tbody"><tr><th>Pen</th><td>3,000</td></tr>
<tr><th>Eraser</th><td>1,000</td></tr></tbody>
</table>

ココから改めて追記する形でJavascriptの学び直し
///基礎文法
http://gifnksm.hatenablog.jp/entry/20100131/1264934942
一番下にリンク集がある、コメントも仕様が分かり参考になる
https://language-and-engineering.hatenablog.jp/entry/20100111/p1

///オブジェクト
https://www.wakuwakubank.com/posts/464-javascript-array-object-pattern/
オブジェクトは連想配列ようである
var obj = {a: 1, b: 2};
for (var i in obj) {
  alert(obj[i]);
}
for each (var v in obj) {
  alert(v);
}
オブジェクトにはメソッドも付与しカプセル化可
var man = {
  time: 0,
  gettime: function() { this.time = new Date(); },
  hello: function() { alert(this.time + 'hello!'); },
};
man.gettime();
man.hello();

///インスタンス化
ファンクションでクラスを宣言(←古い。Classが実装される前の話)
https://so-zou.jp/web-app/tech/programming/javascript/grammar/function/class/
function Image() {
    this.width  = 0;
    this.height = 0;
    this.src    = '';
}
実はそれにはプロトタイプもあるので足せる(蛇足になるのでリンク等を参照)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain
Image.prototype.type     = 'image object';
Image.prototype.width    = null;
Image.prototype.height   = null;
Image.prototype.src      = null;
Image.prototype.resizeTo = function(aNewWidth, aNewHeight) {
    this.width  = aNewWidth;
    this.height = aNewHeight;
};
まとめて下記の書き方もできる
Image.prototype = {
    type     : 'image object',
    width    : null,
    height   : null,
    src      : null,
    resizeTo : function(aNewWidth, aNewHeight) { alert(aNewWidth + aNewHeight); }
};
newでコンストラクタでのインスタンス化する
var img = new Image();
img.resizeTo(30, 40);

///無名関数、匿名関数、クロージャ、関数式
https://www.sejuku.net/blog/25026
クロージャとは関数とその関数が定義された状態をセットにした特殊なオブジェクト
var メソッド名的変数 = function(引数) { /*処理*/ } あるいは他メソッド(function(引数) { /*処理*/ });等で直使用
 メリットとして
 極力グローバルの変数や関数を使わなくて済む
 余計な関数名や変数名を考えなくても済む
 無名関数は式が実行されるときにFunctionオブジェクトが生成される
  無名関数は定義より前では呼び出せない(定義した所で呼び出すので混同がなく安全と考えられる)
   Javascriptは同名をオーバーライドする
  旧来の関数宣言は定義より前に実行が書かれていても呼べる
   どの関数が使われるか注意が必要(便利だが大規模では危険と考える場合も)
手続き型ではこうだが、
<html>
<head>
<script type="text/javascript">
function button1Click(){
 alert(1);
}
function windowOnload(){
 var button1 = document.getElementById("button1");
 button1.onclick = button1Click;
}
</script>
</head>
<body onload="windowOnload()">
<form name="foo">
<input type="button" id="button1" value="1">
</form>
</body>
↓無名関数ではこう
<script type="text/javascript">
window.onload = function(){
 document.getElementById("button1").onclick = function(){
  alert(1);
 };
};
</script>

//下記は無名関数を変数に入れているので実行自体はされない
実行結果を入れている分けではない、なお実際は変数名が関数名だが
var hello = function(){alert("Hello");};
//これなら実行される、ほかにも即時関数の書き方がある
setTimeout(function(){ alert("Aloha"); },1000);

///即時関数
functionから始まる関数定義そのものを()でくくって(arg)を付けて即実行できる
普通()だが関数式と評価されればいいので、!でも同じ、+-でもOK
(function(){ /*処理*/ })();
<script>
 var sum = (function(a,b){
  var result = a + b;
  return result;
 })(1,2);
 alert(sum);
!function(a,b){
 let result = a + b;
 alert(result);
}(3,4);
+function(a,b){
 let result = a + b;
 alert(result);
}(5,6);
</script>

///上記重複だがclassが導入されたES6より前の書き方(Classがないver)
https://www.yunabe.jp/docs/javascript_class_in_google.html
関数には関数式(無名関数)と関数宣言の2通り
 関数宣言は旧来のfunction name(){}の方法
 下記例が関数式
//関数式でのクラス、これはnewが必要だった
var Person = function(name, age) {
  this.name = name;
  this.age = age;
};
var alice = new Person("Alice", 7);
console.log(alice.name); // Alice
//これならnewは不要
var Person = function() {
  return { name: "alice", age: 7 };
};
var alice = Person();
console.log(alice.name); // Alice

//オブジェクトでの継承、オブジェクトではnewが不要
var sayHelloShared = function() {
  console.log("Hello, I'm " + this.name);
};
var alice = {
  sayHello: sayHelloShared,
  name: "Alice"
};
var bob = {
  sayHello: sayHelloShared,
  name: "Bob",
  child: alice
};
alice.sayHello(); // Hello, I'm Alice
bob.sayHello(); // Hello, I'm Bob
bob.child.sayHello(); // Hello, I'm Alice

//new必要?
エラーがでなければ不要といえるのでは、、、
newするとコンストラクタで明示的初期化がされインスタンスも作られるが、、、
Javascriptは全てがオブジェクトであり、newを要不要は仕様でなく使い方の範疇のようで、それゆえ、functionでクラス化したり、メソッドを定義したり、無名関数だったりできる、、、newもエラーがでなければ不要かと

//扱い注意
thisが指す対象が、objが参照で別実態だったり、タグ要素であったりで注意が必要
 console.logに出して確認するといいかも
メソッド内で使われている this が指すものは呼び出され方によって変わる
obj.hoge(); の形で呼び出された場合thisはobjになり
hoge();の形で呼び出された場合はthisは window (グローバルオブジェクト) になります
https://so-zou.jp/web-app/tech/programming/javascript/grammar/function/class/
別実態
 var Person = function(a, b) {
   return { name: a, age: b };
 };
 var alice = new Person('Alice', 7);
 var takahashi = new Person('Takahashi', 6);
 takahashi = alice;
 console.log(takahashi.name); //Alice

///ECMAScript 6 (ES6) でクラスの構文が追加
クラス構文にはクラス宣言とクラス式という 2 つの定義方法
クラス宣言の方法
class Teki{
  constructor(name, hp){
    this.name = name;
    this.hp = hp;
  }
  attack(){
    console.log(`${this.name}の攻撃!`);
  }
}
class Dragon extends Teki{
  hello(){
    console.log(`${this.name}のHPは${this.hp}です。`)
  }
}
var boss = new Dragon('どらごん', 3000);
boss.attack(); // どらごんの攻撃!
boss.hello();  // どらごんのHPは3000で
こちらがクラス式
var Foo = class {
  hello(){
    console.log("Hi!");
  }
};
var obj = new Foo();
obj.hello();

///可変変数(変数名に変数を使いたいとき)はevalで変数を含んで実行する
var new_div = eval('document.querySelector(\'#item' + settings.num_item + '\')');
eval('window.item' + settings.num_item + ' = new classItem;');
 エスケープは円マーク
 indow.a とwindow.を付けるとグローバルになる(関数の中からグローバル変数を作る等)
 
//タグ要素を取得、cssセレクタで指定
document.querySelector('#main .posts h1'); //最初の一つを取得
document.querySelectorAll('a'); //すべて取得

///実行の順番
https://kde.hateblo.jp/entry/2017/05/20/212928
https://www.javadrive.jp/javascript/ini/index2.html
ブラウザはスクリプトが記述されたHTMLファイルを順に解析しながらブラウザに表示。その途中に<script>要素が現れるとHTMLの解析を一時中断し、そのスクリプトが実行されるのを待ちます。そしてスクリプトの実行が終了すると続きからHTMLを実行していきます

Javascriptは同名をオーバーライドします
そのためwindow.onload = function(){は、複数あってもオーバーライドで一番下だけ実行する
外部ソースにwindow.onload = function(){ があってもトータルでどれか一つしか実行されない
window.onload = function(){
 alert('1');
}
window.onload = function(){
 alert('2');
}

テストしました
<html>
<head>
<script type="text/javascript" src="/js/js1.js"></script>
<script type="text/javascript">
alert('at header 1');
window.onload = function(){
  alert('at window.onload');
}
alert('at header 2 after window.online');
</script>
<script type="text/javascript" src="/js/js2.js"></script>
</head>
<body onload="alert('at body tag onload');">
<script type="text/javascript">alert('at body');</script>
</body>
</html>

下記順番に実行される

1)js 1
2)header1
3)header2 after window.online
4)js2
5)body
6)window.onloadの中で最後のもの一つだけ実行(最下行が強い)
     js1 window.onload(後ろのwindow.onloadあると本項目は実行されない)
   window.onload(後ろのbody tag onloadがあると本項目は実行されない)
  body tag onload(これがあると'at window.onload'は実行されない)
 js2 window.onload(これがあると'body tag onload'は実行されない)

onloadは実行の順番を遅くする方法、他のテクとして
window.addEventListener('DOMContentLoaded', function() {
 これはDOMのツリー構造が完了した時点で実行されるのでonloadより早い
bodyの閉じタグ直前にJSを入れる

//JavaScriptはシングルスレッド、非同期でも待ちが発生する場合もあり遅い、WebWorkersならマルチ可
setTimeoutは 「指定秒数後に実行」ではなく「指定秒数後に実行キューに登録」
https://language-and-engineering.hatenablog.jp/entry/20090614/p1
JavaScriptの非同期処理は並列処理でない
非同期処理では処理が実行できるようになるのを待ち実行できるようになってから実行する
マルチスレッドで実行するにはWebWorkersというAPIを使うと実装可
https://qiita.com/klme_u6/items/ea155f82cbe44d6f5d88
オブジェクト的な方が早い
手続き型の上から下への書き方は、実行スレッドが通信中に解放されないことである。
UIスレッドからこんなプログラムを実行すればユーザーインターフェイスが無反応になる。
https://satoshi.blogs.com/life/2010/01/sync_vs_async.html

///引数
https://wp-p.info/tpl_rep.php?cat=js-application&fl=r12
数が多くても少なくても実行される、可変長引数argumentsオブジェクトを使っているから
var f = function(x, y, z){
    console.log(x);
    console.log(y);
    console.log(z);
    console.log(arguments[0]);
    if(arguments.length == 4){ console.log('4'); }
};
f(1, 2, 3); //1,2,3,1
f(1, 2, 3, 4); //1,2,3,1,4
f(1, 2); //1,2,undefined,1

■ES6での変更
https://qiita.com/soarflat/items/b251caf9cb59b72beb9b

///letは再宣言が不可能な宣言、constは再宣言と再代入が不可能な宣言
varは利用する理由がないため利用しない?
カーリーブラケット{}によるブロックスコープが有効。
ブラケット内にletかconstで変数を宣言することによって、そのブラケット内のみで変数が有効
if (true) {
 var a = 1;
 
 let b = 'aaa';
 b = 'bbb'; // 再代入する
 let b = 'ccc'; // 再宣言はエラー

 const C = 'ddd';
 C = 'eee'; // 再代入はエラー
}
console.log(a); // => 1
console.log(b); // => undefined
console.log(C); // => undefined

///アロー関数(無名関数の省略形、なおthisの扱いが違う)
アロー関数は、関数が定義されたスコープ内のthisを参照する
従来の無名関数は関数の呼び方によってthisの参照先が異なる
const fn = (a, b) => {
  return a + b;
};
// 単一式の場合はブラケットやreturnを省略できる
const fn = (a, b) => a + b;
// ブラケットやreturnを省略してオブジェクトを返したい場合は`()`で囲む
const fn = (a, b) => ({ sum: a + b });
// アロー変数はargumentsがなく可変長引数を使う必要がある
const arrow = (...arguments) => { console.log(arguments); }
arrow(1, 2, 3) //=> [ 1, 2, 3 ]

///関数にデフォルト引数を指定できる
function multiply (a = 5) {

///分割代入
const [a, b, c, d] = [1, 2, {d: 3}, 3];
const object = {a: 1, b: 2, c: {d: 3}};
 const {a, b, c, c: {d}} = object;

///テンプレート文字列(プレースホルダ)
``(バッククオート)で文字列を囲むと${}で文字列内に変数展開ができる
const name = 'soarflat';
const name = 'aaa';
console.log(`AAA is ${name}`);

///スプレッド構文
...で可変長の複数要素を表す、下記のように柔軟に
function func1 (a, ...r) { alert(a + r + r[0]); }
 func1(1, 2, 3, 4, 5);//でa=1、r[0]=2が入る
 console.log(Math.max(r));    // => NaN
 console.log(Math.max(...r)); // => 5 上手くいかないケースでも使える
function func2 (a, b, c){
 func2(...array_arg);//argumentsオブジェクトのようにできる
const [a, b, ...c] = ['a', 'b', 'c', 'C'];
 console.log(c); // => ["c", "C"]
 const array2 = [...c, 4, 5, 6];

for in/for ofで配列やオブジェクトの扱い
const array = [65, 55, 80, 100];
const obj = {name: 'aaa', country: 'Japan'}
for(const index in array) {
  console.log(array[index]);
}//65 55 80 100
for(const key in obj) {
  console.log(key);
}//name country
for(const value of array) {
  console.log(value);
}//65 55 80 100

///promise/async/await 非同期関数
https://rightcode.co.jp/blog/information-technology/javascript-promise
https://rightcode.co.jp/blog/information-technology/javascript-async-await
http://www.tohoho-web.com/ex/promise.html
https://sbfl.net/blog/2016/07/13/simplifying-async-code-with-promise-and-async-await/
https://qiita.com/niusounds/items/37c1f9b021b62194e077
https://qiita.com/soarflat/items/1a9613e023200bbebcb3
非同期関数は処理の順序を制御できない問題があった、そこでPromise

Promise オブジェクトは then(ok_callback, ng_callback) というメソッドを持ちます。
then() はPromise が成功または失敗になるまで処理を受け流し、
処理を.then()で繋げ順番を確保することが可能
成功時に ok_callback を、失敗時に ng_callback をコールバック関数として呼び出します
.then() は第一引数に成功時のコールバック関数、第二引数に失敗時のコールバック関数
.catch(ng_callback) は、.then(undefined, ng_callback) と同じ意味
.catch() は処理中に発生した throw をキャッチできる
ES2018(ES9) では、.finally() がサポートされました
function aFunc3(data) {
    return new Promise(function(okCallback, ngCallback) {
        setTimeout(function() {
            if (Math.random() < 0.30) {
                ngCallback(new Error('ERROR!'));
            } else {
                okCallback(data * 2);
            }
        }, Math.random() * 1000);
    });
}
function sample_finally2() {
    aFunc3(100).then((data) => {
        console.log(data);
        return aFunc3(data);
    })
    .then((data) => {
        console.log(data);
        return aFunc3(data);
    })
    .then((data) => {
        console.log(data);
         throw new Error('ERROR!!!');
    })
    .catch((e) => {
        console.log("catch");
        console.log(e);
    })
    .finally(() => {
        console.log('*** Finally ***');
    });
}
//200 400 800 catch Error:ERRROR!!! *** Finally ***
Promise.all() は配列で指定された全てのPromiseタスクを待ち全てが完了した時点で .then()を呼ぶ
Promise.race()ならいずれかのPromise
function sample_all() {
    p1 = taskA();
    p2 = taskB();
    Promise.all([p1, p2]).then(() => {
        console.log("taskA and taskB are finished.");
    });
}

ES2017 では、async/await がサポートされました
async と await を用いることで、Promise に対応した非同期関数を、同期関数の様にシンプルに呼び出すことが可能となります
同期関数の様に呼び出したい非同期関数を呼び出す際に await をつけます。await を呼び出す関数に async をつけます
async function sample_async_await_with_catch() {
    var val = 100;
    try {
        val = await aFunc3(val);
        console.log(val);
        val = await aFunc3(val);
        console.log(val);
        val = await aFunc3(val);
        console.log(val);
    } catch (e) {
        console.log(e);
    }
}

■コールバック関数
広い定義でいうと「高階関数に渡すための関数」
「関数を受け取る関数」は「高階関数」、つまりhello()がコールバック関数
// 関数を2回実行する関数!!
function doTwice(func) {
  func(); // 1回目Hello!
  func(); // 2回目Hello!
}
// あいさつするだけの関数
function hello() {
  console.log('Hello!');
}
// あいさつを2回実行する
doTwice(hello);

■ショートハンド
https://www.webprofessional.jp/shorthand-javascript-techniques/
https://qiita.com/kozzzz/items/b4cd57ead41fc6355afd
短縮記法が色々あって読みにくい↑を参考

他にもあるが、下記は参考になったので↓

「!==」(厳密不等価)は「&&」(論理AND)よりも強く結びつく
 つまりnull!==e&&(e.innerHTML=t,e.style.display="block")は
(null!==e)&&(e.innerHTML=t,e.style.display="block") という意味

「&&」は 論理AND は、下記の動作をする
 前から評価する
 評価値「偽」が出たならば、「偽」を返して残りの部分は評価しない
カンマ演算子は、単純にカンマで区切られた式を順番に評価し、最後の式の値を返す
 演算子であるのでカンマで区切られるものはすべて値・関数・式である必要
 最終的にその演算子で繋がった式全体で真または偽となります

<script type="text/javascript">
let aaa={
 displayResult:function(t){
  let e=document.getElementById("result");
  //該当DIVがあれば&&()の処理をする、IFの省略
  null!==e&&(e.innerHTML=t,e.style.display="block")
 }

};
window.onload = function(){
 (function(t){
  let e=document.getElementById("result");
  if(e){
   e.innerHTML=t;
   e.style.display="block";
  }
 })('bbb');
 setTimeout(aaa.displayResult('bbb'),5000);
};
</script>
<div id="result" style="display:none">aaa</div>

■ゲーム
https://qiita.com/doxas/items/9debec7e1f0c19bc8daa チュート8迄でOKか、9でボス10で処理高速化
http://www.west-mira.jp/javascript/list/4/16/ の打打打

どちらもsetTimeoutで自己関数を呼び出すループをしている
var run = true;
var fps = 1000 / 30;
window.onload = function(){
    // ループ処理
    (function(){
     // HTMLを更新
        info.innerHTML = message + ' at ' + mouse.x + ' : ' + mouse.y;
        if(p.length() < chara.size){
            // 衝突があったのでパラメータを変更してループを抜ける
            run = false;
            message = 'GAME OVER !!';
            break;
        }
        // フラグにより再帰呼び出し
        if(run){setTimeout(arguments.callee, fps);}
    })();
};

function Games(){
 //判定処理やら得点処理やら描画処理
 clearTimeout(my_time);//setTimeoutをキャンセル
 if(tokutenn<0){
  game_end=1;
  alert("GAME OVER...");
 }
 if(game_end!=1)my_time=setTimeout('Games();',hayasa);
}

■ネイティブで実現させるフロントエンド
https://blog.kannart.co.jp/coding/1199/
 カルーセル addEventListenerでクリックされると要素分移動する
 ハンバーガ 画面サイズでハンバーガDivの表示切替、クリックでナビDiv表示
 グローバルナビ マウスオーバでナビDiv表示
 フッター固定 スクロール300でposition:fixedを表示
 スムーズスクロール scrollTop分をsettimeoutでループし段々移動
 無限スクロール ローディング画像を非表示>最下部に行けば>ローディングを表示>要素を追加していくが
   ページネーションのURL page.php?p=3から指定の要素を取り込んでいる(サーバサイド処理不要)

///解説系
https://www.nishi2002.com/14962.html フッター表示
https://beginners.atompro.net/smpdhtm_divhide1.html ナビ
https://popo-design.net/template/ シンプルRWD
http://cly7796.net/wp/javascript/implement-infinite-scrolling/ 無限スクロール

///例
カルーセル、ヒーロー、グローバルナビ
https://www.rakuten-card.co.jp/e-navi/members/index.xhtml
スクロール系(タイトルとナビとサブナビとフッターが各スクロールポイントが違う、広告追従、トップ戻るボタン)
 フッターに広告、トップにスクロールで戻るボタン
 https://ferret-plus.com/6385
 https://www.sejuku.net/blog/52998
 https://liginc.co.jp/392786 (グローバルナビも)
 広告がスクロールに追従
 https://dekiru.net/article/19272/
  sticky-state 2.4.1 - (http://soenkekluth.com/) - https://github.com/soenkekluth/sticky-state#readme
 スクロールの進み具合を表示、最後に広告?
 https://blog.hubspot.jp/google-forms
無限スクロール ローディングbyスクロール
https://shopping.yahoo.co.jp/search?p=Oakley+holbrook

ハンバーガ拡大アニメ
https://rfs.jp/sb/javascript/js-lab/resize-header-scroll.html
Wijimo Grapecity 感じのいいレスポンシブ
https://demo.grapecity.com/wijmo/demos/Input/ListBox/InfiniteScroll

ドラッグ&ドロップでHTML要素を移動
https://q-az.net/elements-drag-and-drop/
https://web-designer.cman.jp/javascript_ref/mouse/move/
https://qiita.com/kaikusakari/items/ca45910a35712daca68c

ドラッグ&ドロップでファイルをアップロード
https://platycerium.sakura.ne.jp/node/812
https://www.okushin.co.jp/kodanuki_note/2018/02/%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%E3%82%A2%E3%83%B3%E3%83%89%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC.html
↓使用されるJS
https://lab.syncer.jp/Web/API_Interface/Reference/IDL/DataTransfer/dropEffect/
https://lab.syncer.jp/Web/API_Interface/Reference/IDL/DataTransfer/effectAllowed/
https://lab.syncer.jp/Web/API_Interface/Reference/IDL/Event/preventDefault/
https://app.codegrid.net/entry/dnd-api-1
https://qiita.com/tochiji/items/4e9e64cabc0a1cd7a1ae
https://chaika.hatenablog.com/entry/2019/02/15/090000
DataTransferは、ドラッグ操作やクリップボード操作で転送されるデータ扱うインターフェイス
 コンストラクタ
  DataTransfer() 新しいDataTransferのオブジェクトを作成します。
 メソッド
  clearData() 転送中のデータを削除します。
  getData() 転送中のデータの内容を取得します。
  setData() 転送中のデータの内容を変更します。
  setDragImage() ドラッグ操作中に表示するイメージを設定します。
 プロパティ
  dropEffect 転送データを取り扱う時のドロップ側の操作を返します。
   種類:copy, move, link, none
  effectAllowed 転送データを取り扱う時のドラッグ側の操作を返します。
   種類:copy, move, link, copyLink, copyMove, linkMove, all, none, uninitialized
  files 転送中のファイルの一覧をFileListで返します。
  items 転送中のデータの一覧をDataTransferItemListで返します。
  types 転送中のデータの種類の一覧を配列で返します。
addEventListener()でリッスンするドラッグイベント
 dragstart, drag, dragenter, dragleave, dragover, drop,  dragend
preventDefault() 規定の動作をキャンセルし文字入力やクリックや画面の遷移を行わない等
stopPropagation() イベント伝播を行わないようにする
classList クラス属性でDOM操作できるオブジェクト、クラスの追加/削除/切替/含むか判定等ができる

■ indexedDB
https://dev.classmethod.jp/articles/html5-indexed-database-api/
 キーバリューを保存できる
 このサイトのバックアップもアップロードフォルダーに一応取ってある

IndexedDB のインターフェースは非同期でイベントベース
 indexedDB.openのonsuccessで実行が必要だったり、UX上は良いかもしれんが扱いは面倒(毎回Openのonsuccessで良いが)
 色んな形式で保存できるらしい、インデックス化は便利か
https://qiita.com/butakoma/items/2c1c956b63fcf956a137
https://ikkyu.hateblo.jp/entry/2019/11/23/180259
https://blog.htmlhifive.com/2018/06/06/indexed-db/
https://qiita.com/sachiko-kame/items/aebd618ef39de982ed7b

/// 他のクライアントへのデータ保存
1)localStorage/sessionStorageは同期型でgetItem/setItemを実行できる、5MBでStringのみ
 扱いは簡単だが、引っこ抜き安全でない
https://techracho.bpsinc.jp/hachi8833/2019_10_09/80851
https://www.granfairs.com/blog/staff/local-storage-01
https://qiita.com/masamitsu-konya/items/c69515604570150d3ab9

2)Cookieはサーバでヘッダーで生成される、4KBまで、JSで生成し書込/読込できる、サーバ送信される?
 通常ページ表示でCookieがブラウザ保存され、再度そのページにアクセスの際ブラウザからCookieがサーバーに送信
https://qiita.com/dokkoisho/items/b415f1c9852c8fd12ec8
https://www.sejuku.net/blog/28696

Secure属性 httpsの通信の時のみCookieを送信、のぞかれないように、ONに
HHTPOnly属性 JSでの参照を防ぐ、ONに
SameSite属性 上の2つをした上でサイト構成を見てLAX以上にできればする
 Strict: 同一サイト/ドメインリクエスト間のリクエストでのみCookieを送信
 Lax: 他サイト/ドメインの遷移で、GETであればCookieセット
 None: 以前通りリクエスト先がCookieをセットしたドメインであればCookieをセット
https://laboradian.com/same-site-cookies/
https://www.future-shop.jp/magazine/info-samesite
https://www.softel.co.jp/blogs/tech/archives/4942

■知りたい実装
/// e = pow(10)=10の累乗=0の数
31536e3 は 31536 * pow(10,3) = 31536000 であり秒数換算で1年

/// 引数にアルファベット1文字 function(a,b,c,x,y,z,e,t,n,s,o){
 a,b,cとかx,y,zとかの順番とか、後は大体頭文字
 eはイベント、エラー、エレメント、Tはタイプ、テンポラリ、ターゲット、テキスト、Nはナンバー、Sはストリング、Oはオブジェクト、Iはインクリメント等

/// エンコード系
btoa バイナリデータの文字列から base64 エンコードされた文字列を作成、文字列変換なので入力はアスキー化かURIエンコードの事前処理が必要
atob base64 形式でエンコードされたデータの文字列をデコード
escape 文字列をASCII形式でエンコード、ブラウザによってはLatin1ではなくUnicodeになる?
unescape ASCII形式の文字列をデコード
encodeURIComponent スペースが%20になったりURL用エンコード
decodeURIComponent URL用にエンコードされた文字列をデコード
 base64はa-Z0-9と幾つかの記号の64種で画像や音声等バイナリを文字化しメール送信等の用途、普通はURIエンコードだけ使う感じか

==============================
■Chrome DevTools デバッガー
JSをソースタブで開く
 {} でMinifyを解除
ブレイクポイントで止めて変数の状態を調べステップ(イン)で実行
console.log()でロギング
エラー発生時の自動一時停止の有効化
https://qiita.com/d-dai/items/0b580b26bb1d1622eb46
https://ja.javascript.info/debugging-chrome

リバースエンジニアリング
エレメントタブで影響のあるエレメントのソースを抜き出す
classやidの名前から機能を類推、CSSやJSで使われているか検索する
[Ctrl] + [Shift] + [F] を押すとページが読み込んだソース全体から検索可
https://www.doe.co.jp/hp-tips/browser/chrome-devtools-techniques/

twitter
Hatena
Google Buzz
newsing
Yahoo!
Buzzurl
Technorati
del.icio.us
Choix
Iza!
Livedoor Clip
Facebook
Evernote
 

Posted by funa : 07:27 AM | Web | Comment (0) | Trackback (0)


PhotoGallery


TWITTER
Search

Mobile
QR for cellphone  QR for smart phone
For mobile click here
For smart phone click here
Popular Page
#1Web
#2Hiace 200
#3Gadget
#4The beginning of CSSレイアウト
#5Column
#6Web font test
#7Ora Ora Ora Ora Ora
#8Wifi cam
#9みたらし団子
#10Arcade Controller
#11G Suite
#12PC SPEC 2012.8
#13Javascript
#14REMIX DTM DAW - Acid
#15RSS Radio
#16Optimost
#17通話SIM
#18Attachment
#19Summer time blues
#20Enigma
#21Git
#22Warning!! Page Expired.
#23Speaker
#24Darwinian Theory Of Evolution
#25AV首相
#26htaccess mod_rewite
#27/// BANGBOO BLOG /// From 2016-01-01 To 2016-01-31
#28竹書房
#29F☆ck CSS
#30Automobile Inspection
#31No ID
#32Win7 / Win10 Insco
#33Speaker
#34Arcade Controller
#35Agile
#36G Suite
#37Personal Information Privacy Act
#38Europe
#39Warning!! Page Expired.
#40GoogleMap Moblile
#41CSS Selectors
#42MySQL DB Database
#43Ant
#44☆od damnit
#45Teeth Teeth
#46Itinerary with a eurail pass
#47PHP Developer
#48Affiliate
#49/// BANGBOO BLOG /// From 2019-01-01 To 2019-01-31
#50/// BANGBOO BLOG /// From 2019-09-01 To 2019-09-30
#51/// BANGBOO BLOG /// On 2020-03-01
#52/// BANGBOO BLOG /// On 2020-04-01
#53Windows env tips
#54恐慌からの脱出方法
#55MARUTAI
#56A Rainbow Between Clouds‏
#57ER
#58PDF in cellphone with microSD
#59DJ
#60ICOCA
#61Departures
#62Update your home page
#63CSS Grid
#64恐慌からの脱出方法
#65ハチロクカフェ
#66/// BANGBOO BLOG /// On 2016-03-31
#67/// BANGBOO BLOG /// From 2017-02-01 To 2017-02-28
#68/// BANGBOO BLOG /// From 2019-07-01 To 2019-07-31
#69/// BANGBOO BLOG /// From 2019-10-01 To 2019-10-31
#70/// BANGBOO BLOG /// On 2020-01-21
#71Bike
#72Where Hiphop lives!!
#73The team that always wins
#74Tora Tora Tora
#75Blog Ping
#76無料ストレージ
#77jQuery - write less, do more.
#78Adobe Premire6.0 (Guru R.I.P.)
#79PC SPEC 2007.7
#80Google Sitemap
#81Information privacy & antispam law
#82Wifi security camera with solar panel & small battery
#83Hope get back to normal
#84Vice versa
#85ハイエースのメンテ
#86Camoufla
#87α7Ⅱ
#88Jack up Hiace
#89Fucking tire
#90Big D
#914 Pole Plug
#925-year-old shit
#93Emancipation Proclamation
#94Windows env tips
#95Meritocracy
#96Focus zone
#97Raspberry Pi
#98Mind Control
#99Interview
#100Branding Excellent
Category
Recent Entry
Trackback
Comment
Archive
<     August 2020     >
Sun Mon Tue Wed Thi Fri Sat
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
Link