Python web前端 06 运算符 循环
一、运算符
#JS六大数据类型 #number 数字 #string 字符串 #boolean 布尔型 #function 函数 #undefined 未定义:一个变量声明之后没有复制就是未定义 #object 对象 在JS里面null属于对象类型,但是它不具有很多对象的共性,所以很多资料将他归为单独一类数据类型null var a = 11;#number var a = "aaa";#string js里面双引号的地方也可以用单引号来代替,不过要配对使用 var a = true;#boolean var a = function(){...} #function var a ;#undefined alert(typeof a)#弹窗a的类型 var a = {"name":"xiaopo","age"= "18"};#object var a = document.getElementById("box");#object
运算符
#算数运算符(基础数字运算) + - * / %(取余) #当不是数字之间的运算的时候 #+号两边一旦有字符串(引号引起来的一坨),那么+号就不在是数学运算了,而变成了字符串拼接,最后结果是字符串 #-*%号是尽量将字符串转化成数字(隐式类型转换) 隐式类型转换:即使结果不是数字,也会对这个结果进行隐式类型转换,将他的类型转换为数字
赋值运算符
+= -= *= /= %=#跟其他脚本语言一样 ++ -- #两个都存在隐式类型转换,会全部转换为数字 var x=6; var y=++x; ++x #x=x+1 y=x 先加再赋值 x++ #y=x x=x+1 先赋值再加
逻辑运算符
#针对布尔值 true false #&& 与两边都为真,结果才是真,其他是假 #|| 或 两边都为假,结果才是假,其他是真 #! 非 取反,真变假,假变真 #当逻辑运算符,两边不一定是布尔值的时候 #&&遇到假就停,但是不会进行类型转 换 var a = true&&1&&0&&false #弹窗弹出0(0代表假) var a = true&&1&&1&&false #弹出false var a= true&&1&&-2&&5 #弹出5 #|| 遇到真就停,但是不会进行类型转换(假同上) #!隐式类型转换,将后面的数据先转换为布尔型在取反 var a =!"0" #0是假的,转换为假后再取反,就是真 var a =!"5" # 假
二、循环
1、for循环
#for循环 for(var = 1;i<9;i++){ console.log(i) } #顺序依次是1、var=1 ;2、i<9 ; 3、 console.log(i) ; 4、i++ 直至条件2不满足的时候跳出循环
2、嵌套循环
for (var i =1;i<5;i++){ for(var j=1;j<3;j++){ console.log(i+";"+j); } } for(var=1;i<20;i++){ if(i==5){ break;#中断循环,终止循环,结束循环,未执行的代码不执行 continue;#跳出本次循环 } console.log(i) ; }
<ul> <li></li> <li></li> <li></li> <li></li> </ul> <script> var aLi=document.getElementByTagName("li") for(var i=0,len=ali.length;i<len;i++){ aLi[i].onclick=function{ alert(i);#照常理来说,鼠标点击的li,就会弹出一个弹窗表示他的下标,但是由于这是个函数的缘故,所以弹出来的都是函数结束时的值(也就是for循环结束时i的值4),这就满足不了需求 } } </script> <script> var aLi=document.getElementByTagName("li") for(var i=0,len=ali.length;i<len;i++){ aLi[i].index=i;#index是自定义变量(可以是任何值aa,bb,vv),将每次循环的i赋值给自定义变量index aLi[i].onclick=function{ alert(this.index);#循环结束时的i } } </script> #以后再写for循环的时候,循环里面如果有事件,就必须要赋值变量,用自定义变量存起来,不然打印出来的就是整个函数结束的i
let
<ul> <li></li> <li></li> <li></li> <li></li> </ul> <script> var aLi=document.getElementByTagName("li") for(let i=0,len=ali.length;i<len;i++){ aLi[i].onclick=function{ alert(i); } } </script> #直接用let取代var就可以直接满足要求了
3、if循环
#if ==>布尔值 #判断符 > < >= <= == != !== === == #只判断是否一样 "5"=5 === #不仅判断值,还判断类型是否一样 "5"===5 false #当if的条件 运算完后不是布尔型的时候,会强制类型转换为布尔值 #以下这些值在转换以后为false #0(number); false(boolean); ""(string) ;null(object/null);undefined(undefined);NaN(number) #NaN:Not a Number 属于number类型,一般在非法运算的时候才会出现NaN, isNaN(参数)非常讨厌数字 #首先尽量把参数转换为数字,然后当参数是数字,返回false;不是数字,返回true #在if里面,能用布尔值做条件判断的时候,不要用其他的来代替,因为强制数据转换需要耗费时间,在两个值比较的时候,能用三等判断的时候,就用三等判断
if(""){ alert("真");#条件为真的时候执行 }else{ alert("假");#条件为假的时候执行;当只需要真语句的时候,假语句可以不写 } #如果想要假的时候执行,真的时候不执行,在if条件里面加个!(取反)即可 #还有下面两种形式来表示 9>8?alert(1):alert(0);# 条件?真语句:假语句 这便是三目运算 x=5>3?5:3; #如果5大于3,那么x等于5,否则x=3 var x=20; if(x>20){alert("x>20");} else if(x>15){alert("x>15");}#弹窗淡出x>15,这里弹出以后,下面满足条件的不会执行了 else if(x>10){alert("x>10");} else{alert(x<0);}
4、switch
var name="xiaopo"; if(name==="xiaopo"){alert(name+"好漂亮");} else if(name==="小狗"){alert(name+"好帅");} else if(name==="小猫"){alert(name+"好丑");} else{alert(name+"你是谁");} #switch就可以同样实现上面的功能 var name="xiaopo" switch(name){ case"xiaopo":#这里加条件 alert(name+"好漂亮"); break;#必须加上break,跳出这个循环 case"小狗": alert(name+"好帅"); break; case"小狗": alert(name+"好丑"); break; default: alert(name+"你是谁"); break; }
while和dowhile
var i = 1; for(;i<9;){#分号必须写 console.log(i); i++; } #while类似上面 var i=1;#先判断后执行 while(i<9){ console.log(i); i++; } var i=10;#这个dowhile循环先执行在判断,至少会执行一次 do{ console.log(i); i++; }while(i<9);
9*9乘法表
var oBox=document.getElementById("box"); for(var i=1;i<10;i++){ for(var j=1;j<i;
var aUl=document.getElementsByTagName("ul"); var len=aUl.length; var index=0; for(var i =0;i<len;i++){ aUl[i].qq=i; aUl[i].onclinck=function(){ aUl[index].className=""; index=this.qq; aUl[index].className="show"; } }
j++){ oBox.innerHTML+="<span>"+i+"*"+j+"="+i*j+"</span>"; } oBox.innerHTML+="<br>"; }
下拉菜单