● javascript の 実行時間を計測して表示する console.time()

以下のように使用します

console.time("MyFunction 実行時間")
MyFunction()
console.timeEnd("MyFunction 実行時間")

● Symbol()

Symbol("mySymbol") と Symbol.for("mySymbol") は似ていますが、実際には異なる動作をします。 この違いは、シンボルがどのように作成され、格納されるかに関係しています。

Symbol("mySymbol"): これは毎回新しいユニークなシンボルを生成します。 たとえ同じ文字列を使って複数回呼び出しても、それぞれの呼び出しで異なるシンボルが生成されます。

let sym1 = Symbol("mySymbol");
let sym2 = Symbol("mySymbol");

console.log(sym1 === sym2); // false

● Symbol.for()

Symbol.for("mySymbol"): これはグローバルシンボルレジストリを使用してシンボルを作成または取得します。 同じ文字列で Symbol.for を呼び出すと、同じシンボルが返されます。

let sym1 = Symbol.for("mySymbol");
let sym2 = Symbol.for("mySymbol");

console.log(sym1 === sym2); // true

● JSONをパースし、エラーの場合にエラー箇所を表示する（方法1. ）

JSON.parse の 第二引数の reviver を使用します。

const json = '{"name":"テスト太郎", "age":42"}';

const obj = JSON.parse(json, (_key, value) => {
  try {
    return JSON.parse(value);
  } catch (e) {
    return value;
  }
});

● JSONをパースし、エラーの場合にエラー箇所を表示する（方法1. ）

const json = '{"name":"テスト太郎", "age":42"}';

const obj = JSON.parse(json);
if (obj instanceof SyntaxError) {
  console.log(obj);
}

＜input type="text" id="q"＞へフォーカスします。

// キーボードショートカットのハンドラー
function handleShortcut(event) {
	if (event.key === "/" && !isInputOrTextArea(document.activeElement) ) {
	  event.preventDefault();
	  document.getElementById('q').focus();
	}
	else if (event.key === "Escape") {
      document.activeElement.blur();
    }
}

// フォーカスされている要素がテキスト入力またはテキストエリアかどうかを判定
function isInputOrTextArea(element) {
	return element.tagName === 'INPUT' || element.tagName === 'TEXTAREA';
}

// キーボードイベントをページ全体で監視
document.addEventListener('keydown', handleShortcut);

javascript で URLの ?以降 （#は含まれない）を取得する

const queryString = location.search;

javascript で URLの #以降を取得する

const fragmentIdentifier = location.hash;

● 正規表現マッチ結果をbooleanで返す test() メソッド

const regex = new RegExp('foo*');
const result1 = regex.test('football');
console.log( result1 );    // true

以下のように書いても同様です

const result2 = /foo*/.test("football");
console.log( result2 );    // true

● while

while (true) {
    // 無限ループ
}

● for

for (;;) {
    // 無限ループ
}

● for Infinity

for (var i = 0; i < Infinity; i++) {
    // 無限ループ
}

● javascript で UUID を生成する

crypto.randomUUID() // dc690eb0-6526-475d-8cb5-02d482fa468c

● javascript で 時系列でソート可能な ULID を生成する

ULID パッケージをインストールする

npm i ulid

ULIDを生成する

import { ulid } from 'ulid'
 
ulid() // 01ARZ3NDEKTSV4RRFFQ69G5FAV

ULIDは26文字のIDです。さらに短いIDを検討する場合は XID（英数小文字20文字）を検討すると良いでしょう

● javascriptで時系列でソート可能な XID を生成する

npm install xid-js

● Goでで時系列でソート可能な XID を生成する

https://github.com/rs/xid

const xid = require('xid-js');
xid.next(); // b0xzcjjhcjkbqnpwz150

● javascript で 時系列でソート可能な cuid を生成する

npm install --save @paralleldrive/cuid2

import { createId } from '@paralleldrive/cuid2';

const ids = [
  createId(), // 'tz4a98xxat96iws9zmbrgj3a'
  createId(), // 'pfh0haxfpzowht3oi213cqos'
  createId(), // 'nc6bzmkmd014706rfda898to'
];

● javascriptでhtmlからimgタグを抽出する

DOMParser を使用します。

// Aタグのリンクを抽出する
const html = '...................'
const dom = new DOMParser().parseFromString(html, 'text/html')
const imgs = dom.querySelectorAll('img')

imgs.forEach(img => {
	console.log('● img.src')
	console.log(img.src)
})

● javascript でブラウザから fetch を使ってmultipart/form-data でファイルアップロードを行う

（xhr いわゆるajax）で通信します。

    const fileUpload = async () => {
      const url_1 = 'https://hogehoge.jpg'
      const url_1 = 'https://fugafuga.jpg'

      const file_1 = await urlToFile(url_1)
      const file_2 = await urlToFile(url_2)

      var formData = new FormData()

      formData.append("file001", file_1);
      formData.append("file002", file_2);

      const result = await fetch('/file-upload-backend-url', {
        method: 'POST',
        body: formData,
      }).then((response) => {
        return response.url;
      })

      return result;
    }

urlToFile メソッドはこちらを使用します
URL から File オブジェクトに変換する｜プログラムメモ

実行

fileUpload()

● base64 から File オブジェクトに変換する

function dataURLtoFile(dataurl: string, filename: string) {
  const arr = dataurl.split(",");
  if (arr.length === 1) return;

  const result = arr[0].match(/:(.*?);/);
  const mime = result ? result[1] : "application/octet-stream";
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type: mime });
}

使い方

const base64 = "xxxxxxxxxxxxxx";
const resizedFile2 = dataURLtoFile(base64, "myfile,jpg");

● URL（https://xxxxxxxxxxx） から Fileオブジェクトに変換する

    /**
     * get random strings
     * 
     * @returns {string} 
     **/
    const getRandString = () => {
      const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
      let rand_str = '';
      for (var i = 0; i < 8; i++) {
        rand_str += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      return rand_str;
    }

    /**
     * URL to FileObject
     * 
     * @param   {string}    url 
     * @returns {Promise<File> | Promise<null>}
     **/
    const urlToFile = async (url) => {
      const fileName = url.match(".+/(.+?)([\?#;].*)?$")[1];
      const rndString = getRandString();
      const getFile = await fetch(`${url}?${rndString}`)
        .then((response) => {
          if (!response.ok) {
            console.error('ファイル取得エラー');
            console.error(response);
          }
          else {
            return response.blob()
          }
        })
        .then((blob) => {
          if (blob === undefined) {
            return null;
          }

          return new File([blob], fileName)
        })

      return getFile
    }

● 使い方

（async 関数の中から使用します）

const url_1 = 'https://xxxxxxxx.jpg'
const file_1 = await urlToFile(url_1)

console.log( file_1 );

● javascript オブジェクトのキーを変数で指定する

・方法 1.

const key = "fullName"
const obj = {}
obj[key] = 'hogehoge'

・方法 2.

const key = "fullName"
const obj = {[key]: 'hogehoge'}

https://qiita.com/uhyo/items/cc68e66e4008a66f3d94

しかし、イテレータには配列には真似できない点がひとつあります。それは無限イテレータを作れるという点です。

● ジェネレータの基本

引用 : https://qiita.com/kura07/items/d1a57ea64ef5c3de8528

// 1～20の数を順番に取り出す
var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
for(var num of ary) console.log(num);

　　↓

// ジェネレータ関数を使って1～20の数を順番に取り出す

// ジェネレータ関数（function* と書きます）
function* generate20Number(from,to) {
  while(from <= to) yield from++;
}
// ジェネレータ
const generator = generate20Number(1, 20);
for(var num of generator) console.log(num);

https://ja.javascript.info/generators

ジェネレータ関数は通常の関数とは異なり、コードを実行しないことです。それらは “ジェネレータ工場(ファクトリー)” として機能します。 function* の実行はジェネレータを返し、その後、ジェネレータに値を要求します。

● ジェネレータ関数の yield* も便利

function* generate3Chars(from,to) {
  yield* ['aaa','bbb','ccc'];
}
const gen = generate3Chars(1, 20);
console.log( ...gen ); // aaa, bbb, ccc 

「意地でもconst」とは、即時関数を定義してその場で実行することで、const の 代入文に条件分岐がある場合でも1行で書く方法です。
意外と可読性も悪くないのでおすすめします。

意地でもconstを使う方法 - Qiita

● switchの例( let を使用)

let num = 0;
switch (flag) {
    case "A":
        num = 1;
        break;
    case "B":
        num = 2;
        break;
    case "C":
        num = 3;
        break;
}

● switchの例( const を使用)

const num = (() => {
    switch (flag) {
        case "A": return 1;
        case "B": return 2;
        case "C": return 3;
        default : return 0;
    }
})();

● console.log()

    console.log(data)
    console.table(data)
    console.log(JSON.stringify(data, null, 2))

アプリ svelte-vite-jest の初期化

npm init vite@latest svelte-vite-jest -- --template svelte-ts
cd
npm install

サンプルとしてクリックすると数値が1ずつ増えていくボタンが設置されています。

src/App.svelte の余計なコードを削除して以下のようにしておきます

<script lang="ts">
  import Counter from './lib/Counter.svelte'
</script>

<main>
  <div class="card">
    <Counter />
  </div>
</main>

Counter.svelte は次のように修正しておきます

<script lang="ts">
  let count: number = 1
  const increment = () => {
    count += 1
  }
</script>

<button on:click={increment}>
  count is {count}
</button>

● vitest , testing-library , happy-dom のインストール

npm install -D vitest
npm install -D @testing-library/svelte
npm install -D happy-dom

vite.config.ts

/// <reference types="vitest" />

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  test: {
    environment: 'happy-dom',
  },
});

ディレクトリ tests にテストファイルを作成する
src/tests/app.svelte.test.ts

import { describe, expect, test } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/svelte';
import App from '../../src/App.svelte';

describe('App.svelte', () => {
  render(App);

  test('1+2は3になる ', () => {
    expect(1 + 2).toEqual(3);
  });

  test('アプリをマウントすると count is 1 が表示される', () => {
    expect(screen.getByRole('button').innerHTML).toEqual('count is 1');
  });

  test('ボタンをクリックするとカウントの数値が2になる', async () => {
    const button = screen.getByRole('button');
    await fireEvent.click(button);
    console.log(button.innerHTML);
    expect(screen.getByRole('button').innerHTML).toEqual('count is 2');
  });
});

● vitestの実行

npx vitest --reporter verbose

● javascript で Objectの長さ length を知る

function objectLength( obj ) {
  let objectLength = 0;
  for (let key in obj) {
    objectLength++;
  }
  return objectLength;
}

console.log( objectLength({}) ); // 0
console.log( objectLength({a:'hoge',b: 'fuga'}) ); // 2

case009.js

export const Case009 = [
    'hoge' , 'fuga'
];

    if (true) {
      import('./case009.js')
        .then((module) => {
          console.log(module.Case009);
        });
    }

● svelte のインストール

npx degit sveltejs/template my-svelte-app
cd my-svelte-app
node scripts/setupTypeScript.js
npm install

● ポートを5001に変更する（macの場合）

package.json

    "start": "sirv public --no-clear",

　　↓

    "start": "sirv public --no-clear --port 5001",

● 起動する

npm run dev

● Svelteコンポーネントを作成する

src/components/Header.svelte を以下の内容で作成する

変数を export することによってプロップスとして受け取ることができます

<script lang="ts">
  export let headerTitle: string;
</script>

<div>
    <h1>app header ({headerTitle})</h1>
</div>

App.Svelte から呼び出す

<Header headerTitle="タイトルのテスト"/>

● ビルドする

npm run build

index.html のパス表記を相対パスにするとサーバーなしで起動することができます。

● アプリの適用htmlタグを指定する

デフォルトではbodyタグにアプリが展開されますがタグを指定することができます.

main.ts

const app = new App({
  target: document.body,
});

　　↓

main.ts
id="svelteapp" のタグに展開する

const app = new App({
  target: document.querySelector('#svelteapp'),
});

● htmlからpropsを渡す

const app = new App({
  target: document.querySelector('#svelteapp'),
  props: {
    titleFromHtml: document
      .getElementById('svelteapp')
      .getAttribute('data-title'),
  },
});

とすると

	<div id="svelteapp" data-title="タイトル流し込み"></div>

の値を渡すことができます。

● Storeを使用する

Storeの定義 stores.ts

import { writable } from 'svelte/store';

export interface UserStore {
  code: string
  name: string
}

export const userStore = writable<UserStore>({
  code: "user0001",
  name: "hogefuga"
});

Storeのsubscribe（ストアのオブジェクトに変更がある度に指定したコールバックが呼ばれます） App.svelte

	import {UserStore, userStore} from './stores.ts';
  
	// userStore
	let user:UserStore;
	userStore.subscribe(u => {
                // コールバック
		user = {
			code: u.code,
			name: u.name,
		};
	});

Storeから取得した値の参照 App.svelte

	<div style="font-weight: bold;"> code: {user.code} </div>
	<div style="font-weight: bold;"> name: {user.name} </div>

Storeの更新 App.svelte

  userStore.update((s) => {
    return {
			code: ’code999’,
			name: 'テスト太郎',
		};
  });

● スコープされていないグローバルなcssを適用する

<style>
    :global(div.content) {
        height: 690px;
    }
</style>

参考 : https://zenn.dev/miruoon_892/articles/2c9efd2c302c56bd41a6
引用 : https://zenn.dev/dictav/articles/sapper-web-app#store
参考 : https://qiita.com/tonio0720/items/88e62e6beffa9adc1a7f
参考: https://qiita.com/tonio0720/items/34ecaae10a67fab3ab16

● ( tsx ) 準備

npm i -D tsx

● ( tsx ) 実行

npx tsx <typescriptファイル名>

以上です。

ts-node を使いたい場合はこちら。

● ( ts-node ) 準備

npm install --save ts-node

● ( ts-node ) プロジェクトの初期化も行う場合

npx tsc --init --target es2015

tsconfig.json

"module": "esnext",

　　↓

"module": "commonjs",

● ( ts-node ) 実行

npx ts-node <実行したいtypescriptファイル名>

● ( ts-node ) 既存の tsconfig.json を変更せずに実行したい

そのまま実行すると以下のようなエラーとなることがあります

(node:42851) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

その場合は実行用の tsconfig.json を作成してその設定ファイルを明示的に指定しながら実行します。

tsconfig.cli.json

{
  "compilerOptions": {
    // ts-node対応 esnext → NodeNext
    "module": "NodeNext",
  }

  // ts-node
  "ts-node": {
    "esm": true,
    "experimentalSpecifierResolution": "node"
  }
}

--project <設定ファイル名> を加えて実行します。

npx ts-node --project tsconfig.cli.json src/sample.ts

interface Props {
  hoge: string,
  fuga: string
}

// propsで受けたい場合
function myfunc01( props:Props ){
  console.log(props.hoge)
  console.log(props.fuga)
}

// 「props.」 が邪魔な場合はこのように書ける
function myfunc01( {hoge,fuga}:Props ){
  console.log(hoge)
  console.log(fuga)
}

● type="module"を記述してimport / export をそのままの javascript で使用する

<script type="module">

これにより次のようなことが起こります

・1. this のデフォルト が window ではなく undefined になる。
・2. 実行タイミングが body の後になる（  $(document).ready よりかは前 ）。
・3. コードは常にStrictモードで実行される。
・4. import / export が使用できるようになる。
・5. 動的なモジュールの読み込みが可能になる。
・6. 同じ   <script type="module" src="myfile.js"></script> は何時出しても1度しか実行されない

● サンプル

（通常の script）

https://pgmemo.tokyo/livedemo/javascript_type_module/default.html

（通常の type="module" としたscript）

https://pgmemo.tokyo/livedemo/javascript_type_module/type_module.html

<script>
	window.addEventListener('DOMContentLoaded', (event) => {
		document.getElementById( 'jstext' ).innerHTML += '● 3. DOMContentLoaded ';
	});
</script>

<script type="module">
	console.log( '● this' );
	console.log( this );

	document.getElementById( 'jstext' ).innerHTML += '● 2. jsによる出力(type="module") ';
</script>
<div>javascriptのテストを行います。</div>

<script>
	document.getElementById( 'jstext' ).innerHTML += '● 1. js text ';
</script>

引用 : https://qiita.com/azukiazusa/items/98845e79807fff0dd3cb
https://hidekazu-blog.com/javascript-module/#toc11

● モジュールの通常のスクリプトの間のその他の違い

• ローカルでテストしようとするときは注意してください。ローカルから (つまり file:// URL を使って) HTML ファイルを読み込もうとすると、JavaScript モジュールのセキュリティ要件のために、CORS エラーが発生します。テストはサーバー経由で行う必要があります。
• また、モジュール内部で定義されたスクリプトの動作は、通常のスクリプト内部のものと異なるかもしれません。これは、モジュール内部では自動的に Strict モード が使われるからです。
• モジュールのスクリプトを読み込むときに defer 属性 を使う必要はありません。モジュールは自動的に遅延実行されます。
• モジュールは、複数の ＜script＞ タグで参照されていても一度しか実行されません。
• 最後ですが重要なこととして明らかにしておきますが、モジュールの機能は単独のスクリプトのスコープにインポートされます。つまり、インポートされた機能はグローバルスコープから利用することはできません。それゆえ、インポートされた機能はインポートしたスクリプトの内部からしかアクセスできず、例えば JavaScript コンソールからはアクセスできません。文法エラーは開発ツール上に表示されますが、使えることを期待するデバッグ技術の中には使えないものがあるでしょう。

https://mzl.la/3PV9jPk

● type="module"の時にグローバル変数を作る方法

windowsオブジェクトに勝手にプロパティーを追加してグローバル変数とします

window.globals = {変数名: 値}

引用 : https://qiita.com/17ec084/items/75c9970ca37c5dd1b788

npm i mockdate

import MockDate from 'mockdate'

  test('new Date() は同じ日付が入る', async () => {
    const date = new Date();

    await new Promise(resolve => setTimeout(resolve, 1000)) // 1秒待つ

    expect(date).toEqual(new Date());
  });

● 以下のようにjavascriptの関数にもJSDOcで形をつけておくと VS Codeでのコーディング時に候補が絞り込まれます

/**
 * @param { ('parent' | 'child') } target
 */

● TypeScript の様に独自の型も作れます（コメント上だけですが）

    /**
     * ・型定義
     * @typedef {Object} GraphDataObj
     * 
     * ・GraphDataObjのプロパティ
     * @property {number}  id
     * @property {string}  name
     * @property {Date}    updatedAt
     * 
     * ・引数の型
     * @param {GraphDataObj} graphDataObj
     */
    function create(graphDataObj) {
        ................
    }

https://zenn.dev/azukiazusa/articles/c89d4bdc7dacf2
https://www.typescriptlang.org/ja/docs/handbook/jsdoc-supported-types.html

Javascriptでの正規表現マッチには .match を使用します。 Perlと同じように カッコで挟むと $1 に入ります。

こちらの RegExp.$1 は廃止予定です。

const file_name='http://www.test.com/aiueo/kakikukeko.gif';
alert(file_name);
const r = file_name.match(/([a-zA-Z0-9_.]+?)\.gif$/);
alert(r);
alert(RegExp.$1);

このように記述します

const file_name='http://www.test.com/aiueo/kakikukeko.gif';
const regexp = /([a-zA-Z0-9_.]+?)\.gif$/;
const r = regexp.exec(file_name);
console.log( r[1] );

●TypeScript tscコマンドのインストール

npm install -g typescript
tsc -v

Version 4.7.4 などとバージョンが返ってきます

mkdir test-transpile-typescript
cd test-transpile-typescript
tsc --init

フォルダ「test-transpile-typescript」に「tsconfig.json」が作成されます

sample.ts の作成

class Hoge {
  private _id: string;

  constructor(id: string) {
    this._id = id;
  }

  get id(): string {
    return this._id;
  }
}
const hoge = new Hoge('MY-CODE');
console.log(hoge.id);

typescript → javascript トランスパイルの実行

tsc

typescriptのエラーがなければトランスパイルが行われます。「sample.js」が生成されます。

● 同じことはオンラインでできます。

・TS playground
https://www.typescriptlang.org/play

・StackBlitz
https://stackblitz.com/

● vanilla javascript の DateTimeFormat で DBフォーマットで日付を取得する

console.log(new Date().toLocaleString("ja-JP", { timeZone: "Asia/Tokyo" })) // 2023/10/15 10:43:15
console.log(new Date().toLocaleString("ja-JP", { timeZone: "UTC" })) // 2023/10/15 1:43:15

● vanilla javascriptのDateTimeFormat で日付をフォーマットする

console.log(new Intl.DateTimeFormat("ja-JP", { dateStyle: "full", timeStyle: "short", }).format(new Date()))
// 2023年10月15日金曜日 10:44

● 2023_12_01 形式で日付をフォーマットする

const options: Intl.DateTimeFormatOptions = {
  year: "numeric",
  month: "2-digit",
  day: "2-digit",
}
const formattedDate = new Intl.DateTimeFormat("ja-JP", options)
  .format(new Date())
  .replace(/\//g, "_")
console.log(formattedDate); // 2023_12_01

console.log((0.1 + 0.2) + 0.3);
// 結果 : 0.6000000000000001

ちなみにこの場合は正しい結果が得られます

console.log(0.1 + (0.2 + 0.3));
// 結果 : 0.6

console.log(0.3 + 0.6)
// 結果 : 0.8999999999999999

console.log(0.1 + 0.1 + 0.1)
// 結果 : 0.30000000000000004

let valueA = 0
const add = 0.1
for (let i = 1; i <= 10; i++) {
  valueA += add
}
console.log(valueA)
結果 : 0.9999999999999999

一度だけイベントを登録する

element.addEventListener('click', myClickHandler, {
  once: true,
  passive: true,
  capture: true
});

  once: true,

を指定すると一度だけ実行されます。

引用 : https://qiita.com/kozy4324/items/85831e2c990d92b8397b

● JavaScriptでブラウザの戻るボタンまたはリロードボタンで画面遷移してきたことを判定する

function isBrowserBackOrReload() {
    // 1: 再読み込み  2: 戻るボタン
    if (window.performance.navigation.type === 1 || window.performance.navigation.type === 2 ) {
        return true;
    }
    return false;
}

● 使い方

if ( isBrowserBackOrReload() ){
  alert('戻るボタンで戻ってき場合は何もしません');
}
else {
  // 何かしらの処理
}

console.log( Object.prototype.toString.call(undefined) );				// object undefined
console.log( Object.prototype.toString.call(null) );					// object Null
console.log( Object.prototype.toString.call(123456) );					// object Number
console.log( Object.prototype.toString.call(Infinity) );				// object Number
console.log( Object.prototype.toString.call(NaN) );						// object Number
console.log( Object.prototype.toString.call('hoge') );					// object String
console.log( Object.prototype.toString.call(true) );					// object Boolean
console.log( Object.prototype.toString.call([]) );						// object Array
console.log( Object.prototype.toString.call({aaa:'bbb'}) );				// object Objec
console.log( Object.prototype.toString.call(new Date()) );				// object Date
console.log( Object.prototype.toString.call(new Map()) );				// object Map
console.log( Object.prototype.toString.call(new Set()) );				// object Set
console.log( Object.prototype.toString.call(function() {}) );			// object Function
console.log( Object.prototype.toString.call(new String('hogehoge')) );	// object String
console.log( Object.prototype.toString.call(new Number(123456)) );		// object Number
console.log( Object.prototype.toString.call(new Boolean(true)) );		// object Boolean
console.log( Object.prototype.toString.call(Math) );					// object Math
console.log( Object.prototype.toString.call(JSON) );					// object JSON

引用 : shorturl.at/uT013

● JavaScriptの日付Dateオブジェクトを比較する

JavaScriptのDateオブジェクトはそのまま比較することができません

次のように getTime() メソッドを使って数値として比較します

const dt1 = new Date('2020-01-01');
const dt2 = new Date('2020-01-01');

console.log(dt1 === dt2);    // ● 1. false になります。NG ×
console.log(dt1.getTime() === dt2.getTime());        // ● 2. true になります。OK！

valueOf() も同じです。

● Javascriptで「1. 日付が正しいか？」「2. 実際に存在する日付かどうか」をチェックする

2021/04/31 などの存在しない日付の場合も false を返します。

/**
 * 渡された文字列の「1.日付が正しいか？」「2.実際に存在する日付かどうか」をチェックする
 *
 * @param   string      date_str        （例:2021/01/15）（例:2021-01-15）
 */

function is_date_valid( date_str )
{
    const date_obj = new Date(date_str);

    // 日付が Invalid Date の場合は false
    if ( dateFns.isValid(new Date(date_str)) === false ){
        alert(`日付 ${date_str} が正しくありません`);
        return false;
    }

    if ( date_str.match(/[0-9]{4}\/[0-9]{2}\/[0-9]{2}/) ){
        var ar = date_str.split('/');
    }
    else if ( date_str.match(/[0-9]{4}\-[0-9]{2}\-[0-9]{2}/) ){
        var ar = date_str.split('-');
    }

    var year = ar[0];
    var month = ar[1];
    var day = ar[2];

    var check_month = date_obj.getMonth() + 1;

    console.log( '● year/month/day ● check_month' );
    console.log( `${year}/${month}/${day}  : ${check_month}` );

    if ( parseInt(month) !== parseInt(check_month) ){
        alert(`日付 ${date_str} は存在しません`);
        return false;
    }

    return true;
}

● JavaScriptで オブジェクトの配列（コレクション）から 重複する 項目を削除する

tag_name が重複するものを配列から取り除きます

const tag_array = [
  {
    id: 1,
    tag_name: 'ほげほげ'
  },
  {
    id: 2,
    tag_name: 'ふがふが'
  },
  {
    id: 3,
    tag_name: 'ほげほげ'
  },
]

const unique_tag_array = tag_array.reduce((a, v) => {
  if (!a.some((e) => e.tag_name === v.tag_name)) {
    a.push(v);
  }
  return a;
}, []);

console.log( '● tag_array' );
console.log( tag_array );

console.log('● unique_tag_array');
console.log(unique_tag_array);

HTTP Cookie の使用 - HTTP | MDN

Cookie へのアクセス制限 クッキーが安全に送信され、意図しない第三者やスクリプトからアクセスされないようにするには、 Secure 属性と HttpOnly 属性の2つの方法があります。

● Set-Cookieの書式例

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly
path=/; domain=.numd.me; secure; samesite=strict

● SameSite属性

引用 : https://bit.ly/3p0thOl

● Secure 属性

Secure 属性がついたクッキーは HTTPS プロトコル上の暗号化されたリクエストでのみサーバーに送信され、安全でない HTTP では決して送信されないため、中間者攻撃者が簡単にアクセスすることはできません。(URL に http: を含む) 安全でないサイトは、 Secure 属性を使用してクッキーを設定することができません。ただし、Secure によってクッキー内の機密情報へのアクセスをすべて防げると思ってはいけません。例えば、クライアントのハードディスクへアクセスすることで読み取られる可能性があります。

● HttpOnly 属性

HttpOnly 属性を持つクッキーは、JavaScript の Document.cookie API にはアクセスできません。サーバーに送信されるだけです。例えば、サーバー側のセッションを持続させるクッキーは JavaScript が利用する必要はないので、 HttpOnly 属性をつけるべきです。この予防策は、クロスサイトスクリプティング (XSS) 攻撃を緩和するのに役立ちます。

● JavaScript オブジェクトから FormDataへの変換。FormDataの中身を表示する

const formData = new FormData();
for (var key in data) {
    formData.append(key, data[key]);
}

● FormDataの中身を表示する

console.log('● data');
console.log(data);

console.log('● formData');
for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]);
}

● 無名関数からアロー式への変化

let getTriangle = function(base, height){
 return base * height / 2;
};

　　　↓ 　=> 記法で記述します

let getTriangle = (base, height) => {
  return base * height / 2;
};

　　　↓ 　1行にして一番最後のセミコロンを省略します

let getTriangle = (base, height) => {　return base * height / 2; }

　　　↓ 　return と {} を省略します

let getTriangle = (base, height) => base * height / 2

引用 : https://bit.ly/3l6CBOe

注意 「return と {} を省略」の時に return だけ省略すると 結果は undefined になります。

let getTriangle3 = (base, height) => { base * height / 2; }
console.log('三角形の面積は' + getTriangle3(3,4));

↓ 結果

三角形の面積はundefined

● Promiseを返す関数の例

  function myPromiseFunc() {
    return new Promise((resolve, reject) => {
      var min = 1;
      var max = 10;
      var result = Math.floor(Math.random() * (max + 1 - min)) + min;
      console.log(result);
      if (result === 1) {
        resolve('Success!')
      }
      else {
        reject("失敗です")
      }
    })
  }

  // 実行
  myPromiseFunc().then((result) => {
    console.log(result)   // 文字列 Success! が返る
  }).catch((error) => {
    console.log(error)    // 文字列 失敗です が返る
  })

● Promise / them() と async await

・ 1. Promiseの状態

pending： 初期状態、実行中。成功も失敗もしていない
fulfilled： 処理が完了した状態。then メソッドを呼び出す
rejected： 処理が失敗した状態。then メソッドと catch メソッドを呼び出す。

Promiseのコンストラクタ
Promiseのコンストラクタは、2つの関数（resolve, reject）を引数に取ります。

・1番目の関数（resolve）に引数を渡して実行すると状態がfulfilledになり、引数の値がPromiseオブジェクトが保持する値になる
・2番目の関数（reject）に引数を渡して実行すると状態がrejectedになり、引数の値がPromiseオブジェクトが保持する値になる
・関数が例外を投げた場合も状態がrejectedになり、投げた値がPromiseオブジェクトが保持する値になる

引用 : https://bit.ly/3TxbKst

・2. Promise の then() / catch() / finally()　とは何か？

then()  は、 Promise のインスタンスの状態が fulfilled となったときに実行する関数を登録できるインスタンスメソッドです。
catch()  とは、 Promise のインスタンスの状態が rejected となったときに実行する関数を登録するインスタンスメソッドです。
finally() は、処理が成功しても失敗してもいずれの場合でも最後実行される関数を登録するインスタンスメソッドです。

then() は、以下のように定義されています。

Promise.prototype.then(onFulfilled, onRejected)

onFulfilled : fulfilled の状態のとき（resolve が呼ばれたとき）に実行される関数
onRejected : rejected の状態のとき（reject が呼ばれたとき）に実行される関数

catch() は、以下のように定義されています。

Promise.prototype.catch(onRejected)

onRejected : rejected の状態のとき（reject が呼ばれたとき）に実行される関数

使い方としては今まで try / catch を使っていたような場面で、かわりに await/catch を使います。 https://qiita.com/akameco/items/cc73afcdb5ac5d0774bc

finally() はES2018(ES9) から登場しました

finally() は処理が成功しても失敗してもいずれの場合でも最後実行される関数

● then(f,f) と then(f).catch(f) の違いは何か？

then の最初の関数（fullfilled）で）でエラーを発生させた時に .catch があるとそれを捕捉できる。

import axios from "axios";
axios("/list.json")
  .then(response => {
    const list = response.data;
    if (list.length === 0) {
      return Promise.reject(new Error("Empty list!"));
    }
    return list;
  })
  .catch((err) => {
    console.log(err.name + ': ' + err.message)
  });

実行結果

Error: Empty list! 

https://bit.ly/3D2FeXm

● async とは何か？

非同期関数を定義する関数定義です。
async function で非同期関数を定義できます。
async function は Promise インスタンスを返却します。

async による関数の定義

async function MyFunc() {
  return 'HOGEHOGE';
}

定義した非同期関数の実行

MyFunc()
    .then(value => console.log(value));

● setTimeout を await で使う

function waitSleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms))
}

5秒待つ

await waitSleep(5000)

1行で書くなら

await new Promise(resolve => setTimeout(resolve, 5000)) // 5秒待つ

ealush/wait

https://github.com/ealush/wait

Timers Promises API が最高

https://www.pandanoir.info/entry/2021/04/21/234305

● よくあるエラー（Unexpected reserved word 'await'.）

・async ではない関数内で await している
・Promise を返さないものを await している。

をチェックしましょう

● thenとawaitは両方併用可能

    console.log( '● start' );
    
    await myfuncAsync().then((result) => {
      console.log( result );
    })

    console.log( '● end' );

● async関数内で reject をしたいときは

Promise.reject を使用します

async function foo() {
    await wait(1000);
    return Promise.reject(new Error('Whoops!'));
}

● Javascriptエンジンについて

Node.js / Deno / Google Chrome 内で使われているのは　V8
Firefoxで使われているのは　SpiderMonkey
Safariで使われているのは　JavaScriptCore

です。 JavaScriptエンジンによる違いも認識しておくとさらに良いでしょう

● Promise内で resolve の代わりに return すると何もせずに終了します。

function fooBarAsync(){
  return new Promise((resolve) =>
    'fooBar'
  );  
}

async function example() {
  console.log('example() function start');
  const result = await fooBarAsync(); // 永遠に待ち続ける
  console.log( ['● result',result] );

  console.log('This line will never be reached');
  console.log('example() function end');
}


console.log('・script start.')
example();
console.log('・script end.')

結果

node test.js 

・script start.
example() function start
・script end.

● moment.js の 次 date-fns 使用 を使用する

cdnで使用する

<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js" integrity="sha512-F+u8eWHrfY8Xw9BLzZ8rG/0wIvs0y+JyRJrXjp3VjtFPylAEEGwKbua5Ip/oiVhaTDaDs4eU2Xtsxjs/9ag2bQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

dateFns が作成されるので、これを利用します。

console.log( dateFns.isToday(new Date()) );
console.log( dateFns.format(new Date(2017, 6, 6), 'MM/DD/YYYY') );

dateFns.format メソッドで使用できるパラメーター

https://date-fns.org/v2.22.1/docs/format

● Dateオブジェクトとの比較

console.log(d);    // Wed Mar 09 2022 02:45:54 GMT+0000 (Coordinated Universal Time)

console.log(d.toLocaleString('ja-JP'));    // 2022/3/9 2:45:54

console.log(d.toLocaleString("ja-JP", {timeZone: "Asia/Tokyo"}));    // 2022/3/9 11:45:54

● ContentEditable で エンターキーを無効にする

$("[contentEditable]").keypress(function(e){
	if ( e.which == 13 ){
		alert('enter');
		return false;
	}
	return true;
});

● fullcalendar で　次の月 / 前の月 クリック時にイベントを追加する

var calendar;
calendar = new FullCalendar.Calendar(calendarEl, {
    ........
});

関数を追加

$(document).ready(function(){

  // console.log( '● calendar' );
  // console.log( calendar );

  // calendar#2021-06 の形式の場合は移動させる
  var moveTo = new String(location.hash);
  if ( moveTo != '' ){
    moveTo = moveTo.replace(/^#/, '');
    console.log( 'カレンダーを移動します:' + moveTo );
    calendar.gotoDate( moveTo );
  }

  // 「前へ」「次へ」を押した時に URLを書き換える
  $('body').on('click', function (e) {
    var jq_obj = $(e.target);
    if (jq_obj.hasClass('fc-prev-button') || jq_obj.hasClass('fc-next-button') ){
      var m = moment( calendar.getDate() );
      console.log( '● m' );
      console.log( m.format('YYYY-MM') );
      var url = location.href;
      url = url.replace(/#(.+)$/,'');
      history.pushState('', '', url+'#'+m.format('YYYY-MM'));
    }
  });

});

● カーソル位置に指定したテキストを挿入する

function insertHtmlAtSelectionEnd(html, isBefore) {
    var sel, range, node;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = window.getSelection().getRangeAt(0);
            range.collapse(isBefore);

            // Range.createContextualFragment() would be useful here but was
            // until recently non-standard and not supported in all browsers
            // (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.collapse(isBefore);
        range.pasteHTML(html);
    }
}

引用 : https://bit.ly/3eebMTB

● alpine.js で ドラッグドロップ

https://bit.ly/3ilhEvQ
https://codepen.io/trovster/full/oNjGGMq

● Vue.js で ドラッグドロップ

https://github.com/SortableJS/Vue.Draggable

● javascript 現在のウィンドウ アクティブかどうか（ユーザーが見ているかどうか）を調べる

 document.addEventListener("visibilitychange", onchange);

https://mzl.la/2LuXWSh

● JavaScriptでIPアドレス情報を取得

fetch('https://ipinfo.io?callback')
  .then(res => res.json())
  .then(json => console.log(json.ip))

引用 : https://bit.ly/2VXpoK8

● Javascript でオブジェクトの foreach

こちらの方が若干早いようです

Object.keys(model).forEach(function (k) {
  console.log( '● key => value' );
  console.log( k + ' : ' +data[k] );
});

● Javascript でオブジェクトの foreach

こちらは少し遅くなります

for (const k of Object.keys(data) ) {
  console.log( '● key => value' );
  console.log( k + ' : ' +data[k] );
}

● input type="text" の 候補リストを JavaScript で動的に変更する

html

	<input type="" name="" list="my_datalist">
	<datalist id="my_datalist">
		<option value="aaa" label="テスト項目A"></option>
		<option value="bbb" label="テスト項目B"></option>
		<option value="ccc" label="テスト項目C"></option>
	</datalist>

javascript

    var dataList = document.getElementById('my_datalist');
    var jsonOptions = [
    	{
	        "value" : "123",
	        "label" : "テキスト1"
	    } ,
	    {
	        "value" : "456",
	        "label" : "テキスト2"
	    }
	];

    json_to_datalist( dataList , jsonOptions) ;

    function json_to_datalist( datalist_dom_obj , json) {
        if ( ! json ){ return; }
        json.forEach(function(item) {
            var option = document.createElement('option');
            option.value = item.value;
            if( option.label ){ option.label = item.label; }

            datalist_dom_obj.appendChild(option);
        });
    }

● javascriptでオブジェクト メンバ変数やプロパティの存在をチェックする

var obj = {
  id: 1,
  name: 'hoge'
};
if ( 'name' in obj ) {
    // メンバ変数「name」は存在しています
}

● Javascript で moment.js を使って2つの日付の差を求める

var m1 = moment('2012/10/20 15:30:50');
var m2 = moment('2011/09/20 15:30:50');
 
m1.diff(m2); // 34214400000
m1.diff(m2, 'years'); // 1
m1.diff(m2, 'months'); // 13
m1.diff(m2, 'weeks'); // 57
m1.diff(m2, 'days'); // 396
m1.diff(m2, 'hours'); // 9504
m1.diff(m2, 'minutes'); // 570240
m1.diff(m2, 'seconds'); // 34214400

引用 : https://bit.ly/3lV5tau

alert( date.format("YYYY-MM-DD hh:mm:ss")  );

● JavaScript で正しく小数点計算を行う

浮動小数点では正しく小数点計算ができないのでライブラリを利用します。以下の3択で容量の小さい順に

• big.js
• bignumber.js
• decimal.js
• decimal.js-light (decimal.jsの軽量版)

です。 作者は同じなので使い方はどれも同じです。

decimal.js-light を使ってみましょう。

1. decimal.min.js を読み込む

<script src="https://cdn.jsdelivr.net/npm/decimal.js-light@2.5.1/decimal.min.js"></script>

2. 小数点計算を行う

var total = new Decimal( 1.5749 );
var d = new Decimal( 2.75 );

console.log( total.plus(d) );
console.log( total.minus(d) );
console.log( total.times(5) );

などなど、

3. メソッド一覧

absoluteValue
comparedTo
decimalPlaces
dividedBy
dividedToIntegerBy
equals
exponent
greaterThan
greaterThanOrEqualTo
isInteger
isNegative
isPositive
isZero
lessThan
lessThanOrEqualTo
logarithm
minus
modulo
naturalExponential
naturalLogarithm
negated
plus
precision
squareRoot
times
toDecimalPlaces
toExponential
toFixed
toInteger
toJSON
toNumber
toPower
toPrecision
toSignificantDigits
toString
valueOf

http://mikemcl.github.io/decimal.js-light/

● JavaScriptのHTMLCollection を ループさせる

クラス名 "my_loop" 要素をループさせます

        var my_loop = document.getElementsByClassName("myclass");

        for (var i = 0; i < my_loop.length; i++) {
            var v = my_loop[i];
            console.log(v);
        }

● WEBサイトに自由にショートカットキーを設定できる　mousetrap

https://github.com/ccampbell/mousetrap

● mousetrap設定方法

<script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.5/mousetrap.min.js"></script>

// esc を押したとき
Mousetrap.bind('esc', function() { alert('escape'); }, 'keyup');

// ctrl + pを押したとき
Mousetrap.bind('ctrl+p', function () {
    alert('ctrl + p を押しました！');
    return false;
});

// command + p を押した時
Mousetrap.bind('command+p', function () {
    alert('command + p を押しました！');
    return false;
});

return false でデフォルトの動作を kill しています。

● デフォルトでは1行テキストなどのフォーム部品にフォーカスがあたっているときはショートカットが有効になりません

クラス　mousetrap　をつけます

<input type="text" class="mousetrap" >

●

https://github.com/typekit/webfontloader

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
</script>

● 送信ボタンクリック時にボタン連打や二重送信を防止しつつ「送信中」を表示する

● html

class に notrepeat　を追加

<button type="submit" class="notrepeat">データ送信</button>

任意のテキストとアイコンをセットすることもできます。

<button type="submit" class="notrepeat" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> データ送信中ですしばらくお待ちください。 ...">データ送信</button>

● js

以下の js を読み込ませる

jquery.notrepeat.js

$(function() {
  $('.notrepeat').each(function(index, element){    
    $(this).on( 'click', function () {
      alert('x');
        if ( $(this).data('loading-text') ){
            $(this).html( $(this).data('loading-text') );
        }
        else {
            $(this).html("<i class='fa fa-circle-o-notch fa-spin'></i> データ送信中 ... ");
        }
        var jq_obj = $(this);
        setTimeout( function() {
            jq_obj.attr('disabled', true);
        }, 1, jq_obj );
    });
  });
});

lodash を使用する方法もあります。 https://qiita.com/gizumon/items/8288142ecd7c57e05dae

● Angular8 の インストールと Hello World

● yarn のインストール

brew install yarn
brew upgrade yarn
yarn -v

● angular のインストール

yarn global add @angular/cli

● angular のプロジェクトを作成する

cd <任意のディレクトリ>
ng new test-angular-app

● angular のテストアプリを起動する

cd test-angular-app
ng serve

http://localhost:4200/
にアクセスします。

● Hello World と Angular のバージョン表示

app.component.scss

.version {
  th,td {
    border: solid #999 1px;
  }
}

app.component.ts

import { Component } from '@angular/core';
import { VERSION } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component2.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public versionInfo = VERSION;
  title = 'タイトルテスト　Hello! Angular';
  desc = '説明文です';
}

app.component2.html

<h1>{{ title }}</h1>
<div>{{ desc }}</div>

Angularバージョン
  <table class="version">
    <tr>
      <th>full</th>
      <th>major</th>
      <th>minor</th>
      <th>patch</th>
    </tr>
    <tr>
      <td>{{versionInfo.full}}</td>
      <td>{{versionInfo.major}}</td>
      <td>{{versionInfo.minor}}</td>
      <td>{{versionInfo.patch}}</td>
    </tr>
  </table>

でバージョンが表示されます。

● IE11でも使用可能な Promise

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>

    var promise = new Promise(function(resolve){
        setTimeout( function() {
            console.log('HELLO !!!');
            resolve();
        }, 500 );
    });

    // アロー関数は動作しません。 無名ファンクションで置き換えましょう
    // promise.then((result) => {
    //     console.log('PROMISE');
    // })

    promise.then( function(){
        console.log('PROMISE');
    });

● メソッドを Promise 対応にする

function my_func1()
{
    return new Promise(function(resolve){
        setTimeout( function() {
            console.log('(my_func1)hello !');        
            resolve();
        }, 1500 );
    });
}

function my_func2()
{
    return new Promise(function(resolve){
        console.log('(my_func2)promise world!');
        resolve();
    });
}

呼び出し方

my_func1().then( my_func2 );

呼び出し方（ my_func2 に 引数を使う場合）

my_func1().then(function(){
    return my_func2( arg1, arg2 );
});

呼び出し方（無名関数を使う場合）

my_func1().then(function(){
        return new Promise(function(resolve){
            console.log('メッセージ');
            resolve();
    });
});

● JavaScript で フォームに入力可能な文字を限定する

・ バリデーションではなくそもそもフォームに限定したキーしか入力 できないようにします

<input type="text" class="numAndDot">

● jQuery 使用

    $(".numAndDot").keypress(function(key){
        if(key.charCode == 46 ){ return true; }
        if(key.charCode < 48 || key.charCode > 57) { return false; }
    });

● Javascript でグラフ・チャートを表示させる apexcharts

https://apexcharts.com/

チャートの種類: https://apexcharts.com/features/

デモ: https://pgmemo.tokyo/livedemo/apexcharts_demo/index.html

Pie / Donut チャート

https://apexcharts.com/javascript-chart-demos/pie-charts/simple-pie-chart/

デモ: https://pgmemo.tokyo/livedemo/apexcharts_demo/pie_donut_demo.html

引用 : apexcharts.jsの使い方 | あらぱんの外部記憶装置

● canvas に描画した画像をファイルとしてダウンロードさせる

canvas.toDataURL を使わないので、Google Chromeで2MB以上の画像ファイルもダウンロードできます。

/**
 * <canvas id="canvas_download"></canvas> の画像を画像ファイルとしてダウンロードさせます
 *
 * @param   string      canvas_id_name          ダウンロードさせるのキャンバスのID
 * @param   string      download_file_name      ファイル名
 *
 */
function CanvasDataDownload( canvas_id_name, download_file_name ) {
    var canvas = document.getElementById( canvas_id_name );
    var type = 'image/png';
    var dataurl = canvas.toDataURL(type);
    var bin = atob(dataurl.split(',')[1]);
    var buffer = new Uint8Array(bin.length);
    for (var i = 0; i < bin.length; i++) {
        buffer[i] = bin.charCodeAt(i);
    }
    var blob = new Blob([buffer.buffer], {type: type});

    var link = document.createElement("a");
    link.href = window.URL.createObjectURL(blob);
    link.download = download_file_name;
    link.click();
}

● pixi.js　Github STAR = ★26,036

https://github.com/pixijs/pixi.js canvasを使ったアニメーションが得意

● konva Github STAR = ★3,962

https://github.com/konvajs/konva

canvasをシンプルに扱えるライブラリ。

例えば画像を扱うにはこちらのメソッドを使用します。
https://konvajs.org/api/Konva.Image.html

● blueimp/JavaScript-Canvas-to-Blob

https://github.com/blueimp/JavaScript-Canvas-to-Blob

var canvas = document.createElement('canvas')
/* ... your canvas manipulations ... */
if (canvas.toBlob) {
  canvas.toBlob(function(blob) {
    // Do something with the blob object,
    // e.g. creating a multipart form for file uploads:
    var formData = new FormData()
    formData.append('file', blob, fileName)
    /* ... */
  }, 'image/jpeg')
}

● Javascript で ある値を配列から削除する (underscore.js を使う例）

myArray から 5 を削除した配列のリストを返します

var myArray = [1,2,3,4,5,6,7];
var del_no = 5;
myArray = _.without(myArray, del_no);

● Javascript で ある値を配列から削除する (jQuery を使う例）

myArray から 5 を削除した配列のリストを返します

var myArray = [1,2,3,4,5,6,7];
var del_no = 5;
var idx = $.inArray(del_no, myArray);
if(idx >= 0){
	myArray.splice(idx, 1); 
}

● flipsnap.js

(The MIT License) http://hokaccha.github.io/js-flipsnap/demo.html

● Swiper

The MIT License (MIT) http://idangero.us/swiper/demos/

● Flickity

シェアウェア（有償） https://flickity.metafizzy.co/

● Summernote で コピペするときに プレーンテキストでペーストする

https://github.com/DiemenDesign/summernote-cleaner

● インストール方法

1.

ダウンロードして、解答した中のファイル「summernote-cleaner.js」をsummernote.js が存在するディレクトリと同じディレクトリにコピーする

2.

<script src="/summernote/summernote-cleaner.js"></script>

● 画像ギャラリー , 画像ビューワー , 画像拡大

https://photoswipe.com/

https://fancyapps.com/fancybox/3/
商用利用は有料（$29）です。

● スクロールすると表示やアニメーション

lax.js

https://github.com/alexfoxy/lax.js?ref=producthunt

scrollreveal (商用は有料)

https://github.com/jlmakes/scrollreveal

● カレンダー

https://fullcalendar.io/

● エクセルのような表

https://handsontable.com/

● moment

https://github.com/moment/moment
日付・時刻・時間計算

● Mikhus/domurl ( url.min.js )

https://github.com/Mikhus/domurl
URL

● Underscore.js

https://underscorejs.org/
便利関数集

● HTMLリストを検索、ソートする ( list.js )

https://listjs.com/ すでにあるテーブルを検索、ソートしたい時に便利です。

● グラフ、チャート

APEXCHARTS
https://apexcharts.com/javascript-chart-demos/column-charts/

Chartjs
https://www.chartjs.org/

● 画面上部に通知を出す

https://github.com/jaredreich/notie

● 高機能ドロップダウンリスト

Select2

https://select2.org/

Select2 Tips

https://bit.ly/39ZMPuN

select2-dependent-cascading-select-list

http://ajaxray.com/blog/select2-dependent-cascading-select-list-reload/

Selectize ( jQuery )

https://github.com/selectize/selectize.js
タグ入力もできます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.js" crossorigin="anonymous"></script>
<script>$('#myselect').selectize();</script>

ui5-webcomponents

https://sap.github.io/ui5-webcomponents/playground/components/ComboBox/

Selectize ( Vue.js )

https://github.com/isneezy/vue-selectize

● 画像に注釈をつける marker.js

https://github.com/ailon/markerjs

● HOWLER.js

https://howlerjs.com/
オーディオ操作

● Socket.IO

https://socket.io/
ソケット

● jPList

https://www.jplist.org/
ソート、ページネーション、フィルタリング

● lightgallery.js

https://sachinchoolur.github.io/lightgallery.js/
画像ギャラリー

● JavaScriptでグラフを書くならこれ

https://apexcharts.com/

● ダイアログ（リサイズ、ドラッグ、スナップ、など）

https://interactjs.io/
https://daybrush.com/moveable/
https://www.cssscript.com/resizable-draggable-dialog/
https://jspanel.de/index.html

● 画像拡大

https://imgix.github.io/luminous/

# ● 画像スライダー https://haniwaman.com/swiper/#i-9

● JavaScript ライブラリ検索サイト

http://searchlibs.com/
http://microjs.com/

● ES Module 検索

https://www.pika.dev/

● jQuery ライブラリ検索サイト

https://www.jqueryscript.net/

● JavaScriptでWEBサイトからのプッシュ通知を行う（Edge, Chrome, Safari, Firefox）

function start_notification() {
    if ( ! window.Notification) { return false; }
    if (window.Notification.permission === 'denied' || window.Notification.permission === 'default' ) {
        window.Notification.requestPermission().then(function() {
            exec_notification();
        });
    } else {
        exec_notification();
    }
}

function exec_notification() {
    var notifyTitle = '通知タイトル通知タイトル通知タイトル通知タイトル通'; 		// 25文字まで表示される
    var notifyBody  = '通知内容のテストです通知内容のテストです通知内容のテス';	// 27文字まで表示される

    var options = {
        'body': notifyBody,
        // icon: notifyIcon
    }
    var n = new Notification(notifyTitle, options);
    setTimeout(n.close.bind(n), 5000);
}

start_notification();

● デモ

デモはこちら

● IE に対応するには

https://github.com/ttsvetko/HTML5-Desktop-Notifications

● javascriptでファイル名から拡張子を取り除く

function baseName(str)
{
   var base = new String(str).substring(str.lastIndexOf('/') + 1); 
    if(base.lastIndexOf(".") != -1)       
        base = base.substring(0, base.lastIndexOf("."));
   return base;
}

● 使い方

var filename = 'my-picture.jpg';
var basename = baseName( filename );
alert( basename );

結果

my-picture

無料のwysiwygエディタ

● blocknote

https://www.blocknotejs.org/

● jodit

https://xdsoft.net/jodit/examples/intergration/angular-jodit.html

● quilljs

https://quilljs.com/

● msx editor

https://github.com/mdx-editor/editor

● Trix

ライセンス MIT
商用利用OK
https://github.com/basecamp/trix
https://trix-editor.org/

● Trumbowyg

ライセンス MIT
商用利用OK
プラグイン多数あり
エクセルからテーブルをコピペできます

https://github.com/Alex-D/Trumbowyg
デモ: https://alex-d.github.io/Trumbowyg/

● Summernote

ライセンス MIT
商用利用OK
Bootstrap , Bootswatch 対応
エクセルからテーブルをコピペできます
https://github.com/summernote/summernote/

サンプルはこちら　https://github.com/summernote/summernote/blob/develop/examples/external-api.html
設定の参考　https://goo.gl/SnsVm9

プラグイン
https://eissasoubhi.github.io/summernote-bricks/
https://codepen.io/asiffermann/pen/EKvMMm
https://github.com/DiemenDesign/

テーマ https://github.com/DiemenDesign/summernote-themes

● SunEditor

https://github.com/JiHong88/SunEditor

スッキリした見た目のおすすめなエディタです。

Pasting from Microsoft Word and Excel.
Custom table selection, merge and split.
Media embeds, image uploads.
Can use CodeMirror.

● jodit

https://xdsoft.net/jodit/ ライセンス GNU GENERAL PUBLIC LICENSE Version 2,

● TOAST UI Editor

ライセンス MIT
商用利用OK
エクセルからテーブルをコピペできます
http://ui.toast.com/tui-editor

Markdown書式を自作できるようです
https://github.com/nhnent/tui.editor/blob/master/docs/writing-your-own-extension.md

● 有料のwysiwygエディタ

● CKEditor 4

ライセンス GPL or LGPL or MPL
商用利用有料
https://github.com/ckeditor/ckeditor-dev

● CKEditor 5

ライセンス GNU General Public License Version 2
商用利用有料
https://github.com/ckeditor/ckeditor5

● textbox

https://textbox.io/
ライセンス 非商用なら Creative Commons CC BY-NC-ND 4.0 license
商用利用有料

● imperavi Redactor

有料
デザインがGood
https://imperavi.com/redactor/

● stacks editor

https://editor.stackoverflow.design/
https://github.com/StackExchange/Stacks-Editor

● ScrollTrigger

https://github.com/terwanerik/ScrollTrigger
https://terwanerik.github.io/ScrollTrigger/

● 使い方

1. JavaScriptを読み込む

<script src="./ScrollTrigger.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
  var trigger = new ScrollTrigger();
});
</script>

2. アニメーションさせたい要素に data-scroll をつける

<div>テスト</div>

　↓

<div data-scroll>テスト</div>

これだけで、準備完了です。

・要素が画面内に入ってないときは class="invisible"
・要素が画面内に入ったときは class="visible"

が自動的につけられます。 クラス名を変更したい時は次のようにオプションを変更します

3-A. オプションを変更する（ 個別に設定する場合 ）

<div data-scroll="toggle(after, before)">テスト</div>

とすると、要素が出現した時に「.after」クラスがつけられます。

・要素が画面内に入ってないときは class="before"
・要素が画面内に入ったときは class="after"

3-B. オプションを変更する（ まとめて設定する場合 ）

document.addEventListener('DOMContentLoaded', function(){
  var trigger = new ScrollTrigger({
    toggle: {
      visible: 'cls-animate',
      hidden : 'cls-before_animate'
    },
    offset: {
      x: 0,
      y: 100
    },
    addHeight: true,
    once: true
  }, document.body, window);
});

4. アニメーションcssクラスを探す

アニメーション用のcssクラスを探して気に入ったのをつけます

● smooth-scroll

https://github.com/cferdinandi/smooth-scroll

1. 「data-scroll」をリンクにつける

<a href="#">ページの先頭へ戻る</a>

　　↓

<a href="#" data-scroll>ページの先頭へ戻る</a>

2. JS コードを追加する

<script src="./assets/js/smooth-scroll.polyfills.min.js"></script>
<script>var scroll = new SmoothScroll('a[href*="#"]');</script>

以上です。 カスタマイズは公式サイトのドキュメントに詳しく記述があります。

● javascriptで全てのチェックボックスにチェックを「つける」「外す」

・デモはこちら

https://pgmemo.tokyo/livedemo/all_checkbox_check/all_checkbox_check.html

javascript

function checkbox_all_check( _this, checkbox_name, form_name) {
	var check_flag = _this.checked;
	var form_dom;
	if ( form_name ){ form_dom = document[form_name]; }
	else{ form_dom = document.forms[0]; }

	if ( ! form_dom[checkbox_name] ){
		console.error( checkbox_name + ' という名前のチェックボックスが指定したフォーム内に存在しません' );
		return false;
	}

	for (var i = 0; i < form_dom[checkbox_name].length; i++) {
		form_dom[checkbox_name][i].checked = check_flag;
	}
}

html

<form name="FM" method="post">
		<label><input type="checkbox" id="data_all" onclick="checkbox_all_check(this, 'data_list[]','FM');">全てをチェック</label>
	<ul>
		<li><label><input type="checkbox" name="data_list[]" value="1"></label>データ1</li>
		<li><label><input type="checkbox" name="data_list[]" value="2"></label>データ2</li>
		<li><label><input type="checkbox" name="data_list[]" value="3"></label>データ3</li>
		<li><label><input type="checkbox" name="data_list[]" value="4"></label>データ4</li>
		<li><label><input type="checkbox" name="data_list[]" value="5"></label>データ5</li>
	</ul>
</form>

呼び出し方 1

checkbox_all_check(this, 'チェックボックスの name' ,);

例 :

checkbox_all_check(this, 'data_list[]');

呼び出し方 2 （フォームが複数ある場合）

checkbox_all_check(this, 'チェックボックスの name' ,'フォームのname' );

例 :

checkbox_all_check(this, 'data_list[]', 'FM');

● オブジェクトの配列をランダムにシャッフルする

function obj_array_shuffle(list) {
	for (var i = list.length - 1; i > 0; i--) {
		var j = Math.floor(Math.random() * (i + 1));
		if (i == j) continue;
		var k = list[i];
		list[i] = list[j];
		list[j] = k;
	}
	return list;
}

JavaScriptで普通に配列をコピーすると配列を参照渡しでコピーされます。 つまり、コピーした配列に何らかの操作をするとコピー前の配列も影響を受けます。 そこで、JavaScriptで配列を参照渡しではなく実際にコピーしたい時は次のようにするといいでしょう。

引用元 : https://byuzensen.com/javascript-object-pass-by-value

● JavaScriptで配列を参照渡しではなく実際にコピーする

var new_array = old_array.concat();

オブジェクトの場合は次のようにすると良いようです

● JavaScriptでオブジェクト（連想配列）を参照渡しではなく実際にコピーする

var new_obj = JSON.parse(JSON.stringify(old_obj));

JavaScript自体には厳格にに決まった命名規則は存在しないので各社独自の命名規則を設けています
その中でどの記法（ PascalCase , camelCase , snake_case ）が使用されているのかをざっくりまとめました

● Airbnb Javascript-style-guide

引用 : https://github.com/airbnb/javascript

・クラス名 : パスカルケース
・メソッド名 : キャメルケース
・プロパティ : キャメルケース
・定数 : キャメルケース
・exportされる定数 : すべて大文字

プライベートなプロパティ名は先頭にアンダースコア _ を使用してください。

● Felix's Node.js Style Guide

引用 : https://github.com/felixge/node-style-guide

・クラス名 : パスカルケース
・メソッド名 : キャメルケース
・プロパティ : キャメルケース
・定数 : すべて大文字

● Google

引用 : https://google.github.io/styleguide/javascriptguide.xml

・クラス名 : パスカルケース
・メソッド名 : キャメルケース
・プロパティ : キャメルケース
・定数 : すべて大文字

・private なプロパティ、メソッドには名前の末尾にアンダースコアをつけてください。
・protected なプロパティ、メソッドには（publicと同様に）末尾にアンダースコアをつけません。

だいたい基礎となる命名は同じですね。もっと細かく決められていますのでそれぞれのドキュメントをお読みください。

● JavaScriptの array.map

var myArray = ['A', 'B', 'C', 'D', 'E'].map(function(element, index, array) {
	console.log(element, index, array);
	return element+'X';
});

console.log( myArray );

結果（ブラウザの console に次のように表示されます）

A,  0,  ["A", "B", "C", "D", "E"]
B,  1,  ["A", "B", "C", "D", "E"]
C,  2,  ["A", "B", "C", "D", "E"]
D,  3,  ["A", "B", "C", "D", "E"]
E,  4,  ["A", "B", "C", "D", "E"]

 ["AX", "BX", "CX", "DX", "EX"]

デモはこちら

● v-if / v-else

<v-btn v-if="isPersistedUser" @click="showUpdate">更新する</v-btn>
<v-btn v-else                 @click="showCreate">追加する</v-btn>

● 変数の表示

<h1>※変数の表示</h1>
<div id="my_template">
<p>変数を出力します : {{ text }}</p>
</div>
<script>
new Vue({
  el  : '#my_template',
  data: {
    text: '日本語の文字です'
  }
});
</script>

● 選択

<h1>※選択</h1>
<div id="my_template_selected">
<select v-model="my_value_selected">
	<option value="">=== 選択してください ===</option>
	<option>A</option>
	<option>B</option>
	<option>C</option>
</select>
<span v-if="my_value_selected">{{ my_value_selected }}が選択されました。</span>
</div>
<script>
new Vue({
	el      : '#my_template_selected' ,
	data    : {
		my_value_selected: ''
	}
})
</script>

● データのループ

<h1>※データのループ</h1>
<div id="my_template2" v-if="view_flag">
<transition name="fade">
    <ul>
        <li v-for="(item, index) in my_loop">
            {{ index }} - {{ item }}
             <span v-if="index == my_loop.length - 1">last item</span>
        </li>
    </ul>
</transition>
</div>
<script>
new Vue({
  el: '#my_template2',
  data: {
    view_flag: true ,
    my_loop: [
      'ほげほげ',
      'フガフガ',
      'ほげふがほげふが'
    ]
  }
});
</script>

● 指定回数のループ

<h1>※指定回数のループ</h1>
<div id="my_template_loop" v-if="view_flag">
	<div v-for="n in 5" style="border:1px solid black;">
	    {{ n }}
	</div>
</div>
<script>
new Vue({
  el: '#my_template_loop',
  data: {
    view_flag: true ,
  }
});
</script>

● 表示のアニメーション

<h1>※表示のアニメーション</h1>
<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <h2 v-if="show">こんにちは！ Vue.js</h2>
  </transition>
</div>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0
}
</style>
<script>
new Vue({
  el  : '#demo',
  data: {
    show: false
  }
})
</script>

● 選択による表示の切り替え（リストメニュー選択時に引数を渡す）

<h1>※選択による表示の切り替え（リストメニュー選択時に引数を渡す）</h1>
<div id="my_template_change">
	<select v-model="my_value_selected" v-on:change="my_method(my_value_selected)">
		<option value="">=== 選択してください ===</option>
		<option value="2">2個表示</option>
		<option value="1">1個表示</option>
		<option value="0">表示しない</option>
	</select>
	<span v-if="my_value_selected">{{ my_value_selected }}が選択されました。</span>
    <div v-for="(item, index) in my_loop" style="border: 1px solid black;">
        {{ index+1 }} - {{ item }}
    </div>
</div>
<script>
var v = new Vue({
	el      : '#my_template_change' ,
	data    : {
		my_value_selected: '' ,
	    my_loop: [
	      '宛先01',
	      '宛先02',
	      '宛先03'
	    ]
	} ,
	methods:{
	    my_method: function (arg) {
	    	v.my_loop = [];
	    	for (var i = 0; i < arg; i++) {
				v.my_loop.push('HOGE'+arg)
	    	}
	    }

	}
})
</script>

● iMacros for Google chrome で htmlからマクロを動作させる

http://bit.ly/2nY6fYn

<html>
   <body onload="window.setTimeout('document.getElementById(\'criimlaunch\').click();', 1000);">
      <script>
         var macroCode = '';
         macroCode += 'PROMPT HELLO!\n';
         macroCode += 'URL GOTO=http://imacros.net/\n';
         macroCode += 'PROMPT BYE!\n';

         function launchMacro()
            {
            try
               {
                  if(!/^(?:chrome|https?|file)/.test(location))
                  {
                     alert('iMacros: Open webpage to run a macro.');
                     return;
                  }
			   
                  var macro = {}; 
                  macro.source = macroCode;
                  macro.name = 'EmbeddedMacro';
			   
                  var evt = document.createEvent('CustomEvent');
                  evt.initCustomEvent('iMacrosRunMacro', true, true, macro);
                  window.dispatchEvent(evt);
               }
            catch(e)
            {
               alert('iMacros Bookmarklet error: '+e.toString());
            };
         }
      </script>

      <a id="criimlaunch" href="javascript:launchMacro();">Launch CR iMacros</a>

   </body>
</html>

document.createEvent('CustomEvent');

でイベントを作成し発火させています。

https://developer.mozilla.org/ja/docs/Web/API/Document/createEvent

参考 : http://toolmania.info/post-8421/

オンラインでjavascript 難読化するには下記のようなサイトがあります。

● Javascript Obfuscator

https://javascriptobfuscator.com/Javascript-Obfuscator.aspx

● jjencode

http://utf-8.jp/public/jjencode.html

● aaencode

http://utf-8.jp/public/aaencode.html

● /packer/

http://dean.edwards.name/packer/

● JSFuck

http://www.jsfuck.com/

● 【emoji表示ライブラリその1】jQueryEmoji による絵文字の表示

表示したい絵文字を、Aopple絵文字、Twitter絵文字、Microsoft絵文字から選択できます。
https://github.com/rodrigopolo/jqueryemoji
デモ : https://rodrigopolo.github.io/jqueryemoji/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/jQueryEmoji.js"></script>
<link href="css/style.css" rel="stylesheet">

<script>
$(function(){
    $('p').Emoji({
        path:  '/emoji/jqueryemoji/img/apple72/',
        class: 'emoji',
        ext:   'png'
    });
});
</script>

● 【emoji入力ライブラリその1】wedgies/jquery-emoji-picker による絵文字の入力

https://github.com/wedgies/jquery-emoji-picker

デモ : http://wedgies.github.io/jquery-emoji-picker/demo.html

使い方

<link rel="stylesheet" type="text/css" href="./jquery-emoji-picker/css/jquery.emojipicker.css">
<link rel="stylesheet" type="text/css" href="./jquery-emoji-picker/css/jquery.emojipicker.a.css">
<script type="text/javascript" src="./jquery-emoji-picker/js/jquery.emojipicker.js"></script>
<script type="text/javascript" src="./jquery-emoji-picker/js/jquery.emojis.js"></script>
<script>
$(document).ready(function(){
	$('.emoji').emojiPicker({
	height: '300px',
	width:  '450px'
	});
});
</script>

inputタグを下記のように変更します。

<input type="text">

　　↓

<input type="text" class="emoji">

● 【emoji入力ライブラリその2】OneSignal/emoji-picker による絵文字の入力

https://github.com/OneSignal/emoji-picker
デモ : http://onesignal.github.io/emoji-picker/

特徴

• ＜input type="text"＞ タグの上の表示用レイヤーを作成するのでブラウザによる見え方の違いがありません。
• 上記理由により動的に入力タグのサイズを変更するスクリプトとは相性が良くないです。

・使い方

<link  href="{$config.root_uri}/emoji-picker/lib/css/nanoscroller.css" rel="stylesheet">
<link  href="{$config.root_uri}/emoji-picker/lib/css/emoji.css" rel="stylesheet">

<script src="{$config.root_uri}/emoji-picker/lib/js/nanoscroller.min.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/tether.min.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/config.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/util.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/jquery.emojiarea.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/emoji-picker.js"></script>

<script>
$(function() {
  window.emojiPicker = new EmojiPicker({
    emojiable_selector: '[data-emojiable=true]',
    assetsPath        : './lib/img/',
    popupButtonClasses: 'fa fa-smile-o' ,
    xoffset : 500 ,
  });
  window.emojiPicker.discover();
});
</script>

inputタグを下記のように変更します。

<input type="text">

　　↓

<input type="text" data-emojiable="true">

jQueryが使えない環境やメモリ的にjQueryを使用したくない場合のDOMセレクターにJavaScriptのquerySelectorがとても便利に使えます。

jQueryが使えないiMacros環境でも使用できます。

querySelector()  : セレクターに最初の要素ひとつを返す
querySelectorAll() : セレクターに合致した全ての複数の要素を返す。（DOMオブジェクトの配列で返る）

● JavaScript クエリセレクタの使い方例

・ID・クラス名で指定

window.document.querySelector("#my_id");
window.document.querySelector(".my_class");
window.document.querySelector([class='my_class']);

・その他いろいろな指定方法

window.document.querySelector("input[type='checkbox']");
window.document.querySelector("table[class='shipInfo'] tr td:nth-of-type(1)");
window.document.querySelector("tr > td");
window.document.querySelectorAll(".my_class");

・残念ながら使えない指定方法（文字列●●●を含む要素）

window.document.querySelector( 'tag:contains("●●●")' );

↑これは使用できません。 （Xpathなら取得できるのですが）

・xpathとクエリセレクタの変換

http://bit.ly/2b5BzLI
http://bit.ly/2bht2by

Google Chromeの起動

 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome  --enable-memory-info

	console.log( performance.memory );

jsHeapSizeLimit: 使用可能なJavaScriptヒープのメモリサイズ(bytes) totalJSHeapSize: その内、既に割り当てられたメモリサイズ(bytes) usedJSHeapSize: その内、現在使用中のメモリサイズ(bytes)

参考 : http://bit.ly/28nfmBW

■ cryptoJS

https://www.npmjs.com/package/crypto-js

● 1. インストール

npm install crypto-js

● 2. AES暗号化復号化のテスト

ファイル名 : test_node_aes.js

var AES = require("crypto-js/aes");
var CryptoJS = require("crypto-js");
// 暗号化キー
var txt_key = "0123456789ABCDEF0123456789ABCDEF";
// 暗号化したい元データ
var txt_plain = "元テキストです。";
console.log('txt_plain: ' + txt_plain);
var utf8_plain = CryptoJS.enc.Utf8.parse(txt_plain);
// 暗号化
var encrypted = CryptoJS.AES.encrypt( utf8_plain, txt_key );
var encrypted_strings = encrypted.toString();
console.log('encrypted_strings: ' + encrypted_strings);

// 復号化
var decrypted = CryptoJS.AES.decrypt(encrypted_strings, txt_key);
var decrypted_strings = decrypted.toString(CryptoJS.enc.Utf8);
console.log('decrypted_strings: ' + decrypted_strings);

● 3. 実行

node test_node_aes.js

● 4. 結果

txt_plain: 元テキストです。
encrypted_strings: U2FsdGVkX1+VR07vpJ+z0oKnSjrz0bT7uD3/lDdFgfhZI9HnlM8XKUEMusvCWKGQ
decrypted_strings: 元テキストです。

● sweet-scroll.js

http://webdesign-dackel.com/2015/12/17/sweet-scroll/

• MIT ライセンス
• 動作が軽快
• 他の JavaScriptライブラリに依存しない
• 設置も超カンタン
• webpackやbrowserify対応
• スムーズスクロール（イージング）対応

のことから使わない理由がみつかりません。おすすめです。

単独で使用するには

<script src="sweet-scroll.min.js"></script>

で読み込んで

const sweetScroll = new SweetScroll({
});

で、実行。簡単です。

オプションも豊富です

{
 trigger: "[data-scroll]",       // トリガーとなる要素をCSSセレクタで指定
  header: "[data-scroll-header]", // 固定ヘッダをCSSセレクタで指定
  duration: 1000,                 // アニメーション再生時間のミリ秒
  delay: 0,                       // アニメーション開始までの遅延ミリ秒
  easing: "easeOutQuint",         // イージングのタイプ
  offset: 0,                      // スクロール位置のオフセット
  verticalScroll: true,           // 垂直方向のスクロールを許可
  horizontalScroll: false,        // 水平方向のスクロールを許可 (デフォルトでは無効)
  stopScroll: true,               // ホイール・タッチイベントが発生した時にスクロールを停止
  // call back function
  beforeScroll: null,             // スクロールが始まる前 (return falseでキャンセル可)
  afterScroll: null,              // スクロールが終わった時
  cancelScroll: null              // スクロールがキャンセルされた時
}

● lazysizes.js

https://github.com/aFarkas/lazysizes

画像を画面に表示される直前に読み込む lazysizes.js 軽量でjQueryも必要ありません。

<script src="/js/lazysizes.min.js" async=""></script>

CDNで読み込むには　 https://cdnjs.com/libraries/lazysizes
こちらから取得します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js" integrity="sha512-TmDwFLhg3UA4ZG0Eb4MIyT1O1Mb+Oww5kFG0uHqXsdbyZz9DcvYQhKpGgNkamAI6h2lGGZq2X8ftOJvF/XjTUg==" crossorigin="anonymous"></script>

背景画像を遅延読み込みするには下記のようにします。

lazysizes.js は クラス名「lazyload」が付いたエレメントがブラウザに表示される直前に画像を読み込みクラス名を「lazyloaded」に変更します。
なので、

html側 : クラス名「lazyload」
css側 : クラス名「lazyloaded」

で処理をすればokです。

html

<div class="my-image-001 lazyload">test</div>

css

  .my-image-001.lazyloaded {
    background-image: url("my001.jpg");
  }

● lazysize.js で画像を読み込み時にフェードインさせる

cssに以下を記述して読み込ませます

.lazyload, .lazyloading {
    opacity: 0;
}
.lazyloaded {
    opacity: 1;
    transition: opacity 1000ms;
}

● 1. velocity.jsの読み込み（jQueryは読み込まなくても可能ですが、共存することもできます）

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.js"></script>

● 2. velocity.js のアニメーション記述

省略記法で記述する例

.velocity( 変形させたいパラメータ,（ハッシュ） アニメーション時間（ms）, オプション（ハッシュ）,  終了時実行関数（関数） )

例1：

$('#menu').velocity({
  opacity    : [ 1, 0 ],
  translateY : [ 0, -50 ]
},600,{ easing: "easeOutCirc" } ,
function(){ console.log("complete !!");  }
);

例2：opacity と translateY それぞれに違うイージングをかけたい場合

$('#menu').velocity({
  opacity    : [ 1, 'easeInQuart', 0 ],
  translateY : [ 0, 'easeOutQuart', -50 ]
},2000);

● 3. velocity.js の連続アニメーションの記述例

3つのアニメーションを連続して動かします。

$('#menu')
.velocity( { opacity: [ 1, 0 ], translateX: [ -30, 1250 ] },600, { easing: "easeOutCirc" } )
.velocity( { translateY: 10 }, 200 )
.velocity( { translateY: 0 }, 200 );

● 4. 複数の要素に対して順番にアニメーションを動作させる記述例

.velocity.ui を追加で読み込ませます。

  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script>

Velocity.RegisterEffect でアニメーションを定義して velocityで呼び出します。
stagger が1つ１つの要素を順番にアニメーションしていく際の待ち時間になります。

  $.Velocity.RegisterEffect("trans.my_effect", {
    defaultDuration: 500,
    calls: [[ { opacity: [1,0],  scaleX:[ 1, 0.1 ], scaleY:[ 1, 0.1 ] }, 1.00, { easing: "easeOutCirc" } ]] 
  })

  $('#menu li').css({opacity:0}).velocity("trans.my_effect", {
    easing  : 'ease-in-out',
    duration: 1000,
    stagger : 150
  });

● 5. さらに複雑なアニメーションを記述するには

複雑なアニメーションとそれに伴う処理を簡潔に書くことのできるライブラリ vq を作った

毎年変更するのが面倒なCopyrightの今年の年をJavaScriptで表示させる

2024をJavaScriptで表示

<script>document.write(new Date().getFullYear());</script>

　↓

2024

よくあるコピーライトをJavaScriptで表示

© <script>document.write(new Date().getFullYear());</script> hogehoge.com

　↓

© 2024 hogehoge.com 

● 今年の年を表示させるWebComponentsを作る

my-copyright.js

class MyCopyrightElement extends HTMLElement {
    static observedAttributes = ['text'];
    connectedCallback() {
        const text = this.getAttribute('text');
        this.innerText = `Copyright ©${new Date().getFullYear()} ${text}`;
    }
}
customElements.define('my-copyright', MyCopyrightElement);

html

  <my-copyright text="株式会社 テストテストカンパニー"></my-copyright>
  <script src="my-copyright.js"></script>

↓ このように表示されます

Copyright ©2022 株式会社 テストテストカンパニー

「このウィンドウはx秒後に自動的に閉じられます」と表示してカウントダウンしていくやつ。

<pre>
このウィンドウは <span id="close_button_count"></span>秒 後に自動的に閉じられます。
</pre>
<script>
close_count_down(5);
function close_count_down(sec){
	if (sec <= 0){ window.close(); }
	document.getElementById('close_button_count').innerHTML = sec;
	setTimeout( function() {
			close_count_down(sec-1);
	}, 1000 );
}
</script>

jquery.autoKana.js https://github.com/harisenbon/autokana

<form>
<input type="text" id="user_name">
<input type="text" id="kana_name">
</form>

<script src="./jquery.autoKana.js"></script>
<script>
$(function() {
    $.fn.autoKana('#user_name', '#kana_name', {
        katakana : true  //true：カタカナ、false：ひらがな（デフォルト）
    });
});
</script>

jQuery（JavaScript）でRetina対応ディスプレイかどうか判別して、出力する画像（プリロードする先読み画像）の種類を分けたい時があります。

JavaScriptのみで対応可能です。 以下のように判別します。

var retinaCheck = window.devicePixelRatio;
if(retinaCheck >= 2) {
	alert('retina対応ディスプレイです。');
}

● clipboard.js

https://zenorocha.github.io/clipboard.js/

このclipboard.jsは Flashを使用しません。 そのかわり Safari には未対応となっています。

● 使い方

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
<script>
$(function () {
var clipboard = new Clipboard('.clip_copy_btn');
});
</script>

<input type="text" id="clip_copy_1" value="XXXXX">
<button class="clip_copy_btn" data-clipboard-target="#clip_copy_1" >クリップボードにコピーする</button>

です。

■ YOU MIGHT NOT NEED JQUERY http://youmightnotneedjquery.com

例えばjQueryで `fadeIn()` を使用したかったらJavaScriptのみでこのように書けばいいよ、を教えてくれます。

JavaScriptで配列の要素数を取得するには（ .length ）

var ar = [111,222,333];
console.log(ar.length);    // 3

JavaScriptでオブジェクトの要素数を取得するには（ Object.keys(オブジェクト名).length ）

var obj = {
  a: 111 ,
  b: 222
};
console.log( Object.keys(obj).length );    // 2

とします。

● Dropzone.jsを使ってドラッグ&ドロップアップロード + 進捗バー

ファイルアップロードシステムを作るには Dropzone が簡単で便利です。 以下の様な特徴があります。

・jQueryを必要としない。（共存可能です。以下の例ではjQueryと併用します。）
・ドラッグ&ドロップでファイルアップロードが行える
・非同期でファイルアップロードが行える
・ファイルアップロード中の進捗バーを表示することが出来る

使い方は簡単です。

1. ファイルのダウンロード と用意

必要なファイルは

dropzone.js （ダウンロード）
dropzone_config.js （自分で作成）
dropzone_upload.php （自分で作成）
dropzone.css （自分で作成）

です。

・ dropzone.js

https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js （ .jsファイル）
からダウンロードして保存します。

・ dropzone_config.js

dropzone_config.jsは以下のように作成しておきます （※要追加） のところは適宜追加すること。

$(document).ready(function() {
$('#image_drop_area').dropzone({
	url                          : './js/dropzone_upload.php',
	paramName                    : 'file',
	maxFilesize                  : 999 , //MB
	addRemoveLinks               : true ,
	previewsContainer            : '#preview_area' ,
	thumbnailWidth               : 50 , //px
	thumbnailHeight              : 50 , //px
	dictRemoveFile               :'[×]' ,
	dictCancelUpload             :'キャンセル' ,
	dictCancelUploadConfirmation : 'アップロードをキャンセルします。よろしいですか？' ,
		uploadprogress:function(file, progress, size){
		file.previewElement.querySelector("[data-dz-uploadprogress]").style.width = "" + progress + "%";
	},
	success:function(file, rt, xml){
		// それぞれのファイルアップロードが完了した時の処理（※要追加）
		file.previewElement.classList.add("dz-success");
		 $(file.previewElement).find('.dz-success-mark').show();
	},
	processing: function(){
		// ファイルアップロード中の処理（※要追加）
	} ,
	queuecomplete: function(){
		// 全てのファイルアップロードが完了した時の処理（※要追加）
	} ,
	dragover: function( arg ){
		$('#' + arg.srcElement.id).addClass('dragover');
	} ,
	dragleave: function( arg ){
		$('#' + arg.srcElement.id).removeClass('dragover');
	} ,
	drop: function( arg ){
		$('#' + arg.srcElement.id).removeClass('dragover');
	} ,
	error:function(file, _error_msg){
		var ref;
		(ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
	},
	removedfile:function(file){
		delete_hidden('dropzone_files[]',file.xhr.response);
		var ref;
		(ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0;
	} ,
	canceled:function(arg){
	} ,
	previewTemplate : "\
	<div class=\"dz-preview dz-file-preview\">\n\
	  <div class=\"dz-details\">\n\
	    <div class=\"clearfix\">\n\
	      <img class=\"dz-thumbnail\" data-dz-thumbnail>\n\
	      <div class=\"dz-success-mark\" style=\"display:none;\"><i class=\"fa fa-2x fa-check-circle\"></i></div>\n\
	    </div>\n\
	    <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n\
	    <div>\n\
	      <div class=\"dz-filename\"><span data-dz-name></span></div>\n\
	      <div class=\"dz-my-separator\"> / </div>\n\
	      <div class=\"dz-size\" data-dz-size></div>\n\
	      <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n\
	    </div>\n\
	  </div>\n\
	</div>\n\
	"
});
});

・ dropzone_upload.php

dropzone_upload.phpは以下のように作成しておきます

<?php
$ds = DIRECTORY_SEPARATOR;
$store_folder = dirname(__FILE__) . $ds . '..' . $ds . 'data' . $ds . 'tmp' . $ds;
// echo $store_folder;
if (!empty($_FILES)) {
	$temp_file = $_FILES['file']['tmp_name'];
	$ext = get_ext($_FILES['file']['name']);	// ファイル名から拡張子を取得
	$target_file = basename($_FILES['file']['tmp_name'].$ext);
	$ja_file     = $_FILES['file']['name'];
	$target_file_fullpath =  $store_folder . $target_file;
	umask(0);									// 権限（パーミッション）を厳格にしたい時はこちらを変更
	move_uploaded_file($temp_file, $target_file_fullpath);
	echo "{$target_file}\t{$ja_file}";		// 英語ファイル名[TAB]日本語ファイル名　を返す
}

//========== _get_ext mime-typeを調べて拡張子を返す
function get_ext($file_name){
	$p = pathinfo($file_name);
	if ( isset($p['extension']) ){
		return '.'.$p['extension'];
	}
	else{
		return '';
	}
}

・ dropzone.css

dropzone.cssは以下のように作成しておきます

#image_drop_area {
	text-align: center;
	padding: 20px 0;
	height: 70px;
	width: 100%;
	color: #666;
	background-color: #f9f9f9;
	border: 4px dotted #bbb;
}
.dragover {
	color: #111               !important;
	background-color: #f1f1f1 !important;
	border: 4px dotted #777   !important;
}
.dz-preview {
	margin: 5px 0;
	padding: 10px;
	float: left;
	background-color: #F5F5F5;
	border-radius: 5px;
}
.dz-details {
	padding: 0;
}
.dz-filename , .dz-size, .dz-my-separator , .dz-remove {
	font: 11px "Lucida Grande", Lucida, Verdana, sans-serif;
}
.dz-filename , .dz-my-separator, .dz-size , .dz-error-message {
	float: left;
}
.dz-my-separator {
	width: 20px;
	text-align: center;
}
.dz-size {
	margin-top: 1px;
}
.dz-progress {
	width: 500px;
}
.dz-progress .dz-upload {
	display: block;
	border: 5px solid #1E9BFF;
	border-radius: 2px;
}
.dz-remove {
	float: left;
	margin-left: 5px;
}
.dz-thumbnail {
	margin-bottom: 3px;
}
.fa-check-circle:before {
	color: #93C54B;
}
.dz-thumbnail , .dz-success-mark {
	display: block;
	float: left;
}
.dz-success-mark {
	height: 25px;
	margin-left: 5px;
}

2. htmlファイルからdropzoneを読み込み

（formタグのactionは dropzone_upload.phpである必要はありません。通常のフォーム送信CGIでOKです。）

<html>
<head>
<meta charset="UTF-8">
<title>dropzone test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dropzone.js"></script>
<script src="dropzone_config.js"></script>
<link href="dropzone.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form action="XXXXXX.XXX">
    <div id="image_drop_area" >ここにアップロードファイルをドロップ</div>
    <div id="preview_area" class="dropzone-custom"></div>
</form>
</body>
</html>

以上です。

JavaScriptを使って長すぎる文字列を指定バイト数で切り取って「...続きを読む」みたいにするには以下のようにします。

function substr(text, len, truncation) {
  if (truncation === undefined) { truncation = ''; }
  var text_array = text.split('');
  var count = 0;
  var str = '';
  for (i = 0; i < text_array.length; i++) {
    var n = escape(text_array[i]);
    if (n.length < 4) count++;
    else count += 2;
    if (count > len) {
      return str + truncation;
    }
    str += text.charAt(i);
  }
  return text;
}

使い方

var text = '長い長い日本語の文字列。English English English ';
var text2 = substr(text, 10, '...続きを読む');
alert('text2:' + text2);

JavaScriptでIDやタグ（DOMオブジェクト）を取得するとき

jQueryを使わないJavaScript本体では ・getElementsByTagName ・getElementsByName ・getElementById の3つのメソッドが使用できます。

DOMオブジェクト取得時には取得の成否を判別する必要があります。

使い方は以下のとおりです。

■ document.getElementsByTagName（タグ名によるDOMオブジェクトの取得）

<a href="#">テスト</a>

var obj_array = window.document.getElementsByTagName('a');
if (obj_array.length > 0){
  alert('Aタグは存在します。');
  for ( var i=0; i<obj_array.length; i++){
	  alert(obj_array[i].innerText);
  }
}
else{
  alert('Aタグは存在しません。');
}

■document.getElementsByName（name属性によるDOMオブジェクトの取得）

<input type="text" name="hoge_name">

if (window.document.getElementsByName("hoge_name").length > 0){
  alert('name="hoge_name"のタグが存在します。');
}
if (window.document.getElementsByName("fuga_name").length > 0){
  alert('name="fuga_name"のタグが存在します。');
}
else{
  alert('name="fuga_name"のタグが存在しません。');
}

■document.getElementById（ID名によるDOMオブジェクトの取得）

<div id="hoge_id"></div>

if (window.document.getElementById("hoge_id")){
  alert('id="hoge_id"のタグが存在します。');
}
if (window.document.getElementById("fuga_id")){
  alert('id="hoge_id"のタグが存在します。');
}
else{
  alert('id="hoge_id"のタグが存在しません。');
}

『Sisyphus.js』はフォームへの入力途中に「戻るボタン」を押して画面遷移した場合や「リロード」ボタンを押した時に自動的に値をローカルDBに保存して復元してくれるjQueryプラグインです。

HTML5のローカルDBを使用しますので Windows IE は 8以上が必要です。 それ以外のモダンブラウザは全て問題なく動作します。

■ Sisyphus.js

http://sisyphus-js.herokuapp.com/

■ 使い方（ input type="hidden" 以外の全てのフォームを自動で記憶する。）

<form id="FM">
</form>

$(function(){
	$( "#FM" ).sisyphus( {
		locationBased: false,
		excludeFields: $('input[type="hidden"]'),
		autoRelease: false
	} );
});

IE8以下で JavaScriptで console.log() を記述しているとエラーとなってしまいます。 そこでIE8以下でもとりあえずエラーが出ないようにする対策

対策1. consoleオブジェクトがあるかどうかを調べてから console.log() を使用する

console.log( my_obj);

　　↓ このように変更する。

if(console && console.log) { console.log( my_obj); }

対策2. 何もしない空のconsoleオブジェクトを作成する

(function () {
    if (typeof window.console === "undefined") {
         window.console = {}
    }
    if (typeof window.console.log !== "function") {
         window.console.log = function () {}
    }
})();

引用 : http://goo.gl/czcLY3

・コメントアウト【 .iim ファイル】

' 先頭がクォーテーションはコメントと見なされます
' コメント 
' コメント

・2秒間ウェイトする（待つ）【 .iim ファイル】

WAIT SECONDS=2

・全てのコマンド実行時に x秒間ウェイトする（待つ）【 .iim ファイル】

SET !REPLAYSPEED SLOW
SET !REPLAYSPEED MEDIUM
SET !REPLAYSPEED FAST

SLOW　　 :　2秒待つ
MEDIUM　:　1秒待つ
FAST　　  :　0秒待つ（待たない。）

・コマンドライン（URL,検索バー）からの実行

マクロ「mymacro.iim」を実行します。

 imacros://run/?m=mymacro.iim

実は拡張子 .js のマクロも実行できます

 imacros://run/?m=mymacro.js

フォルダ「myfolder」の中に入った「mymacro.iim」を実行するには「/」を「%5C」で置き換えます

 imacros://run/?m=myfolder%5Cmymacro.iim

Aタグを使ってHTMLから起動することもできます

<a href="imacros://run/?m=myfolder%5Cmymacro.iim">マクロ起動</a>

・JavaScriptからのマクロ実行【 .js ファイル】

var test;
test = "CODE:";
test += "URL GOTO=www.google.com \n";
var rt = iimPlay(test);
alert(rt); // 1 以下の時エラー

・iMacrosの .js からDOMオブジェクトを操作する【 .js ファイル】

window.content.document.getElementById("xxx");

・iMacrosの .js からconsole.log で出力する【 .js ファイル】

window.console.log( 'TEST!!!' );

・iMarcorsにエラーがあった時に止まらないようにする

SET !ERRORIGNORE YES

・iMacrosの1命令ごとのタイムアウトを設定する

（ステップごとのタイムアウトを 2秒 に設定する）

SET !TIMEOUT_STEP 2 

・重いページを読み込む時にページの読み込みを待たない

（ページ読み込みのタイムアウトを 1秒 に設定する）

SET !TIMEOUT_PAGE 1

・フォームの入力テキストにスペースを入力する

（スペースの代わりに <SP> を入力します。）
TAG POS=1 TYPE=INPUT:TEXT FORM=ACTION:myform.php ATTR=* CONTENT=日本語<SP>太郎

・XPathで要素を指定してクリックする

普通に xpath が使えます （xpath式はダブルクォーテーションで囲むこと）

 TAG XPATH="//*[@id='my_id']/tr/td[3]/div/a"

・target="_blank" のリンクでウィンドウを開くとタブ番号がおかしくなる

firefoxで新規ウィンドウをタブで開く場合 target="_blank" をマクロで踏むとタブ番号がおかしくなりその後のマクロでエラーが出ることがあります。 この場合はリンクを押す代わりにリンク先を取得して imacros で画面遷移しましょう

・iMacrosでスクリーンショットを撮る

http://qiita.com/nori4k/items/2e55bc346062d5c490b8

リファレンス http://imacros.doorblog.jp

iMacrosではマクロ内で変数 （VAR1 〜 VAR9）が使用できます。
が、そもそもJavaScriptも使用できるので変数を使用したい場合はJavaScriptで扱うのもいいと思います。

iMacrosで変数を扱うサンプル ( imacros_debug.html )

表示用のHTMLページを用意してどこかのサーバにアップしておきます

<html lang="ja">
<head>
<meta charset="utf-8">
<title>iMacros debug</title>
</head>
<body>
<form action="test.cgi" name="FM">
!VAR1 : <input type="text" name="var1" id="var1" size="30"><br>
!VAR2 : <input type="text" name="var2" id="var2" size="30"><br>
!VAR3 : <input type="text" name="var3" id="var3" size="30"><br>
</form>
</body>
</html>

iMacrosで変数を扱うサンプルマクロ（拡張子は .js で使用すること） ( set_var.js )

ページ xxxx.xxxx.com/imacros_debug.html を開いてその中のフォームに変数を代入します。

var test;
test = "CODE:";
test += "URL GOTO=xxxx.xxxx.com/imacros_debug.html "+"\n";
test += 'SET !VAR1 "テスト　太郎"' + " \n";
test += 'SET !VAR2 "てすと　たろう"' + " \n";
test += 'SET !VAR3 "000-111-2222"' + " \n";
test += "TAG POS=1 TYPE=INPUT:TEXT FORM=NAME:FM ATTR=NAME:var1 CONTENT={{!VAR1}} \n";
test += "TAG POS=1 TYPE=INPUT:TEXT FORM=NAME:FM ATTR=NAME:var2 CONTENT={{!VAR2}} \n";
test += "TAG POS=1 TYPE=INPUT:TEXT FORM=NAME:FM ATTR=NAME:var3 CONTENT={{!VAR3}} \n";
iimPlay(test);
alert('imacrosで変数をフォームに代入しました');

test2 = "CODE:";
test2 += "URL GOTO=xxxx.xxxx.com/imacros_debug.html "+"\n";
iimPlay(test2);
window.document.getElementById("var1").value = 'ジャヴァ　スクリプト';
window.document.getElementsByName("var2")[0].value = 'じゃば　すくりぷと';
window.document.getElementsByName("var3")[0].value = '000-999-8888';
alert('JavaScriptで変数をフォームに代入しました');

Firefox（やChrome）を立ち上げ、そこからiMacrosを立ち上げてそこから set_var.js を起動すると、1回目はマクロでフォームに変数を代入します。2回目はJavaScriptで代入します。

HTML5のプレースホルダー（placeholder : 入力例）はブラウザによって挙動が違うためイマイチ使い勝手がよくありません。
そこでjQueryで同様のことを実現します。
さらに、フォーカス時に入力例が消えて、フォーカスが外れると入力例が再び表示される仕様にします。

■ 動作デモはこちら

HTML

<div style="position:relative;" >
<input type="text" class="placeholder_check">
<span class="placeholder">http://</span>
</div>

JS

$(function(){
$(".placeholder_check").each(function(){
if( $(this).val() ){
  $(this).next(".placeholder").hide();    
}
});
$(".placeholder_check").focus(function(){
  $(this).next(".placeholder").hide();
});
$(".placeholder").click(function(){
  $(this).prev(".placeholder_check").focus();
});
$(".placeholder_check").blur(function(){
  if($(this).val() == "") {
    $(this).next(".placeholder").show();
  }
});
});

CSS

.placeholder {
	display: block;
	white-space:pre;
	position: absolute;
	top: 9px;
	left: 30px;
	color: #bbb;
}

参考 : http://hack.aipo.com/?p=3005

JavaScript(jQuery)でギターのタブ譜を表示するライブラリ。以下のようなものがありました

vexflow

http://www.vexflow.com

gregjopa/HTML5-Guitar-Tab-Player

https://github.com/gregjopa/HTML5-Guitar-Tab-Player
タブ譜と五線譜が両方表示されます。
再生ボタンを押して演奏することもできます。

HTML5 Guitar Tab Player

http://www.codeproject.com/Articles/834206/HTML-Guitar-Tab-Player
旋律用ギタータブ譜。再生ボタンを押して演奏することもできます。

acspike/ChordJS

https://github.com/acspike/ChordJS
ギターコードの指板画像を表示する。

● jQuery Validation Plugin

http://jqueryvalidation.org

● 日本語での解説

http://kudakurage.hatenadiary.com/entry/20091211/1260521031

● スクリプトの読み込み

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js

● 用意するHTML

<form name="FM">
<input type="text" name="hoge">
<input type="text" name="fuga">
</form>

● バリデーションの定義

$("#FM").validate({
	rules: {
		hoge: {
			required: true
		} ,
		'fuga': {
			required: true
		} 
	} ,
	messages: {
		hoge: {
			required: '入力してください。'
		} ,
		'fuga': {
			required: '入力必須項目です。'
		} 
	}
});

● 標準搭載されているバリデーションメソッド

required – Makes the element required.
remote – Requests a resource to check the element for validity.
minlength – Makes the element require a given minimum length.
maxlength – Makes the element require a given maxmimum length.
rangelength – Makes the element require a given value range.
min – Makes the element require a given minimum.
max – Makes the element require a given maximum.
range – Makes the element require a given value range.
email – Makes the element require a valid email
url – Makes the element require a valid url
date – Makes the element require a date.
dateISO – Makes the element require an ISO date.
number – Makes the element require a decimal number.
digits – Makes the element require digits only.
creditcard – Makes the element require a credit card number.
equalTo – Requires the element to be the same as another one

● 正規表現のバリデーションメソッドを追加する

$.validator.addMethod("myregex", function(value, element, reg_str) {
	var re = new RegExp(reg_str);
	return re.test(value);
}, "入力値が正しくありません");

バリデーション定義に以下のように記述

rules: {
	postal: {
		myregex: '^[0-9\-]+$'
	}
} ,
messages: {
	postal: {
		myregex: '郵便番号を正しく入力してください。'
	}
}

● バリデーションのルールを追加するには関数を定義します

jQuery.validator.addMethod('my_validation_func', function(value, element) {
	if ( XXXXX ){		// XXXXX にエラー判別ロジックを記述
			return true;	// trueが返るとエラーとならない
		}
	else{
		return false;	// falseが返るとエラー
	}
}, 'デフォルトのエラーメッセージ');

● エラー時にエラーのあったフォーム要素自身にエフェクトをかける

$("#FM").validate({
  highlight: function(element, errorClass) {
     $(element).fadeOut(function() {
       $(element).fadeIn()
     })
  }
});

● フォームのハイライトを中止する

標準ではエラー時にフォーム要素に error というクラスが付加されますが、これがいらない場合は 空のfunction() を定義します。

$("#FM").validate({
    highlight: function(element, errorClass) {
    }
});

● 任意のタイミングでバリデーションを実行する

バリデーションの実行タイミングは ・フォーム Submit時 ・エラー後のフォーム内容変更時 ですが、任意のタイミングでバリデーションを実行するには valid()メソッドを実行すればOK。

<form id="FM">
$("#FM").valid();

● 特定のボタンが押された時など任意のタイミングでvalidationを停止する

$("#FM").validate().cancelSubmit = true;

● バリデーション required 条件の条件分岐1

下記のようにすると id="foo" のラジオボタンやチェックボックスがチェックされている時にだけバリデーションを行います

rules: {
  my_name : { required: '#foo:checked' } 
} ,

次のような指定方法があります

● バリデーション required 条件の条件分岐2

rules: {
  my_name : { required: function() { return ($('#my_flg').val() === '1' ); } } 
} ,
messages: {
  my_name: { required: 'my_flgが『1』の時はmy_nameは空欄にはできません' } 
}

● フォームが送信され、バリデーションが実行され、その結果がOKだった場合に処理を行う

例 : #submit_button を非活性にします。

  submitHandler: function(form) {
    // ボタンを非活性
    $('#submit_button').prop('disabled', true);
    form.submit();
   }

● 複数あるテキストの全てが空の場合にエラーを出す

・やり方 1.（フォームの nameを同じにして require にする。 ）

<input type="text" name="myform[]">
<input type="text" name="myform[]">
<input type="text" name="myform[]">

rules: {
	'myform[]': {
		required: true
	}
} ,
messages: {
	my_name: { required: '少なくともどれか1つに入力してください。' } 
}

・やり方 2.（フォームの nameを別にしたい場合は、 group_require を定義する。 ）

クラス .group_require_1 のうちどれか1つに入力があるとヴァリデーションOKとなります。

<input type="text" name="textA" class="group_require_1">
<input type="text" name="textB" class="group_require_1">
<input type="text" name="textC" class="group_require_1">

jQuery.validator.addMethod("group_require", function(value, element, selector_name) {
  var v = '';
  $(selector_name).each(function( index ) {
    v += $( this ).val();
  });
  if ( v ){ return true; }
  else { return false; }
}, "このフィールドは必須です。");

rules: {
	'student_no[]': {
		group_require : '.group_require_1'
	} ,
messages: {
	my_name: {
		group_require: '少なくともどれか1つに入力してください。' 
	} 
}

● バリデーションルールの追加

validate()メソッドで初期化を行った後でルールを追加するにはadd()を使用します。

$("input[name=other_name]").rules("add", { required: '#other_radio:checked' }); //other_radio にチェックが有る時は必須とする

ルールとバリデーションエラーメッセージを合わせて追加する

$( "#myinput" ).rules( "add", {
  required: true,
  minlength: 2,
  messages: {
    required: "Required input",
    minlength: jQuery.validator.format("Please, at least {0} characters are necessary")
  }
});

● JavaScriptで全角→半角変換を行う

    function zen2han(input) {
        return input.replace(/[！-～]/g,
            function(input){
                return String.fromCharCode(input.charCodeAt(0)-0xFEE0);
            }
        );
    };

引用 : https://bit.ly/310vgFY

● jQueryで全角→半角変換を行う

JavaScriptで全角→半角変換を行うのにとても便利なjQueryのプラグインがあります

・ jQuery Super Text Converter

https://github.com/megazalrock/jquery-supertextconverter

使い方

var my_text = '全角のテキスト１２３３４５６';
var conv = $.SuperTextConverter();
my_text = conv.toHankaku(my_text);
alert(my_text);

です。

jQueryで "ある要素"が画面内にあるかどうかを判別するには 要素のページ内での位置（ Y座標）、 現在のスクロール位置（ Y座標）、 要素の高さを見て判別します。

function is_in_sight(jq_obj) {
	var scroll_top    = $(window).scroll_top();
	var scroll_bottom = scroll_top + $(window).height();
	var target_top    = jq_obj.offset().top;
	var target_bottom = target_top + jq_obj.height();
    if (scroll_bottom > target_top && scroll_top < target_bottom) {
    	alert('in sight');
    } else {
    	alert('not in sight');
    }
}

$(function() {
    $(window).on('load scroll', function() {
        is_in_sight($('.my-class'));
    });
});

● JavaScriptで 10日前の日付を求めるには以下のようにします。

var date = new Date();
date.setDate(date.getDate() + 10);
console.log(date.toString());

● moment.jsを使用するのもオススメです

https://momentjs.com/

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/locale/ja.js" defer></script>

var m = moment();
var text = m.format('MM/DD（dddd）') + "\n";

結果例 : 
12/17（月曜日）

次の日はこのように求めます

m.add(1, "day");	// 次の日

● JavaScriptのみで今日の日付を求めるには以下のようにします。

/**
 * 今日の日付を求める
 */
function getNow() {
  let nowdate = new Date();
  let year = nowdate.getFullYear();
  let mon = nowdate.getMonth() + 1;
  let date = nowdate.getDate();
  let hour = nowdate.getHours();
  let min = nowdate.getMinutes();
  let sec = nowdate.getSeconds();
  if (mon < 10) {
    mon = "0" + mon;
  }
  if (date < 10) {
    date = "0" + date;
  }
  if (hour < 10) {
    hour = "0" + hour;
  }
  if (min < 10) {
    min = "0" + min;
  }
  if (sec < 10) {
    sec = "0" + sec;
  }
  return `${year}/${mon}/${date} ${hour}:${min}:${sec}`;
}

var now_day = _get_now();

結果例

2018/12/17 15:30:45

https://api.jquery.com/trigger/

.trigger() メソッドを使って強制的にイベントを作ることができます。

// id=hoge の要素をクリック状態（onclick）を作り出す
jQuery('#hoge').trigger("click");

// id=fuga の要素にマウスオーバーさせる（onmouseover）
jQuery('#fuga').trigger("mouseover");

注意

<input type="text" name="hoge" id="hoge_id">
のフォームがあるとき
$("input[name='hoge']").trigger("focus"); // 動作しません ☓ NG
$("#hoge_id").trigger("focus"); // 動作します ○ OK

となりますので注意。

指定できるのは次のイベントです

 blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup

*キーボードの入力状態を強制的に作り出す

var evt = $.Event('keydown');
evt.keyCode = 39;    // キーボードの右矢印（→）入力
$('#hoge').trigger(evt);

jQueryのkeycodeはこちらで調べられます

http://goo.gl/HO6ong

keycode一覧表

http://goo.gl/5UwW2

● JavaScriptの正規表現で変数を使う

JavaScriptの正規表現で変数を使うには

• RegExp オブジェクト
• lodash の escapeRegExp関数 を使用します。

// 検索文字列とチェックしたいターゲット
const expected = `/myurl?hoge=hoge`;
const target = `/myurl?hoge=hoge&data=aaa`;

// 特殊文字をエスケープ
const escapedExpectedUrl = _.escapeRegExp(expected)
console.log( '● escapedExpectedUrl' );
console.log( escapedExpectedUrl );

// 正規表現検索の実行
const re = new RegExp(escapedExpectedUrl)
const result = re.test(target)
console.log( result ); // true 

● Google Maps を住所から自動生成するサンプル ( Google Maps Platform API 使用)

PHPや.Net などで動的に出力されるページにGoogle Mapsを埋め込む場合、 「住所を入力して地図を表示」→「埋め込みコードを取得」→「ページに貼り付け」 をやっていたのでは面倒な場合があります。

そこでGoogle Maps API を使用して簡単に地図表示を行います。

● 1. Google Maps PlatformでAPIキーを作成する

アカウント作成（GoogleアカウントがあればOK）が必要です。 ここにログインし、APIキーを作成します。

＊ APIキーの作成

・新しいプロジェクトを作成する
・作成したプロジェクトで「Maps JavaScript API」「Geo Coding API」を有効にする
・「API」→「Google Maps Platform」を選択し「認証情報」タブを選択する
・「API とサービスの認証情報にアクセスして行います」のリンクをクリックしてAPIキーを作成する
・「認証情報を作成」→「APIキー」を選択すると新しいAPIキーが作成されます。
・「キーの制限」を適宜設定します。

● 2. Google Maps を住所から自動生成するサンプル

html内に Google Map を表示するDIV タグをセット

<div id="my_map" style="width: 600px; height: 600px"></div>

JavaScriptから呼び出す

<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR-API-KEY>&callback=initMapWithAddress" async defer></script>
<script>
var _my_address = '表示させたい地図の住所';
function initMapWithAddress() {
    var opts = {
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    var my_google_map = new google.maps.Map(document.getElementById('my_map'), opts);
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode(
      {
        'address': _my_address,
        'region': 'jp'
      },
      function(result, status){
        if(status==google.maps.GeocoderStatus.OK){
            var latlng = result[0].geometry.location;
            my_google_map.setCenter(latlng);
            var marker = new google.maps.Marker({position:latlng, map:my_google_map, title:latlng.toString(), draggable:true});
            google.maps.event.addListener(marker, 'dragend', function(event){
                marker.setTitle(event.latLng.toString());
            });

        }
      }
    );
  }
</script>

なお、地図のサイズは

<div id="google_map" style="width: 600px; height: 600px"></div>

をスタイルで書き換えます。

入力テキストの値を補間するGoogleサジェストライクなプラグイン

● Bootstrap combbox

http://jsdo.it/mottsu/qqoq

デモ
http://logic.moo.jp/livedemo/bootstrap_combo_box/test.html

● jquery.ajax-combobox

https://github.com/sutara79/jquery.ajax-combobox/

・デモ

http://logic.moo.jp/livedemo/jquery_combo_box/mydemo.html

$(function() {
  $('#foo').ajaxComboBox(
    'mydemo.json',
    {
      db_table: 'name',
      per_page: 20,
      navi_num: 10
    }
  );
});

mydemo.json の中身はこんな感じにします

{
  "result":[
    {"name":"りんご"},
    {"name":"オレンジ"},
    {"name":"みかん"},
    {"name":"メロン"},
    {"name":"グレープフルーツ"},
    {"name":"すいか"},
    {"name":"もも"},
    {"name":"洋梨"},
    {"name":"いちご"},
    {"name":"マンゴー"}
  ] ,
  "cnt_whole":"10"
}

● typeahead.js

https://github.com/twitter/typeahead.js/

● jquery.autocomplete.js

http://docs.jquery.com/Plugins/Autocomplete

サンプルコード

$(function() {
	$("#Keywords").autocomplete('/ajax_suggest.php?flag=amazon', {
		delay : 50
	}).keydown(function(event){
        if( event.keyCode == 13 ){
            if( !event.isDefaultPrevented() ){
                return false;
            }
			else{
				document.form1.submit();;
			}
        }
    });
});

ドラッグ、ドロップでテーブルやリスト要素を順番変更する【jQuery UI Sortableモジュール】というのがあります。

● JQUERY SORTABLE

http://jqueryui.com/demos/sortable/
http://jqueryui.com/download ←ダウンロードはこちら

js

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.xxxxx.js"></script> 
<script type="text/javascript"> 
$(function(){
$("#sortable").sortable({
revert: true ,
cursor   : 'move' ,
tolerance: 'pointer' ,
update: function(event, ui) {
    var data  = $("#sortable").sortable("serialize");
    var data2 = $('#sortable').sortable('toArray').toString();
    alert(data);
    alert(data2);
}
})
.disableSelection();
});
<script>

html

<ul id="sortable"> 
<li id="list_1">ほげほげ</li> 
<li id="list_2">ふがふが</li> 
<li id="list_3">てすてす</li> 
</ul>

とするだけで、＜li＞要素がドラッグ&ドロップで順番入れ替えできます。
入れ替え後のデータは data（PHP用） , data2（CSV形式） に入るのでそれをプログラムに渡すといいでしょう。
オプションは

revert: true , // アニメーションあり
cursor   : 'move'  // 移動中は十字カーソルに変更,
tolerance: 'pointer' , // 要素が重なった瞬間に入れ替え判定

がオススメです。

オプションの解説 : http://cly7796.net/wp/javascript/try-the-sortable-of-jquery-ui/

JavaScriptで外部サイト（別ドメイン）のファイルを取得しようとすると、crossdomainの制約にひっかかってエラーとなります。
そこでCross-Domain-Ajaxプラグインを使用します。
これはYahoo Query Language (YQL)を使用してクロスドメインの壁を越えようというものです
（ですのですべてのサイトのデータが取得できるわけではありません）

● jquery.xdomainajax.js

https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js

● 例1：Yahooのトップを取得します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.xdomainajax.js"></script>
<script type="text/javascript">
	uri = 'http://www.yahoo.co.jp/';
	$.get(uri, function(data){
		alert(data.responseText);
	});
</script>

● 例2：Yahooのキーフレーズ抽出APIを呼び出してみます。

appid は各自用意してください。 ajaxメソッドを呼び出していますが、【type:'POST'】は使用出来ません。 【type:'GET'】の時のみ正常に動作します。

    // Cross Domain Ajax ajax()メソッド
    jQuery.ajax({
        url: 'http://jlp.yahooapis.jp/KeyphraseService/V1/extract',
        type: 'GET',
        data: {
            appid    : 'XXXXXXXXXX',
            sentence : '庭には二羽鶏がいる',
            output   : 'json'
        },
        success: function(data) {
            alert( jQuery(data.responseText).text() );
        }
    });

簡単ですね。 おすすめです。

jQueryによるAjax操作の基本

• きっかけとなるボタン
• 結果を表示するDIVタグ を用意します。

● jQuery の ajax（GETメソッド）で動的にjson読み込みをした後にタグにjsonの内容をテキストに変換して表示する

<button type="button" class="btn btn-primary btn-sm" onclick="get_stripe_invoice_json('{{ $v->id }}' , this );">Invoice Json</button>
<textarea class="json_detail" id="ajax_123456789"></textarea>                    

function get_stripe_invoice_json( id, btn_obj ){
    $.ajax({
        url: 'ajax取得するURL' ,
        type:'GET',
        data:{
            'id':123456789,
        }
    })
    // on Success
    .done( (data,status) => {
        json_string = JSON.stringify(data,null, 4);
        $('#ajax_' + id).html( json_string ).fadeIn();
    })
    // on Error
    .fail( (data) => {
        alert('Ajax Error');
    })
}

● 要素の内容を書き換える（ .html() ）

$("#hoge").html('<p>書き換える要素</p>');

● 要素に追加する（ .append() ）

$("#hoge").append('今ある要素のいちばん後ろに追加します');

● 要素を動的に( test.phpを読み込んで) に追加する（ .load() ）

$("#hoge").load("test.php,null,function(){
	alert('読み込み完了');
});

● 要素を削除する（ .remove() ）

$("#hoge").remove();

● （class="hoge"な要素の）CSSプロパティを書き換える

$('.hoge').css({
	'width'  : '100px' , 
	'height' : '200px'
});

● 親要素、子要素を選択するセレクタの記述

#contents の中にある .title 要素を取得する場合

$(.title', '#contents');           // ☓ 遅い
$('#contents').find('.title'); // ○ 高速

$(this).parent().find('.myclass');　// 全ての子要素の中から 「myclass」クラスを取得。
$(this).children('.myclass');　// 直下の子要素の中から 「myclass」クラスを取得。孫要素は取得できない

● 要素の属性を取得する。属性を変更する

var img_src = $("img").attr("src");  // 取得
$("img").attr("src", "b.jpg");  // 変更

● セレクタが正しく動作して、jQueryオブジェクトが取得できているかどうかを調べる

var jq_obj = $('MY_ID');
if ( $(jq_obj).length > 0 ){
	alert('jQueryオブジェクトが正しく取得できています。');
}

$(function(){

$('.my_ajax_btn').on('click',function(){
    $.ajax({
        url:'./request.php',
        type:'GET',				// GET または post
        data:{
            'id':$('#userid').val(),
        }
    })
    // on Success
    .done( (data) => {
        $('.result').html(data);
        console.log(data);
    })
    // on Failed
    .fail( (data) => {
        $('.result').html(data);
        console.log(data);
    })
    // on Always
    .always( (data) => {
    });
});

});

● CSS、HTMLのみでプリロードを行う（全ブラウザOK）

#preloadedImages {
       width: 0px;
       height: 0px;
       display: inline;
       background-image: url(path/to/image1.png); /* 読ませたいイメージ1 */
       background-image: url(path/to/image2.png); /* 読ませたいイメージ2 */
}

<div id="preloadedImages"></div>

● HTML5のみでプリロードを行う

IEに対応しなくていい場合は 次の link rel="preload" が簡単でいいと思います。
＜head＞〜ないにタグを1つ加えるだけです。これでプリロードが行われます。（表示はされません。）

<html>
<head>
 <link rel="preload" href="path/to/image1.png" as="image">
</head>

● JavaScript（jQuery使わず）でプリロードを行う（全ブラウザOK）

var img_folder = "./assets/img/common";

var preload_images = [
	img_folder + "/pc-small-header__top--on.png" ,
	img_folder + "/pc-small-header__info--on.png" ,
];

document.addEventListener('DOMContentLoaded', function(){
	for (var i = 0; i < preload_images.length; i++) {
	    var img = new Image();
	    img.src = preload_images[i];
	}
});

ドロップダウンリスト（オプションメニュー）の状態をJavaScriptで動的に変更する

<select id="prefecture_id" name="prefecture_name" >
<option value="北海道">北海道</option>
<option value="沖縄">沖縄</option>
</select>

● 関数名（_change_dropdown_id）

function _change_dropdown_id( id_name, value ){
	var element = document.getElementById(id_name);
	if (! element){ alert( '<select id="' + id_name +'"> is not find.'); return; }	
	var flag = false;
	for (var i=0; i<element.options.length; i++) {
		var option = element.options[i];
		if (option.value == value){
			if (flag){
				option.selected = false;
			}
			else{
				option.selected = true; flag = true;
			}
		}
		else{ option.selected = false; }
	}
	if(! flag){ alert( 'DATA [' + value + '] is not find in <select id="'+id_name+'"> '); }
}

● 関数名（_change_dropdown_name）

function _change_dropdown_name( form_name, value ){
    var element = window.document.getElementsByName(form_name)[0];
    if (! element){ alert( '<select id="' + id_name +'"> is not find.'); return; }
    var flag = false;
    for (var i=0; i<element.options.length; i++) {
        var option = element.options[i];
        if (option.value == value){
            if (flag){
                option.selected = false;
            }
            else{
                option.selected = true; flag = true;
            }
        }
        else{ option.selected = false; }
    }
    if(! flag){ alert( 'DATA [' + value + '] is not find in <select id="'+id_name+'"> '); }
}

● Usage（使い方）

// IDでの呼び出し
_change_dropdown_id( 'prefecture_id', '沖縄' );
// フォーム名での呼び出し
_change_dropdown_name( 'prefecture_name', '沖縄' );

ちなみに ドロップダウンリストを 操作できないような状態にするには

document.getElementById('prefecture').disabled = true; // 操作不可能にする
document.getElementById('prefecture').disabled = false; // 操作可能にする 

Gmailはチェックボックスを複数一気に選択したいときに先頭をまずクリックして、次に最後のチェックボックスを【シフト+クリック】するとその間にあるチェックボックスが一気に選択できて非常に便利なのですが、それをjQueryプラグインで実現するには以下のようにします。

● 1.jQueryをダウンロード

http://jquery.com/ からjQueryをダウンロードします。（ダウンロードしたファイル名を jquery.js とします。）

● 2. jQuery Field Plug-inをダウンロード

http://www.pengoworks.com/workshop/jquery/field/field.plugin.htm から【jquery.field.js】をダウンロードします。

● 3. 以下のようなチェックボックスを含むhtmlを用意します

<form>
  <input type="checkbox" name="user_id" id="ch_1" value="1"><label for="ch_1">Option 1</label>
  <input type="checkbox" name="user_id" id="ch_2" value="2"><label for="ch_2">Option 2</label>
  <input type="checkbox" name="user_id" id="ch_3" value="3"><label for="ch_3">Option 3</label>
  <input type="checkbox" name="user_id" id="ch_4" value="4"><label for="ch_4">Option 4</label>
  <input type="checkbox" name="user_id" id="ch_5" value="5"><label for="ch_5">Option 5</label>
</form>

● 4. 用意したhtmlのヘッダに以下の記述を追加

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.field_j.js"></script>
<script>
	$(document).ready(
		function (){
			$('input[@name="user_id"]').createCheckboxRange();
		}
	);
</script>

以上で「シフト+クリック」による複数選択が実行できます。 とても便利。

また「シフト+クリック」実行後にコールバック関数を指定することもできます。

function (){
	$('input[@name="user_id"]').createCheckboxRange( function(){
		alert('選択完了');
	} );
}

DOMプロパティ一覧

attributes[]	〔ノードの属性リストを取得〕
childNodes[]	〔子ノードのリストを取得〕
className		〔クラス名の取得・設定〕
dir				〔テキスト・ディレクションの取得・設定〕
firstChild		〔最初の子ノードを取得〕
id				〔ID名の取得・設定〕
innerHTML		〔ノード内のHTML要素の取得・設定〕
innerText / textContent	〔ノード内のプレーンテキストの取得・設定〕
lang			〔言語コードの取得・設定〕
lastChild		〔最後の子ノードを取得〕
localName		〔ローカル名の取得〕
namespaceURI	〔名前空間のURIの取得〕
previousSibling/nextSibling	〔直前・直後にある兄弟ノードを取得 :: Mac風OSメニュー〕
nodeName		〔ノードの名前を取得〕
nodeType		〔ノードの型を取得〕
nodeValue		〔ノードの値を取得〕
ownerDocument	〔オーナードキュメントを取得〕
parentNode		〔親ノードを取得〕
prefix			〔名前空間の識別子を取得〕
tagName			〔タグ名の取得・設定〕
title			〔タイトル属性の取得・設定〕

JavaScript/DOM ? DOMプロパティ | PHP & JavaScript Room

例えば id="hogehoge" の中身を書き換えるには

■ prototype.js + DOM の場合

var mytext='aiueo';
$('hogehoge').innerHTML=mytext;

■ jQueryの場合

var mytext='aiueo';
j$("#hogehoge").html(mytext);

と書けますが、このとき

var mytext=0;
$('hogehoge').innerHTML=mytext; // 0 が表示される
j$("#hogehoge").html(mytext); // 何も表示されない

という違いがあるようなので注意！

prototype.js の便利な機能に

Form.serialize('フォームのid名前');

というのがありますが、これをテストしてみます。（↓添付ファイルをダウンロード後、prototype.jsを読み込ませて実行のこと）

実行してみてわかることは

<textarea name="text" rows="3" id="text_id">bbb
bbb
bbb
＜/textarea＞

のところは

text=bbb%0Abbb%0Abbb%0A

という値が帰ってくるということ。調べたとろ

• htmlファイルの改行コードが「 LF 」「 CR+LF 」「 CR 」いずれの場合も %0A になる。
• id ではなく name の値でシリアライズされる。

という事みたいです。

別ウィンドウのフォームをシリアライズするには。。。

別ウィンドウの DOM document インターフェイスは

var parent_document = window.opener.document

とすると取得できます。（openerの document を取得）

意外に登場する機会が多いので関数として登録しておく

● hidden属性を作成する make_hidden()

/**
 * make_hidden : hiddenを作成する : Version 1.2
 */
function make_hidden(name, value, formname) {
    var q = document.createElement('input');
    q.type = 'hidden';
    q.name = name;
    q.value = value;
    if (formname) {
    	if ( document.forms[formname] == undefined ){
    		console.error( "ERROR: form " + formname + " is not exists." );
    	}
    	document.forms[formname].appendChild(q);
    } else {
    	document.forms[0].appendChild(q);
    }
}

使い方：引数は（ '名前' , '値', 'フォーム名' ）

make_hidden('id', '1234');

とすると

<input type="hidden" name="id" value="1234">

が作成されます。

またHTMLファイル内に複数の＜form＞タグが存在する場合はフォーム名を指定して呼び出せばOK。

<form name="FM"></form>
<form name="SFM"></form>

の二つのフォームが存在する場合

make_hidden('id', '1234', 'SFM');

とすると name="SFM" の方にhiddenが作成されます

また作成した hidden 属性を削除するには以下の関数を使用します

● hidden属性を削除する delete_hidden()

// delete_hidden : hiddenを削除する : Version 1.1
function delete_hidden( name, value, formname ){
	var dom_obj_array = window.document.getElementsByName(name);
	for (var i=0; i<dom_obj_array.length; i++){
		if ( dom_obj_array[i].value === value ){
			element = dom_obj_array[i];
			element.parentNode.removeChild(element);
		}
	}
}

● hidden属性を作成する make_hidden() （既にある存在するフォーム名で作成しようとするとスキップ）

function make_hidden(name, value, formname, override_flag) {
  var q = document.createElement('input');
  q.type = 'hidden';
  q.name = name;
  q.value = value;
  var form_dom;
  if (formname) {
    form_dom = document.forms[formname];
  } else {
    form_dom = document.forms[0];
  }

  if ( ! override_flag ) {
    if (form_dom[name]) {
      console.log('フォーム(' + name + ')が既に存在するのでhiddenを作成しません。');
      return false;
    }
  }

  form_dom.appendChild(q);
  return true;
}

● jQueryを使用してhidden属性を作成する

$('<input>').attr({
    type    : 'hidden',
    name    : 'redirect_url',
    value   : redirect_url
}).appendTo('#after12_form');

JavaScriptで四捨五入して小数点xxケタにするには、

数値.toFixed(四捨五入後のケタ数)

とします。

■ 例

d1=( 1 / 3 ).toFixed(2);	// 小数点3ケタで四捨五入して、小数点2桁にする。
// 結果は 0.33 です

d1=( 3 / 2 ).toFixed(0);	// 小数点1ケタで四捨五入して、小数点なしにする。
// 結果は 2 です

● A. jQueryを使用してテキストエリアを動的に変更する。【jquery.elastic.js】

https://github.com/janjarfalk/jquery-elastic

$(document).ready(function(){
    // 読み込み時にリサイズ
	$('textarea#my_text_area').elastic();
    // クリック時にリサイズ
	$('textarea#text_name').bind("click", function(){
	  $('textarea#text_name').elastic();
	});
});

● B. テキストエリアを動的に変更する。【autoresize.jquery.js】

https://github.com/jackmoore/autosize
jQueryを使用したくない場合はこちら

// from a NodeList
autosize(document.querySelectorAll('textarea'));

// from a single Node
autosize(document.querySelector('textarea'));

// from a jQuery collection
autosize($('textarea'));

● C. jQueryを使用してテキストエリアを動的に変更する。【jquery.autogrow-textarea.js】

http://javascriptly.com/2008/09/quick-useful-jquery-plugins/ ダウンロード： http://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js

$(document).ready(function(){
  $('textarea#mytextarea').autogrow();
});

DOM要素をJavaScriptで削除するには次のようにします。

次のような html 構造になっている場合

<div id="hoge">
　<div id="aaa">テストA</div>
　<div id="bbb">テストB</div>
　<div id="ccc">テストC</div>
</div>

id="hoge" を削除するには

_delete_element('hoge');

function _delete_element( id_name ){
	var dom_obj = document.getElementById(id_name);
	var dom_obj_parent = dom_obj.parentNode;
	dom_obj_parent.removeChild(dom_obj);
}

子要素 id="aaa" id="bbb" id="ccc" を削除するには次のようにします。

_delete_child_element('hoge');

function _delete_child_element( id_name ){
	var dom_obj = document.getElementById(id_name);
	while (dom_obj) dom_obj.removeChild(dom_obj.firstChild);
}

こちらにもっと詳しく書いてあります : ライブラリを使わない素のJavaScriptでDOM操作

Ajax（いわゆる）によってhtmlが動的に書き換えられることが最近多くなってきていると思います。 そこで動的に書き換えられたページを確認するブックマークレット
Kazuho@Cybozu Labs: Ajax な HTML ページのソースコードを表示する

Safari用ブックマークレット
Javascript で書き換えられた後の Webページの内容を表示する (groundwalker.com)

このページで表示されるリンクをブックマークに入れて、Ajaxなサイトに行きページが書き換えられた後にブックマークを起動すると新しいウィンドウでソースコードが表示されます。

● google/code-prettify

すごくいいですこれ。
http://code.google.com/p/google-code-prettify/

使い方

1. js を cdnから読み込む

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

2. スタイルをセット

<style type="text/css">
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: decimal; }
pre.prettyprint {
	border: 1px solid #ccc;
	padding: 0;
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
	font-size: 14px;
}
.prettyprint li {
	background: #f6f6f6;
	padding-left: 10px;
}
.prettyprint li:nth-child(1) {
	padding-top: 5px;
}
.prettyprint li:last-child {
	padding-bottom: 5px;
}
.prettyprint ol {
	background: #ededed;
}
</style>

3. ソースコードを貼り付けて表示

次のクラスをつけると適応されます
.prettyprint : ソースコードを色付けして表示 .linenums : 行番号を表示させる

<pre class="prettyprint linenums">class Voila {
public:
  // Voila
  static const string VOILA = "Voila";
}</pre>

google/code-prettify の 表示例

● JavaScriptで数字3桁ごとにコンマを打つ

<html><body>
<script>
var data1=123456789;
alert(data1);

data2=comma(data1);
alert(data2);

function comma(num) {
    return num.toString().replace( /([0-9]+?)(?=(?:[0-9]{3})+$)/g , '$1,' );
} 
</script>
</body>
</html>

javaScriptでURIエンコードを行うには -encodeURI -encodeURIComponent -escape の関数を使う事ができる。 この3つの違いはエンコードしない文字に違いがあって

● encodeURI がエンコードしない文字列

;/?:@&=+$-_!~*.,()a#'

● encodeURIComponent がエンコードしない文字列

-_!~*.()a'

● escape がエンコードしない文字列

*+-_./

となっています。 なので（http://〜）を含むURLをエンコードするには、コロンやスラッシュを変換したい用途、したくない用途によって encodeURIComponent , encodeURI を使い分けるのがいいでしょう。

通常 encodeURIComponent を使うのがいいと思います。 また escape は 全角文字など文字コードが256以上の値を持つ文字は %uxxxx という形式に変換しますのでURLエンコード用途では使用しないほうがいいでしょう。

● 使い方

e_uri = encodeURIComponent( 'http://xxx.yyy.zzz/aaa.cgi?bbb=ccc' );

● 動作サンプルコード

[https://pgmemo.tokyo/data/filedir/438_1.html:title=こちらの動作サンプルコード]をご使用ください。

●注意 1.

これらの関数はUTF-8でエンコードするのでそれ以外の文字コードを使ったページの場合は 使えません。 shift_jis , euc-jp でurlエンコードを行いたい場合は http://www.junoe.jp/downloads/itoh/enc_js.shtml こちらの関数を使うといいでしょう。

●注意 2.

URLデコードするときには decodeURIComponent , decodeURI を使用しますが、これらの関数はデコードできない文字が含まれるときエラーでスクリプト自体を終了させるので、必ず try catch しましょう。

script.aculo.usのフェード効果を使います。

<div id="test">テキスト</div>    

という要素に対してフェードイン効果を加えるには

と記述します。

またオプションで
>duration（フェードイン、アウトする時間（秒））デフォルト値：1.0  
>from:（開始する透明度 0.0〜1.0 の範囲内で指定）デフォルト値：0.0  
>to:（終了時の透明度 0.0〜1.0 の範囲内で指定）デフォルト値：1.0  

が使えるので、オプションを適用した記述は以下のようになります。

```Effect.Appear( 'test', { duration:3.0, from:0.0, to:0.5 } );```

● JavaScriptの setTimeout を使って遅延実行する

setTimeout を使った例 : 次のコードを実行すると結果はどうなるでしょう？

setTimeout( function() {
    console.log('aaa');
    console.log('bbb');
}, 1500 );
console.log('ccc');

結果 : 「ccc」→「aaa」→「bbb」 の順で表示されます。

ccc
aaa
bbb

※ 正確には setTimeoutは遅延実行です。（指定時間たってから実行するようタイマーをセットする。） 上記の例ですとブラウザのコンソールに 'ccc' と表示されてから 1.5秒後にaaa, bbb が表示されます。

● setTimeout に変数を渡す

setTimeout で 呼び出す関数に引数を渡すには遅延時間の後に引数を渡します。

for (var i = 0; i < 10; i++) {
	setTimeout( function(data) { document.write(data+"<br>\n"); }, i*500, i );
}

●settimeout に オブジェクトのメソッドを指定する

my_method : function() {
	var _this = this;
	this.timer_id = setTimeout( function(){ _this.method(); },500);
}