【前端学习】全面js学习第二天

逻辑判断

	function query(name){
		return document.querySelector(`[name='${name}']`);
	}
	//querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。
	let inputs =  document.querySelectorAll(
	"[name = 'password'],[name='confirm_password']");
	//map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。map() 方法按照原始数组元素顺序依次处理元素。
	[...inputs].map(item=>{
		item.addEventListener('keyup',function(){
			let msg = "";
			if(query('password').value!=query
			('confirm_password').vlaue){
				msg = "两次密码不一致"
			}
			query("msg").innerHTML = msg;
		});
	});

三元表达式

• 三元表达式里面还能套三元表达式 （不建议使用）
• 用true或false判断 （0是false 1 是true）

// let hd = false?2:5;
// let hd = 2 ? (3 ? "子的三元表达式" : "js全面") : 5;
// console.log(hd);

//在div方法里 创建一个options对象
function div(options={}){
        //createElement() 方法通过指定名称创建一个元素
	let div = document.createElement("div");
        //div的宽度是 = 如果options对象有值就是这个值 否则 就是200px
	div.style.width = options.width?
	options.width :"200px";
	div.style.height = options.height?
	options.height :"200px";
	div.style.backgroundColor = options.backgroundColor?
	options.backgroundColor :"red";
	document.body.appendChild(div);//添加项目
}
//传入div方法里的options对象里面
div({width:"300px"});

使用ifelse判断密码强度

<input type="password" name="password" />//密码框
<span id="msg"></span>
<script type="text/javascript">
document.querySelector("[name='password']")//找到节点
.addEventListener('keyup',function(){//键盘触发方法
	let length =  this.value.length; //获取value的长度
	let span = document.querySelector('#msg'); //找到#msg节点
	let msg =""; //创建空字符变量
	if(length>10){ //if判断
		msg = '密码无敌安全';
	}else if(length>6){
		msg = '中级密码强度';
	}else{
		msg = '你这什么烂密码';
	}
	span.innerHTML = msg;//给span变量就是#msg 的html内容改为msg
})

用for打印杨辉三角

<style>
	span{
		color: white;
	}
</style>
<script type="text/javascript">
//row = 5 是默认值
function hd(row = 5){
        //这个for是遍历多少次
	for(let i=0;i<row;i++){
                 //这里的for是占位的n--从大到小遍历
		 for(let n = row-i;n>0;n--){
			 document.write("<span>*</span>");
		 }
                 //这里就遍历出三角形了
		 for( let m = i*2-1;m>0;m--){
			 document.write('*');
		 }
		 document.write('<br/>');
	}
}
hd(20);//传入形参
</script>

类型判断

//typeof 判断是什么类型 instanceof判断在原型链上是否有没有  返回布尔值
let hd = [];
let hdcms = {};
console.log(typeof hd);
console.log(hd instanceof Array);

function User(){}
let xj = new User();
console.log(xj instanceof Array);

dowhile循环实例操作

function star(row =5){
	let start = 0;
	//do不判断条件先执行
	do{
		let n=0;
		do{
			document.write('*');
		}while(++n<start);
		document.write("<br/>");
	}while (++start <= row);
}