Javascript是一種廣泛使用的程式語言,可用於Web開發、桌面軟體、行動應用開發等多個領域。本文將介紹如何使用Javascript程式碼,幫助初學者快速上手。 一、建立Javascript程式碼 在HTML檔案中引入Javascript程式碼是最常見的方式。在HTML程式碼中,透過標籤引入Javascript程式碼,例如:</p> <pre><script> // 在这里写JavaScript代码 也可以將Javascript程式碼儲存為單獨的.js文件,然後在HTML檔案中引入。例如,我們可以建立一個名為"script.js"的文件,並在HTML檔案中引用: 二、變數 變數在Javascript中用於儲存資料。建立變數時需要使用關鍵字var,例如: var name = "John"; 上面的程式碼建立了一個變數name,並將字串"John"賦值給這個變數。在Javascript中,變數是動態類型的,也就是變數的類型可以動態變化。例如,我們可以將上面的變數name的值改為數字類型: var name = 10; 變數的名字可以由字母、數字、底線和美元符號組成,但不可以以數字開頭。變數名是區分大小寫的。 三、資料型別 Javascript有多種資料型,包括字串、數字、陣列、物件等。 字串 字串是用來表示文字的資料類型,可以用單引號或雙引號括起來。例如: var name = "John"; var greeting = 'Hello'; 數字 數字在Javascript中有整數和浮點型之分。例如: var age = 18; var price = 9.99; 陣列 陣列是用來儲存一組資料的資料類型。數組的每個元素可以是任意的資料類型。聲明數組時需要使用方括號[],並用逗號分隔每個元素。例如: var fruits = ["apple", "orange", "banana"]; 可以透過索引存取陣列元素,陣列索引從0開始。例如,存取上面數組中的"apple": var fruit = fruits[0]; 物件 #物件是用來描述現實中的事物的資料類型。物件由屬性和方法組成。屬性是物件的特徵,方法是物件的行為。例如: var person = { name: "John", age: 18, sayHello: function() { alert("Hello!"); } }; 上面的程式碼建立了一個person對象,包含名字、年齡和一個sayHello方法。可以透過點號或中括號存取物件的屬性和方法。例如,存取person物件中的名字: var name = person.name; 四、控制流程 控制流程是控製程式執行順序的機制,Javascript提供了多種控制流程的語句。 if語句 if語句用於根據條件執行不同的程式碼區塊。例如: if (age > 18) { alert("You are an adult."); } else { alert("You are a child."); } 上面的程式碼根據變數age的值判斷年齡是否大於18歲,並執行不同的程式碼區塊。 for迴圈 for迴圈用於重複執行相同的程式碼區塊。例如,輸出從1到10的數字: for (var i = 1; i <= 10; i++) { alert(i); } 上面的程式碼使用變數i從1到10依序循環,每次輸出目前的i值。 while循環 while迴圈用於在條件為真時重複執行相同的程式碼區塊。例如,輸出從1到10的數字: var i = 1; while (i <= 10) { alert(i); i++; } 上面的程式碼使用變數i從1開始循環,每次輸出目前的i值,並將i加1,直到i大於10時結束循環。 五、函數 函數是一段完成特定任務的程式碼區塊,可以重複呼叫執行。 Javascript中可以透過關鍵字function來定義函數。例如,定義一個計算兩個數總和的函數: function add(a, b) { return a + b; } 上面的程式碼定義了一個名為add的函數,它接收兩個參數a和b,並傳回它們總和。 六、DOM操作 Javascript可以操作DOM(Document Object Model)樹,實現動態更新HTML頁面的效果。 DOM樹是HTML頁面的一個結構化表示,每個HTML元素都是DOM樹中的一個節點。 Javascript可以透過DOM API來操作這些節點,例如修改元素的內容、屬性、樣式等。 取得元素 可以使用document物件的getElementById、getElementsByClassName、getElementsByTagName等方法來取得HTML元素。例如,取得id為"myDiv"的元素: var myDiv = document.getElementById("myDiv"); 修改元素內容和屬性 可以使用節點的innerHTML、innerText和nodeValue屬性來修改節點的內容。例如,修改id為"myDiv"元素的內容: var myDiv = document.getElementById("myDiv"); myDiv.innerHTML = "Hello World!"; 可以使用節點的getAttribute和setAttribute屬性來修改節點的屬性。例如,修改id為"myLink"元素的href屬性: var myLink = document.getElementById("myLink"); myLink.setAttribute("href", "http://www.example.com"); 修改元素樣式 可以使用節點的style屬性來修改節點的樣式。例如,修改id為"myDiv"元素的背景顏色: var myDiv = document.getElementById("myDiv"); myDiv.style.backgroundColor = "red"; 以上是Javascript程式碼的基礎操作,能夠掌握這些內容後,Javascript的應用範圍將進一步擴大。