【JavaScript学习笔记四】事件,字符串,运算符和比较

本文链接：https://blog.youkuaiyun.com/qq_28997735/article/details/100755322

本文深入讲解JavaScript的基础知识，包括HTML事件、字符串操作、运算符及比较逻辑，通过实例演示了如何在网页中应用这些概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 事件

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

常用的事件：

onchange：html元素改变
onclick：点击html元素
onmouseover：鼠标在html元素上移动
onmouseout：鼠标从html元素上移开
onkeydown：按下键盘按键
onload：浏览器完成加载

语法：

<some-HTML-element some-event='JavaScript 代码'>
//some-HTML-element: html元素
//some-event: 事件

实例：

<script>
	function MyFun()
	{
		//获取时间并将id = “demo”的段落里的数据替换为时间
		document.getElementById("demo").innerHTML = Date();
	}
</script>
<button onclick = "MyFun()">显示时间</button>

二.字符串

语法：

var String = "HELLO WORLD!";
var temp = String[2];

可以使用转义字符将特殊字符转换为字符串字符
字符串可以是对象，但不要创建 String 对象，原因会拖慢执行速度和产生其他副作用。
字符串的索引从 0 开始

常用函数：

charAt()：返回指定索引位置的字符
concat()：连接两个或多个字符串，返回连接后的字符串
indexOf()：返回字符串中检索指定字符第一次出现的位置
lastIndexOf()：返回字符串中检索指定字符最后一次出现的位置
toUpperCase()：字符串转换为大写
toLowerCase()：字符串转换为小写

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8">
		<title>字符串</title>
		 <script>
			function add()
			{
				var a = document.getElementById("FirstString").value;
				var b = document.getElementById("SecondString").value;
				
				document.getElementById("Result").innerHTML = a.concat(b);
				document.getElementById("character").innerHTML = a.charAt(3);
				document.getElementById("pos").innerHTML = a.indexOf('h');
				document.getElementById("Upper").innerHTML = a.toUpperCase();
			}
		 </script>
	</head>
	<body>
		<input type = "text" id = "FirstString"></input>
		<button onclick = "add()">+</button>
		<input type = "text" id = "SecondString"></input>		
		=<span id = "Result"></span><br/>
		第一空的第四个字符是<span id = "character"></span><br/>
		h出现的位置是：<span id = "pos"></span><br/>
		第一空大写：<span id = "Upper"></span><br/>
	</body>
</html>

结果：
在这里插入图片描述
更多函数可以网上查询得到。

三.运算符

数字加减乘除取余自加自减与C语言相同。

取模运算的结果符号只与左边值的符号有关：
如果 % 左边的操作数是正数，则模除的结果为正数或零,否则为负数或零。

“+” 运算符用于把文本值或字符串变量连接。

最后的表达形式：

字符串和数字相加，数字转成字符串。例：1 + abc = 1abc
数字和布尔值相加，布尔值 false 转成 0，true 转成 1。例：true + 2 = 3
字符串与布尔值相加，布尔值转化成字符串。例：abc + false = abcfalse
数字与 null(空值) 相加，null 转化为数字 0。例：2 + null = 2
字符串与 null(空值) 相加，null 转化为字符串。例：abc + null = abcnull

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8">
		<title>加法</title>
		 <script>
			function add()
			{
				var num = 123;
				var string = "hello";
				document.getElementById("Result1").innerHTML = num + string;
				document.getElementById("Result2").innerHTML = num + true;
				document.getElementById("Result3").innerHTML = string + false;
				document.getElementById("Result4").innerHTML = num + null;
				document.getElementById("Result5").innerHTML = string + null;
			}
		 </script>
	</head>
	<body>	
		<button onclick = "add()">显示结果</button><br/>
		字符串与数字相加：<span id = "Result1"></span><br/>
		数字与布尔值相加：<span id = "Result2"></span><br/>
		字符串与布尔值相加：<span id = "Result3"></span><br/>
		数字与null相加：<span id = "Result4"></span><br/>
		字符串与null相加：<span id = "Result5"></span><br/>
	</body>
</html>

结果：
在这里插入图片描述

四.比较

比较和逻辑运算符用于测试 true 或者 false。

符号相比C语言多了一个绝对等于和不绝对等于，其他相同。

举例：

var a = 7;

a == 7;   		//true

a === 7;  		//true
a === "7";  	//false

a !== 7;		//false
a !== "7";		//true