JavaScript引入方式
JavaScript 程序不能独立运行,它需要被嵌入 HTML 中,然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中,一般以下方式:
- 外部方式
- 内部方式
- JavaScript元素事件
- 通过JavaScript伪URL引入
外部形式
外部形式,就是把HTML代码和JavaScript代码都各自单独放在不同的文件中,然后在HTML文档中使用script标签来引入JavaScript代码
步骤:将 JavaScript 代码写在独立的以 .js 结尾的文件中,然后通过 script 标签的 src 属性引入
语法:
// demo.js
document.write('这是demo.js文件内容')
<!--demo.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript引入方式</title>
<!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 -->
<!--1.外部形式在head中引入-->
<script src="demo.js"></script>
</head>
<body>
<!--2. 外部形式在body中引入-->
<script src="demo.js"></script>
</body>
</html>
在script标签中,只需引入src这一个属性即可。src,是"source"的意思,表示文件路径
如果在 script 标签使用 src 属性引入了某 .js 文件后,script标签内再写了代码,那么 标签内的代码会被忽略!
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript引入方式</title>
</head>
<body>
<!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js">
// 此处的代码会被忽略掉!!!!
console.log("这代码会被忽略掉")
</script>
</body>
</html>
内部方式
内部方式,指的是把HTML代码和JavaScript代码都放在同一个文件中。其中,JavaScript代码都写在script标签内。
语法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内部引入</title>
<!-- 内部形式:通过 script 标签包裹 JavaScript 代码 -->
<!-- 1.在head中引入 -->
<script>
//js代码
......
</script>
</head>
<body>
<!-- 2.在body中引入 -->
<script>
//js代码
......
</script>
</body>
</html>
从上该实例中看出,内部样式JavaScript文件不仅可以在head中引入,也可以在body中引入。
其中,"<script></script>"是一种简写形式,等价于如下代码:
<script type="text/javascript">
console.log('script标签完整写法')
</script>
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内部引入</title>
<!-- 内部形式:通过 script 标签包裹 JavaScript 代码 -->
<!-- 1.在head中引入 -->
<script>
console.log("这是js代码")
</script>
</head>
<body>
<!-- 2.在body中引入 -->
<script>
console.log("这是js代码")
</script>
</body>
</html>
JavaScript元素属性
元素属性JavaScript,指的是在元素的”事件属性"中直接编写JavaScript代码或调用JavaScript函数
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在元素事件中编写JavaScript</title>
</head>
<body>
<input type="button" value="按钮" onclick="alert('你触发了alert事件')">
</body>
</html>
运行结果
实例:在元素事件中调用函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在元素事件中调用函数</title>
<script>
function example()
{
alert("你触发了example函数")
}
</script>
</head>
<body>
<input type="button" value="按钮" onclick="example()"/>
</body>
</html>
运行结果
通过JavaScript伪URL引入
在多数支持JavaScript脚本的浏览器中,可以通过JavaScript伪URL地址调用语句来引入JavaScript脚本代码。一般格式如下:
JavaScript:alert("你好")
实例:
<a href="javascript:alert('你好?')">点击</a>
伪URL地址可用于文档任何地方,并触发任意数量的JavaScript函数或对象固有的方法。多用于表单验证、超链接等。