js脚本调试技巧

下面是折磨了我一天半的一段脚本,这段脚本是从网上获取的,是实现图片翻页滚动的效果,因为我们要滚动的图片高度和原图片高度不一样,所以要改动脚本理的一些参数,可是这些参数都没有做注释,要想设置成合适的参数,必须看懂脚本运行的原理。这个脚本里充满了各种迷惑,是我目前看到的最鬼魅的一组函数。中午我明白里里面的原理,并做了一定的注释。
这个脚本运行的原理是,声明一个数组,然后每个数组里放一个div,div都设置一样的高度和宽度,这个数组可以用动态语言来生成。然后呢,把这个数组元素随机排序并链接成在一起,形成一个界面。然后呢,把这个界面调用一个函数统一的向上移动,每次移动一点点,直到移动到指定的象素的时候就停止等待指定的时间,这样就造成了延时翻页的效果。确实很鬼魅,思路很新颖,让哥们琢磨了一天半。

以下是代码片段:
<html><head> 

<meta http-equiv='Content-Type' content='text/html; charset=gb2312'> 

<script language='JavaScript'> 

var scrollerheight=160;            //定义每个区域显示的高度 

var html,total_area=0,wait_flag=true;      //初始化html串,总显示区域数,是否等待. 

var bMouseOver = 1;          //鼠标放上去就不滚动了,这里硬编码为true 

var scrollspeed = 5;            //滚动速度,其实是每次向上移动的象素数,值越大看起来越快 

var waitingtime = 5000;     //每次翻动的等待时间,单位毫秒 

var s_tmp = 0;    //初始移动次数 

var s_amount = 32;     //它的值是由每次需要移动的象素除以scrollspeed换算出来的 

var scroll_content=new Array();      //声明一个数组 

var startPanel=0, n_panel=0, i=0;           //声明初始区域,区域个数和循环变量 

  

//******************************************** 

//这是我做的一个跟踪变量函数 

//在需要使用跟踪变量的地方直接调用trace()函数就可以了. 

var newwin; 

var isDebug = 1; 

function trace(s) 
{  
       if(isDebug)  
       {  
              try  
              {  
                     newwin.document.write(s + "<BR>");  
              }  
              catch(e)  
              {  
                     newwin = window.open("","trace");  
                     newwin.document.write(s + "<BR>");  
              }  
       }       

//********************************************** 
//初始化滚动函数 

function startscroll(){  
       //随机获取初始区域 

       //startPanel是0到scroll_content下标的任意数 

       i=0; 

       for(i in scroll_content)n_panel++; 

       n_panel = n_panel -1; 

       startPanel = Math.round(Math.random()*n_panel);  
       //如果初始区域是第一个元素, 

       //调用insert_area把scroll_content里所有元素都装到DIV里 

       if(startPanel == 0)   
       {  
              i=0;  
              for(i in scroll_content)  
                     insert_area(total_area, total_area++);   
       }  
       else   
              //如果初始区域是最后一个元素  
              //先把最后一个装进DIV,然后依次把其它元素装进DIY  
              if(startPanel == n_panel) //如果是最后一个元素  
              {  
                     insert_area(startPanel, total_area);  
                     total_area++;  
                     for(i=0; i<startPanel; i++)  
                     {  
                            insert_area(i,total_area);  
                            total_area++;  
                     }  
              }  
       else  
              //如果初始区域不是第一个,也不是最后一个  
              //先把当前区域装进DIV,  
              //然后再把当前区域之前和之后的区域装进DIV  
              if((startPanel > 0) || (startPanel < n_panel))   
              {  
                     insert_area(startPanel,total_area);  
                     total_area++;  
              &nb
sp;      for(i=startPanel+1; i<=n_panel; i++)  
                     {  
                            insert_area(i,total_area);  
                            total_area++;  
                     }  
                     for(i=0; i<startPanel; i++)  
                     {  
                            insert_area(i,total_area);  
                            total_area++;  
                     }  
              }  
       //每隔waitingtime的时间调用一次scrolling()函数  
       window.setTimeout('scrolling()',waitingtime); 
}  

//滚动函数 
function scrolling() 
{  
       //判断鼠标是否放上去,并且是否在等待  
       if(bMouseOver && wait_flag)   
       {  
              trace("----------------------------");  
              for(i=0;i<total_area;i++)  
              {  
                     //每次所有区域同意向上移动scrollspeed个象素  
                     tmp = document.getElementById('scroll_area'+i).style;  
                     tmp.top = parseInt(tmp.top) - scrollspeed;     
                     if(i==0)trace("第一个区域的顶部"+parseInt(tmp.top));  
                     //如果从屏幕种移出1个区域的话,被移出的区域从底部出现  
                     if (parseInt(tmp.top) <= -scrollerheight)   
                     {  
                            tmp.top = scrollerheight*(total_area-1);  
                     }   
                     trace("移动次数:"+s_tmp);  
                     //s_tmp是向上移动的次数,按理说应该移动到正好要移动的象素就该停止了  
                     //因为一次向上移动scrollspeed个象素,本例子中一次翻动要移动的象素就是scrollerheight  
                     //当然你也可以一次翻动两个scrollerheight  
                     //所以要移动scrollerheight/scrollspeed次,s_amount就是这样算出来的.                 
                     //因为s_tmp是从0初始化的,所以减去1后才是真正一次翻动要移动的次数  
                     //但是呢,因为执行一次scrolling()函数,s_tmp就会增加scroll_content.length多次,  
                     //所以移动的次数应当是(s_amount-1)*scroll_content.length),  
                     //当翻动次数大于我们算出来的值的时候就要停止,也就是把向上移动的必要条件去调  
                     //这从跟踪变量的输出可以看出来  
                     if(s_tmp++ > (s_amount-1)*scroll_content.length)   
                     {  
                            trace("(s_amount-1)*scroll_content.length="+(s_amount-1)*scroll_content.length)  
                            wait_flag=false;//进入等待  
                            //等待waitingtime,再消除等待,并且吧s_tmp归零.  
                            window.setTimeout('wait_flag=true;s_tmp=0;',waitingtime);  
              &nb
sp;      } 

              } 

       } 

       //设置1秒钟执行1000次本函数  
       window.setTimeout('scrolling()',1); 

  

function insert_area(idx, n) 

html='<div style="left: 0px; width: 100%; position: absolute; top: '+(scrollerheight*n)+'px" id="scroll_area'+n+'">'; 

html+=scroll_content[idx]+'';html+='</div>';document.write(html); 

//下面的部分可以由asp循环生成  
scroll_content[0] = '<table height=140 align=center border=0 width=300 id=0><tr><td><a href=# target=_blank><IMG SRC=http://onlytiancai/bak/77love/UploadAdPic/200572695027151.gif width=307 height=140 border=0></a></td></tr></table>'; 

scroll_content[1] = '<table height=140 align=center border=0 width=300 id=1><tr><td><a href=# target=_blank><IMG SRC=http://onlytiancai/bak/77love/UploadAdPic/200572694642351.jpg width=307 height=140 border=0></a></td></tr></table>'; 

scroll_content[2] = '<table height=140 align=center border=0 width=300 id=2><tr><td><a href=# target=_blank><IMG SRC=http://onlytiancai/bak/77love/UploadAdPic/200572694652122.jpg width=307 height=140 border=0></a></td></tr></table>'; 

startscroll();</script>

再另一个页用以下代码调用图片翻页滚动效果

<iframe src="n.asp" scrolling="no" frameborder="0" height=160 width=310></iframe>

附:一些JS调试技巧,都是从论坛里面找的哦,要感谢就感谢论坛里的JS高手吧,有些确实很实用 

如何在vs.net里调试脚本

1.首先应该把ie的禁止脚本调试选项去掉

2.如果在vs.net里面,就设置一个html文件为启动页,然后在文件上面设置断点,这样应该是好使的。记住:设定html文件为启动页

如果你的程序是asp,或者aspx,那还有这样的方法:

1.

a)在你想要停止的地方加上alert(),

b)然后运行的网页,

c)使用attach to process(vs.net 和vs interdev 都有这个菜单项)连接上你的进程,

d)到alert()(在前面设置好)语句后,不要点"确定",

e)回到debugger(vs.net 或者 interdev)暂停进程,

f)点击警告窗口的"确定",

g)这时脚本停留在alert(语句的下一条)

2.使用浏览器的"调试"菜单下面的"到下一条语句停止"的功能,也可以很好地调试脚本

 

JavaScript脚本调试经典技巧

在调试Javascript脚本的时候,如果有错误,IE的状态栏里会有个问号[点击此问号],或者弹出错误框,为了尽快找到错误,下面是常用的调试方法:
1,如果出现对象为null或找不不到对象,那就是id,nameDOM写法不对,请检查错误所在的行;
2,如果错误定位到一个函数的调用上,说明函数体有问题,到函数体里找原因。
3,为了加快速度,可以先用/*   */注释屏蔽掉一部分代码,逐步检查;
4,可以增加alert(xxx)来看看变量是否得到了期望的值;
5IE的错误报告往往不准确,比如行18错的话,有时候是19行有问题;
6,为了确保代码能够正确运行,在实在不能确定能否出现错误的时候,用try{}catch{}语句在做初学的时候往往不注意大小写例如innerHTML属性,容易写成innerHtml,一般如果出现对象不支持此种属性或方法的提示的时候,就是大小写造成的,还有一种可能,就是,你正在试图使用一个根本没有的属性或方法。

 

1.问号[点击此问号],或者弹出错误框,为了尽快找到错误点问号,看第n+1行是否有错误。没有就往前重要的是经验,而且是自己写的代码,才能对症下药
2.程序代码要规范,括号要对应,尽量使用tab
出现缺少;号的错误,其实不是少;号,而是你的表达式里没有写合法的运算符之类:比如:str="sdfsdsdf"+"dfsdfsd之类的没有语法错误的情况下

我常常用的alert();return;逐步确定错误范围;在调试JSP程序的时候是out.println("Run here right!");out.close()

 

我是直接写个ASSERT的函数,在可以的地方throw(msg)然后用调试器看的.

写错ID就不要提了,最经常是某个函数返回NULL,在我认为不应该返回NULL的地方,我就这样写
var obj=SomeFunction();
ASSERT(null!=obj,"var obj=SomeFunction();返回null");
function ASSERT(mustbetrue,msg)
{
    if(mustbetrue=false)throw(new Error(-1,"ASSERT: "+msg));
}

function ASSERT(mustbetrue,msg)
{
    
 if(mustbetrue==false)throw(new Error(-1,"ASSERT: "+msg));
}

VS.Net是最好的脚本调试器了。

什么都监视得了。。

 use Visual Interdev to debug

 try catch的一点点补充,来自部门培训例子

<script>
try{
   
x=y;   // Cause an error.
}
catch(e){   // Create local variable e.
    alert(e);   // Prints "[object Error]".
   
alert(e.number & 0xFFFF);   // Prints 5009.
   
alert(e.description);   // Prints "'y' is undefined".
}
</script>

 http://groups.google.com/groups?q=debugging+javascript&ie=UTF8&oe=UTF8&hl=en

 vs.net调试javascript

1,首先,要让你的ie允许调试脚本,具体步骤如下:
打开ie->工具菜单->inter选项->高级选项卡->去掉禁止脚本调试"选项
2,
打开vs.net,创建一个新的asp.net项目(或打开一个)
3,
运行你要调试的页面
4,
当你的页面呈现在ie里的时候,重新回到vs.net
5,
在脚本中设置断点:

调试菜单->窗口->调试文档

运行文档中选择要调试的页面(这是一个类似于解决方案管理器的浮动工具栏)
6,
然后,你可以通过操作网页来进入脚本,当脚本运行到断点时,就可以进行调试了.
如果你想在页面开始装载时就进入调试状态,可以按F10(逐过程)进行调试

来自MSDN
ms-help://MS.VSCC.2003/MS.MSDNQTR.2003FEB.2052/vsdebug/html/vxtskdebuggingclient-sidescript.htm

1、首先在IE中启用脚本调试,选择 工具-Internet 选项-浏览-清除 禁用脚本调试的选择
2
、开始以debug执行ASP.NET程序
3
、在 调试-窗口-运行文档,让VS显示运行文档
4
、单步运行程序过程执行ASPX文件会在运行文档的窗口中显示,双击打开需要调试的文件,在需要调试的脚本位置上设置断点,调试即可
 

我用vs.net调试了一下带javascripthtml,结果,调试窗口里根本没有脚本里的变量在运行到断点时的值的显示,这也叫调试呀,我晕,于是我自己写了个跟踪变量的函数,如下.

以下是代码片段:
//********************************************
//这是我做的一个跟踪变量函数
//在需要使用跟踪变量的地方直接调用trace()函数就可以了.
var newwin;
var isDebug = 1;
function trace(s)
{

       if(isDebug)

       {

              try

              {

                     newwin.document.write(s + "<BR>");

              }

              catch(e)

              {

                     newwin = window.open("","trace");

                     newwin.document.write(s + "<BR>");

              }

       }     

}

//*********************************************

 

FROM:http://www.cnblogs.com/edsky/articles/317266.html

版权声明:
作者:Kiyo
链接:https://www.wkiyo.cn/html/2008-01/i391.html
来源:Kiyo's space
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>