ラベル Javascript の投稿を表示しています。 すべての投稿を表示
ラベル Javascript の投稿を表示しています。 すべての投稿を表示

2016年11月20日日曜日

Javascript Json

Json String



function getjson(){
var idolname = document.getElementsByClassName('idolname');
var idolnames ={};
var list = [];
for(var i = 0; i < idolname.length; i++){
var item = {};
item.name = idolname[i].innerText;
item.img = "https://farm4.staticflickr.com/3239/2897452239_d2cf730467_s.jpg";
item.count = "10";
item.active = "0";
list.push(item);
}
idolnames.total = idolname.length;
idolnames.idolnames = list;
console.log(JSON.stringify(idolnames));
}

2016年4月22日金曜日

Javascript Loto6

Chromeデベロッパー・ツール

function loto6(){
         var j = [];
         do{
            var chk = "OK";
            var c = Math.floor(Math.random()*(1-43)+43);
                   for (var i=0; i<j.length; i++){
                      j[i] == c ? chk = "NG": '';
                   }
                chk != "NG" ? j.push(c) :'';
        }while(j.length < 6);
        return j.sort();
}

var x = [];

for(var i = 0; i < 12; i++){
  x[i] = loto6();
}

console.table(x);







function loto6(){
    var j = [];
    do{
        var c = Math.floor(Math.random()*(1-43)+43);
        j.indexOf(c) == -1 ?j.push(c):'';
    }while(j.length < 6);
    return j.sort();
}

var x = [];
for(var i = 0; i < 12; i++){
  x[i] = loto6();
}
console.table(x);





















2016年4月10日日曜日

Youtube 播放列表插件

Youtube 播放列表插件

<!-- 以下必選項,id值不可改變 -->
<!-- mode值shuffle/order可選,defaultVol值在0至100之間,playlistid值必選,Youtube有效的播放列表id. -->
<script src="http://cdefgab.web.fc2.com/plist.js" type="text/javascript" charset="utf-8" async defer></script>
<div id="player2" mode = "shuffle" defaultVol = "3" playlistid = "PLvswSo32Xlu_TEQAnD0voe7DJ2jgp5Zmn"></div>
<!-- 以下可选项,id值不可变,其他任意 -->
<div id="mute">vol_mute</div>
<div id="volPlus">volPlus</div>
<div id="volMinus">volMinus</div>
<div id="seekTo30">seekTo30</div>
<div id="PlaybackRate">PlaybackRate</div>
<!-- <div id="nextVideo">nextVideo</div> -->
<!-- <div id="previousVideo">previousVideo</div> -->
<!-- <div id="playVideo">playVideo</div> -->
<!-- <div id="stopVideo">stopVideo</div> -->
<!-- <div id="pauseVideo">pauseVideo</div> -->


2016年4月9日土曜日

javascript 特殊文字

javascript 特殊文字

コード         出力
\'        '    シングルクォート( %27)
\"        %22    ダブルクォート
\&        %26    アンパサンド
\\        %5C     バックスラッシュ
\n        %0A     改行
\r        %0D     キャリッジリターン
\t        %09     タブ
\b        %08     バックスペース
\f        %0C     フォームフィード



var j = {
          a : "\'",
          b : "\"",
          c : "\&",
          d : "\\",
          e : "\n",
          f : "\r",
          g : "\t",
          h : "\b",
          i : "\f",
}

for (var i in j){
          console.info(i+ "   >>   " + encodeURIComponent(j[i]));
}





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月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;
}








2016年2月28日日曜日

JSON.parse ダブルクォーテーションを 解析するとエラーになります。

JSON.parse ダブルクォーテーションを 解析するとエラーになります。
eval 関数以外の方法はないでしょうか?



{"a":"\u6797\u590f\u8587 Rosina Lam \ufe63 \u5f88\u60f3\u8a0e\u53ad\u4f60 I Wish I Could Hate You (TVB\u5287\u96c6\"\u55ae\u6200\u96d9\u57ce\"\u4e3b\u984c\u66f2) (OFFICIAL AUDIO)","b":"\u6a02\u51e1&\u7941\u9686 - \u611b\"\u4f60\u4e00\"\u751f"}













2016年2月12日金曜日

イメージファイルのオリジナルサイズを確認する

イメージファイルのオリジナルサイズを確認する

.naturalHeight
.naturalWidth 

function item_cards_event(){
        var x = document.getElementsByClassName('item_cards');
        for(var i = 0; i<x.length; i++){
               x[i].addEventListener("mouseover",function(e){
                        this.style.boxShadow = "3px 3px 14px";
                    console.log(this.firstElementChild.nextElementSibling.firstElementChild.naturalWidth + 'x' + this.firstElementChild.nextElementSibling.firstElementChild.naturalHeight);
                },false);

                x[i].addEventListener("mouseout",function(e){
                         this.style.boxShadow = "1px 1px 1px";
                },false);
        }
}

item_cards_event();





function item_cards_event(){
        var x = document.getElementsByClassName('thumbnail_a');
        for(var i = 0; i<x.length; i++){
               x[i].addEventListener("mouseover",function(e){
                        this.style.boxShadow = "3px 3px 14px";
                        console.log(this.firstElementChild.alt);
                        console.log(this.firstElementChild.naturalWidth + 'x' + this.firstElementChild.naturalHeight);
                },false);
                         x[i].addEventListener("mouseout",function(e){
                         this.style.boxShadow = "1px 1px 1px";
                },false);
        }
}

item_cards_event();






2016年2月2日火曜日

location プロパティ

location プロパティ


location.href
"http://www.asus.com/Motherboards/Z170-PRO/?SearchKey=Z170/"

location.origin
"http://www.asus.com"

location.protocol
"http:"

location.host
"www.asus.com"

location.hostname
"www.asus.com"

location.pathname
"/Motherboards/Z170-PRO/"

location.search
"?SearchKey=Z170/"

2016年1月23日土曜日

addEventListener 一覧

分類イベントハンドラ発生状況
onloadリソースのロードが完了したとき
onunloadアンロードされたとき (ロードする前)
readystatechangedocumentのreadyState属性が変化したとき
フォーカスonfocus要素が入力フォーカスを得たとき
onblur要素が入力フォーカスを失ったとき
onchangeユーザーが要素の値を変更し、要素が入力フォーカスを失ったとき (プログラムから変更した場合には、イベントは発生しない)
onselectテキストが選択されたとき
oncontextmenuマウスで右クリック、またはアプリケーションキーが押されるなどして、コンテキストメニューが表示されるとき
マウスonclickマウスでクリックされたとき
ondblclickマウスでダブルクリックされたとき
onmousedownマウスボタンが押されたとき
onmouseupマウスボタンが離されたとき
onmouseoverマウスが要素に乗ったとき
onmouseoutマウスが要素から離れたとき
onmousemoveマウスが要素の上を移動したとき
キーonkeydownユーザーがキーを押したとき
onkeypressユーザーがキーを押して離したとき
onkeyupユーザーがキーを離したとき
フォームonsubmitフォームの送信が要求されたとき
onresetフォームのリセットが要求されたとき
onresizeウィンドウのサイズが変更されたとき
(Windowオブジェクトのみ)
onscroll要素のコンテンツがスクロールされたとき
onabort画像のロードが中断されたとき
onerror画像のロード中にエラーが発生したとき

2016年1月18日月曜日

フォームの送信(onsubmit)を中断する

submitの送信を中断する、addEventListener エベントの戻り値。
送信する値は””であれば、送信しませんん。


<php
echo "<form action =\"{$action_url}\" id =\"f\" method = \"get\">";
echo "<input id = \"searchform_q\" name = \"search_query\" value = \"{$value}\">";
echo '<button id = "searchform_button">send</button>';
echo '</from>';
?>
<script type = "text/javascript">
        addevt();

function addevt(){
        var f = document.getElementById('f');
              f.addEventListener("submit",button_chk,false);
}

function button_chk(){
        var input_text = document.getElementById('searchform_q');

        if(input_text.value == ""){
              event.returnValue=false;            <<event.returnValue
          }else{
              event.returnValue=true;
        }
}
</script>

2015年12月22日火曜日

年末Loto6ハンター

Loto6 番号を作成するJavascript です。
もっと簡単な書き方があったらコメントください。
よろしくおお願い致します。

よいおとし


function loto6(){
         console.log("年末Loto6ハンター");
         var j = [];
         do{
                var chk = "OK";
                var c = Math.floor(Math.random()*(1-43)+43);
                       for (var i=0; i<j.length; i++){
                                 if(j[i] == c){
                                      chk = "NG";
                                 }
                       }

                       if(chk != "NG"){
                                j.push(c);
                       }

        }while(j.length < 6);
        //j.sort();
        //console.log(j);
        console.log(j.sort());
}

loto6();





/////////////////////////////////////
6組の数字を表示します。

for(var c = 0; c < 6;c++){
      loto6();
}



2015年12月15日火曜日

ページ上にあるイメージを回転する Javascript CSS

ページ上にあるイメージを回転する Javascript CSS。


var j = 0;
var x= document.getElementsByTagName('img')[12];
var x= document.getElementsByTagName('img')[0];

setInterval(deg,30);
function deg(){
       console.log(j);
       x.style.transform = "rotate(" + j + "deg)";
       x.style.transform = "rotate(" + Math.random()*10 + "deg)"
       j++;
}


一定方向に回転します。
x.style.transform = "rotate(" + j + "deg)"; 


不定に回転します。
x.style.transform = "rotate(" + Math.random()*10 + "deg)"



/////////////////////////////////////////

マウスは画像上に移動(mousemove)の時、画像が回転します。
var j = document.getElementsByTagName('img');
for (var i=0; i < j.length; i++){
      j[i].addEventListener("mousemove",function(){this.style.transform = "rotate(" + Math.random()*10 + "deg)",30},false);
}

//////////////////////////////////////////
すべてのimgを回転する。
setInterval(xxx,300);
var i =0;
function xxx(){
        var x = document.getElementsByTagName('img');
        for(var j=0; j< x.length; j++){
                 x[j].style.transform = "rotate(" + i + "deg)";
                 x[j].style.transform = "rotate(" + Math.random()*10 + "deg)";
       }
    i++;
}


///////////////////////////////////////////
すべてのいメールは左右を回転します。360°折り返し

setInterval(xxx,25);
var i =0;
var chk = 0;
function xxx(){
        var x = document.getElementsByTagName('img');
        for(var j=0; j< x.length; j++){
                x[j].style.transform = "rotate(" + i + "deg)";
                //x[j].style.transform = "rotate(" + Math.random()*1 + "deg)";
        }

       if(chk == 0){
                i++;
                if(i == 360){
                        chk = 1;
               }
        }

       if(chk == 1){
                i--;
                if(i == 0){
                       chk = 0;
               }

          }
}
///////////////////////////////////////




例:

2015年12月6日日曜日

DOM 操作

var x = document.getElementById('topMain');

//親要素
element.parentNode;
element.parentElement;

//子要素
element.firstElementChild; //最初の子要素
x.firstChild;
element.lastElementChild;  //最後の子要素
x.lastChild;
element.children; //子要素リスト
x.childNodes;
x.childElementCount;


//1つ前の要素
element.previousElementSibling;
x.previousSibling;

//1つ後の要素
element.nextElementSibling;
x.nextSibling



//要素の作成
var div = document.createElement('div');
div.textContent = 'hoge';
 x.innerText = 'hoge';


//最後の子要素として追加
element.appendChild(div);


//最初の子要素として追加
element.insertBefore(div, element.firstChild);


//要素の直前に追加
element.parentNode.insertBefore(div, element);

//要素の直後に追加
element.parentNode.insertBefore(div, element.nextSibling);
要素の削除

//特定の子要素削除
element.removeChild(child);

//自分を削除
element.parentNode.removeChild(element);

//子要素を全て削除
while (element.firstChild) element.removeChild(element.firstChild);

//子要素を全て削除(part2)
element.textContent = null;
属性の操作

//属性の取得
element.getAttribute('href');

//属性を設定
element.setAttribute('href', 'http://localhost:3000');

//属性を削除
element.removeAttribute('href');
スタイル関連操作

//class追加
element.classList.add('active');

//class削除
element.classList.remove('active');

//classをトグル
element.classList.toggle('active');

//スタイルを直接指定
element.style.backgroundColor = '#ff0000';

2015年12月1日火曜日

onkeydown の動作

onkeydown  の動作

e.addEventListener('keydown', chk);  
 'keyup' に変更してください。


[Javascript キーワード補完] 作成の下準備です。


<html>
<body>
<input type="text" id = "input"></input>
</body>
</html>
<script>

onload = function (){
        var e = document.getElementById('input');
        e.addEventListener('keydown', chk);
}

//onkeydown = function (){
//        var e = document.getElementById('input');
//        console.log(e.value);
//}


function chk(){
        var e = document.getElementById('input');
        console.log(e.value);
}

</script>


一回目のキーダウンは二回目押した時に反映されます。
ロマ入力した場合、




英語入力の場合、








2015年11月20日金曜日

Youku の API

Youku の API

Player API です。 YouTube IFrame APIと似ってます。
client_id の項目はYoutube にはない。