JS初识2

最新推荐文章于 2025-01-21 09:36:24 发布

270年前

最新推荐文章于 2025-01-21 09:36:24 发布

阅读量73

点赞数

文章标签： javascript js

本文链接：https://blog.youkuaiyun.com/weixin_49344258/article/details/108344652

版权

JavaScript_2

https://www.w3school.com.cn/js/index.asp

1.JavaScript 运算符

1.1JavaScript 使用(=)赋值运算符。

JavaScript 使用算数运算符（+ - * / % ++ --）来计算值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变量-运算符-表达式</title>
		<script>
			function  suanshu(){
				//声明变量
				var num1=10;
				var num2=3;
				document.getElementById("h1").innerHTML=num1+"+"+num2+"="+(num1+num2);
				document.getElementById("h2").innerHTML=num1+"-"+num2+"="+(num1-num2);
				document.getElementById("h3").innerHTML=num1+"*"+num2+"="+(num1*num2);
				document.getElementById("h4").innerHTML=num1+"/"+num2+"="+(num1/num2);
				document.getElementById("h5").innerHTML=num1+"%"+num2+"="+(num1%num2);
				// ++ [自动加1]
				// 变量++  [先用后加]
				//num1++;  //10
				//document.getElementById("h6").innerHTML=num1; //11
				// ++变量  [先加后用]
				//++num1;  //11
				//document.getElementById("h6").innerHTML=num1; //11
				// -- [自动减1]
				// 变量-- [先用后减]
				//num1-- ; //10
				//document.getElementById("h6").innerHTML=num1; //9
				//  -- 变量
				--num1;  // 9
				document.getElementById("h6").innerHTML=num1; //9
			}
		</script>
	</head>
	<body>
		<input  type="button"  value="测试算数运算符" onclick="suanshu()"/><br>
		<h1 id="h1"></h1>
		<h1 id="h2"></h1>
		<h1 id="h3"></h1>
		<h1 id="h4"></h1>
		<h1 id="h5"></h1>
		<h1 id="h6"></h1>
	</body>
</html>

1.2.JavaScript 使用(> < == >= <= != )比较运算符运算符。

比较运算符的结果一定是布尔值【true/false】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>javascript中的比较运算符</title>
		<script>
			//测试比较运算符的函数
			function test1(){
				//定义参与运算的变量
				var num1=10;
				var num2=3;
				document.getElementById("h1").innerHTML=num1+">"+num2+" = "+(num1>num2);//true
				document.getElementById("h2").innerHTML=num1+"<"+num2+" = "+(num1<num2);//false
				document.getElementById("h3").innerHTML=num1+">="+num2+" = "+(num1>=num2);//true
				document.getElementById("h4").innerHTML=num1+"<="+num2+" = "+(num1<=num2);//false
				document.getElementById("h5").innerHTML=num1+"=="+num2+" = "+(num1==num2);//false
				document.getElementById("h6").innerHTML=num1+"!="+num2+" = "+(num1!=num2);//true
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试比较运算符" onclick="test1();" />
		<h2 id="h1"></h2>
		<h2 id="h2"></h2>
		<h2 id="h3"></h2>
		<h2 id="h4"></h2>
		<h2 id="h5"></h2>
		<h2 id="h6"></h2>
	</body>
</html>

2.2JavaScript 使用(|| && ! )逻辑运算符运算符。

|| [逻辑或] true || false --> true

false || true --> true

true || true --> true

false || false --> false

只要有true结果就是true

&& [逻辑与] true && false --> false

false && true --> false

false && false --> false

true && true --> true

只要有false结果就是false

! [取反] !true--->false

!false----true

逻辑运算符的运算值和运算结果一定是布尔值【true/false】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试逻辑运算符</title>
		<script>
			测试逻辑运算符
			function test1(){
				//定义参与运算的变量
				var num1=10;
				var num2=3;
				document.getElementById("h1").innerHTML="("+num1+">"+num2+") || ("+num1+"<"+num2+")=="+((num1>num2)||(num1<num2));
				//(10>3) || (10<3)== true
				document.getElementById("h2").innerHTML="("+num1+">"+num2+") && ("+num1+"<"+num2+")=="+((num1>num2)&&(num1<num2));
				//(10>3) && (10<3)== false  
				document.getElementById("h3").innerHTML="!(("+num1+">"+num2+") && ("+num1+"<"+num2+"))=="+!((num1>num2)&&(num1<num2));
				//!((10>3) && (10<3))== true  
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试逻辑运算符" onclick="test1();" />
		<h2 id="h1"></h2>
		<h2 id="h2"></h2>
		<h2 id="h3"></h2>
	</body>
</html>

比较与逻辑运算符通常都是用来做判断的。

2.JavaScript 数据类型

字符串值，数值，布尔值，数组，对象。

字符串值--“hello”

var zf=”hello”;

数值[整数和小数]---123 ， 12.5

var sz=123; var sz=12.5;

布尔值--[true/false]

var be=true; var be=false;

数组--可以保存一组值

var array=[“hello”,123,12.5,true,false];

对象

var student={stuid:1001,stuname:”zhangsan”,stuage:23,stuaddress:”西安”};

student.stuid===>1001

3.JavaScript 函数

JavaScript 函数是被设计为执行特定任务的代码块【{}】。

实例:

function myFunction(p1, p2) {

return p1 * p2; // 该函数返回 p1 和 p2 的乘积

}

JavaScript 函数通过 function 关键词进行定义.

myFunction--函数名称

“()”---参数列表【可以没有参数,也可以有多个】

参数接收函数之外的数据值进入本函数进行运算【找帮手】

p1, p2---参数【变量名称，不需要定义】接收函数之外的数据值进入本函数

{}---代码块

return --- 返回函数的执行结果

函数没有执行结果，不需要出现return xxxx
函数有执行结果,需要在最后出现return xxxxx
有没有名称
有名称的函数

function test1(){

alert("有名称的函数");

}

没有名称的函数【匿名函数】

window.οnlοad=function(){

alert("匿名函数");}
有没有参数
有参数的函数
         function test2(info){

                                   alert(info);

                          }

    在使用的时候需要传递进入参数值
没有参数的函数
function test1(){

alert(“没有参数的函数”);

}
有没有结果
有结果的函数
         function test3(){

                                   return "有结果";

                          }
没有结果的函数

function test3(){

}

例如：

function test4(num1,num2){

var res=num1*num2;

return res;

}

function test5(){

var res=test4(100,123);

alert("res=="+res)；}

4.JavaScript 对象

对象也是变量。但是对象包含很多值。

对象包含很多值1.属性 2.方法

对象就是用来描述具有相同属性和方法的变量。

属性----变量【var】【属性名称:属性值】

方法----函数【function】【方法名称:function(){}】

格式:

var 对象名称={属性:属性值,....,

方法名称:函数}；

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建并使用对象</title>
		<script>
			//创建一个汽车对象
			var car={
				carName:"bmw",
				carcolor:"红色",
				start:function(){
					alert("启动--"+car.carcolor+","+car.carName+"汽车");
				},
				stop:function(){
					alert(this.carcolor+","+this.carName+"汽车停止了");
				}
			};
		function startcar(){
			car.carName="奔驰";
			car.start();
		}
		function stopcar(){
			car.carcolor="蓝色";
			car.stop();
		}
		</script>
	</head>
	<body>
		<input type="button" value="启动" onclick="startcar();"/><br>
		<input type="button" value="停车" onclick="stopcar();"/><br>
	</body>
</html>

var  str=”hello”; 字符串
var  num1=123;  数字
var  num2=”123”;  字符串
var  boo=true; 布尔
function  test1(){  }--函数
用javascript表示一个学生
var student={
name:”zhangsan”,
age:23,
addres:”西安”,
sex:true,
xuexi:function(){
alert(“我是学生，我在学习!!!”);
}}
student.name=”lisi”; //修改对象的属性值
student.name;  //获取对象的属性值。
student[“name”]
student.xuexi(); //访问学生的学习方法
通过对象的名称就可以访问对象中保存的变量和方法。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//创建一个学生对象
			var student={
				stuid:1001,
				stuname:"zhangsan",
				stuage:23,
				stuaddress:"西安",
				getInfo:function(){
					return student.stuid+"-"+student.stuname;
				},
				getInfo2:function(id,name){
					student.stuid=id;
					student.stuname=name;
					return student.stuid+"-"+student.stuname;
				}
			};
			
			var person={
				personname:"wangwu",
				mystudent:{
					stuid:1001,
					stuname:"zhangsan",
					getInfo:function(){
						return person.mystudent.stuid+"-"+person.mystudent.stuname;
					}
				}
			}
			
			function  test1(){
				var info1=student.getInfo();
				alert(info1);
			}
			
			function  test2(){
				var info2=student.getInfo2(1002,"lisi");
				alert(info2);
			}
			
			function  test3(){
				var name=person.personname;
				//person.mystudent.stuid=1002;
				//person.mystudent.stuname="lisi";
				var info=person.mystudent.getInfo();
				alert(name+"----"+info);
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试学生对象的getInfo方法" onclick="test1();"/>
		<input type="button" value="测试学生对象的getInfo2方法" onclick="test2();"/>
		<input type="button" value="测试Person对象" onclick="test3();"/>
	</body>
</html>