JavaScript 引入方式
- 提问:CSS的引入方式?
- 在学习
JavaScript 语法之前,我们首先要知道在哪里写 JavaScript 才行。 - 想要在
HTML 中引入 JavaScript,一般有 3 种方式。 -
-
-
- 实际上,
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 中引入。
- 实际上
<script></script>是一种简写形式,它其实等价于:
<script type="text/javascript">……
</script>
1.2.3. 元素属性 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>