本文翻译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. yum search/intall, Error: xz compression not available

    转自:http://blog.hexu.org/archives/2060.shtml 遇到这个问题情景: 下午第一台系统是Centos7, 安装配置完成后,接着一台是Centos 6 系统,由于疏忽 ...

  2. Dynamic Web Project vs Static Web Project 以及 Project facets

    Dynamic Web Project vs Static Web Project 需要用到JSP,servlet等技术的动态服务器技术,就需要DWP:对于全部都是html页面的可以使用static ...

  3. bzoj 2839 集合计数 —— 二项式反演

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2839 设 \( f(i) \) 为至少 \( i \) 个选择,则 \( f(i) = C_ ...

  4. MYSQLdump参数详解(转)

    mysqldump客户端可用来转储数据库或搜集数据库进行备份或将数据转移到另一个SQL服务器(不一定是一个MySQL服务器).转储包含创建表和/或装载表的SQL语句. 如果你在服务器上进行备份,并且表 ...

  5. ABP 学习系列 - 目录

    一.ABP 学习系列 - 入门介绍之单表 http://www.cnblogs.com/yabu007/p/8067694.html 二.ABP 学习系列 - 入门介绍之多表 http://www.c ...

  6. JQ选择器大全

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

  7. [iOS]UIImageView增加圆角

    [iOS]UIImageView增加圆角 "如何给一个UIImageView增加圆角?有几种方法?各自区别?" 备注:本文参考自http://www.jianshu.com/p/d ...

  8. SpringMVC 之URL请求到Action的映射（1）

    URL路径映射 1.1.对一个action配置多个URL映射: @RequestMapping(value={"/index", "/hello"}, meth ...

  9. Solaris ssh配置主机间信任关系

    假设需要配置从主机com00biiitf001登录主机ols00biiitf001时不需要密码,则采用以下步骤配置: com00biiitf001上产生公用/私有密钥对 $ ssh-keygen -t ...

  10. 视频直播技术-视频-编码-传输-秒开等<转>

    转载地址:http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=2653547042&idx=1&sn=26d8728548 ...