HTML中的脚本 必须位于<script></script>标签之间

脚本可被放置在HTML页面的<body>和<head>部分中

<script>标签

如需在HTML页面中插入 JavaScript 请使用<script>标签。

<script>和</script>会告诉JavaScript 在何处开始和结束。

<script>和</script>之间的代码包含了JavaScript

<script>

alert("My First JavaScript");

</script>

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

<body>中的JavaScript

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

实例：

<!DOCTYPE html>

<html>

<body>

.

.

<script>

document.write("<h1>This is a heading</h1>");

document.write("<p>This is a paragraph</p>");

</script>

.

.

</body>

</html>

JavaScript 函数和事件
上面例子中的 JavaScript 语句，会在页面加载时执行。
通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。
您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。

<head> 或 <body> 中的 JavaScript
您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

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

<!DOCTYPE html>

<html>

<head>

<script>

function myFunction()

{

document.getElementById("demo").innerHTML="My First JavaScript Function";

}

</script>

</head>

<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>

</html>

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

<!DOCTYPE html>

<html>

<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>

function myFunction()

{

document.getElementById("demo").innerHTML="My First JavaScript Function";

}

</script>

</body>

</html>

外部的 JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

<!DOCTYPE html>

<html>

<body>

<script src="myScript.js"></script>

</body>

</html>

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

HTML 学习笔记 JavaScript (实现)的更多相关文章

  1. 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

    学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...

  2. [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡

    当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...

  3. HTML 学习笔记 JavaScript（面向对象）

    现在让我们继续跟着大神的脚步前进 学习一下JavaScript中的面向对象的思想,其实作为一个iOS开发者,对面向对象还是比较熟悉的,但是昨晚看了一下Js中的面向对象,妈蛋 一脸萌比啊.还好有大神.让 ...

  4. HTML 学习笔记 JavaScript (prototype)

    原博地址:http://www.cnblogs.com/dolphinX/p/3286177.html 原博客的作者是一个非常牛逼的前端大神,我作为一个初学者,在此借助大神的博客进行自己的学习.在这里 ...

  5. HTML 学习笔记 JavaScript（数组）

    1.数组的创建 var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是 ...

  6. HTML 学习笔记 JavaScript (String)

    String对象用于存储字符串的数据.这里我们做了JavaScript的String字符串对象常用操作总结. 创建String对象的方式 声明:String 对象的方法也可以在所有基本字符串值中访问到 ...

  7. HTML 学习笔记 JavaScript（创建对象）

    原博地址:http://www.cnblogs.com/dolphinX/p/3288118.html JavaScript 有Date Array String等这样的内置对象,功能强大实用简单,但 ...

  8. HTML 学习笔记 JavaScript (节点)

    HTML 节点: HTML DOM定义了所有HTML元素的对象和属性 以及访问它们的方法. HTML DOM是关于如何获取 修改 添加 或 删除HTML元素的标准. 在js中通过document这个对 ...

  9. HTML 学习笔记 JavaScript (DOM)

    一 DOM 简介 通过HTML DOM 可以访问JavaScript 文档的所有元素 当网页被加载的时候,浏览器会创建页面的文档对象模型 HTML DOM 模型被构造成对象的树 HTML DOM 树 ...

  10. HTML 学习笔记 JavaScript (函数)

    函数是由事件驱动的或者当他被调用时执行的可重复使用的代码块 实例 <!DOCTYPE html> <html> <head> <script> func ...

随机推荐

  1. 巩固一下：SpringMVC详细示例实战教程

    一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 1 2 3 4 5 6 ...

  2. 代码创建storyboard

    代码创建storyboard方式如下 // 加载storyboard UIStoryboard *storyboard = [UIStoryboard StoryboardWithName:@&quo ...

  3. NSoperation用法详解及与GCD的比较

    NSInvocationOperation // 基于一个对象和selector来创建操作.如果你已经有现有的方法来执行需要的任务,就可以使用这个类 NSInvocationOperation * o ...

  4. Hibernate缓存原理与策略

    Hibernate缓存原理: 对于Hibernate这类ORM而言,缓存显的尤为重要,它是持久层性能提升的关键.简单来讲Hibernate就是对JDBC进行封装,以实现内部状态的管理,OR关系的映射等 ...

  5. Linux下怎么查看当前系统的版本

    Linux下怎么查看当前系统的版本:   uname -r 功能说明:uname用来获取电脑和操作系统的相关信息. 语 法:uname [-amnrsvpio][--help][--version] ...

  6. WPF学习之路（四）路由

    路由事件概述 功能定义:路由事件是一种可以针对元素树中的多个侦听器(而不是仅针对引发该事件的对象)调用处理程序的事件. 实现定义:路由事件是一个 CLR 事件,可以由RouteEvent 类的实例提供 ...

  7. header("location:test.php")跳转成功需要注意的

    header("location:test.php")跳转成功除了需要注意以下三点还有一个前提必须要注意: 1.location和":"号间不能有空格,否则会出 ...

  8. JAVA 8 Lambda表达式-Lambda Expressions

    Lambda表达式介绍 Lambda表达式是在java规范提案JSR 335中定义的,Java 8 中引入了Lambda表达式,并被认为是Java 8最大的新特性,Lambda表达式促进了函数式编程, ...

  9. Sqlite学习笔记(二)&&性能测试

    测试目标 获取SQlite的常规性能指标 测试环境 CPU:8核,Intel(R) Xeon(R) CPU E5-2430 0 @ 2.20GHz 内存:16G 磁盘:SSD Linux 2.6.32 ...

  10. hibernate和mybatis的区别

    本文出自 alicejiyayun原创 第一章     Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架,它出身于sf.NET,现在已经成为Jboss的 ...