梦入琼楼寒有月，行过石树冻无烟

📖 earlier posts 📖

JavaScript 计算

2022-04-21

简单的输出

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>

<p id="data"></p>
<script>
document.getElementById("data").innerHTML = "Hello,world" + "!";
</script>

</body
</html>
   
<!-- 输出结果为 Hello,world! -->

简单的算数题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>

<p id="data"></p>
<script>
	var a, b, c;
	a = 1; b = 2;
    c = a + b;
	document.getElementById("data").innerHTML = "1＋2= " + c;
</script>
   
</body>
</html>

<!-- 输出结果为 1 + 2 + 3 -->

类以代数

在开发之中，类以代数通常使用变量来存放值，比如我们要表达的 data = name = user

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
	var one = 1;
	var two = 1;
	var three = 1;
	var dataone = one + two + three;
	document.getElementById('data').innerHTML = "综合:" + dataone; 
</script>
</body>
</html>
<!-- 输出：综合:3-->

一条多量

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<p id="data"></p>
<script>
	var one = "1one", two = "2two", three = 11111;
	document.getElementById('data').innerHTML = one;
</script>
</body>
</html>

引号之别

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<p id="data">"1" + 1 + 2：</p>
<script>
	a = "1" + 1 + 2;
	document.getElementById('data').innerHTML = a;
</script>
</body>
</html>

<!-- 输出结果为 112-->

元素

ID DA FA
innerHTML 输出 ducument.getElementByID
var 声明变量
a = 1 赋值
c = a + b 计算值

计算

ID DA
+ 加法
- 减法
* 乘法
/ 除法
% 系数
++ 递增
– 递减
** 幂

JavaScript 变量

2022-04-21

创建变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo"></p>
<script>
var data; 		// 声明变量(data)
data = 10;		// 给data变量赋值 “5”
one = document.getElementById("demo").innerHTML = data;
</script>
</body>
</html>

初始化变量

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo"></p>
<script>
var data = 10; 		// 初始化变量
one = document.getElementById("demo").innerHTML = data;
</script>
</body>
</html>

在JavaScript之中，凡是初始化过的变量是不会被改变的，只有声明的变量才可被改变 。

改变变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo"></p>
<script>
var data = 10; 		// 初始化变量
var one;			// 声明变量
	one = 20;		// 对变量进行赋值
one = document.getElementById("demo").innerHTML = data + "<br>" + one;
</script>
</body>
</html>

此时的one变量经过声明，可被进行任意赋值，也就是说，当变量被初始化的时候是无法进行再次赋值或改变的，但是如果是声明变量是可以被改变或再次赋值的

ID DA FA
var n 声明变量 n var
var n = n 初始化变量

JavaScript 特殊显示

2022-04-21

在Console中输出文字

1
console.log('Hello,world!')

在Console中加入CSS元素

1
console.log('%cHello,world!','color: red;')

debugger

debugger用于在JavaScript中的停止代码执行，主要用于F12

转义

1
2
3
4
5
6
7
8
<body>
<p id="data">
<script>
	var one = "Hello\"帅比\"";
	document.getElementById('data').innerHTML = one;
</script>
</body>
</html>
ID DA FA
log Console 输出 console
%c 使用CSS元素
\ 转义
debugger 停止执行

JavaScript 图片切换

2022-04-21
1
2
3
4
<body>
    <button onclick="document.getElementById('data').src=''>下一张</button>
    <img id="data" border="0" style="width: 100px;height: 100px;" src="https://bkimg.cdn.bcebos.com/pic/6d81800a19d8bc3eab5ab6a28c8ba61ea8d34503?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxNTA=,g_7,xp_5,yp_5">
</body>
ID DA FA
getElementByID 目标元素ID document
.src=’’ 图片位置

JavaScript JSON

2022-04-21

Json（JavaScript Object Notation）是一个轻量级的数据交互格式且独立于各类语言，主要用于存储或传输数据，在当今环境下，Json主要用于服务端向客户端传输数据。

基本格式

1
2
3
4
5
{"user":[
	{"name":"one", "age":"10"},
	{"name":"two", "age":"20"},
	{"name":"three", "age":"30"}
]}

JSON 转 JavaScript 对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo"></p>
<script>
var data = '{"user" : [' +
	'{"name":"One", "age":"10"},' +
	'{"name":"Two", "age":"20"},' +
	'{"name":"Three", "age":"30"} ]}';
	
jon = JSON.parse(data);
document.getElementById("demo").innerHTML = jon.user[1].name + " " + jon.user[1].age;
</script>
</body>
</html>

JavaScript 正则表达式

2022-04-21

在无数的编程语言之中，大多数都支持正则表达式的使用，而在JavaScript之中也不例外。而在JavaScript正则表达式主要包含主体、修饰符，两个元素，在JavaScript中只要包含这两个格式都可称之为正则表达式

区分大小写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>demo</title>
</head>
<body>
    <p id="data"></p>
<script>
    var one = "Hello,world!";
    var two = one.search("world");
    document.getElementById("data").innerHTML = two;
</script>
</body>
</html>

使用正则不区分大小写（/n/i）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>demo</title>
</head>
<body>
    <p id="data"></p>
<script>
    var one = "Hello,world!";
    var two = one.search(/WORLD/i);
    document.getElementById("data").innerHTML = two;
</script>
</body>
</html>

正则表达式

修饰符
ID DA FA
\i 对大小写不敏感
\g 进行全局匹配
\m 多行匹配
模式
ID DA FA
[abc] 查找括号内的信息
[0-9] 查找0~9之间的数值
(x | y) 查找 x | y之间的任何信息
元字符
ID DA FA
\d 匹配数字
\s 匹配空白字符
\b 匹配字母or文字and数字
\u 查询Unicode字符

JavaScript 异常处理

2022-04-21

在通常的开发语言之中，都会有异常处理的功能，而JavaScript也和其他的开发语言一样，可使用异常处理来对相关功能添加异常信息:

异常处理格式

1
2
3
4
5
6
7
try {
	// 正常Code
} catch (e) {
	// 检查是否出发错误?
} finally {
	// 结束处理
}

在JavaScript之中，与Java一样 try……catch……finally中的finally也就是说无论是否错误，finally都会被执行一次

try……catch……finally

try
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
var data="";
function message(){
	try {
		data = "Hello,world";
	}
	catch(err) {
		data = "错误 " + err.message + "\n";
	}
	finally {

		alert(data);
	}
}
</script>
</head>
<body>
<input type="button" value="开始" onclick="message()" />
</body>
</html>
finally
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
var data="";
function message(){
	try {
		adddlert("err");
	}
	catch(err) {
		data = "错误 " + err.message + "\n";
	}
	finally {
		alert(data); // 无论如何都会执行 finally 代码块
	}
}
</script>
</head>
<body>
<input type="button" value="开始" onclick="message()" />
</body>
</html>

Throw

Throw与上述的try……catch……finally的区别就是throw是一个方法，可使用“Throw”自定义错误消息，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">开始</button>
<p id="message"></p>
<script>
    function myFunction() {
        var message,data;
            message = document.getElementById("message");
            message.innerHTML = "";
            data = document.getElementById("demo").value;
            try {
                    if (data == "") {
                        throw "请输入数值";
                    }
                    if (isNaN(data))    throw "请输入数字";
                    data = Number(data);
                    if (data < 10)      throw "小数";
                    if (data > 100)     throw "超常规";
                } catch(err) {
                    message.innerHTML = "错误： " + err;
                }
    }
</script>
</body>
</html>

表单属性 (required)

当表单处于为空时，可通过required浏览器自带功能进行判断，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<form method="post">
	<input type="text" name="fname" required="required">
	<input type="submit" value="开始">
</form>

</body>
</html>
ID DA FA
throw 自定义错误 js
required 浏览器检测空表单 html

JavaScript 显示与弹出

2022-04-21

显示JavaScript内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script>
function textDate() {
  document.write("<h1>你好世界，HellO,world!</h1>")
}
</script>
</head>
<body>

<h1>点击按钮切换内容</h1>

<button type="button" onclick="textDate()">Go!</button>

</body>
</html>

弹出JavaScript内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script>
function textDate() {
  alert("暂停维护！")
}
</script>
</head>
<body>

<h1>点击按钮切换内容</h1>

<button type="button" onclick="textDate()">Go!</button>

</body>
</html>

插入body

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>

<h1>当前时间为：</h1>
<script>document.write(Date());</script>
</body>
</html>
ID DA FA
write 输出文字 document
alert 弹窗提示 alert

JavaScript Break or Continue 方法

2022-04-21

Break 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button onclick="myFunction()">开始</button>
<p id="data"></p>
<script>
    function myFunction() {
        var a = "",i=0;
        for (i=0;i<10;i++) {
            if (i==3) {
                break;
            }
            a = a + "输出" + i + "<br>";
        }
        document.getElementById("data").innerHTML = a;
    }
</script>
</body>
</html>

Continue 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button onclick="myFunction()">开始</button>
<p id="data"></p>
<script>
    function myFunction() {
        var a = "",i=0;
        for (i=0;i<10;i++) {
            if (i==1) {
                continue;
            }
            a = a + "输出" + i + "<br>";
        }
        document.getElementById("data").innerHTML = a;
    }
</script>
</body>
</html>
ID DA FA
break 结束
continue 跳过

JavaScript While 循环

2022-04-21

基本格式（while……）

1
2
3
while (条件) {
    // 代码块
}

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button onclick="myFunction()">开始</button>
<p id="data"></p>
<script>
function myFunction(){
	var a = "", i = 0;
	while (i<10){
		a = a + "输出数据 " + i + "<br>";
		i++;
	}
	document.getElementById("data").innerHTML = a;
}
</script>
</body>
</html>

while 遍历数组 (while)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
        data = ["ONES",
                "TWR",
                "THREE"];
    var i=0;
    while (data[i]){
        document.write(data[i] + "<br>");
        i++;
    }
    </script>
</body>
</html>
📖 more posts 📖