2017-3-14 JS学習ノート

document Webページの基本構造の取得

documentはいくつかのものをホームページに書くことができます

document.write('123');

ウェブページに書き込む基本構造

document.write(document.body + '
');
document.write(document.documnetElement + '
');
document.write(document.html + '
');

星海の特効のいくつかの肝心な点

//           
var screenW = document.documentElement.clientWidth;
var screenY = document.documentElement.clientHeight;
// body      
document.body.appendChild(starSpan);
//      （0~1）
Math.random();
//      
starSpan.style.animationDelay = ratoDelay + 's';

壁の練習中の注意点

ノードを追加するとノード数が変化するため、ノードを追加する前後に取得する値が変化する可能性があるので、ノードを追加した後にブラウザの幅と高さ

を取得する.

主に思想論理排他思想を応用し、ランダム数

イベントオブジェクト

イベントオブジェクトは、一般にパラメータeventを介して関数内部

に伝達される.

IEブラウザはeventを認識できないので互換書き方

で

var event = event || window.event;
//            ，                ，      
event.clientX;
//             ，            
event.screenX;
//              ，          
event.pageX;
//          
event.clientX = event.pageX;

拡大鏡の例のいくつかの注意点

//                      span   
smallBox.onmouseover = function(){
        mask.style.display = 'block';
        bigBos.style.display = 'block';
//       ，        ，   span                 
        smallBox.onmousemove = function(event){
                var event = event || window.event;
//    
//      =            -      offsetParent        - mask        
                var moveX = event.clientX -smallBox.offsetParent.offsetLeft - mask.offsetWidth*0.5
//       span      ，             
//    ：        /            =       /      
                var bigX = - moveX/(smallBox.offsetWidth/bigBox.offsetWidth)
        }
}

進捗バーの表示における注意点

//        ，   mask                  
var event = event || window.event;
var distanceX = event.clientX - mask.offsetLeft;
document.onmousemove = function(event){
//       
        var event = event || window.event;
//    ：      =         - distanceX
        var moveX = event.clientX -distanceX;
//        false  ,             
//                         
}

閉パッケージの基本認識

 window.onload = function(){
        /*1.    */
        var btns = document.getElementsByTagName('button');
        /*2.            
         for        ，i     
                i ，              
           ：()()，      
            ：       
        (       )(    )
        //          
        * */
        for(var i = 0;i < btns.length;i++){
//            btns[i].onclick = function(){
//                alert();
//            }
            (function (b) {
                btns[b].onclick = function(){
                    alert(b);
                }
            })(i);
        }
    }

拡大鏡特効による閉包修正

for(var i = 0;i < listImages.length;i ++){
         (function(a){
                listImages[a].onmouseover  = function(){
               /*4.1           */
                smallBox.children[1].src = 'images/pic00'+(a+1)+'.jpg';
                big_img.src =  'images/pic0'+(a+1)+'.jpg'
            }
      })(i);
}