在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 相关文章推荐
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 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
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
php中error与exception的区别及应用
2014/07/28 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
Python-opencv 双线性插值实例
2020/01/17 Python
django rest framework serializers序列化实例
2020/05/13 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
HTML5计时器小例子
2013/10/15 HTML / CSS
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
中学实习教师自我鉴定
2013/12/12 职场文书
企业晚会策划方案
2014/05/29 职场文书
开场白怎么写
2015/06/01 职场文书