Category Archives: Javascript

callback

var task = function(string){
  alert(string)
}

doTask(task)

function doTask(task){
  var string = "hello"
  task(string)
}

別の書き方

callbackFunc(function(string){
  alert(string)
})

function callbackFunc(callback){
  var string = "hi"
  callback(string)
}

関数を関数の引数にする

引数なしの関数を引数にする場合

doTask(sayHello)

function doTask(func){
  func()
}
function sayHello(){
  alert("hello!")
}

引数ありの関数を引き数にする場合

doTask(sayHello)

function doTask(func){
  var string = "hi"
  func(string)
}
function sayHello(string){
  alert(string)
}

ボタン作成

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()