JavaScript简介

由 hcduguo

什么是JavaScript

JavaScript（js）是一种轻量级的面向对象的编程语言，许多网站使用它来编写网页脚本。它是一种解释型编程语言，应用于HTML文档时，它可以在网站上实现动态交互。JavaScript是1995年引入的，用于在Netscape Navigator浏览器中向网页添加程序。从那时起，它已被所有其他图形界面的Web浏览器采用。使用JavaScript用户可以构建动态的Web应用程序，而无需每次都重新加载页面。传统的网站使用js提供多种形式的交互。

虽然，JavaScript与Java编程语言没有连接。这个名称是在Java逐渐开始流行时命名的。除Web浏览器外，CouchDB和MongoDB等数据库也使用JavaScript作为脚本和查询语言。

  • JavaScript 是一种轻量级的编程语言。
  • JavaScript 是可插入 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

您将学到什么

下面是您将在本教程中学到的主要内容。

JavaScript：直接写入 HTML 输出流

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

示例代码

<p>JavaScript 能够直接写入 HTML 输出流中：</p>
<script>
    document.write("<h1>这是一个标题</h1>");
    document.write("<p>这是一个段落。</p>");
</script>

效果展示：

亲自试试

JavaScript：对事件的反应

示例代码

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

效果展示：

JavaScript 能够对事件作出反应。比如对按钮的点击：

亲自试试

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

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

JavaScript：改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

示例代码

<script>
    function myFunction() {
    x = document.getElementById("demo"); // 找到元素
    x.innerHTML = "Hello JavaScript!"; // 改变内容
  }
</script>
<button type="button" onclick="myFunction()">点击这里</button>

效果展示：

JavaScript 能改变 HTML 元素的内容。

亲自试试

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

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

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

JavaScript：改变 HTML 图像

本例会动态地改变 HTML <image> 的来源（src）：

示例代码

<script>
    function changeImage() {
    element = document.getElementById('myimage');
    if (element.src.match("bulbon")) {
        element.src = "/img/pic_bulboff.gif";
    } else {
        element.src = "/img/pic_bulbon.gif";
    }
  }
</script>
效果展示：点击以下灯泡查看效果

点击灯泡就可以打开或关闭这盏灯

亲自试试

以上实例中代码 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 元素的大多数属性，而不仅仅是图片。

JavaScript：改变 HTML 样式

改变 HTML 元素的样式，属于改变 HTML 属性的变种。

示例代码

<script>
    function myFunction() {
        x = document.getElementById("demo") // 找到元素
        x.style.color = "#ff0000"; // 改变样式
    }
</script>

效果展示：

JavaScript 能改变 HTML 元素的样式。

亲自试试

JavaScript：验证输入

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

示例代码

<script>
    function myFunction5() {
        var x = document.getElementById("demo5").value;
        if (x == "" || isNaN(x)) {
            alert("不是数字");
        }
    }
</script>

效果展示：

请输入数字。如果输入值不是数字，浏览器会弹出提示框。

亲自试试

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

示例代码

if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){ alert("不是数字"); }

效果展示：

请输入数字。如果输入值不是数字，浏览器会弹出提示框。

亲自试试

您知道吗？

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

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

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

ECMAScript 版本

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

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

ECMAScript 6 也称为 ECMAScript 2015。

ECMAScript 7 也称为 ECMAScript 2016。

相关