hpapi.blogspot.jp: 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日日曜日

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 播放列表插件



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

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

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().ｔop を所得
2. window.innerHeight 高さを所得
3. window.onscroll で window.innerHeight と getBoundingClientRect().ｔop
の位置を計算します。
4. getBoundingClientRect().ｔop は 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();

例

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	アンロードされたとき (ロードする前)
	readystatechange	documentの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;

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

//１つ後の要素
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';

登録: 投稿 (Atom)