百度360必应搜狗淘宝本站头条
grid 设置导航栏dedecms模版移位运算context xml
当前位置：网站首页 > 文章教程 > 正文

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

xsobi 2024-12-27 17:26 1 浏览

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

相关推荐

「真实案例」php文件锁产生的问题和解决方案

本文为php中文网认证作者：“齐天大圣”投稿，欢迎加入php中文网有偿投稿计划！一个真实案例想起自己之前犯过一个相关的错误。当时场景是这样的：有一个微信公众号项目，调用微信公众号的接口都需要acces...

PHP大文件读取操作 php大文件处理

简单的文件读取，一般我们会使用file_get_contents()这类方式来直接获取文件的内容。不过这种函数有个严重的问题是它会把文件一次性地加载到内存中，也就是说，它会受到内存的限制。因此，加...

Linux文件链接(软硬)的介绍及其应用

linux中对文件的链接分为两种，一种是硬链接，另一种是软链接。今天和大家介绍下这两种链接，以及如何去使用他们。硬链接首先我们来看硬链接，我们来用php中变量的引用来对比吧。$a=100;$b...

包含connect.php文件的写法以及循环输出查询结果

包含connect.php文件的写法以及循环输出查询结果我们先把代码写在下面：<?phprequire_once("./connect.php");$sql="selec...

PHP读取文件内容的五种方式 php读取txt

读取文件内容的五种方式分享下php读取文件内容的五种方法：好吧，写完后发现文件全部没有关闭。实际应用当中，请注意关闭fclose($fp);--...

多学习才能多赚钱之:php文件怎样打开和运行

php-fpm的进程数可以根据设置分为动态和静态。静态：直接开启指定数量的php-fpm进程，不再增加或者减少；动态：开始的时候开启一定数量php-fpm进程，当请求变大的时候，动态的增加php-fp...

PHP函数和文件 php中的文件包含语句以及各自的异同点

程序员编程语言之间的鄙视链：...

Linux服务器出现Socket Error「Too many open files」怎么办

最近在用freeswitch软交换进行语音通话，通话的时候需要调用音频文件进行播放，当并发量上来的时候，freeswitch监听服务的端口会不断的down掉，查看日志发现报了一个错如下：这个问题经常...

CMS系统天花板!这可能是在开源界上最值得推荐的CMS系统了

系统简介novel-plus是一款功能完善的原创文学CMS系统,支持多端使用（PC、WAP）阅读。由前台门户系统、作家后台管理系统、平台后台管理系统和爬虫管理系统等多个子系统构成...

用织梦建站的公司企业你们瑟瑟发抖吗?织梦开启维权之路索赔不低

织梦也就是dedecms这个网站内容管理系统,织梦建网站曾经在很长一段时间内非常出名,几乎成为建站首选,个人自不必说,很多小建站公司也是用的织梦直接来套站,虽然吧强梦系统漏洞bug一大堆,但是因为简便...

六个优质开源项目，让你更了解Django框架开发

Django是一个开源的Web应用框架，由Python写成。采用了MTV的框架模式，即模型M，视图V和模版T。它最初是被用来开发CMS软件的，所以Django很适合用来搭...

Python的Web开发--第一个Django项目

Python有强大的数据库，那么对数据分析之后的结果需要在web上展现，当然我们也可以借助Java等框架，但是多此一举，虽然python生态圈没有Java完善，但python有自己的轻量级和重量级框...

基于AHNCMs-15的对称超级电容器，纳米碳模板和预陶瓷聚合物如何

在阅读此文前，诚邀您请点点右上方的“关注”，既方便您进行讨论与分享，还能及时阅读最新内容，感谢您的支持。基于AHNCMs-15的对称超级电容器具有14.7Whkg的高能量密度?1在250瓦克的功率...

「某CMS漏洞」SQL注入漏洞分析 sql注入漏洞原理、常见测试方法及防御方法

前言这个CMS非常适合入门代码审计的人去学习，因为代码简单且漏洞成因经典，对一些新手有学习价值，...

织梦cms怎么添加商桥? 织梦cms教程

作为一个前端的销售人员，很多人会自己去买服务器域名做网站，当我们网站做好以后希望安装一个商桥上去，这样就可以在线沟通交互了。相信也有很多和我一样看不懂代码的小伙伴在问怎么添加商桥代码到网站文件中，我...

一周热门
最近发表
标签列表