javascript


PHPの配列をjavascriptに渡す

PHPの配列をjavascriptに渡す場合は、いったんjson形式に変換するといい。

スクリプト例 ここから
--------------------------------------------------------
<?php

$hairetu = array('りんご', 'もも', 'なし');

//配列をJavaScriptに渡すために一度jsonに変換
$jsonTest=json_encode($hairetu);

?>

<html>
<head>
<title>タイトル</title>
</head>

<body>
<script type="text/javascript">

//JSON.parseを使って配列を受け取る
var test=JSON.parse('<?php echo $jsonTest; ?>');

for (var i = 0; i < test.length; i++) {

alert(test[i]);

}

</script>

</body>
</html>

--------------------------------------------------------
ここまで

参考サイト

http://future-software-labo.anyagent.net/php%E3%81%8B%E3%82%89javascript%E3%81%AB%E9%85%8D%E5%88%97%E3%82%92%E6%B8%A1%E3%81%99/

javascriptファイルが外部ファイルの場合

PHPファイル
--------------------------------------------------------
//カスタムデータ属性にjson形式の配列をセット
<script id="script" src="js/script.js" data-json-test ='<?php echo json_encode($hairetu)?>'></script>
--------------------------------------------------------

javascriptファイル

script.js(外部ファイル)
--------------------------------------------------------
//jQueryを利用してカスタムデータ属性にアクセス
var $script = $('#script');
var test = JSON.parse($script.attr('data-json-test'));
--------------------------------------------------------

参考サイト

http://qiita.com/cither/items/b98cc4e237dcc8f7e51f

http://dresscording.com/blog/html5/custom_data_attribute.html

【javascript】touchendでうまく座標が取れない件

iOS の safari において touchend で取得した座標を alert で表示するとうまく座標を表示できない事象が発生。

原因不明でバグのような気がするが、次のように対処できる。

------------------------------
alert('座標:' + touchX);
------------------------------

↓↓↓

------------------------------
setTimeout(function(){ alert('座標:' + touchX); }, 0);
------------------------------

参考ページ:

http://gomojp.blog77.fc2.com/blog-entry-144.html

【javascript jQuery】eachでループして出力するとundefinedが出る

jQuery(javascript) で eachでループして出力すると undefined が出た。

//each で配列を展開
-------------------------
var my_value;
$.each(my_value, function(i, value) {
all_my_value += my_value;
});
-------------------------

上記の all_my_value は先頭に undefined という文字が入る。原因は var my_value; の部分で変数に何の値も代入していないこと。

undefined は 未定義値のこと。変数を宣言だけして何も代入していないと出る。

//これだと undefined の出る可能性がある
-------------------------
var 変数名
-------------------------

出したくなければ殻の値でも入れておく

//これだと undefined は出ない
-------------------------
var 変数名 = ""
-------------------------

参考ページ こちら

【HTML5 javascript】contenteditableの値をPOSTする

contenteditable で編集可能にした値はテキストエリアやテキストフィールドにあるわけではないので form タグで囲っただけでは POST できない。

POST は javascript を用いれば可能。

--------------------------------------------------
<input type="button" value="送信" onclick="document.form1.my_value.value = document.all.textarea1.innerText;document.form1.submit();">

<form method="post" name="form1" action="">

<div id="textarea1" contenteditable>この文字列を送信する</div>
<input type="hidden" name="my_value" value="">

</form>
--------------------------------------------------

contenteditable で編集可能な値を隠しフォーム(hidden)に入れて、それを javascript で送信する。

POST したい値が複数ある場合は、値を「;」で区切ればいい。

--------------------------------------------------
<input type="button" value="送信" onclick="document.form1.my_value1.value = document.all.textarea1.innerText;document.form1.my_value2.value = document.all.textarea1.innerText;document.form1.submit();">
--------------------------------------------------

【javascript】テキストエリアの文字列を別のテキストエリアに表示する

javascript で、テキストエリアの文字列を別のテキストエリアに表示したときの覚書

以下のようにテキストエリアが二つある。
----------------------------------------------
<div>
<form id="form1">
<textarea name="msg" cols=40 rows=4 id="textarea1">
この文字を textarea2 に表示したい
</textarea>
</form>
</div>

<div>
<form id="form2">
<textarea name="msg" cols=40 rows=4 id="textarea2">
ここに textarea1 の文字列が表示される
</textarea>
</form>
----------------------------------------------

textarea1 の文字列を textarea2 に表示する、javascript の記述

idを指定してアクセスする記述
----------------------------------------------
document.forms["form2"].textarea2.value = document.forms["form1"].textarea1.value;
----------------------------------------------

こういう記述もある
----------------------------------------------
document.forms.form2.textarea2.value = document.forms.form1.textarea1.value;
----------------------------------------------

formは番号指定でも可能
----------------------------------------------
document.forms[1].textarea2.value = document.forms[0].textarea1.value;
----------------------------------------------

form の name で指定する方法
----------------------------------------------
<div>
<form id="form1" name="form_name1">
<textarea name="msg" cols=40 rows=4 id="textarea1">
この文字を textarea2 に表示したい
</textarea>
</form>
</div>

<div>
<form id="form2" name="form_name2">
<textarea name="msg" cols=40 rows=4 id="textarea2">
ここに textarea1 の文字列が表示される
</textarea>
</form>
----------------------------------------------

form の name で指定する場合、forms の記述は不要
----------------------------------------------
document.form_name2.textarea2.value = document.form_name1.textarea1.value;
----------------------------------------------

参考サイト

画像ファイルを持っていかれないようにする方法

インターネットで公開している以上、絶対に画像を持っていかれない方法はない。

ここで紹介するのは、画像を持っていきにくくして、知識の乏しい人なら画像の持ち出しを諦めるだろう方法。そして簡単な実装できる方法を選んだ。

1.baseタグで基準となるURLを設定する

baseタグは、相対パスで書かれたURLの基準を指定するもの。

もしページのソースを見られたら画像の場所がわかってしまう。

絶対パス
----------------------------
<img src="http://example.com/image2001/image01.jpg">
----------------------------

相対パス
----------------------------
<img src="image2001/image01.jpg">
----------------------------

上の二つどちらも、画像ファイルは「http://example.com/image2001/」の中にあると読める。

そこでbeseタグを使うと画像ファイルの場所を少し分かりにくくできる。

headタグの間にbaseタグを記述する
----------------------------
<base href="http://example.com/image2001/">
----------------------------

すると「image2001フォルダ」までが基準になるのでimgタグへの記述は下記のようになる。

相対パスで
----------------------------
<img src="image01.jpg">
----------------------------

「image2001」の記述を省略できるのでimgタグ内だけを見ても画像の場所が分からなくなる。

2.baseタグはjavascriptで隠す。

imgタグだけを見ても画像ファイルの場所は分からないが、headタグ間に記述したbaseタグを見ると分かってしまう。
そこでbaseタグはheadタグ間に書かずに、外部ファイルとしてjavascriptで書くとよりいい。

外部ファイルとして読み込む
----------------------------
document.write('<base href="http://example.com/image2001/">');
----------------------------

参考

http://www.broadband-xp.com/hidesource/base.html

3.右クリックを無効にする

これまでの実装でソースを見ても画像ファイルの場所をわかりにくくすることは出来るが、画像自体を右クリックすれば画像のURLも分かるし、保存も出来てしまう。

そこで右クリックを禁止する。

bodyタグ内に記述
----------------------------
<body onContextmenu="return false">
----------------------------

これだと右クリックは防げるがデスクトップへドラッグすれば保存できてしまう。
そこでjquery.dwImageProtector.jsというjqueryのプラグインを使う。

使い方はこちらこちらが分かりやすい。

http://www.css-lecture.com/log/javascript/dwimageprotector.html

jquery.dwImageProtector.jsのソースはこんな感じ
---------------------------------------------------------
jQuery.fn.protectImage = function(settings) {
settings = jQuery.extend({
image: 'blank.gif',
zIndex: 10
}, settings);
return this.each(function() {
var position = $(this).position();
var height = $(this).height();
var width = $(this).width();
$('<img />').attr({
width: width,
height: height,
src: settings.image
}).css({
border: '1px solid #f00',
top: position.top,
left: position.left,
position: 'absolute',
zIndex: settings.zIndex
}).appendTo('#content')
});
};
---------------------------------------------------------

head内のソースはこう
---------------------------------------------------------
<script src="http://example.com/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://example.com/js/jquery.dwImageProtector.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bind('load', function() {
$('img.protect').protectImage();
});
</script>
---------------------------------------------------------

保護するイメージには class を設定する
---------------------------------------------------------
<img src="image01.jpg" alt="" width="500" height="500" class="protect" />
---------------------------------------------------------

画像を囲む枠がずれる場合は「.appendTo('body')」の部分をbodyでなく任意の場所に変更すればうまくいく。

【jquery】masonryがスマホ画面で横並びしない場合の解決方法

javascript プラグインの masonry を使ったページでウインドウが横並びしない場合の対処法。

対処法 → columnWidth オプションを設定する。

------------------------------------------------------
<div class="js-masonry">

↓↓↓↓

<div class="js-masonry"
data-masonry-options='{
"columnWidth": 50,
"itemSelector": ".item",
"transitionDuration": "1.5s"
}'
>
------------------------------------------------------

columnWidth は、ボックスの横幅を指定するオプション。
masonry のデフォルトでは、スマホの画面幅にに二つ以上ウインドウを並べることはサイズ的に無理らしい。
そこで、50pxとかボックスのサイズを小さく指定する必要がある。

jqueryで文字列を置換するreplace関数【javascript】

jquery で文字列を置換するには、javascript のreplace関数を使う。
--------------------------------------------
new_text = text.replace(/探す文字列/g, '置換後の文字列');
--------------------------------------------

第一引数は正規表現で。g 修飾子はマッチするものすべてを見つける。

【jquery】配列内の重複を削除する【javascript】

jquery に unique() という関数があるが、これはDOM要素の配列の重複を削除するもの。文字列が入った配列の重複を解消するものでない。

jquery(javascript)で配列の内容をユニークにするには少し手間を掛ける必要がある。

//配列内の文字列の重複を削除する自作関数。
---------------------------------------------------------
function uniqueArray(array) {
var storage = {};
var resultAry = [];
var value;
for ( var i=0; i

cookieの値をjavascriptでページ上に表示する

cookieの値をjavascriptでページ上に表示する方法

javascriptの記述
---------------------------------------------------
// クッキーの値を取得 getCookie(クッキー名);
function getCookie(c_name){
var st="";
var ed="";
if(document.cookie.length>0){
// クッキーの値を取り出す
st=document.cookie.indexOf(c_name + "=");
if(st!=-1){
st=st+c_name.length+1;
ed=document.cookie.indexOf(";",st);
if(ed==-1) ed=document.cookie.length;
// 値をデコードして返す
return unescape(document.cookie.substring(st,ed));
}
}
return "";
}

// クッキーの値をアラートで表示
function checkCookie(){
if(getCookie('testcookie')){
var setName = getCookie('testcookie');
document.write(setName);
//alert(setName); //アラートならこっち
}
}
---------------------------------------------------

cookieの値を表示したい箇所に記述
---------------------------------------------------
<script type="text/javascript">
checkCookie();
</script>
---------------------------------------------------

もしPHPで処理したいなら
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
if (isset($_COOKIE["testcookie"]) {
//処理内容
}
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

参考サイト:こちら

cookieを保存する場合は、こちら

2 / 3123