RE: 0 從頭開始學JS
- 寫在最前面的話
- JS原生入門
- 過渡篇
- JS寫在哪？
- 常用的測驗方法
- JS冷知識
- script標簽位置
- 注釋
- JS變數以及資料型別
- 變數命名
- 資料型別
- 數字與字串
- 資料型別的判斷函式
- 數字與字串加和問題
- 數字和字串比較問題
- JS 的函式
- 函式
- 宣告
- 呼叫
- 回傳值
- JS陳述句
- If陳述句
- 迭代陳述句
- do-while
- while
- for
- for-in
- break/continue/with陳述句
- break/continue
- with
- 標簽陳述句
- JS中的陣列
寫在最前面的話
由于專案需求，所以開始溫習JS，以此博客敦促自己，也以此記錄自己的經驗與教訓，有失誤之處還請各位不吝賜教，
同樣，本博客也是給我各位親愛的可愛學弟們看的QwQ
由于都是有點C語言基礎的，所以可能會選擇性跳過一些過于簡單的內容~會著重寫一些與C不同的地方以及JS 的獨有特性，這樣學起來也快一點，輕松一點
學習程度：掌握>理解>了解>知道
JS原生入門
過渡篇
學習時間：30min
學習目標：
掌握JS的參考，掌握注釋的使用方法
了解alert函式
JS寫在哪？
具體實體請參照代碼段
1. script標簽
script 標簽可以加標簽屬性：type=“text/javascript” 或者 language=“javascript”，也可以不加
2. 引入外部js檔案
使用src屬性
如果script用來去引入js檔案，那么它里面就不能再寫js代碼了
3. 寫在標簽屬性里面
ps:一個頁面可以插入多個script標簽來引入多個js片段
<body onload="alert(666);">
<script>
alert("123");
</script>
<script src="你要鏈接的檔案名"></script>
</body>
會先后彈窗顯示123 和 666
常用的測驗方法
1.使用alert()函式，具體使用可以參照下面
alert(233);
使用之后瀏覽器會彈出提示框并顯示相關內容
2.使用控制臺輸出
console.log(233);
使用之后，當使用瀏覽器打開檔案時，按F12會在console中顯示
JS冷知識
script標簽位置
script標簽能放在任意的位置，但是最侄訓被瀏覽器整合在head或者body里面
所以說，我們需要將script標簽放置于head或者body標簽包含的內容里面
通常我們會把js代碼寫在結構結束之后，也就是body的最后面,就像這樣：
<body>
<script>alert(1);</script>
</body>
注釋
與C語言類似，多行注釋使用 /* 我是注釋*/ ，單行注釋為 //我是注釋，例子如下
/* 用這對符號，
可以完成對多行代碼的注釋*/
//當然，這樣也可以
ps：注釋最好應當統一風格，在兩種注釋方法中選擇一種使用
學完本小節來操作一下：
完成一個簡單的JS程式----嵌入在HTML檔案中并讓他彈出“hello world”,在控制臺中輸出“你好呀”（提示，按F12打開控制臺）
JS變數以及資料型別
學習時間：40min
學習目標：
理解變數命名的要求
掌握數字與字串相加結果
了解數字與字串作比較
變數命名
定義變數的要求：
只能包含 數字 字母 _ $
不能以數字開頭
不能和JS原本的API或語法詞沖突
定義變數的規范：
見名知意
駝峰 / _ 連詞
使用var關鍵字來定義變數,省略也同樣可以成功
(可能剛學完C語言會不太適應，因為通常需要預先設定資料型別，比如int char 之類，而在JS當中只需要使用var關鍵詞就可以宣告了)
總的來說和C語言的變數命名方式區別不大，同時也兼容中文變數的命名，但是不推薦這樣使用
var a=0;
var a1=1;
var _a=2;
var $a=3;
a=4;
小明=5;
以上這些都是可以通過的命名方式
但在實際運用中，我們常使用駝峰命名法：
var myMoneyCount
這個變數就表示“我錢的數量”這重意思
駝峰命名法的定義---->點擊我
資料型別
1.數值型別(Number)
無論是整數還是浮點數，八進制還是十進制，在JS當中，資料型別都是Number型別，例如
var x = 10;
var y = 10.5;
其中的x,y都是Number型別的變數
- 字串型別
在JS使用字串需要使用引號（" "）引起來，加上引號表示的就是字串，使用雙引號或是單引號都可以，但是不要混著用，引號不能嵌套，雙引號里面不能不能放雙引，單引號里面不能放單引號
var a='12345';
var b="hello,there";
其中的a,b都是字串變數
- 布爾型別（Boolean）
布林值的取值只有兩個–true 和 false
除條件判斷外，做運算時，true可當1運算；false當做0運算
var yes=true;
var no=false;
- 空值(NULL)
表示宣告物件為賦值，Null型別的值只有一個就是null，null這個值專門用來表示這個為空的物件
var empty=null;
- 未定義（Undefined）
宣告變數未賦值屬于undefined型別
var a;
alert(a);
將會彈出顯示undefined
因為變數a雖然被宣告但沒有賦值，屬于未被定義的變數
- 物件(Object)
這個型別會在后續"面向物件編程"那里展開討論
數字與字串
資料型別的判斷函式
使用typeof函式如：
本代碼段可以復制后直接使用F12除錯臺驗證
var x = 10;
console.log(typeof(x));//會顯示 number
console.log((a))//會顯示undefined,在這里先存一個懸念，就叫它'小笨蛋不知道'定理好了
var a='12345';
console.log(typeof(a));//會顯示 string
var b="hello,there";
console.log(typeof(b));//會顯示string
var yes=true;
console.log(typeof(yes));//會顯示boolean
var empty=null;
console.log(typeof(empty));//會顯示object，這是一個存在了很久的bug,暫時還沒有被修復
就可以判斷出資料的型別辣！
數字與字串加和問題
先來問一個小問題，變數x,y,z,a,b,c分別是什么資料型別：
var x=10;
var y='10';
var z=10+y;
var a=5;
var b=x+a;
var c=b+y;
首先，x和y的資料型別根據之前的學習應該還是比較好判斷的
數值型別(Number)
無論是整數還是浮點數，八進制還是十進制，在JS當中，資料型別都是Number型別
字串型別
在JS使用字串需要使用引號（" "）引起來，加上引號表示的就是字串，使用雙引號或是單引號都可以，但是不要混著用，引號不能嵌套，雙引號里面不能不能放雙引，單引號里面不能放單引號
所以很容易就可以知道x是數字型別，而y是字串型別，
接下來就要解決z的問題了，可能小伙伴們會疑惑，為什么數字可以和字串加起來呢？這在C語言當中妥妥的報錯呀~
在JS當中，‘+’這個符號有著不少的特殊行為，
| x | y | x+y |
|---|---|---|
| 數字 | 數字 | 數字之和 |
| 10 | 10 | 20 |
| 字串 | 字串 | 字串拼接 |
| ‘10’ | ‘10’ | ‘1010’ |
| 數字 | 字串 | 數字轉化為字串后拼接 |
| 15 | ‘20‘ | 1520 |
| ’20’ | 15 | 2015 |
在字串與數字相加時，數字會先轉化為字串然后按照字串相加的規律進行拼接，
翻頁有點麻煩，把之前的代碼抄下來
var x=10;
var y='10';
var z=10+y;
var a=5;
var b=x+a;
var c=b+y;
經過剛才的學習，現在顯而易見的可以看出來，z和c的型別是字串 ，a和b的型別是數字，
可以通過
alert(typeof(z));
來驗證一下~
再來求一下z，b，c的值
z-->10+y=10+'10'=1010
b-->10+5=15
c-->15+'10'=1510
最后，來一道題目檢驗一下學習成果~
本代碼段可以復制后直接使用F12除錯臺驗證
var x=10;
alert(x + 2 + "x" + 1);
答案應該是12x1~
咱來一步步決議
首先x+2 原式=12+"x"+1
接著12+"x" 原式="12x"+1
最后得出12x1辣~
數字和字串比較問題
var a=2>1;
var b=2<1;
這兩個比較的答案是顯而易見的，a=true,b=false,
var c="beta">"alpha";
var d="Beta">"alpha";
則比較的是字串的ascll碼，
“b”>“a”,所以c=true
而“B”<“a”，所以d=false
那么難題來了，以下的資料比較怎么完成呢？
var e=25"<3;
var f="25"<"3";
var g="a"<3;
e在比較時字串 “25” 將被轉換成數字 25，然后與數字 3 進行比較，結果不出所料，e=false
f 比較的是字串 “25” 和 “3”，兩個運算元都是字串，所以比較的是它們的字符代碼（“2” 的字符代碼是 50，“3” 的字符代碼是 51）f=true
而g在比較時，由于a無法轉化成數字,所以無法比較，只能回傳錯誤，也就是false，g=false
學完本小節來操作一下：
按F12打開控制臺后，在控制臺中運行這段程式來檢驗一下~
var x=10;
alert(x + 2 + "x" + 1);
JS 的函式
學習時間：15min
學習目標：
掌握函式的宣告方法，呼叫方法與回傳值
函式
宣告
函式的宣告方法：
function functionName(arg0, arg1, ... argN) {
statements
}
其中的arg0,arg1,…argN都是傳入函式的引數，如果沒有引數直接省略括號內的內容就好啦~
先來舉個例子嗷，上一個經典款的sayhi函式
function sayHi(Name, Message) {
alert("Hello " + Name + Message);
}
呼叫
首先宣告
function sayHi(Name, Message) {
alert("Hello " + Name + Message);
}
接著直接使用函式名+傳入引數形式來呼叫(和C語言及其相似)
本代碼段可以復制后直接使用F12除錯臺驗證
function sayHi(Name, Message) {
alert("Hello " + Name + Message);
}
sayHi("heng"," have a good day");
回傳值
和C語言當中一樣，JS中的函式可以有回傳值(也可以沒有)
在函式回傳某個值的時，函式結束并回傳特定值
繼續用sayhi函式來舉例，這時候我們不直接用alert來顯示結果，而是通過顯示函式回傳值的形式：
本代碼段可以復制后直接使用F12除錯臺驗證
function sayHi(Name, Message) {
return ("Hello " + Name + Message);
}
alert(sayHi("heng"," have a good day"));
會和之前一樣的運行結果哦~
學完本小節來操作一下：
1.用控制臺運行本小節所有含有“本代碼段可以復制后直接使用F12除錯臺驗證 ”的代碼段
2.寫一個屬于自己的sayhello函式并通過打開HTML檔案運行成功~
JS陳述句
學習時間：40min
學習目標：
完全掌握以下幾種陳述句
知道with陳述句
陳述句大致分為以下幾種
- if陳述句
- 迭代陳述句
- break/continue/with
- 標簽陳述句
- switch陳述句
If陳述句
和C語言中的If陳述句描述基本相同，一分鐘過一下
if (condition1) statement1 else if (condition2) statement2 else statement3
舉個具體點的例子就是：
if (i > 30) {
alert("大于 30");
} else if (i < 0) {
alert("小于 0");
} else {
alert("在 0 到 30 之間");
}
迭代陳述句
do-while
和C語言中極其類似，十秒鐘過一下
do {statement} while (expression);
例子：
var i = 0;
do {i += 2;} while (i < 10);
while
和C語言中極其類似，十秒鐘過一下
while (expression) statement
例子：
var i = 0;
while (i < 10) {
i += 2;
}
for
和C語言中極其類似，十秒鐘過一下
for (initialization; expression; post-loop-expression) statement
例子：
本代碼段可以復制后直接使用F12除錯臺驗證
iCount = 6;
for (var i = 0; i < iCount; i++) {
alert(i);
}
for-in
for-in迭代器，用于列舉物件的屬性，mark一下，由于還沒有復習到面向物件編程部分，先掛在這里，回頭再來看看
for (property in expression) statement
例子：
for (sProp in window) {
alert(sProp);
}
break/continue/with陳述句
break/continue
break 陳述句可以立即退出回圈，阻止再次反復執行任何代碼，
而 continue 陳述句只是退出當前回圈，根據控制運算式還允許繼續進行下一次回圈，
由于和C語言中和C語言中的break/continue十分相仿，這里就很快略過了
with
with陳述句是一個運行速度很低的陳述句，這里不太推薦使用
with 陳述句用于設定代碼在特定物件中的作用域，
他的語法：
with (expression) statement
舉個例子：
var sMessage = "hello";
with(sMessage) {
alert(toUpperCase()); //輸出 "HELLO"
}
這里稍作了解一下就可以了，因為用到的機會真的很少很少，主要的目的還是防止萬一遇到大佬的代碼看不懂的尷尬辣~
標簽陳述句
可以給陳述句加標簽，以便之后的呼叫
語法如下：
lable:statement
敲黑板：
break與continue可以與有標簽的陳述句聯合使用，回傳到代碼的特定位置：
例如：
break版：
var iNum = 0;
outermost:
for (var i=0; i<10; i++) {
for (var j=0; j<10; j++) {
if (i == 5 && j == 5) {
break outermost;
}
iNum++;
}
}
alert(iNum); //輸出 "55"
在上面的例子中，標簽 outermost 表示的是第一個 for 陳述句，正常情況下，每個 for 陳述句執行 10 次代碼塊，這意味著 iNum++ 正常情況下將被執行 100 次，在執行完成時，iNum 應該等于 100，這里的 break 陳述句有一個引數，即停止回圈后要跳轉到的陳述句的標簽，這樣 break 陳述句不止能跳出內部 for 陳述句（即使用變數 j 的陳述句），還能跳出外部 for 陳述句（即使用變數 i 的陳述句），因此，iNum 最后的值是 55，因為當 i 和 j 的值都等于 5 時，回圈將終止，
continue版：
var iNum = 0;
outermost:
for (var i=0; i<10; i++) {
for (var j=0; j<10; j++) {
if (i == 5 && j == 5) {
continue outermost;
}
iNum++;
}
}
alert(iNum); //輸出 "95"
在上例中，continue 陳述句會迫使回圈繼續，不止是內部回圈，外部回圈也如此，當 j 等于 5 時出現這種情況，意味著內部回圈將減少 5 次迭代，致使 iNum 的值為 95，
這兩個例子可能理解起來確實有一點小困難，但是如果想自己的編程有突破的話一定要刻苦鉆研哦！
如果暫時看著有點頭疼可以先放一下，咱回頭多看看也就懂了~
由此可見，當break和continue聯用時的標簽陳述句功能時很強大的~
學完本小節來操作一下：
完成一個JS小程式，要求如下
在控制臺當中輸出“81”最小的四個因子
JS中的陣列
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/173807.html
標籤：其他