本文翻译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. Docker registry 与 持续集成

    1.如何建立私有的 Docker Hub docker是一个非常好用的虚拟化工具. Registry 在git上分为老代码库和新代码库,老代码push,pull 存在性能问题,新代码库采用go语言编写 ...

  2. 在装有windows跟ubuntu的机器上重新安装windows后修复ubuntu的grub

    本文只对没有单独用类似easyBCD这种软件单独设立启动分区的双系统,在重新安装win7之后,因为win7覆盖了ubuntu的grub,导致ubuntu无法启动的问题. (1)不管使用什么方法,首先需 ...

  3. bzoj 4559 [JLoi2016]成绩比较——拉格朗日插值

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4559 关于拉格朗日插值,可以看这些博客: https://www.cnblogs.com/E ...

  4. Nagios 里面监控MySQL事务一直RUNNING没有结束的报警Shell脚本 (转)

    序言:        业务报警订单提交异常,页面一直没有反应,排查后是事务没有提交或者回滚导致,想到如果及时监控事务的运行状态报警出来,那么就可以及时排查出问题所在,方便运营处理,所以自己就弄了一个s ...

  5. mongo之map-reduce笔记

    package com.sy.demo; import com.mongodb.MongoClient; import com.mongodb.client.FindIterable; import ...

  6. mysql 自增id

    在开发的时候遇到了 自增id变成2147483647 莫名其妙 然后发现是自己没把自增id改为 无符号的原因 把无符号勾上就ok了

  7. 使用批处理自动发布IIS站点，基于IIS7及以上

    经过研究,终于使用批处理解决了站点发布步骤多的问题. 完整批处理如下: @set "sitePath=%~dp0" @echo 新建程序池 @C:\Windows\System32 ...

  8. uboot中的TEXT_BASE

    转载:http://blog.csdn.net/xxblinux/article/details/6281295 我们都知道U-BOOT分为两个阶段,第一阶段是(~/cpu/arm920t/start ...

  9. 一文读懂非关系型数据库（NoSQL）

    为了更好的理解非关系型数据库,我又深入的度娘了下 原文地址:https://baijiahao.baidu.com/po/feed/share?wfr=spider&for=pc&co ...

  10. VisualGDB系列8：使用VS创建CMake Linux项目

    根据VisualGDB官网(https://visualgdb.com)的帮助文档大致翻译而成.主要是作为个人学习记录.有错误的地方,Robin欢迎大家指正. 本文介绍如何使用VS来创建.构建.调试一 ...