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

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 にはない。





2015年10月31日土曜日

YouTube 埋め込みプレーヤー

YouTube 埋め込みプレーヤー

nextVideo

previousVideo

playVideo

stopVideo

pauseVideo

seekTo30

mute

volumeP

volumeM

2015年10月26日月曜日

YouTube Player API

YouTube Player API



class player{
public function player(){
if(array_key_exists('t',$_REQUEST)
  and array_key_exists('l',$_REQUEST)
      and array_key_exists('url',$_REQUEST)){
$this->urltime = $_GET['t'];
$this->playlist = $_GET['l'];
$this->yturl = $_GET['url'];
$this->yturl_3item = $this->para($_GET['url']);
$temp = array();
foreach ($this->yturl_3item as $val){
$temp[count($temp)] = sprintf("'%s'",$val);
}
$this->list_item = '['.implode(",",$temp ).']';
$this->you_player_api($this->playlist,$this->yturl_3item[0],$this->list_item);
}else{
$this->you_player_api('PLvswSo32Xlu_tBfEDzpuFQ-lUFP1_Aq5I','_sQSXwdtxlY','["GLyYUyVH2PI","RgKAFK5djSk"]');
}
}

public function player_area(){
$div_area = sprintf('<div id = "player_area" >
<div id = "player"></div>
</div>
');
echo $div_area;
}

public function debug_show(){
echo '<pre>';
echo $this->urltime;
echo '<br>';
echo $this->playlist;
echo '<br>';
echo $this->yturl;
echo '<br>';
print_r( $this->yturl_3item);
echo $this->yturl_3item[0];
}

public function para($url){
$temp=array();
$temp2=array();
$temp=explode('=',$url);
$temp2=explode('|',$temp['1']);
return $temp2;
}

public function you_player_api($playlist,$videoid,$array_list){
$player = sprintf("
<script>
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var playlist = '%s';
var videoid = '%s';
var array_list = %s;
var h = '240';
var w = '320'
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: h,
width: w,
videoId: 'CNNDRO3imrs',
playerVars:{
'controls':'1',
'disablekb':'0',
'playsinline':'0'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError':onPlayerError
}
});
}

   function onPlayerReady(event) {
//event.target.cuePlaylist({list:'PLvswSo32Xlu9BOn94xy-Xd_mTsMIny639'});
var j = event.target.cuePlaylist({list:playlist});
console.log (j.length);
if(j.length == 0){
one_list_play(event.target);
}
}

function onPlayerStateChange(event) {
console.log('onPlayerStateChange');
console.log(player.getAvailableQualityLevels());
console.log(player.getPlaybackQuality());
event.target.setPlaybackQuality('tiny');
if(event.target.getPlayerState() === 5 ){
event.target.setSize(w,h);
var list_items = event.target.getPlaylist();
var list_index = list_items.indexOf(videoid);
if(list_index >-1 ){
//event.target.loadPlaylist({list:playlist,index:list_index,startSeconds:3});
event.target.playVideoAt(list_index);
}
if(list_index == -1 ){
//event.target.loadPlaylist({playlist:array_list});
one_list_play(event.target);
}
}
}

function one_list_play(event){
console.log('000111');
event.loadPlaylist({playlist:array_list});
}

function onPlayerError(event){
event.target.nextVideo();
console.log('onPlayerError');
}

</script>"
,$playlist,$videoid,$array_list);
echo $player;
}
}








2015年10月24日土曜日

indexOf で配列に要素が含まれるか判定

indexOf で配列に要素が含まれるか判定

function onPlayerStateChange(event) {
                   if(event.target.getPlayerState() === 5 ){
                           var list_items = event.target.getPlaylist();
                           var list_index = list_items.indexOf(videoid);
                           event.target.cuePlaylist({list:playlist,index:list_index});
                     }
           }

要素が含まれない場合 -1







2015年10月7日水曜日

CSSレイアウトを確認するために Javascript

ホームページのスタイルシート、レイアウトを確認するために Javascript です。

Chrome コンソールで利用します。CSS勉強のためです。


function s_new(){
       this.div = function(){
               eng("div");
       }

       this.ul = function (){
               eng("ul");
       }

       this.li = function (){
               eng("li");
       }

       this.user = function(e){
                eng(e);
       }

      function eng (e){
            var div = document.getElementsByTagName(e);
                 if (div.length > 0){
                      for(var a = 0 ; a < div.length; a++){
                           //div[a].style.borderStyle="solid";
                           //div[a].style.borderWidth="1px";
                           div[a].style.boxShadow ="2px 2px 6px";
                         }
                }else{
                         console.log("none");
                }
       }
}

var x = new s_new;






ElementsByClassName

     function eng (e){
            var div = document.getElementsByClassName('a');
                 if (div.length > 0){
                      for(var a = 0 ; a < div.length; a++){
                           div[a].style.borderStyle="solid";
                           div[a].style.borderWidth="1px";
                         } 
                }else{
                         console.log("none");
                }
       }

eng();







2015年9月26日土曜日

覚えておく

覚えておく


   function mobile_menu(){
         var get = document.getElementsByClassName("menu_item");
for(var i in get){
if(get[i].childNodes){
                                      console.log(i);
                                      get[i].style.display="none";
                                }
                    }
    }


この場合、if(get[i].childNodes) は必須な判断になります。そうしないと、

get の length、item、namedItem は除外されません、エラーになります。

2015年8月29日土曜日

JSON.parse() && JSON.stringify()

JSON.parse()

概要
JSON.parse() メソッドは文字列を JSON として解析し、また任意で解析によって作り出された値を変換します。

構文
JSON.parse(text[, reviver])



JSON.stringify()
概要
JSON.stringify() メソッドは JavaScript の値を JSON 文字列に変換します。置き換え関数を指定して値を置き換えたり、置き換え配列を指定して指定されたプロパティのみを含むようにしたりできます。

構文
JSON.stringify(value[, replacer[, space]])

2015年6月16日火曜日

javascript 無限ループする方法

javascript 無限ループする方法


その1
var j = 0;
for(;;){
  console.log(j++);
}


その2
var j = 0;
do{
  console.log(j++);
}while(true);




2015年6月10日水曜日

Chrome 開いているタブを選択する方法

Chrome 開いているタブを選択する方法
chrome.tabs.getAllInWindow()


chrome.tabs.getAllInWindow(function(e){
     console.log(e);
});






2015年6月1日月曜日

XMLHttpRequests のLogが表示するための設定

Chrome デフォルトの設定が変わったと思いますが、設定を変更しないと
XMLHttpRequests のLogが表示されない。



2015年5月28日木曜日

Javascript ページの繰り返しOpen.

Javascript ページの繰り返しOpen.


var x = {};
setInterval("opp()",50000);

function opp(){
 x = open('http://yahoo.co.jp')
 console.log('open');
 setTimeout("cl()",5000);
}

function cl(){
x.close();
console.log('close');
}




2015年5月26日火曜日

chrome 拡張機能 CPU情報

chrome 拡張機能 CPU情報


chrome.system.cpu.getInfo(function(e){
console.log(e);
})






chrome.runtime.getManifest()
chrome.runtime.getPlatformInfo(function(e){console.log(e)})
chrome.system.cpu.getInfo(function(e){console.log(e);})
chrome.system.storage.getInfo(function(e){console.log(e);})









2015年4月10日金曜日

配列により、ページ上にあるDOMの操作

配列により、ページ上にあるDOMの操作

分かった事:
DOMの配列を削除後に、要素が変わります、次回の操作に影響が出ます。
削除しなくでも良い場合、無効にする。


練習1 (成功) 削除後に配列の順番が変わります。
while (document.getElementsByTagName('img')[0]){
    imgelement = document.getElementsByTagName('img')[0];
    imgelement.parentNode.removeChild(imgelement);
}


練習2 (失敗) 操作出来ないElementが発生します。
var imgelement = document.getElementsByTagName('img');
for ( var i = 1; i < imgelement.length ; i++){
    imgelement[i].parentNode.removeChild(imgelement[i]);
}


練習3 (成功) 配列の要素が変わっていないので順番に操作出来ます。
var imgelement = document.getElementsByTagName('img');
for ( var i = 1; i < imgelement.length ; i++){
    document.getElementsByTagName('img')[i].style.display="none";
}


2014年7月20日日曜日

XML名前空間 Javascript

XML名前空間 Javascript


document.documentElement.namespaceURI

element.getElementsByTagNameNS

与えられた名前空間に属し、与えられたタグの名前を持つ要素のリストを返します。


例:
document.getElementsByTagNameNS("http://itunes.apple.com/rss","image")


a=date.getElementsByTagName('entry')[0]
a.getElementsByTagNameNS('http://itunes.apple.com/rss','image');

2014年7月19日土曜日

javascript オブジェクト 作成、プロパティ、メゾット

javascript オブジェクト 作成、プロパティ、メゾット


<script text="text/javascript">

var j = function (e){
        var x=0;
        var opt = {};

        opt.a =function (){
                x=x+1;
                return x;
  }();

        opt.b = function(){
                x=x-1;
                return x;
        };

        opt.c = function(){
                return "opt.c";
        };

        opt.d = function(){
                return "opt.b";
  }();

        opt.e = function(x){
                console.log(x);
                console.log(e);
                return x;
        };

        opt.f = function(x){
                return x;
        }(e);

        return opt;
}("引数");

</script>


実行の結果:



2014年4月29日火曜日

Youtube API 3.0 の応用

Youtube API 3.0 の応用

1. Youtube リスト作成、公開、List ID
2. 必要な曲を検索する、Video ID
3. Video ID を List ID に追加する。





https://www.youtube.com/user/icq7219388

2013年11月6日水曜日

setInterval(tt,3000) タイマをして、Function を実行する練習

setInterval(tt,3000)  タイマをして、Function を実行する練習


<script type="text/javascript">

var x=0;
var time1=setInterval(tt,3000);
function tt(){
x=x+1;
alert(x);
}

</script>


タイマの停止
clearTimeout(timer1);

2013年10月27日日曜日

ページをリロード

ページをリロード

<script type="text/javascript">
var timer = "10000";
function ReloadAddr(){
window.location.reload();
}
setTimeout(ReloadAddr, timer);
</script>

2013年10月6日日曜日

setInterval 動かない

動く     setInterval(function(){mf_getymg();},10000);
動く     setInterval(mf_getymg,10000);
動かない  setInterval(mf_getymg(),10000);
動く           setInterval('tt()',3000);   クォーテーションで括る

function mf_getymg(){
var getmg=new XMLHttpRequest();
getmg.onreadystatechange=function(){
if (getmg.readyState==4 && getmg.status==200){
mf_test(eval(getmg.responseText));
}
}
getmg.open('GET','http://192.168.11.10/YahooAPI/List.php',true);
getmg.send(null);
}

function mf_test(mg){
var newli=document.createElement('li');
newli.innerHTML=mg;
var ul=document.getElementById('test');
ul.appendChild(newli);
}



クォーテーションで括る
<script type="text/javascript">

var x=0;
setInterval('tt()',3000);
function tt(){
x=x+1;
alert(x);
}

</script>