在HTML文档中嵌入JavaScript的四种方法


Posted in Javascript onMay 07, 2018

在HTML里嵌入JavaScript

在HTML文档里嵌入客户端JavaScript代码有4中方法:

1.内嵌,放置在<script>和</script>标签之间  (少);

2.放置在有<script>标签的src属性指定的外部文件中  (多);

3.放置自HTML事件处理程序中,该事件处理程序由onclick或onmouseover这样的HTML属性值指定它  (很少);

4.放在一个URL里,这个URL使用特殊的协议”javascript“协议  (很少);

0——附:脚本类型

JavaScript是Web的原始脚本语言,在默认情况下,<script>元素包含或引用JavaScript代码。如果要使用不标准的脚本语言,如VBScript,就必须用type属性指定脚本的MIME类型,例如:

<script type="text/vbscript"> 
 ... ... 
</script>

type 属性的默认值是 ”text/javascript“。

1——内嵌<script>元素

例如:

<script> 
 function displayTime(){ 
 ... ... 
 } 
 window.onload = displayTime; 
</script>

2——src属性使用外部文件中的脚本

<script>标签支持src属性,这个属性指定包含JavaScript代码的文件的URL。它的用法如下:

 

<script src="../../scripts/util.js"></script>

使用src属性时,<script></script>标签之间的任何内容都会被忽略。

当在页面中用src属性包含一个脚本时,就给了脚本坐着完全控制Web页面的权限。

3——HTML中的事件处理程序

当脚本所在的HTML文件被载入浏览器时,这个脚本里的JavaScript代码只会执行一次。JavaScript代码可以通过把函数赋值给Element对象的属性来注册事件处理程序。这个Element对象表示文档里的一个HTML元素。

例如:

 

<input type="checkbox" name="options" value="giftwrap" onchange="order.options.giftwrap = this.checked;">

HTML中定义的事件处理程序的属性可以包含任意条JavaScript语句,相互之间用逗号分隔。这些语句组成一个函数体,然后这个函数成为对应事件处理程序属性的值。

4——URL中JavaScript

在URL后面跟着一个javascript:协议限定符,是另一种嵌入JavaScript代码到客户端的方式。这种特殊的协议类型指定URL内容为任意字符串,这个字符串是会被JavaScript解释器运行的JavaScript代码。它被当作单独的一行代码对待,这意味着语句之间必须用分号隔开,而注释必须用/**/注释代替。javascript:URL能识别的资源是转换成字符串的执行代码的返回值。如果代码返回 undefined,那么这个资源是没有内容的。

javascript:URL可以在可以使用常规URL的任意地方:比如<a>标记的href属性,<form>的action属性,甚至window.open()方法的参数。

超链接里的JavaScript URL可以是这样:

<a href="javascript:new Date().toLocaleTimeString();" rel="external nofollow" > 
What time is it? 
</a>

上文所表述的全部内容是HTML文档中嵌入JavaScript的四种方法,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
JS截取字符串实例详解
Nov 24 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
JavaScript门道之标准库
May 26 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 Javascript
详解JavaScript的BUG和错误
May 07 #Javascript
vue实现个人信息查看和密码修改功能
May 06 #Javascript
基于vue-element组件实现音乐播放器功能
May 06 #Javascript
VueJs组件之父子通讯的方式
May 06 #Javascript
vue自动化表单实例分析
May 06 #Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 #Javascript
JS中this的指向以及call、apply的作用
May 06 #Javascript
You might like
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
一个简易时钟效果js实现代码
2020/03/25 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
Python中super函数用法实例分析
2019/03/18 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
学校消防安全制度
2014/01/30 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
大学生英语演讲稿
2014/04/24 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
药店营业员岗位职责
2015/04/14 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
导游词之河北白洋淀
2020/01/15 职场文书