百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

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

yuyutoo 2025-02-20 18:33 5 浏览 0 评论

在网页中编写JavaScript代码时,需要先引入JavaScript代码。JavaScript代码有3种引入方式,分别是行内式、嵌入式和外链式,下面分别进行讲解。

1.行内式

行内式是将JavaScript代码作为HTML标签的属性值使用。例如,在单击超链接“test”时,弹出一个警告框提示“Hello”,示例代码如下:

test

需要说明的是,行内式只有在临时测试或者特殊情况下使用,一般情况下不推荐使用行内式,因为行内式有如下缺点。

(1)行内式可读性较差,尤其是在HTML文件中编写大量JavaScript代码时,不方便阅读。

(2)行内式在遇到多层引号嵌套的情况时,引号非常容易混淆,导致代码出错。

2.嵌入式

嵌入式(或称内嵌式)使用标签包裹JavaScript代码,直接编写到HTML文件中,通常将其放到标签或标签中。标签的type属性用于告知浏览器脚本类型,HTML.5中该属性的默认值为“text/javascript”,因此在使用HTML5时可以省略ype属性。嵌入式的示例代码如下:

3.外链式

外链式(或称外部式)是将JavaScript 代码写在一个单独的文件中,一般使用“js”作为文件的扩展名,在HTML页面中使用

上述代码表示引入当前目录下的tesL.js文件。需要注意的是,外链式的标签内不可以编写JavaScript 代码。

为了帮助初学者更好地理解外链式,下面利用外链式实现浏览网页时在页面中自动弹出警告框。创建Example02.html文件,引入Example02.js文件,具体代码如例1-2所示。




  
  Document


  

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

相关推荐

微软Win10/Win11版Copilot上线:支持OpenAI o3推理模型

IT之家4月3日消息,科技媒体WindowsLatest昨日(4月2日)发布博文,报道称Windows10、Windows11新版Copilot应用已摘掉Beta帽...

WinForm 双屏幕应用开发:原理、实现与优化

在当今的软件开发领域,多屏幕显示技术的应用越来越广泛。对于WinForm应用程序来说,能够支持双屏幕显示不仅可以提升用户体验,还能满足一些特定场景下的业务需求,比如在演示、监控或者多任务处理等场景...

推荐一个使用 C# 开发的 Windows10 磁贴美化小工具

...

OpenJDK 8 安装(openjdk 8 windows)

通常OpenJDK8和11都能互相编译和通用。我们建议使用11,但是如果你使用JDK8的话也是没有问题的。建议配置使用OpenJDK,不建议使用OracleJDK,主要是因为版...

基于 Linux 快速部署 OpenConnect VPN 服务(ocserv 实战指南)

一、前言在如今远程办公和内网穿透需求日益增长的背景下,搭建一套安全、稳定、高效的VPN系统显得尤为重要。OpenConnectServer(ocserv)是一个开源、高性能的VPN服务端软件...

巧妙设置让Edge浏览器更好用(edge怎么设置好用)

虽然现在新版本的Edge浏览器已经推出,但是毕竟还处于测试的状态中。而Win10系统里面自带的老版Edge浏览器,却越来越不被人重视。其实我们只需要根据实际情况对老版本的Edge浏览器进行一些简单的设...

WPF做一个漂亮的登录界面(wpf页面设计)

...

微软开源博客工具Open Live Writer更新:多项Bug修复

OpenLiveWriter前身是WindowsLiveWriter,是微软WindowsLive系列软件之一,曾经是博主们非常喜爱的一款所见即所得博文编辑工具,支持离线保存,还支持图像编辑...

基于OpenVINO的在线设计和虚拟试穿 | OPENAIGC大赛企业组优秀作品

在第二届拯救者杯OPENAIGC开发者大赛中,涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到,我们特意开设了优秀作品报道专栏,旨在展示其独特之处和开发者的精彩故事。...

C#开源免费的Windows右键菜单管理工具

...

Windows10或11中隐藏的功能,用它再也不用担心电脑中病毒!

...

Python open函数详解(python open函数源码)

演示环境,操作系统:Win1021H2(64bit);Python解释器:3.8.10。open是Python的一个内置函数,一般用于本地文件的读写操作。用法如下。my_file=open(fi...

Windows 11 安装 Docker Desktop(Windows 11 安装助手 Windows 易升 关系)

...

Windows 11 新版发布:屏幕亮度自适应控制,小组件界面重新设计!

...

世界上最好用的Linux发行版之一,OpenSUSE安装及简单体验

背景之前无意在论坛里看到openSUSE的Linux发行版,被称为世界上最好用的Linux发行版之一(阔怕),一直想体验一下,于是这期做一个安装和简单体验教程吧。...

取消回复欢迎 发表评论: