JS学习-day2

最新推荐文章于 2024-07-12 16:27:40 发布

zhanyiyyds

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量126

点赞数

文章标签： javascript 学习

本文链接：https://blog.csdn.net/zhanyiyyds/article/details/125742905

版权

JS学习_Day2

文章目录

JS学习_Day2

1.事件

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

常见的html事件：
示例：

<!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():

<!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 方法可使用字符串作为参数。字符串参数会转换为正则表达式

<!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():

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

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

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。

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

<!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 语句允许我们创建自定义错误。
例：

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