黑马程序员技术交流社区

标题: 关于javaScript头疼的排错问题 [打印本页]
作者: 王梁星    时间: 2012-10-28 11:03
标题: 关于javaScript头疼的排错问题
本帖最后由 王梁星 于 2012-10-29 22:39 编辑
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.         <title></title>
  7. <script type="text/javascript">
  8. function changeMax()
  9. {
  10.   var divNode=document.getElementById("newsid");//获得事件所在节点的id
  11.   divNode.style.fontSize="24px";
  12. }
  13.   function changeNorm()
  14. {
  15.   var divNode=document.getElementById("newsid");//获得事件所在节点的id
  16.   divNode.style.fontSize="16px";
  17. }
  18.   function changeMin()
  19. {
  20.   var divNode=document.getElementById("newsid");//获得事件所在节点的id
  21.   divNode.style.fontSize="9px";
  22. }
  23. </script>
  24. </head>
  25. <body>
  26. <!--
  27. 1,定义数据封装的标签。(定义界面)
  28. 2，确定事件源
  29. 3，注册事件
  30. 4，事件处理

  32. 需求：
  33. 页面中有一块新闻区域。通过超链接 大 中  小
  34. 可以让用户改变区域中的字体大小
  35. -->
  36. <h2>新闻标题</h2>
  37. <a href="javascript:void(0)" onclick("changeMax()")>大</a><!-- javascript:void(0)!:取消超链接效果 -->
  38. <a href="javascript:void(0)" onclick("changeNorm()")>中</a>
  39. <a href="javascript:void(0)" onclick("changeMin()")>小</a>


  42. <div id="newsid">
  43. 个䒈的寡凫单鹄寡凫单鹄个返回个返回国防

  45. 个䒈的寡凫单鹄寡凫单鹄个返回个返回国防

  47. 个䒈的寡凫单鹄寡凫单鹄个返回个返回国防

  49. 个䒈的寡凫单鹄寡凫单鹄个返回个返回国防

  51. 个䒈的寡凫单鹄寡凫单鹄个返回个返回国防

  53. </div>

  55. </body>
  56. </html>

  58. 新开的一期javaEE物联云计算，似乎人少，在学javascript的更少阿。我发了两篇关于javascript的问题，都没人回答，就当挣几个技术分吧。
  59. 所以这篇我发在这里，人多势众嘛。肯定有大神级别人物存在，解小弟难题。或者顺便到一期瞧瞧我的帖子？

  61. 回答之前最好先在自己的电脑上试下我的代码。问题是这样的，这个代码是有错误，刚刚才看到有两处错误。之前已经测试很长时间，也对照视频很长时间了（真是老眼昏花阿）。
  62. 只想吐槽句：这html代码TMD也太难排错了吧，硬凭你眼力的阿。
  63. 火狐的firebug也不怎么给力，本代码它是“没意见”。问问各位在学或学过js的，给个建议：怎么才能减少低级错误，怎么才能减少错误率，发生错误了怎么才能尽快排错？
复制代码
作者: 王梁星    时间: 2012-10-28 11:10
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.         <title></title>
  7. <script type="text/javascript">
  8. function changeSize(px)
  9. {
  10.   var divNode=document.getElementById("newsid");//获得事件所在节点的id
  11.   divNode.style.fontSize=px;
  12. }
  13. </script>
  14. </head>
  15. <body>
  16. <!--
  17. 1,定义数据封装的标签。(定义界面)
  18. 2，确定事件源
  19. 3，注册事件
  20. 4，事件处理

  22. 需求：
  23. 页面中有一块新闻区域。通过超链接 大 中  小
  24. 可以让用户改变区域中的字体大小
  25. -->
  26. <h2>新闻标题</h2>
  27. <a href="javascript:void(0)" onclick="changeSize('24px')">大</a><!-- javascript:void(0)!:取消超链接效果 -->
  28. <a href="javascript:void(0)" onclick="changeSize('16px')">中</a>
  29. <a href="javascript:void(0)" onclick="changeSize('9px')">小</a><br />

  31. <div id="newsid">
  32. 个䒈的寡凫单鹄寡凫单鹄个返回个返回国防<br />
  33. 个䒈的寡凫单鹄寡凫单鹄个返回个返回国防<br />
  34. 个䒈的寡凫单鹄寡凫单鹄个返回个返回国防<br />
  35. 个䒈的寡凫单鹄寡凫单鹄个返回个返回国防<br />
  36. 个䒈的寡凫单鹄寡凫单鹄个返回个返回国防<br />
  37. </div>

  39. </body>
  40. </html>
复制代码
这是优化后代码，看视频的都知道的。－－啥时候我原创的？
作者: 会飞的鱼    时间: 2012-10-29 09:52
哥们，Javascript代码要调试的话，最好写在外部的js文件里，通过外部导入的方式导入到Html页面中来进来。这样在某些工具里就可获取此文件对其打断点进行调试，比如IE8,9;FireFox的debug。这些工具能对css样式排版和网络传输信息进行抓取。我用的最多的就是IE9自带的开发者工具(自感觉比debug排版好)，在进行Ajax开发时，很清晰的能抓取到http请求头和响应体。并且还能像图中一样就像调试后台代码一样调试js代码。呵呵，写的多了有点打广告的嫌疑了。。。

QQ截图20121029094600.png (30 KB, 下载次数: 22)

QQ截图20121029094600.png
作者: 王梁星    时间: 2012-10-29 15:42
845616011 发表于 2012-10-29 09:52
哥们，Javascript代码要调试的话，最好写在外部的js文件里，通过外部导入的方式导入到Html页面中来进来。这 ...

谢谢兄弟，给我提了个醒。我试试此方法。可能是我畏惧代码，也懒了



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2