經過一個月的時間已經結束了第一階段的學習,接下來就是進入到最費腦子的第二階段—JS的學習。
把網頁分為3部分的話,html代表結構,CSS代表樣式那么JS就代表網頁的行為。可以理解為女媧造人時捏的一個個泥人就是我們的網頁,但是沒有女媧吹的那口氣泥人是不會動的,當女媧向泥人吹了那口仙氣一個個小泥人就可以活蹦亂跳了。我們的JS就相當于那一口仙氣讓我們的網頁靈活起來。
1JavaScript的歷史
javascript在設計之初只是為了做表單的驗證,但是如今已經成為了一種功能全面的變成語言。JAVA和JavaScript有什么關系呢?答:毫無關系。JavaScript最初是NetScape公司在1995年著手研發的在當時叫做liveScript的腳本語言。公司為了營銷目的搭上了當時媒體熱炒的Java的順風車臨時更名為JavaScript。但是Javascript1.0獲得了巨大的成功。但是后來1996年微軟公司進入瀏覽器領域推出了JScript開始和NetScript爭當博主地位。他們爭奪最終苦的是開發者,因為沒有一個標準的存在。業內的吐槽也日益嚴重,終于多方聯合共同制定了一個標準,這個標準就是ECMAScript(歐洲計算機制造商協會)
2JavaScript的組成
1.ECMAScript:ECMAScript是一個標準,它規定了語法,類型,語句。關鍵字,保留子。操作符,對象。可以說它就是一個法律。
2.BOM(瀏覽器對象模型):可以訪問瀏覽器窗口的對象模型,對瀏覽器窗口進行操作。
3.DOM(文檔對象類型):DOM把整個頁面都映射成一個多層的節點結構。可以說整個是整個HTML文檔
3如何編寫和運行JS
JS也是一種腳本語言,它也可以有兩種方式在HTML頁面引入,一種是外聯一種內聯。
1.外聯的寫法:
<script src=""></>
2.內部寫法:
<script>
//在標簽內寫腳本
</script>
3.錯誤的寫法:
<script src="">
//在標簽內寫腳本
</>
4.向頁面打印內容:
document.write("Hellow word")
5.也可以直接解析標簽
document.write("<strong>hellow word</strong>")
同樣用到特殊字符時也需要轉義字符
4變量
1.變量的數據類型
數字類型(number):1234567890
字符類型(string):被單引號雙引號包裹的部分都是字符型
未定義類型(undefined):當變量被聲明卻沒有被賦值時
布爾類型(boolean):true,false(真,假)
對象類型(object):{}
數組類型(array):[]
其中數組類型是爭議最大的類型,有人說它是獨立的類型有人說它應該劃分到對象類型里
2.變量的命名規則。
第二開頭必須為字母或者$或者_
第三關鍵字和保留字不能作為變量名
關鍵字:以下這些關鍵字用于執行特定操作。按照規則,關鍵字也是語言保留的,不能用作標識符
保留字:未來可能作為關鍵字存在
5運算符
JS的運算符分為:算數、賦值、關系、邏輯。
1:算數運算符:+加 -減 乘 /除 %取余
var a = 1;
var b = 2;
a+b=3
a-b=-1
ab=2
a/b=0.5
a%b=1
這里跟數學的運算方法一樣。但是:
var a="1",b="2";
a * b = 2
a / b = 0.5
a - b = -1
a + b = 12
+號有兩層意思第一層當左右都為number類型時它就是加法運算,當有一邊是字符型那么就變成了連接符。這里就用到了數據類型的轉換:強制轉換和隱形轉換。等會就要說道。
2.賦值運算符:= += -= *= /= %=
3.關系運算符:< <= > >= == !== ===
4.邏輯運算符:&& || !
用數學里面學的說就是
與(and):同假為假。意思是只有兩個都為假時才為假。
或(or):同真為真。意思是只有都為真時才為真。
非(!)取反面,真就是假,假就是真。
運算順序跟數學一樣。
6自增自減運算
運算符:++ --
a++表示在a原有的基礎加1
a--表示在a原有的基礎上減1
感覺很好理解不就是自增自減嗎,其實不然。那么++a和--a又是多少?
var a =1;
console.log(a)
這個打印結果為1,毫無疑問。
var b =1;
b++;
console.log(b++);
這個打印結果為2。因為++意思就是自增1,也毫無疑問。
var c =1;
console.log(c++);
console.log(c);
看到這題估計就有好多人認為跟上面一樣也是自增1,所以l兩個答案都是2。其實正確的答案是上面的是1,下面的是2。這是為什么呢?因為我們瀏覽器在解析我們的代碼是都是遵循從上到下從左到右的順序解析。
在變量b那題,我們先給變量b賦值1,然后我們進行了累加計算。這時b變成了2。最后我們把b打印出來,那么打印出來的結果就是2。
在變量c這題我們在從上往下,從左到又的順序解析看看。首先也一樣給變量c賦值1。然后我們開始打印打印順序是從左到右,所以先把c打印出來(因為++是在c的后面還沒來的急累加c就被打印了出來)。然后打印過后開始了累加最后再次打印c的值,這時c就變成了2。
var d =1;
console.log(++d);
那么這題也按照解析順序來看就好理解了。先賦值,然后打印的時候先進行了自增(因為++在前面)。接著打印出了d的值是2。
拓展:
var k =0;
console.log(k++ + ++k +k+k++)
首先k的初始值為0,所以k++時是0,然后k開始自增k變成了1,然后加上++k,因為++在前面所以先在增加1,++k就變成了2,然后在加k(++k后面沒運算符,所以k還是2),然后在加k(k還是2),然后后面還有++瀏覽器就還沒來的急解析就打印了出來結果就是6(0+2+2+2)。雖然沒打印出來后面的++但是我們也要知道最后k變為了3,后面如果還有k就是以3進行計算了。
自增與自減方法一樣。
7數據類型轉換
數據類型轉換分為強制類型轉換和隱性轉換。
1:隱性轉換,在上面說過,當字符與數字相加時+變為了連接符,這里瀏覽器在進行解析的時候就默認把number類型轉換成了字符類型。這就是隱形轉換。
2:強制轉換,
轉換為字符型:toString()
強制把類型轉換為字符型。
var str = 123;
str.toString();-
轉換成數值:
parseInt();轉換成整數,可以接受兩個值
parseFloat();轉換成浮點數兩者的不同:
parseInt();該方法從左向右,檢測數字或字符串,當第一次發現一個不為數字的字符時,把之前的所有進行返回,如果字符串中第一個就不是數字,那么返回NaN
例如:parseInt("123abc");a做為第一個不是數字的字符;返回a之前的所有值,則該方法返回123
parseInt("abc123");a做為第一個不是數字的字符,且處在字符串的第一位,則判定該字符串無法轉換為數字返回NaN
parseFloat();該方法檢索數字或字符串后面第一個.后的不為數字的字符,并對之前所有的結果進行返回,如果第一個字符不為數字,那么返回NaN
例如:parseFloat(“123.456");返回123.456
parseFloat(“123.4a56");返回123.4
parseFloat(“123.00");返回123
parseFloat(“123.0a56");返回123
關于浮點數:Math.round()四舍五入取整浮點數。
num.toFixed(n)保留幾位小數。 Number()為強制數據類型轉換:
Number("hello world"); //NaN
Number("123456"); //123456
8NAN的概念
NaN:是一種特殊的number類型,代表意外轉換成的數字,NAN和任何東西都不等,甚至都不等于自己。
isNaN()函數,該函數判斷括號內的值是否是NaN,是就返回true,不是就返回false。當運算結果出現了NAN時一定要注意是不是前面的變量獲取出錯了。