Category Archives: Javascript

ボタン作成

htmlでボタン表示するケース

html

<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
  <input type="button" value="button" onClick="buttonAction()">
</body>

js

var buttonAction = function() {
  console.log(this.event.target.value)
}

jqueryでボタンも表示するケース

js

'use strict'

$(function(){
  Button.create("button1");
  Button.create("button2");
});

class Button {
  static create(value) {
    $('body').append('<input type="button" value="' + value + '" class="button">');

    $(".button").click(function(event){
      console.log(event.target.value)
    });
  }
}

条件式

$(function(){
  var now = new Date();
  // 以下の書き方でelseの条件分岐が可能 
  var greeting = "Good" + ((now.getHours() > 17) ? " evening." : " day.");
  console.log(greeting)
})

要素のDOM移動

HTML

test divの中にボタンを配置する

<div class="test">
  <button type="button" name="aaa" value="aaa" class="mybutton">
    click
  </button>
</div>
<div class="myspace"></div>

JS

以下のJQUERYでspace divの中にボタンを移動させることができる

$(function(){
  var myButton = $('.myButton')
  myButton.appendTo(".mySpace")
})

JS プルダウン

HTML

<head>
<script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
  <select name="myPulldown" id="myPulldown">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
  </select>
</body>

JS

$(function(){
  $('#myPulldown').change(function(){
    // 選択したvalueを出力 a,b,c
    console.log($(this).val())

    // 選択した要素名を出力 A,B,C
    console.log($('#myPulldown option:selected').text())
  })
})

コンストラクタメソッドのオーバーライド

var Test = function(value) {
  this.value = value

  // このメソッドをインスタンス生成後にオーバーラードする
  this.setValue = function(value) {
    return value
  }

  this.sayValue = function() {
    var value = this.setValue(this.value)
    console.log(value)
  }
}

// インスタンス生成
var test = new Test(5);

// 5がconsoleに出力される
test.sayValue();

// オーバーライド
test.setValue = function(value) {
  return value * 10;
}

// 50がconsoleに出力されるようになる
test.sayValue();

その他参考

各インスタンスごとにオーバーラードしているので、
他のインスタンスは影響を受けない。

var Test = function() {
  this.sayHello = function() {
    console.log("default")
  }
}

var test1 = new Test()
test1.sayHello = function() {
  console.log("custom")
}
test1.sayHello()
var test2 = new Test()
test2.sayHello()

callback 引数あり

var Test = function(value) {
  this.sayValue = function(callback) {
    var myConsts = 5

    // callbackに引数を与える
    var value = callback(myConsts);
    console.log(value)
  }
}

var test = new Test();
test.sayValue(function(myConsts){
  // callbackの引数を使って計算結果をリターン
  return myConsts*2
})

// この場合、10がconsole.logに出力される

コンストラクタ継承、コンストラクタ変数オーバーライド

var Profile = function() {
  this.sayHello = function() {
    console.log("hello")
  }
}

var Profile2 = function() {};

// Profileコンストラクタを継承
Profile2.prototype = new Profile();

// sayHelloメソッドをオーバーライド
Profile2.prototype.sayHello = function() {
  console.log("hello!")
}

var profile = new Profile()
var profile2 = new Profile2()

// helloが返る
profile.sayHello()

// hello!が返る
profile2.sayHello()

フィールド更新時に別のフィールドを更新

var editEvents = ['app.record.create.show', 'app.record.edit.show'];
kintone.events.on(editEvents, function(event) {
  console.log("accessed to editpage");
  kintone.events.on('app.record.edit.change.フィールド1', function(event) {
    console.log("changed field1");
    updateField(event, "フィールド2", "yes");
    return event;
  });
});

var updateField = function(event, field, value) {
  var record = event.record;
  record[field].value = value;
  return event;
};