(*/ω＼*)
0%

JS学习_Day2

发表于 分类于
真的是新手入门

1.事件

HTML 事件是发生在 HTML 元素上的事情，当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

  • 常见的html事件：
    示例：
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>ustc</title> 
</head>
<body>
<button onclick="this.innerHTML=4.3">你的GPA是?</button>
</body>
</html>

2.比较运算符

在这里插入图片描述

3.循环语句

与C并无区别，略

4.正则表达式

正则表达式是由一个字符序列形成的搜索模式。搜索模式可用于文本搜索和文本替换。
在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()：

  • search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
  • replace() 方法用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串

search():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ustc</title>
</head>
<body>

<p>搜索字符串 "lzwl", 并显示匹配的起始位置：</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var str = "lzwl 狗都不学!"; 
    var n = str.search(/lzwl/i); //i表示不区分大小写
    document.getElementById("demo").innerHTML = n;
}
</script>
//输出结果为0
</body>
</html>

search 方法可使用字符串作为参数。字符串参数会转换为正则表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ustc</title>
</head>
<body>

<p>搜索字符串 "lzwl", 并显示匹配的起始位置：</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var str = "lzwl goudoubuxue!"; 
    var n = str.search("lzwl");
    document.getElementById("demo").innerHTML = n;
}
</script>

</body>
</html>

replace():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ustc</title>
</head>
<body>

<p>替换 "ics" 为 "lzwl" :</p>
<button onclick="myFunction()">点我</button>
<p id="demo">ics goudoubuxue!</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace(/ics/i,"lzwl");
    document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

也可直接将字符串最为参数：

1
var txt = str.replace("ics","lzwl");
  • 正则表达式的修饰符:
修饰符 描述
i 不区分大小写
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。
  • 正则表达式模式
元字符 描述
\d 查找数字。
\s 查找空白字符。
\b 匹配单词边界。
\uxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
表达式 描述
[abc] 查找方括号之间的任何字符
[0-9] 查找任何从 0 至 9 的数字。
(x|y) 查找任何以 | 分隔的选项。
量词 描述
n+ 匹配任何包含至少一个 n 的字符串
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
  • RegExp 对象
    test():
    test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ustc</title>
</head>
<body>

<script>
var patt1=new RegExp("4.3");
document.write(patt1.test("your gpa is 4.3"));
</script>

</body>
</html>

exec():
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

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

<script>
var patt1=new RegExp("es");
document.write(patt1.exec("The best things in life are free"));
//结果输出为es
</script>
</body>
</html>

5.错误

  • try 语句测试代码块的错误。
  • catch 语句处理错误。
  • throw 语句创建自定义错误。
  • finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。
  • 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
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ustc</title>
</head>
<body>
<p>不管输入是否正确，输入框都会再输入后清空。</p>
<p>请输入 5 ~ 10 之间的数字：</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">点我</button>

<p id="p01"></p>

<script>
function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
    message.innerHTML = "错误: " + err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
  }
}
// 这个程序只允许你上输入5-10之间的数字，若小于五则会输出太小，大于十则输出太大
</script>

</body>

总结

JS的基本用法到此就学习完了，后面会继续学习一些进阶用法