JavaScript入门第四天

最新推荐文章于 2024-06-16 18:09:06 发布

爱学习的甘蔗

最新推荐文章于 2024-06-16 18:09:06 发布

阅读量155

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_67700096/article/details/126947707

版权

JavaScript入门第四天

JavaScript对象

JS对象的创建和使用

JavaScript 是一种面向对象的编程语言，在 JavaScript 中几乎所有的东西都是对象。因此，要想有效的使用 JavaScript，首先需要了解对象的工作原理以及如何创建并使用对象。
我们可以将对象看作是一个属性的无序集合，每个属性都有一个名称和值（键/值对）

创建对象

使用花括号 { } 来创建对象，{ } 中用来定义对象中的属性。属性是一个个键:值对的组合，其中键（属性名称）始终是字符串类型的，而值（属性值）则可以是任意类型，例如字符串、数组、函数或其它对象等。不同的属性之间使用逗号进行分隔

		<!DOCTYPE html>
		<html>
			<head>
				<meta charset="utf-8">
				<title></title>
			</head>
			<body>
				<script type="text/javascript">
					var student = {
						stuName: "dddd",
						stuAge: 20,
						stuId: 600,
						displayName: function() {
							document.write(this.stuName);
						}
					};
					//上面示例中创建了一个名为 student 的对象，该对象中包含三个属性   stuName、 stuAge、stuId 和一个方法 displayName()。displayName() 方法中的 this.stuName 表示访问当前对象中的 stuName 属性，会被 JavaScript 解析为 student.stuName。
				</script>
			</body>
		</html>

要访问或获取属性的值，您可以使用对象名.属性名或者对象名[“属性名”] 的形式，如下例所示：


		<!DOCTYPE html>
		<html>
			<head>
				<meta charset="utf-8">
				<title></title>
			</head>
			<body>
				<script type="text/javascript">
					var student = {
						stuName: "dddd",
						stuAge: 20,
						stuId: 600,
						displayName: function() {
							document.write(this.stuName);
						}
					};
					document.write("姓名：" + student.stuName + "<br>"); // 输出：姓名：dddd
					document.write("年龄：" + student["stuAge"]); // 输出：年龄：20
				</script>
			</body>
		</html>

JavaScript 中string对象

JavaScript 中，字符串和字符串对象之间能够自由转换，因此不论是创建字符串对象还是直接声明字符串类型的变量，都可以直接使用字符串对象中提供的方法和属性。

String 对象中的属性

在这里插入图片描述
对象属性的使用方法对象名.属性名或者对象名[“属性名”]
小练习

		<!DOCTYPE html>
		<html>
			<head>
				<meta charset="utf-8">
				<title></title>
			</head>
			<body>
				<script type="text/javascript">
					// 1.给定一个字符串如“abaasdffggghhjjkkgfddsssss3444343”，问题如下：
					var str = "abaasdffggghhjjkkgfddsssss3444343"
					//(1)字符串的长度 
					console.log(str.length)
					//(2)取出指定位置的字符，如9 
					console.log(str.charAt(9))
					//(3)查找指定字符是否在以上字符串中存在，如i 
					if (str.indexOf("i") == -1) {
						console.log("不包含i")
					} else {
						console.log("包含i")
					}
					// (4)替换指定的字符，如g替换为9等操作方法  
					console.log(str.replaceAll("g", "9"))
					// (5) 截取指定开始位置到结束位置的字符串，如取得1-5的字符串 
					console.log(str.substring(1, 5))
				</script>
			</body>
		</html>

按钮的点击事件

如下在JavaScript里面设置一个函数
通过onclick事件调用此函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		第一个数<input type="text" id="one" /><br />
		第二个数<input type="text" id="two" /><br />
		<input type="button" value="+" onclick="res('+')">
		<input type="button" value="-" onclick="res('-')">
		<input type="button" value="/" onclick="res('*')">
		<input type="button" value="*" onclick="res('/')">
		<!-- 计算结果框-->
		<br />
		&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; <input type="text" name="result" id="result" value="">
		<script type="text/javascript">
			function res(s) {
				var one = parseFloat(document.getElementById("one").value)
				var two = parseFloat(document.getElementById("two").value)
				if (s == "+") {
					document.getElementById("result").value = one + two
				} else if (s == "-") {
					document.getElementById("result").value = one - two
				} else if (s == "*") {
					document.getElementById("result").value = one * two
				} else if (s == "/") {
					document.getElementById("result").value = one / two
				}
			}
		</script>
	</body>
</html>