javascript・・実践的な覚学

クリックした時に取得するデータ

noteIE11はes6未対応なのでアロー関数もテンプレート文字列も使えない！！！！！

参考：ファクトリー関数の使い方

//処理を止める
debugger;

console.log({変数});//変数名とともに出力

console.table(配列);// 表で出力
console.dir(element);// DOMの詳細
console.count()//カウント
console.trace()//コールバック元を探る

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}
foo();

console.time();/console.timeEnd();

function foo() {
 function bar() {
   console.time();
   console.log("タイマー開始");
   console.trace();
 }
 bar();
}

foo();
console.timeEnd();
console.log("タイマー終了");

//JavaScript は大文字・小文字を区別する
//最初の文字は、アルファベットかアンダースコア (_) かドル記号 ($)
//ハイフンはつかえない。

//const 「再宣言」も「再代入」も不可
const $body = $('body'), $window = $(window);

//let　同ブロック内での「再宣言」が不可
//スコープ宣言されたブロック（またはサブブロック）の内側のみ有効。
if (true) { let foo = 'bar';}
console.log(foo); // エラー

let foo = 'hoge';
let foo = 'fuga'; //Uncaught SyntaxError: redeclaration of let foo
// 「再宣言」で同ブロックの処理も巻き沿いを食う模様
//外部ファイルに記述されたスクリプトは無事。

for (let i = 0; i < 10; i++){
 console.log(i); // 0,1,2,3,4,5,6,7,8,9
}
console.log(i);  // ブロック外なのでエラー


//メモリ開放
var val = 'hoge'; // 別に strings 以外のデータでもOK
val = null; // null 値を突っ込んでるだけで、メモリには残る。
console.log( typeof val ); // 'null'
delete val; // これで、メモリから解放される。
console.log( typeof val ); // 'undefined' .. 定義すらされてない状態

var hoge = { 'a':1, 'b':2 };
hoge.a = void 0;
console.log( hoge );// { 'b':2 }
// void 0 を代入する事と delete を使うことの違い：
var hogu = void 0; // 元々、undefined な状態でも代入を試みることが出来る。
// delete のように「メモリ上に確保されていること」を問わないのが特徴。

//jQuery
.empty();
.remove()
メモリーリークを回避するために削除される要素に紐付くイベントハンドラやDataも削除します。あとで再利用するためにこれらの情報を残したい場合などは、.detach()メソッドを

.empty()との違いは、.remove()はマッチしている自身の要素も含めて、子要素も全て削除します。
.empty()は、要素内の子要素(テキストも対象)を全て削除します。


//...３つは、配列の中身だけを取得
const items = ['a', 'b', 'c']

console.log(items) // ['a', 'b', 'c']
console.log(...items) // a b c

//...　実践：配列をマージ
const a = [1, 2, 3]
const b = [...a, 4, 5, 6]
console.log(b) // [1, 2, 3, 4, 5, 6]

//.ドットはプロパティのアクセス
//.ドット記法か、[]ブラケット記法か


//べき乗
console.log(3**3);

//テンプレート文字列
let scr = 'Script'
console.log(`Java${scr}!`);

//入れ子もOK
const classes = `header ${ isLargeScreen() ? '' :
  `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

'（シングルクオーク）ではなく
`（バックスラッシュ）

日本語キーボード
[ Shift ] ＋ [ @ ] キー
英字キーボード
[ Option ] ＋ [ ~ ] キー（tabの上）

var $asin = 'シングルクォーテーション';
var $aback = `バックスラッシュ`;

console.log($asin); //ok
console.log($aback); //ok

［ギモン]
テンプレ文字列と文字列で使い分けなくても
全部`バックスラッシュ`でよくね？


// ary.includes　配列内要素の存在を確認
var arr = ['a','b',]

console.log(arr.includes('a')) // true
console.log(arr.includes('c')) // false

「Service Worker」を利用すれば、サイトを表示していなくともバックグラウンドでJavaScriptを動作させることが可能になります。これを用いることで、サイトが開かれていないブラウザにもプッシュ通知を配信することが実現できます。

ex:Service Worker

PWA（ピー・ダブル・エー）」とは、スマートフォンアプリと同じような機能や、安定して高速に動作する快適なUXを、ウェブで実現する手法や、そうした技術でつくられたサイトを指す（「Progressive Web Apps」の略）。

「SPA（エス・ピー・エー）」とは、ブラウザでリンクやボタンを操作したときにページ全体を読み込み直すのではなく、動的に処理を行って表示を更新するような、アプリケーション的な動作をするページを指す（「Single Page Application」の略）。

「Service Worker（サービス・ワーカー）」は、主にPWAで「アプリのように高速かつ信頼性のある動作」をするための仕組みや、その仕組みで動作しているプログラムを指す。

ex:PWA

//ヘッダーでブラウザーをノーキャッシュにする。
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">

//上記だとjsの読み込みキャッシュには対応しないのでクエリでタイムスタンプを使う
<script src="hogehoge.js?p=(new Date()).getTime()"></script>