加载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

所有转载文章须注明出处，保留原作者链接，并说明文章非原创，且不可用于商业目的

Last modification：March 6th, 2020 at 01:44 pm
© 允许规范转载
^_^您的每一分钱，都是对我最大的鼓励！