猿变实验室之猿变开发手册-JavaScript语法入门-JavaScript 简介

JavaScript 是互联网上最流行的脚本语言，几乎从事开发的程序员都要掌握这门语言，javascript语言可用于 HTML网页开发，也可以用于后端应用程序开发，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

Javascript的能力

JavaScript直接写入HTML 输出流

<script>
// js写在script标签内
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>

您只能在 HTML 页面加载的时候使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

JavaScript接受事件

事件是指网页浏览过程中发生的事，比如加载完毕，点击鼠标键盘等等，js可以探测到这些事件，帮助我们实现强大的交互功能

下例演示了一个按钮，当点击按钮会弹出一个警告对话框

<button type="button" onclick="alert('欢迎!')">点我!</button>

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

onclick 事件只是您即将在本教程中学到的众多事件之一。

JavaScript：改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能，html标签元素在javascript中称为dom对象。

dom操作实例

<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 的知识。

JavaScript：改变 HTML 图像

同样的javascript会动态地改变 HTML 图片：

点亮灯泡示例

<body>
	
<script>
function changeImage()
{
	bulb=document.getElementById('myimage')
	if bulb.src.match("on"))
	{
		bulb.src="/uploads/pic_bulboff.gif";
	}
	else
	{
		bulb.src="/uploads/pic_bulbon.gif";
	}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" >
<p>点击灯泡就可以打开或关闭这盏灯</p>
	
</body>

以上实例中代码bulb.src.match("on") 的作用意思是：检查 img的 src 属性的值有没有包含 “on” 这个字符串，如on，图片 src 更新为 bulboff.gif，若匹配不到 on 字符串，src 则更新为 bulbon.gif

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

JavaScript：改变 HTML 样式

javascript可以动态改变 HTML 元素的样式。

动态改变样式实例

点击按钮，文字颜色会发生变化

<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>

JavaScript：验证输入

JavaScript 常用于验证用户的输入。

验证输入实例

<body>
	
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
	var x=document.getElementById("demo").value;
	if(isNaN(x))
	{
		alert("不是数字");
	}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>

上面实例比较简单，如果要判断用户输入的是否为电子邮件，就需要用到正则判断

正则验证实例

这是一个简化的验证判断，只检测输入的字符串中是否包含“@”

<body>
	
<h1>邮箱输入验证</h1>
<p>请输入邮箱，如果包含@，会提示包含了@</p>
<input id="demo" type="text">
<script>
function myFunction()
{
	var x=document.getElementById("demo").value;
	if(x.match(/@/g))
	{
		alert("包含了@符号");
	}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>

Javascript版本

JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。
Java（由 Sun 发明）是更复杂的编程语言。

ECMA-262 是 JavaScript 标准的官方名称。

JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。

ECMAScript 版本

JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。

年份	名称	描述
1997	ECMAScript 1	第一个版本
1998	ECMAScript 2	版本变更
1999	ECMAScript 3	添加正则表达式添加 try/catch
	ECMAScript 4	没有发布
2009	ECMAScript 5	添加 "strict mode"，严格模式添加 JSON 支持
2011	ECMAScript 5.1	版本变更
2015	ECMAScript 6	添加类和模块
2016	ECMAScript 7	增加指数运算符 (**) 增加 Array.prototype.includes

ECMAScript 6 也称为 ECMAScript 2015。

ECMAScript 7 也称为 ECMAScript 2016。

JavaScript 简介