JavaScript简介之引入方式

JavaScript 引入方式

  • 提问:CSS的引入方式?
  • 在学习 JavaScript 语法之前,我们首先要知道在哪里写 JavaScript 才行。
  • 想要在 HTML 中引入 JavaScript,一般有 3 种方式。
    • 外部 JavaScript
    • 内部 JavaScript
    • 元素事件 JavaScript(行内JS
  • 实际上,JavaScript 的 3 种引入方式,跟 CSS 的 3 种引入方式(外部样式表、内部样式表、行内样式表)是非常相似的。

1.2.1. 外部 JavaScript

  • 外部 JavaScript:指的是把 HTML 代码和 JavaScript 代码单独放在不同文件中,然后在 HTML 文档中使用 script 标签来引入 JavaScript 代码。
  • 语法:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <!--1、在head中引入-->
    <script src="dom1.js"></script>
  </head>
  <body>
    <!--2、在body中引入-->
    <script src="dom1.js"></script>
  </body>
</html>

1.2.2. 内部 JavaScript

  • 内部 JavaScript,指的是把 HTML 代码和 JavaScript 代码放在同一个文件中,其中 JavaScript 代码写在<script></script>标签对内。标签可以放在网页的任何位置
  • 语法:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <!--1、在head中引入-->
    <script>
      alert("123");
    </script>
  </head>
  <body>
    <!--2、在body中引入-->
    <script>
      alert("456");
    </script>
  </body>
</html>
  • 同样的,内部 JavaScript 文件不仅可以在 head 中引入,也可以在 body 中引入。
  • 一般情况下,我们都是在 head 中引入。
  • 实际上<script></script>是一种简写形式,它其实等价于:
<script type="text/javascript">
  ……
</script>
  • 一般情况下,使用简写形式比较多。

1.2.3. 元素属性 JavaScript

  • 元素属性 JavaScript,指的是在元素的事件属性中直接编写 JavaScript 或调用函数。
  • 举例:在元素事件中编写 JavaScript
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
<input type="button" style="color:red" value="按钮" onclick="alert('Gok,给你初恋般的感觉')"/>
</body>
</html>
  • 举例:在元素事件中调用函数
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      function yyds() {
        alert("Gok,给你初恋般的感觉");
      }
    </script>
  </head>
  <body>
    <input type="button" value="按钮" onclick="yyds()" />
  </body>
</html>

1.3. 一个简单的 JavaScript 程序

  • 实现代码如下:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            alert("Welcome to Big Hacker!")
        }
    </script>
</head>
<body>
<button onclick="location.href='https://www.4399.com/'">提交</button>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苏苏渗透大师

请把钱砸我脸上谢谢

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值