引用JS外部文件

<script src="script.js"></script>

JS在頁面中的位置

javascript作為一種腳本語言可以放在html頁面中任何位置，但是瀏覽器解釋html時是按先后順序的，所以前面的script就先被執行。比如進行頁面顯示初始化的js必須放在head里面，因為初始化都要求提前進行（如給頁面body設置css等）；而如果是通過事件調用執行的function那么對位置沒什么要求的。

互動方法

• 警告 alert消息對話框

• 確認 confirm 消息對話框

  confirm消息對話框通常用于允許用戶做選擇的動作。彈出對話框(包括一個確定按鈕和一個取消按鈕)。

   var opentag=confirm("是否在新窗口打開網站？");
  

• 提問 prompt 消息對話框

  prompt彈出消息對話框,通常用于詢問一些需要與用戶交互的信息。彈出消息對話框（包含一個確定按鈕、取消按鈕與一個文本輸入框）

  var webadress=prompt("請輸入網址","http://www.imooc.com");
  

• 打開新窗口

  open() 方法可以查找一個已經存在或者新建的瀏覽器窗口

  window.open([URL], [窗口名稱], [參數字符串])
  

  窗口名稱：可選參數，被打開窗口的名稱

  1. 該名稱由字母、數字和下劃線字符組成。
  2. "_top"、"_blank"、"_self"具有特殊意義的名稱。

  ? _blank：在新窗口顯示目標網頁
  ? _self：在當前窗口顯示目標網頁
  ? _top：框架網頁中在上部窗口中顯示目標網頁

  3. 相同 name 的窗口只能創建一個，要想創建多個窗口則 name 不能相同。
  4. name 不能包含有空格。

  參數字符串：可選參數，設置窗口參數，各參數用逗號隔開。

• 關閉窗口

  window.close();   //關閉本窗口
  <窗口對象>.close();   //關閉指定的窗口
  
  <script type="text/javascript">
     var mywin=window.open('http://www.imooc.com'); //將新打的窗口對象，存儲在變量mywin中
     mywin.close();
  </script>
  

DOM操作

• 通過ID獲取元素

   document.getElementById(“id”) 
  

• innerHTML屬性

  innerHTML 屬性用于獲取或替換 HTML 元素的內容。

  Object.innerHTML
  
   var mychar= document.getElementById("con").innerHTML
  

• 改變HTML樣式

  HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。

  Object.style.property=new style;
  

  基本屬性表（property）:

  <p id="pcon">Hello World!</p>
  <script>
     var mychar = document.getElementById("pcon");
     mychar.style.color="red";
     mychar.style.fontSize="20";
     mychar.style.backgroundColor ="blue";
  </script>
  

• 顯示和隱藏

  網頁中經常會看到顯示和隱藏的效果，可通過display屬性來設置。

  Object.style.display = value
  

  value取值:

  function hidetext()  
  {  
  var mychar = document.getElementById("con");
  mychar.style.display="none";
  }  
  function showtext()  
  {  
  var mychar = document.getElementById("con");
  mychar.style.display="block";
  }
  

• 控制類名

  className 屬性設置或返回元素的class 屬性。

  object.className = classname
  

  作用:

  1. 獲取元素的class 屬性
  2. 為網頁內的某個元素指定一個css樣式來更改該元素的外觀

  <script type="text/javascript">
  function add(){
      var p1 = document.getElementById("p1");
    p1.className="one";
  }
  function modify(){
    var p2 = document.getElementById("p2");
    p2.className="two";
  }
  </script>
  

• 恢復默認style

   object.removeAttribute('style');
  

  ?