前端教程:在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>123456789101112131415复制代码类型:[javascript]

这将产生以下结果:

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>12345678910111213复制代码类型:[javascript]

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>12345678910111213141516171819复制代码类型:[javascript]

在JavaScript外部文件:

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

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

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

<html><head><script type="text/javascript" src="filename.js" ></script></head><body>.......</body></html>12345678910复制代码类型:[javascript]

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

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

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

相关推荐

  • 在html页面中引入另一个html页面

    我们在使用html编写一个网站的时候,通常情况下头部和尾部是相同的,如果一个网站的每个页面都把这些代码写一遍,不仅浪费时间,还显得重复代码很多,所以此时把重复的页面单独摘出来,在用到的时候从外部直接引 ...

  • JavaScript简介与常用输出输出方式

    JavaScript简介与常用输出输出方式

  • HTML5 启动模板代码

    <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">   ...

  • html如何引入JavaScript代码

    学习了HTML入门教程之后,我们都知道HTML页面是静态的,要实现某些动态效果,就要引入JavaScript.本节课就来给大家讲解一下怎样在HTML页面中引入JavaScript.这节课不涉及太多编程 ...

  • 前端教程——JavaScript函数中重构If/Else语句的方法

    无论使用何种编程语言,代码都需要根据不同的情况对给定的输入做出不同的决定并执行相应的操作.举例来说,在游戏中,如果玩家的生命值是0,游戏就结束了.在气象应用程序中,如果观看早晨的日出,就会看到一张照片 ...

  • 前端教程:Django上传文件

    对于Web应用程序,以便能够上传文件(资料图片,歌曲,PDF格式,文字......),它通常是很有用的.让我们在这一节中来讨论如何使用Django上传文件. 上传图片 在开始开发图片上传之前,请确保P ...

  • 前端教程:JavaScript语法

    JavaScript由被放置在<script>...</script>的JavaScript语句,在网页中的HTML标签. 可以将<script>包含您的JavaS ...

  • 前端教程:在浏览器中启用JavaScript

    所有现代浏览器都使用了JavaScript的内置支持.很多时候,你可能需要启用或手动禁用此支持. 本教程将让您知道如何启用和禁用JavaScript支持,在您的浏览器:IE浏览器,Firefox和Op ...

  • 前端教程:JavaScript运算符

    简单的答案可以使用表达式4+5等于9.在这里,4和5被称为操作数:+被称为运算符.JavaScript语言支持下列类型的运算符. 算术运算符 比较运算符 逻辑(或关系)运算符 赋值运算符 有条件的(或 ...

  • 前端教程:JavaScript变量和数据类型

    编程语言的最根本的特征之一是一组它支持的数据类型.这些是可被表示和操纵的编程语言的值的类型. JavaScript允许有三个基本数据类型: 数字如.123,120.50等. 字符串如"Thi ...

  • 前端教程:JavaScript while循环

    在写一个程序时,可能有一种情况,当你需要一遍又一遍的执行一些操作.在这样的情况下,则需要写循环语句,以减少代码的数量. JavaScript支持所有必要的循环,以帮助您在所有编程的步骤. while ...

  • 前端教程:JavaScript Switch Case

    可以使用多个if...elseif语句,如前面的章节,执行多路分支.然而,这并不总是最佳的解决方案,尤其是当所有分支的依赖单一的变量的值. 使用JavaScript1.2开始,你可以用它处理的正是这种 ...

  • 前端教程:JavaScript if...else语句

    在写一个程序,可能有一种情况,当你需要采用一个路径出给定两个路径.所以,需要使用条件语句,让程序来做出正确的决策和执行正确的行动. JavaScript支持其用于执行根据不同的条件不同的操作条件语句. ...