如默

HTML学习笔记:加载JavaScript
加载JavaScript类似于加载css,可以参考此文章:HTML学习笔记:加载css在页面内加载在<hea...
扫描右侧二维码阅读全文
04
2018/12

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>");
}
Last modification:April 14th, 2019 at 12:56 am
^_^您的每一分钱,都是对我最大的鼓励!

2 comments

  1. 空灵使者。

    博主写的挺良心的,必须给个赞。好评!φ( ̄∇ ̄o)

    1. 如默
      @空灵使者。

      (☆ω☆)

Leave a Comment