JavaScript是什么
Netscape在最初將其腳本語言命名為LiveScript,后來Netscape在與Sun合作之后將其改名為JavaScript,JavaScript最初受Java啟發而開始設計的,目的之一就是“看上去像Java”,因此語法上有類似之處,一些名稱和命名規范也借自Java,JavaScript與Java名稱上的近似,是當時Netscape為了營銷考慮與Sun微系統達成協議的結果,Java和JavaScrip只是名字很像,
Java 服務器端的編程語言
JavaScript 運行在客戶端(瀏覽器)的編程語言
JavaScript是一種運行在客戶端 的腳本語言 JavaScript的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用于客戶端的腳本語言,最早是在HTML(標準通用標記語言下的一個應用)網頁上使用,用來給HTML網頁增加動態功能,
JavaScript和HTML、CSS的區別
-
HTML:提供網頁的結構,提供網頁中的內容
-
CSS: 用來美化網頁
-
JavaScript: 可以用來控制網頁內容,給網頁增加動態的效果
第一個JavaScript程式
在HTML頁面中添加
<title>Document</title>
<script>
window.onload=function(){
for(var i = 0;i < 10;i ++){
document.write("<p>我要中獎500W!<p>");
}
}
</script>
運行頁面查看效果,
JavaScript的書寫位置
-
寫在行內
<input type="button" value=https://www.cnblogs.com/xiaoxiaodeboke/p/"按鈕" onclick="alert('Hello World')" />
-
寫在script標簽中 script可以寫在HTML頁面的任何位置,
<head>
<script>
alert('Hello World!');
</script>
</head>
-
寫在外部js檔案中,在頁面引入
<script src=https://www.cnblogs.com/xiaoxiaodeboke/p/"main.js"></script>
tips:參考外部js檔案的script標簽中不可以寫JavaScript代碼
變數
什么是變數
變數是存盤資料的最小單元,
就是可以變化的量,
程式在計算的時候,是CPU從記憶體中獲取資料,進行計算,計算完成之后再將資料寫入內容,
資料是存盤在記憶體中的,記憶體可以認為是一個陣列(表格),表格的每一個單元格都是有序號的,任何資料存在記憶體中都有一個開始的位置和結束的位置,
變數就是在記憶體中開辟空間,存盤要計算的資料,為了方便操作這個資料,給這個空間起一個別名,
別名+空間+資料 = 變數,
別名:變數名,
資料:變數的值,
空間:根據變數的資料型別開辟的,
變數的使用
tips: JS是嚴格區分大小寫,
tips:js是弱資料型別,所以在申明變數的時候不需要申明資料型別,在做賦值運算的時候,會自動根據賦值的型別確定變數的資料型別,
-
var宣告變數
var age;
任何型別的變數(物件)都是使用var/let,在申明變數的時候不需要注明資料型別,
-
變數的賦值
var age;
age = 18;
在賦值的時候才確定資料型別,也就是說,一個變數可以賦任何型別的資料,
-
同時宣告多個變數
var age, name, sex;
age = 10;
name = 'mingren';
-
同時宣告多個變數并賦值
var age = 10, name = 'kakaxi';
-
如果一個變數沒有賦值,則默認值是:undefined
//將一個沒有賦值的變數輸出到控制臺
var tel;
console.log(tel);// undefined
-
如果一個變數沒有申明,就直接使用,會出錯,
console.log(a);//出錯 : a is not defined
控制臺的使用
現在的主流瀏覽器中都有JS的控制臺,
都是打開瀏覽器之后,按:F12,
// 如果申請了一個變數是沒有賦值的,則這個變數的值默認是undefined
var job;
// alert(job);
// 在控制臺輸出內容
// 直接輸出字串
console.log("我是一個直接輸出的字串");
// 輸出一個變數的值,直接寫變數的名字,不需要引號
console.log(c);
console.log(job);
console.log(type);
變數的命名規則和規范
規則:法律,不能觸犯
①不能是JS的關鍵字和保留字符,
錯誤示例:var var ; var int ;
②不能以數字開頭,(可以以數字結尾,或者中間有數字)
錯誤示例: var 0abc; var 10name;
正確示例: var name0; var stu10score;
③不能有特殊符號(特殊符號一般都是運算子和空字符)可以有“_”"$/¥" 也可以是中文(我建議使用拼音),
錯誤示例: var name+score; var name score;
1、js中的關鍵字:
break case catch continue default delete do else finally for function if in instanceof new return switch this throw try typeof var void while with
2、js中的保留字:
abstract boolean byte char class const debugger double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatile
規范:
①言簡意賅,
錯誤示例: var a , c , def;
正確示例: var name; age; score;gender;tel;
②符合駝峰規則,
如果變數由一個單詞組成,則所有的字母小寫,
如果由多個單詞組成,則除過第一個單詞之外,其他的單詞的首字母都要大寫,其余的字母小寫,
案例:var stuScore; var teacherTel;
如果是簡稱 就全部小寫,
資料型別
tips:弱資料型別不代表沒有資料型別,
下面我們就來看看js的資料型別,
簡單資料型別
Number、String、Boolean、Undefined、Null
Number型別
-
數值字面量:數值的固定值的表示法
110 1024 60.5
-
進制
十進制
var num = 9;
進行算數計算時,八進制和十六進制表示的數值最終都將被轉換成十進制數值,
十六進制
var num = 0xA;
數字序列范圍:0~9以及A~F
八進制
var num1 = 07; // 對應十進制的7
var num2 = 019; // 對應十進制的19
var num3 = 08; // 對應十進制的8
數字序列范圍:0~7
如果字面值中的數值超出了范圍,那么前導零將被忽略,后面的數值將被當作十進制數值決議
-
浮點數
-
浮點數的精度問題
-
浮點數 var n = 5e-324; // 科學計數法 5乘以10的-324次方 浮點數值的最高精度是 17 位小數,但在進行算術計算時其精確度遠遠不如整數 var result = 0.1 + 0.2; // 結果不是 0.3,而是:0.30000000000000004 console.log(0.07 * 100); 不要判斷兩個浮點數是否相等
-
數值范圍
最小值:Number.MIN_VALUE,這個值為: 5e-324 最大值:Number.MAX_VALUE,這個值為: 1.7976931348623157e+308 無窮大:Infinity 無窮小:-Infinity
-
數值判斷★★★★★★★★★
-
NaN:not a number
-
NaN 與任何值都不相等,包括他本身
-
-
isNaN: is not a number
-
關于NaN和isNaN的使用:
NaN是一個型別,表示不是數字,
isNaN是一個函式,判斷一個數字是否是NaN,
//這是一個錯誤的運算
var x = 10 - "Ⅹ";
console.log(x);// NaN
var r = isNaN(x);
console.log(r);// true
String型別
'abc' "abc"
tips:在javaScript中的單引號和雙引號是沒有區別的, 再理解就是沒有字符和字串的區分,
一個字串可以是空的,也可以是很長,
請問String 有沒有長度限制?
理論上沒有,實際上有,
Boolean型別
-
Boolean字面量: true和false,區分大小寫
-
計算機內部存盤:true為1,false為0
tips:js中的元素只要存在就是true,不存在就是false,
在JS中字串 "" 表示 false, “123”表示true , 0表示false,非0表示true,
看一個案例:
var a = new Object();//這里的a可以賦值為任何型別
if(a){
console.log("a");
}else{
console.log("no a");
}
Undefined和Null
-
undefined表示一個宣告了沒有賦值的變數,變數只宣告的時候值默認是undefined
-
null表示一個空,變數的值如果想為null,必須手動設定
var student;
var person = null;
console.log(student);// undefined
console.log(person);// null
獲取變數的型別
typeof
console.log(typeof car) // object
console.log(typeof person) // object
console.log(typeof x) // number
console.log(typeof "haha")// string
注釋
單行注釋: //
多行注釋:
/* * 多行注釋 * */
資料型別轉換
轉換成字串型別
-
toString()
var num = 5; console.log(num.toString());
-
String()
String()函式存在的意義:有些值沒有toString(),這個時候可以使用String(),比如:undefined和null var u;// undefined console.log(typeof u); // u = u.toString();// undefined沒有toString方法 u = String(u); // tips這里的s要大寫 console.log(typeof u);
-
拼接字串方式
num + "",當 + 兩邊一個運算子是字串型別,一個運算子是其它型別的時候,會先把其它型別轉換成字串再進行字串拼接,回傳字串
轉換成數值型別
-
Number()
Number()可以把任意值轉換成數值,如果要轉換的字串中有一個不是數值的字符,回傳NaN var score = "98.5a"; console.log(typeof score);// string console.log(score);// 98.5a score = Number(score); console.log(typeof score);// number console.log(score);// NaN
TIPS:使用Number()進行轉換,字串必須是數字形式, “123”,“95.2” 非數字形式:“32.9A”“abc123” 如果是非數字形式就轉換為NaN
-
parseInt()
var num1 = parseInt("12.3abc"); // 回傳12,如果第一個字符是數字會決議直到遇到非數字結束 var num2 = parseInt("abc123"); // 回傳NaN,如果第一個字符不是數字或者符號就回傳NaN /// 案例1 var score = "98.9"; console.log(typeof score);// string console.log(score);// 98.9 score = parseInt(score);// 將字串轉化為整數 console.log(typeof score);// number console.log(score);// 98 tips: 如果有小數部分,直接拋棄, // 當字串是非數字形式的時候, var score = "98a89"; console.log(typeof score);// string console.log(score);// 98a89 score = parseInt(score);// 將字串轉化為整數 console.log(typeof score);// number console.log(score);// 98 // 如果字串中間出現了非數字,則從非數字字符往前會轉換為整形,其他的字符直接拋棄,如果第一個字符就是非數字,則直接轉換為NaN -
parseFloat()
parseFloat()把字串轉換成浮點數 parseFloat()和parseInt非常相似,不同之處在與 parseFloat會決議第一個. 遇到第二個.或者非數字結束 如果決議的內容里只有整數,決議成整數 var score = "98.89.56"; console.log(typeof score);// string console.log(score);// 98.89.56 score = parseFloat(score);// 將字串轉化為Float console.log(typeof score);// number console.log(score);// 98.89
-
+,-0等運算
var str = '500'; console.log(+str); // 取正 console.log(-str); // 取負 console.log(str - 0);
tips:當使用字串和數字進行數學運算的時候,如果沒有歧義(+可以鏈接字串),會自動將字串轉換為數字,如果字串不是純的數字形式,最終的結果就是NaN,
轉換成布爾型別
-
Boolean()
0 ''(空字串) null undefined NaN 會轉換成false 其它都會轉換成true
運算子(運算子)
運算子 operator
5 + 6
運算式 組成 運算元和運算子,會有一個結果
算術運算子
+ - * / %
和數學中表達的意思是一樣的,
+特殊情況: 當兩個字串使用+連接的時候,會作為字串連接,
對了還是有點區別的:
兩個字串也許是可以作任何算數運算的,如果是“+”有可能會出現字串連接,
var score1 = "23"; var score2 = "25"; // 字串連接 var score = score1 + score2;// 2325 console.log(score); // 轉換再運算, score = eval(score1)+eval(score2); console.log(score); score = parseInt(score1) + parseInt(score2); console.log(score); // 其他的運算,如果運算元不出現非數字形式的字串,都會自動轉換 score = score1 - score2; console.log(score); // 如果運算元出現非數字形式,最終結果都是NaN score = score1 - "123a"; console.log(score);// NaN
一元運算子
一元運算子: ++ -- (常常被稱為自加自減),
用法:
var x = 10; x ++; // 11 給自己+1,
++和--在運算元的前后是有區別的,
試題:
15 var x = 2; 16 var j = x ++; x和j分別是多少? x = 3; j = 2;
tips: 任何時候使用++和--無論在前還是在后,一旦程式執行之后,被運算元肯定+1或者-1了,
++在前,先++后運算, ++在后,先運算后++;
j = x ++; 先把x的值賦值給j,再給x++; j = ++ x; 先把x++ 再賦值給j,
案例: var x = 2; j = x ++ + 4; y = ++ x + 5; 上面的情況 x = 4; j = 6; y = 9;
試題:
var x = 3; y = x ++ + ++ x; 結果: x = 5; 運算程序: 先計算++x,x=4; 繼續計算 x + x (4 + 4),接下來就是賦值,所以y是8, 接下來執行 x ++;x = 5;
試題:交換兩個變數的值,
var x = 3;y = 4;
中間變數做法:
var t = x;
x = y;
y = t;
在不使用中間變數的情況下的做法:
x = x + y;
y = x - y;
x = x - y;
關系運算子(比較運算子)
任何時候一個運算式中只要出現了 “ 關系運算子 ”,那么這個運算式的結果必然是一個boolean值,
< > >= <= == != === !== ①絕對不能出現等于大于 >= 也不能出現 等于小于 ②比較兩個變數的值是否相等,使用 == 是否不相等使用 != ③比較兩個變數的值和型別是否相等,使用 ===
==與===的區別:==只進行值得比較,===型別和值同時相等,則相等 var x = 10; var y = 9 var result = x > y; console.log(result); // < >= <= 都是一樣的, // 如果是字串.... var name = "卡卡西"; var name1 = "佐助"; result = name < name1; console.log(result); // 數字形式的字串直接按照數字處理, var score = "98.5" var score1 = 98.5; console.log(score >= score1); // 運算子 == 和 != var s1 = "abc"; var s2 = "abc"; console.log(s1 == s2);// true console.log(s1 != s2);// false var c1 = "95.8"; var c2 = 95.8; console.log(c1 == c2);// true var c3 = "abc" - 98; var c4 = "def" * 95; console.log(c3 == c4);// false 所有的NaN == 的結果都是false, // 運算子 === (要求值和型別完全一致,才是true) var c1 = "95.8"; var c2 = 95.8; console.log(c1 === c2);// false console.log(c1 !== c2);// true
邏輯運算子(布爾運算子)
邏輯運算子主要用來鏈接或者操作一個或多個結果為布林值的運算式,
&& 與 兩個運算元同時為true,結果為true,否則都是false || 或 兩個運算元有一個為true,結果為true,否則為false ! 非 取反
案例:
var score1 = 90; var score2 = 80; // 兩個條件同時是true var result = score1 >= 85 && score2 >= 85; console.log(result); // 兩個條件滿足一個即可 result = score1 >= 90 || score2 >= 90; console.log(result); // 邏輯非 ! 取反 優先級賊高 result = !(score1 >= 90) || score2 >= 90; console.log(result); result = !(score1 >= 90 || score2 >= 90); console.log(result);
邏輯運算子連或者操作的運算式肯定是boolean型別的運算式, 任何一個運算式如果出現了邏輯運算子,結果肯定也是boolean值,
短路情況:
(筆試面試常考的細節)
// 特殊情況 var score1 = 90; var score2 = 80; var a = 10; result = score2 > 85 && (a = score1) > 85; console.log(result);// false console.log(a);// 10
邏輯與 && 和邏輯或|| 都有短路的作用:當運算子前面的運算式已經決定了整個運算式的結果,運算子后面的運算式不會再運算了,
賦值運算子
= += -= *= /= %=
賦值運算子的主要作用就是將運算子右邊的運算式的結果賦值給左邊的變數,
例如: var num = 0; num += 5; //相當于 num = num + 5;
運算子的優先級
優先級從高到底 1. () 優先級最高 2. 一元運算子 ++ -- ! (++和--要考慮在前還是在后) 3. 算數運算子 先* / % 后 + - 4. 關系運算子 > >= < <= 5. 相等運算子 == != === !== 6. 邏輯運算子 先&& 后|| 7. 賦值運算子
案例:計算一個年份是否是閏年
var result = ((year % 400) == 0) || (((year % 100) != 0) && ((year % 4) == 0));
三目運算
或者說是三元運算,
運算子:result = 運算式1 ? 運算式2 : 運算式3
result的結果 = 如果運算式1的結果是true,則整個運算式的結果是運算式2的結果,如果運算式1的結果是false,則整個運算式的結果是運算式3的結果,
性別:
var gender = 1; console.log(gender == 1?'男':'女');
流程控制
程式的三種基本結構
順序結構
從上到下執行的代碼就是順序結構
程式默認就是由上到下順序執行的
分支結構
根據不同的情況,執行對應代碼
回圈結構
回圈結構:重復做一件事情
分支結構
if陳述句
語法結構
情況1: 如果xxx就xxxx
if (/* 條件運算式 */) { // 執行陳述句}
案例:
var score = 85;
if(score > 85){
console.log("獎勵《奎華寶點》");
}
console.log("程式結束")
情況2:如果xxx就xxx,否則就xxxx
if (/* 條件運算式 */){ // 成立執行陳述句 } else { // 否則執行陳述句 }
案例:
var score = 85;
if(score > 85){
console.log("獎勵《奎華寶點》");
}else{
console.log("獎勵《一頓暴揍》");
}
console.log("程式結束");
?
// 三目運算解決問題
console.log(score > 85 ?"《奎華寶點》":"《一頓暴揍》");
tips: 這個世界上最遠的距離就是你在if里,我在else里, if(條件),條件理論上必須是布林值的運算式,但是js中的默認會自動將其他型別轉換為布爾型,所以書寫上就感覺可以寫任何型別,
var x = 0;
if(x){// 默認會將其他的型別轉換為布爾型、
console.log("111");
}else{
console.log("222");
}
其他型別轉換為布林值的情況:
| 其他型別 | 布爾型 |
|---|---|
| 數字 | 0->false,非0 -> true |
| 字串 | "" -> false,其他都是true |
| undefined,null,NaN | 全部都是false |
| 其他的物件 | 全部都是true |
案例:
var username = document.getElementById("username").value;
// 判斷用戶名是否是空字符或者是否是undefined
if(username != undefined && username != ""){
// username不是空的
}
// ---------------
if(username){
// username不是空的
}else{
// username是空的
}
情況3 多重分支陳述句
if (/* 條件1 /){ // 成立執行陳述句 } else if (/ 條件2 /){ // 成立執行陳述句 } else if (/ 條件3 */){ // 成立執行陳述句 } else { // 最后默認執行陳述句 }
tips:這里的if(條件) 后面的條件可以是任何型別,因為它會自動進行型別轉換, else模塊是可選的,
<input type="text" id="score">
<input type="button" onclick="showScore()" value=https://www.cnblogs.com/xiaoxiaodeboke/p/"click me">
<script>
function showScore(){
var score = document.getElementById("score").value;
if(score == undefined || score ==""){// 沒有輸入任何內容
alert("請輸入一個成績");
return;// 讓這個程式中斷
}
// 判斷輸入的是否是一個數字
if(isNaN(Number(score))){ // 如果是true,就說明不是一個數字
alert("請輸入一個數字");
return;// 讓這個程式中斷
}
// 判斷數字范圍
if(score > 100 || score < 0){
alert("請輸入一個0~100之間數字");
return;
}
// 你輸入的格式符合要求了
// 多重分支
if(score >= 90){
console.log("獎勵《虧華寶殿》");
}else if(score >= 80){
console.log("獎勵寶馬自行車");
}else if(score >= 70){
console.log("獎勵《三年模擬五年高考》");
}else{
console.log("獎勵《一頓暴揍》");
}
