在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 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
JS二维数组的定义说明
Mar 03 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
Vue 进阶之路(三)
Apr 18 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
如何使用JavaScript实现栈与队列
Jun 24 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实现ODBC数据分页显示一例
2006/10/09 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
Python中文竖排显示的方法
2015/07/28 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
python中封包建立过程实例
2021/02/18 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
历史学专业毕业生求职信
2013/09/27 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js