CoffeeScript – クラスのメソッド

2016-07-03 / tau / コメントする

アクセス可能性

以下のコードで、クラスの関数へのアクセス可能性を確認する。

class Person
  method1: -> console.log("method1")
  @method2: -> console.log("method2")
  method3 = -> console.log("method3")
  @method4 = -> console.log("method4")

  method: ->
    # method1() # Error, is not defined
    # method2() # Error, is not defined
    method3()   # method3
    # method4() # Error, is not defined

  method_a: ->
    @method1()   # method1
    # @method2() # Error, is not a function
    # @method3() # Error, is not a function
    # @method4() # Error, is not a function

# Person.method1() # Error, is not a function
Person.method2()   # method2
# Person.method3() # Error, is not a function
Person.method4()   # method4

console.log()
john = new Person()
john.method1()   # method1
# john.method2() # Error, is not a function
# john.method3() # Error, is not a function
# john.method4() # Error, is not a function

console.log()
john.method()

console.log()
john.method_a()

class Person

method1: -> console.log("method1")

@method2: -> console.log("method2")

method3 = -> console.log("method3")

@method4 = -> console.log("method4")

method: ->

# method1() # Error, is not defined

# method2() # Error, is not defined

method3() # method3

# method4() # Error, is not defined

method_a: ->

@method1() # method1

# @method2() # Error, is not a function

# @method3() # Error, is not a function

# @method4() # Error, is not a function

# Person.method1() # Error, is not a function

Person.method2() # method2

# Person.method3() # Error, is not a function

Person.method4() # method4

console.log()

john = new Person()

john.method1() # method1

# john.method2() # Error, is not a function

# john.method3() # Error, is not a function

# john.method4() # Error, is not a function

console.log()

john.method()

console.log()

john.method_a()

各関数へのアクセス可能性は以下の通り。

定義＼引用	クラス	インスタンス	メソッド内 (@なし)	メソッド内 (@つき)
`fnc: ->`	TypeError	○	ReffError	○
`@fnc: ->`	○	TypeError	ReffError	TypeError
`fnc = ->`	TypeError	TypeError	○	TypeError
`@fnc = ->`	○	TypeError	ReffError	TypeError

なお、上記コードの定義部分のJavaScriptコンパイル結果は以下の通り。

(function() {
  var Person, john;

  Person = (function() {
    var method3;

    function Person() {}

    Person.prototype.method1 = function() {
      return console.log("method1");
    };

    Person.method2 = function() {
      return console.log("method2");
    };

    method3 = function() {
      return console.log("method3");
    };

    Person.method4 = function() {
      return console.log("method4");
    };

(function() {

var Person, john;

Person = (function() {

var method3;

function Person() {}

Person.prototype.method1 = function() {

return console.log("method1");

};

Person.method2 = function() {

return console.log("method2");

};

method3 = function() {

return console.log("method3");

};

Person.method4 = function() {

return console.log("method4");

};

クラス・メソッド

クラス内で@つきでメソッドを定義すると、クラスメソッドになる。

class MyClass
  @method1: -> console.log("method1")
  @method2 = -> console.log("method2")

class MyClass

@method1: -> console.log("method1")

@method2 = -> console.log("method2")

上記のいずれもJavaScriptへのコンパイル結果は同じになる。

  Person = (function() {

    function Person() {}

    Person.method1 = function() {
      return console.log("method1");
    };

    Person.method2 = function() {
      return console.log("method2");
    };

Person = (function() {

function Person() {}

Person.method1 = function() {

return console.log("method1");

};

Person.method2 = function() {

return console.log("method2");

};

クラスメソッドは、クラス内で呼び出すときでもクラス名をつける。

class MyClass
  @classMethod: -> console.log("Public Static")
  instanceMethod: ->
    console.log("Instance Method calling...")
    MyClass.classMethod()

MyClass.classMethod()
myObj = new MyClass()
myObj.instanceMethod()

# 実行結果
# Public Static
# Instance Method calling...
# Public Static

class MyClass

@classMethod: -> console.log("Public Static")

instanceMethod: ->

console.log("Instance Method calling...")

MyClass.classMethod()

myObj = new MyClass()

myObj.instanceMethod()

# 実行結果

# Public Static

# Instance Method calling...

# Public Static

publicなインスタンス・メソッド

最も多く用いる形で、クラス内でコロン(:)によって関数を定義すると、インスタンス・メソッドになる。

class MyClass
  method: -> console.log("method")

1 2	class MyClass method: -> console.log("method")

JavaScriptへのコンパイル結果では、prototype宣言されている。

(function() {
  var MyClass;

  MyClass = (function() {

    function MyClass() {}

    MyClass.prototype.method = function() {
      return console.log("method");
    };

(function() {

var MyClass;

MyClass = (function() {

function MyClass() {}

MyClass.prototype.method = function() {

return console.log("method");

};

同じクラスのメソッド内で呼び出すときは、@つきで。

class MyClass
  method1: -> console.log("metod1")
  method2: ->
    console.log("method2 calling...")
    @method1()

myObj = new MyClass()
myObj.method2()

# 実行結果
# method2 calling...
# metod1

class MyClass

method1: -> console.log("metod1")

method2: ->

console.log("method2 calling...")

@method1()

myObj = new MyClass()

myObj.method2()

# 実行結果

# method2 calling...

# metod1

privateなクラス・メソッド

クラス内でfnc = ->のように定義すると、クラスの外からは見えないprivateなメソッドになる。

class MyClass
  publicMethod: ->
    console.log("Public Method calling...")
    privateMethod()

  privateMethod = ->
    console.log("Private Method")

myObj = new MyClass()
myObj.publicMethod()
# myObj.privateMethod() # Type Error: is not a function

# 実行結果
# Public Method calling...
# Private Method

class MyClass

publicMethod: ->

console.log("Public Method calling...")

privateMethod()

privateMethod = ->

console.log("Private Method")

myObj = new MyClass()

myObj.publicMethod()

# myObj.privateMethod() # Type Error: is not a function

# 実行結果

# Public Method calling...

# Private Method

JavaScriptコードでは、クラス内のスコープで宣言されており、外からは見えない。

  MyClass = (function() {
    var privateMethod;

    function MyClass() {}

    MyClass.prototype.publicMethod = function() {
      console.log("Public Method calling...");
      return privateMethod();
    };

    privateMethod = function() {
      return console.log("Private Method");
    };

    return MyClass;

  })();

MyClass = (function() {

var privateMethod;

function MyClass() {}

MyClass.prototype.publicMethod = function() {

console.log("Public Method calling...");

return privateMethod();

};

privateMethod = function() {

return console.log("Private Method");

};

return MyClass;

})();

CoffeeScript – クラスのプロパティ

2016-07-03 / tau / コメントする

アクセス可能性

以下のコードで、クラスに関する変数へのアクセス可能性を確認する。

class Person
  member1 = 1
  @meber2 = 2
  member3: 3
  @member4: 4

  constructor: ->
    member5 = 5
    @member6 = 6

  dispMember1: ->
    console.log(member1) # 1
    # console.log(member2) # Error, not defined
    # console.log(member3) # Error, not defined
    # console.log(member4) # Error, not defined
    # console.log(member5) # Error, not defined
    # console.log(member6) # Error, not defined
    console.log("-----")

  dispMember2: ->
    console.log(@member1) # undefined
    console.log(@member2) # undefined
    console.log(@member3) # 3
    console.log(@member4) # undefined
    console.log(@member5) # undefined
    console.log(@member6) # 6
    console.log("-----")

john = new Person()

console.log(Person.member1) # undefined
console.log(Person.member2) # undefined
console.log(Person.member3) # undefined
console.log(Person.member4) # 4
console.log(Person.member5) # undefined
console.log(Person.member6) # undefined
console.log("-----")

console.log(john.member1) # undefined
console.log(john.member2) # undefined
console.log(john.member3) # 3
console.log(john.member4) # undefined
console.log(john.member5) # undefined
console.log(john.member6) # 6
console.log("-----")

john.dispMember1()

john.dispMember2()

class Person

member1 = 1

@meber2 = 2

member3: 3

@member4: 4

constructor: ->

member5 = 5

@member6 = 6

dispMember1: ->

console.log(member1) # 1

# console.log(member2) # Error, not defined

# console.log(member3) # Error, not defined

# console.log(member4) # Error, not defined

# console.log(member5) # Error, not defined

# console.log(member6) # Error, not defined

console.log("-----")

dispMember2: ->

console.log(@member1) # undefined

console.log(@member2) # undefined

console.log(@member3) # 3

console.log(@member4) # undefined

console.log(@member5) # undefined

console.log(@member6) # 6

console.log("-----")

john = new Person()

console.log(Person.member1) # undefined

console.log(Person.member2) # undefined

console.log(Person.member3) # undefined

console.log(Person.member4) # 4

console.log(Person.member5) # undefined

console.log(Person.member6) # undefined

console.log("-----")

console.log(john.member1) # undefined

console.log(john.member2) # undefined

console.log(john.member3) # 3

console.log(john.member4) # undefined

console.log(john.member5) # undefined

console.log(john.member6) # 6

console.log("-----")

john.dispMember1()

john.dispMember2()

各変数へのアクセス可能性は以下の通り。

定義＼引用		クラス	インスタンス	メソッド内 (@なし)	メソッド内 (@つき)
クラス直下	`v=val`	undef	undef	○	undef
	`@v=val`	undef	undef	RefError	undef
	`v:val`	undef	○	RefError	○
	`@v:val`	○	undef	RefError	undef
コンストラクタ	`v=val`	undef	undef	RefError	undef
コンストラクタ	`@v=val`	undef	○	RefError	○

この表から、以下のように整理できる。特にpublicなインスタンス・プロパティとstaticなクラス・プロパティを使っていくことになる。

クラス直下で`@v:val`定義	staticなクラス・プロパティ
クラス直下で`v:val`	publicなインスタンス・プロパティ
コンストラクタで`@v=val`	publicなインスタンス・プロパティ
クラス直下で`v=va`l	privateなクラス・プロパティ

なお、定義部分のJavaScriptへのコンパイル結果は以下の通り。

// Generated by CoffeeScript 1.10.0
(function() {
  var Person;

  Person = (function() {
    var member1;

    member1 = 1;

    Person.meber2 = 2;

    Person.prototype.member3 = 3;

    Person.member4 = 4;

    function Person() {
      var member5;
      member5 = 5;
      this.member6 = 6;
    }

    return Person;

  })();

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

var Person;

Person = (function() {

var member1;

member1 = 1;

Person.meber2 = 2;

Person.prototype.member3 = 3;

Person.member4 = 4;

function Person() {

var member5;

member5 = 5;

this.member6 = 6;

}

return Person;

})();

}).call(this);

クラス・プロパティ

クラス直下で@v:valでプロパティを定義する場合、プロパティはクラスに一つの共有のものとして扱われる。コンパイルされたJavaScriptコードでは正に”[クラス名].[プロパティ名]“となっている

インスタンスの中から参照する場合も、[クラス名].[プロパティ名]で参照する。

class Person
  @member: 1

  dispMember: ->
    console.log(Person.member)

john = new Person()

console.log(Person.member) # 1
john.dispMember()          # 1
Person.member++
console.log(Person.member) # 2
john.dispMember()          # 2

class Person

@member: 1

dispMember: ->

console.log(Person.member)

john = new Person()

console.log(Person.member) # 1

john.dispMember() # 1

Person.member++

console.log(Person.member) # 2

john.dispMember() # 2

publicなインスタンス・プロパティ

クラス直下でv:valと定義した場合とコンストラクタで@v=valと定義した場合は、いずれもインスタンス・プロパティとして扱われる。

class Person
  member1: 1

  constructor: ->
    @member2 = 2

  dispMember: ->
    console.log(@member1)
    console.log(@member2)

john = new Person()
luice = new Person()

console.log("--John--")
console.log(john.member1) # 1
console.log(john.member2) # 2
console.log("--Luice--")
console.log(john.member1) # 1
console.log(john.member2) # 2

john.member1 *= 10
john.member2 *= 10

console.log("--John--")
john.dispMember()
# 10
# 20
console.log("--Luice--")
luice.dispMember()
# 1
# 2

class Person

member1: 1

constructor: ->

@member2 = 2

dispMember: ->

console.log(@member1)

console.log(@member2)

john = new Person()

luice = new Person()

console.log("--John--")

console.log(john.member1) # 1

console.log(john.member2) # 2

console.log("--Luice--")

console.log(john.member1) # 1

console.log(john.member2) # 2

john.member1 *= 10

john.member2 *= 10

console.log("--John--")

john.dispMember()

# 10

# 20

console.log("--Luice--")

luice.dispMember()

# 1

# 2

挙動としては同じなのでどちらでもよさそうだが、インスタンス・プロパティとしてはコンストラクタで定義する形式の方がよいと考えた。

以下のように、それぞれの定義方法でJavaScriptのコードが異なるが、メソッドのようにクラス内で共通化したい場合はprototypeがよいが、そもそもインスタンスごとに異なる値をとることを想定しているプロパティの場合は、thisによる定義の方が意味に即している。

class Person
  member1: 1
　# JavaSceiptでは、Personクラスの定義の冒頭で
  # "Person.prototype.member1 = 1"と定義される。

  constructor: ->
    @member2 = 2
    # JavaScriptでは、Person()コンストラクタの中で
    # "this.member2 = 2"と定義される。

class Person

member1: 1

　# JavaSceiptでは、Personクラスの定義の冒頭で

# "Person.prototype.member1 = 1"と定義される。

constructor: ->

@member2 = 2

# JavaScriptでは、Person()コンストラクタの中で

# "this.member2 = 2"と定義される。

privateなクラス・プロパティ

クラス直下でv=valと定義すると、そのクラスの各インスタンスで共有されたprivateなプロパティになる。

class Person
  _member = 1

  getMember: ->
    return _member

  setMember: (m) ->
    _member = m

john = new Person()
luice = new Person()

console.log("--John--")
console.log(john._member)      # undefined
console.log(john.getMember())  # 1
console.log("--Luice--")
console.log(luice._member)     # undefined
console.log(luice.getMember()) # 1

console.log()
john.setMember(5)
console.log(john.getMember())  # 5
console.log(luice.getMember()) # 5

class Person

_member = 1

getMember: ->

return _member

setMember: (m) ->

_member = m

john = new Person()

luice = new Person()

console.log("--John--")

console.log(john._member) # undefined

console.log(john.getMember()) # 1

console.log("--Luice--")

console.log(luice._member) # undefined

console.log(luice.getMember()) # 1

console.log()

john.setMember(5)

console.log(john.getMember()) # 5

console.log(luice.getMember()) # 5

JavaScriptコードを見るとクラス宣言の最初でvar宣言されているため、クラス内スコープで外からは見えない変数となる。

  Person = (function() {
    var _member;

    function Person() {}

    _member = 1;

Person = (function() {

var _member;

function Person() {}

_member = 1;

CoffeeScript – jQueryによるINPUT要素の操作

2016-07-02 / tau / コメントする

jQueryによるINPUT要素の操作

ボタンのテスト

ここではボタン操作に対するイベントを確認している。

ボタンはinput要素のタイプの一つとして作成される。
ボタンが押された時のイベントはonclick属性で定義してもよいが、ここではそれを使わず、jQueryのハンドラで処理している。

<input type="button" id="btn_button" value="押してください" /><br />

1	<input type="button" id="btn_button" value="押してください" /><br />

ボタンが押下されたときのイベントは、(そのボタンが動的に後から追加されたものでなければ)click()で捕捉される。

  $("#btn_button").click ->
    alert("ボタンを押しましたね。")

1 2	$("#btn_button").click -> alert("ボタンを押しましたね。")

テキストボックスのテスト

入力：
出力：

ここではテキストボックスの内容の取得や書き込みについて確認している。

入力：<input type="text" id="txt_input" /><br />
出力：<input type="text" id="txt_output" /><br />
<input type="button" id="btn_text" value="コピー" />

入力：<input type="text" id="txt_input" /><br />

出力：<input type="text" id="txt_output" /><br />

テキストボックスの内容の取得や設定はval()メソッドで行う。

  $("#btn_text").click ->
    txt = $("#txt_input").val()
    $("#txt_output").val(txt)

$("#btn_text").click ->

txt = $("#txt_input").val()

$("#txt_output").val(txt)

チェックボックスのテスト

同意しますか？

チェックボックスの確認。

<p>
<label><input type="checkbox" id="chk_accept" value="accept" />同意しますか？</label>
</p>
<input type="button" id="btn_checkbox" value="決定">

<p>

<label><input type="checkbox" id="chk_accept" value="accept" />同意しますか？</label>

</p>

チェックボックスのチェック状態の取得には、prop()メソッドを用いる。

  $("#btn_checkbox").click ->
    if $("#chk_accept").prop("checked")
      alert("あなたは同意しました。")
    else
      alert("あなたは同意しませんでした。")

$("#btn_checkbox").click ->

if $("#chk_accept").prop("checked")

alert("あなたは同意しました。")

else

alert("あなたは同意しませんでした。")

ラジオボタンのテスト

通知エリア

One　Two　Three

Dog　Monkey　Pheasant

ラジオボタンの動作を確認している。ここでは選択状態が変わるごとにイベントが発生して、通知エリアの表示が変わる。

<div id="radio_notation">通知エリア</div>

<p>
<label><input type="radio" name="number" value="壱" onChange="onChangeNumber()" />One</label>
<label><input type="radio" name="number" value="弐" onChange="onChangeNumber()"checked="checked" />Two</label>
<label><input type="radio" name="number" value="参"onChange="onChangeNumber()" />Three</label>
</p>
<p>
<label><input type="radio" name="animal" id="dog" value="犬" />Dog</label>
<label><input type="radio" name="animal" id="monkey"value="猿" />Monkey</label>
<label><input type="radio" name="animal" id="pheasant" value="雉" checked="checked" />Pheasant</label>
</p>

<div id="radio_notation">通知エリア</div>

<p>

<label><input type="radio" name="number" value="参"onChange="onChangeNumber()" />Three</label>

</p>

<p>

<label><input type="radio" name="animal" id="monkey"value="猿" />Monkey</label>

<label><input type="radio" name="animal" id="pheasant" value="雉" checked="checked" />Pheasant</label>

</p>

上段はブラウザ側のonchange属性でイベントハンドラを指定し、下段はjQueryのハンドラを使っている。

  # ブラウザ側で定義したイベントハンドラ
  window.onChangeNumber = ->
    number = $("input[name=number]:checked").val()
    $("#radio_notation").html("#{number}番が選択されました")

  # jQuery側で準備されたイベントハンドラ
  $("input[name=animal]").change ->
    animal = $("input[name=animal]:checked").val()
    $("#radio_notation").html("#{animal}を連れていく")

# ブラウザ側で定義したイベントハンドラ

window.onChangeNumber = ->

number = $("input[name=number]:checked").val()

$("#radio_notation").html("#{number}番が選択されました")

# jQuery側で準備されたイベントハンドラ

$("input[name=animal]").change ->

animal = $("input[name=animal]:checked").val()

$("#radio_notation").html("#{animal}を連れていく")

セレクトボックスのテスト

通知エリア

セレクトボックス(ドロップダウンリスト)の例。

ボックス内の選択肢を選ぶたびに通知エリアの表示が変わる
“LONDONへ”ボタンを押すと、ロンドンが選択された状態になる。
“追加”ボタンで選択肢に”パリ”が追加され、”削除”ボタンで削除される

<div id="select_notation">通知エリア</div>

<select id="capital">
  <option value="Tokyo">東京</option>
  <option value="Washington D.C." selected>ワシントンDC</option>
  <option value="London">ロンドン</option>
</select><br />
<input type="button" id="btn_select" value="Londonへ"><br />
<input type="button" id="btn_select_append" value="追加"><br />
<input type="button" id="btn_select_delete" value="削除">

<div id="select_notation">通知エリア</div>

<option value="Washington D.C." selected>ワシントンDC</option>

</select><br />

セレクトボックスの状態変化のイベントは、change()メソッドで捕捉される。

“追加”と”削除”のボタンはprop()メソッドを使って選択状態をトグルさせているが、ページのテーマ／デザインによっては明確にはわからないことがある。

  appended = no

  capital = $("#capital").val()

  $("#select_notation").html("首都は#{capital}が選択されています")

  $("#capital").change ->
    capital = $(this).val()
    capitalText = $("#capital option:selected").text()
    $("#select_notation").html("首都が#{capital}=#{capitalText}に変更されました")

  $("#btn_select").click ->
    $("#capital").val("London")

  $("#btn_select_append").click ->
    $("#capital").append('<option value="Paris">パリ</option>')
    $("#btn_select_append").prop("disabled", true)
    $("#btn_select_delete").prop("disabled", false)

  $("#btn_select_delete").click ->
    $("#capital option[value='Paris']").remove()
    $("#btn_select_append").prop("disabled", false)
    $("#btn_select_delete").prop("disabled", true)

appended = no

capital = $("#capital").val()

$("#select_notation").html("首都は#{capital}が選択されています")

$("#capital").change ->

capital = $(this).val()

capitalText = $("#capital option:selected").text()

$("#select_notation").html("首都が#{capital}=#{capitalText}に変更されました")

$("#btn_select").click ->

$("#capital").val("London")

$("#btn_select_append").click ->

$("#capital").append('<option value="Paris">パリ</option>')

$("#btn_select_append").prop("disabled", true)

$("#btn_select_delete").prop("disabled", false)

$("#btn_select_delete").click ->

$("#capital option[value='Paris']").remove()

$("#btn_select_append").prop("disabled", false)

$("#btn_select_delete").prop("disabled", true)

CoffeeScript – CSソースとJSコンパイル結果

2016-07-02 / tau / コメントする

概要

様々なソースに対するコンパイル結果。

クロージャと変数のスコープ

グローバルなし

グローバルのつもりでも、必ず無名関数で括られる。

a = 1

a = 1

// Generated by CoffeeScript 1.10.0
(function() {
  var a;

  a = 1;

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

var a;

a = 1;

}).call(this);

変数の宣言位置

変数は、それが属する関数の先頭で必ずvar宣言される。つまり、各変数はそれが属する関数内のローカルスコープを持つ。

func = ->
  console.log("start")
  a = 1

b = 2

func = ->

console.log("start")

a = 1

b = 2

// Generated by CoffeeScript 1.10.0
(function() {
  var func, b;

  func = function() {
    var a;
    console.log("start");
    return a = 1;
  };

  b = 2;

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

var func, b;

func = function() {

var a;

console.log("start");

return a = 1;

};

b = 2;

}).call(this);

引数なしの無名関数によるクロージャ

->
  console.log("here")

1 2	-> console.log("here")

// Generated by CoffeeScript 1.10.0
(function() {
  (function() {
    return console.log("here");
  });

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

return console.log("here");

});

}).call(this);

引数ありの無名関数によるクロージャ

(x) ->
  console.log(x * 2)

1 2	(x) -> console.log(x * 2)

// Generated by CoffeeScript 1.10.0
(function() {
  (function(x) {
    return console.log(x * 2);
  });

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

(function(x) {

return console.log(x * 2);

});

}).call(this);

クロージャとdoの違い

->

do ->

do ->

// Generated by CoffeeScript 1.10.0
(function() {
  (function() {});

  (function() {})();

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

(function() {});

(function() {})();

}).call(this);

クラス

プロパティの宣言

class Person
  member1 = 1
  @meber2 = 2
  member3: 3
  @member4: 4

  constructor: ->
    member5 = 5
    @member6 = 6

class Person

member1 = 1

@meber2 = 2

member3: 3

@member4: 4

constructor: ->

member5 = 5

@member6 = 6

// Generated by CoffeeScript 1.10.0
(function() {
  var Person;

  Person = (function() {
    var member1;

    member1 = 1;

    Person.meber2 = 2;

    Person.prototype.member3 = 3;

    Person.member4 = 4;

    function Person() {
      var member5;
      member5 = 5;
      this.member6 = 6;
    }

    return Person;

  })();

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

var Person;

Person = (function() {

var member1;

member1 = 1;

Person.meber2 = 2;

Person.prototype.member3 = 3;

Person.member4 = 4;

function Person() {

var member5;

member5 = 5;

this.member6 = 6;

}

return Person;

})();

}).call(this);

WordPressでjQueryを使う場合

2016-07-02 / tau / コメントする

WordPressにはもともとjQueryがビルトインされて読み込まれるので、headセクションで読み込むとかjQueryサイトから引っ張ってこなくても、すぐに使えるらしい。

ただ、”$”が他のエイリアスになっているらしく、常套句である以下の表現は使えない。

$ ->
  jQuery構文

1 2	$ -> jQuery構文

これに対しては、最初のclosureの部分だけを書き換えれば、その中では”jQuery”→”$”と通常の構文が使えるとのこと。

jQuery ($) ->
  $("bra bra...

1 2	jQuery ($) -> $("bra bra...

この際、headerセクションでjquery関係のファイルを読み込む必要はない。

WordPressでonclickが消えてしまう

2016-07-02 / tau

たとえば以下のようにボタンを配置するために、エディタの”テキスト”モードで直接次のように打ち込む。

<input type="button" id="btn" value="Button" onclick="btnClick()" />

1	<input type="button" id="btn" value="Button" onclick="btnClick()" />

ここで一度ビジュアルモードに移ってから再度テキストモードに戻ると、onclickがきれいに消えている。

<input type="button" id="btn" value="Button" />

1	<input type="button" id="btn" value="Button" />

これを回避するのにテーマフォルダ下のphpを修正する方法があるらしいが、テーマを変更したらどうなるのかなど素人には不安なので、手っ取り早い回避策を2つ。

全体のページ構成を打ち込んでいった後、onclickなどの実装時以降、テキストモードからビジュアルモードに移らない
HTMLでonblickなどを使わず、jQueryのイベントハンドラを使う

なお、上のinputタグを”<…>”で書いても、ビジュアルモードを経由すると、”<… />”とW3Cに準拠した書き方になおされている。

jQueryのテスト

2016-07-01 / tau / コメントする

jQueryテスト

jQuery – イベント

2016-06-28 / tau / コメントする

ソース別イベント

個別イベントハンドラの一般形

要素に発生しうるイベントは下記一覧の通りで、イベントが発生した時、対応したハンドラが呼ばれる。

$(セレクタ).イベント名(コールバック)

1	$(セレクタ).イベント名(コールバック)

たとえばクリックイベントに対する処理の記述は以下の通り。

$("div").click ->
  # ここに処理内容を記述

1 2	$("div").click -> # ここに処理内容を記述

ただしこの形式のハンドラは、動的に追加された要素には対応していない。

マウスイベント

click	クリック時
dblclick	ダブルクリック時
mousedown	マウスボタンを押した時
mouseup	マウスボタンを離したとき
mouseover	マウスカーソルが要素内に入った時(子要素を含む)
mouseout	マウスカーソルが要素から出たとき(子要素を含む)
mouseenter	マウスカーソルが要素に入った時(子要素は除く)
mouseleave	マウスカーソルが要素から出た時(子要素は除く)
mousemove	要素内でマウスカーソルが移動した時
hover	mouseenter / mouseleaveを一つにまとめたもの
toggle	クリックの度に異なる処理を実行。v1.9以降廃止。

キーイベント

keydown	キーを押した時
keypress	キー入力があった時
keyup	キーを離した時
focusin	フォーカスされた時(子要素を含む)
focusout	フォーカスが外れた時(子要素を含む)

フォームイベント

focus	フォーカスされた時(子要素は除く)
blur	フォーカスが外れた時(子要素は除く)
change	内容が変更された時
select	文字が選択された時
submit	データ送信時

ブラウザイベント

resize	リサイズした時
scroll	スクロールした時
error	エラーが発生した時

ロードイベント

load	読み込みが完了した時
unload	ページから離れる時
ready	DOMの読み込みが完了した時

イベントハンドラ・アタッチメント

イベントハンドラを要素にアタッチするメソッド。

たとえばon()メソッドの書き方の一つとして以下がある。

$(探索範囲のセレクタ).on(イベント名, セレクタ, ハンドラ)

1	$(探索範囲のセレクタ).on(イベント名, セレクタ, ハンドラ)

on()メソッドのハンドラとして、1つのイベントオブジェクトを引数に持つ関数を指定する。

$("div").on "click", (evt) ->
  alert("clicked")

1 2	$("div").on "click", (evt) -> alert("clicked")

探索範囲を限定してオブジェクトを探索する場合は以下の構文を用いる。

  $("body").on "click", "h1", (evt) ->
    alert("click!")

1 2	$("body").on "click", "h1", (evt) -> alert("click!")

下表のbind～offまでのうち、現在はon/offメソッドのみ使えばよい。

また、on/offメソッドに指定できるイベントは、上記ソース別イベントの内、hoverとtoggle以外で指定する。

bind	jQueryで最初に登場したアタッチメント。動的な要素に対応していないため、v1.3でliveが導入される。
unbind	bindで設定された処理を解除。
live	動的な要素に対応したアタッチメント。処理負荷が高いため、v1.9で廃止された。
die	liveで設定された処理を解除。v1.9で廃止。
delegate	イベントの調査範囲を限定できるアタッチメント。v1.7で”on”に移行。
undelegate	delegateで設定された処理を解除。
on	イベントハンドラ・アタッチメントの最終形。
off	onで設定されたイベント発生時の処理を解除。
one	1回だけ利用できるイベント発生時の処理を設定。構文はonと同じ。
triggerHandler	要素に指定したイベントを発生させるが、要素に対するブラウザ標準の機能は実行されない。
trigger	要素に指定したイベントを発生させ、ブラウザ標準の機能も実行させる。

イベントオブジェクト

概要

イベントオブジェクトはイベントハンドラに必ず渡されるobjectオブジェクト。イベント発生ごとに作成される。

基本形のコンストラクタでは、引数にイベント名を指定して作成する。たとえばclickイベントに対応するイベントオブジェクトは以下の様に作成される。

jQuery.Event("click")

1	jQuery.Event("click")

プロパティ

e.type	イベントの種類
e.data	イベントハンドラに渡された情報
e.pageX	イベントが発生したX座標(ブラウザの座標系)
e.pageY	イベントが発生したY座標(ブラウザの座標系)
e.timeStamp	イベントが発生した時間(1970-01-01からのミリ秒)
e.which	正規化されたキーコード
e.result	直前に実行したイベントハンドラが返した値
e.namespace	名前空間に設定された名称
e.target	イベントが発生したDOM要素
e.currentTarget	現在のDOM要素
e.delegateTarget	デリゲート時の調査範囲のDOM要素
e.relatedTarget	イベントの発生に関連したDOM要素

メソッド

e.stopPropagation(): バブリング(親要素方向へのイベントの伝播)を停止。
e.stopImmediatePropagation(): バブリングとイベントハンドラの実行を停止。
e.preventDefault(): ブラウザ標準の機能を停止。
e.isPropagationStopped(): stopPropagation()メソッドが実行されたかを調査。
e.isImmediatePropagationStopped(): stopImmediatePropagation()メソッドが実行されたかを調査。
e.isDefaultPrevented(): preventDefault()メソッドが実行されたかを調査。

jQuery – メソッド

2016-06-28 / tau / コメントする

値の取得

メソッドを通して、オブジェクトの持つプロパティなどを取得する。

$(セレクタ).メソッド(引数)

1	$(セレクタ).メソッド(引数)

※引数がない場合もある。

<h1 id="header">jQueryテスト</h1>

<script type="text/coffeescript">
$ ->
  console.log($("h1").text())
</script>

<h1 id="header">jQueryテスト</h1>

$ ->

console.log($("h1").text())

</script>

オブジェクトの操作

メソッドによりオブジェクトにプロパティを設定したり、動作させたりする。

$(セレクタ).メソッド(引数)

1	$(セレクタ).メソッド(引数)

※引数がない場合もある

<h1 id="header">jQueryテスト</h1>

<script type="text/coffeescript">
$ ->
  $("h1").hide(3000)
</script>

<h1 id="header">jQueryテスト</h1>

$ ->

$("h1").hide(3000)

</script>

イベント処理

構文1

オブジェクトに発生したイベントに対応して呼び出されるハンドラで、引数に処理を記述。

この構文では、後から動的に追加された要素には対応できない。

$(セレクタ).イベントハンドラ(コールバック)

1	$(セレクタ).イベントハンドラ(コールバック)

ハンドル用の関数を別に定義して引数に関数名を書いてもよいが、多くの場合無名関数が使われる。

$ ->
  $("h1").click ->
    console.log("click!")

$ ->

$("h1").click ->

console.log("click!")

構文2

動的に追加された要素にも対応するため、イベントが発生するたびに指定された範囲内でセレクタで指定されたオブジェクトを探索する。

この場合のon()メソッドは”イベントハンドラ・アタッチメント”の一つで、特定のイベントとそれに対するハンドラを結び付ける機能を持つ。

$(探索範囲のセレクタ).on(イベント名、セレクタ、ハンドラ)

1	$(探索範囲のセレクタ).on(イベント名、セレクタ、ハンドラ)

イベント名とセレクタは文字列で指定。

以下の例では、body要素の中の任意の要素がクリックされるとalertが立ち上がる。この場合は、H1、H2のいずれをクリックしてもalertが立ち上がる。

<body>

<h1>H1</h1>
<h2>H2</h2>

<script type="text/coffeescript">
$ ->
  $("body").on "click", (evt) ->
    alert("click!")
</script>


</body>

<body>

$ ->

$("body").on "click", (evt) ->

alert("click!")

</script>

</body>

また、on()メソッドの引数を以下のようにすると、H1をクリックしても反応せず、H2をクリックした時だけalertが立ち上がる。

  $("body").on "click", "h2", (evt) ->

1	$("body").on "click", "h2", (evt) ->

イベントの種類、イベントハンドラ・アタッチメントについては、jQueryのイベントを参照。

JS/ES – JQuery – 基本

2016-06-28 / tau / コメントする

準備

JQueryのライブラリーを読み込む。

CDN (Contents Delivery Network)から読み込む場合の例は以下のとおり。

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

ライブラリーをダウンロードする場合はURLをローカルのファイルパスにする。

記述位置～readyイベント

HTML要素に作用する処理（スタイル変更など）はDOMの読み込み後でなければならない。

JQueryスクリプトの記述位置記述方法

オブジェクトとメソッド

オブジェクトの作成

jQueryの操作対象はページのDOM要素だが、jQueryでは、DOMのidやクラス名を使ってそのDOMのオブジェクトを作成し、それらのメソッドを通して操作する。

オブジェクトの作成はjQuery()コンストラクタを使い、セレクタとしてcssのセレクタを指定。

jQuery(セレクタ)　または　$(セレクタ)

1	jQuery(セレクタ)　または　$(セレクタ)

先の例では、id=”header”を与えられたオブジェクトを以下の様に作成している。

jQuery("#header")　または　$("#header")

1	jQuery("#header")　または　$("#header")

要素指定

様々な要素指定方法を参照。

メソッドによる操作

メソッドは各オブジェクトのクラスに定義されており、他のオブジェクト指向言語と同じ形で呼び出す。

jQuery("#header").css("color", "blue")

1	jQuery("#header").css("color", "blue")

この例では”#header”で作成したオブジェクトに対して、cssメソッドで前景色を青にするよう指定している。

これをエイリアスを用いて書くと以下の通り。

$("#header").css("color", "blue")

1	$("#header").css("color", "blue")

メソッドの機能

メソッドには、機能に応じて以下の種類がある。

オブジェクトの情報を取得するもの
オブジェクトに対して操作を行うもの
オブジェクトのイベント処理を行うもの

JQuery – メソッドに詳細。