JavaScript入门-03

最新推荐文章于 2023-10-31 19:27:12 发布
最新推荐文章于 2023-10-31 19:27:12 发布
阅读量59 收藏
点赞数
分类专栏： JavaScript 笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_50855580/article/details/109701352
版权

JavaScript_3

1.JavaScript 运算符
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>

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>");
			}
		</script>
	</head>
	<body>
	</body>
</html>

3.逻辑运算符 || && ！
运算数据和运算结果都是布尔boolean
3 || 5—？？？
(3>5) || (3<5)------true
真值表
a=true b=false
| | | | true or false|
|- -|–|
| a||b | true |
| b||a | true |
| a||a | true |
| b||b | false |

| a&&b | false |
| b&&a | false |
| a&&a | true |
| b&&b | false |

| ！a | false |
| ！b | true |

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

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>

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>

3.JavaScript 流程控制语句

  1. 1.顺序结构 自上往下一行一行逐行执行
    2.选择结构 有选择的执行某一部分程序

  2. 2.1if语句结构
    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.2Switch语句结构
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.1for循环
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.2for/in
JavaScript for/in 语句循环遍历对象的属性
for (保存属性变量 in 对象){
对象名称[保存属性值的变量] ;//属性值
}
例如：

 var user={id:1001,name:"zhangsan",age:23};
			  var att=""; //保存属性的变量
			  for(att in user){
				  //alert(att);
				  alert(att+"=="+user[att]);
			  }

3.3 while循环
语法:
while (判断条件){
需要执行的代码
}
1.初始值需要定义在while语法以外
2.控制循环增量/减量的代码，需要写在” 需要执行的代码”后面，如果没有就是死循环。
例如:

 var  arr1=new Array(6,5,4,3,2,1);
				var i=0; // 初始值
				while(i<arr1.length){
					 document.write("<h"+arr1[i]+">测试for循环</h"+arr1[i]+">");
					 i++;
				}

3.4 do{}while循环
语法
do{
需要执行的代码
}while (判断条件);
1.初始值需要定义在while语法以外
2.控制循环增量/减量的代码，需要写在” 需要执行的代码”后面，如果没有就是死循环。
例如:

var  arr1=new Array(1,2,3,4,5,6);
var i=0; // 初始值
do{
	document.write("<h"+arr1[i]+">测试for循环</h"+arr1[i]+">");
	i++;
}while(i<arr1.length);

while与do{}while()的区别？
while是先判断后执行，do{}while()先执行后判断，do{}while()与while同等条件下多执行一次。
while/do{}while()与for的区别
for–在执行的时候需要明确的知道循环的次数
While()/do{}while()----不需要明确的知道循环的次数。

三斤伍花肉
关注
专栏目录
javaScript 11-14
weixin_44907496的博客
11-14 142
JavaScript_3 1.JavaScript 运算符 1.算术运算符 + 、-、*、/、%、++、–。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>算术运算符</title> <script> window.onload=function(){ //1.算术运算符 + 、-、*、/、%、++、--。 var
JS高级三
weixin_52482833的博客
03-17 765
字符串（String）对象 1.创建字符串（String）对象 字符串的数据的标志是"" / '' ; 1.1 变量即对象 var str1="hello"; alert(typeof str1); //string---基本数据类型 1.2 new String(); var str2=new String("hello"); alert(typ...
JS-3
weixin_30587927的博客
05-26 74
运算符 数学运算符 + - * / %(取模运算符) js内置一个对象叫Math,Math提供了很多关于计算的方法,常见的 // 随机数 console.log(Math.random()); // [0,1) // 假如产生1~10的整数 1<=Math.random()*10+1<11 cons...
JS-3※
qq_45882069的博客
04-29 229
1.运算符优先级： ※ 同一单元格的运算符具有相同的优先级。 ※ 左结合方向表示同级运算符的执行顺序为从左到右。 ※ 右结合方向则表示执行顺序为从右到左。 补充：圆括号()优先级别最高。 2.流程控制——选择结构 ——if单分支结构： ※ if条件判断语句也被称为单分支语句，当满足某种条件时，就进行某种处理。 ——if…else双分支语句： ※ 也称为双分支语句，当满足某种条件时，就进行某种处...
JavaScript 无符号位移运算符 >>> 三个大于号 的使用方法
weixin_34252090的博客
03-30 396
D3群里的呆神发现源码中的>>>运算符，我拿出来po一下 d3.bisector(accessor) 是一种指定参数accessor或者比较器函数返回一个二等分对象。返回的对象有left和right两个属性。分别类似于bisectLeft和bisectRight方法。这个方法适用于对象数组而不适用于原始的简单数组。 N...
javascript入门-基础语法笔记整理.md
12-14
一个周前自己较系统地学完 javascript，但老感觉自己对基础语法部分的掌握不够扎实，javascript 的基础语法内容实在是丰富灵活，但这部分是进大厂必不可缺的知识，于是花了不少时间耐心整理了这篇笔记，以此夯实基础...
js-primer：JavaScript入门-迷わないための入门书
02-04
JavaScript入门 はの书籍はECMAScript 2015以降をベースとしたJavaScriptの入门书です。 プログラミンミとがあるが，今のJavaScriptがよくわからないという人が，今のJavaScriptアプリケーションションを読み书きで...
JavaScript教程--从入门到精通.zip
09-16
本教程“JavaScript教程--从入门到精通”旨在帮助初学者全面掌握JavaScript的核心概念和技术，进一步提升至精通水平。 首先，JavaScript的基本语法是学习的起点。这包括变量、数据类型（如字符串、数字、布尔值、...
js中进行%3c php %3e,前端常见的攻击方式及预防方法
weixin_42361933的博客
04-11 953
1.XSS (Cross Site Script) ，跨站脚本攻击有句话说所有的输入都是有害的。跨站脚本是最常见的计算机安全漏洞，跨站脚本攻击指的是恶意攻击者往Web页面里插入恶意html代码，当用户浏览该页之时，嵌入的恶意html代码会被执行，对受害用户可能采取Cookie资料窃取、会话劫持、钓鱼欺骗等各种攻击。xss给人留下的印象："xss? 不就是弹出个对话框给自己看吗？"“跨站脚本是在客户...
js中.toFixed( )用法
zhouchang111的博客
12-05 2060
一，定义和用法： toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。 二，语法格式：NumberObject.toFixed(num) 参数num的简介：num规定了小数位的个数，可以是0~20之间的数，当然也包括0和20， 如果省略了参数num的话，默认的参数是0。 三，返回值介绍 返回 NumberObject 的字符串表示，小数点后有固定的 num 位...
js算数运算符
weixin_67223242的博客
06-08 415
// i++ ++i单独使用没有区别; // 如果被使用，就近原则
JavaScript（三）运算符
We_jia的博客
12-26 344
算数运算符 给定y=5 运算符 描述 例子 结果 + 加 x=y+2 x=7 - 减 x=y-2 x=3 * 乘 x=y*2 x=10 / 除 x=y/2 x=2.5 % 求余数 (保留整数) x=y%2 x=1 一元运算符 给定y=5 ++ 累加 ...
JavaScript基础大总结
m0_67401055的博客
07-30 370
浏览器分成两部分渲染引擎和JS引擎渲染引擎用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkitJS引擎也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时，注意结果）NaN。...
JS运算符
最新发布
qq_43547725的博客
10-31 932
运算符是用于执行程序代码运算，会针对一个以上操作数项目来进行运算。
JS三目运算符
weixin_69383385的博客
05-09 440
三目运算符 //判断一个人是否为成年人 var age=13; var r=age>=18 ? '成年人' : '未成年人'; console.log(r); //练习：声明变量保存用户名和密码，如果用户名是root并且密码是123abc，打印‘登录成功’，否则打印‘登录失败’； var user='root'; var password='123abc'; a=user=='root' && password=='123abc' ? '登录成功' : '登录失败'; console
js中一元操作符 （++ --） （+ - ）的一些介绍
qq_41284481的博客
12-02 475
一元操作符主要有2类 1.递增递减操作符、 主要重点：（++num 和--num是执行前置递增和递减，变量的值都是在语句被求值以前改变的。 在计算机科学领域，这种叫做副效应。） 例子1 var num=10; num++; console.log(num); 结果:11 例子2 var num=10; ++num; console.log(num); 结果也是11 ...
js中计算1~100，不能被3整除的数字的和。
qazwsx_edc1的博客
06-26 8244
var sum = 0;for(var i=1; i&lt;=100; i++){  //如果能被3整除，跳过continue  if(i%3 == 0){    continue;  }  sum += i}console.log(sum);
JavaScript高级程序设计第三章基本概念——操作符
wanzizhe的博客
02-09 294
一元操作符只能操作一个值的操作符叫一元操作符。一元操作符是ECMAScript最简单的操作符。1.递增和递减操作符(前置和后置)(1)前置递增操作符:var age = 29; ++age;//30这个前置递增操作与一下相同：var age = 29; age = age + 1;//30(2)前置递减操作符:var age = 30; --age;//29var num1 = 2; var nu...
JavaScript对象创建详解-从入门到精通
"在JavaScript中创建新对象是通过定义对象并为其创建实例来实现的。JavaScript是一种基于对象、事件驱动的脚本语言，由Netscape公司开发，它不需要编译器，直接在Web浏览器中运行，因此在Web开发中广泛应用。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值