注：本篇绝大多数内容来自 菜鸟编程

JavaScript

img

JavaScript 是 Web 的编程语言，是脚本语言。

所有现代的 HTML 页面都可以使用 JavaScript。

Web 开发必须学习的三种语言：

  1. HTML 定义了网页的内容
  2. CSS 描述了网页的布局
  3. JavaScript 控制了网页的行为

JavaScript 参考手册

在菜鸟教程中，我们为您提供完整的 JavaScript 对象、浏览器对象、HTML DOM 对象参考手册。

以下手册包含了每个对象、属性、方法的实例。

HTML/CSS/JS 在线工具

HTML/CSS/JS 在线工具可以在线编辑 HTML、CSS、JS 代码，并实时查看效果，你也可以将优质代码保存分享：https://c.runoob.com/front-end/61

1.直接在HTML用JS写文字

1
2
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");

2.alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。

1
2
// 一个按钮，按下后网页提示 "欢迎!"
<button type="button" onclick="alert('欢迎!')">点我!</button>

3.JS改变HTML元素内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
	
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>

您会经常看到 **document.getElementById(“some id”)**。这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

您将在本教程的多个章节中学到有关 HTML DOM 的知识。

4.JavaScript：改变 HTML 图像

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 本例会动态地改变 HTML <image> 的来源（src）：
<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
1
*以上实例中代码* **element.src.match("bulbon")** *的作用意思是：检索* **<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">** *里面 src 属性的值有没有包含* **bulbon** *这个字符串，如果存在字符串* **bulbon，图片 **src** *更新为* **bulboff.gif***，若匹配不到* **bulbon** *字符串，***src** *则更新为* **bulbon.gif**.

JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。

5.JS改变文字颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
	
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
	x=document.getElementById("demo") // 找到元素
	x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>

6.JS判断输入框中是不是数字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
	
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
	var x=document.getElementById("demo").value;
	if(x==""||isNaN(x))
	{
		alert("不是数字");
	}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>

以上实例只是普通的验证，如果要在生产环境中使用，需要严格判断，如果输入的空格，或者连续空格 isNaN 是判别不出来的。可以添加正则来判断（后续章节会说明）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
	
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
	var x=document.getElementById("demo").value;
	if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
		alert("不是数字");
	}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>

JavaScript 用法

1
2
3
HTML 中的 Javascript 脚本代码必须位于 **<script>** 与 **</script>** 标签之间。

Javascript 脚本代码可被放置在 HTML 页面的 **<body>** 和 **<head>** 部分中。
1
<!- 如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。->

外部的 JavaScript

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

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

如需使用外部文件，请在