2016年3月31日木曜日

javascript $_GET ファンクションの作成

javascript $_GET ファンクションの作成


function $_GET(q){
        var temp = {};
        var search = location.search.split('?')[1].split('&');
        for(var i = 0; i < search.length; i++){
                var para = search[i].split('=');
                temp[para[0]]=para[1];
        }

        if(q){
                return temp[q];
                // return temp.q; // NG
        }else{
                return temp;
        }
}





修正
function $_GET(q){
          if(location.search.length > 0){
                        var temp = {};
                        var search = location.search.split('?')[1].split('&');
                for(var i = 0; i < search.length; i++){
                        var para = search[i].split('=');
                        temp[para[0]]=para[1];
                }

                if(temp[q]){
                        // youfunction(temp[q]);
                        // return temp.q; // NG
                        return temp[q];
                }else{
                        // console.log(temp);
                        return temp;
                }
        }
 }













2016年3月27日日曜日

onchange addEventListener の追加

onchange addEventListener の追加

ユーザーが要素の値を変更し、要素が入力フォーカスを失ったとき
 (プログラムから変更した場合には、イベントは発生しない)

<input id = "test" value = "test"/>

<script type ="text/javascript">
        var tag =  document.getElementById('test');
              tag.addEventListener('change', function(){
                      console.info('change');
                      console.log(tag.value);
                      alert('change');
                     },true);

      tag.addEventListener('click', change_value,false);

      function change_value(){
           var tag =  document.getElementById('test');
                 tag.value = 'change'
             }
</script>





onfocus and onblur addEventListener の追加

onfocus  and onblur addEventListener の追加


<input id = "test" value = "test"/>
<script type ="text/javascript">
      var tag =  document.getElementById('test');
            tag.addEventListener('focus', function(){
                  console.info('focus');
                  tag.value = 'focus';
            },false);

            tag.addEventListener('blur', function(){
                  console.info('blur');
                  tag.value = 'blur';
            },false);
</script>







onload addEventListener の追加

onload addEventListener の追加

window.onload = function(){
     console.log('fun 1');
}

window.addEventListener('load', fun2,false);

function fun2(){
     console.log('fun 2');
}

window.addEventListener('load', function(){
     console.log("fun 3")
},false);




2016年3月20日日曜日

javascript API Url 作成

javascript API Url 作成

呼び出し

lulu2.call(new link('text'));

function link(text){
    this.api_url = 'https://api.flickr.com/services/rest/?';
    this.opt = {method:'flickr.photos.search',
                api_key:'e90c9fcfd150e3811a0523e73beb86df',
                text: encodeURIComponent(text),
                sort:'relevance',     // sort:'interestingness-desc',
                privacy_filter:'public+photos',
                content_type:'photos+only',
                per_page:'30',
                format:'json',
                nojsoncallback:'1',}
  }

function lulu2(){
        var url = '';
          for(var i in this.opt){
                url = url + i + '=' + this.opt[i] +'&';
          }
        return this.api_url+url;
  }






2016年3月14日月曜日

マウスクリックチェッカー

マウスクリックチェッカー

マウスは勝手にクリックされるか?をチェックの目的です。






code

その1
var tag = document.getElementsByTagName('body');
for(var i = 0 ; i < tag.length; i++){
         tag[i].addEventListener('click',function (){
                       console.log('click');
              },false);

           tag[i].addEventListener('contextmenu',function (){
                       console.log('contextmenu');
         },false);
}


その2
var ck = 0;
var cck = 0;
var tag = document.getElementsByTagName('body');
for(var i = 0 ; i < tag.length; i++){
          tag[i].addEventListener('click',function (){
                        ck++;
                        console.info(this.nodeName);
                        console.log('click',ck);
               },false);

          tag[i].addEventListener('contextmenu',function (){
                        cck++;
                        console.info(this.nodeName);
                        console.log('contextmenu',cck);
           },false);
}









2016年3月8日火曜日

getBoundingClientRect() を利用して、スクロールの最後に、要素を追加

getBoundingClientRect() を利用して、スクロールの最後に、要素を追加

手順

1.    lastElementChild の getBoundingClientRect().top を所得
2.    window.innerHeight 高さを所得
3.    window.onscroll で window.innerHeight と getBoundingClientRect().top
      の位置を計算します。
4.    getBoundingClientRect().top は window.innerHeight + 100(約) の以内
      にスクロールされた時、要素を追加します。


          if(lll.getBoundingClientRect().top < innerHeight +100){
                qqq();
        }

        OR

          if(lll.getBoundingClientRect().top < innerHeight - 200){
                qqq();
        }


注意:
   innerHeight - 200 に設定した時に lastElementChild は -200までスクロール
が必要です。


 getBoundingClientRect()  高さの計算位置。

動作の結果





<html>
<body style="padding: 0px; margin: 0px; ">
<div id = "a"></div>
<div id = "b">getBoundingClientRect() を利用して、スクロールの最後に、要素を追加します。</div>
</body>
<script type="text/javascript">

var con = 0;
onload = function(){
           xxx;
}

onscroll = function(){
        var x = document.getElementById('a');
           lll = x.lastElementChild;
           ttt = x.firstElementChild;
                console.info('#000 last.Div', x.lastElementChild.innerText);
                console.info('#111 first.Div', ttt.getBoundingClientRect().top);
                console.info('#222 last.Div', lll.getBoundingClientRect().top);
                console.info('#333 Win.InnerHeight', innerHeight);
          if(lll.getBoundingClientRect().top < innerHeight - 100){
                qqq();
        }
}

var qqq =function(){
        var x = document.getElementById('a');
                for(var i = 0; i<90; i++){
                    var c = document.createElement('div');
                      con = con +1;
                      c.innerText = "aaaaaaaaaaaaaaaaaaaa         -"+ con;
                      x.appendChild(c);
               }
}

var xxx = (function () {
        var x = document.getElementById('a');
        for(var i = 0; i<90 ; i++){
                var c = document.createElement('div');
                con = con +1;
                c.innerText = "aaaaaaaaaaaaaaaaaaaa         -"+ con;
                x.appendChild(c);
         }
})();

</script>
</htmal>

2016年3月5日土曜日

Javascript で JSON を送信(Ajax)とPHPサーバの受信のエンコード順番

Javascript で JSON を送信(Ajax)とPHPサーバの受信のエンコード順番

Javascript 側

1.  特殊文字をエンコード
     ["] >>%22  , [&] >> %26にエンコード

2.  encodeURIComponent で 1をエンコードする。
    ["] >> %2522 ,  [&] >> %2526

3.  JSON.stringifyで送信


PHP サーバ側

1.  json_decode

2.  urldecode



確認するためのJavascript
<script type="text/javascript">
        function x(x){

        var e={};
                //データそのまま
                //NG PHP サーバー側 $_REQUEST データの所得失敗、&リンクが切れます。
                //console.info('データそのまま');
                //e.input1 = document.getElementById('input1').value;
                //e.input2 = document.getElementById('input2').value;

                //データをURLエンコード
                //NG PHP サーバー側 json_decode 失敗, " の原因でした。
                //console.info('データをencodeURIComponent');
                //e.input1 = encodeURIComponent(document.getElementById('input1').value);
                //e.input2 = encodeURIComponent(document.getElementById('input2').value);

                //データの特殊文字を%22%26にエンコード
                //NG PHP サーバー側 json_decode 失敗, " の原因でした。
                //console.info('データの特殊文字を%22%26にエンコード');
                //e.input1 = fn_replace(document.getElementById('input1').value);
                //e.input2 = fn_replace(document.getElementById('input2').value);

                //データをURLエンコード、特殊文字を%22%26にエンコード
                console.info('データをURLエンコード、特殊文字を%22%26にエンコード');
                e.input1 = encodeURIComponent(fn_replace(document.getElementById('input1').value));
                e.input2 = encodeURIComponent(fn_replace(document.getElementById('input2').value));


        console.info('#111 origi',e);
        var j = new XMLHttpRequest();
        var url ='/youtube_db/test3.php?';
        j.onreadystatechange = function(){
                if(j.readyState == 4 && j.status == 200){
                        console.info('#222 response', j.responseText);
                }
       }

        j.open('POST',url,true);
        j.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        //データをJSON.stringifyで送信
        console.info('データをJSON.stringifyで送信');
        console.info('#123 JSON.stringify',JSON.stringify(e));
        j.send('p=' + JSON.stringify(e));

        //データをそのままで送信
        //console.info('データをそのままで送信');
        //console.log('#123 json en',JSON.stringify(e))
        //j.send('p=' + e);

        function fn_replace(q){
                var x = {'&':'%26', '"':'%22'};
                for(var i in x){
                        q= q.replace(RegExp(i,'g'),x[i]);
                }
                        return q;
         }
}



//データそのまま
//NG PHP サーバー側 $_REQUEST データの所得失敗、&リンクが切れます。


//データをURLエンコード
//NG PHP サーバー側 json_decode 失敗, " の原因でした。


//データの特殊文字を%22%26にエンコード
//NG PHP サーバー側 json_decode 失敗, " の原因でした。



//データをURLエンコード、特殊文字を%22%26にエンコード



Javascript 


PHP Server

<?php
//
$x = $_REQUEST;
echo "php server\n";
echo "var_dump()\n";
var_dump($x['p']);
echo "\n";
echo "var_dump(json_decode)\n";
var_dump(json_decode($x['p']));
$temp = json_decode($x['p']);
echo "\n";
echo 'urldecode($temp->input1)'.urldecode($temp->input1);
echo "\n";
echo 'urldecode($temp->input2)'.urldecode($temp->input2);
echo "\n";
echo "\n";



echo "次は\n";
echo "URLencodeしてからjson_decode.";
echo "「\"」先にデコードされる、するとjson_decodeは NULL になります。";
echo "\n";
$y = $_REQUEST;
echo "php server\n";
echo "urldecode\n";
$temp = urldecode($y['p']);
var_dump($temp);
var_dump(json_decode($temp));


?>


'\n' >> '%0d%0a'



      function fn_replace(q){
               var x = {'&':'%26',
                           '"':'%22',
                           '\n':'%0d%0a'
                          };
                      for(var i in x){
                           q= q.replace(RegExp(i,'g'),x[i]);
                        }
                     return q;
               }















2016年3月2日水曜日

Javascript 特殊文字のエンコード

Javascript 特殊文字のエンコード


function fn_esc(q){
      var x = {'&':'%26',
                 '"':'%22',
                 };
      for(var i in x){
           q= q.replace(RegExp(i,'g'),x[i]);
           }
         return q;
   };

console.log(fn_esc('&&&""""'));
%26%26%26%22%22%22%22

"樂凡%26祁隆 - 愛%22你一%22生"




修正
2016/04/09 8:18:35

function fn_replace(q){
        var x = {'\&'        :        '%26', 
                 '\"'        :        '%22',
                 '\''        :        '%27%27',
                 ' '        :         '%20',
                 '\n'        :        '%0d%0a'
                 };
        for(var i in x){
                q= q.replace(RegExp(i,'g'),x[i]);
        }
        return q;
}