JavaScript學習

菜鳥教程:https://www.runoob.com/js/js-tutorial.html


1.js的用法.

????HTML 中的腳本必須位于 <script> 與 </script> 標簽之間。腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。 如果要在在 HTML 頁面中插入 JavaScript,要使用 <script> 標簽。<script>開始js,</script>結束js,js代碼寫在<script>標簽中。

????也可以把腳本保存到外部文件中,如果要使用外部文件,要在 <script> 標簽的 "src" 屬性中設置該 .js 文件:

? ??????<script src="myScript.js"></script>

2.js輸出.

????JavaScript 可以通過不同的方式來輸出數據:

????(1)使用?window.alert()?彈出警告框。

????(2)使用?document.write()?方法將內容寫到 HTML 文檔中。注意:?document.write() 僅僅向文檔輸出寫內容。如果在文檔? 已完成加載后執行 document.write,整個HTML 頁面將被覆蓋??梢允褂?document.getElementById(id) 方法操作HTML元素。使用方法為:

? ? ? ? ? ?document.getElementById("demo").innerHTML = "段落已修改。";//修改元素的 HTML 內容

????(3)使用?innerHTML?寫入到 HTML 元素。

????(4)使用?console.log()?寫入到瀏覽器的控制臺。

3.js語法

????1.JavaScript 字面量:

????(1)數字(Number)字面量?可以是整數或者是小數,或者是科學計數(e)。:

3.1415

9999

123e5

????(2)字符串(String)字面量可以使用單引號或雙引號:

"hello word"

'hello word'

????(3)表達式字面量?用于計算:

5*6

document.getElementById("demo").innerHTML = 5 * 6;? //? ? 向html頁面輸出30

????(4)數組(Array)字面量?定義一個數組:

[10,20,30,40,50,]

????(5)對象(Object)字面量?定義一個對象:

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

????(6)函數(Function)字面量?定義一個函數:

function myFunction(a, b) { return a * b;}

2.JavaScript 變量:

????js 使用關鍵字?var?來定義變量, 使用等號來為變量賦值:

var x = 10;? //聲明變量x,將10這個值賦給它

3.js語句

????JavaScript 語句是發給瀏覽器的命令,這些命令的作用是告訴瀏覽器要做的事情。如:

document.getElementById("demo").innerHTML = "你好 Dolly"; //向html頁面輸出? 你好 Dolly

4.js注釋

????單行注釋以?//?開頭。如:

var x = 1 //聲明變量x,將1這個值賦給它

????多行注釋以?/*?開始,以?*/?結尾。如

/*?

? ? 這里面的代碼都不會執行。

*/

5.js變量

????變量是用于存儲信息的"容器"。如:

var x = 1;

var user = 2;

????變量必須以字母開頭,變量也能以 $ 和 _ 符號開頭,變量名稱對大小寫敏感(y 和 Y 是不同的變量)

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

????????var lastname="Doe", age=30, job="carpenter";

????聲明也可橫跨多行:

????????var lastname="Doe",

? ? ????? ?????age=30,

? ? ????????? ?job="carpenter";

????一條語句中聲明的多個不可以賦同一個值:

? ? ? ? ? ? ?var x,y,z=1;? //x,y 為 undefined, z 為 1。

6.js的數據類型

? ??值類型(基本類型):字符串(String)、數字(Number)、布爾(Boolean)、對空(Null)、未定義(Undefined)、Symbol。? ? ??注:Symbol 是 ES6 引入了一種新的原始數據類型,表示獨一無二的值。

? ??引用數據類型:對象(Object)、數組(Array)、函數(Function)。

7.js的對象

????在 JavaScript中,幾乎所有的事物都是對象。

????1.對象定義

????可以使用字符來定義和創建 JavaScript 對象:

var?person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

????定義 JavaScript 對象可以跨越多行,空格跟換行不是必須的:

var?person = {??? firstName:"John",???

? ? ? ? ? ? ? ? ? ? ? ? ? ?lastName:"Doe",???

? ? ? ? ? ? ? ? ? ? ? ? ? ?age:50,

? ? ? ? ? ? ? ? ? ? ? ? ? ?eyeColor:"blue"};

????2.對象屬性

????JavaScript 對象是屬性變量的容器。鍵值對通常寫法為?name : value?(鍵與值以冒號分割)。鍵值對在 JavaScript 對象通常稱為?對象屬性

8.js函數

????函數語法:

function?functionname()

{

// 執行代碼? ? //? ? ? ? ? ? 函數就是包裹在花括號中的代碼塊,前面使用了關鍵詞 function:

}

????當調用該函數時,會執行函數內的代碼。可以在某事件發生時直接調用函數(比如當用戶點擊按鈕時),并且可由 JavaScript 在任何位置進行調用。

????調用帶參數的函數:

????在調用函數時,您可以向其傳遞值,這些值被稱為參數。這些參數可以在函數中使用。

您可以發送任意多的參數,由逗號 (,) 分隔:

myFunction(argument1,argument2)

當您聲明函數時,請把參數作為變量來聲明:

function myFunction(var1,var2){

代碼

}

????帶有返回值的函數:

????函數將值返回調用它的地方。通過使用 return 語句就可以實現。在使用 return 語句時,函數會停止執行,并返回指定的值。

????語法:

function myFunction(){???

?var x=5;

?return x;

}? //函數會返回值 5。整個 JavaScript 并不會停止執行,僅僅是函數。JavaScript 將繼續執行代碼,從調用函數的地方。

9.js作用域

????作用域是可訪問變量的集合。在 JavaScript 中, 對象和函數同樣也是變量,作用域為可訪問變量,對象,函數的集合。

????1.JavaScript 局部作用域

????變量在函數內聲明,變量為局部作用域。

// 此處不能調用 carName 變量,局部變量:只能在函數內部訪問。

function myFunction() {

????var carName = "Volvo";

????// 函數內可調用 carName 變量

}

????因為局部變量只作用于函數內,所以不同的函數可以使用相同名稱的變量。局部變量在函數開始執行時創建,函數執行完后局部變量會自動銷毀。

????2.JavaScript 全局變量

????變量在函數外定義,即為全局變量。

var carName = " Volvo";? ? ?全局變量有s全局作用域: 網頁中所有腳本和函數均可使用。

// 此處可調用 carName 變量

function myFunction() {

? ? // 函數內可調用 carName 變量

}

????如果變量在函數內沒有聲明(沒有使用 var 關鍵字),該變量為全局變量。如:

// 此處可調用 carName 變量

function myFunction() {

????carName = "Volvo";

????// 此處可調用 carName 變量

}

????3.JavaScript 變量生命周期

????JavaScript 變量生命周期在它聲明時初始化。局部變量在函數執行完畢后銷毀。全局變量在頁面關閉后銷毀。

10.js比較

? ??比較運算符:

????????????邏輯運算符:

11.js條件語句

? ??1.? if 語句:只有當指定條件為 true 時,該語句才會執行代碼。?

????語法:? ??

if (condition){?

???當條件為 true 時執行的代碼

}? ?//?請使用小寫的?if。使用大寫字母(IF)會生成 JavaScript 錯誤!

? ??2.? if...else 語句:請使用 if....else 語句在條件為 true 時執行代碼,在條件為 false 時執行其他代碼。

????語法:

if (condition){?

???當條件為 true 時執行的代碼

}else{?

???當條件不為 true 時執行的代碼

}

? ??3.? if...else if...else 語句:使用 if....else if...else 語句來選擇多個代碼塊之一來執行。

????語句:

if (condition1){

????當條件 1 為 true 時執行的代碼

}else if (condition2){

????當條件 2 為 true 時執行的代碼

}else{

? 當條件 1 和 條件 2 都不為 true 時執行的代碼

}

? ??4.??switch 語句:使用 switch 語句來選擇要執行的多個代碼塊之一。

????語句:

switch(n){

case 1: 執行代碼塊 1

break;

case 2: 執行代碼塊 2

break;

default: 與 case 1 和 case 2 不同時執行的代碼

}

????工作原理:首先設置表達式?n(通常是一個變量)。隨后表達式的值會與結構中的每個 case 的值做比較。如果存在匹配,則與該 case 關聯的代碼塊會被執行。請使用?break?來阻止代碼自動地向下一個 case 運行。

? ??default 關鍵詞:規定匹配不存在時做的事情。

12.js 循環語句

? ??for循環語句:

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

{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//語句 1?(代碼塊)開始前執行

???被執行的代碼塊? ? ? ? ? ? ? ? ?//語句 2?定義運行循環(代碼塊)的條件

}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //語句 3?在循環(代碼塊)已被執行之后執行

? ??while循環語句:

? ? //? ?while 循環會在指定條件為真時循環執行代碼塊。

while (條件)

{

????需要執行的代碼

}

? ??do/while 循環:

?//? ?do/while 循環是 while 循環的變體。該循環會在檢查條件是否為真之前執行一次代碼塊,然后如果條件為真的話,就會重復這個循環。

do {? ??

需要執行的代碼?

}

while (條件);?

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