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. 【转载】安卓APP架构

    注:本篇博文转载于 http://my.oschina.net/mengshuai/blog/541314?fromerr=z8tDxWUH 本文介绍了文章作者从事了几年android应用的开发,经历 ...

  2. Warning: Attempt to present on whose view is not in the window hierarchy!

    当我想从一个VC跳转到另一个VC的时候,一般会用 - (void)presentViewController:(UIViewController *)viewControllerToPresent a ...

  3. 编译Android系统源码（高通平台）

    在Android源码根目录执行下面命令 source build/envsetup.sh choosecombo make –j4 其他命令(首先需要在android源码根目录执行source bui ...

  4. runtime之玩转成员变量

    前言: 不铺垫那么多,单刀直入吧:runtime是一个C和汇编写的动态库,就像是一个小小的系统,将OC和C紧密关联在一次,这个系统主要做两件事情. 1,封装C语言的结构体和函数,让开发者在运行时创建, ...

  5. 布局display

    什么是布局: 浏览器以正确的大小将元素摆放在正确的位置上. 布局:元素摆放的模式. 影响元素大小和位置的css属性: display  position   float  flex display 设 ...

  6. 6、软件配置工程师要阅读的书籍 - IT软件人员书籍系列文章

    软件配置管理工程师的工作也是贯穿整个项目过程的.其主要针对项目中的各种文档.技术源码等等进行归档控制.一般的配置项比如需求说明书,概要设计,详细设计,测试文档,用户手册等,还有源代码管理,数据库文档文 ...

  7. SQL Server(四)——查询练习（45道习题）

    题目:设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher). 四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1 ...

  8. 最近用Timer踩了一个坑，分享一下避免别人继续踩

    最近做一个小项目,项目中有一个定时服务,需要向对方定时发送数据,时间间隔是1.5s,然后就想到了用C#的Timer类,我们知道Timer 确实非常好用,因为里面有非常人性化的start和stop功能, ...

  9. ADO.NET知识汇总

    这又是一篇记录平常工作笔记的博客,无论是在排版还是解说上都不会有太多要求.同时这也是一篇不上博客园首页的博客,Just记录一些工作笔记. vSelect返回单个值 string connSQL = @ ...

  10. Mysql中使用find_in_set函数查找字符串

    mysql有个表的字段的存储是以逗号分隔的,如domain字段login.s01.yy.com,s01.yy.com,s02.yy.com.现在要查找s01.yy.com这个.我们用like查找好像不 ...