在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 String.replace函数参数实例说明
Jun 06 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
详解ESLint在Vue中的使用小结
Oct 15 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
vscode 调试 node.js的方法步骤
Sep 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
js window.event对象详尽解析
2009/02/17 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
简单的Python人脸识别系统
2020/07/14 Python
基于Python实现简单学生管理系统
2020/07/24 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
一份Java笔试题
2012/02/21 面试题
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
易程科技软件测试笔试
2013/03/24 面试题
工程管理英文求职信
2014/03/18 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS