2019年4月6日 (土) 04:29時点における版

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>

「Javascript/標準javascript」の版間の差分

2019年4月6日 (土) 04:29時点における版

目次

javascript技術メモ

トレース

キャスト

整数化

3桁,区切り

配列宣言

配列追加

objからjson変換

文字列式から値を得る

タグ付け

置換

正規表現

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

undefined判定

bodyエレメント

エレメント書換

タグ名でエレメント書換

エレメント追加・削除

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

内部データ表示

postする

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

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

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

select選択後、自動読み込み

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

リンクからjavascript実行

ieでjavascriptを切る

javascriptからjavascriptを呼び出す

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

開く閉じるのサンプル

全てチェックのサンプル

一定時間で実行

データ追加

while文

うるう年

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

onload処理追加

android,iphoneで遷移先を変える

案内メニュー

検索