HTML学习笔记：加载JavaScript

加载JavaScript

类似于加载css，可以参考此文章：HTML学习笔记：加载css

在页面内加载

此方式仅适用简单静态页面的展示，工程性文档还请加载外部js，便于维护调试。

在<head>中加载

写好HTML代码后，在<head>和</head>直接添加js代码。
在头部这样添加：<style type="text/javascript">（这里写js代码）</style>

示例test.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试js</title>
<script type="text/javascript">
function welcome() {
    var visitor_name;
    visitor_name = prompt(" 请输入你的姓名：");
    document.write("<h3>Hello "+visitor_name+" Welcome!</h3>");
}
</script>
</head>

<body>
<center>
    <h1>Welcome&nbsp;to&nbsp;rumosky.com!</h1>
    <script type="text/javascript">welcome();</script>
    <p>I love rumosky.com！</p>
    <hr>
    <p>Copyright&nbsp;&copy;&nbsp;2018&nbsp;<a href="https://www.rumosky.com" target="_blank">如默星空</a>&nbsp;All&nbsp;Rights&nbsp;Reserved</p>
</center>
</body>
</html>

在<body>中加载

写好HTML代码后，在<body>和</body>直接添加js代码。
在头部这样添加：<style type="text/javascript">（这里写js代码）</style>

示例test.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试js</title>
</head>

<body>
<center>
    <h1>Welcome&nbsp;to&nbsp;rumosky.com!</h1>
    <script type="text/javascript">
    function welcome() {
    var visitor_name;
    visitor_name = prompt(" 请输入你的姓名：");
    document.write("<h3>Hello "+visitor_name+" Welcome!</h3>");}
    welcome();
    </script>
    <p>I love rumosky.com！</p>
    <hr>
    <p>Copyright&nbsp;&copy;&nbsp;2018&nbsp;<a href="https://www.rumosky.com" target="_blank">如默星空</a>&nbsp;All&nbsp;Rights&nbsp;Reserved</p>
</center>
</body>
</html>

加载外部JavaScript文件

将js代码写好保存为xxx.js
写好HTML代码后，在<head>和</head>直接添加<style type="text/javascript" src="xxx.js"></style>
src=""引号之内的是js文件的路径

示例test.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试js</title>
<script type="text/javascript" src="function.js"></script>
</head>

<body>
<center>
    <h1>Welcome&nbsp;to&nbsp;rumosky.com!</h1>
    <script type="text/javascript">welcome();</script>
    <p>I love rumosky.com！</p>
    <hr>
    <p>Copyright&nbsp;&copy;&nbsp;2018&nbsp;<a href="https://www.rumosky.com" target="_blank">如默星空</a>&nbsp;All&nbsp;Rights&nbsp;Reserved</p>
</center>
</body>
</html>

function.js

function welcome() {
    var visitor_name;
    visitor_name = prompt(" 请输入你的姓名：");
    document.write("<h3>Hello "+visitor_name+" Welcome!</h3>");
}

版权声明：本站未注明转载的文章均为原创，版权归如默所有
本文链接：https://www.rumosky.com/archives/73.html
所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。
您可以自由的转载和修改，但请务必注明文章来源和作者署名并说明文章非原创且不可用于商业目的。