JQuery – 視覚効果

2020-12-18 / tau / コメントする

JQueryのみによる効果

ネイティブのCSSやJQueryによって、要素の表示／非表示の切り替え時のアニメーション効果を設定することができる。他のライブラリーによらない視覚効果についてこちらにまとめている。

また、このうちのslideUp()/slideDown()メソッドについてこちらに詳しくまとめている。

scrollTop

scrollTopによる画像スクロールでは、背景画像の縦位置をスクロール位置から計算する。その結果、画像のスクロールに伴って背景画像がスクロールし、立体的なイメージ効果を与える。

外部フレームワーク

ScrollMe

ScrollMeはJQueryのフレームワークで、画面をスクロール伴ってHTML要素に動きを加えることができる。

こちらのページにScrollMeの機能をまとめた。

JS/ES – JQuery – イベントリスナーの登録

2020-12-14 / tau / コメントする

on()/off()

概要

on()メソッドは引数にイベント名とコールバック関数を指定する。登録されたイベントに対して対応するコールバックが実行されるようになる。

off()メソッドは引数にイベント名と、オプションでコールバック関数を指定する。コールバックを指定した場合はその関数だけが削除され、指定しなければDOMのすべてのリスナーが削除される。

書式

[DOM].on('event', callback)

[DOM].off('event'[, callback])

実行例

以下のHTMLでは、2つのp要素と3つのボタンを配置する。

Switchボタンには、あらかじめボタンのクリックに対してp1の表示を切り替えるリスナーが登録されている
AddボタンはSwitchボタンに、p2の表示を切り替えるもう1つのリスナーを登録する
DeleteボタンはSwitchに登録された特定の／あるいは全てのリスナーを削除する

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>on/off listener manipulation</title>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script>
      onSwitch1 = () => {
        content = $('#p1').text();
        $('#p1').text( content === 'nail' ? 'snail' : 'nail' );
      }

      onSwitch2 = () => {
        content = $('#p2').text();
        $('#p2').text( content === 'nail' ? 'snail' : 'nail' );
      }

      onAdd = () => {
        console.log('onadd')
        $('#switch').on('click', onSwitch2);
      }

      onDelete = () => {
        //$('#switch').off('click', onSwitch2);
        $('#switch').off('click');
      }

      $(() => {
        $('#add').on('click', onAdd);
        $('#delete').on('click', onDelete);
        $('#switch').on('click', onSwitch1);
      });
    </script>
  </head>
  <body>
    <p id="p1">nail</p>
    <p id="p2">snail</p>
    <div>
      <button id="add">Add</button>
      <button id="delete">Delete</button>
      <button id="switch">Switch</button>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>on/off listener manipulation</title>

onSwitch1 = () => {

content = $('#p1').text();

$('#p1').text( content === 'nail' ? 'snail' : 'nail' );

}

onSwitch2 = () => {

content = $('#p2').text();

$('#p2').text( content === 'nail' ? 'snail' : 'nail' );

}

onAdd = () => {

console.log('onadd')

$('#switch').on('click', onSwitch2);

}

onDelete = () => {

//$('#switch').off('click', onSwitch2);

$('#switch').off('click');

}

$(() => {

$('#add').on('click', onAdd);

$('#delete').on('click', onDelete);

$('#switch').on('click', onSwitch1);

});

</script>

</head>

<body>

<p id="p2">snail</p>

<div>

<button id="delete">Delete</button>

<button id="switch">Switch</button>

</div>

</body>

</html>

off()にリスナーを指定した場合、Deleteボタンを押すとp2が反応しなくなるがp1は反応し続け、Addボタンを押すとp2の反応も復活する。

off()にリスナーを指定しない場合、Deleteボタンを押すとp1とp2のどちらも反応しなくなる（Switchボタンのリスナーが2つとも削除されるため）。その後Addボタンを押すとp2の反応だけが復活する。

特定イベント専用のリスナー

概要

たとえばclickイベントの場合、DOMのメソッドとしてclick()が準備されていて、その引数にリスナーを指定して登録できる。

実行例

以下の例は、p要素に対してmouseoverとmouseleaveの二つのイベントに対するリスナーを登録する例。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>click and mouseover</title>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script>

      onMouseover = () => {
        $('p').text('over');
      }

      onMouseleave = () => {
        $('p').text('left');
      }

      $(() => {
        $('p').mouseover(onMouseover);
        $('p').mouseleave(onMouseleave);
      });
    </script>
  </head>
  <body>
    <p style="background-color: #0cc">I am here</p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>click and mouseover</title>

onMouseover = () => {

$('p').text('over');

}

onMouseleave = () => {

$('p').text('left');

}

$(() => {

$('p').mouseover(onMouseover);

$('p').mouseleave(onMouseleave);

});

</script>

</head>

<body>

</body>

</html>

リスナーにデータを渡す

リスナーに直接引数を指定して渡すことはできないが、eventオブジェクトを通じてデータを渡すことができる。

データは連想配列で、イベント名の次、コールバックの前に指定する。
コールバックの指定時、引数にイベントオブジェクトを明示する
コールバック内ではイベントオブジェクトのdata属性を通じてデータを取得する

書式

.on('event', {key: value, ...}, callback)

.click({key: value, ...}, callback)

実行例

以下の例は、ボタン1を押すと数値データを1つ、ボタン2を押すと数値データと文字データが1つずつコールバックに渡され、それらが表示される。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Event data</title>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script>
      $(() => {
        $('#button1').on('click', {num: 123}, (event) => {
          $('p').text('number:' + event.data.num);
        });

        $('#button2').click({num: 456, str: 'ABC'}, (event) => {
          $('p').text('number:' + event.data.num + ' / string:' + event.data.str);
        });
      });
    </script>
  </head>
  <body>
    <p>ここに表示</p>
    <button id="button1">ボタン1</button>
    <button id="button2">ボタン2</button>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Event data</title>

$(() => {

$('#button1').on('click', {num: 123}, (event) => {

$('p').text('number:' + event.data.num);

});

$('#button2').click({num: 456, str: 'ABC'}, (event) => {

$('p').text('number:' + event.data.num + ' / string:' + event.data.str);

});

</script>

</head>

<body>

<p>ここに表示</p>

</body>

</html>

JS/ES – map

2020-12-14 / tau / コメントする

概要

Array.prototype.map()はコールバックを引数にとり、配列の要素やインデックスなどを順次取り出して処理した結果を配列として返す。

具体的には、元の配列の0～length−1番目までの各要素についてコールバックで処理した結果が新しい配列の0～length−1番目の要素として設定され、返される。

書式

new_Array = Array.map((value[, index[, array]]) => {})

value: Arrayから順次取り出された要素の値
index: Arrayから順次取り出された要素のインデックス
array: 元の配列Array全体が要素ごとに参照できる
new_Array: コールバックによって各要素に対して処理された結果の配列

実行例

1つ目は1つの引数として要素の内容が得られ、それらを2倍した結果を要素とする配列を返している。

2つ目は2つの引数に要素の内容とインデックスが得られ、それらを使った文字列を要素とした配列を返している。

3つ目は3つの引数の3つ目だけを返しているが、すべての要素において元の配列全体が参照できることを示している。

array = [0, 1, 2, 3, 4];

console.log( array.map(val => val * 2) );
// [0, 2, 4, 6, 8]

console.log( array.map((val, idx) => 'array[' + idx + ']=' + val) );
// ["array[0]=0", "array[1]=1", "array[2]=2", "array[3]=3", "array[4]=4"]

console.log( array.map((val, idx, ary) => ary ) );
// [Array(5), Array(5), Array(5), Array(5), Array(5)]
// 0: (5) [0, 1, 2, 3, 4]
// 1: (5) [0, 1, 2, 3, 4]
// 2: (5) [0, 1, 2, 3, 4]
// 3: (5) [0, 1, 2, 3, 4]
// 4: (5) [0, 1, 2, 3, 4]

array = [0, 1, 2, 3, 4];

console.log( array.map(val => val * 2) );

// [0, 2, 4, 6, 8]

console.log( array.map((val, idx) => 'array[' + idx + ']=' + val) );

// ["array[0]=0", "array[1]=1", "array[2]=2", "array[3]=3", "array[4]=4"]

console.log( array.map((val, idx, ary) => ary ) );

// [Array(5), Array(5), Array(5), Array(5), Array(5)]

// 0: (5) [0, 1, 2, 3, 4]

// 1: (5) [0, 1, 2, 3, 4]

// 2: (5) [0, 1, 2, 3, 4]

// 3: (5) [0, 1, 2, 3, 4]

// 4: (5) [0, 1, 2, 3, 4]

JS/ES – JQuery – DOMの追加

2020-12-14 / tau / コメントする

概要

動的に生成したDOMを指定したDOMに対して追加する。追加されるDOMの外側／内側、前／後に応じて、before()、prepend()、append()、after()の各メソッドを使う。

書式

[追加されるDOM].before([追加するDOM]): 追加されるDOMの外側直前に追加。
[追加されるDOM].prepend([追加するDOM]): 追加されるDOMの内側先頭に追加。
[追加されるDOM].append([追加するDOM]): 追加されるDOMの内側末尾に追加。
[追加されるDOM].after([追加するDOM])

追加されるDOMの外側直後に追加。

実行例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Adding DOM</title>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script>
      $(() => {
        $('div').before($('<p></p>').text('beforeで追加'));
        $('div').prepend($('<p></p>').text('prependで追加'));
        $('div').append($('<p></p>').text('appendで追加'));
        $('div').after($('<p></p>').text('afterで追加'));
      });
    </script>
  </head>
  <body>
    <div style="border: solid">
      <p>既存の要素の中身</p>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Adding DOM</title>

$(() => {

$('div').before($('<p></p>').text('beforeで追加'));

$('div').prepend($('<p></p>').text('prependで追加'));

$('div').append($('<p></p>').text('appendで追加'));

$('div').after($('<p></p>').text('afterで追加'));

});

</script>

</head>

<body>

<p>既存の要素の中身</p>

</div>

</body>

</html>

結果イメージ：

beforeで追加

prependで追加
既存の要素の中身
appendで追加

afterで追加

JS/ES – Array – splice

2020-12-13 / tau / コメントする

概要

Array.prototype.splice()は、インデックスを指定して文字列の削除、取出し、置換、挿入が行える。splice()は破壊的であり、元の配列の内容が書き換えられる。

要素の取出し・削除

以下の例では、2番目の位置から1つの要素を取り出している。取り出された要素は（要素数が1つであっても）配列として返され、元の配列からは指定した要素が削除される。すなわちslice()は破壊的に動作する。

array = ['zero', 'one', 'two', 'three'];

removed = array.splice(2, 1);
console.log(removed);
console.log(array);

// ["two"]
// ["zero", "one", "three"]

array = ['zero', 'one', 'two', 'three'];

removed = array.splice(2, 1);

console.log(removed);

console.log(array);

// ["two"]

// ["zero", "one", "three"]

要素の置換

次の例では、1番目の位置から2つの要素を削除し、その位置に2つの要素を新たに挿入している。

array = ['zero', 'one', 'two', 'three'];

array.splice(1, 2, '1st', '2nd')
console.log(array);

// ["zero", "1st", "2nd", "three"]

array = ['zero', 'one', 'two', 'three'];

array.splice(1, 2, '1st', '2nd')

console.log(array);

// ["zero", "1st", "2nd", "three"]

要素の挿入

位置だけ指定して削除する文字数を0にすれば、文字列の挿入ができる。

array = ['zero', 'one', 'two', 'three'];

array.splice(1, 0, 'half');
console.log(array);

// ["zero", "half", "one", "two", "three"]

array = ['zero', 'one', 'two', 'three'];

array.splice(1, 0, 'half');

console.log(array);

// ["zero", "half", "one", "two", "three"]

JS/ES – Array – filter

2020-12-13 / tau / コメントする

概要

Array.prototype.filter()は、コールバック関数を引数にとり、配列の各要素にコールバックの条件を適用した結果を新たな配列として返す。

[新たな配列] = [元の配列].filter(callback);

コールバックは引数を1つ取りtrue/falseを返す関数で、引数には元の配列の各要素が順次あてられ、条件がtrueの要素のみが残った配列が新たに生成される。

実行例

以下の例では、文字列を要素とする配列から文字列長が3文字以内の要素のみを取り出して新たな配列としている。元の配列は影響を受けない。

array = ['zero', 'one', 'two', 'three'];

new_array = array.filter(v => v.length <= 3);
console.log(new_array);
console.log(array);

// ["one", "two"]
// ["zero", "one", "two", "three"]

array = ['zero', 'one', 'two', 'three'];

new_array = array.filter(v => v.length <= 3);

console.log(new_array);

console.log(array);

// ["one", "two"]

// ["zero", "one", "two", "three"]

活用例～要素の削除

以下のように、配列の要素の内容を指定して削除することができる。同じ内容の要素が複数含まれる場合、すべて削除される。

array = [1, 2, 3, 4, 3, 2, 1];

console.log(array.filter(v => v !== 2));

// [1, 3, 4, 3, 1]

array = [1, 2, 3, 4, 3, 2, 1];

console.log(array.filter(v => v !== 2));

// [1, 3, 4, 3, 1]

JS/ES/JQuery – ストック

2020-12-11 / tau / コメントする

JQuery

プロパティーの設定

$([セレクター]).attr(属性名, 値);

$('<a>').attr('href', url);

1	$('<a>').attr('href', url);

取得

valueの取得

$([セレクター]).val();

$('#txt_url').val()

1	$('#txt_url').val()

連鎖

anchor要素を生成し、href属性にurlの文字列を設定し、表示文字列としてlink_nameを設定する。

$('<a>').attr('href', url).html(link_name)

1	$('<a>').attr('href', url).html(link_name)

JS/ES – JQuery – CSS

2020-12-11 / tau / コメントする

概要

JQueryでDOMのCSSの追加・変更・削除をするにはcss()メソッドを使う。

スタイルの設定

単一のプロパティー

css()メソッドの1つ目の引数にプロパティー、2つ目の引数に値を文字列で与えて、スタイルを設定する。

また、css()の第1引数だけにプロパティー名を指定すると、スタイルの値が得られる（以下の例では#00fで与えた色の値がrgb(0, 0, 255)で返されている）。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JQuery CSS control</title>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
      $(() => {
        $('#color').css('color', '#00f');

        console.log($('#color').css('color'));
      });
    </script>
  </head>
  <body>
    <p id="color">青い文字になる</p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>JQuery CSS control</title>

$(() => {

$('#color').css('color', '#00f');

console.log($('#color').css('color'));

});

</script>

</head>

<body>

<p id="color">青い文字になる</p>

</body>

</html>

rgb(0, 0, 255)

1	rgb(0, 0, 255)

複数プロパティーの一括設定

css()の引数に連想配列（Object型）を与えて、複数のスタイルを一括指定する。連想配列のキーがプロパティー、値がスタイルの値になる。

複数のスタイルの値を確認するには、css()の引数に配列を与え、その配列の中で必要なスタイルプロパティーを複数指定する。戻り値は連想配列で返される。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JQuery CSS multiple styles</title>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
      $(() => {
        $('#styles').css({
          'color': '#00f',
          'font-weight': 'bold',
          'text-decoration': 'underline double blue'
        });

        console.log($('#styles').css(['color', 'font-weight', 'text-decoration']));
      });
    </script>
  </head>
  <body>
    <p id="styles">青い太文字に二重下線</p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>JQuery CSS multiple styles</title>

$(() => {

$('#styles').css({

'color': '#00f',

'font-weight': 'bold',

'text-decoration': 'underline double blue'

});

console.log($('#styles').css(['color', 'font-weight', 'text-decoration']));

});

</script>

</head>

<body>

<p id="styles">青い太文字に二重下線</p>

</body>

</html>

Object
  color: "rgb(0, 0, 255)"
  font-weight: "700"
  text-decoration: "underline double rgb(0, 0, 255)"

Object

color: "rgb(0, 0, 255)"

font-weight: "700"

text-decoration: "underline double rgb(0, 0, 255)"

スタイルの解除

css()の1つ目の引数にプロパティーを指定し、2つ目の引数を空文字列にすると、指定したスタイルが解除される。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JQuery CSS remove styles</title>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
      $(() => {
        $('#styles').css({
          'color': '#00f',
          'font-weight': 'bold',
          'text-decoration': 'underline double blue'
        });

        $('#styles').css('color', '');
      });
    </script>
  </head>
  <body>
    <p id="styles">青い太文字に二重下線から青指定を削除</p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>JQuery CSS remove styles</title>

$(() => {

$('#styles').css({

'color': '#00f',

'font-weight': 'bold',

'text-decoration': 'underline double blue'

});

$('#styles').css('color', '');

});

</script>

</head>

<body>

<p id="styles">青い太文字に二重下線から青指定を削除</p>

</body>

</html>

JS/ES – JQuery – スクリプトの配置

2020-12-11 / tau / コメントする

概要

JavaScriptやJQueryの配置位置については、HTML要素の読み込みとの前後関係に注意しなければならない。

HTML要素の内容・スタイルの設定やイベントリスナーの登録など、オブジェクトの実体が必要な殆どの操作は、DOMが読み込まれた後に行う必要がある。

以下、JQueryのコードを中心に、コード配置について整理する。

不適切な配置

以下の例は、対象となるDOMが読み込まれる前にスクリプトが実行される。

このため、スクリプト実行段階ではDOMの実体が存在せず、意図したp要素の文字の色の設定は行われない。これはJavaScriptのコードでも同じ。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Wrong script position</title>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
  </head>
  <body>
    <script>
      $('p').css('color', '#f00');
    </script>

    <p>赤色の文字にならない</p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Wrong script position</title>

</head>

<body>

$('p').css('color', '#f00');

</script>

<p>赤色の文字にならない</p>

</body>

</html>

スクリプトをbodyの末尾に置く

以下の場合は、スクリプトがbodyの末尾に置かれていて、body内のDOMが全て読み込まれた後にスクリプトが実行される。

このため、スクリプト実行時にはDOMの実体が定まっていて、意図したp要素の色の変更が行われる。これもJavaScriptで書く場合と共通。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>After HTML</title>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
  </head>
  <body>
    <p>赤色の文字になる</p>

    <script>
      $('p').css('color', '#f00');
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>After HTML</title>

</head>

<body>

<p>赤色の文字になる</p>

$('p').css('color', '#f00');

</script>

</body>

</html>

スクリプトをhead内に置く

DOM読み込み後に実行

`$(document).ready(function() {});`

&(document).ready()メソッドに渡した関数は、HTMLやDOMが読み込まれると実行される。

画像ファイルなどのリソースはまだ完全に読み込まれていない状態。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>documetn.ready with function</title>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script>
      $(document).ready(function() {
        $('p').css('color', '#f00');
      });
    </script>
  </head>
  <body>
    <p>赤色の文字になる/p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>documetn.ready with function</title>

$(document).ready(function() {

$('p').css('color', '#f00');

});

</script>

</head>

<body>

<p>赤色の文字になる/p>

</body>

</html>

`$(document).ready(() => {});`

ready()に渡す関数をアロー関数で書くと、表現が簡略化される。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>documetn.ready with =></title>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script>
      $(document).ready(() => {
        $('p').css('color', '#f00');
      });
    </script>
  </head>
  <body>
    <p>赤色の文字になる</p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>documetn.ready with =></title>

$(document).ready(() => {

$('p').css('color', '#f00');

});

</script>

</head>

<body>

<p>赤色の文字になる</p>

</body>

</html>

`$(function {});`

関数を直接JQueryの引数に渡す、redayメソッドよりも簡略化された書き方。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>only anonymus function</title>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script>
      $(function() {
        $('p').css('color', '#f00');
      });
    </script>
  </head>
  <body>
    <p>赤色の文字になる</p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>only anonymus function</title>

$(function() {

$('p').css('color', '#f00');

});

</script>

</head>

<body>

<p>赤色の文字になる</p>

</body>

</html>

`$(() => {});`

JQueryに渡す関数をアロー関数にした、最も簡潔な書き方。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>only anonymus =></title>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script>
      $(() => {
        $('p').css('color', '#f00');
      });
    </script>
  </head>
  <body>
    <p>赤色の文字になる</p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>only anonymus =></title>

$(() => {

$('p').css('color', '#f00');

});

</script>

</head>

<body>

<p>赤色の文字になる</p>

</body>

</html>

リソースの完全読み込み後に実行

`$(window).onload(function() {});`

DOMに続いて画像ファイルなどのリソースが完全に読み込まれた後に実行される。画像サイズの利用や変更を伴う場合にはこの方法で。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>window.load with function</title>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script>
      $(window).load(function() {
        $('p').css('color', '#f00');
      });
    </script>
  </head>
  <body>
    <p>赤色の文字になる</p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>window.load with function</title>

$(window).load(function() {

$('p').css('color', '#f00');

});

</script>

</head>

<body>

<p>赤色の文字になる</p>

</body>

</html>

`$(window).onload(() => {});`

onloadの引数にアロー関数を渡すと、簡潔になる。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>window.load with =></title>
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
    <script>
      $(window).load(() => {
        $('p').css('color', '#f00');
      });
    </script>
  </head>
  <body>
    <p>赤色の文字になる</p>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>window.load with =></title>

$(window).load(() => {

$('p').css('color', '#f00');

});

</script>

</head>

<body>

<p>赤色の文字になる</p>

</body>

</html>

JS/ES – 列挙型(enum)

2020-12-10 / tau / コメントする

JavaScriptにはビルトインのenum型はないが、連想配列で似たような表現ができる。

var EDUCATION = {
  JUNIOR_HIGHSCHOOL: 0
  HIGHSCOOL: 1
  UNIVERSITY: 2;
}

var educationLevel = EDUCATION.HIGHSCHOOL;
.....
if (educationLevel == EDUCATION.UNIVERSITY) {
  .....
}

var EDUCATION = {

JUNIOR_HIGHSCHOOL: 0

HIGHSCOOL: 1

UNIVERSITY: 2;

}

var educationLevel = EDUCATION.HIGHSCHOOL;

.....

if (educationLevel == EDUCATION.UNIVERSITY) {

.....

}

こうすると2値のフラグ以外の状態表現なども可能になり、switch文も見やすくなる。