在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 兼容firefox的一些问题
May 21 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
详解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 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
node中的session的具体使用
2018/09/14 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
js实现点击生成随机div
2020/01/16 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
python实现获取Ip归属地等信息
2016/08/27 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
python五子棋游戏的设计与实现
2019/06/18 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
在python中使用nohup命令说明
2020/04/16 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
个人校本研修方案
2014/05/26 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
鼋头渚导游词
2015/02/05 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
中学校园广播稿
2015/08/18 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android