Javascript:javascriptで配列に値を格納する

javascript配列に値を格納する方法はいくつかあります。
いつも忘れてしまうので、それぞれの格納方法をメモします。


配列の初期値を設定する場合

配列を生成し、配列の値を設定する方法です。

var arr = new Array("a", "b", "c", "d", "e");

又は下記のように設定します。

var arr = ["a", "b", "c", "d", "e"];

配列の要素に値を格納

var arr = new Array();
arr[0] = "a";
arr[1] = "b";
arr[2] = "c";
arr[3] = "d";
arr[4] = "e";

※要素を指定して格納する場合、配列を生成する必要があります。


push()メソッドを使用し値を追加

push()メソッドを使用すると配列の一番最後に値が追加されます。

var arr = new Array();
arr.push("a");
arr.push("b");
arr.push("c");
arr.push("d");
arr.push("e");

※要素を指定して格納する場合、配列を生成する必要があります。


Javascript:submitした時の位置情報を取得し、ロード時に表示位置を指定する

HTMLのフォームでsubmitした場合、ロードした画面の表示スクロール位置はリセットされてページの先頭が表示されます。
submitした時の表示位置のまま、ページロード後もスクロール位置を変更しないで表示したい場合があります。

今回はJavascriptsubmitした時の位置情報を取得し、ロード後の画面でsubmitした時のスクロール位置を変更しないで表示する方法を記載します。


Javascriptでブラウザの位置情報を取得し、ロード時に表示位置を指定

下記で縦と横の位置情報を取得します。


<script type="text/javascript">
    x = document.documentElement.scrollLeft || document.body.scrollLeft;
    y = document.documentElement.scrollTop || document.body.scrollTop;
</script>

submit時に取得した位置情報をhiddenに格納し、データをPOSTします。
 
 
画面ロード時に送信した位置情報で画面のスクロール位置を指定します。
onloadイベントで表示スクロール位置を設定しています。


<script type="text/javascript">
window.onload = function(){
    window.scroll(<?php echo $data['x']; ?>, <?php echo $data['y']; ?>); 
}
</script>

上記の方法で値を取得しておけば、ロード時に表示位置を変更せず画面を表示することができます。
位置情報はphpでechoしています。


Javascript:JavascriptでPOSTの値を追加する

Javascriptでsubmitボタン押下時にPOSTされるデータを追加したい場合があります。
フォーム内に複数のボタンを設置した際に押されたボタンによってPOSTするデータを追加したい場合あったので、その時のメモです。


■ Javascript

function funcBtn() {
	// エレメントを作成
	var ele = document.createElement('input');
	// データを設定
	ele.setAttribute('type', 'hidden');
	ele.setAttribute('name', 'hoge');
	ele.setAttribute('value', 'テスト');
	// 要素を追加
	document.myForm.appendChild(ele);
}

■ HTML

<form method="post" id="myForm" name="myForm">

    (省略)

    <input type="submit" name="btn" value="ボタン" onclick="funcBtn();" />

</form>

ボタン押下時、hiddenでhogeにテストという値がPOST送信されます。


javascript:javascriptで文字列を連結

javascriptで文字列を連結させたい場合は、「+」演算子を使用する。
「+」演算子は文字列の連結以外にも加算などでも使用するので数字などの連結の際は注意する。
加算と文字列結合を両方とも行う場合にミスをしてしまう可能性が多いので、数値の加算をする際は括弧を使用する。

■ 文字列結合

[文字列] + [文字列]

■ 使用例1

<script type="text/javascript">
str = '文字列' + '連結';
alert(str);
</script>
文字列連結

■ 使用例2

<script type="text/javascript">
str = '10' + '10';
alert(str);
</script>
1010

■ 使用例3

<script type="text/javascript">
str = 10 + 10;
alert(str);
</script>
20

javascript:javascriptでphpのnumber_formatを使用

javascriptでphpのnumber_formatを使用する方法。
金額などを表示する際に結構使えるかも。
※少数点がない場合のみで使用する

■ 使用例

<script type="text/javascript">

// 「,」区切りで出力
function number_format(num) {
return num.toString().replace(/([0-9]+?)(?=(?:[0-9]{3})+$)/g , '$1,');
}

var num = 1000000;

alert(number_format(num));

</script>

■ 出力結果

1,000,000