hpapi.blogspot.jp

2016年3月27日日曜日

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().ｔ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;
}

登録: 投稿 (Atom)