RE: 0 從頭開始學JS

寫在最前面的話
JS原生入門
- 過渡篇
- - JS寫在哪？
  - 常用的測驗方法
  - JS冷知識
  - - - script標簽位置
      - 注釋
- JS變數以及資料型別
- - 變數命名
  - 資料型別
  - 數字與字串
  - - - 資料型別的判斷函式
      - 數字與字串加和問題
      - 數字和字串比較問題
- JS 的函式
- - 函式
  - - - 宣告
      - 呼叫
      - 回傳值
- JS陳述句
- - If陳述句
  - 迭代陳述句
  - - - do-while
      - while
      - for
      - for-in
  - break/continue/with陳述句
  - - - break/continue
      - with
      - 標簽陳述句

寫在最前面的話

由于專案需求，所以開始溫習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變數以及資料型別

學習時間：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

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"));

會和之前一樣的運行結果哦~

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聯用時的標簽陳述句功能時很強大的~

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/173302.html

標籤：其他

上一篇：紅外資料集 | 收集OTCBVS、KAIST、FLIR紅外影像資料

下一篇：eclipse創建的maven專案pom.xml檔案報錯解決方法

RE:0 從頭開始學JS(持續更新)

RE: 0 從頭開始學JS

寫在最前面的話

JS原生入門

過渡篇

JS寫在哪？

常用的測驗方法

JS冷知識

script標簽位置

注釋

JS變數以及資料型別

變數命名

資料型別

數字與字串

資料型別的判斷函式

數字與字串加和問題

數字和字串比較問題

JS 的函式

函式

宣告

呼叫

回傳值

JS陳述句

If陳述句

迭代陳述句

do-while

while

for

for-in

break/continue/with陳述句

break/continue

with

標簽陳述句