JS移動鼠標顯示坐標，位運算符，邏輯短位運算符，逗號運算符，三元運算符【詩書畫唱】
個人對邏輯運算符的理解：
&&中只要第1個為true，就取第2個；只要第1個為false（即為空值等等），就取第1個，
||中只要第1個為false（即為空值等等），就取第2個；只要第1個為true，就取第1個。
三個邏輯運算符（&&、||、！）優(yōu)先級是：！、&& 、|| ?。
邏輯與（&&）運算原則：A && B;
當(dāng)A為true時，無論B是true或false，都會返回B。
當(dāng)A為false時，無論B是true或false，都會返回A。
邏輯或（||）運算原則：A || B;
當(dāng)A為true時，無論B是true或false，都會返回A。
當(dāng)A為false時，無論B是true或false，都會返回B。
概括：
1、用type="submit"以及type="button"自定義兩種方式實現(xiàn)注冊功能。表單中包含賬號密碼字段，并且需要進行表單驗證，賬號和密碼的長度在6到30位之間。
2、用兩種事件綁定方式實現(xiàn)按鈕點擊，顯示隱藏圖片和文本框內(nèi)容，實時打印以及移動鼠標顯示坐標的功能。（使用addEventListener進行綁定）
3、定義一個string值變量，將它包裝成引用類型，并修改它的toString方法為打印出字符串的長度。
4、創(chuàng)建一個HTML頁面，添加兩個文本輸入框，通過邏輯短位運算符（邏輯運算符和短位運算符）進行以下的操作：
如果文本框1中輸入了內(nèi)容，則使用文本框1中的內(nèi)容，如果文本框1中沒有輸入內(nèi)容，則使用文本框2中輸入的內(nèi)容。
個人理解：邏輯運算符也叫邏輯短位運算符或短位運算符。
有時代碼，思維，理解，做事，創(chuàng)作等等越簡介，證明越高效等等，證明越牛等等。
多寫個人理解，個人翻譯（一些代碼，知識點，技巧等等翻譯成自己容易懂的文字）對自己會有越來越多的各方面的好處的。
個人翻譯：input1.value是否為空？如果不為空就是true，執(zhí)行console.log(input1.value||input2.value)
||的式子中，有true就是選第1個。
?
如果input1.value不為空就是false，執(zhí)行console.log(input2.value||input1.value)
input2.value為true，
||的式子中，有true就是選第1個。
科普：
如果只要一次查找就可得到元素時，首選getXXXByXXX ；
如果需要經(jīng)過多級查找，才能得到元素時，首選querySelector；
碎碎念：其實“三元運算符”可以叫”三目運算符“。”三元表達式“，”三目表達式“等等都可以。
同時有些面試的話，是會電腦上考試或在紙上考試，默寫代碼和回答等等。
很多題目等等有歧義，不同的答案，只要是自己理解的意思，沒有錯的邏輯，給的答案也邏輯沒錯，就是對的，人生也是如此。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//+:加法運算和拼接字符串
//在做加法運算時，布爾類型的值會被自動轉(zhuǎn)換成數(shù)字0或者1
//null也會被轉(zhuǎn)換成0
console.log(1 + 2);//3
console.log(null + 3);//3
console.log(true + 2);//3
console.log(5 + false);//5
console.log(true + true);//2
//undefined可以理解為一種錯誤異常,而null表示一種確定的值
console.log(4 + undefined);//NaN
console.log(4 + null);//4
var num = 47;
// if(num % 2 == 0) {
// console.log('偶數(shù)');
// } else {
// console.log('奇數(shù)');
// }
//使用三元運算符簡化上面的代碼
//console.log(num % 2 == 0 ? '偶數(shù)' : '奇數(shù)');
//與運算的兩個變量只要有一個變量是false,結(jié)果就是false
// console.log(true && true);
// console.log(true && false);
// console.log(false && true);
// console.log(false && false);
//或運算的兩個變量只要有一個變量是true,結(jié)果就是true
// console.log(true || true);
// console.log(true || false);
// console.log(false || true);
// console.log(false || false);
//var x = 1;
//console.log(x > 2 || ++ x > 7);
//console.log(x);
//var y = 2;
//console.log(++ y < 5 && -- y > 0);
//console.log(y);
? ? //console.log(x > y || ++ x < 5);
//console.log(x);
var str = 0;
var msg = '字符串為空';
// if(str) {
// console.log(str);
// } else {
// console.log(msg);
// }
? ? ? ? ? ? //&&和||運算符的兩側(cè)的變量可以不是布爾類型
? ? ? ? ? ? //變量的值為null,undefined,'',0,NaN都可以看成是false
var s = str || msg;
//console.log(s);
var s1 = str && msg;
//console.log(s1);
//=,==,===的用法:
//=:賦值運算符,將=右邊的值賦值給左邊的變量
//==:比較運算符,會自動進行類型轉(zhuǎn)換
//===:嚴格比較運算符,不會進行類型轉(zhuǎn)換
//0,'',false用==比較的結(jié)果為true
// console.log(0 == '');
// console.log(0 == false);
// console.log(false == '');
//null,undefined用==比較的結(jié)果為true
//console.log(null == undefined);
//NaN
//console.log(NaN == NaN);//false
var p = 3;
// if(isNaN(p)) {
// console.log('p不是一個數(shù)字');
// } else {
// console.log('p是一個數(shù)字')
// }
var m = p || 'p不是一個數(shù)字';?
//console.log(m);
//當(dāng)對js中的兩個對象進行比較時,用==和===比較結(jié)果沒有任何的不同
var sr = 'test';
var o1 = new String(sr);
var o2 = new String(sr);
//console.log(o1 == o2);
//console.log(o1 === o2);
//console.log(void 4 + 5);//NaN
//,運算符的作用：
//1數(shù)組中
var arr1 = ['ONE','TWO','THREE'];
//2多個表達式計算,取最后一個表達式的值
var i = 2;
//var w = (i ++ ,i + 3,i * 2);
//console.log(w);
//console.log((i += 2,i *= 3,'最終的值是：' + i));
for(var k = 0;k < 5;k ++){}
//console.log(k);//5
var age = 21;
var stu = {
age: 18
};
with(stu){
//將window替換成了stu
//相當(dāng)于打印stu.age
//console.log(age);//18
}
//console.log(age);//21
var n = (2,4,6);
var ary = [n,(n += 1,n * 3,n / 7),5];
console.log(ary);
//n = 2,4,6;
//console.log(n);//2
//[]運算符的作用:
//1定義數(shù)組
var arr1 = ['bar','foo','mee'];
//2取對象的屬性值和數(shù)組下標
var o = {
name: 'abc'
};
var name = o['name'];
var arry = [[1][0]];
//console.log(arry);
var c = [[]['length']];
console.log(c);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
console.log(6+6)
console.log(null+6)//0+6
console.log(true+6)//1+6
console.log(false+6)//0+6
//——————————————————————
console.log(true+true)//1+1
//boolean,null等都會自動轉(zhuǎn)為數(shù)字.
console.log(4+undefined)//NaN
//undefined是代表異常和錯誤（病態(tài)的，有問題的“空”）
//——————————————————————
//三元運算符：
2==2?console.log(true):console.log(false)
//————————————————
//與運算：2個變量中只要有一個變量是flase那么，用&&后都是結(jié)果為false：
console.log(true&&false)//false
//或運算：2個變量中只要有一個變量是true那么，用&&后都是結(jié)果為true：
console.log(true||false)//true
//————————————————————————
var num=666;
console.log(++num>7||num>555)//true
console.log(num)//667
var num=666;
console.log(num>555||++num>7)//true
console.log(num)//666
//——————————————————————
str="詩書畫唱"
msg="三連"
var s=str||msg
//——>意思：如果str不為空字符串就打印msg，否則就打印msg.null,undefined，""，NaN，0就是false的意思
//前面的內(nèi)容為false才會執(zhí)行下面的
console.log(s);
str="詩書畫唱"
msg="三連"
var s=str&&msg
//——>意思：如果str為空字符串就是true，就執(zhí)行后面的
console.log(s);
//
//——————————————————————————
//=(賦值運算符),==(比較運算符會自動轉(zhuǎn)換),===(嚴格比較運算符,不會轉(zhuǎn)換):
console.log(0==false)
console.log(0=="")
console.log(0==="")
//______
var a=0
//if(a){
if(isNaN(a)){
console.log("NaN是數(shù)字")}
else{
console.log("NaN是數(shù)字")}
//_______
var s=new String("詩書畫唱")
var s0=new String("詩書畫唱")
console.log(s==s0)//————>s和s0是不同內(nèi)存地址的引用類型，打印false
//——————————
//void的優(yōu)先級更高
console.log(void(6+9))//undefined
console.log(void 6+9)//NaN
//————
var arr=["詩書畫唱","三連","關(guān)注"]
console.log(void 6+9)
//————
a = (b = 1,c = 2);? //連續(xù)執(zhí)行和賦值
console.log(a);? //返回2
console.log(b);? //返回1
console.log(c);? //返回2
//————
age=66;
console.log(age);
var s=[age=18]
with(s){
console.log(age);//使用with就是s.age的意思
}
//————
//逗號的二義性：
var a=[6,(6,9),8]//——>等價為var a=[6,9,8]
?n=2,4,6//這樣寫就是不可以加var，否則報錯
console.log(n);
//__
var b=[[1][1]]//[1][1]為undefined，因為[1]數(shù)組中的下標為1的對象不存在
console.log(b);
var b=[[1][0]]
console.log(b);
var b=[[]['length']]
console.log(b);
</script>
</head>
<body>
</body>
</html>
1、用type="submit"以及type="button"自定義兩種方式實現(xiàn)注冊功能。表單中包含賬號密碼字段，并且需要進行表單驗證，賬號和密碼的長度在6到30位之間。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="index.html" method="get" onsubmit="return abc()" id="#form">
<h2>用戶名:</h2>
<p>
<input type="text" name="username" id='username' >?
</p>
<h2>密碼:</h2>
<p>
<input type="password" name="pwd" id='pwd' >?
</p>
<!-- onclick="submitForm();-->
<button? type="submit">提交</button>
</form>
</body>
<script type="text/javascript">
?userobj=document.getElementById('username');
pwdobj=document.getElementById('pwd');
function abc()
{
// alert(userobj.value.length)
if (userobj.value.length<6||userobj.value.length>30) {
? ? ? ? alert("賬號的長度在6到30位之間");
return false;
}
if (pwdobj.value.length<6||pwdobj.value.length>30) {
? ? ? ? alert("密碼的長度在6到30位之間");
return false;
}
else{
document.getElementById('#form').submit();
return true;
}
}
// function submitForm()
// {
// document.getElementById('#form').submit();
// }
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="index.html" method="get" onsubmit="return abc()">
<h2>用戶名:</h2>
<p>
<input type="text" name="username" id='username' >?
</p>
<h2>密碼:</h2>
<p>
<input type="password" name="pwd" id='pwd' >?
</p>
<input type='submit' value='提交'>
</form>
</body>
<script type="text/javascript">
?userobj=document.getElementById('username');
pwdobj=document.getElementById('pwd');
function abc()
{
// alert(userobj.value.length)
if (userobj.value.length<6||userobj.value.length>30) {
? ? ? ? alert("賬號的長度在6到30位之間");
return false;
}
if (pwdobj.value.length<6||pwdobj.value.length>30) {
? ? ? ? alert("密碼的長度在6到30位之間");
return false;
}
else{
return true;
}
}
</script>
</html>
2、用兩種事件綁定方式實現(xiàn)按鈕點擊，顯示隱藏圖片和文本框內(nèi)容，實時打印以及移動鼠標顯示坐標的功能。（使用addEventListener進行綁定）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#img1{
display: none;
}
</style>
<script>
window.onload=function(){
?document.querySelector('#button1').addEventListener('click',
?function(){document.getElementById("img1").style.display="block";}
?);
document.querySelector('#button2').onclick = function(){
document.getElementById("input1").type="text"; }
}
function printpage()
?{
?window.print()
?}
?
?
?
</script>
<body>
<button id="button1">點擊后顯示隱藏圖片</button>
<button id="button2">點擊后顯示隱藏文本框內(nèi)容</button>
<input value="給詩書畫唱這個b站up主三連" id="input1" type="hidden"/>
<img src="../img/QQ圖片20160907203001.png" width="400px" height="400px" id="img1"/>
<input type="button" value="打印這個時候的頁面的內(nèi)容"
onclick="printpage()" />
</body>
</html>
<html>
<head>
<script type="text/javascript">
function show_coords(event){
var x = event.clientX;
var y = event.clientY;
var say = document.all("coords");
say.innerHTML = "X:"+x+" Y:"+y;
say.style.position = "absolute";
say.style.left = x + 30;
say.style.top = y;
}
</script>
</head>
<body onmousemove="show_coords(event)">
<p id="coords"></p>
</body>
<html>
3、定義一個string值變量，將它包裝成引用類型，并修改它的toString方法為打印出字符串的長度。
老師寫的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var str = 'testing';
var o = new String(str);
o.toString = function(){
return this.length;
}
//直接alert對象，其實就是調(diào)用對象的toString方法
alert(o);//7
str.toString = function(){//這段代碼是無效的
return this.length;
}
alert(str);//testing
</script>
</head>
<body>
</body>
</html>
我寫的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
? var str = '詩書畫唱';
? ?var o= new String(str);//引用類型
? ??
?
??
? ?
? ? ? ??
? ? var l=o.length;
? ? o.toString = function(){
? ? return l;
? ? }
? ? ?console.log(o.toString());
</script>
<body>
</body>
</html>
4、創(chuàng)建一個HTML頁面，添加兩個文本輸入框，通過邏輯短位運算符（邏輯運算符和短位運算符）進行以下的操作：
如果文本框1中輸入了內(nèi)容，則使用文本框1中的內(nèi)容，如果文本框1中沒有輸入內(nèi)容，則使用文本框2中輸入的內(nèi)容。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var input1=document.getElementById("input1");
var input2=document.getElementById("input2");
var r=input1.value||input2.value
console.log(r)
// console.log(input1.value||input2.value)
}
/*個人翻譯：input1.value||input2.value看成一個整體，
如果"input1.value不為空，input2.value不為空"，
或"input1.value不為空，input2.value為空"，
就是為一開始就有true的情況，就會把
input1.value的值賦值給r。
?
如果input1.value為空，，
取input2.value的值，
?
*/
</script>
</head>
<body>
邏輯與（&&）運算原則：A && B;
當(dāng)A為true時，無論B是true或false，都會返回B。
當(dāng)A為false時，無論B是true或false，都會返回A。
邏輯或（||）運算原則：A || B;
當(dāng)A為true時，無論B是true或false，都會返回A。
當(dāng)A為false時，無論B是true或false，都會返回B。
<!--<input type="text" value="" id="input1"/>-->
<input type="text" value="1" id="input1"/>
<input type="text" value="2" id="input2"/>
</body>
</html>
