[JavaScript] JavaScript 介紹

[JavaScript] JavaScript介紹與HTML DOM結構

JavaScript介紹

JavaScriptHTMLWeb的程式語言,控制網頁的內容與使用者互動。

HTML DOM(Document Object Model)可以讓JavaScript取得、改變HTML文件裡的元素。當網頁載入時,瀏覽器會在頁面產生各個物件。

JavaScriptd可以利用這些物件進行HTML元素、屬性、事件與CSS的操作。

HTML DOM結構:

HTML 程式碼:

接著為幾個JavaScript的範例。

 

JavaScript變更HTML的內容

使用JavaScript變更HTML元素的內容:

<!DOCTYPE html>
<html>
<body>

    <p id="demo">點擊按鈕變換文字</p>

    <button type="button" onclick="document.getElementById('demo').innerHTML= 'Hello JavaScript'">按鈕</button>

</body>
</html>

在button中的onclick事件加入document.getElementById('demo').innerHTML= 'Hello JavaScript'。

document 表示該頁面HTML的內容。

getElementById('demo') 是document 的一個方法,會依照參數demo找到id="demo"的HTML元素。

innerHTML= ' ' 指定HTML內容。

 

文字變更前

按下按鈕後

 

JavaScript變更HTML的屬性

變更<img>的src屬性來改變HTML的圖片:

<!DOCTYPE html>
<html>
<body>

    <img id="myImage" src="~/Image/Red.png"><br>

    <button onclick="document.getElementById('myImage').src = '/Image/Red.png'">紅色</button>

    <button onclick="document.getElementById('myImage').src = '/Image/Yellow.png'">黃色</button>

</body>
</html>

在button中的onclick事件加入document.getElementById('myImage').src='圖片位置'。

document 表示該頁面HTML的內容。

getElementById('myImage') 是document 的一個方法,會依照參數myImage找到id="myImage"的HTML元素。

src=' ' 指定圖片。

 

按下紅色按鈕

按下黃色按鈕

 

JavaScript變更HTML的CSS樣式

變更HTML元素style屬性的文字大小:

<!DOCTYPE html>
<html>
<body>

    <p id="demo">JavaScript變更HTML的CSS樣式</p>

    <button onclick="document.getElementById('demo').style.fontSize='40px'">變更CSS屬性</button>

</body>
</html>

在button中的onclick事件加入document.getElementByIs('demo').style.fontSize='40px'。

document 表示該頁面HTML的內容。

getElementById('demo') 是document 的一個方法,會依照參數demo找到id="demo"的HTML元素。

style 表示HTML元素的屬性。

fontSize=' ' 表示style項目。

 

CSS樣式變更前

按下變更CSS屬性按鈕後

 

JavaScript隱藏HTML元素

變更HTML元素style屬性的display:

<!DOCTYPE html>
<html>
<body>

    <p id="demo">demo</p>

    <button onclick="document.getElementById('demo').style.display='none'">隱藏</button>

</body>
</html>

在button中的onclick事件加入document.getElementByIs('demo').style.display='none'。

document 表示該頁面HTML的內容。

getElementById('demo') 是document 的一個方法,會依照參數demo找到id="demo"的HTML元素。

style 表示HTML元素的屬性。

display='none ' display為none表示不顯示

 

文字隱藏前

按下隱藏按鈕後

 

JavaScript顯示HTML元素

在上面的隱藏範例中,新增一個顯示的按鈕:

<!DOCTYPE html>
<html>
<body>

    <p id="demo">demo</p>

    <button onclick="document.getElementById('demo').style.display='none'">隱藏</button>
    <button onclick="document.getElementById('demo').style.display='block'">顯示</button>

</body>
</html>

在button中的onclick事件加入document.getElementByIs('demo').style.display='none'。

document 表示該頁面HTML的內容。

getElementById('demo') 是document 的一個方法,會依照參數demo找到id="demo"的HTML元素。

style 表示HTML元素的屬性。

display='block' display為block表示顯示

 

文字隱藏時

按下顯示按鈕後

 

JavaScript的編寫位置

JavaScript可以寫在HTML的<head><body>標籤裡,並用<script></script>包覆。

寫在<head>的好處是在載入<body>前,JavaScript會在<head>就已經完全載入好。

另外JavaScript也可以寫在</html>之後,好處則是不會影響到HTML的內容。

例如:

<script>
document.getElementById("demo").innerHTML = "This is a deom";
</script>

 

JavaScript的Function與事件

JavaScript的程式碼可以寫在function裡,並於呼叫時執行。

例如,當按下一個按鈕時觸發事件,接著執行function:

<!DOCTYPE html>

<html>

<head>
    <title> Title</title>
    <script>
        function Click()
        {
            document.getElementById("demo").innerHTML = "Hello Javascript";
        }
    </script>
</head>

<body>

    <h1 id="demo">Hello World</h1>

    <button type="button" onclick="Click()">按鈕</button>

</body>

</html>

<script>加入function Click()

document 表示該頁面HTML的內容。

getElementById('demo') 是document 的一個方法,會依照參數demo找到id="demo"的HTML元素。

innerHTML= ' ' 指定HTML內容。

<button>中的onclick事件加入Click()

 

按下按鈕前:

按下按鈕後:

在上面的程式碼中,JavaScript的function寫在<head>標籤裡,也可以將function寫在<body>裡。

例如:

<!DOCTYPE html>

<html>

<head>
    <title> Title</title>
</head>

<body>

    <h1 id="demo">Hello World</h1>

    <button type="button" onclick="Click()">按鈕</button>

    <script>
    function Click() 
    {
        document.getElementById("demo").innerHTML = "Hello Javascript";
    }
    </script>

</body>

</html>

將JavaScript放置在<body>的好處是網頁會在顯示所有HTML內容後,才會載入JavaScript。這樣能夠加快網頁的載入速度。

 

外部的JavaScript檔

JavaScript也可以放在外部的檔案,並於網頁中引用使用。

當同樣的JavaScript需要在多個網頁中使用時就可以省去在每個網頁編寫的時間,程式碼也會更簡潔更容易閱讀與維護。除此之外,也能夠讓網頁的載入速度加快。

新增一個JS檔,內容如下:

function Click()
{
    document.getElementById("demo").innerHTML = "Hello Javascript";
}

在HTML裡引用JS檔:

<!DOCTYPE html>

<html>

<head>
    <title> Title</title>
</head>

<body>

    <h1 id="demo">Hello World</h1>

    <button type="button" onclick="Click()">按鈕</button>

    <script src="~/Scripts/myJavascript.js"></script>

</body>

</html>

 

 END 

回目錄