JavaScript 基础教程JavaScript 简介JavaScript 用法JavaScript 输出JavaScript 语法JavaScript 语句JavaScript 注释JavaScript 变量JavaScript 数据类型JavaScript 对象JavaScript 函数JavaScript 作用域JavaScript 事件JavaScript 字符串JavaScript 运算符JavaScript 比较和逻辑运算符JavaScript if...else 语句JavaScript switch 语句JavaScript for 循环JavaScript while 循环JavaScript break 和 continue 语句JavaScript typeof, null, undefinedJavaScript 类型转换JavaScript 正则表达式JavaScript 错误throw try catchJavaScript 调试JavaScript 变量提升JavaScript 严格模式 (use strict)JavaScript 使用误区JavaScript 表单JavaScript 表单验证JavaScript 验证 APIJavaScript 保留关键字JavaScript JSONjavascript :void(0) 含义JavaScript 代码规范JavaScript 函数定义JavaScript 函数参数JavaScript 函数调用JavaScript 闭包JavaScript HTML DOMJavaScript DOM- 改变 HTMLJavaScript DOM - 改变 CSSJavaScript HTML DOM 事件JavaScript DOM EventListenerJavaScript DOM 元素(节点)JavaScript 对象类型JavaScript Number 对象JavaScript 字符串(String)对象JavaScript Date 对象JavaScript Array 对象JavaScript Boolean 对象JavaScript Math 对象JavaScript RegExp 对象JavaScript window 对象JavaScript window.screen 对象JavaScript window.location 对象JavaScript window.history 对象JavaScript window.navigator 对象JavaScript 弹窗JavaScript 计时事件JavaScript CookieJS中的if和switch该如何选择?JS优化多分支结构JS中的while和for循环该如何选择?JS优化循环结构JS输出杨辉三角JS定义字符串(3种方式)JS获取字符串长度JS字符串拼接/连接(3种方式)JS字符串查找(6种方法)JS截取字符串JS字符串替换replace()JS字符串大写小写转换JS字符串比较大小JS字符串和数组之间的转换JS给字符串添加HTML标签JS去除字符串前后空格JS Unicode编码和解码JS Base64编码和解码JS在接收表单数据时过滤特殊字符JS自定义编码和解码方案

JavaScript 用法

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

<script> 可被放置在 HTML 页面的 <body> 和 <head> 元素中


<script> 标签

<script> 标签用于在 HTML 文档中插入 JavaScript 脚本

<script> 和 </script> 用于告诉浏览器一段 JavaScript 代码在何处开始和结束

<script>alert("我的第一个 JavaScript");</script>

现在你可能无法理解上面的代码,不过不要紧,我们稍后会介绍

你只要明白浏览器会解释并执行位于 <script> 和 </script> 之间的 JavaScript 代码


<body> 中的 JavaScript

下面的范例,JavaScript 会在页面加载时向 HTML 的 <body> 写文本

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script>
document.write("<h1>JavaScript 基础教程</h1>");
document.write("<p id='demo'>这是一个段落</p>");
</script>
.
.
</body>


JavaScript 函数和事件

上面范例中的 JavaScript 语句,会在页面加载时执行

通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时

如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数

您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识


在 <head> 或者 <body> 的JavaScript

我们可以 HTML 文档中放入不限数量的脚本

脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中

通常的做法是把函数放入 <head>部分中,或者放在页面底部

这样就可以把它们安置到同一处位置,不会干扰页面的内容


<head> 中的 JavaScript 函数

下面的范例,我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分

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

<!DOCTYPE html>
<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>JavaScript 基础教程</h1>
<p id="demo">这是一个段落</p>
<button type="button" onclick="myFunction()">运行范例</button>
</body>


<body> 中的 JavaScript 函数

下面的范例,我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分

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

<!DOCTYPE html>
<meta charset="utf-8" />
<h1>JavaScript 基础教程</h1>
<p id="demo">这是一个段落</p>
<button type="button" onclick="myFunction()">运行范例</button>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>


外部的 JavaScript

也可以把脚本保存到外部文件中

外部文件通常包含被多个网页使用的代码

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

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

<!DOCTYPE html>
<meta charset="utf-8" />
<h1>JavaScript 基础教程</h1>
<p id="demo">这是一个段落</p>
<script src="/static/media/javascript/myScript.js"></script>


我们可以将脚本放置于 <head> 或者 <body> 中

实际运行效果与在 <script> 标签中编写脚本完全一致

myScript.js 文件内容如下

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
注意: 外部脚本不需要也不能包含 <script> 标签

链接: https://fly63.com/course/7_469