在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 相关文章推荐
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
javascript无刷新评论实现方法
May 13 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
JS定义类的六种方式详解
May 12 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 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
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
python小白学习包管理器pip安装
2020/06/09 Python
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
UDP协议功能
2013/01/06 面试题
护理专科毕业推荐信
2013/11/10 职场文书
会计毕业生自荐信
2013/11/21 职场文书
体育教育专业自荐信范文
2013/12/20 职场文书
法制报告会主持词
2014/04/02 职场文书
出生证明公证书
2014/04/09 职场文书
班主任经验交流材料
2014/12/16 职场文书
房屋维修申请报告
2015/05/18 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python