上節(jié)課主要講解的是JavaScript代碼的規(guī)范和格式。
這節(jié)課來具體講解關(guān)于變量、數(shù)據(jù)類型和運(yùn)算符的基礎(chǔ)知識(shí)，然后利用這些知識(shí)在網(wǎng)頁(yè)上顯示一個(gè)九九乘法口訣表。
變量
變量是用來存儲(chǔ)一個(gè)數(shù)據(jù)的容器。
JavaScript變量的定義規(guī)范是這樣的：
var x=1;
var y;
var name="Michael";
在變量名前面用關(guān)鍵字var來進(jìn)行定義。
定義變量名的同時(shí)可以對(duì)變量用賦值=進(jìn)行設(shè)置初始值。
變量必須以字母開頭；
變量能以$和_符號(hào)開頭；
變量名稱對(duì)大小寫敏感（例如 x 和 X 是不同的變量）。
一個(gè)好的編程習(xí)慣，是在程序開始之處對(duì)需要用到的變量統(tǒng)一定義。
來做一個(gè)加法計(jì)算器，定義2個(gè)變量，然后將2個(gè)變量相加，結(jié)果賦值給一個(gè)新的變量，然后輸出到控制臺(tái)。
修改testjs.js文件如下：
var a=3;
var b=5;
var c=a+b;
console.log(a,"+",b,"=",c);
將新增的函數(shù)addValue替換到click按鈕的onclick事件上。
修改testjs.html文件如下：
刷新網(wǎng)頁(yè)，點(diǎn)擊click按鈕，然后打開網(wǎng)頁(yè)調(diào)試工具，在console窗口可以看到輸出結(jié)果。
這里的console.log的作用就是可以向?yàn)g覽器調(diào)試工具輸出log信息，這個(gè)方法對(duì)于調(diào)試JavaScript非常有用。
輸出的結(jié)果不會(huì)顯示到網(wǎng)頁(yè)內(nèi)容中，只會(huì)出現(xiàn)在瀏覽器的調(diào)試工具的console窗口中。
數(shù)據(jù)類型：數(shù)字、字符串、布爾和數(shù)組
變量可以存儲(chǔ)不同的數(shù)據(jù)類型的值。
常見的數(shù)據(jù)類型有數(shù)字、字符串、布爾和數(shù)組。
JavaScript只有一種數(shù)字類型，可以帶小數(shù)點(diǎn)也可以不帶。
例如：
var a=35.00;
var a=35;
字符串是用來存儲(chǔ)字符的變量類型。
例如：
var name="michael";
var name='jack';
可以使用單引號(hào)或者雙引號(hào)，注意的是前后如果用單引號(hào)，則當(dāng)中的內(nèi)容里面不要有單引號(hào)。
布爾類型只有2個(gè)值：true和false。
例如：
var isnum=true;
var notme=false;
布爾類型用于條件判斷語句中。
數(shù)組可以存儲(chǔ)一組變量，并可以通過下標(biāo)序號(hào)訪問數(shù)組的元素。
例如：
var names=new Array();
names[0]="michael";
names[1]="jack";
names[2]="tom";
或者 var names=new Array("michael","jack","tom");
或者var names=["michael","jack","tom"];
數(shù)組的第一個(gè)元素的下標(biāo)序號(hào)是從0開始的。
運(yùn)算符
前面用到的+就是一個(gè)運(yùn)算符，是一個(gè)算術(shù)運(yùn)算符。
常用的運(yùn)算符有3大類：算術(shù)運(yùn)算符，賦值運(yùn)算符，邏輯運(yùn)算符，比較運(yùn)算符。
常用的算術(shù)運(yùn)算符有：
- 加法運(yùn)算符
- 減法運(yùn)算符
- 乘法運(yùn)算符
/ 除法運(yùn)算符
% 求余數(shù)運(yùn)算符
算術(shù)運(yùn)算法可以將2個(gè)變量進(jìn)行算術(shù)計(jì)算得到一個(gè)新的值。
例如：
var x=9;
var y=6;
var z=x-y;
z的值就等于3。
例如：
var name1="michael";
var name2=" hello";
var name=name1+name2;
name的值就是"michael hello"。
數(shù)字和數(shù)字相加等于數(shù)字，字符串和字符串相加等于字符串。如果是數(shù)字和字符串相加則等于字符串。
常用的賦值運(yùn)算符：
= 賦值運(yùn)算符
符值運(yùn)算符可以將數(shù)據(jù)賦予給一個(gè)變量。
邏輯運(yùn)算法：
NOT 邏輯非運(yùn)算符，使用!來運(yùn)算
AND 邏輯與運(yùn)算符，使用&&來運(yùn)算
OR 邏輯或運(yùn)算符，使用||來運(yùn)算
邏輯運(yùn)算符只能對(duì)布爾變量進(jìn)行運(yùn)算。
邏輯非運(yùn)算符可以將布爾變量進(jìn)行反向符值。
例如，var a=true; var b=!a; 則b的值是false。
邏輯與運(yùn)算符，按照如下規(guī)則計(jì)算：
true && true 的結(jié)果是true
true && false 的結(jié)果是false
false && true 的結(jié)果是false
false && false 的結(jié)果是false
規(guī)則是只有2個(gè)都為真結(jié)果才為真。
邏輯或運(yùn)算符，按照如下規(guī)則計(jì)算：
true || true 的結(jié)果是true
true || false 的結(jié)果是true
false || true 的結(jié)果是true
false || false 的結(jié)果是false
規(guī)則是只要1個(gè)為真則結(jié)果為真。
比較運(yùn)算符用于比較，返回的結(jié)果是一個(gè)布爾數(shù)據(jù)類型的值。
常見的有以下：
== 等于
大于
< 小于
= 大于等于
<= 小于等于
例如：
3==3 的值為 true
3==5 的值為 false
3>5 的值為false
5<9 的值為true
3>=3 的值為true
一般關(guān)系運(yùn)算符用于條件判斷語句中。
for循環(huán)
為了實(shí)現(xiàn)九九乘法口訣表，肯定要用到循環(huán)，否則一個(gè)一個(gè)去寫的話要累死。
JavaScript里面的循環(huán)，同樣有while循環(huán)和for循環(huán)，這里先來使用for循環(huán)。
for循環(huán)的語法是這樣的：
for (語句1;語句2;語句3) {
循環(huán)執(zhí)行代碼
}
語句1會(huì)在循環(huán)開始前執(zhí)行一次，一般用于設(shè)置初始條件。
語句2定義運(yùn)行循環(huán)的條件，一般是一個(gè)比較運(yùn)算的結(jié)果。
語句3在每次循環(huán)執(zhí)行代碼完成之后運(yùn)行一次，一般用于改變循環(huán)條件的變量。
例如：
for (var i=0;i<3;i++) {
console.log(i);
}
它的運(yùn)行次序是這樣的：
首先定義變量i的值為0，然后進(jìn)入循環(huán)體內(nèi)部執(zhí)行，在console輸出0，然后運(yùn)行i++，這樣i的值變?yōu)?，然后判斷是否i<6，發(fā)現(xiàn)1<3=true，滿足條件，則再次進(jìn)入循環(huán)體內(nèi)部執(zhí)行，在console輸出1，然后運(yùn)行i++，這樣i的值變?yōu)?，然后判斷是佛i<6，發(fā)現(xiàn)2<3=true，滿足條件，則再次進(jìn)入循環(huán)體內(nèi)部執(zhí)行，在console輸出2，然后運(yùn)行i++，這樣i的值變?yōu)?，然后判斷是佛i<6，發(fā)現(xiàn)3<3=true，不滿足條件結(jié)束循環(huán)。
這樣console就輸出3次，輸出結(jié)果從0到2。
console里輸出乘法口訣表
假如要實(shí)現(xiàn)一個(gè)九九乘法口訣表，就需要第1排輸出11=1，第2排輸出12=2和2*2=4，這樣統(tǒng)計(jì)下來，需要輸出9行9列。
因此，可以先用2層for循環(huán)來實(shí)現(xiàn)在console里面輸出乘法口訣表。
修改testjs.js代碼如下：
刷新頁(yè)面，點(diǎn)擊click按鈕。
可以看到console里面輸出了乘法口訣表。
網(wǎng)頁(yè)中顯示九九乘法口訣表
要讓乘法口訣表顯示在網(wǎng)頁(yè)中，需要利用到document.write語句了。
document.write語句可以用于在網(wǎng)頁(yè)中輸出新的網(wǎng)頁(yè)元素內(nèi)容。
先來增加一個(gè)div的樣式吧，在head部分增加CSS樣式：
修改testjs.html代碼如下：
這個(gè)樣式定義了div為一個(gè)圓角的長(zhǎng)方形，底色為淺灰色，邊框?yàn)閱螌?shí)現(xiàn)深灰色，文字字體為紫色，字體為20px和其它樣式。
然后來在document里面用JavaScript代碼輸出一個(gè)div元素。
修改testjs.html代碼如下：
刷新網(wǎng)頁(yè)：
可以看到，網(wǎng)頁(yè)中在document.write執(zhí)行的地方出現(xiàn)了一個(gè)div元素了，它的樣式是前面定義好的樣式。
document.write方法可以向網(wǎng)頁(yè)文檔中輸出指定的網(wǎng)頁(yè)元素內(nèi)容。
如果要顯示多行的div，那么可以利用
來進(jìn)行換行。
修改testjs.html代碼如下：
可以看到第2行出現(xiàn)了，第2行顯示了2個(gè)元素。
修改代碼，利用2層for循環(huán)，輸出九九乘法口訣表。
修改testjs.html代碼如下：
刷新網(wǎng)頁(yè)：
可以看到網(wǎng)頁(yè)顯示出了乘法口訣表。
學(xué)習(xí)方法不同了
可以感覺到，學(xué)哥現(xiàn)在對(duì)知識(shí)的講法有所不同，由于有了前面2章的基礎(chǔ)，尤其是學(xué)會(huì)了python語言的基礎(chǔ)語法之后，再來學(xué)JavaScript，很多概念都是類似的，例如變量，數(shù)據(jù)類型，邏輯判斷等等，所以學(xué)哥就會(huì)先把概念羅列出來，然后用更多的例子來進(jìn)行練習(xí)，可以利用之前的基礎(chǔ)，加快學(xué)習(xí)的速度。
