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

相关推荐

  • 创业的路就在自己脚下——访科技种植创业者扎西东主

    德令哈市某酒店厨师长介绍说,自从他们酒店食谱上有了芽苗菜,由于绿色无污染,一推出就受到广大顾客的热捧,每天都能销售二三十份,也是不少食客首选的健康蔬菜。 在面积只有一百多平方米的芽苗菜日光温室里, 500盘芽苗一片葱绿,有的正在出芽,有的即将上市。扎西东主告诉记者:“所有的芽菜,不管豌豆苗、瓜子苗,还是萝卜苗,每天都要定时进行浇水。如果呵护好的话15天左右就…

    创业分享 2023-05-16
    74
  • 返乡创业,如何迈过资金坎儿?

    张义珍介绍, 《意见》 明确, 将一次性的创业补贴试点政策, 拓展到首次创业、 正常经营一年以上的返乡创业农民工, 同时允许地方对回迁或购置生产设备的创业企业给予一定补贴。 如何帮助返乡创业者迈过融资难这道坎儿, 各地都有自己的探索。 2015年, 在外打工多年的她和丈夫回到家乡, 投资了一个养鸡场。 利用废弃地和自留地,她投资了50多万元, 建起了500多…

    创业分享 2023-05-20
    60
  • [创业板专栏]一季度业绩史上最惨 安利股份再推员工持股计划

      员工持股1期曾狂赚3倍   【最新相关报道】   也就是说,尽管目前证监会已经确定严控资管产品杠杆率,股票类,混合类结构化资产管理计划的杠杆倍数不得超过1倍,但通过大股东借款的方式,安利股份本次员工持股计划仍然达到了6.5倍的杠杆。这在目前的持股计划中已经属于少数。   从去年宝万事件起,A股曾有多家公司做出为防止恶意收购而修改公司章程的情况,去年8月证…

    创业分享 2023-05-25
    65
  • 应用号创业不是“弯道超车”,而是“车毁人亡”?

    应用号之所以让很多创业者们感到兴奋的一个重要原因,是因为他们想起了2012年微信刚刚推出微信订阅号时的场景: 在应用号诞生之前,互联网行业已经经历过手游创业的风口、APP创业的风口、Html5 创业的风口。 这些风口直接刺激了 Java 这些开发语言的普及,开发水准和人才储备都处于不断发展的阶段。所以并不是应用号送给了 Java 工程师们一个风口,而是技术的…

    创业分享 2023-06-16
    165
  • 2018年全国大学生创业实训营第一期在湖南长沙开营

    为激发大学生创业意识,提升大学生创新精神和创业能力,7月9日,由团中央学校部、全国学联秘书处主办的2018年全国大学生创业实训营(第一期)在湖南长沙成功开营。 团中央学校部副巡视员王良、团湖南省委书记汤立斌、中国青年报副总编辑毛浩、湖南机电职业技术学院党委书记成立平等嘉宾出席开营仪式并讲话。来自全国78所高校的120名营员及相关专家、投资人参加了此次活动。 …

    2023-05-17
    53

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信