了解內聯和外聯css,js文件



內聯CSS也可稱為行內CSS或者行級CSS,它直接在標簽內部引入。

優點:便捷、高效

缺點:不能夠重用樣式

代碼樣式:

<p style="color:red;font-size:18px">這里文字是紅色。</p>

外部式css樣式(也可稱為外聯式)就是把css代碼寫一個單獨的外部文件中,這個css樣式文件以“.css”為擴展名,在內使用標簽將css樣式文件鏈接到HTML文件內。

代碼樣式:

<link href="base.css" rel="stylesheet" type="text/css" />
1
內聯JS
代碼示例:

下面的IsEven() 函數是以內聯的方式出現在網頁中的.

[html]
[head]
[script type="text/javascript"]
function IsEven()
{
var number = document.getElementById("TextBox1").value;
if (number % 2 == 0)
{
alert(number + " is even number");
}
else
{
alert(number + " is odd number");
}
}
[/script]
[/head]
[body]
[form id="form1" runat="server"]
Number :
[asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox]
[input type="button" value="Check Number" onclick="IsEven()" /]
[/form]
[/body]
[/html]

外聯JS
外部式JS就是把JS代碼寫一個單獨的外部文件中,這個JS文件以“.js”為擴展名。

新建JS文件,命名為ExternalJavaScript.js:
function IsEven()
{
var number = document.getElementById("TextBox1").value;
if (number % 2 == 0)
{
alert(number + " is even number");
}
else
{
alert(number + " is odd number");
}
}

將ExternalJavaScript.js引入到HTML文件中:
[html]
[head]
[script type="text/javascript" src="ExternalJavaScript.js"][/script]
[/head]
[body]
[form id="form1" runat="server"]
Number :
[asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox]
[input type="button" value="Check Number" onclick="IsEven()" /]
[/form]
[/body]
[/html]

使用外部JS相較於內聯JS的優勢:

可維護性:
外置Javascript文件可以被多個頁面調用而不用在每個頁面上反復地書寫.如果有需要改變的部分,你只需要在一處修改即可.所以外置Javascript導致代碼工作量減少,進而使得維護手續也更加方便。

關注點分離:
將Javascript封裝在外部的.js文件遵循了關注點分離的法則.總體來說,分離HTML,CSS和Javascript從而讓我們更容易操縱他們.而且如果是多名開發者同步工作的話,這樣也更方便.

表現性:
外置Javascript文件可以被瀏覽器緩存住,但是內聯Javascript在每次頁面加載的時候都會被重新加載。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM