JavaScript代码怎样引入到HTML中?

开发 前端
JavaScript 程序不能独立运行,它需要被嵌入 HTML 中,然后浏览器才能执行 JavaScript 代码。

JavaScript 程序不能独立运行,它需要被嵌入 HTML 中,然后浏览器才能执行 JavaScript 代码。通过 <script> 标签将 JavaScript 代码引入到 HTML 中,有两种方式:

1.内部方式

内部方式是通过<script>标签包裹JavaScript代码,从而引入HTML页面中,示例代码如下:

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 内联形式:通过 script 标签包裹 JavaScript 代码 -->
   <script>
     alert('嗨,欢迎来传智播学习前端技术!')
   </script>
 </body>
 </html>

2.外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中,然后通过 <script>标签的 <src>属性引入,示例代码如下:

// demo.js
document.write('嗨,欢迎来传智播学习前端技术!')
<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 -->
   <script src="demo.js"></script>
 </body>
 </html>

注意:如果 script 标签使用 src 属性引入了某 .js 文件,那么 标签的代码会被忽略!!!如下代码所示:

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 -->
   <script src="demo.js">
     // 此处的代码会被忽略掉!!!!
       alert(666);  
   </script>
 </body>
 </html>
责任编辑:华轩 来源: 今日头条
相关推荐

2020-06-12 08:21:58

JavaScript代码开发

2018-01-18 16:40:02

润乾word报表

2020-12-25 10:28:41

JavaScript模块module

2013-12-04 14:19:40

JavaScript代码重用

2019-04-01 09:17:23

Kubernetes公共云祼机

2022-06-23 09:00:00

JavaScriptHTML应用程序

2023-02-27 14:55:54

技术研究

2009-09-18 14:40:45

HTML 5技术

2013-08-26 17:41:43

JavaScriptWindows 8.1

2023-03-09 15:11:30

数据可视化工具matplotlib

2022-07-07 07:22:01

浏览器JavaScript工具

2023-08-29 09:00:00

JavaScript工具

2013-07-03 16:49:17

AndroidWebView

2013-11-06 09:28:50

移动开发HTML 5

2013-09-16 10:19:08

htmlcssJavaScript

2011-08-04 15:52:48

Objective-C HTML

2012-08-29 09:58:34

JavaScriptJavaScript模

2022-08-31 12:15:09

JavaScript代码优化

2017-07-10 14:58:23

JavaScript代码风格写作准则

2024-09-14 11:23:19

点赞
收藏

51CTO技术栈公众号