本文翻译youtube上的up主kudvenkat的javascript tutorial播放单
源地址在此:
https://www.youtube.com/watch?v=PMsVM7rjupU&list=PL6n9fhu94yhUA99nOsJkKXBqokT3MBK0b
本次视频中我们将讨论
1.Javascript可以出现的不同位置
2.外置Javascript相较于内联Javascript的好处
Javascript代码可以出现在网页中的任意位置或者是外置一个.js的文件.我们来看看两种方法的例子
内联Javascript例子: 在这个例子中, 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]
外置Javascript例子: 将Javascript储存在外部.js文件中的步骤
1.在Visual Studio中,在Solution Explorer中右键点击一个项目名然后选择添加新项目
2.在"添加新项目"对话框中选择"JScript文件".然后将文件命名为"ExternalJavaScript.js"然后点击添加
3.复制粘贴如下的Javascript函数到"ExternalJavasScript.js"文件
function IsEven() { var number = document.getElementById("TextBox1").value; if (number % 2 == 0) { alert(number + " is even number"); } else { alert(number + " is odd number"); } }
4.在网页的<head>部分添加指向外置JS文件的路径,如下所示
[script type="text/javascript" src="ExternalJavaScript.js"][/script]
5.到此为止,在你的网页上,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]
使用外置Javascript相较于内联Javascript的好处在于:
可维护性:外置Javascript文件可以被多个页面调用而不用在每个页面上反复地书写.如果有需要改变的部分,你只需要在一处修改即可.所以外置Javascript导致代码工作量减少,进而使得维护手续也更加方便
关注点分离:将Javascript封装在外部的.js文件遵循了关注点分离的法则.总体来说,分离HTML,CSS和Javascript从而让我们更容易操纵他们.而且如果是多名开发者同步工作的话,这样也更方便,
表现性:外置Javascript文件可以被浏览器缓存住,但是内联Javascript在每次页面加载的哦时候都会被重新加载