《HTML+CSS+JavaScript》之第24章 JavaScript简介

最新推荐文章于 2024-09-22 11:17:00 发布

mali378287007

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量1.7k

点赞数

分类专栏： JavaScript 学习整理文章标签： javascript

本文链接：https://blog.csdn.net/oqqyx1234567/article/details/125646767

版权

整理同时被 3 个专栏收录

181 篇文章 12 订阅

订阅专栏

学习

130 篇文章 4 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

《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>