《HTML+CSS+JavaScript》之第24章 JavaScript简介
24.1 JavaScript是什么
24.1.1 JavaScript简介
JS,嵌入到HTML页面中的编程语言,由浏览器一边解释一边执行。
24.1.2 教程介绍
Java面向对象,JavaScript函数式编程。
24.2 JavaScript开发工具
24.3 JavaScript引入方式
24.3.1 外部JavaScript
script标签引入外部js文件。
css文件,只能在head中引入。
js文件,head和body都能引入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<!--head中引入-->
<script src="index.js"></script>
</head>
<body>
<!--body中引入-->
<script src="index.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<!--引入外部CSS-->
<link rel="stylesheet" type="text/css" href="index.css" />
<!--引入外部JavaScript-->
<script src="index.js"></script>
</head>
<body>
</body>
</html>
24.3.2 内部JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<!--head中引入-->
<script type="text/javascript">
...
</script>
</head>
<body>
<!--body中引入-->
<script>
...
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script>
document.write("test");
</script>
</head>
<body>
</body>
</html>
24.3.3 元素属性JavaScript
元素的事件属性中直接编写JavaScript或调用函数。
- 元素事件中编写JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" value="按钮" onclick="alert('test测试')"/>
</body>
</html>
- 元素事件中调用函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function alertMes() {
alert("test测试");
}
</script>
</head>
<body>
<input type="button" value="按钮" onclick="alertMes()"/>
</body>
</html>
24.4 JavaScript程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
alert("欢迎来到绿叶学习网!");
}
window.onbeforeunload = function (event) {
var e = event || window.event;
e.returnValue = "记得下来再来喔!";
}
</script>
</head>
<body>
</body>
</html>