【3.1JavaScript】JavaScript引入方式

开源代码
2025-08-23 11:45:02

目录静态页面和动态页面的区别1.JavaScript的引入方式1.1外部JavaScript1.2内部JavaScript1.3元素属性JavaScript本章使用到的方法一个简单的 JavaScript 程序 “HTML 控制网页的结构，CSS 控制网页的外观，而 JavaScript 控制网页的行为”

静态页面和动态页面的区别

不是 “会动” 的页面就叫动态页面，页面加入了 JavaScript 也不一定是动态页面，静态页面和动态页面的区别在于。是否与服务器进行数据交互，简单来说就是，是否用到了后端技术（如PHP、JSP、ASP.NET）。下面列出的四种情况都不一定是动态页面：

带有音频和视频带有Flash动画带有CSS动画带有JavaScript动画

1.JavaScript的引入方式外部 JavaScript内部 JavaScript元素事件 JavaScript 1.1外部JavaScript

外部 JavaScript 是最理想的 JavaScript 引入方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>  <script src="index.js"></script> </head> <body>  <script src="index.js"></script> </body> </html>

注：对于 CSS 来说，外部 CSS 文件只能在 head 中引入。不过对于 JavaScript 来说，外部 JavaScript 文件不仅可以在 head 中引入，还可以在 body 中引入。

此外还有一点需要注意，引入外部 CSS 文件使用的是 link 标签，而引入外部 JavaScript 文件使用的是 script 标签。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>  <link rel="stylesheet" href="index.css">  <script src="index.js"></script> </head> <body> </body> </html>

rel="stylesheet"：指定该文件是一个样式表。

在 HTML 中，使用相对路径时，一般情况下不需要加 ./ 前缀，除非你希望显式地表示当前目录。

1.2内部JavaScript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>  <script> // 内部JavaScript alert("head内部JavaScript"); </script> </head> <body>  <script> // 内部JavaScript alert("body内部JavaScript"); </script> </body> </html>

实际上 <script></script> 是一种简写形式，它其实等价于：

例子：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html>

document.write()表示在页面中输出一个内容。

1.3元素属性JavaScript

指的是在元素的 “事件属性” 中直接编写 JavaScript 或函数调用

直接编写：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="button" value="按我" onclick="alert('Hello!')"> </body> </html>

函数调用：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> function myalert(){ alert("Hello"); } </script> </head> <body> <input type="button" value="按我" onclick="myalert()"> </body> </html> 本章使用到的方法 document.wirte() 在页面输出内容alert() 弹出对话框一个简单的 JavaScript 程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = function(){ alert("欢迎光临"); } window.onbeforeunload = function(){ var e = event || window.event; e.returnValue = "确定离开当前页面吗？"; } </script> </head> <body> </body> </html>

这些代码只是让大家感性的认识一下 JavaScript 是怎样的，可以做点什么，后面会慢慢学到

注：在现代浏览器中，onbeforeunload 事件仍然可以触发，但大部分浏览器都会显示一个默认的提示框，而不会显示你设置的自定义消息。这是出于安全和用户体验的考虑。

标签：

【3.1JavaScript】JavaScript引入方式由讯客互联开源代码栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“【3.1JavaScript】JavaScript引入方式”

上一篇
Unity通过Vosk实现离线语音识别方法

下一篇
zero自动化框架搭建---Git安装详解