书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的地方或者是描述不足的地方,望大家批评指正,下面是我给我”参考答案“,也只是仅供参考:

1.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>(绝对路劲);

第二种:直接用写在页面上,如:

<script type="text/javascript">

  document.write('这里是一行JavaScript代码1');

</script>

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

<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头部,比如:

<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的任何位置,如:

<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>

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

<p onClick="javascript:alert('叫你点,你就点啊!')">点我点我!</p>

  

3.改变js加载顺序的方法有什么?

JavaScript是有加载顺序的,不同的加载顺序可以会导致不同的结果,举个栗子:

  <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代码,这个要依情况而定;

再举一个栗子:

    <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,表示是在服务器上运行此代码,客户端不运行,不常用;

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

6.js中常用的输出方式?

js的输出方式大概有下面几种:

  <div id="demo"></div>
<script>
//第一种
document.write("<p>你在干嘛,你妈妈叫你回家吃饭!</p>");
//第二种
document.getElementById("demo").innerHTML = "我再玩会,我妈妈饭还没熟呢!";
//第三种,提示框
alert("谁家能叫我吃饭啊!");
</script>

行文仓促,可能会有表述不对的地方,如有发现,希望能批评指正!谢谢!如果觉得不错,希望你能推荐给正在学习js 的同学,不胜感激!  

基础篇:1.JavaScript运行在html中,引用有几种方式?—— 6.js中常用的输出方式?的更多相关文章

  1. JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构

    JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...

  2. 基础篇:JVM运行时内存布局

    目录 1 JVM的内存区域布局 2 JVM五大数据区域介绍 3 JVM运行时内存布局和JMM内存模型区别 4 JMM内存模型交互操作 欢迎指正文中错误 关注公众号,一起交流 参考文章 1 JVM的内存 ...

  3. 使用另一种方式实现js中Function的调用(call/apply/bind)

    在JavaScript中函数的调用可以有多种方式,但更经典的莫过于call和apply.call跟apply都绑定在函数上,他们两个的第一个参数意义相同,传入一个对象,他作为函数的执行环境(实质上是为 ...

  4. 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承

    ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...

  5. json--pyton中obj与json的互转,js中obj与json的互转

    json 解释:json是一种跨平台的通用的数据格式 python中对象(obj)与json之间的相互转换 1.对象(obj)转json格式的字符串 json.dumps(res) res = () ...

  6. promise核心技术 2.两种回调函数 js中error的处理

    抽空详细学习一下什么是回调函数(一个回调函数,也被称为高阶函数) 1.什么样的函数是回调函数 自己定义的(sittimeout不是自己定义的) 没有调用 自己执行 1.同步回调与异步回调函数 同步回调 ...

  7. spring中bean的五种作用域?Spring中的bean是线程安全的吗?

    spring中bean的五种作用域 当通过spring容器创建一个Bean实例时,不仅可以完成Bean实例的实例化,还可以为Bean指定特定的作用域.Spring支持如下5种作用域: singleto ...

  8. 关于在c#中引用外部dll文件,在页面中找不到命名空间

    最近在项目中碰到这样的问题,经过搜索,发现是vs2010的版本不对,VS默认的版本是.NET Framework 4 Client Profile,需要将他更改为.NET Framework 4 版本 ...

  9. RS错误RSV-VAL-0032之项目未在布局中引用的3种解决办法

    如下图所示,我用RS新建了一个空白页面,拖入了一个列表,给该列表新建了一个条件样式 条件样式如下所示,表达式来自查询1 运行,报错如下图所示 原因就是条件样式使用到了查询1中的数据项1但是数据项1在报 ...

随机推荐

  1. numpy 与 matplotlib 的应用

    numpy 与 matplotlib 的应用 一.库函数介绍 1. numpy库 NumPy(Numeric Python)提供了一个N维的数组类型ndarray,Numpy底层使用C语言编写,内部解 ...

  2. ubuntu hadoop环境搭建

    安装Ubuntu系统:这个自行安装 下载jdk:我下的是1.8.0_141d的,下载好后在usr/lib下新建一个jvm的文件夹用来存放Java的文件,下载好的jdk可以在其他地方解压或者jvm里面解 ...

  3. ANDROID说说对MENU的理解

    ANDROID%E5%88%9D%E5%AD%A6%E4%B9%8B%E7%AE%80%E6%98%93%E8%AE%A1%E7%AE%97%E5%99%A8 Ѿ�����ڴ����㺰ô�

  4. Android中使用TabLayout实现Tab

    一.需求 activity + fragment实现tab,并可以滑动切换tab. 需要导入compile 'com.android.support:design:25.3.1' 二.layout实现 ...

  5. chat.php

    <!DOCTYPE html><html> <meta charset="UTF-8"> <title>web chat</t ...

  6. UICollectionView添加 HeaderView FooterView

    UICollectionView显示HeaderView FooterView 不如UITableView那么容易,常用会有两种做法: 1.Xib或者Storyboard 在属性一栏中设置一下: 如图 ...

  7. SQL Server 自动循环归档分区数据脚本

    标签:SQL SERVER/MSSQL SERVER/数据库/DBA/表分区 概述 在很多业务场景下我们需要对一些记录量比较大的表进行分区,同时为了保证性能需要将一些旧的数据进行归档.在分区表很多的情 ...

  8. pwn入门之栈溢出练习

    本文原创作者:W1ngs,本文属i春秋原创奖励计划,未经许可禁止转载!前言:最近在入门pwn的栈溢出,做了一下jarvisoj里的一些ctf pwn题,感觉质量都很不错,难度循序渐进,把自己做题的思路 ...

  9. PHP删除当前目录及其目录下的所有文件

    使用PHP遍历一个目录下的所有目录及文件,并删除该目录及其目录下的所有子目录和文件,本次代码通过递归的方式来实现. 用到的函数: scandir($path) 遍历一个目录下所有文件并返回数组. un ...

  10. 编译u-boot问题总结

    问题一: /usr/local/JreTool/opt/FriendlyARM/toolschain/4.4.3/bin/.arm-none-linux-gnueabi-ld: warning: cr ...