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>