在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中获取select选中值的代码
Jun 27 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
详解小程序之简单登录注册表单验证
May 13 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
php异常处理捕获错误整理
2019/09/23 PHP
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
validator验证控件使用代码
2010/11/23 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python 正则表达式(转义问题)
2014/12/15 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
测绘工程个人的自我评价
2013/11/23 职场文书
品质主管的岗位职责
2013/12/04 职场文书
高中生毕业自我鉴定范文
2013/12/22 职场文书
英语专业毕业生自荐信范文
2013/12/31 职场文书
聘用意向书
2014/07/29 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
清明节主题班会
2015/08/14 职场文书
班主任寄语2016
2015/12/04 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL