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激活浏览器的控制台,并在菜单中选择控制台,即可看到显示的信息。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。