在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 相关文章推荐
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
js清理Word格式示例代码
Feb 13 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
Vue-component全局注册实例
Sep 06 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 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+mysql写的简单留言本实例代码
2008/07/25 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
python多线程http下载实现示例
2013/12/30 Python
python使用urlparse分析网址中域名的方法
2015/04/15 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
深入浅析python with语句简介
2018/04/11 Python
python 拼接文件路径的方法
2018/10/23 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
python温度转换华氏温度实现代码
2020/12/06 Python
T3官网:头发造型工具
2019/12/26 全球购物
外国人聘用意向书
2014/04/01 职场文书
电子商务专业自荐信
2014/06/02 职场文书
讲党性心得体会
2014/09/03 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL