摘自：http://blog.csdn.net/erlian1992

HTML中的JavaScript脚本必须位于<script>与</script>标签之间，JavaScript脚本可被放置在HTML页面的

<body>标签和<head>标签中，这种视情况而定，一般放在<head>标签内。

一<script> 标签

如需在HTML页面中插入JavaScript脚本，请使用<script>标签。<script>和</script>会告诉JavaScript在何处开始

和结束。<script>和</script>之间的代码行包含了JavaScript：

  1. <span style="font-size:18px;"><script type="text/javascript">
  2. alert("欢迎来到JavaScript世界！！！");
  3. </script></span>

您无需理解上面的代码。只需明白，浏览器会解释并执行位于 <script> 和 </script> 之间的 JavaScript。那些老

旧的实例可能会在<script>标签中使用type="text/javascript"。现在已经不必这样做了。JavaScript是所有现代浏览器

以及HTML5中的默认脚本语言。鉴于刚刚学习JavaScript语言的可以使用！

二<body>中的JavaScript

在本例中，JavaScript会在页面加载时向HTML的<body>写文本：

实例代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>JavaScript脚本语言</title>
  6. >
  7. </head>
  8. <body>
  9. <p>
  10. JavaScript 能够直接写入 HTML 输出流中：
  11. </p>
  12. <script type="text/javascript">
  13. document.write("<h1>This is a heading</h1>");
  14. document.write("<p>This is a paragraph.</p>");
  15. </script>
  16. <p>
  17. 您只能在 HTML 输出流中使用 <strong>document.write</strong>。
  18. 如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
  19. </p>
  20. </body>
  21. </html>

我们先不管JavaScript代码怎么写和怎么运行，先来看运行结果：

三JavaScript 函数和事件

上面例子中的 JavaScript 语句，会在页面加载时执行。通常，我们需要在某个事件发生时执行代码，比如当用户

点击按钮时。如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

四<head>或<body>中的JavaScript

您可以在 HTML 文档中放入不限数量的脚本。脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于

两个部分中。通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，

不会干扰页面的内容。

五<head>中的JavaScript函数

在本例中，我们把一个JavaScript函数放置到HTML页面的<head>部分。该函数会在点击按钮时被调用：

实例代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>JavaScript脚本语言</title>
  6. <script type="text/javascript">
  7. function myFunction()
  8. {
  9. document.getElementById("demo").innerHTML="My First JavaScript Function";
  10. }
  11. </script>
  12. </head>
  13. <body>
  14. <h1>My Web Page</h1>
  15. <p id="demo">A Paragraph.</p>
  16. <button type="button" onclick="myFunction()">点击这里</button>
  17. </body>
  18. </html>

运行的结果为：

点击按钮后的效果为：

六<body>中的JavaScrip 函数

在本例中，我们把一个JavaScript函数放置到HTML页面的<body>部分。该函数会在点击按钮时被调用：

实例代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>JavaScript脚本语言</title>
  6. </head>
  7. <body>
  8. <h1>My First Web Page</h1>
  9. <p id="demo">A Paragraph.</p>
  10. <button type="button" onclick="myFunction()">点击这里</button>
  11. <script type="text/javascript">
  12. function myFunction()
  13. {
  14. document.getElementById("demo").innerHTML="My First JavaScript Function";
  15. }
  16. </script>
  17. </body>
  18. </html>

运行的结果与上述五的结果一样！

提示：我们把 JavaScript 放到了页面代码的底部，这样就可以确保在 <p> 元素创建之后再执行脚本。

七外部的JavaScript

我们也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩

展名是 .js。如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件，如果有大量的JavaScript代码，我

们提倡使用外部的JavaScript方式，一般我们也采用分离的方式连接到HTML文档中。

实例

HTML代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>JavaScript脚本语言</title>
  6. <script type="text/javascript" src="/js/myScript.js"></script>
  7. </head>
  8. <body>
  9. <h1>My Web Page</h1>
  10. <p id="demo">A Paragraph.</p>
  11. <button type="button" onclick="myFunction()">点击这里</button>
  12. <p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
  13. </body>
  14. </html>

myScript.js代码：

  1. function myFunction()
  2. {
  3. document.getElementById("demo").innerHTML="My First JavaScript Function";
  4. }

运行的结果和上述一致！

提示：在<head 或<body>中引用脚本文件都是可以的。实际运行效果与您在<script>标签中编写脚本完全一致。

外部脚本不能包含 <script> 标签。

(转)轻松学习JavaScript三：JavaScript与HTML的结合的更多相关文章

  1. 玩转Web之JavaScript(三)-----javaScript语法总结（三） 窗口/滚动条/文本的相关语法

    JS语法集锦(三) 窗口/滚动条/文本 alert("文本")    警告框:警告框经常用于确保用户可以得到某些信息,当警告框出现后,用户需要点击确定按钮才能继续进行操作. con ...

  2. 轻松学习JavaScript十八：DOM编程学习之DOM简单介绍

    一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分 ...

  3. 前端学习 第三弹： JavaScript语言的特性与发展

    前端学习 第三弹: JavaScript语言的特性与发展 javascript的缺点 1.没有命名空间,没有多文件的规范,同名函数相互覆盖 导致js的模块化很差 2.标准库很小 3.null和unde ...

  4. 分针网—每日分享： 怎么轻松学习JavaScript

    js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习js的途径.   我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条"轻松学习js之路& ...

  5. 轻松学习 JavaScript——第 6 部分：JavaScript 箭头函数

    JavaScript箭头函数是ECMAScript 6中引入的编写函数表达式的一种简便方法.通常,在JavaScript中,可以通过两种方式创建函数: 函数语句. 函数表达式. 可以如下所示创建函数语 ...

  6. 怎么轻松学习JavaScript

    js给初学者的印象总是那么的“杂而乱”,相信很多初学者都在找轻松学习js的途径.我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条“轻松学习js之路”.js给人那种感觉的原因多半是因为它 ...

  7. JavaScript学习第三天

    今天学习第三天. 凡事都是需要坚持的,坚持下去. 学习内容: 1.document.getElementById(""),document.getElementByTagName( ...

  8. JavaScript学习记录三

    title: JavaScript学习记录三 toc: true date: 2018-09-14 23:51:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  9. JavaScript 基础 学习（三）

    JavaScript 基础 学习(三) 事件三要素 ​ 1.事件源: 绑定在谁身上的事件(和谁约定好) ​ 2.事件类型: 绑定一个什么事件 ​ 3.事件处理函数: 当行为发生的时候,要执行哪一个函数 ...

随机推荐

  1. 实现List按与一个字符串的相似度和字母顺序排序（适用于模糊查询后的排序）

    因公司业务需要,自己写了一个,保存起来以后可能还会用到.如果还有更好的方法或者算法,希望大家提出来. 1.简单的相似度算法(自己想到的)      因为List中每个String都会包含一个标准的字符 ...

  2. IEE数据库安装向导

    RHEL 5用rpm包,直接安装后配置数据及缓存目录即可. RHEL 6用tar包+配置文件,本文是在RHEL 6上安装IEE的向导. ①上传infobright-4.0.6-x86_64.tar包和 ...

  3. 开发人员看测试之细说JBehave

    上篇我们说到如何从Github上clone出一个JBehave项目,既是为了学习JBehava,也是为了熟悉下Github.从clone下来的项目看来,基本没什么问题,稍微捋一捋就可以运行,但是就cl ...

  4. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  5. ES6 Features系列：Template Strings & Tagged Template Strings

    1. Brief ES6(ECMAScript 6th edition)于2015年7月份发布,虽然各大浏览器仍未全面支持ES6,但我们可以在后端通过Node.js 0.12和io.js,而前端则通过 ...

  6. React Native版本升级的正确姿势

    基于React Native(简称:RN)的APP也发布了三个版本了,RN由于两周就会发布一版从最开始项目用的0.29到最近的0.37,做为一个开源项目来说更新真是跟坐火箭般快速,当然对于我们使用的人 ...

  7. 使用Python将Excel中的数据导入到MySQL

    使用Python将Excel中的数据导入到MySQL 工具 Python 2.7 xlrd MySQLdb 安装 Python 对于不同的系统安装方式不同,Windows平台有exe安装包,Ubunt ...

  8. Git for Windows v2.11.0 Release Notes

    homepage faq contribute bugs questions Git for Windows v2.11.0 Release Notes Latest update: December ...

  9. asp.net MVC4的执行流程

    MVC在底层和传统的asp.net是一致的,在底层之上,相关流程如下: 1)Global.asax里,MvcApplication对象的Application_Start()事件中,调用 RouteC ...

  10. mongdo通用类(C#版)

    日前从公司离职,很快,还没休息就步入了现在的公司,开始跟着公司的脚步走. 公司的项目基本都是大数据的,所以在数据库上大部分都是使用Mongodb和Redis,基本都是Nosql型的数据库为主.以前自己 ...