Category Archives: Javascript

js explorer 対応

for文

// 修正前
for (var u of users){

// 修正後
for( var i=0; i<users.length; i++){

option

// 修正前
var options = e.currentTarget.selectedOptions

// 修正後
var options = [];
for (i = 0; i < e.currentTarget.options.length; i++){
  if (e.currentTarget.options[i].selected){
    options.push(e.currentTarget.options[i])
  }
}

javascript dom読み込みタイミング

html

<html>
<head>
  <title>JavaScript Sample</title>
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <meta name="viewport" content="width=device-width">

  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- JS -->
  <script src="js/jquery.min.js" type="text/javascript"></script>
  <script src="js/bootstrap.min.js" type="text/javascript"></script>
  <script src="js/app.js" type="text/javascript"></script>
</head>

<body>
  <div class="hello"> // ここにjqueryでdom追加
  </div>
</body>
</html>

js

$(function(){
  addHello($('.hello')); // domを読み込んでから実行
})

function addHello($div){
  $div.append($('<div>').text("hello"))
}

注意

// $(function(){ の中で、実行しないと、domを読み込みが完了していないため処理が正常に終了しない
addHello($('.hello'));

function addHello($div){
  $div.append($('<div>').text("hello"))
}

javascript undefinedのエラー回避

$(function(){
  var u = new User("yyy")
  // console.log(u.age.length) // u.ageがundefinedのため、lengthメソッドを実行するとエラーがでる

  // 以下のやり方で回避できる
  if (u.age){
    console.log(u.age.length)
  }
})

function User(name, age){
  this.name = name
  this.age = age
}

var array = [{id: 1, name: "yyy"},{id: 2, name: "mmmm"}]
for (var i in array){
  console.log(array[i].id)
  console.log(array[i].name)
}