jS代码写在html什么位置,3种JavaScript代码书写位置和注意事项
在网页中编写JavaScript代码时,有3种书写位置,分别是行内式、内嵌式(也称为嵌入式)和外部式(也称为外链式),下面分别进行讲解。
1. 行内式
行内式是指将单行或少量的JavaScript代码写在HTML标签的事件属性中(也就是以on开头的属性,如onclick)。下面通过具体操作步骤进行演示。
(1)创建一个简单的HTML页面,将文件命名为demo01.html。
(2)编写demo01.html,具体代码如下。
Document
在上述代码中,第4行声明了网页的编码为UTF-8,帮助浏览器正确识别网页的编码。在声明编码后,还需要确保文件本身的编码也是UTF-8。目前大多数代码编辑器新建的文件编码默认都是UTF-8。另外,Windows记事本默认的编码是ANSI,在记事本中编写的网页容易出现乱码,因此读者应杜绝使用记事本编写代码文件。
(3)使用行内式编写JavaScript代码,实现单击一个按钮后,弹出一个警告框,显示一些提示信息,具体代码如下。
在上述代码中,写在onclick属性里的代码就是JavaScript代码。
(4)通过浏览器访问demo01.html,运行结果如图1所示。
图1 行内式
以上步骤演示了行内式的使用。在实际开发中,使用行内式还需要注意以下4点。
① 注意单引号和双引号的使用。在HTML中推荐使用双引号,而JavaScript推荐使用单引号。
② 行内式可读性较差,尤其是在HTML中编写大量JavaScript代码时,不方便阅读。
③ 在遇到多层引号嵌套的情况时,非常容易混淆,导致代码出错。
④ 只有临时测试,或者特殊情况下再使用行内式,一般情况下不推荐使用行内式。
2. 内嵌式(嵌入式)
内嵌式是使用
下面我们通过具体操作步骤进行演示。
(1)创建demo02.html,用来编写内嵌式JavaScript代码,示例代码如下。
……
alert('内嵌式');
在上述代码中,第4行是一条JavaScript语句,其末尾的分号“;”表示该语句结束,后面可以编写下一条语句。
(2)通过浏览器访问demo02.html,页面一打开后,就会自动弹出一个警告框,提示信息为“内嵌式”。
3. 外部式(外链式)
外部式是指将JavaScript代码写在一个单独的文件中,一般使用“js”作为文件的扩展名,在HTML页面中使用
外部式有利于HTML页面代码结构化,把大段的JavaScript代码独立到HTML页面之外,既美观,也方便文件级别的代码复用。需要注意的是,外部式的
下面我们通过具体操作步骤进行演示。
(1)创建demo03.html,用来编写外部式JavaScript代码,示例代码如下。
……
(2)创建test.js文件,在文件中编写JavaScript代码,如下所示。
alert('外部式');
(3)通过浏览器访问demo03.html,页面一打开后,就会自动弹出一个警告框,提示信息为“外部式”。
猜你喜欢:
jS代码写在html什么位置,3种JavaScript代码书写位置和注意事项相关推荐
- 13 种 JavaScript 代码技巧
13 种 JavaScript 代码技巧 1. 多表达式多 if 判断 我们可以在数组中存储多个值,并且可以使用数组include方法. // 长 if (x === 'abc' || x === ' ...
- js 延迟几秒执行ifarme_延时加载JavaScript代码提高速度_javascript技巧 -
...值: none 0 e1. 利用animation属性实现循环间的延时执行实例教程简介:先来介绍一下animation定义和用法,animation 属性是一个简写属性,用于设置六个动画属性:2 ...
- y空间兑换代码_如何用不到 2KB 的 JavaScript 代码写一个 3D 赛车游戏?
几个月前,JS1k游戏制作节(JS1K game jam)传出不再举办消息后,许多游戏迷开始哀嚎. Frank Force 也是其中一位,但他还有另一层身份--一位德克萨斯州奥斯汀的独立游戏设计师.F ...
- 不可不知的 5 种 JavaScript 代码编辑器
代码编辑器对于程序员来说是不可或缺的,其中JavaScript是一款非常热门的编程语言.本文将介绍5中非常实用的JavaScript代码编辑器. 作者 | Sam Smile 译者 | 胡雪蕊,责编 ...
- java时间代码_java获取当前时间的四种方法代码实例
这篇文章主要介绍了java获取当前时间的四种方法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 第一种:Date类 public class ...
- python代码写好了怎么运行不了-python代码可以直接运行吗 Python写了代码如何运行...
先下载python,然后打开命令行,输入 python 你的代码文件名. 有python代码怎么编成可执行的exe程序? 如果可以能否帮小编做成可执行的exe程序儿女情长什么的,真的很影响小编行走江湖 ...
- python代码写父亲节快乐图片_巧用代码制作动态图文图【父亲节】
父 亲 节 2010年06月20日 父爱深深 父爱无疆 爸爸的爱也温柔 效果图一 父 亲 节 2010年06月20日 父爱深深 父爱无疆 爸爸的爱也温柔 效果图二 父 亲 节 2010年06月20日 ...
- android 代码写命令,monkey基本命令及脚本编写(示例代码)
Monkey 是Android自带的黑盒测试工具,一般通过随机触发界面事件,来确定应用是否会发生异常,多用于android应用的稳定性.压力测试 基本命令: adb shell monkey [opt ...
- 开源代码 不开源_开源的8种非代码方式
开源代码 不开源 无论您是新手程序员,经验丰富的老手,还是根本不是工程师,除了编码之外,还有许多方法可以为开源项目做出贡献. 与专有软件相比,开源项目在涉及非工程方面时往往相对缺乏人手,因此请不要因为 ...
最新文章
- [angularjs] angularjs系列笔记(四)控制器
- 区块链BaaS云服务(36)欧盟“用户身份认证”ESSIF
- k2p华硕系统怎么设置_Linux怎么设置系统环境变量之export命令详解
- 基于Centos6.2 X64系统下的邮件系统(二)
- 最简单的视音频播放示例5:OpenGL播放RGB/YUV
- springboot maven父项目脚手架
- 沪漂6年,我终于在上海买了第一套房
- 【视频分享】尚硅谷HTML5前端视频_React视频
- 做网站推广最实用的88种网站推广方法
- 计算机视觉面试经验汇总(一)
- 关于Oracle SQL中系统时间和库里数据时间的比较
- java pow实现_实现Java Math.pow(double a,double b) 方法
- 这可能是最完整的进藏攻略
- mysql中常用动词_mysql常用sql语句总结
- Jasper 动态数据源
- 什么是依赖注入和控制反转
- 【讲解】缺席的神官——动态规划模型
- 这篇测评告诉你:移动式迷你KTV凭什么攻陷了各大商场?
- malloc函数java_malloc函数具体解释
- Carthage 安装以及初步实用