1. 程式人生 > >愛前端JS基礎課程筆記1-20

愛前端JS基礎課程筆記1-20

前端三層:

  • 結構層=》HTML=》從語義的角度描述網頁的結構
  • 樣式層=》CSS=》從審美的角度描述頁面
  • 行為層=》JavaScript=》從互動的角度提升使用者體驗

         JavaScript用於製作Web頁面互動效果,提升使用者體驗效果:**輪播圖,選項卡TAB欄,Ajax表單驗證,炫酷HTML5頁面等。**目前所有瀏覽器都支援JS。
        1995年,網景公司的一名為Brendan Eich的工程師創造了JavaScript,最初的JavaScriptS名為LiveScript(活力指令碼),後來因為Sun Microsystem的java語言的行為i和廣泛使用,Netscape出於宣傳和推廣的考慮,將其名字更改為JavaScript----兩者之間沒有什麼聯絡。幾個月後,MicroSoft隨著IE3推出了一個與之相容的語言JScript。又幾個月後,Netscape將JavaScript提交至Ecma International(一個歐洲的標準化組織),ECMAScript標準第一版便在1997年誕生了,1999年ECMAScript第三版,2009年12月ECMAScript第五版,2015年6月第六版。
    

    ECMAScript是JavaScript的標準。

  • JavaScript的語法來源於C和Java;

  • JavaScript是弱型別的語言;

  • JavaScript執行在宿主環境中,不關心記憶體,垃圾回收。

  • 注意相容性問題,IE8是個怪胎

  • 花式寫法太多,抽象

  • 太多細節,注意做筆記。

學習方法:

  1. 多去“品”程式,多思考內在邏輯,讀懂每一行程式碼;
  2. 機械重複性的勞動幾乎為0,基本都是創造性的勞動;
  3. 不要背程式,每一個程式要自己會寫;
  4. 細節注意。

JS書寫的位置

JS程式要寫在HTML頁面中,執行頁面的時候,這個頁面上的JS也就一起執行,JS的執行必須要有宿主環境,最常用的宿主環境就是瀏覽器

。JS要寫在標籤對裡面,text/javascript就是純文字的javascript,注意這個type必須寫準確,可以不寫,但是寫的話一定要寫準確,否則失效。
語句以分號;結尾,英文的符號,不能使用中文,語句要遵循語法。
控制檯是Chrome瀏覽器”檢查“裡面的功能,快捷鍵是F12.程式裡的所有錯誤都會在控制檯中輸出。

JS行文特性:

  • 語句和語句之間對換行、縮排、空格不敏感;
  • 分號的必要性:我們把頁面做好之後,通常都會進行壓縮,用軟體把所有的空格、換行都去掉,此時,分號非常重要,若去掉分號都不能執行。不壓縮的時候,分號不是必須的。
  • 使用英文引號;

註釋:

html:<!--我是註釋-->


css:/* 我是註釋*/
js://我是註釋

/*
我是註釋
我是註釋
我是註釋
*/

註釋符號不能巢狀,sublime中的註釋快捷鍵是ctrl+/

字面量

數字的字面量

整數:

十進位制,八進位制以0,0o或0O開頭,十六進位制以0x或0X開頭,顯示的時候以十進位制顯示,八進位制中只有0-7這幾個數字,不能有8,9,如果寫錯了則當作十進位制:
console.log(088);=>88
但是以0o或0O開頭,後面數字寫錯了則控制檯報錯:
console.log(0o88);=>error
十六進位制出現錯誤寫法,控制檯報錯。

小數:

若整數部分是0,如0.003可以省略整數部分0寫作

console.log(.003);=>0.003
console.log(3e-3);
console.log(.3e-2);

只有十進位制有小數的字面量,八進位制和十六進位制無小數字面量。

兩個特殊的字面量

Infinity 無窮大,不同瀏覽器不一樣
-Infinity 負的無窮大

console.log(-Infinity);=>-Infinity

NaN “不是一個數”,是一個數字字面量

console.log(0/0);=>NaN
字串的字面量:

字串用雙引號或者單引號包裹:

console.log(“hello world!”);

不能不加引號,必須是同種引號,字串被限定在同種引號之間。
一個數字如果加上了引號,那麼就是字串了:

console.log("3");

轉義字元:
\n換行
\t tab縮排

正常情況下,引號內可以包含不同型別的引號,例如雙引號內包含單引號,也可以用\”來表達引號。用\來轉義。

變數

使用var關鍵字來定義變數,關鍵字後面要有空格

var a ;

在記憶體中會開闢一個空間來儲存這個變數a,現在可以為變數進行賦值

a=100;

現在a變數的值就是100,輸出

console.log(a); //100

變數必須先宣告才能使用,否則會丟擲引用錯誤。
變數的名稱是識別符號,遵循一定的規則:
一個合法的識別符號可以有字母,數字,下劃線(_)美元符號($)組成,但不能以數字開頭,區分大小寫,且不能是關鍵字、保留字。
保留字:是系統裡面的有用途的字,為了不造成誤會,不能成為識別符號的名字。
保留字:abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var void volatile
while with
變數只需要定義一次,之後更改變數的值無需重複var,變數定義和賦值可以同時進行:

var a=100;
  • 若變數只被定義而未賦初值,則此變數的值就是undefined。
  • 若變數未定義而使用則會報錯

變數宣告提升

JS變數的一個特別之處是,你可以引用稍後宣告的變數,而不會引發異常,這一概念稱之為變數宣告提升;JavaScript變數感覺上是被提升到了所有函式和語句之前。然後提升的變數將會返回undefined值,所以即使在使用或引用某個變數之後存在宣告和初始化操作,仍將得到undefined值。

a=100;
var a;//這行定義變數會自動提升到所有語句之前
console.log(a);//100

JS只能提升變數的宣告,而不能提升變數的賦初值:

console.log(a);
var a=100;//undefined

等價於

var a;//自動升級
console.log(a);
a=100;//賦初值留在原地

不寫var的情況:
我們可以直接使用一個變數,直接給他賦值,不寫var。系統不會報錯,但是這樣做,這個變數會變成全域性變數而不是區域性變數,作用域是不能控制的,很可怕。
用逗號來隔開多個變數的定義:
var a=1,b=2,c=3;
區分變數還是直接量:
變數的使用不能加引號,如果加上引號則變成字串了

資料結構和型別

基本型別5種:

Number                數字型別
String                字串型別
undefined             undefined型別,變數未定義時的值,這個值自己是一種型別
Boolean              布林型別,只有truefalse兩個值
null                  null型別

引用型別5種(以後說)

Object 、 Function、 Array 、RegExp 、Date

typeof關鍵字:

用來檢測一個變數的型別

var a=100;
console.log(typeof  a);//number

JS中的所有數字都是number型別,不細分。JS是動態資料型別語言,意味著宣告變數時不必指定資料型別,而資料型別會在指令碼執行時自動轉換。變數的型別是自動檢測的,跟所賦的值有關。
一個變數只var而未賦初值,則為undefined型別

加號

當加號兩邊都是數字的時候就是數學運算子,兩邊不都是數字時就是連字元,結果是字串。
console.log(3+2);//5
console.log(1+”2”);//”12”
console.log(“你”+”好”);//你好

變數型別轉換

有一些方法可以將記憶體中表示一個數字的字串轉換為對應的數字:parseInt()和parseFloat()
parseInt()將一個string轉換為一個整數,不四捨五入,直接擷取整數部分,若這個string有亂七八糟的東西,那麼就只擷取前面數字部分。
parseInt()不僅僅能夠進行一個轉為整數,更能進行一個進位制的轉換,把任何進位制的數字都轉換為10進位制。進位制和要轉換的字串用逗號隔開。

parseInt("f",16);//15
parseInt("0xf",16);//15
parseInt("15*6",10);//15
parseInt(16,9);//15
parseInt(0xf,16);//21,0xf=>15=>1*16+5=21

parseInt()不能轉的話返回NaN

parseInt("hello",8);//NaN
parseInt("546",2);//NaN
6/0=>Infinity            0/0=>NaN

parseFloat()儘可能的將字串轉換為浮點數,若其後有亂七八糟的東西則捨棄,不能轉換則返回NaN

數字轉為string

將一個數字與一個空字串進行連字元運算即可

var a=123;
var b=a+"";
console.log(b);//123
console.log(typeof b);//string

prompt(“提示文字”,”預設值”);
預設值可以省略,可以把使用者輸入的值存入變數

var a=prompt("請輸入你的電話","139");
alert("哈哈,你輸入的電話是"+a);

用prompt接收的任何東西都是字串,哪怕使用者輸入的是一個數字,也是字串數字。

數學運算子

+ 、-、*、/、%、()

隱式轉換,所有帶字串的運算都會盡可能的轉換為數字進行計算,加號比較特殊。
數學運算中只有純字串、布林值、null 能夠幫你進行隱式轉換
不純的字串和undefined都不會自動進行隱式轉換,結果都是NaN
總結

  • 無論哪種運算,只要undefined參與運算,結果都是NaN;
  • “4”、false、true、null都能進行隱式轉換;
  • 加號比較特殊,對“4”不轉換。
    注意:
  • 字串跟字串進行相等判定時,比較的是字元編碼順序;
  • null不能與0進行相等判定,即false==0真,true==1真,null==0假
  • NaN==NaN 假,NaN===NaN 假,NaN!=NaN 真,NaN!==NaN 真
  • string和number比,string會被隱式轉換為number。

邏輯運算子的運算順序是非、與、或,注意短路運算。

計算機很聰明,
對於a && b, 如果a 為false,則不管b是什麼,直接輸出a;
若a為true,則不管不是什麼,直接輸出b;
本質上計算機進行a && b時,不是在進行邏輯分析,而是想著要麼扔a,要麼扔b。如果a是負性的,則直接扔出a,若a是正性的,則直接扔出b。
負性的:false、null、0、NaN、undefined、空字串(“”);
正性的:除了上面的全是正性的。

false && 8 //false
null && 8 //null
true && 13 //13
12 && 13 //13
13 && 12  //12

邏輯或短路類似:
a||b :計算機發現a是真的,那麼扔a,如果a是假的,那麼扔b。

運算子的運算順序:

貼身的 ++、–、!
數學
關係
邏輯
賦值