友友們，JS片段放在body中可以用，但放在head中只有取消設置按鈕有作用。這是為什么？
<!doctupe html>
<html>
<head>
?<meta charset="utf-8" />
??? <title>Dom練習</title>
??? <style type="text/css">
??? ?body{font-size:12px;}
??#txt{
???height:400px;
???width:600px;
???border:#333 solid 1px;
???padding:5px;
??}
??p{
???line-height:18px;
???text-indent:2em;
??}
??? </style>
??? <script type="text/javascript">
??var mychar=document.getElementById("txt");
??? ?function changeC(){
???mychar.style.color="red";
???mychar.style.backgroundColor="gray";
???}
??function changeW(){
???mychar.style.width="800px";
???mychar.style.height="600px";
???}
??function hiddenC(){
???mychar.style.display="none"
???}
??function displayC(){
???mychar.style.display="block";
???}
??function cancelS(){
???var res=confirm("取消設置？")
???if(res){
????? mychar.style.color="#000";
????? mychar.style.backgroundColor="#fff";
????? mychar.style.width="600px";
????? mychar.style.height="400px";
????? mychar.style.display="block";
????}
???}
??? </script>
</head>
<body>
?<h2 id="con">JavaScript課程</h2>
??? <div id="txt">
??? ?<h5>JavaScript為網頁添加動態效果并實現與用戶交互的功能</h5>
??????? <p>1.JavaScript入門篇，讓不懂JS的你快速了解JS</p>
??????? <p>2.JavaScript進階篇，讓你掌握JS的基礎語法、函數、數組、事件、內置對象、BOM瀏覽器、DOM操作。</p>
??????? <p>3.學習以上兩門基礎課后，在深入學習JavaScript的變量作用域、事件、對象、運動、cookie、正則表達式、ajax等課程。</p>
??? </div>
??? <!--<script type="text/javascript">
??var mychar=document.getElementById("txt");
??? ?function changeC(){
???mychar.style.color="red";
???mychar.style.backgroundColor="gray";
???}
??function changeW(){
???mychar.style.width="800px";
???mychar.style.height="600px";
???}
??function hiddenC(){
???mychar.style.display="none"
???}
??function displayC(){
???mychar.style.display="block";
???}
??function cancelS(){
???var res=confirm("取消設置？")
???if(res){
????? mychar.style.color="#000";
????? mychar.style.backgroundColor="#fff";
????? mychar.style.width="600px";
????? mychar.style.height="400px";
????? mychar.style.display="block";
????}
???}
??? </script>-->
??? <form>
??????? <input type="button" value="改變顏色" onClick="changeC()" />
??????? <input type="button" value="改變寬高" onClick="changeW()" />
??????? <input type="button" value="隱藏內容" onClick="hiddenC()" />
??????? <input type="button" value="顯示內容" onClick="displayC()" />
??????? <input type="button" value="取消設置" onClick="cancelS()" />
??? </form>
</body>
</html>
2016-04-11
那么把這個js腳本放head里面還是body里面呢？?
答案是不僅要放到body里面，而且還得放到定義id='vSort0'的列表框后面，因為這個js腳本中有document.form4.vSort0.selectedIndex，如果放到head里或者body的id='vSort0'前，頁面加載后順序執行代碼，執行到這個js發現vSort0未定義（即undefind），這個js也就失去了作用。?
而為什么我們經?？吹接泻芏嗟娜税裫s腳本放到head里面沒事呢？對！?
就是因為你看到的在head里的js代碼有onclick等事件傳遞了變量給函數。?
這就告訴我們，如果我們想定義一個全局對象，而這個對象與頁面中的某個按鈕（等等）有關時， 我們必須將其放入body中，道理很明顯：如果放入head，那當頁面加載head部分的時候，那個按鈕（等等）都還沒有被定義（也可以說是還沒有被加 載，因為加載的過程就是執行代碼的過程，包括了定義），你能得到的只可能是一個undefind。