Javascript/標準javascript

javascript技術メモ

トレース

alert("test");
//firebugが使えれば
console.log("test");

キャスト

文字列から数字

parseInt("1234");

数字から文字列

num = 1234;
num.toString(10); // "1234"

整数化

parseInt(1.23);

3桁,区切り

num = num.toLocaleString() // 1,234

配列宣言

xx = new Array();
xx[0] = "AAA";
delete xx[1]; // 要素削除

xx = []; // でも良い

配列追加

xx = [];
xx.push("hoge");

objからjson変換

JSON.stringify(obj);

文字列式から値を得る

ans = eval("1 + (2 * 3)");

タグ付け

document.write("太字".bold());

置換

str = 'hogehoge';
str = str.replace(/hoge/g, 'piyo');
// piyopiyo

正規表現

str = "123:345";
x = str.match(/[\d]+/g);
for (i in x) {
 alert(x[i]);
}
"12:34".match(/(\d+):\d+/);
document.write(RegExp.$1);   // → 12

正規表現でタイトルタグ取得

var html = "<title>testdesu</title>";
var titlematch = html.match(/<title>([^<]*)<\/title>/i);
var title = (titlematch != null) ? titlematch[1] : null;

undefined判定

if (typeof hoge !== "undefined") {

bodyエレメント

document.body
document.getElementsByTagName("body")[0] // こっちだとIEで使えない

エレメント書換

document.getElementById("id1").src = "http://k.yimg.jp/images/top/sp/ylogo_n.gif";
<img id="id1" src="xx.gif">

document.allはie用なので使用しない。

タグ名でエレメント書換

oElements = document.getElementsByTagName("img");
for (i = 0; i < oElements.length; i++) {
 oElements[i].src = "http://k.yimg.jp/images/top/sp/ylogo_n.gif";
}

エレメント追加・削除

// 追加
var oDiv = document.createElement("div");
oDiv.setAttribute('id', 'id1');
oDiv.innerHTML = "test";
document.body.appendChild(oDiv);

// 削除
var oDiv = document.getElementById("id1");
oDiv.parentNode.removeChild(oDiv);

// 先頭に追加
document.getElementsByTagName("body")[0].insertBefore(oDiv, document.getElementsByTagName("body")[0].firstChild);

別のid付きdivタグをあるdivタグへ追加

document.getElementById("ad_300x250_dummy")
  .appendChild(document.getElementById("ad_300x250_source"));

内部データ表示

for (i in objdata) {
 document.write(i+"<br>"+objdata[i]+"<br><br>");
}

postする

function fpost() {
window.open("about:blank", "postWindow", "width=550,height=600").focus();
document.f1.url.value = "http://www.google.com";
document.f1.submit();
}

フォーム

var f = document.createElement("form");
f.setAttribute("action", "ttp://localhost/request.php");
f.setAttribute("method", "post");
f.setAttribute("target", "postWindowPopup");
f.setAttribute("name", "postWindow");
f.setAttribute("id", "postWindow");
f.style.display="none";
var i = document.createElement("input");
i.setAttribute("type","hidden");
i.setAttribute("name","url");
i.setAttribute("value","");
f.appendChild(i);
document.getElementsByTagName("body")[0].appendChild(f);

ボタン

<input type="button" value="OK" onclick="return fpost();">

radioボタンを押すと自動でsubmitを実行

<form action="/hogehoge" method="POST">
<input type="radio" name="mode" onclick="javascript:this.parentNode.submit();" />hoge
<input type="radio" name="mode" onclick="javascript:this.parentNode.submit();" />fuga
<input type="submit" value="表示">
</form>

ブラウザからJSをデバック実行

パス表示欄にjavascript:alert(ファンクション名)と設定すると中身を閲覧できる。

ブラウザからクッキーデータを表示

javascript:alert(document.cookie)

select選択後、自動読み込み

 <form name="f1" action="./">
 <select name="d1" onchange="javascript:document.f1.submit();">
 <option value="1">1
 <option value="2">2
 </select>
 <input type="submit" value="送る">
 </form>

Selectタグ表示・非表示(IE6用)

var selectErrorTag = function(dp) {
 if (navigator.userAgent.indexOf("MSIE 6") == -1) {return;} // IE6以外は抜ける
 if (dp != "visible" && dp != "hidden") {return;} // 表示・非表示
 var selects = document.getElementsByTagName('select');
 if (selects == null) {return;}
 for (var i = 0;i < selects.length;i++) {
  selects[i].style.visibility = dp;
 }
};
selectErrorTag("hidden");
selectErrorTag("visible");

リンクからjavascript実行

 <a href="javascript:method1(' + num + ')">a</a>

ieでjavascriptを切る

ｲﾝﾀｰﾈｯﾄｵﾌﾟｼｮﾝ・セキュリティ・レベルカスタマイズ・スクリプト・アクティブスクリプトを無効

javascriptからjavascriptを呼び出す

document.write(unescape("%3Cscript src='http%3A//www.example.com/test.js' type='text/javascript' charset='utf-8'%3E%3C/script%3E"));
エスケープはhttp://www.broadband-xp.com/hidesource/escape.htmlで調査可能

イベント追加処理(ie8以下のみ不可能

var target = document.getElementById('btn1');
target.addEventListener("click", click1, error1);
function click1(e) {
  alert("test");
}
function error1(e) {
  alert("err");
}

開く閉じるのサンプル

<html>
<head>
<script type="text/javascript">
<!--
function close1() {
 document.getElementById('select').style.display='none';
 document.getElementById('link').innerHTML="<a href='javascript:void(0);' onClick='open1();'>開く</a>";
}
function open1() {
 document.getElementById('select').style.display='block';
 document.getElementById('link').innerHTML="<a href='javascript:void(0);' onClick='close1();'>閉じる</a>";
}
//-->
</script>
</head>
<body>
■<span id="link"><a href="javascript:void(0);" onClick="open1();">開く</a></span>
<div id="select" style="display:none;">
<SELECT name="select1">
  <OPTION value="0" selected>test</OPTION>
  <OPTION value="1">test1</OPTION>
</SELECT>
</div>
</body>
</html>

全てチェックのサンプル

<html>
<head>
<script>
/**
 * 全てチェック
 */
function allcheck(argfrm, argelname, argischecked) {
    var i = 0;
    var cntel = 0;
    if (argfrm.elements[argelname].length == null) {
        argfrm.elements[argelname].checked = argischecked;
    }
    else {
        cntel = argfrm.elements[argelname].length;
        for (i = 0; i < cntel; i++) {
            argfrm.elements[argelname][i].checked = argischecked;
        }
    }
    return true;
}
</script>
</head>
<body>
<a href='#' onclick='allcheck(f1, "chki[]", true); return false;'>すべてチェック</a>｜<a href='#' onclick='allcheck(f1, "chki[]", false); return false;'>すべて解除</a>
<form action="/" method="post" name="f1">
 <input type='checkbox' name='chki[]' value='1' checked>
 <input type='checkbox' name='chki[]' value='2' checked>
 <input type='checkbox' name='chki[]' value='3' checked>
</form>
</body>
</html>

一定時間で実行

myfunc();
function myfunc() {
    alert("test");
    var timerID = setTimeout("myfunc()",10000);
}

データ追加

var users = ['taro', 'suzuki'];
users[5] = 'takagi';
for (var i in users) {
  console.log(i + ":" + users[i]);
}
0:taro
1:suzuki
5:takagi

while文

i = 10;
while (i < 20) {
  i++;
  console.log(i);
}

うるう年

console.log(checkLeap(2000));
function checkLeap(year) {
  if (year % 4 == 0) {
    if (year % 100 == 0) {
      if (year % 400 == 0) {
        return true;
      }
      return false;
    }
    return true;
    }
  return false;
}

一行で書く場合：http://www.hoge256.net/2007/08/64.html

検索フォームが空のときは実行しない

<form action="/" name="form_bottom" onSubmit="if(!query.value) return false;">
<input type="text" value="" name="query" />
<input type="submit" />
</form>

onload処理追加

window.onload = function(){
  // ここに処理追加
}

参照: http://qiita.com/mimoe/items/74cb3a01a30162759fdd

android,iphoneで遷移先を変える

<center>
<a href="https://play.google.com/store/apps/details?id=com.mskjgo.flicklearning&hl=ja" title="スマホでタイピングならフリッ>クラーニング" target="_blank" onclick="ad_click();">
<img src="/assets/img/flicklearning_300x250-min.png?20190403" height="250px" alt="フリックラーニング" border="1" />
</a>
</center>
<script type="text/javascript">
    function ad_click() {
        var ua = navigator.userAgent;
        var url = "https://play.google.com/store/apps/details?id=com.mskjgo.flicklearning&hl=ja";
        if ((ua.indexOf('iPhone') > 0 && ua.indexOf('iPad') == -1) || ua.indexOf('iPod') > 0) {
          url = "https://itunes.apple.com/jp/app/id1454789018?mt=8";
        }
        if (ua.indexOf('Android') > 0) {
          url = "https://play.google.com/store/apps/details?id=com.mskjgo.flicklearning&hl=ja";
        }
        window.open(url, '_blank');
    }
ad_click();
</script>

プロパティ存在判定

if (user.hasOwnProperty('age')) {
}

連想配列存在判定

if (hoge[0]) {
}

タグ内のidのtext取得

<p id="hello1">Hello1</p>
<script>
  console.log(document.getElementById("hello1").textContent); // Hello1
</script>

タグ内のclassのtext取得

<p class="hello2">Hello2</p>
<script>
  console.log(document.getElementsByClassName("hello2").textContent); // Hello1
</script>