本文翻译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. AtCoder Petrozavodsk Contest 001 B - Two Arrays

    Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem Statement You are given two inte ...

  2. 「新手向」koa2从起步到填坑

    前传 出于兴趣最近开始研究koa2,由于之前有过一些express经验,以为koa还是很好上手的,但是用起来发现还是有些地方容易懵逼,因此整理此文,希望能够帮助到一些新人. 如果你不懂javascri ...

  3. Linux之时间、地点、人物、事件、情节

    时间 date 显示当前时间 time cmd 显示 cmd的运行时间 地点 locate 根据文件名,迅速找到文件.基于系统构建的索引 find 根据各种规则找到文件,更强大,但比较慢 wherei ...

  4. Python 算法之二分查找

    二分查找 二分查找又称折半查找 优点是比较次数少,查找速度快,平均性能好 缺点是要求待查表为有序表,且插入删除困难 折半查找方法适用于不经常变动而查找频繁的有序列表. 猜数字游戏 1.生成一个有序列表 ...

  5. inotify 同步脚本

    #!/bin/bash path1=/home/htoa/tomcat/webapps/ROOT/htoa/ ip=192.168.30.13 /usr/bin/inotifywait -mrq -- ...

  6. 使用cef

    win10的同学注意了按右键以管理员模式启动cmake-gui.exe在Where is the source code:里填上你解压的CEF3路径,如:F:\cef3\cef_binary_3.23 ...

  7. Spring Boot Starter 速查

    Spring Boot应用启动器基本的一共有40多种,常用的如下 1)spring-boot-starter 这是Spring Boot的核心启动器,包含了自动配置.日志和YAML. 2)spring ...

  8. 机器学习：调整kNN的超参数

    一.评测标准 模型的测评标准:分类的准确度(accuracy): 预测准确度 = 预测成功的样本个数/预测数据集样本总数: 二.超参数 超参数:运行机器学习算法前需要指定的参数: kNN算法中的超参数 ...

  9. yum 使用笔记

    yum 重新配置了源以后,用 yum clean all 先clean一下,才能用新的.

  10. java基础知识（15）----StringBuffer与StringBuilder

    StringBuffer字符串缓冲区: 构造一个其中不带字符的字符串缓冲区,初始容量为 16 个字符.特点:1:可以对字符串内容进行修改.2:是一个容器.3:是可变长度的.4:缓冲区中可以存储任意类型 ...