JavaScript(1-JS的输出)

JavaScript作为一门脚本语言广泛应用在网页前端制作中，其特别之处在于只需要浏览器即可进行编译，因此不要配置环境。在JavaScript中使用爬虫时可以直接将爬虫结果用于前端网页的展示内容，非常灵活。
Hello world:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv = "Content-Type" Content = "text/html; Charset =utf-8">
    <title>HelloWorld.js</title>
</head>
<body>
    <p id = "demo"></p>
    <script>
        document.getElementById("demo").innerHTML = ("Hello，world");
    </script>
</body>
</html>

利用这种用法可以编写函数，通过用户的交互来改变网页内容，例如，当用户点击按钮时，调用js函数改变指定文字：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" Content="text/html; Charset=utf-8">
    <title>ChangeWords.js</title>
    <!--定义一个函数-->
    <script> 
        function fChangeWords(){
            document.getElementById("demo").innerHTML = ("内容已改变");
        }
    </script>
</head>
<body>
    <p id = "demo">原始内容</p>
    <!--点击按钮时引用函数-->
    <button type = "button" onclick = "fChangeWords()">改变页面内容</button>
</body>
</html>

js脚本语言可以在html文档的任何位置插入，也可以以js文件的身份被引入，通常为了网页的加载速度，会将js文件在body的最后部分引入。引入js文件的方式同引入css文件相同：

<script src = "js文件名.js"></script>

文件路径可以是本地的相对路径、绝对路径，也可以是一个远程的js文件网址。

JavaScript可以用多种方式显示数据:

使用window.aler()写入警告框
使用document.write()写入HTML文件
使用innerHTML写入HTML元素
使用console.log()写入浏览器控制台

假如我们想用这四种方法来显示1+5的结果，innerHTML可以参看之前的Hello world的例子，其他三种方法如下：
window.alert：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" Content="text/html; Charset=utf-8">
    <title>警告框.js</title>
</head>
<body>
    <script>
        window.alert(5+6)
    </script>
</body>
</html>

注意：5+6如果带双引号会被认为是字符型的数据，不带双引号则被认作数字型的数据
document.write:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" Content="text/html; Charset=utf-8">
    <title>document.write.js</title>
</head>
<body>
    <script>
        document.write(5 + 6);
    </script>
</body>
</html>

console.log：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" Content="text/html; Charset=utf-8">
    <title>控制台.js</title>
</head>
<body>
    <script>
        console.log(5 + 6);
    </script>
</body>
</html>

用F12激活浏览器的控制台，并在菜单中选择控制台，即可看到显示的信息。

最后编辑于：2020.02.16 15:17:42