--- tags: JavaScript,第一章 --- # JavaScript第一章-數據 ## 骨架 行內式、內嵌式、外聯式(跟CSS差不多) ``` // 外聯式 <html> <head> <title></title> <script src="my.js"></script> <!-- <script src="my.js">不可以在這寫程式碼了</script> --> </head> <body> 內容 <script src="my.js"></script> </body> </html> ``` JS註釋 ``` //單行註釋 ctrl + / /* 多行註釋 shift + alt + a 建議自己去設定裡面改快捷鍵 */ ``` 基礎指令 ``` <html> <head> <title></title> <script> alert(msg); //彈出警示框 console.log(msg); //控制台打印訊息 prompt(info); //彈出輸入框，用戶可以輸入 </script> </head> <body> 內容 </body> </html> ``` # 變量 ``` 打廣告 Diagram Designer 畫流程圖程式 ``` 變量是用於存放數據的容器，我們透過變量名獲取數據，甚至數據可以修改 變量命名規範 ==組成元素:英文、數字、下劃線、美元符號$== 嚴格區分大小寫:var app;和var App;是兩個變量 不能以數字開頭，不能中間有空格，寫錯會有紅色波浪線 不能是關鍵字、保留字:var、for、while name算保留字 變量名必須有意義 駝峰命名法:myFirstName 1.聲明變量 ``` var age; ``` 2.賦值 ``` age = 18; ``` 3.輸出結果 ``` console.log(age); ``` 4.變量的初始化(同時完成步驟1.2.) ``` var myname = 'pink老師'; console.log(myname); ``` ## 基礎應用 1.用戶輸入姓名，儲存到一個myname的變量裡面 ``` var myname = prompt('請輸入你的名字'); ``` 2.輸出這個用戶名 ``` alert(myname); ``` ## 變量特性 1.更新變量 一個變量被重新賦值後，他原有的值就會被覆蓋 ``` var age = 18; age = 19; ``` 2.聲明多個變量 ``` var age = 18, address = '木葉村', rmb = 2000; ``` 3.聲明變量特殊情況 情況一:只聲明不賦值 ``` var sex; console.log(sex); // 結果 // undefined ``` 情況二:不聲明不賦值 ``` console.log(telphone); // 結果 // 報錯 ``` 情況三:不聲明只賦值 ``` qq = 110; console.log(qq); // 結果(驚訝) // 110 ``` ## 交換變量 temp臨時變量 ``` var temp; var apple1 = '青蘋果' var apple2 = '紅蘋果' temp = apple1; //右邊給左邊的 apple1 =apple2; apple2 = temp; console.log(apple1); console.log(apple2); ``` # 數據 ``` var num = 10; //數字型 var str = 'pink' //字符串 // 變量重新賦值 var x = 10; //x是數字型 x = 'pink'; //x是字符串 ``` ## 數據類型 number 數字型 包含整數與浮點數 默認值 = 0 ``` // 數字前面加0表示八進制 var num1 = 010 console.log(num1); // 打印出轉換成10進制的值 // 數字前面加0x表示十六進制 var num2 = 0xa console.log(num2); // 打印出轉換成10進制的值 ``` ``` // 數字型最大值 // 注意大小寫都要吻合 console.log(Number.MAX_VALUE); // 數字型最小值 // 注意大小寫都要吻合 console.log(Number.MIN_VALUE); // 無窮大 console.log(Number.MAX_VALUE * 2); // Infinity 無窮大 // 無窮小 console.log(-Number.MAX_VALUE * 2); // -Infinity 無窮小 ``` NaN ``` // 非數字 console.log('pink老師' - 100); /// NaN 非數字 ``` boolean 布林值 就是true和false 默認值 = false ``` console.log(isNaN(12)); //false console.log(isNaN('pink老師')); //true ``` string 字符串 默認值 = "" 用雙引號和單引號都可以 因為HTML都用雙引號 所以在JS裡面都用單引號比較好 ``` 外單內雙、外雙內單 var str1 = '我是一個"高富帥"程序員'; console.log(str1); var str2 = "我是一個'高富帥'程序員"; console.log(str2); ``` 字符串轉譯字符 ``` \n 換行符 n是newline \\ 一個斜槓\ \' 單引號 \" 雙引號 \t tab縮進 \b 空格 b是blank ``` Undefined var a; 聲明變量a但是沒有給值 默認值 = undefined ``` ``` Null var a = null; 聲明變量a為空值 默認值 = null ``` ``` ## 簡單數據應用 ### 算字符串長度 ``` var str = 'my name is andy'; console.log(str.length); //結果是15，空格和標點符號也算一格 ``` ### 字符串拼接 字符串 + 任何類型 = 新字符串 ``` console.log('沙漠' + '駱駝'); //沙漠駱駝 console.log('pink老師' + 18); //pink老師18 console.log('pink' + true); //pinktrue console.log(12 + 12); //24 console.log('12' + 12); //1212 // 進階 console.log('pink老師' + 18); console.log('pink老師' + 18 + '歲'); var age = 18 console.log('pink老師age歲'); console.log('pink老師' + age + '歲'); ``` ==基本練習== ``` var age = prompt('請輸入你的年齡'); var str = '你今年已經' + age + '歲了'; alert(str); ``` ### 特殊值運算 true參與加法運算當1 false參與加法運算當0 ``` var flag1 = true; var flag2 = false; console.log(flag1 + 1); // 2 console.log(flag2 + 1); // 1 ``` undefined和數字相加結果是NaN ``` var str; console.log(str); // undefined var variable = undefined; console.log(variable + 'pink'); // undefinedpink console.log(variable + 1); // NaN ``` null空值 ``` var space = null; console.log(space + 'pink'); //nullpink console.log(space + 1); // 1 ``` ### 檢測變量數據類型 ``` var num = 10; console.log(typeof num); //number //chrome的顏色紫色 var str = 'pink'; console.log(typeof str); //string //chrome的顏色黑色 var flag = true; console.log(typeof flag); //boolean //chrome的顏色藍色 var vari = undefined; console.log(typeof vari); //undefined //chrome的顏色灰色 var timer = null; console.log(typeof timer); //object //chrome的顏色灰色 //prompt取過來的值是字符型的 var age = prompt('請輸入你的年齡'); console.log(age); console.log(typeof age); 字面量 數字字面量:8 9 10 字符串字面量:'黑馬程序員' "大前端" 布林值字面量:true false ``` ## 普通數據應用 ### 轉換 轉換為字符串 ``` toString() var num = 1; alert(num.toString()); String()強制轉換 var num = 1; alert(String(num)); 加號拼接字符串 var num = 1; alert(num + '我是字符串'); ``` ``` var num = 10; var str = num.toString(); console.log(str); console.log(typeof str); console.log(String(num)); console.log(num + ''); ``` 轉換為數字型 ``` var age = prompt('請輸入你的年齡'); //1.parseInt可以把字符型轉換為數字型 得到是整數 console.log(parseInt(age)); console.log(parseInt('3.14')); // 3 取整 console.log(parseInt('120px')); // 120 會把後面文字去掉 console.log(parseInt('rem120px')); //NaN //2.parseFloat可以把字符型轉換為數字型 得到是浮點數 console.log(parseFloat('3.14')); // 3.14 console.log(parseFloat('120px')); // 120 會把後面文字去掉 console.log(parseFloat('rem120px')); //NaN //3.利用Number(變量) var str = '123'; console.log(Number(str)); console.log(Number('12')); //4.利用算式運算(減乘除) 隱式轉換 console.log('12' - 0); // 12 console.log('123' - '120'); // 3 ``` 轉換為布林值 ``` // 只有5種狀況是false console.log(Boolean('')); //false console.log(Boolean(0)); //false console.log(Boolean(NaN)); //false console.log(Boolean(null)); //false console.log(Boolean(undefined)); //false // 隨便舉例 console.log(Boolean(123)); //true console.log(Boolean('123')); //true console.log(Boolean('小白')); //true ``` ==基本練習== ``` var year = prompt('請輸入你的出生年份'); var age = 2018 - year; //隱式轉換 alert('你今年已經'+age+'歲了'); ``` ``` var num1 = prompt('請你輸入第一個值: '); var num2 = prompt('請你輸入第二個值: '); var result = parseFloat(num1) + parseFloat(num2); alert('你的結果是:' + result); ``` ### 算術運算符 ``` console.log(1 + 1); //2 console.log(1 - 1); //0 console.log(1 * 1); //1 console.log(1 / 1); //1 //取餘 console.log(4 % 2); //0 console.log(5 % 3); //2 console.log(3 % 5); //3 //浮點數 算術運算會有問題 console.log(0.1 + 0.2); //超長數字 console.log(0.07 * 100); //超長數字 //不能拿浮點數來進行相比較 var num = 0.1 + 0.2; console.log(num == 0.3); //false ``` ### 遞增運算符 ``` var num = 1; num = num + 1; console.log(num); //2 ``` 遞增遞減運算符必須和變量一起寫才能用 ``` 前置遞增運算符 var age = 10; ++age; console.log(age); //11 //先加1後返回值 var p = 10; console.log(++p + 10); //21 ``` ``` 後置遞增運算符 var num = 10; num++; console.log(num); //11 //先返回原值後自加 var age = 10; console.log(age++ + 10); //20 console.log(age) //11 ``` 例題一 ``` var a = 10; ++a; var b = ++a + 2; console.log(b); //14 ``` 例題二 ``` var c = 10; c++; var d = c++ + 2; console.log(d); //13 ``` 例題三 ``` var e = 10; var f = e++ + ++e; //1. e++ = 10 e = 11 2. e = 12 ++e = 12 console.log(f); //22 ``` 實際開發常用後置遞增 讓代碼獨佔一行 不會邊++邊做其它運算 ### 比較運算符 比較運算後會返回一個布林值 ``` < 小於號 > 大於號 <= 小於等於 >= 大於等於 == 判等號 != 不等號 === 全等號 console.log(18 == '18'); //true ``` ### 邏輯運算符 ``` //1.邏輯與 && 兩側都為true 結果才是true console.log(3 > 5 && 3 > 2); //false console.log(3 < 5 && 3 > 2); //true //2.邏輯或 || 兩側都為false 結果才是false console.log(3 > 5 || 3 > 2); //true console.log(3 > 5 || 3 < 2); //false //3.邏輯非 ! console.log(!true); //false ``` 短路運算 參考"轉換為布林值" 只用值或表達式參與邏輯運算 ``` //1.邏輯與 //如果第一個表達式為真，則返回表達式2 //如果第一個表達式為假，則返回表達式1 console.log(123 && 456); //456 console.log(0 && 456); //0 console.log(0 && 1 + 2 && 456 * 56789); //0 ``` ``` //2.邏輯或 //如果第一個表達式為真，則返回表達式1 //如果第一個表達式為假，則返回表達式2 console.log(123 || 456); //123 console.log(123 || 456 || 456 + 123); //123 console.log(0 || 456 || 456 + 123); //456 ``` ==邏輯或混合加法陷阱== ``` var num = 0; console.log(123 || num++); //123 // 因為已返回123，所以後面的東西都不運算了 console.log(num); //0 ``` ### 賦值運算符 ``` var num = 10; // num = num + 1; num++ // num = num + 2; num += 2 += -= *= /= %= ``` ### 運算符優先級 | 運算符 | 優先級 | 順序 | | ------ | ---------- | ------------ | | 1 | 小括號 | () | | 2 | 一元運算符 | ++ - - ! | | 3 | 算術運算符 | 先* / %後+ - | | 4 | 關係運算符 | > >= < <= | | 5 | 相等運算符 | == != === !== | | 6 | 邏輯運算符 | 先&&後ll | | 7 | 賦值運算符 | = | | 8 | 逗號運算符 | , |