基礎篇: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文件或片段,不包含函數的順序)。

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 的同學,不勝感激!  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM