JavaScript的核心語法

JavaScript

JavaScript：
- JavaScript的組成：
- 核心語法：
- - Hello：
  - 變量：
  - JS的基本數據類型：
  - - 特殊點：
  - 數組：
  - 流程控制語句：
  - 函數：
  - - 函數的重載：
    - 函數的遞歸:
    - 預定義函數：

JavaScript：

Javascript是基于對象和事件驅動的腳本語言，主要是嵌入到HTML中，應用在客戶端，動態操作網頁元素，也可以作用于服務端。
?
特點：

交互性（表單校驗，信息提示，動態數據圖表，ajax異步提交，解析服務端響應數據等等）。

安全性（不可以直接訪問本地硬盤）。

跨平臺性（由瀏覽器解析執行，和平臺無關）。

JavaScript的組成：

DOM – >Document Object Model

BOM – >Browser Object Model

?
?

核心語法：

Hello：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript">//彈框//alert("HelloWorld...1");//控制臺輸出console.log("HelloWorld...1");</script></head><body><script type="text/javascript">//彈框//alert("HelloWorld...2");//控制臺輸出console.log("HelloWorld...2");</script></body>
</html>

?
?

變量：

語法格式：
var 變量名 = 值;
?
注意：
? ? ? ?1. var表示變量。
? ? ? ?2. 變量的類型隨著值的類型發生改變。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">var v = 100;console.log(v);v = "abc";console.log(v);</script></body>
</html>

?
?

JS的基本數據類型：

分類：
? ? ? ?number - 數值型
? ? ? ?string - 字符串類型
? ? ? ?boolean - 布爾類型
? ? ? ?undefined - 未定義類型
? ? ? ?null - 空類型

tips:

number類型不分整數和小數。
string類型的值可以用單引號也可以用雙引號括起來。
string類型和Java的String類型寫法不一樣。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">//number - 數值型//注意：number類型不分整數和小數var num = 100;console.log(num);//100num = 123.123;console.log(num);//123.123//string - 字符串類型//注意：string類型的值可以用單引號也可以用雙引號括起來var str = 'abc';console.log(str);str = "abc";console.log(str);//boolean - 布爾類型var bool = true;console.log(bool);//truebool = false;console.log(bool);//false//undefined - 未定義類型var v;console.log(v);v = undefined;console.log(v);//null - 空類型var xx = null;console.log(xx);</script></body>
</html>

?
?

特殊點：

number類型的特殊點:Infinity表示無窮大。
string類型的特殊點：string加號是字符串拼接符，其余是算數運算符。
boolean類型的特殊點：“”、0、undefined、null表示false。
==判斷兩個值是否相等，===判斷兩個值+類型是否相等。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">//number類型的特殊點//注意：Infinity表示無窮大console.log(Infinity + (-Infinity));//NaN - Not a Number//string類型的特殊點//注意：string加號是字符串拼接符，其余是算數運算符var str1 = "10";var str2 = "3";console.log(str1 + str2);//103console.log(str1 - str2);//7console.log(str1 * str2);//30console.log(str1 / str2);//3.3333333335console.log(str1 % str2);//1//boolean類型的特殊點//注意：""、0、undefined、null表示falseif(""){console.log("true");}else{console.log("false");}if(0){console.log("true");}else{console.log("false");}if(undefined){console.log("true");}else{console.log("false");}if(null){console.log("true");}else{console.log("false");}//undefined vs nullvar v1 = undefined;var v2 = null;//typeof判斷引用的數據類型console.log(typeof v1);//undefinedconsole.log(typeof v2);//object//== vs ===//==判斷兩個值是否相等//===判斷兩個值+類型是否相等var v3 = 10;var v4 = "10";console.log(v3 == v4);//trueconsole.log(v3 === v4);//false</script></body>
</html>

?
?

數組：

? JS的數組和Java的數組不一樣，Java數組定義大小后就不能改變長度了，而JS數組可以隨意改變長度。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">var arr = ["小紅","小明","小灰"];//設置指定下標上的元素arr[0] = "小黑";//獲取指定下標上的元素console.log("獲取指定下標上的元素：" + arr[0]);//小黑//獲取元素個數console.log("獲取元素個數：" + arr.length);//添加元素arr[3] = "小白";arr[4] = "小綠";arr[10] = "小藍";//刪除元素delete arr[4];console.log("--------------------");//遍歷數組 - for循環for(var i = 0;i<arr.length;i++){console.log(arr[i]);}console.log("--------------------");//遍歷數組 -- for-in//注意：遍歷有效元素的下標（undefined的元素認為是無效元素）for(var index in arr){console.log(arr[index]);}</script></body>
</html>

?
?

流程控制語句：

If else
For
For-in(遍歷數組時，跟Java是否一樣)
Whil
Do while
break 語句用于跳出循環。
continue 用于跳過循環中的一個迭代。

需求：求1-100之間的偶數之和。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">var sum = 0;for(var i = 1;i<=100;i++){if(i%2 == 0){sum += i;}}console.log("1~100之間偶數之和為：" + sum);</script></body>
</html>

?
?

需求：我的夢想:第一個月存3000，每年遞增1000，問多少個月后可以存到20萬元。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">var allMoney = 0;var money = 3000;var month = 0;while(allMoney < 200000){allMoney += money;month++;if(month % 12 == 0){money += 1000;}}console.log(month + "個月后存滿20萬");</script></body>
</html>

?
?

需求：

打印圖形
					***************

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">for(var i = 0;i<5;i++){for(var j = 0;j<=i;j++){document.write("*");}document.write("<br/>");}</script></body>
</html>

?
?

函數：

語法結構：
?
function 函數名(參數列表){

…代碼塊…
}

注意：函數就是方法。

函數分類：
? ? ? ?1. 無參無返回值的函數。
? ? ? ?2. 帶參數的函數。
? ? ? ?3. 帶返回值的方法。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">//無參無返回值的函數function fun01(){console.log("今天天氣真好1");}fun01();//帶參數的函數//注意：形參不需要加類型，調用方法時可以傳參也可以不傳參function fun02(a,b){console.log("今天天氣真好2：" + a + " -- " + b);}fun02();fun02(10,20);fun02("xxx","yyy");fun02("abc",12345);//帶返回值的方法//注意：JS函數里的返回值不用像Java方法里必須指定返回值類型function fun03(){return "今天天氣真好3";}var v = fun03();console.log(v);</script></body>
</html>

tips:

? ? ? ? ?1. 形參不需要加類型，調用方法時可以傳參也可以不傳參。

? ? ? ? ?2. JS函數里的返回值不用像Java方法里必須指定返回值類型。

?
?

函數的重載：

JS的函數里沒有重載的概念，后面定義的相同名稱的方法會覆蓋前面相同名稱的方法。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">function fun(a,b){alert(a+b);}function fun(a,b,c){alert(a+b+c);}//a - 10//b - 20//c - undefindfun(10,20);//NaN</script></body>
</html>

?
?

函數的遞歸:

遞歸是一種思想，只要是面向對象的語言都有這個思想。

需求：設計一個函數，傳入n，求n的階乘。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">function fun(n){if(n != 1){return fun(n-1)*n;}else{return 1;}}var num = fun(5);alert(num);</script></body>
</html>

?
?

預定義函數：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">console.log("判斷參數是否是數字：" + isFinite("abc"));//falseconsole.log("判斷參數是否不是數字：" + isNaN("abc"));//trueconsole.log("將字符串轉換為整數：" + parseInt("100.123"));//100console.log("將字符串轉換為小數：" + parseFloat("100.123"));//100.123var str = "alert('今天真是個好日子');";eval(str);//認為字符串為js代碼去執行</script></body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/23952.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/23952.shtml
英文地址，請注明出處：http://en.pswp.cn/web/23952.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！