タグ別アーカイブ: Javascript

Javascript：javascriptで配列の中身をランダムに並び替える

Posted on by
返信

Javascriptで配列の中身をランダムに並び替える方法をメモします。

sort()メソッドを使用することで配列の順番を並び替えることができます。
引数がない場合はアルファベット順でソートされます。

今回はsort()メソッドに無名関数を指定し、random()メソッドで生成した値に
‘0.5’を引いた値で配列の順番をソートしています。

img.sort(
	function() {
		return Math.random() - 0.5;
	}
);

正の値、負の値、0で比較し配列を並び替えます。

下記は画像をランダムに並べ替えて表示した際の方法です。

■ 複数の画像をランダム表示

【javascript,jQuery】

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        // 配列を設定
        var img = new Array("img1.jpg", "img2.jpg", "img3.jpg");

        // 配列の中身をランダムに並び替える
        img.sort(
            function() {
                return Math.random() - 0.5;
            }
        );

        // 配列をループさせ、imgタグを出力
        for(i = 0; i < img.length; i++) {
            $("div#hoge").append('<img src="img/' + img[i] + '" />');
        }

    });
</script>

【HTML】

<div id="hoge"></div>

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

Posted on by
返信

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した時の位置情報を取得し、ロード時に表示位置を指定する

Posted on by
返信

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

今回はJavascriptでsubmitした時の位置情報を取得し、ロード後の画面で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しています。

HTML：WEBサイト内の文章・文字列をコピー禁止にする

Posted on by
返信

WEBサイトを作成する場合、ページの内容ごとに様々な文章を記載すると思います。
WEBサイト閲覧者はサイト内の文章を「右クリック→コピー」や「Ctrl+C」などで簡単にコピーすることができますが、サイト内で記載した独自の文章や文字列等をコピーされたくない場合があります。
今回はJavaScriptを使用して、HTMLに記載した文章・文字列等のコピーを禁止・不可にする対策方法をメモします。

コピー禁止したい文章や文字列を入れているタグに下記のコードを記載します。
記載したタグ内の文字をコピーすることができなくなります。

onCopy="return false;"

■ ページ全体をコピー禁止する場合

bodyタグに「onCopy=”return false;”」を追加します。

<body onCopy="return false;">コピー禁止</body>

■ 指定したタグをコピー禁止する場合

divタグ内の文字を禁止する場合、divタグに「onCopy=”return false;”」を追加します。

<div onCopy="return false;">コピー禁止</div>

■ コピー時にアラートを表示する場合

「onCopy」に「alert(‘出力文字列’);」を追加します。

<div onCopy="alert('コピー禁止'); return false;">コピー禁止</div>

しかし、上記の方法でコピー禁止にしても方法によってはコピーができてしまうので、あくまでも簡単にコピー禁止を対応した場合の処理です。

ちなみに右クリックを禁止したい場合は下記のコードを記載します。

 onContextmenu="return false;"

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

Posted on by
返信

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送信されます。