JavaScript代码的三种引入方式
作者：码上未来CodingFuture
来源：码上未来CodingFuture
发布日期：2024年03月07日
在网页中编写JavaScript代码时，需要先引入JavaS...
在网页中编写JavaScript代码时，需要先引入JavaScript代码。 JavaScript代码有3种引入方式，分别是行内式、嵌入式和外链式，下面分别进行讲解。
1.行内式 行内式是将JavaScript代码作为HTML标签的属性值使用。例如，在单击超链接“test”时，弹出一个警告框提示“Hello”，示例代码如下： < a href "javascript:alert('Hello');" test </ a 需要说明的是，行内式只有在临时测试或者特殊情况下使用，一般情况下不推荐使用行内式，因为行内式有如下缺点。 (1)行内式可读性较差，尤其是在HTML文件中编写大量JavaScript代码时，不方便阅读。 (2)行内式在遇到多层引号嵌套的情况时，引号非常容易混淆，导致代码出错。 2.嵌入式 嵌入式(或称内嵌式)使用<scrip>标签包裹JavaScript代码，直接编写到HTML文件中，通常将其放到<head>标签<body>或标签中。<scrip>标签的type属性用于告知浏览器脚本类型，HTML.5中该属性的默认值为“text/javascript”，因此在使用HTML5时可以省略ype属性。嵌入式的示例代码如下： < script JavaScript代码 </ script 3.外链式 外链式(或称外部式)是将JavaScript 代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML页面中使用<script>标签的src属性引人“js”文件。外链式适合javascript代码量较多的情况。在html页面中引入“js”文件，示例代码如下： < script src "test.js" </ script 上述代码表示引入当前目录下的tesL.js文件。需要注意的是，外链式的标签内不可以编写JavaScript 代码。 为了帮助初学者更好地理解外链式，下面利用外链式实现浏览网页时在页面中自动弹出警告框。创建Example02.html文件，引入Example02.js文件，具体代码如例1-2所示。 <!DOCTYPE html> < html < head < meta charset "UTF-8" < title Document </ title </ head < body < script src "Example02.js" </ script </ body </ html 标签的src属性设置了要引入的文件为Example02.js。 创建Example02.js文件，在该文件中编写如下代码： alert 'Hello JavaScript' 保存代码，在浏览器中访问Example02.html文件，页面效果与例1-1相同。 以上讲解了JavaScript的3种引入方式。现代网页开发中提倡结构、样式、行为的分离，即分离HTML、CSS、JavaScrixt这3部分代码，这样更有利于文件的维护。当需要编写大量的、逻辑复杂的、具有特定功能的JavaScrigt代码时，推荐使用外链式。外链式相比嵌入式，具有以下3点优势： (1)外链式存在于独立文件中，有利于修改和维护，而嵌人式会导致HTML代码与JavaScript代码混合在一起。 (2)外链式可以利用浏览器缓存提高速度。例如，在多个页面中引入相同的JavaScript文件时，打开第1个页面后，浏览器将JavaScript文件缓存下来，下次打开其他页面时就不用重新下载该文件了。 (3)外链式有利于HTML页h代码结构化，把大段的JavaScript代码分离到HTML页面之外，既美观，也方便文件级别的代码复用。 码上未来IT实训课程优势 01 课程内容牛 ●Java、Web、Python、互联网全栈开发 等开发课程，每年迭代课程内容 ●真实企业资源，学习更深入 02 专家技术牛 ●技术大咖根据课程体系分重点、分阶段授课 ●5年以上企业一线开发经验项目经理、技术大牛实战授课 03 实训案例牛 ●真实的企业一线产品需求案例 ●全部来自一线的项目经理， 带来真实需求一线项目 04 学习模式牛 ●6个月全日制实训学习，真实的项目经验 ●讲练结合，掌握更熟练，全程技术老师跟踪辅导 05 就业服务牛 ●毕业即就业，学员就业 ●保薪资就业协议 入学即签订 ●4-5轮模拟面试+职业素养课程，全程跟踪，为就业保驾护航 ●毕业学生享受技术大咖终身支持指导 课程适用人群 ●大学应往届生学习进修、在职提升、转行充电人群； ●会基本的电脑操作，打字、有无编程基础均可； ●对互联网编程感兴趣，想往网站开发、软件工程、大数据方向发展的人群； ●低学历人群经过入学测试后方可选修。
更多精彩推荐 ◡̈ 打破时间束缚，掌握一技之长才是硬道理 ◡̈ 提升学历，为职业成功铺路 ◡̈ 提高你的职场竞争力：IT培训是关键！ ◡̈ 你有面试困难症？手把手教你解决
