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

2021年3月3日水曜日

fetch() Ajax

// XMLHttpRequest()
function F_httprequest() {
    let req = new XMLHttpRequest();
    let url = '/' + CSVFile + '?key=' + Math.floor(Math.random() * (1 - 100) + 100);
    req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
            let ajaxText = req.responseText;
            F_create_master(ajaxText);
            F_read_ajax(ajaxText);
        }
    }
    req.open("GET", url, true);
    req.send(null);
}

// fetch()
async function testFetch() {
    let pim = fetch('/' + CSVFile + '?key=' + Math.floor(Math.random() * (1 - 100) + 100));
    pim.then(function (msg) {
        msg.text().then(function (ajaxText) {
            console.log(TAGLine, 'step1');
            F_create_master(ajaxText);
            F_read_ajax(ajaxText);
        }).then(function () {
            console.log(TAGLine, 'step2');
        }).catch(function () {
            console.log(TAGLine, 'catch');
        })
    }).catch(function (e) {
        console.log(TAGLine, 'URLerror');
        console.log(e);
    })
}

// fetch() async await
async function testFetch() {
    let url = '/' + CSVFile + '?key=' + Math.floor(Math.random() * (1 - 100) + 100);
    let opt = {
        method: 'GET',
        headers: {
            // "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        // body: 'key=8080',
    };
    try {
        let pri = await fetch(url, opt);
        pri.headers.forEach(function (value, key) {
            console.log(key, value);
            // content - length 20949
            // content-type text/csv
            // date Fri, 05 Mar 2021 17:36:09 GMT
            // last-modified Fri, 05 Mar 2021 16:02:52 GMT
            // server SimpleHTTP/0.6 Python/3.9.0
        })
        let csvt = await pri.text();
        F_create_master(csvt);
        F_read_ajax(csvt);
    } catch (error) {
        console.log('error');
    }
}

2020年9月27日日曜日

JavaScript 気になるメソッド .reverse() .concat()

JavaScript  気になるメソッド
Array.reverse() 
reverse メソッドは呼び出した配列オブジェクトの要素をその内部で反転させ、配列を書き換えます。そして、書き換えられた配列を戻します。

Array.concat()
新しい配列に連結する配列や値です。すべての valueN 引数が省略された場合、 concat は呼び出された既存の配列のシャローコピーを返します。詳しくは下記の解説をお読みください。

例 値渡しの感じ
console.log('fns7(  [' + tx7 + ']  )' );
console.log('fns7(  [' + tx7.concat().sort((a, b) => a - b) + ']  )' );


https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat


end

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';