在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 相关文章推荐
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
axios post提交formdata的实例
Mar 16 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
xml+php动态载入与分页
2006/10/09 PHP
PHP4实际应用经验篇(6)
2006/10/09 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
ajax 缓存 问题 requestheader
2010/08/01 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
用console.table()调试javascript
2014/09/04 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
会计应聘求职信范文
2013/12/17 职场文书
领导干部培训感言
2014/01/23 职场文书
小学三年级数学教学反思
2014/01/31 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
仓库文员岗位职责
2014/04/06 职场文书
承诺书格式
2014/06/03 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
2015年宣传工作总结
2015/04/08 职场文书
个人合作协议范本
2015/08/06 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
vue组件vue-esign实现电子签名
2022/04/21 Vue.js
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers