JavaScript入门篇

引用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');
  

  ​