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

书接上文,上文提到若干条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文件或片段,不包含函数的顺序)。

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 的同学,不胜感激!  

时间: 2024-10-29 04:09:55

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

jq中连续删除的操作;以及js中连续删除的操作;jq方法中如何写循环。

jq中连续删除的操作 采用的是用父节点的来进行删除,不能直接利用$(XXX)来回去父节点来进行删除.存在逻辑上的错误. js中的连续删除 和jq中删除是一个道理,同样实在利用父节点去删除子节点.获取当前单击元素的父节点.利用来删除子节点. 至于寻找祖先中的哪一个,就要看,要删除的什么内容了. jq方法中如何写循环. jq中写循环,一般应该用each进行循环.但是利用for循环也是可以.但是有一个需要注意的地方.for循环不能在jq中的方法中出现,不会执行.也就是说,在jq中需要去写一个新的方法,

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

spring中bean的五种作用域 当通过spring容器创建一个Bean实例时,不仅可以完成Bean实例的实例化,还可以为Bean指定特定的作用域.Spring支持如下5种作用域: singleton:单例模式,在整个Spring IoC容器中,使用singleton定义的Bean将只有一个实例 prototype:原型模式,每次通过容器的getBean方法获取prototype定义的Bean时,都将产生一个新的Bean实例 request:对于每次HTTP请求,使用request定义的Bea

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

抽空详细学习一下什么是回调函数(一个回调函数,也被称为高阶函数) 1.什么样的函数是回调函数 自己定义的(sittimeout不是自己定义的) 没有调用 自己执行 1.同步回调与异步回调函数 同步回调函数 const arr = [1, 2, 3] arr.forEach(item => { console.log(item) }) //同步回调,任务启动后(等待完成),直接执行回调函数,再往下执行 console.log("later") 异步回调函数 setTimeout((

【Android基础篇】TabHost导航栏添加标签页的三种方法

使用TabHost实现的导航栏有三种添加页面的方法,分别是直接在布局代码的tab里面添加:通过include标签添加:通过Java代码指定另一个Activity添加.下面是三种方法的示例: 直接在布局代码的tab里面添加标签页 使用拖控件拖出来的TabHost,在它的布局层次上会有三个LinearLayout,id分别为tab1.tab2.tab3,如下图所示: 然后我们可以新建一个Layout,在这个Layout里设计好界面后,将xml代码直接放入tab(1.2.3)的标签里,如下图所示,将设

js中几种常用的输出方式

1.alert("要输出的内容"); ->在浏览器中弹出一个对话框,然后把要输出的内容展示出来 ->alert都是把要输出的内容首先转换为字符串然后在输出的 2.document.write("要输出的内容"); ->直接的在页面中展示输出的内容 3.console.log("要输出的内容"); ->在控制台输出内容 4.value ->给文本框(表单元素)赋值内容 ->获取文本框中(表单元素)的内容 docu

asp.net后台cs中的JSON格式变量在前台Js中调用方法

//后台cs代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class Login_jg : System.Web.UI.Page { protected void Page_Load(object sender, EventArg

【浅墨Unity3D Shader编程】之五 圣诞夜篇: Unity中Shader的三种形态对比&amp;混合操作合辑

本系列文章由@浅墨_毛星云 出品,转载请注明出处.  文章链接:http://hpw123.net/a/C__/kongzhitaichengxu/2014/1222/164.html 作者:毛星云(浅墨)    微博:http://weibo.com/u/1723155442 邮箱: [email protected] QQ交流群:330595914 更多文章尽在:http://www.hpw123.net 本文算是固定功能Shader的最后一篇,下一次更新应该就会开始讲解表面Shader,而

Shell编程基础篇-上

1.1 前言 1.1.1 为什么学Shell Shell脚本语言是实现Linux/UNIX系统管理及自动化运维所必备的重要工具, Linux/UNIX系统的底层及基础应用软件的核心大都涉及Shell脚本的内容.每一个合格 的Linux系统管理员或运维工程师,都需要能够熟练地编写Shell脚本语言,并能够阅 读系统及各类软件附带的Shell脚本内容.只有这样才能提升运维人员的工作效率,适 应曰益复杂的工作环境,减少不必要的重复工作,从而为个人的职场发展奠定较好的基础 1.1.2 什么是shell

深入浅出JavaScript运行机制

一.引子 本文介绍JavaScript运行机制,这一部分比较抽象,我们先从一道面试题入手: console.log(1); setTimeout(function(){ console.log(3); },0); console.log(2); 请问数字打印顺序是什么? 这一题看似很简单,但如果你不了解JavaScript运行机制,很容易就答错了.题目的答案是依次输出1 2 3,如果你有疑惑,下文有详细解释. 二.理解JS的单线程的概念 JavaScript语言的一大特点就是单线程,也就是说,同