在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 相关文章推荐
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 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面向对象法则
2012/02/23 PHP
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
Python random模块常用方法
2014/11/03 Python
python win32 简单操作方法
2017/05/25 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
Python 中的lambda函数介绍
2018/10/10 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
使用python模拟高斯分布例子
2019/12/09 Python
python中的itertools的使用详解
2020/01/13 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
flask开启多线程的具体方法
2020/08/02 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
产品发布会策划方案
2014/05/12 职场文书
关于安全的标语
2014/06/10 职场文书
幼儿教师辞职信
2015/02/27 职场文书