HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script> 标签

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

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

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

<script>

alert("My First JavaScript");

</script>

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

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

<body> 中的 JavaScript

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

<!DOCTYPE html>

<html>

<body>

<p>

JavaScript 能够直接写入 HTML 输出流中：

</p>

<script>

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

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

</script>

<p>

您只能在 HTML 输出流中使用 <strong>document.write</strong>。

如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

</p>

</body>

</html>

效果:

avaScript 能够直接写入 HTML 输出流中：

This is a heading

This is a paragraph.

您只能在 HTML 输出流中使用 document.write。 如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

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()">点击这里</button>

</body>

</html>

效果

My Web Page

A Paragraph.

点击这里

<body> 中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。

该函数会在点击按钮时被调用：

<!DOCTYPE html>

<html>

<body>

<h1>My First Web Page</h1>

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

<button type="button" onclick="myFunction()">点击这里</button>

<script>

function myFunction()

{

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

}

</script>

</body>

</html>

效果:

My First Web Page

A Paragraph.

点击这里

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

外部的 JavaScript

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

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

<!DOCTYPE html>

<html>

<body>

<h1>My Web Page</h1>

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

<button type="button" onclick="myFunction()">点击这里</button>

<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>

<script type="text/javascript" src="/js/myScript.js"></script>

</body>

</html>

效果:

My Web Page

A Paragraph.

点击这里

注释：myFunction 保存在名为 "myScript.js" 的外部文件中。

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

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

前端之JavaScript第一天学习(2)-JavaScript 使用的更多相关文章

  1. 前端之JavaScript第一天学习(1)-JavaScript 简介

    javaScript 是世界上最流行的编程语言. 这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScript 是脚本语言 JavaSc ...

  2. 前端之JavaScript第一天学习(3)-JavaScript输出

    JavaScript 通常用于操作 HTML 元素. 操作 HTML 元素 如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) ...

  3. JavaScript第一阶段学习心得

    开始接触JavaScript是从慕课网开始的,基础篇学完.懵了一逼,可能是自己太蠢.感觉跟没学差不多,属性,方法,对象,什么都不懂.有的方法知道起的是什么效果,但是原理什么的都不知道. 还好,基础篇学 ...

  4. Javascript 第一阶段 学习使用总结

    JavaScript 是一种轻量级的编程语言.JavaScript 是可插入 HTML 页面的编程代码.脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中 ...

  5. 前端框架Vue------＞第一天学习、Vue学习的路径、Vue官网（1）

    文章目录 1.学习目标 2.前端知识体系 2.1 前端三要素 2.2.MVVM 3.第一个Vue程序 4.Vue实例的生命周期 vue的官方文档:https://cn.vuejs.org/ 1.学习目 ...

  6. 前端框架Vue------＞第一天学习（3）

    文章目录 8 .使用Axios实现异步通信 9 .表单输入绑定 9.1 . 什么是双向数据绑定 9.2 .为什么要实现数据的双向绑定 9.3 .在表单中使用双向数据绑定 8 .使用Axios实现异步通 ...

  7. 前端框架Vue------＞第一天学习（2） v-if

    API:https://cn.vuejs.org/v2/api/#key 文章目录 5.条件渲染 5.1 . v-if 5.2 . v-else-if 6 .列表渲染 7 .事件监听 5.条件渲染 5 ...

  8. JavaScript 权威指南-学习笔记（一）

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...

  9. 5月31日 python学习总结 JavaScript概述

    JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...

随机推荐

  1. jLink V8调试exynos 4412 u-boot的几点补充

    /** ****************************************************************************** * @author    Maox ...

  2. 改变tabbar的高度做法

    UITabBarController *tabBarController =[[UITabBarController alloc] init]; CGRect frame = self.window. ...

  3. Win2003打不开https的问题

    碰到客户做问题是能打开https://www.baidu.com 这个网页 打不开 https://sha256.alipay.com/SHA256/index.htm支付宝这个网页      解决办 ...

  4. 旋转转盘选择Menu--第三方开源--CircleMenu

    CircleMenu在github上的项目主页是:https://github.com/zhangphil/Android-CircleMenu CircleMenu用法简单,JAVA代码: pack ...

  5. JSON (仅限本地)

    <script type="text/javascript"> setInterval(function() { $("#content").loa ...

  6. 靶形数独 （codevs 1174）题解

    [问题描述] 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向Z 博士请教,Z 博士拿出了他最近发明的“ ...

  7. android bluetooth UUID蓝牙查询表

    ServiceDiscoveryServerServiceClassID_UUID = '{00001000-0000-1000-8000-00805F9B34FB}' BrowseGroupDesc ...

  8. sql server 小记——分区表

    我们知道很多事情都存在一个分治的思想,同样的道理我们也可以用到数据表上,当一个表很大很大的时候,我们就会想到将表拆 分成很多小表,查询的时候就到各个小表去查,最后进行汇总返回给调用方来加速我们的查询速 ...

  9. 禁用DropDownList的Items

    可以先看看效果,被禁用的DropDownList的Items已经无法选取与颜色也变为灰色. 刚开始,DropDownList没有接收从网址传来的参数时,它每一个Item都是可以选取的,一旦接收了值.所 ...

  10. iOS学习之UIControl

    一.UIControl初识      1.UIControl是有控制功能的视图(比如UIButton.UISlider.UISegmentedControl等)的父类. 只要跟控制有关的控件都是继承于 ...