账号: <input type="text"> <br>
密码: <input type="text"> <br>
<button>注册</button>
<script>
// 利用短路求值的特点,给变量进行赋值
// 一般是如果变量没有数值的情况下,我们给赋值一个默认值
// 举一个简单的例子
// 例如,input数据数据,如果没有填写数据,我们可以定义一个默认值数据
// 如果不输入密码,我们设定密码的默认值是 666666 6个6
var oBtn = document.querySelector('button');
/*
oBtn.onclick = function(){
var num1 = document.querySelectorAll('input')[0].value;
// 执行过程
// document.querySelectorAll('input')[1].value 是 获取input标签中 输入的数据数值
// 如果 有输入的的数据数值 '123456'
// 逻辑表达式是 '123456' || '666666'
// 逻辑表达式,要判断,两个表达式是false,还是true
// 也就是会将 '123456' 和 '666666' 自动转化为 布尔类型 来进行判断 决定整个逻辑运算符的最终结果
// 只是将 '123456' 自动转化为 布尔类型看看 并不是真的就把 '123456' 变成了 布尔值
// 自动转化为false的情况只有五种 数值0 空字符串 undefined null NaN
// '123456' 如果 自动转化为 布尔类型是 true
// 逻辑运算符第一个表达式的结果是 true
// 逻辑或 第一个表达式 结果是 true 会引发短路求值,第二个表达式不会执行
// 给 num2 赋值的数值是 '123456'
// 当 document.querySelectorAll('input')[1].value 没有输入内容时
// 获取到的结果是 '' 空字符串
// 逻辑运算符,实际是 '' || '666666'
// 第一个表达式是 '' 空字符串 自动转化为布尔类型 false
// 第一个表达式是 false , 不能决定逻辑或表达式的整个的结果
// 第二个表达式就要执行
// 因此给 num2 赋值 先赋值 空字符串 再赋值 '666666'
// 等于进行重复赋值,num2中最终存储的是 '666666' 数值
// 也就是 第一个表达式,如果自动转化为布尔类型false,第二个表达式执行
// 最终赋值的数值,是第二个表达式的数值
var num2 = document.querySelectorAll('input')[1].value || '666666' ;
// 在模板字符串中,解析变量的语法规范
// 在模板字符串中 使用 ${} 包裹变量,这样就会解析变量中存储的数值,输出到字符串中
console.log(`账号是:${num1},密码是:${num2}`);
}
*/
// 如果是if判断语句怎么写
oBtn.onclick = function(){
var num1 = document.querySelectorAll('input')[0].value;
var num2 = document.querySelectorAll('input')[1].value;
// 判断如果 num2 是 空字符串,也就是没有输入数据
// 就给 num2 进行赋值操作
// 没有else,也就是 不是空字符串的时候,不做任何操作
if(num2 == ''){
num2 = '666666';
}
console.log(`账号是:${num1},密码是:${num2}`);
}
// 总结
// var 变量 = 逻辑运算符
// 如果 逻辑运算符 出现短路求值情况,只执行了第一个表达式
// 只会给变量赋值 第一个表达式 的数值
// 如果没有触发短路求值,两个表达式都执行了
// 会给变量先赋值第一个表达式的数值,再给变量赋值第二个表达式的数值
// 变量中最终存储的是表达式2的数值
// 总之,不管是 逻辑或 还是 逻辑与
// 执行第一个表达式,赋值第一个表达式的数值
// 执行两个表达式,最终存储的是第二个表达式的数值