在HTML文档中嵌入JavaScript的四种方法

在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计算值然后把值嵌入到html中的实现方法
  • (jsp/html)网页上嵌入播放器(常用播放器代码整理)
  • js 复制或插入Html的实现方法小结
  • 在HTML中插入JavaScript代码的示例
  • tinyMCE插件开发之插入html,php,sql,js代码 并代码高亮显示
  • 在table中插入多行的js代码(与insertAdjacentHTML相似的功能)
赞 (0)

相关推荐

  • 在table中插入多行的js代码(与insertAdjacentHTML相似的功能)

    1 插入行 var num = 1; function addRow() { num ++; InsertRow(tableList," "+num+"新行 "); } function InsertRow(table,rowHtml) { var o=document.createElement("div"),ol; o.innerHTML=" "+rowHtml+" " ol=o.childNodes[

  • js 复制或插入Html的实现方法小结

    var bq=document.getElementsByTagName("标签或ID名")//ID是唯一无许分组,标签非唯一,有可能返回一个数组. div=document.createElement("div"); ...设置CSS风格 bq.appendChild(div);//ID唯一性的话只需要这样!在bq之后插入div层 bq[0].appendChild(div);//如果前面用的是标签!数组跟下标!在bq之后插入div层 bq.insertBefor

  • tinyMCE插件开发之插入html,php,sql,js代码 并代码高亮显示

    下面就是我开发的过程. 首先,我的 tinyMCE版本是 Version: 3.2.7 (2009-09-22) .下载地址 http://www.jb51.net/codes/17198.htmltinyMCE插入代码,需要调用 tinyMCE的 tinyMCE.execCommand('mceInsertContent',false,value); 方法.其中参数无需改变,value 就是你要插入的内容, 比如我写了一个函数, 复制代码 代码如下: function InsertHTML(v

  • 在HTML中插入JavaScript代码的示例

    在HTML文档中的任何地方可包括JavaScript代码.但也有以下的最佳方法来包含JavaScript在HTML文件. 在 <head>...</head> 部分. 在 <body>...</body> 部分. 在<body>...</body> 和<head>...</head> 部分. 脚本和外部文件,然后包括在<head>... </ head>部分. 在下面的章节中,我们将看到

  • JavaScript计算值然后把值嵌入到html中的实现方法

    JavaScript计算值然后把值嵌入到html中的实现方法

    如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • (jsp/html)网页上嵌入播放器(常用播放器代码整理)

    这个其实很简单,只要在HTML上添加以上代码就OK了,前提是你的电脑上已经安装了播放器,如RealPlay. 复制代码 代码如下: <embed src="C:/mp3/10.19/画心.mp3" width="480" height="100"02. loop="false" autostart="false"> </embed> 还有更多的的播放器和设置可供选择: 页面插入REA

  • 在HTML文档中嵌入JavaScript的四种方法

    在HTML里嵌入JavaScript 在HTML文档里嵌入客户端JavaScript代码有4中方法: 1.内嵌,放置在<script>和</script>标签之间  (少): 2.放置在有<script>标签的src属性指定的外部文件中  (多): 3.放置自HTML事件处理程序中,该事件处理程序由onclick或onmouseover这样的HTML属性值指定它  (很少): 4.放在一个URL里,这个URL使用特殊的协议"javascript"协议

  • 在HTML中使用JavaScript的两种方法

    在HTML中使用JavaScript的两种方法

    在HTML中使用HTML需要借助<scirpt>标签,使用<script>标签的方式有两种:一种是直接在<script>标签中嵌入JavaScript代码,另一种是用<script>的src属性引入外部JavaScript文件. 直接在页面嵌入JavaScript代码 在使用<script>标签嵌入JavaScript代码时,只需为<script>指定type属性.然后,像下面这样把JavaScript代码直接放在标签内部即可: &l

  • JavaScript中检测数据类型的四种方法

    JavaScript中检测数据类型的四种方法

    目录 1. typeof 2. instanceof 3. constructor(构造函数) 4. Object.prototype.toString.call() 前言:在介绍检测数据类型的方法之前,先说说JavaScript中数据类型有哪些吧~ JS数据类型主要分为两大类:基本数据类型和引用数据类型 基本数据类型:number.string.boolean.null.undefined.symbol(es6)引用数据类型:object(array.function.date...) 数据类

  • Python中修改字符串的四种方法

    在Python中,字符串是不可变类型,即无法直接修改字符串的某一位字符. 因此改变一个字符串的元素需要新建一个新的字符串. 常见的修改方法有以下4种. 方法1:将字符串转换成列表后修改值,然后用join组成新字符串 >>> s='abcdef' #原字符串 >>> s1=list(s) #将字符串转换为列表 >>> s1 ['a', 'b', 'c', 'd', 'e', 'f'] #列表的每一个元素为一个字符 >>> s1[4]='

  • Java中ArrayList初始化的四种方法详解

    1 起因 在实际业务开发中, 我们经常会遇到需要临时创建一个数组的情况, 今天我们就来讲一下Java中ArrayList初始化的方法 2 解决方案 直接上结论, 总共有四种初始化方法: 双括号法 Arrays.asList stream Lists 2.1 双括号法 List<Integer> test = new ArrayList<Integer>(){{ add(1); add(2); }}; 2.2 Arrays.asList List<Integer> tes

  • Vue项目中打包优化的四种方法详解

    目录 前言 打包优化的目的: 性能优化的主要方向: 1.异步组件配置(路由懒加载) 2.去掉打包后的 console 3.使用CDN 4.yarn build生成dist目录 总结 前言 默认情况下,通过import语法导入的第三方依赖包,最终会全部打包到一个js文件中,会导致单文件体积过大大,在网速底下时会阻塞网页加载,影响用户体验. 打包优化的目的: 1.项目启动速度,和性能 2.必要的清理数据 3.减少打包后的体积 第一点是核心,第二点呢其实主要是清理console 性能优化的主要方向:

  • asp.net下用Aspose.Words for .NET动态生成word文档中的图片或水印的方法

    asp.net下用Aspose.Words for .NET动态生成word文档中的图片或水印的方法

    1.概述 在项目中生成word文档,这个功能很普遍的,一般生成都是纯文字或是列表的比较多,便于客户打印,而要把图片也生成到word文档中的需求有些客户也是需要的,例如产品图片.这次我们介绍的是如何利用Aspose.Words for .NET在Word中动态的生成图片或水印.Aspose.Words for .NET,这个我就不多介绍了,不清楚的朋友可以看看上一篇文章.需求总是变化得快,最近项目中又多了一个这样需求:系统中生成报价单后,要有一个签名,这个签名是根据不同用户来生成的图片.好了,下面

  • C#向Word文档中添加内容控件的方法示例

    C#向Word文档中添加内容控件的方法示例

    前言 大家应该都知道在MS Word中,我们可以通过内容控件来向word文档中插入预先定义好的模块,指定模块的内容格式(如图片.日期.列表或格式化的文本等),从而创建一个结构化的word文档. 下面就来看看如何使用C#给word文档添加组合框.文本.图片.日期选取器及下拉列表等内容控件(这里我借助了一个word组件Spire.Doc). 添加组合框内容控件 组合框用于显示用户可以选择的项目列表.和下拉列表不同的是组合框允许用户编辑或添加项. 核心代码如下: //给段落添加一个内容控件并指定它的S

  • PHP从数组中删除元素的四种方法实例

    茴香豆的"茴"字有四种写法,PHP从数组中删除元素也有四种方法 ^_^. 删除一个元素,且保持原有索引不变 使用 unset 函数,示例如下: <?php $array = array(0 => "a", 1 => "b", 2 => "c"); unset($array[1]); //↑ 你想删除的key ?> 输出: Array (     [0] => a     [2] =>

  • Spring中事务管理的四种方法（银行转账为例）

    前言 本文配套示例代码下载地址(完整可运行,含sql文件,下载后请修改数据库配置):点击这里下载 一.事务的作用 将若干的数据库操作作为一个整体控制,一起成功或一起失败. 原子性:指事务是一个不可分割的工作单位,事务中的操作要么都发生,要么都不发生. 一致性:指事务前后数据的完整性必须保持一致. 隔离性:指多个用户并发访问数据库时,一个用户的事务不能被其他用户的事务所干扰,多个并发事务之间数据要相互隔离. 持久性:指一个事务一旦被提交,它对数据库中数据的改变就是永久性的,即时数据库发生故障也不应

随机推荐