hpapi.blogspot.jp

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 の追加

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

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