测试开发技术网站

[【原文链接】JavaScript简介与快速体验](http://devops-dev.com/article/390)

[TOC]
# 一、JavaScript的特点

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

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

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

* JavaScript 很容易学习

# 二、JavaScript 快速体验
## 2.1 直接写入HTML内容
如下创建一个html文件，然后在body内增加一个script标签，然后使用document.write函数直接写入HTML内容，如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript直接写入HTML</title>
</head>
<body>
    <script>
        document.write("<h1>我的第一个标题</h1>");
        document.write("<p>我的第一个段落</p>");
    </script>
</body>
</html>
```
然后在浏览器中打开，结果如下：
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/f8738ed4-3cf0-11ed-a68e-0242ac110002.png)

## 2.2 对事件的响应
如下，在html的body体内，通过button标签定义一个按钮，然后按钮中响应点击事件，弹出“你好，世界”的问候
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button type="button" onclick="alert('你好，世界')")>确定</button>
</body>
</html>
```
在浏览器中运行，结果如下：
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/c460e212-3cf1-11ed-a68e-0242ac110002.png)
点击【确定】按钮之后，弹出如下提示框：
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/d46c4e3a-3cf1-11ed-a68e-0242ac110002.png)

## 2.3 改变HTML的内容
如下，在html文件中的body体内，定义一个段落和按钮，点击按钮修改段落内容，修改的动作实现由script标签中的update_demo函数实现的。
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo">你好，JavaScript</p>
    <button type="button" onclick="update_demo()")>更新</button>
    <script>
        function update_demo()
        {
            demo_elem=document.getElementById("demo");
            demo_elem.innerHTML="Hello,JavaScript";
        }
    </script>

</body>
</html>
```
在浏览器中打开结果如下：
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/bdefe472-3cf2-11ed-a68e-0242ac110002.png)
当点击【更新】按钮后，页面更新为如下：
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/cce5f868-3cf2-11ed-a68e-0242ac110002.png)

## 2.4 改变HTML图像
这里可以在和html同目录下分别存放两张图片
01.png图片如下
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/12f847f6-3cf4-11ed-a68e-0242ac110002.png)
02.png图片如下：
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/21326676-3cf4-11ed-a68e-0242ac110002.png)
然后编写html代码，如下，即通过change_image函数进行切换图片，从而做到页面显示开灯和关灯的效果。
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        function change_image()
        {
            elem=document.getElementById("demo")
            if (elem.src.match("01"))
            {
                elem.src="02.png";
            }
            else
            {
                elem.src="01.png";
            }
        }
    </script>
    <img id="demo" onclick="change_image()" src="01.png" width="240" height="180">
    <p>点击图片可以打开或者关闭电灯</p>
</body>
</html>
```
在浏览器中打开效果如下：
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/47af472e-3cf4-11ed-a68e-0242ac110002.png)

当点击灯泡一下后，显示如下：
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/558f6374-3cf4-11ed-a68e-0242ac110002.png)

当再次点击后又会显示关灯的效果。

## 2.5 改变HTML样式
编写html代码如下，即通过change_style函数修改段落的颜色
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p id="demo">我的第一个段落</p>
    <button type="button" onclick="change_style()">修改段落颜色</button>
    <script>
        function change_style()
        {
            elem=document.getElementById("demo");
            elem.style.color="#ff0000"
        }
    </script>
</body>
</html>
```
在浏览器中打开如下
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/14a3106c-3cf5-11ed-a68e-0242ac110002.png)
当点击按钮后，效果如下：
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/203de7e4-3cf5-11ed-a68e-0242ac110002.png)

## 2.6 验证输入
在html编写如下代码，即检查输入的是否为数字，如果不是数字，则弹窗提示。
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="demo" type="text">
    <button type="button" onclick="check_input()">检查</button>
    <script>
        function check_input()
        {
            var num=document.getElementById("demo").value;
            if(num=="" || isNaN(num))
            {
                alert("您输入的不是数字！")
            }
        }
    </script>
</body>
</html>
```
在浏览器中打开如下：
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/ebad5a40-3cf5-11ed-a68e-0242ac110002.png)
当输入“你好”，点击【检查】时，如下弹出提示窗口
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/0b7eb670-3cf6-11ed-a68e-0242ac110002.png)

测试开发技术网站

博客