《JavaScript入門篇》摘要

0.課程連接

http://www.imooc.com/learn/36

 

1.在HTML中加入JS的方法

1 <script type="text/javascript">
2     document.write("hello");
3     document.getElementById("p1").style.color="blue"
4 </script>

<script type="text/javascript">
表示在<script></script>之間的是文本類型(text)
javascript是爲了告訴瀏覽器裏面的文本是屬於JavaScript語言

 

2.也能夠引入外部文件

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

JS代碼單獨寫在*.js文件中，如

1 //請寫入JS代碼
2 document.write("hello")
3 alert("JS")

 

3.<script>標籤的位置

理論上能夠放在head或body，建議放在head，緣由是HTML是順序執行，有些初始化（如給頁面body設置css）必須在一開始就完成

 

4.什麼是變量？

1 var mynum = 8;

 

5.什麼是函數？

函數的聲明和定義

1 function contxt() //定義函數
2 {
3     alert("哈哈，調用函數了!");
4 }

函數的調用

1 <form>
2     <input type="button"  value="點擊我" onclick="contxt()" />  
3 </form>

 

6.輸出內容

1 document.write("Hello world!")
2 
3 mystr = "Hello world"
4 document.write(mystr)

 

7.警告（Alert）

1 alert("alert")

  

8.確認（Confirm）

1 var mymessage= confirm("你是女士麼？");
2 if(mymessage==true){
3     document.write("你是女士!");
4 }
5 else{
6     document.write("你是男士!");
7 }

 

9.提問（Prompt）

1 var myname=prompt("請輸入你的姓名:");
2 if(myname!=null)
3   {   alert("你好"+myname); }
4 else
5   {  alert("你好 my friend.");  }

prompt(str1, str2)

str1是顯示消息對話框中的文本，不可修改

str2是顯示在文本框中，可修改

 

10.打開新窗口（window.open）

1 window.open('http://www.imooc.com','_blank','width=600,height=400,top=100,left=0');

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

窗口名稱：能夠自定義，也能夠用幾個具備特殊意義的：_top, _blank, _self

參數字符串：width、height、top、left、menubar、toolbar、scrollbar、status

 

11.關閉窗口（window.close）

1 var mywin=window.open("http://www.imooc.com");
2 mywin.close();

能夠window.close() 或者 <窗口對象>.close() 

 

12.認識DOM

DOM將HTML變爲帶有元素、文本、屬性的節點樹

 

13.經過ID獲取元素

document.getElementById(「id」)
結果:null或[object HTMLParagraphElement]
注:獲取的元素是一個對象，如想對元素進行操做，咱們要經過它的屬性或方法

 

14.改變HTML元素的內容 --- innerHTML

1 var mychar=document.getElementById('con');
2 mychar.innerHTML = 'Hello world!';

用來獲取和替換HTML元素的內容

 

15.改變HTML元素的樣式

1 var mychar= document.getElementById("con");
2 mychar.style.color = 'red';
3 mychar.style.backgroundColor = '#CCC'
4 mychar.style.width = '300px'

Object.style.property=new style;

 

16.顯示和隱藏

1 mychar.style.display = "none";
2 mychar.style.display = "block";

是15的一個特例

 

17.控制類名（className屬性）

1 object.className = classname;