Category Archives: Javascript

js コンストラクタでselect object作成

$(function(){
  var s = new Select({1:"hello1", 2:"hello2"}, changeFunc);
  s.append();
});

function Select(values, changeFunc){
  this.object = $('<select>').append($('<option>').val(0))
  for (k in values){
    this.object.append($('<option>').val(k).text(values[k]))
  }
  this.object.bind("change", changeFunc)
  this.append = function(){$('div').append(this.object)}
  $('label').text("hi")
}

function changeFunc(event){alert($(this).val())}

js buttonをコンストラクタで生成

$(function(){
  var b = new Button("yohei",clickFunc)
  b.append()
});

function clickFunc(event){alert(event.data.name)}

function Button(name, clickFunc){
  this.name = name
  this.object = $('<button>').text("button").bind("click",{name:this.name},clickFunc);
  this.append = function(){$('div').append(this.object)}
}

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