《Head First HTML5 javascript》第11章查bug

袭瑛

已于 2022-11-29 23:00:56 修改

阅读量221

点赞数

分类专栏：前端开发文章标签： javascript html5 bug

于 2022-11-29 23:00:29 首次发布

本文链接：https://blog.csdn.net/hcud024/article/details/128107033

版权

前端开发专栏收录该内容

16 篇文章 1 订阅

订阅专栏

2022.11.29 第11章查bug

前端也有自己的 Debug，如 console.log，confirm，alert，Breakpoint 等。

alert()，confirm()，虽然也可以起到调试的作用，但是它适合传达信息的场景就是有限的，因为它会使甚至关闭窗口这样的操作无效化。而且 alert 的样式也依赖于浏览器的默认样式，并且只能显示文本，不适合自定义。总的来说就是阻塞页面加载，降低网页的性能与质量。

firefox

内置缺陷检测firebug
常见的错误
1. 变量未定义
2. 语法错误
3. 字符串
4. 符号&一致性
5. 未加转义符
6. 函数未定义
7. 赋值与相等
提示不一定准确

其他知识点

HTML元素的ID和Name属性的区别

显然这些用途都不是能简单的使用ID来代替掉的，所以HTML元素的ID和Name的却别并不是身份证号码和姓名这样的区别，它们更本就是不同作用的东西。

<input name= "xx ">      //会提交数据
<input id= "xx ">       //不会提交数据

<input id= "xx " name= "yy ">
<label for= "xx "> Label </label>    //这里的for属性必须是指向一个id，否则没效果

<input name= "xx " type= "radio " value= "1 ">
<input name= "xx " type= "radio " value= "2 ">
<input name= "xx " type= "radio " value= "3 ">
/*这里必须name相同才能成为一组单选按钮，而id则没有这个功能。*/

<input name= "xx ">       //对应脚本document.getElementsByName( "xx ")[0]
<input id= "xx ">         //对应脚本document.getElementByIdx_x( "xx ")

ID就像是一个人的身份证号码，它就是Client端HTML元素的Identity。
Name有很多种的用途，所以它并不能完全由ID来代替，具体用途有：
1. 作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。
2. HTML元素Input type='radio'分组，我们知道radio button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。
3. 建立页面中的锚点，我们知道<a href="URL">link</a>是获得一个页面超级链接，如果不用href属性，而改用Name我们就获得了一个页面锚点。
```
<a name="PageBottom"></a>
```
4. 作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其Name来引用该对象。
5. 在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap="#name"(被关联的MAP元素的Name)。
6. 某些特定元素的属性，如attribute，meta和param。
```
/* 为Object定义参数 */
<PARAM NAME = "appletParameter" VALUE = "value">
/* Meta中 */
<META NAME = "Author" CONTENT = "Dave Raggett">
```

案例：一个简单调试组件

<!DOCTYPE html>
<html>
    <head>
        <title>debug test</title>
        <script>
						function DebugConsole(){
						    var consoleElem = document.createElement("div");
						    consoleElem.id = "debug";
						    consoleElem.style.fontFamily = "monospace";
						    consoleElem.style.color = "#333333";
						
						    document.body.appendChild(consoleElem);
						    consoleElem.appendChild(document.createElement("hr"));
						    this.shaded = false;
						}
						
						DebugConsole.prototype.displayMsg = function(msg){
						    var msgElement = document.createElement("div");
						    msgElement.appendChild(document.createTextNode(msg));
						    msgElement.style.backgroundColor = this.shaded ?"#eeeeee" : "#ffffff";
						    var consoleElem = document.getElementById("debug");
						    consoleElem.appendChild(msgElement);
						    this.shaded = !this.shaded;
						}
         
            var callNum = 0;
            function checkWinner(form,caller,winningNum){
    
                console.displayMsg("callNum:" + callNum);
                ++callNum;
    
                if (callNum == winningNum){
                    alert(caller + ",cakker number" + callNum + "...today\\'s winner!");
                    form.submit();
                }
                else{
                    var callerField = document.getElementById('caller');
                    callerField.value = "next caller";
                    callerField.focus();
                    callerField.select();
                }
            }
        </script>
       
    </head>

    <body onload="console = new DebugConsole();">
        <form name="callform" action="radiocall.php" method="post">
            <img src="cube.png" >
            caller name:<input id="caller" type="text">
            <input type="button" value="call" onclick="checkWinner(this.form,document.getElementById('caller').value,7)">
        </form>
    </body>

</html>