在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 相关文章推荐
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
详解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
SONY ICF-SW55的电路分析
2021/03/02 无线电
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
Python科学计算之Pandas详解
2017/01/15 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
python生成大写32位uuid代码
2020/03/03 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
医护人员英文求职信范文
2013/11/26 职场文书
财务会计专业求职信范文
2013/12/31 职场文书
商场中秋节广播稿
2014/01/17 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python