JavaScript 01基礎(chǔ)知識

簡介:JavaScript 是腳本語言,是一種輕量級的編程語言,是可插入 HTML 頁面的編程代碼, 插入 HTML 頁面后,可由所有的現(xiàn)代瀏覽器執(zhí)行。


1. JavaScript:寫入 HTML 輸出 ? document.write("<h1>This is a heading </h1>");

提示:您只能在 HTML 輸出中使用 document.write。如果您在文檔加載后使用該方法,會覆蓋整個文檔。

2.JavaScript:對事件作出反應(yīng) <button type="button" ?onclick="alert('歡迎')">點(diǎn)擊這里</button>

alert() 函數(shù)在 JavaScript 中并不常用,但它對于代碼測試非常方便

3.JavaScript:改變 HTML 內(nèi)容 ? ?x=document.getElementById("demo") ?//查找元素

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? x.innerHTML="Hello JavaScript";//改變元素

4.JavaScript:改變 HTML 樣式 ? ? x=document.getElementById("demo") ?//找到元素

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? x.style.color="#ff0000"; ? ? ? ? ? //改變樣式

5.JavaScript:驗(yàn)證輸入 ? ? ? ? ?if isNaN(x) {alert("Not Numeric")};

提示:JavaScript 由 Brendan Eich 發(fā)明。它于 1995 年出現(xiàn)在 Netscape 中(該瀏覽器已停止更新),并于 1997 年被 ECMA(一個標(biāo)準(zhǔn)協(xié)會)采納。


JavaScript的使用 ?


HTML 中的腳本必須位于<script>與</script>標(biāo)簽之間。腳本可被放置在 HTML 頁面的<body> 和 <head>部分中。

1.JavaScript 語句 ? JavaScript 語句向?yàn)g覽器發(fā)出的命令。語句的作用是告訴瀏覽器該做什么。

分號用于分隔 JavaScript 語句,通常我們在每條可執(zhí)行的語句結(jié)尾添加分號,使用分號的另一用處是在一行中編寫多條語句。提示:您也可能看到不帶有分號的案例,在 JavaScript 中,用分號來結(jié)束語句是可選的

2.JavaScript 代碼塊,JavaScript 語句通過代碼塊的形式進(jìn)行組合,塊由左花括號開始,由右花括號結(jié)束。

塊的作用是使語句序列一起執(zhí)行。

3.JavaScript 對大小寫敏感。

當(dāng)編寫 JavaScript 語句時,請留意是否關(guān)閉大小寫切換鍵。函數(shù) getElementById 與 getElementbyID 是不同的,同樣,變量 myVariable 與 MyVariable 也是不同的。

4.對代碼行進(jìn)行折行 ? 您可以在文本字符串中使用反斜杠對代碼行進(jìn)行換行。下面的例子會正確地顯示:

document.write("Hello \\

World!");

提示:JavaScript 是腳本語言。瀏覽器會在讀取代碼時,逐行地執(zhí)行腳本代碼。而對于傳統(tǒng)編程來說,會在執(zhí)行前對所有代碼進(jìn)行編譯。

5.JavaScript 不會執(zhí)行注釋。我們可以添加注釋來對 JavaScript 進(jìn)行解釋,或者提高代碼的可讀性。

單行注釋以 // 開頭。 ?多行注釋以 /* 開始,以 */ 結(jié)尾。

6.JavaScript 變量 ?(1)變量必須以字母開頭 ?(2)變量也能以 $ 和 _ 符號開頭(不過我們不推薦這么做)

(3)變量名稱對大小寫敏感(y 和 Y 是不同的變量)

7.聲明(創(chuàng)建) JavaScript 變量 ? var 變量名 ? ?例如: var carname;

8.一條語句,多個變量 ?您可以在一條語句中聲明很多變量。該語句以 var 開頭,并使用逗號分隔變量即可:

var name="Gates", age=56, job="CEO";聲明也可橫跨多行。

9.JavaScript 數(shù)據(jù)類型 ? ?字符串、數(shù)字、布爾、數(shù)組、對象、Null、Undefined

JavaScript 擁有動態(tài)類型。這意味著相同的變量可用作不同的類型。

字符串可以是引號中的任意文本。您可以使用單引號或雙引號。

JavaScript 只有一種數(shù)字類型。數(shù)字可以帶小數(shù)點(diǎn),也可以不帶。

avaScript 布爾(邏輯)只能有兩個值:true 或 false。

10.JavaScript 對象由花括號分隔。在括號內(nèi)部,對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔: ?var person={firstname:"Bill", lastname:"Gates", id:5566};

對象屬性有兩種尋址方式:name=person.lastname; ?name=person["lastname"];

11.聲明變量類型

當(dāng)您聲明新變量時,可以使用關(guān)鍵詞 "new" 來聲明其類型:

var carname=new String;

var x= ? ? ?new Number;

var y= ? ? ?new Boolean;

var cars= ? new Array;

var person= new Object;

JavaScript 變量均為對象。當(dāng)您聲明一個變量時,就創(chuàng)建了一個新的對象。


JavaScript 對象


JavaScript 中的所有事物都是對象:字符串、數(shù)字、數(shù)組、日期,等等,在 JavaScript 中,對象是擁有屬性和方法的數(shù)據(jù)。

1.屬性和方法 ? 屬性是與對象相關(guān)的值;方法是能夠在對象上執(zhí)行的動作。(點(diǎn)語法)

屬性:car.name=Fiat ? 方法:car.start()

2.JavaScript函數(shù)是由事件驅(qū)動的或者當(dāng)它被調(diào)用時執(zhí)行的可重復(fù)使用的代碼塊。

函數(shù)就是包裹在花括號中的代碼塊,前面使用了關(guān)鍵詞 function:

function functionname()

{ ?這里是要執(zhí)行的代碼 ?} ? ? 當(dāng)調(diào)用該函數(shù)時,會執(zhí)行函數(shù)內(nèi)的代碼。

可以在某事件發(fā)生時直接調(diào)用函數(shù)(比如當(dāng)用戶點(diǎn)擊按鈕時),并且可由 JavaScript 在任何位置進(jìn)行調(diào)用。

提示:JavaScript 對大小寫敏感。關(guān)鍵詞 function 必須是小寫的,并且必須以與函數(shù)名稱相同的大小寫來調(diào)用函數(shù)。

例如: function myFunction() ? ? ? {alert("Hello World!");}

您可以發(fā)送任意多的參數(shù),由逗號 (,) 分隔:myFunction(argument1,argument2)

當(dāng)您聲明函數(shù)時,請把參數(shù)作為變量來聲明:function myFunction(var1,var2) ? ?{ ?這里是要執(zhí)行的代碼 ?}

變量和參數(shù)必須以一致的順序出現(xiàn)。第一個變量就是第一個被傳遞的參數(shù)的給定的值,以此類推。

帶有返回值的函數(shù) ? ?有時,我們會希望函數(shù)將值返回調(diào)用它的地方。

通過使用 return 語句就可以實(shí)現(xiàn)。在使用 return 語句時,函數(shù)會停止執(zhí)行,并返回指定的值。

語法 ? function myFunction() ? ? ?{var x=5;return x;}

3.

局部 JavaScript 變量 在 JavaScript 函數(shù)內(nèi)部聲明的變量(使用 var)是局部變量,所以只能在函數(shù)內(nèi)部訪問它。(該變量的作用域是局部的)。

您可以在不同的函數(shù)中使用名稱相同的局部變量,因?yàn)橹挥新暶鬟^該變量的函數(shù)才能識別出該變量。

只要函數(shù)運(yùn)行完畢,本地變量就會被刪除。

全局 JavaScript 變量

在函數(shù)外聲明的變量是全局變量,網(wǎng)頁上的所有腳本和函數(shù)都能訪問它。

JavaScript 變量的生存期

JavaScript 變量的生命期從它們被聲明的時間開始。

局部變量會在函數(shù)運(yùn)行以后被刪除。

全局變量會在頁面關(guān)閉后被刪除。

4.JavaScript 算術(shù)運(yùn)算符

算術(shù)運(yùn)算符用于執(zhí)行變量與/或值之間的算術(shù)運(yùn)算。

算數(shù)運(yùn)算符

JavaScript 賦值運(yùn)算符

賦值運(yùn)算符用于給 JavaScript 變量賦值。

復(fù)制運(yùn)算符

5. ?用于字符串的 + 運(yùn)算符

+ 運(yùn)算符用于把文本值或字符串變量加起來(連接起來)。

如需把兩個或多個字符串變量連接起來,請使用 + 運(yùn)算符。

txt1="What a very";

txt2="nice day";

txt3=txt1+txt2;

在以上語句執(zhí)行后,變量 txt3 包含的值是 "What a verynice day"。 ?空格自己可以加。

6.JavaScript 比較和邏輯運(yùn)算符 ? ? 比較和邏輯運(yùn)算符用于測試 true 或 false。

比較運(yùn)算符在邏輯語句中使用,以測定變量或值是否相等。

比較運(yùn)算符

邏輯運(yùn)算符用于測定變量或值之間的邏輯。

邏輯運(yùn)算符

條件運(yùn)算符 ? JavaScript 還包含了基于某些條件對變量進(jìn)行賦值的條件運(yùn)算符。

條件運(yùn)算符

7.JavaScript If...Else 語句 ? ? ?條件語句用于基于不同的條件來執(zhí)行不同的動作。

條件語句

通常在寫代碼時,您總是需要為不同的決定來執(zhí)行不同的動作。您可以在代碼中使用條件語句來完成該任務(wù)。

在 JavaScript 中,我們可使用以下條件語句:

if 語句 - 只有當(dāng)指定條件為 true 時,使用該語句來執(zhí)行代碼

if...else 語句 - 當(dāng)條件為 true 時執(zhí)行代碼,當(dāng)條件為 false 時執(zhí)行其他代碼

if...else if....else 語句 - 使用該語句來選擇多個代碼塊之一來執(zhí)行

switch 語句 - 使用該語句來選擇多個代碼塊之一來執(zhí)行

If 語句 ?只有當(dāng)指定條件為 true 時,該語句才會執(zhí)行代碼。

語法 ? ?if (條件) ?{ ?只有當(dāng)條件為 true 時執(zhí)行的代碼 ? }

注意:請使用小寫的 if。使用大寫字母(IF)會生成 JavaScript 錯誤!

If...else 語句

請使用 if....else 語句在條件為 true 時執(zhí)行代碼,在條件為 false 時執(zhí)行其他代碼。

語法 ? ?if (條件) ? ?{ ?當(dāng)條件為 true 時執(zhí)行的代碼 }

else ?{ ?當(dāng)條件不為 true 時執(zhí)行的代碼 ?}

If...else if...else 語句 ? ? ? ?使用 if....else if...else 語句來選擇多個代碼塊之一來執(zhí)行。

語法 ? if (條件 1) ? { 當(dāng)條件 1 為 true 時執(zhí)行的代碼 ?}

else if (條件 2) ?{ ? 當(dāng)條件 2 為 true 時執(zhí)行的代碼 ?}

else ? { ?當(dāng)條件 1 和 條件 2 都不為 true 時執(zhí)行的代碼 ?}

8.switch 語句用于基于不同的條件來執(zhí)行不同的動作。

JavaScript Switch 語句 ? 請使用 switch 語句來選擇要執(zhí)行的多個代碼塊之一。

語法 ?switch(n){ ?

case 1: ? ?執(zhí)行代碼塊 1 ? ? ? ? ? ? break;

case 2: ? ?執(zhí)行代碼塊 2 ? ? ? ? ? ? break;

default: ? ? ? ? ?n 與 case 1 和 case 2 不同時執(zhí)行的代碼 ? ? ? ? }

請注意 ?default ?這個關(guān)鍵字

9.JavaScript For 循環(huán) ? ? ? ? ?循環(huán)可以將代碼塊執(zhí)行指定的次數(shù)。

JavaScript 支持不同類型的循環(huán):

for - 循環(huán)代碼塊一定的次數(shù)

for/in - 循環(huán)遍歷對象的屬性

while - 當(dāng)指定的條件為 true 時循環(huán)指定的代碼塊

do/while - 同樣當(dāng)指定的條件為 true 時循環(huán)指定的代碼塊

(1) For 循環(huán)

下面是 for 循環(huán)的語法:

for (語句 1; 語句 2; 語句 3)

{ ? 被執(zhí)行的代碼塊 }

語句 1 在循環(huán)(代碼塊)開始前執(zhí)行

語句 2 定義運(yùn)行循環(huán)(代碼塊)的條件

語句 3 在循環(huán)(代碼塊)已被執(zhí)行之后執(zhí)行

(2)For/In 循環(huán)

JavaScript ? for/in 語句循環(huán)遍歷對象的屬性:例如:

var person={fname:"John",lname:"Doe",age:25};

for (x in person)

{ ? txt=txt + person[x]; ?} ?結(jié)果第這樣的:JohnDoe25

(3)while 循環(huán)會在指定條件為真時循環(huán)執(zhí)行代碼塊。

語法 ? ? ?while (條件) ? ? ? ?{需要執(zhí)行的代碼}

(4)do/while 循環(huán) 是 while 循環(huán)的變體。該循環(huán)會執(zhí)行一次代碼塊,在檢查條件是否為真之前,然后如果條件為真的話,就會重復(fù)這個循環(huán)。

語法 ? do

? ? ? ? { 需要執(zhí)行的代碼 ?}

? ? ? ? while (條件);

10 . JavaScript Break 和 Continue 語句

? ?break 語句用于跳出循環(huán),continue 用于跳過循環(huán)中的一個迭代。

Break 語句 ? 它用于跳出 switch() 語句,break 語句可用于跳出循環(huán)。

Continue 語句中斷循環(huán)中的迭代,如果出現(xiàn)了指定的條件,然后繼續(xù)循環(huán)中的下一個迭代。

例子跳過了值 3:實(shí)例for (i=0;i<=10;i++) { if (i==3) continue; ?x=x + "The number is " + i + "<br>"; ?}

11. JavaScript 錯誤 - Throw、Try 和 Catch

try 語句測試代碼塊的錯誤。

catch 語句處理錯誤。

throw 語句創(chuàng)建自定義錯誤。

錯誤一定會發(fā)生

當(dāng) JavaScript 引擎執(zhí)行 JavaScript 代碼時,會發(fā)生各種錯誤:

可能是語法錯誤,通常是程序員造成的編碼錯誤或錯別字。

可能是拼寫錯誤或語言中缺少的功能(可能由于瀏覽器差異)。

可能是由于來自服務(wù)器或用戶的錯誤輸出而導(dǎo)致的錯誤。

當(dāng)然,也可能是由于許多其他不可預(yù)知的因素。

JavaScript 測試和捕捉

try 語句允許我們定義在執(zhí)行時進(jìn)行錯誤測試的代碼塊。

catch 語句允許我們定義當(dāng) try 代碼塊發(fā)生錯誤時,所執(zhí)行的代碼塊。

JavaScript 語句 try 和 catch 是成對出現(xiàn)的。

語法 ?try ? ? ? 重點(diǎn)

{ ? //在這里運(yùn)行代碼 ? ?}

catch(err)

{ ?//在這里處理錯誤 ?}

Throw 語句

throw 語句允許我們創(chuàng)建自定義錯誤。

正確的技術(shù)術(shù)語是:創(chuàng)建或拋出異常(exception)。

如果把 throw 與 try 和 catch 一起使用,那么您能夠控制程序流,并生成自定義的錯誤消息。

語法

throw exception

異常可以是 JavaScript 字符串、數(shù)字、邏輯值或?qū)ο?/p>

12. JavaScript 表單驗(yàn)證 ?可用來在數(shù)據(jù)被送往服務(wù)器前對 HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證

被 JavaScript 驗(yàn)證的這些典型的表單數(shù)據(jù)有:

(1)用戶是否已填寫表單中的必填項(xiàng)目?

(2)用戶輸入的郵件地址是否合法?

(3)用戶是否已輸入合法的日期?

(4)用戶是否在數(shù)據(jù)域 (numeric field) 中輸入了文本?

下面的函數(shù)用來檢查用戶是否已填寫表單中的必填(或必選)項(xiàng)目。假如必填或必選項(xiàng)為空,那么警告框會彈出,并且函數(shù)的返回值為 false,否則函數(shù)的返回值則為 true(意味著數(shù)據(jù)沒有問題):

function validate_required(field,alerttxt)

{

with (field)

{

? if (value==null||value=="")

? {alert(alerttxt);return false}

? else {return true}

} ? ? ? }

請參考以下鏈接代碼 ?驗(yàn)證代碼

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,048評論 6 542
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,414評論 3 429
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,169評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,722評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,465評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,823評論 1 328
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,813評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 43,000評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,554評論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,295評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,513評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,035評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,722評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,125評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,430評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,237評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,482評論 2 379

推薦閱讀更多精彩內(nèi)容

  • FreeCodeCamp - Basic JavaScript 寫在前面: 我曾經(jīng)在進(jìn)谷前刷過這一套題,不過當(dāng)時只...
    付林恒閱讀 16,475評論 5 28
  • 原文: https://github.com/ecomfe/spec/blob/master/javascript...
    zock閱讀 3,391評論 2 36
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語法,類相關(guān)的語法,內(nèi)部類的語法,繼承相關(guān)的語法,異常的語法,線程的語...
    子非魚_t_閱讀 31,733評論 18 399
  • 嗚~嗚~嗚~嗚 oh.oh.oh.oh.oh.o.o.oh! 快點(diǎn)!快點(diǎn)!快點(diǎn)!快點(diǎn)跟我們走! 加入我們,加入我們...
    花念凡閱讀 208評論 0 0
  • 如果斷網(wǎng)了,該怎么辦。忙碌了好久,終于抽出來兩天的時間可以上網(wǎng)做做出行的攻略了。結(jié)果,斷網(wǎng)了。這個樣子就太不好了。...
    小花Ivan閱讀 510評論 0 0