本文翻译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. 让人蛋疼的“Oracle.DataAccess.dll”

    项目介绍:为前台网站提供rest接口来操作erp相关数据 涉及db:oracle11 技术方案:因为erp是用remoting来调用,我想rest实现部分调用remoting来操作减少耦合,当然性能上 ...

  2. Unity3D研究院之Assetbundle的实战（六十三）

    http://www.xuanyusong.com/archives/2405 上一篇文章中我们相惜讨论了Assetbundle的原理,如果对原理还不太了解的朋友可以看这一篇文章:Unity3D研究院 ...

  3. MySQL 预处理语句prepare、execute、deallocate的使用

    所以对于中文乱码,需要去check的地方有如下3个:1.mysql窗口的字符编码(xshell连接的远程工具的字符集设置):2.数据库的字符编码(show variables like '%char% ...

  4. Oracle RMAN 学习

    Oracle RMAN 学习:三思笔记 1 进入rman Rman--物理备份(结构/数据) 1 本地db Cmd set oracle_sid=orcl 1 rman target / Rman&g ...

  5. 第四章 Javac编译原理（待续）

    Javac是什么 Javac编译器的基本结构 Javac工作原理分析 设计模式解析之访问者模式

  6. HDLM命令dlnkmgr详解之四_monitor/offline/online

    1. monitor 以一定的时间间隔监控hba或cha口的IO信息. 命令格式 监控hba口的IO信息: dlnkmgr monitor -hbaid HBA_ID [-intvl Interval ...

  7. Solaris10怎么创建flash archive

    使用flarcreate命令可以创建Solaris操作系统的映像(flash archive).Flash archive相当于Solaris系统的克隆.使用flash archive可以用于安装新系 ...

  8. Shell编程进阶 2.1 shell函数

    函数 vim fun.sh #!/bin/bash function mysum() { sum=$[$+$] echo $sum } a= b= mysum $a $b sh fun.sh 6 可以 ...

  9. .each循环的两种使用方法

  10. IDEA创建Maven项目一直显示正在加载的问题

    在用idea创建maven项目的时候 有时候会出现下面这种情况 出现原因 IDEA根据maven archetype的本质,其实是执行mvn archetype:generate命令,该命令执行时,需 ...