本文翻译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 %  == )

            {

                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 %  == )

    {

        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在每次页面加载的哦时候都会被重新加载

[译]内联Javascript vs 外置Javascript的更多相关文章

  1. thymeleaf 内联语法

    十二. thymeleaf内联语法 内联:th:inline,值有三种:text,javascript,none 12.1 th:inline="text"文本内联 <p t ...

  2. （十）Thymeleaf用法——Themeleaf内联

    5. 内联 [[...]]是内联文本的表示格式,但需要使用th:inline属性(分为text,javascript,none)激活. 5.1 文本内联    <p th:inline=&quo ...

  3. javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍) (转载)

    样式表有三种方式: 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效.   (也称作“内联样式”) 内部样式(internal Style Sheet):是写在 ...

  4. JavaScript 获取和修改 内联样式

    JavaScript 获取和修改 内联样式 版权声明:未经授权,严禁转载分享! 元素的样式 HTML 元素的 style 属性返回一个 CSSStyleDeclaration 类型的对象. Style ...

  5. JavaScript的DOM_StyleSheet操作内联或链接样式表

    使用 style 属性,仅仅只能获取和设置行内的样式,如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了,使用 getComputedStyle 和cur ...

  6. thymeleaf的内联th:inline（在javascript访问model中的数据）

    thymeleaf模板引擎为前端数据的获取提供了较大的便利,在html标签内可通过th标签加${}表达式访问model里的对象数据.但如果不想通过th标签而是简单地访问model对象数据,或是想在ja ...

  7. DOM与元素节点内联样式

    获取.设置及移除单个内联 CSS 属性 每个 HTML 元素都有个 style 属性,可以用来插入针对该元素的内联 CSS 属性. <div style='background-color:bl ...

  8. 内联外联CSS和JS

    内联CSS 代码示例: <p style="color:red;font-size:18px">这里文字是红色.</p> 内联CSS也可称为行内CSS或者行 ...

  9. 送干货，实用内联gulp插件——gulp-embed

    现在npm上有很多gulp内联工具,用于把脚本和样式内嵌到HTML页面上,之前搞项目我也在这些插件中寻觅许久,但均不满足公司项目的一个需求—— HTML上同时插入了开发(dev版,src文件夹下,比如 ...

随机推荐

  1. Codeforces 802 ABC. Heidi and Library

    题目大意 你需要保证第\(i\)天时有第\(a_i\)种书.你可以在任何一天买书,买第\(i\)种书的代价为\(c_i\). 你最多同时拥有\(k\)本书,如果此时再买书,则必须先扔掉已拥有的一本书. ...

  2. RabbitMQ教程总结

    [译]RabbitMQ教程一 主要通过Hello Word对RabbitMQ有初步认识 [译]RabbitMQ教程二 工作队列,即一个生产者对多个消费者 循环分发.消息确认.消息持久.公平分发 [译] ...

  3. NSString *const 和 const NSString * 的区别

    1.变量存储的指针可变,变量存储的值不可变 //A modifiable pointer to a constant NSString (its value can't be modified) &q ...

  4. C# 代码注释规范文档

    C# 提供一种机制,使程序员可以使用含有 XML 文本的特殊注释语法为他们的代码编写文档.在源代码文件中,具有某种格式的注释可用于指导某个工具根据这些注释和它们后面的源代码元素生成 XML.使用这类语 ...

  5. 学习动态性能表(7)--v$process

    学习动态性能表 第七篇--V$PROCESS  2007.5.30 本视图包含当前系统oracle运行的所有进程信息.常被用于将oracle或服务进程的操作系统进程ID与数据库session之间建立联 ...

  6. SQL Server 学习系列之六

    SQL Server 学习系列之六 SQL Server 学习系列之一(薪酬方案+基础) SQL Server 学习系列之二(日期格式问题) SQL Server 学习系列之三(SQL 关键字) SQ ...

  7. bzoj 1009 [HNOI2008]GT考试——kmp+矩阵优化dp

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1009 首先想到 确保模式串不出现 就是 确保每个位置的后缀不是该模式串. 为了dp,需要记录 ...

  8. java中List、Map、Set、Collection、Stack、Queue等的使用

    java中这几个东西是比较常用的,虽然我用的不多,也正是因为用的不多,所以我一直搞不清楚他们之间的具体用法以及相互之间的关系,现在特单独作为一个东西来总结一下. 本文参考一下资料: 1.<jav ...

  9. java.util.Date、java.sql.Date、java.sql.Time、java.sql.Timestamp小结

    java.lang.Object ....|__java.util.Date ..........|__java.sql.Date/java.sql.Timestamp /java.sql.Time ...

  10. 机器学习：决策树（CART 、决策树中的超参数）

    老师:非参数学习的算法都容易产生过拟合: 一.决策树模型的创建方式.时间复杂度 1)创建方式 决策树算法 既可以解决分类问题,又可以解决回归问题: CART 创建决策树的方式:根据某一维度 d 和某一 ...