天天看点

JavaScript程序调试方法

1. 概念

首先必须知道,JavaScript与Java没有任何关系,是两种语言。

一般情况下,对于Web项目来说,HTML+CSS+JavaScript被认为是和浏览器相关的前端语言,而Java是一种服务端语言。

HTML主要负责网页元素的显示,CSS负责网页元素的样式,JavaScript负责发生在网页元素上事件的处理。

2. 调试方法

调试非常重要,建议chrome浏览器来调试JavaScript程序。

不建议使用alert,alert实际上是用来显示警告框的,用来测试非常不方便。

建议使用的是console.log,相比于alert有两个好处,一个是不用弹出窗口然后点击确定(真的很烦)。第二个是console.log可以看到object对象的内容,而alert只能看出这是一个对象。

针对代码:

<html>
<head>
<script type="text/javascript">
    function test(){
        var student={name:"maoge",sex:"男"};
    console.log(student);
    }
    
</script>
</head>
<body>
    <input type="button" value="OK" onclick="test()" />
</body>
</html>
      

在chrome浏览器打开开发者工具,点击Console选项,点击OK后可以看到Cosole栏输出如下:

JavaScript程序调试方法

非常清晰明白!

3. 引用JS

在页面的head区域或者body区域都可以引入JavaScript

注意<script type="text/javascript"></script>和<script></script>是等价的

因为JavaScript非常流行,所以浏览器都是把因为JavaScript非常流行,所以浏览器都是把JavaScript作为默认的脚本语言,所以type="text/javascript"可以认为不是必须的,当然如果还不放心,用也无妨。

当然,还可以引入外部的JavaScript,非常建议这么做,保持内容、样式、事件分离!

使用<script src="jsFile.js"></script>可以引入外部.js文件中的脚本。

注意,在外部js中直接写js代码即可,不用再添加<script></script>,因为实际上 src="jsFile.js"这句代码已经在script标签中了

4. 输出

常用的输出方式

window.alert("请注意");//弹出一个警告框

console.log(xxx);//浏览器控制台输出xxx

document.write(xxx);//将xxx输出到html内容中,不建议如此使用,建议使用下面的语句

document.getElementById("div1").innerHTML = "Hello World";//先找到div标签,然后设置其内部的html内容