在HTML中插入JavaScript代码的示例

在HTML文档中的任何地方可包括JavaScript代码。但也有以下的最佳方法来包含JavaScript在HTML文件。

  • 在 <head>...</head> 部分.
  • 在 <body>...</body> 部分.
  • 在<body>...</body> 和<head>...</head> 部分.
  • 脚本和外部文件，然后包括在<head>... </ head>部分。

在下面的章节中，我们将看到如何可以包含JavaScript方式的不同：
在JavaScript的<head>... </ head>部分：

如果你想在一些事件上运行一个脚本，当用户点击某个地方，如，那么应该脚本的头部，如下所示：

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
  alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

这将产生以下结果：

JavaScript在<body>... </ body>部分：

如果需要一个脚本的页面加载，以便脚本生成页面内容来运行，该脚本在文档的<body>部分。在这种情况下，就不必使用JavaScript定义的所有功能：

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>

JavaScript 在<body> 和 <head> 部分:

你可以把JavaScript代码在<head>和<body>部分完全如下：

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
  alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

在JavaScript外部文件：

当开始工作，更广泛地使用JavaScript，可能会发现有情况下，在站点的多个页面重用相同的JavaScript代码。

你并不局限于将保持在多个HTML文件相同的代码。 script标签提供了一种机制，允许存储JavaScript在外部文件中，然后将其包含到HTML文件。

下面是一个例子来说明如何使用脚本标记和src属性包含在HTML代码的外部JavaScript文件：

<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>

使用JavaScript从外部文件源，则需要使用扩展写下所有的JavaScript代码在一个简单的文本文件“.js”，然后包括文件，如上图所示。

例如，你可以保持在以下文件filename.js的内容，然后包括filename.js文件后，在HTML文件中使用sayHellofunction：

function sayHello() {
  alert("Hello World")
}
赞 (0)

相关推荐

  • javascript基于HTML5 canvas制作画箭头组件

    javascript基于HTML5 canvas制作画箭头组件

    样例: 废话少说,直接上代码: arrow.js /** * 实现两点间画箭头的功能 * @author mapleque@163.com * @version 1.0 * @date 2013.05.23 */ ;(function(window,document){ if (window.mapleque==undefined) window.mapleque={}; if (window.mapleque.arrow!=undefined) return; /** * 组件对外接口 */

  • javascript 获取HTML DOM父、子、临近节点

    在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同i

  • JavaScript代码应该放在HTML代码哪个位置比较好？

    在哪里放置 JavaScript 代码? 通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方.但放置的地方,会对 JavaScript 代码的正常执行会有一定影响,具体如下所述. 放置于<head></head>之间 将 JavaScript 代码放置于 HTML 文档的 <head></head> 标签之间是一个通常的做法.由于 HTML 文档是由浏览器从上到下依次载入的

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

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

  • 实现在 Chrome 中执行 JavaScript 代码

    实现在 Chrome 中执行 JavaScript 代码

    目录 一.打开开发者工具 1.右键“检查” 2.快捷键F12 3.菜单进入 二.开发者工具中执行JavaScript代码 1.Console窗口执行 2.Snippet脚本 前言: 要在浏览器中执行 JavaScript 脚本,首先你的浏览器得支持.现在主流推荐 Chrome 浏览器,也可以使用基于 Chromium的 Edge 浏览器.下面来介绍如何在 Chrome 中打开开发者工具,以及如何在开发者工具中运行调试 JavaScript 代码. 一.打开开发者工具 Chrome 中的开发者工具

  • 在vs2010中调试javascript代码方法

    在vs2010中调试javascript代码方法

    操作步骤如下: 1. javascript代码中插入:debugger,如下: <script type="text/javascript"> debugger; </script> 2.将IE浏览器中的"禁止脚本调试"这一项的勾给去掉. 然后在点击vs中的调试即可.

  • 在HTML代码中使用JavaScript代码的例子

    <script></script> 标签 要在 HTML 中使用 JavaScript ,需要使用 <script></script> 标签,并定义 type 属性值为 text/javascript ,正如前面的 alert 弹出提示框 例子所示: 复制代码 代码如下: <script type="text/javascript"> alert("我是提示文字!"); </script> 通常

  • PowerShell中执行Javascript的方法示例

    背景与问题 别人写了一个Web应用程序,使用的是ASP.NET Forms技术.其中用到了一个DropdownList控件,用户选择了某项后,页面会回传,然后在下面再动态的显示另外一个控件,逻辑很简单. 这是产生的的部分的html源码: 复制代码 代码如下: <select name="eventTypeDropDown" id="eventTypeDropDown" onchange="javascript:setTimeout('__doPost

  • 使用Sonarqube扫描Javascript代码的示例

    使用Sonarqube扫描Javascript代码的示例

    使用sonarqube对javascript代码进行扫描,分析代码质量,最简单的方式莫过于使用缺省的sonar-way中的javascript的规则,使用sonar-scanner进行扫描,这篇文章通过最简单的例子,来进行说明. 事前准备 Sonarqube Sonarqube可以使用docker版本快速搭建,可以参看一下Easypack整理的镜像,具体使用可以参看如下链接,这里不再赘述: https://hub.docker.com/r/liumiaocn/sonarqube/ 环境假定 本文

  • 在ASP.NET中插入flash代码实例

    在需要插入Flash的地方插入以下代码: 复制代码 代码如下: <OBJECT codeBase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"         classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">        <PARAM NAME="_cx

  • Ruby中的异常处理代码编写示例

    单个异常使用 fail 关键字仅仅当捕获一个异常并且反复抛出这个异常(因为这里你不是失败,而是准确的并且故意抛出一个异常). begin fail 'Oops' rescue => error raise if error.message != 'Oops' end 不要为 fail/raise 指定准确的 RuntimeError. # bad fail RuntimeError, 'message' # good - signals a RuntimeError by default fai

  • Vue中插入HTML代码的方法

    我们需要吧<p>Hello World</p>插入到<p>My name is Pjee</p>应该如何做? 一.使用v-html v-html:更新元素的 innerHTML const text = `<p>Hello World</>` <p> My name is Pjee <p v-html='text'></p> </p> 注意:你的站点上动态渲染的任意 HTML 可能会非常

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

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

随机推荐