JavaScript基础3

最新推荐文章于 2023-04-20 11:03:53 发布
最新推荐文章于 2023-04-20 11:03:53 发布
阅读量131 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52188375/article/details/109690793
版权

JavaScript_3

1.JavaScript 运算符

   1.1 算术运算符 + 、-、*、/、%、++、--。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>算术运算符</title>
		<script>
			window.onload=function(){
				//1.算术运算符 + 、-、*、/、%、++、--。
				var num1=10;
				var num2=3;
				//+ 算术运算符【加--和】
				//+ 连字符
				document.write("<h1>"+num1+"+"+num2+"="+(num1+num2)+"</h1>");
				document.write("<h1>"+num1+"-"+num2+"="+(num1-num2)+"</h1>");
				document.write("<h1>"+num1+"*"+num2+"="+(num1*num2)+"</h1>");
				document.write("<h1>"+num1+"/"+num2+"="+(num1/num2)+"</h1>");
				document.write("<h1>"+num1+"%"+num2+"="+(num1%num2)+"</h1>");
				//++[自动加1]
				//变量++【先用后加】     
				//document.write("<h1>num1++ ="+(num1++)+"</h1>"); //10
				//document.write("<h1>num1="+num1+"</h1>");// 11
				//++变量【先加后用】
				//document.write("<h1>++num1 ="+(++num1)+"</h1>"); //11
				//document.write("<h1>num1="+num1+"</h1>"); //11
				//--【自动减1】
				//变量--【先用后减】
				//document.write("<h1>num1-- ="+(num1--)+"</h1>"); //10
				//document.write("<h1>num1="+num1+"</h1>");// 9
				//--变量【先减后用】
				document.write("<h1>--num1 ="+(--num1)+"</h1>"); //9
				document.write("<h1>num1="+num1+"</h1>"); //9
			}
		</script>
	</head>
	<body>
	</body>
</html>

  1.2 比较运算符 ==  ===  !=  >  <  >=  <=

        运算结果一定是布尔Boolean型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>比较运算符</title>
		<script>
			window.onload=function(){
				//2.比较运算符 == !=  >  <  >=  <=  ===
				var num1 = 10;
				var num2 = 3;
				document.write("<h1>"+num1+"=="+num2+"="+(num1==num2)+"</h1>");
				document.write("<h1>"+num1+"!="+num2+"="+(num1!=num2)+"</h1>");
				document.write("<h1>"+num1+">"+num2+"="+(num1>num2)+"</h1>");
				document.write("<h1>"+num1+"<"+num2+"="+(num1<num2)+"</h1>");
				document.write("<h1>"+num1+">="+num2+"="+(num1>=num2)+"</h1>");
				document.write("<h1>"+num1+"<="+num2+"="+(num1<=num2)+"</h1>");
			    // === [比较数值的同时，也要比较数据类型]
				var a=10;
				var b="10";
                document.write("<h1>"+a+"=="+b+"="+(a==b)+"</h1>");
 				document.write("<h1>"+a+"==="+b+"="+(a===b)+"</h1>");
			}
		</script>
	</head>
	<body>
	</body>
</html>

  1.3 逻辑运算符 ||   &&  ！

      运算数据和运算结果都是布尔boolean

              3 || 5---？？？

      (3>5)  ||  (3<5)------true

真值表

a=true   b=false

     ||

&&

!

a  ||  b---true

a  &&  b---false

!a ---false

b  ||  a---true

b  &&  a---false

!b ---true

a  ||  a---true

a  &&  a---true

 

b  ||  b---false

b  &&  b---false

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>逻辑运算符</title>
		<script>
			window.onload=function(){
				//3.逻辑运算符 ||   &&  ！
				var num1 = 10;
				var num2 = 3;
				document.write("<h1>"+((num1>num2) || (num1<num2))+"</h1>"); //true
				document.write("<h1>"+((num1>num2) && (num1<num2))+"</h1>"); //false
				document.write("<h1>"+!((num1>num2) || (num1<num2))+"</h1>"); //false
			}
		</script>
	</head>
	<body>
	</body>
</html>

1.4 条件运算符  【(判断表达式) ? 数值1 : 数值2】  ()? :

        var  iablename=()?value1:value2 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>条件运算符</title>
		<script>
			function test1(){
				//4.条件运算符  【(判断表达式) ? 数值1 : 数值2】  ()? : 
				var val=document.getElementById("text1").value;
				var str=(val > 18)?"成年":"未成年";
				document.getElementById("text1").value=str;
			}
		</script>
	</head>
	<body>
		<input id="text1" type="text" value="请输入年龄" /><br>
		<input type="button" value="测试条件运算符" onclick="test1();"/>
	</body>
</html>

1.5 typeof 操作符--检测变量的数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>typeOf</title>
		<script>
			window.onload=function(){
				//typeof 操作符--检测变量的数据类型
				//格式 :  typeof  变量
				var  str="hello"; //string
				var  num=123.5;   //number
				var  boo=false;   //boolean
				var  arr=new Array(12,45.5); //object
				var  obj={id:1001,name:"zhangsan"}; //object
				var  testnull=null; //object
				var  un; //undefined
				document.write("<h1>str的数据类型=="+typeof str+"</h1>");
				document.write("<h1>num的数据类型=="+typeof num+"</h1>");
				document.write("<h1>boo的数据类型=="+typeof boo+"</h1>");
				document.write("<h1>arr的数据类型=="+typeof arr+"</h1>");
			    document.write("<h1>obj的数据类型=="+typeof obj+"</h1>");
				document.write("<h1>testnull的数据类型=="+typeof testnull+"</h1>");
				document.write("<h1>un的数据类型=="+typeof un+"</h1>");
			}
		</script>
	</head>
	<body>
	</body>
</html>

2. JavaScript 流程控制语句

 1. 顺序结构  自上往下一行一行逐行执行

 2. 选择结构  有选择的执行某一部分程序

   2.1 if语句结构

     1. if(){}

     2. if(){}else{}

     3. if(){}else if(){}else if(){}...else{}

     4. if语句的嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>if语句结构</title>
		<script>
			window.onload=function(){
				//if(){} --当()中的结果为true是执行{}中的程序
				var num1=-10;
				/*
				if(num1>11){ 
					alert("当()中的结果为true是执行{}中的程序");
					}
				*/
				//2.if(){}else{}--【2选1】
				//当()中的结果为true是执行第一个{}中的程序
				//当()中的结果为false是执行第二个{}中的程序
				/*
				if(num1>11){
					alert("当()中的结果为true是执行第一个{}中的程序");
					}else{
						alert("当()中的结果为false是执行第二个{}中的程序");
					}
				*/
				//3.if(){}else if(){}else if(){}...else{}--【多选1】
				//当第一个()中的结果为true执行第一个{}中的程序
				//当第一个()中的结果为false执行第二个()中的程序
				//当第二个()中的结果为true执行第二个{}中的程序
				//当第二个()中的结果为false执行第s三个()中的程序
				//.....以此类推
				//当所有()中的结果为false的时候，执行最后一个{}中的程序
				/*
				if(num1>0){
					alert("当第一个()中的结果为true执行第一个{}中的程序");
					}else if(num1<8){
						alert("当第二个()中的结果为true执行第二个{}中的程序");
					}else if(num1<4){
						alert("当第三个()中的结果为true执行第三个{}中的程序");
					}else{
						alert("当所有()中的结果为false的时候，执行最后一个{}中的程序");
					}
				*/
				//4.if语句的嵌套 【4选1】
				if(num1>0){
					if(num1<60){  
						alert("不及格"); //true  true
					}else{
						alert("及格"); //true  false
					}
				}else{
					if(num1==0){  
						alert("0分");  //false  true
					}else{
						alert("没有负数");  //false  false
					}
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

  2.2 Switch语句结构

  switch 语句用于基于不同的条件来执行不同的动作。

  语法

   switch(表达式 n){
   case 常量值1:
     执行代码块 1  break;
   case 常量值1:
    执行代码块 2 break;

     .......

  case 常量值n:
    执行代码块 n
  break;
  default:
     表达式的结果与case后面常量值都不匹配；

  }

  工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>switch</title>
		<script>
			function jisuan(){
				var num1=document.getElementById("num1").value;
				var op=document.getElementById("op").value;
				var num2=document.getElementById("num2").value;
				var span=document.getElementById("span");
				switch(op){
					case "+": span.innerHTML=num1+"+"+num2+"="+(num1*1+num2*1);break;
					case "-": span.innerHTML=num1+"-"+num2+"="+(num1*1-num2*1);break;
					case "*": span.innerHTML=num1+"*"+num2+"="+(num1*1*num2*1);break;
					case "/": span.innerHTML=num1+"/"+num2+"="+(num1*1/num2*1);break;
					default: span.innerHTML="运算符号有错!";
				}
			}
		</script>
	</head>
	<body>
		<input id="num1" type="text" value="请输入数字" /><br>
		<input id="op" type="text" value="请输入运算符" /><br>
		<input id="num2" type="text" value="请输入数字" /><br>
		<input type="button" value="计算结果" onclick="jisuan()"/><br>
		<span id="span"></span>
	</body>
</html>

 3. 循环结构

  3.1 for循环

  for (语句 1; 语句 2; 语句 3){
     被执行的代码块
    }

  语句 1 （代码块）开始前执行 starts.[初始条件]

  语句 2 定义运行循环（代码块）的条件[判断条件]

  语句 3 在循环（代码块）已被执行之后执行[循环增量/减量]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>for</title>
		<script>
			window.onload=function(){
				/*
				for (语句 1; 语句 2; 语句 3){
				  被执行的代码块
				  }
				语句 1 （代码块）开始前执行 starts.[初始条件]
				语句 2 定义运行循环（代码块）的条件[判断条件]
				语句 3 在循环（代码块）已被执行之后执行[循环增量/减量]
				*/
			   /*
			   var  arr1=new Array(6,5,4,3,2,1);
			   for(var i=0;i<arr1.length;i++){
				   document.write("<h"+arr1[i]+">测试for循环</h"+arr1[i]+">");
			   }
			   */
			   for(var i=10;i>0;i--){
			   		document.write("<h1>数字i=="+i+"</h1>");
			   }
			   
			}
		</script>
	</head>
	<body>
	</body>
</html>

  3.2 for/in

  JavaScript for/in 语句循环遍历对象的属性

  for (保存属性变量 in 对象){

    对象名称[保存属性值的变量] ;//属性值

  }

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>for/in语句</title>
		<script>
			window.onload=function(){
				var user={id:1002,name:"zahngsan",age:23};
				var att="";//保存属性的变量
				for(att in user){
					//alert(user[att])
					alert(att+"=="+user[att])
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

3.3 while循环

  语法:

  while (判断条件){
     需要执行的代码
    }

     1.初始值需要定义在while语法以外

     2.控制循环增量/减量的代码，需要写在” 需要执行的代码”后面，如果没有就是死循环。

例如: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>while</title>
		<script>
			var arr=new Array(6,5,4,3,2,1)
			var i=0;//初始值
			while(i<arr.length){
				document.write("<h"+arr[i]+">测试for循环</h"+arr[i]+">")
				i++;
			}
		</script>
	</head>
	<body>
	</body>
</html>

3.4 do{}while循环

  语法

  do{
     需要执行的代码
   }while (判断条件);

   1.初始值需要定义在while语法以外

   2.控制循环增量/减量的代码，需要写在” 需要执行的代码”后面，如果没有就是死循环。

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>while</title>
		<script>
			var arr=new Array(1,2,3,4,5,6);
			var i=0;//初始值
			do{
				document.write("<h"+arr[i]+">测试for循环</h"+arr[i]+">");
				i++;
			}while(i<arr.length)
		</script>
	</head>
	<body>
	</body>
</html>

while与do{}while()的区别？

while是先判断后执行，do{}while()先执行后判断，do{}while()与while同等条件下多执行一次。

while/do{}while()与for的区别

for--在执行的时候需要明确的知道循环的次数

While()/do{}while()----不需要明确的知道循环的次数。

 

折翼天使【*-*】
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript基础-3
m0_49935332的博客
11-15 100
JavaScript_3 1.JavaScript 运算符        1.算术运算符 + 、-、* 、/、%、++、 --。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>算术运算符</title> <script> window.onload=functio
javascript学习笔记整理知识点整理
01-04
此为javascript初学者学习笔记知识点整理，为文档格式，包含javascript入门知识点，需要视频可留言
[JavaScript] 正则表达式中$1,$2的作用
PP_Mumu的博客
02-08 1202
1对应正则表达式中第一个小括号内表达式所对应的内容(\d{3})与 regexp 相匹配的子串。如：这是一个实现类型判断的函数。replace字符串替换。
js正则表达式replace中参数为$1、$2、...、$99、函数等用法以及常用的正则表达式
sxww_zyt的博客
04-20 2780
js正则表达式replace中参数为$1、$2、...、$99、函数等用法以及常用的正则表达式
js正则表达式之$1$2$3$4$5$6$7$8$9属性，返回子匹配的结果
ywb201314的专栏
11-21 6022
功能：$1-$9存放着正则表达式中最近的9个正则表达式的匹配结果，这些结果按照子匹配的出现顺序依次排列。  基本语法RegExp.$n  注意：这些属性是静态的，除了replace中的第二个参数可以省略RegExp之外，其他地方使用都要加上RegExp。 //创建要进行匹配的字符串 var objStr="这是我的手机号13100000000" //创建正则表达式匹配手机
js中$的用法及理解
qq_51992458的博客
08-01 7874
在JS应用库JQUERY的作者将之做为一个自定义函数名了，这个函数是获取指定网页元素的函数，使用非常多且方便快捷。具体用法是在不用JQUERY的情况，自己自定义一个在JS应用库JQUERY的作者将之做为一个自定义函数名了，这个函数是获取指定网页元素的函数，使用非常多且方便快捷。具体用法是在不用JQUERY的情况，自己自定义一个在JS应用库JQUERY的作者将之做为一个自定义函数名了，这个函数是获取指定网页元素的函数，使用非常多且方便快捷。具体用法是在不用JQUERY的情况，自己自定义一个函数。 即： fun
ArcGIS之JavaScript显示3D基础地图
最新发布
03-25
ArcGIS之JavaScript显示3D基础地图
JavaScript基础
02-24
JavaScript基础 模块挑战是学生独立完成的下午项目或作业。 这是在先前由讲师完成的指导项目的基础上扩展的。 高级CSS和JavaScript JavaScript基础 目标 使用let，const，var并演示它们之间的差异。 了解并能够使用...
回顾Javascript React基础
10-16
主要介绍了Javascript React基础，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的同学可以参考一下
javascript基础入门.ppt
11-12
JavaScript基础入门 JavaScript是基于对象和事件驱动的解释性语言，其目的就是增强Web客户交互，弥补了HTML的缺陷。JavaScript与Java不同，它们处于不同的公司，属于不同的产品。JavaScript可以使网页更具有交互性...
JavaScript的标识符，关键字，字面值 JavaScript中的变量 JavaScript中的函数 JavaScript中的变量
乘风晓栈的博客
10-31 558
JavaScript的标识符，关键字，字面值 JavaScript中的变量 JavaScript中的函数
javaScript数据类型解析
masterShaw的博客
04-19 374
通用表达类型 var 整型： for(var i=0;i 字符型 var str='1234' 这里面的str就默认为字符串了。 浮点型 var doublee=0.7 这里面的doublee就默认为浮点型了。 数组 var num=5; var ary=new Array(num); var ary1=new Array( new Array('11','22','33')
Golang基础语法学习第一周笔记打卡
weixin_74568415的博客
03-05 278
只学了半年python的大一小白自学golang的笔记打卡
html中ID取val值,document.getElementById获取不到值的原因及解决办法
weixin_36058835的博客
06-18 3206
document.getElementById获取不到值的原因及解决办法在html中如下一段源代码：document.getElementById("getText").value="你好";helloDW(Dreamweaver)测试无任何错误提示，但标签中的内容没有改变在EditPlus中测试直接出现如下图所示的错误点击是只有一个hello 出现的结果在DW中一样，只是这里报错说明问题出现在g...
javascript笔记总结
oops
06-25 5379
JavaScript基础 JS是支持面向对象编程的跨平台脚本弱类型的语言 面向对象是一种思想 跨平台：ios、Android、windows、Linux 脚本：依赖其他才能解析 弱类型：变量在声明后还可以改变 js组成 DOM：文档对象 BOM：浏览器对象 ECMAScript：规范 js的变量是用来储存数据的容器 js的输出方式 alert（）  /浏览器弹窗、用户提示 document.write（）  //可在浏览器的显示区域显示文本 console.log（）  /控制台日志 confir
JavaScript笔记整理
qq_43174912的博客
03-21 4284
title: JavaScript tags: JavaScript notebook: 2022年3月21日之前笔记 2022 年 3 月 18 日 大数据类型使用 bigInt null 有数据位置但是没有数据，undefined 是完全没有数据位置 object{} 对象，array[]数组 if 中如果没有写判断语句则括号中的内容会被转换成布尔类型（隐式转换） false ： null nuderfined 0 " " NaN switch 的 key 和 val 的比较.
javascript全程笔记
qq_38850792的博客
03-17 818
2.类型转换 （1）隐式类型转换： （2）显式类型转换（强制类型转换） 3.进制转换 （1）其他进制转换成10进制 （2）十进制转换成其他进制 4. 常用方法 (1)任何涉及NaN的操作，都返回NaN (2)NaN与任何值都不相等，包括t他本身NaN 5、常见面试题 6、Boolean类型 Boolean() 7. undefined类型 1、 变量只声明，未赋值 2、 alert( c ) //报错 3、函数没有返回值，默认undefined
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值