1. 程式人生 > >【JavaScript學習筆記】1:js的書寫,顯示資料,變數,函式

【JavaScript學習筆記】1:js的書寫,顯示資料,變數,函式

JavaScript描述的是網頁的行為,可以直接改變HTML而改變網頁的內容,或者提供和使用者的互動。

js寫在哪裡

①直接寫入HTML

JavaScript可以寫在HTML的script雙標籤裡,一般把這個雙標籤放在HEAD頭裡:

<!DOCTYPE HTML>
<HTML>

<!-- script標籤一般寫在HEAD標籤裡 -->
<HEAD>
    <meta charset="utf-8">
    <!-- 這裡type可以省略,預設就是JavaScript -->
    <script
type="text/javascript">
alert("你好!");//在JavaScript裡註釋又變成了雙斜槓 </script> </HEAD> <BODY> </BODY> </HTML>

這裡寫圖片描述

②寫入.js檔案

js還可以單獨寫到一個.js檔案裡,然後在HTML的script雙標籤裡用src指定其位置,如下面是myjs.js內容:

alert("你好!");

然後在.html檔案裡:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8"> <script src=".\myjs.js"></script> </HEAD> <BODY> </BODY> </HTML>

這裡寫圖片描述

③在瀏覽器控制檯執行

js可以在瀏覽器控制檯console直接執行,這樣可以方便學習,在谷歌瀏覽器F12就可以開啟控制檯:
這裡寫圖片描述
如果不加分號也可以,不過瀏覽器在執行js程式碼時會自己加上,廖老師指出為了避免這個自動化過程出現歧義,還是應當養成加分號的習慣。
這裡寫圖片描述
一些比較短的程式碼在這裡寫感覺非常方便,不然還要重新整理瀏覽器頁面。

顯示資料

①警告框

window.alert("警告框");

這個就是剛才那個alert方法。
這裡寫圖片描述

②改變HTML內容以顯示

document.getElementById()方法獲取指定id的HTML標籤物件,然後為其innerHTML屬性賦新的值就可以改變這個標籤了。為了能切實獲得這個標籤,script標籤應該在這個要操作的標籤之後,所以乾脆把HEAD標籤放在BODY標籤後面好了:

document.getElementById("ok").innerHTML="修改後的內容";
<!DOCTYPE HTML>
<HTML>
<BODY>
    <p id="ok">我是ok</p>
</BODY>

<HEAD>
    <meta charset="utf-8">
    <script src=".\myjs.js"></script>
</HEAD>
</HTML>

這裡寫圖片描述
另外,document.write()可以把內容直接追加到頁面上,但如果在文件已完成載入後執行document.write(),整個 HTML 頁面將被覆蓋(可以在已經載入好的頁面開啟控制檯,然後用用一下這個函式試一下)。

③寫到控制檯

console.log方法可以把資訊寫到瀏覽器控制檯,如:

console.log("okok");

可以在控制檯看到okok字樣,這個主要是用來方便除錯的。

變數

js裡用var來宣告變數,用等號賦值後才能使用:

var x,y;
undefined
y;
undefined
y=10;
10
y;
10

或者在宣告時候就為其初始化:

var k=100;
undefined
k;
100

runoob教程裡把固定的值稱為字面量,可以用不同型別的字面量去初始化不同型別的資料。除了數字字面量外,還有如字串(String)字面量:

var x="小賢是基佬";
undefined
x;
"小賢是基佬"

表示式字面量(js裡這樣去理解表示式好新奇):

var y=10;
undefined
var x=y*5; //表示式字面量
undefined
x;
50

陣列(Array)字面量(這裡的陣列好像python的list):

var x=[1,2.3,"牛逼"];
undefined
x;
[1, 2.3, "牛逼"]

物件(Object)字面量(看起來好像python的字典,鍵值對裡鍵不能重複,正如物件的屬性不必重複,而鍵對應著一個值,正如物件的屬性的值,這個js裡的理解也很新奇):

var x={"性別":"男","職業":"基佬","年齡":20};
undefined
x;
Object {性別: "男", 職業: "基佬", 年齡: 20}

函式

在js裡函式也被視為一種字面量,函式是能被重複使用的js程式碼,用function關鍵字去定義一個函式:

function myfun(a,b){return a*b};
undefined
myfun("ok",2);
NaN
myfun(3,2);
6

這裡NaN表示Not a Number,而且當不能計算結果的時候也會返回一個NaN。
關於NaN,廖老師指出了用==或者===比較時,NaN這個值和誰都不相等,包括它自己:

NaN==6;
false
NaN==NaN;
false
NaN===6;
false
NaN===NaN;
false

如果要去判斷一個東西的值是NaN,只能用isNaN()函式傳入這個值來判斷:

isNaN(NaN);
true

關於js裡的==和===,廖老師指出了==是會自動轉換資料型別再做比較的,而===不會,所以一般都是用===來作比較,不然會出現一些莫名其妙的不相等卻被比較成了相等的情況:

true==1;
true
true==7;
false
true===1;
false