前端学习之《JavaScript DOM 编程艺术》读书笔记(5)

分离原则:

网页可以看做是由三层组成
结构层(HTML等);
表示层(CSS);
行为层(JavaScript和DOM);
这三层要尽量分离。

预留退路:

很多用户的浏览器或者搜索引擎的搜索机尚不支持JavaScript。所以在使用JavaScript时,要保持结构层的完整,可以展现基础的必要的信息。并保证充分的检查。
根据预留退路的原则,在JS文件中,每个函数开始时,最好都检查一下需要的元素以及JavaScript功能是否被浏览器支持。使用的语句如下:

if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;

网页加载完毕会触发一个onload事件。
若果想让函数在页面加载时得到执行。就把它绑定在onload事件上。
如果是多个函数的话就不能直接用 window.onload=函数名;来解决了。
我们可以编写一个函数:

function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload!='function'){
        window.onload=func;}
        else{
            window.onload=function(){
                oldonload();
                func();
            }
        }
}

这样的话,不论有几个函数需要在页面加载时得到执行,都可以使用这样的方式加载。

addLoadEvent(firstFunc);
addLoadEvent(secondFunc);
...

应用实践:

下面展示一个简单的程序,使用JavaScript来实现让元素动起来。
1.一个简单的HTML网页,上面只显示有一行字。我们要让这行字动起来。

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>无标题文档</title>
<script type="text/javascript" src="example.js"></script>
<script type="text/javascript" src="moveElement.js"></script>
<script type="text/javascript" src="addLoadEvent.js"></script>
</head>
<body>
<p id="message">
We learn JavaScript!!
</p>
</body>
</html>

2.我们说到过的——让函数在页面加载时得到执行。

function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload!='function'){
        window.onload=func;}
        else{
            window.onload=function(){
                oldonload();
                func();
            }
        }
}
addLoadEvent(positionMessage);

3.一个控制元素的初始位置的函数。

function positionMessage(){
      if(!document.getElementById) return false;
      if(!document.getElementById("message")) return false; 
    var elem=document.getElementById("message");
    elem.style.position="absolute";
    elem.style.left="50px";
    elem.style.top="100px";
    moveElement("message",200,100,10);//可以改变参数来控制运动的范围。
}

4.在上面函数最后一句调用了下面这个函数。下面这个函数,使元素动起来。

function moveElement(elementID,final_x,final_y,interval){
      if(!document.getElementById) return false;
      if(!document.getElementById(elementID)) return false;
    var elem=document.getElementById(elementID);
    var xpos=parseInt(elem.style.left);
    var ypos=parseInt(elem.style.top);
    if(xpos==final_x&&ypos==final_y){
        return true;
    }
    if(xpos<final_x){
        xpos++;
    }
    if(xpos>final_x){
        xpos--;
    }
    if(ypos<final_y){
        ypos++;
    }
    if(ypos>final_y){
        ypos--;
    }
    elem.style.left=xpos+"px";
    elem.style.top=ypos+"px";
    var repeat="moveElement('"+elementID+"','"+final_x+"',
    '"+final_y+"','"+interval+"')";
    movement=setTimeout(repeat,interval);
    //setTimeout时间函数。参数是函数字符串以及间隔时长。
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值