JavaScript执行在html中，引用有几种方式？

我知道的方法有3种：

第一种：外部引用远程JavaScript文件。如<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>（相对路劲）或者是<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>（绝对路劲）；

另外一种：直接用写在页面上，如:

1
2
3
4
5
<script
type="text/javascript">
 
　　document.write('这里是一行JavaScript代码1');
 
</script>

第三种：在JavaScript代码中引用外部js：

1
2
3
4
5
6
7
8
<script>
　　window.onload
= function(){
　　　　var script
= document.createElement("script");
　　　　script.setAttribute("type","text/javascript");
　　　　script.src
= "http://common.cnblogs.com/script/jquery.js";
　　　　document.getElementsByTagName("head")[0].appendChild(script);  
　　}
</script>

　　

2.JavaScript通常写在页面的什么位置？

javascript的书写位置大致有3个地方：

第一个地方：是head头部，比方：

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>javascript引用方式</title>
<script
type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
<script>
    window.onload
= function(){
        var script
= document.createElement("script");
        script.setAttribute("type","text/javascript");
        script.src
= "http://common.cnblogs.com/script/index.js";
        document.getElementsByTagName("head")[0].appendChild(script);  
    }
</script>
</head>

第二个地方：body的不论什么位置，如：

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <script
type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
    <p>这里是一段文本！</p>
    　　
<script>
        　　window.onload
= function(){
    　　　　 var script
= document.createElement("script");
        script.setAttribute("type","text/javascript");
        script.src
= "http://common.cnblogs.com/script/jquery.js";
        document.getElementsByTagName("head")[0].appendChild(script);  
    　　}
    　　</script>
</body>

第三个地方：以事件的形式写在标签上，如：

1
<p
onClick="javascript:alert('叫你点，你就点啊。')">点我点我。</p>

　　

3.改变js载入顺序的方法有什么？

JavaScript是有载入顺序的，不同的载入顺序能够会导致不同的结果，举个栗子：

1
2
3
4
5
6
7
8
9
10
11
<script>
      var txt
= document.getElementById("txt");
  alert(txt.innerHTML);
  </script>
  <div
id="txt">我是一段文本，你不能找到我。</div>
   
  <div
id="val">我也是一段文本。你能找到我。</div>
  <script>
      var txt
= document.getElementById("val");
  alert(txt.innerHTML);
  </script>

第一段js运行会出错，由于html代码运行是至上而下载入的，第一段JavaScript代码先运行，才运行以下的html代码，所以根本就找不到该DOM节点，就会报错，假设html先运行，在运行JavaScript代码，就像第二段，就能够运行成功！当然，我不是说一定要先运行html代码。在运行JavaScript代码。这个要依情况而定。

再举一个栗子：

1
2
3
4
<script>
$(".calculator").fancybox();
</script>  
<script
type="text/javascript" src="../js/jquery.fancybox.js"></script>

上面的fancybox插件假设像上面这种载入顺序去载入的话。一定是不能运行的。由于代码运行所依赖的js库是后面运行的，这里要讲的内容主要是想说明，假设是在使用一个插件。依赖某个js文件。一定要在前面先运行。无论是放在head头部，还是body中。

上面的样例说明一点。不同的js运行顺序，运行的内容是不一样的。所以改变js文件的位置。就能够改变js的载入顺序（注：这里指的是单独的JavaScript文件或片段。不包括函数的顺序）。

2015.11.05补充：感谢@橘色大耳朵猫 同学的提醒，这里的js的载入顺序指的是js文件在页面上的载入顺序，不是js程序的载入顺序，先理解这一点。假设说行内js事件代码也算是一个独立的js文件的话（也能够这么理解。毕竟能够独立执行），那这里的载入顺序也是自上而下的，和其它的文件的载入顺序是一样的，可是有一个很特殊的事件例外。那就是“onload”事件，onload
事件会在页面或图像载入完毕后马上发生（w3school上的解释），好难理解。通俗的讲就是，这个事件是在页面上的所以内容载入完毕了。我才来运行这个函数。无论我这个时间定义在哪里都一样。没有顺序而言（本来嘛，我反正都是最后一个运行的，位置对于我来说已经没有意义了）；除了onload，其它的事件都是依照顺序运行的。

可能有人会问了，唉，不正确啊，假设我是onclick事件，我点击之后。可能下一行执行的函数在我事件的前面呢，这不是改变了js执行的顺序吗？这怎么解释呢？

假设你还是有这个疑惑，那请注意我在上一句描写叙述上说的是“改变了js的运行顺序”，是运行顺序，不是载入顺序。运行顺序是程序内，载入顺序是文件之间的，比方说点击事件，你点击了。那js就已经经历了载入，然后运行了，假设你还是不理解，我就给你举一个现实生活中的样例：

我手上有4个盒子。盒子里面有不同的东西，每一个盒子都有编号（1,2,3,4），如今我把这4个盒子依次在桌子上，编号顺序随机，然后从左到右依次看一遍，盒子是开的，我就把东西拿出来（这里表示js自己主动运行）。假设是关着的，就看下一个（这里表示是须要事件来出发的。如打开盒子这个动作），直到最后一个盒子看完，整个就完了。那盒子的顺序就是查看盒子的顺序，跟编号没关系（这里说的是文件的名字），onclick这种事件就是盒子我已经过了一遍，如今有没有打开的盒子。我如今打开了。就是运行了这个事件。然而前面我们说了，盒子已经过了一遍，所以这个动作就不涉及整个过场顺序问题了。那onload是怎么回事呢，就是我有一个盒子放在一边，等其它盒子都看了，再看这个盒子（就是最后运行这个事件，onload是自己主动触发运行的），理解了吗？自己摆一摆。要是还不理解，那就去面壁思考吧！

4.type属性都有哪些经常使用的值？代表什么意思？

打开Dreamweaver（我比較喜欢用这个编辑器，习惯了他给的提示。别说我low哦），在<script>上打一个type，会有非常多type属性，我们把他写下来。看看都有哪些：

application/ecmascript   application/javascript  application/x-ecmascript  application/x-javascript  text/ecmascript  text/javascript  text/jscript  text/livescript  text/tcl  text/x-ecmascript  text/x-javascript

oh。mygod！

这么多！吓死宝宝了！

在<link>上面打一下：

text/css  text/javascript

还好仅仅有2个！

type属性在js上表示脚本的类型，即MIME类型，在link上表示叠层样式表的MIME类型，经常使用的就是2种（其它的不经常使用，也不知道是什么意思。用在什么情况。哪位大神帮忙科普一下）：

text/css （css文本。告诉浏览器是载入css样式）

text/javascript  （JavaScript文本。告诉浏览器载入js代码）

貌似解释的有点牵强，呵呵！

5.除了type属性还有其它的什么属性？

再次打开Dreamweaver，给的提示有这几个：async，defer，language，runat。src

async：定义脚本是否异步运行。值为：async；

defer：指示脚本不会生成不论什么文档内容。浏览器可继续解析并绘制页面。意思就是等文档载入完成了再运行此js，要是想深入了解这个属性，能够參考这里。假设你英文比較好，能够看这里。

language：规定脚本的语言。如今使用type来替代了；

runat：其值为server。表示是在服务器上执行此代码。client不执行，不经常使用；

src：指外部脚本文件的引用路径

6.js中经常使用的输出方式？

js的输出方式大概有以下几种：

1
2
3
4
5
6
7
8
9
<div
id="demo"></div>
  <script>
  //第一种
      document.write("<p>你在干嘛。你妈妈叫你回家吃饭！</p>");
  //另外一种
  document.getElementById("demo").innerHTML
= "我再玩会，我妈妈饭还没熟呢！";
  //第三种。提示框
  alert("谁家能叫我吃饭啊！

");

  </script>

HTML中调用JavaScript的几种情况和规范写法的更多相关文章

  1. [转] HTML中调用JavaScript的几种情况和规范写法

    比较简单,基础. 一.引用外部文件中的js脚本 <script type="text/javascript" src="ext.js"></s ...

  2. 一步一步学Silverlight 2系列（21）：如何在Silverlight中调用JavaScript

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  3. Spring如何使用JdbcTemplate调用存储过程的三种情况

    注:原文 <Spring如何使用JdbcTemplate调用存储过程的三种情况 > Spring的SimpleJdbcTemplate将存储过程的调用进行了良好的封装,下面列出使用Jdbc ...

  4. Java中关于变量的几种情况

    Java中关于变量的几种情况 1.继承时变量的引用关系 class Animals { int age = 10; void enjoy() { System.out.println("An ...

  5. js中this指向的三种情况

    js中this指向的几种情况一.全局作用域或者普通函数自执行中this指向全局对象window,普通函数的自执行会进行预编译,然后预编译this的指向是window //全局作用域 console.l ...

  6. 在 Flash ActionScript 2.0 中调用 Javascript 方法

    本篇文章由:http://xinpure.com/call-the-javascript-method-in-flash-actionscript-2-0/ 在 Flash ActionScript ...

  7. 从零开始学习前端JAVASCRIPT — JavaScript中this指向的四种情况

    JavaScript中this的四种情况(非严格模式) 1.当this所在函数是事件处理函数时,this指向事件源.2.当this所在函数是构造函数时,this指向new出来的对象.3.this所在函 ...

  8. 在<a></a>标签中调用javascript脚本

    有时候,我们点击了<a></a>标签(除了跳转到指定链接外)想要它调用某个方法,及调用javascript脚本,该如何做: 方法1:<a href="javas ...

  9. a 标签中调用js的几种方法 文章摘自他人

    我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题 ...

随机推荐

  1. 【java】static用法

    static作用: 用来修饰函数成员,成员变量和成员函数.类对象的属性都一致且能共享,比如国籍,这就能用static修饰,name不能共享,因为每个人都有自己的名字. 特有内容(name)随着对象存储 ...

  2. python调用linux的命令

    有时候难免需要直接调用Shell命令来完成一些比较简单的操作,比如mount一个文件系统之类的.那么我们使用Python如何调用Linux的Shell命令?下面来介绍几种常用的方法: 1. os 模块 ...

  3. mysql-查询存在主表但是不存在副标的数据

    A.B两表,找出ID字段中,存在A表,但是不存在B表的数据.A表总共13w数据,去重后大约3W条数据,B表有2W条数据,且B表的ID字段有索引. 方法一 使用 not in ,容易理解,效率低  ~执 ...

  4. Ajax传递json数据简介和一个需要注意的小问题

    Ajax传递json数据 Ajax操作与json数据格式在实际中的运用十分广泛,本文为大家介绍一个两者相结合的小案例: 项目结构 我们新建一个Django项目,在里面创建一个名为app01的应用: p ...

  5. Zookeeper集群节点数量为什么要是奇数个？

    无论是公司的生产环境,还是自己搭建的测试环境,Zookeeper集群的节点个数都是奇数个.至于为什么要是奇数个,以前只是模糊的知道是为了满足选举需要,并不知道详细的原因.最近重点学习zookeeper ...

  6. CRM 2016 Get IOrganizationService

    得到域认证下的IOrganizationService private IOrganizationService GetOrgService() { Uri orgServiceUri = new U ...

  7. mysql相关碎碎念

    取得当天: SELECT curdate(); mysql> SELECT curdate();+------------+| curdate()  |+------------+| 2013- ...

  8. CountDownLatch两种用法

    1.当前线程等待其他线程执行完毕后在执行. 2.模拟高并发场景. 在多线程编程里,CountDownLatch是一个很好的计数器工具. 常用的两个方法: 1.计数器减一 public void cou ...

  9. 某大型跨境电商JVM调优总结

    前提:某大型跨境电商业务发展非常快,线上机器扩容也很频繁,但是对于线上机器的运行情况,特别是jvm内存的情况,一直没有一个统一的标准来给到各个应用服务的owner.经过618大促之后,和运维的同学讨论 ...

  10. win7 英文版 中文乱码

    win7 为了使用英文的 pcb 软件,把语言包改为英文版后,碰到一部分中文会变成乱码.通过下面方法可以识别: control panel --> region and language --& ...