JavaScript代码的三种引入方式【操作演示】

在网页中编写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页面之外,既美观,也方便文件级别的代码复用。

免责声明:文章内容来自互联网,本站仅作为分享,不对其真实性负责,如有侵权等情况,请与本站联系删除。
转载请注明出处:JavaScript代码的三种引入方式【操作演示】 https://www.dachanpin.com/a/cyfx/10760.html

(0)
上一篇 2023-05-12 02:14:03
下一篇 2023-05-12 02:15:05

相关推荐

  • 创业板如何“再出发”?

      四是应完善与其他板块的协力合作机制。发展多层次资本市场是一个历史过程,需要根据实践得出的经验教训不断改革完善。科创板定位为主要服务于符合国家战略、突破关键核心技术、市场认可度高的科技创新企业。创业板应在延续原有服务创新型、成长型科技企业定位基础上,扩大覆盖面,提高包容度。创业板和科创板是相互协调、相互促进关系,其他不同层次资本市场肩负的任务也各有侧重,但…

    创业分享 2023-05-12
    66
  • 中国音乐财经网

    如何面对正确的受众,在对的时间,播放对的音乐?这位名叫戚渊的创业者选择了环境音乐领域并一发不可收拾。 文丨阿丽莎 王华中 2005年,戚渊离开工作了二十多年的上海人民广播电台,来到位于北京的中国国际广播电台工作。那一年,他和朋友老去东三环一家台湾餐馆吃饭,菜不错、环境也不错,但是音乐特别糟糕。 “每次我们去,如果旁边没有人,我们就会说,关掉音乐吧,别影响我们…

    创业分享 2023-05-30
    77
  • 江苏省镇江市京口区举办大学生创业经验分享会

    近日,江苏省镇江市京口区人社局联合工商联举办“京彩人生创业启航”创业经验分享会,70余名师生汇聚一堂,聆听京口创业典型王海宇、王福珍的创业经验分享报告。 王海宇和王福珍两位创业者分别为现任镇江市创业精英联合会社会公益部的副部长和京口区工商联执委,均获得过多项社会荣誉。他们给在场师生分享自己的创业经历,鼓励同学们要找准定位,珍惜在校学习的美好时光,为以后踏上创…

    创业分享 2023-05-22
    81
  • 南京最缺这3类创新创业型人才,有你吗?

    本次招聘会提供岗位675 个,需求人数2501 人。招聘单位行业排名前三名依次为:计算机服务业( 12.6% ) 、制造业( 10.4% ) ,医药制造业( 10.2% ) ;岗位需求排名前三名依次为:IT/ 计算通讯/ 电子( 26.6% ) 、销售/ 客服/ 技术支持( 16.6% ) 、人事/ 行政/ 管理( 10.8% ) ,算下来,这三类人才需求总…

    2023-05-18
    63
  • [创业板专栏]乐视汽车进入张海亮时代:造车如何不被资本绑架?

      中金网3月28日讯,目前乐视汽车竞争对手蔚来汽车新一轮6亿美元融资已经全部落定,此轮融资之后,蔚来汽车的估值已经达到200亿元人民币。因此,如果乐视汽车在此次A轮中被迫延迟或金额数目较少,那么将会影响到乐视汽车造车的进程。   上周,乐视汽车联合创始人,全球副董事长丁磊的离职成为圈里圈外关注的热点。实际上,丁磊的离开已在意料之中,本报年初已经作出了预判(…

    创业分享 2023-05-25
    62

发表回复

登录后才能评论

联系我们

在线咨询: QQ交谈

邮件:362039258@qq.com

工作时间:周一至周五,9:30-16:30,节假日休息