1.在頁面寫東西。
<code>
var mystr="我是";
var mychar="JavaScript";
document.write(mystr+mychar);
</code>
2.彈窗。
<code>
var c = "點我";
alert(c);
</code>
3.確認。
<code>
var c = confirm("Will you merry me?");
if(c == true){
document.write("I'm so happy that you can be my wife");
}else{
document.write("It's so pity,and hope you be a happiness wife~")
}
</code>
4.對話框
語法:
prompt(str1, str2);
參數說明：
str1: 要顯示在消息對話框中的文本，不可修改str2：文本框中的內容，可以修改
<code>
var c = prompt("Please input you question.","Will you merry me?");
if(c == "Will you merry me?"){
document.write("I'm so happy that you can be my wife");
}else{
document.write("It's so pity,and hope you be a happiness wife~")
}
</code>
5.打開新窗口
window.open([URL], [窗口名稱], [參數字符串])
參數說明:
URL：可選參數，在窗口中要顯示網頁的網址或路徑。如果省略這個參數，或者它的值是空字符串，那么窗口就不顯示任何文檔。窗口名稱：可選參數，被打開窗口的名稱。
1.該名稱由字母、數字和下劃線字符組成。
2."_top"、"_blank"、"_selft"具有特殊意義的名稱。 _blank：在新窗口顯示目標網頁 _self：在當前窗口顯示目標網頁 _top：框架網頁中在上部窗口中顯示目標網頁
3.相同 name 的窗口只能創建一個，要想創建多個窗口則 name 不能相同。
4.name 不能包含有空格。參數字符串：可選參數，設置窗口參數，各參數用逗號隔開。
<code>
<script type="text/javascript">
function winOpen(){
window.open('http://www.baidu.com','baiduyixia','_blank','width=300,height=400');
}
</script>
</code>
6.close()關閉窗口
用法：
window.close(); //關閉本窗口
或
<窗口對象>.close(); //關閉指定的窗口
7.dom操作
HTML文檔可以說由節點構成的集合，DOM節點有:
- 元素節點：上圖中<html>、<body>等都是元素節點，即標簽。
- 文本節點:向用戶展示的內容，如li.../li中的JavaScript、DOM、CSS等文本。
- 屬性節點:元素屬性，如a標簽的鏈接屬性href="http://www.imooc.com"。
節點屬性：
遍歷節點樹:
dom操作
根據結點ID獲取結點（取到的值是唯一的）
var a = document.getElementById("h");-
getElementsByName()方法
返回帶有指定名稱的節點對象的集合。
語法：- document.getElementsByName(name)
與getElementById() 方法不同的是，通過元素的 name 屬性查詢元素，而不是通過 id 屬性。 - 注意:
- 因為文檔中的 name 屬性可能不唯一，所有 getElementsByName() 方法返回的是元素的數組，而不是一個元素。
- 和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，從0開始。
- document.getElementsByName(name)
-
getElementsByTagName()方法
返回帶有指定標簽名的節點對象的集合。返回元素的順序是它們在文檔中的順序。
語法:
document.getElementsByTagName(Tagname)
說明:- Tagname是標簽的名稱，如p、a、img等標簽名。
- 和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，所以從0開始。
獲取成功后直接可以對結點進行操作：
1).改變html元素的屬性
<code>
eg：
function c(){
var a = document.getElementById("h");
a.style.color = "red";
a.style.backgroundColor = "white";
}
</code>
顯示和隱藏：display
2).獲得并改變html元素的類名(應用：某個元素一開始是one這個類名，在css有one的樣式，然后類名改成two之后，就可以讓元素不用one的樣式)
<code>
var a = document.getElementById("id");
a.className = "one";
</code>
3)getAttribute()方法
通過元素節點的屬性名稱獲取屬性的值。
語法：
elementNode.getAttribute(name)
說明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節點。
2. name：要想查詢的元素節點的屬性名字
4)setAttribute()方法
setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定為指定的值。
語法：
elementNode.setAttribute(name,value)
說明：
1.name: 要設置的屬性名。
2.value: 要設置的屬性值。
注意：
+ 把指定的屬性設置為指定的值。如果不存在具有指定名稱的屬性，該方法將創建一個新屬性。
+ 類似于getAttribute()方法，setAttribute()方法只能通過元素節點對象調用的函數。
5)節點屬性
在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性 ：
- nodeName : 節點的名稱
- nodeValue ：節點的值
- nodeType ：節點的類型
一、nodeName 屬性: 節點的名稱，是只讀的。
- 元素節點的 nodeName 與標簽名相同
- 屬性節點的 nodeName 是屬性的名稱
- 文本節點的 nodeName 永遠是 #text
- 文檔節點的 nodeName 永遠是 #document
二、nodeValue 屬性：節點的值
- 元素節點的 nodeValue 是 undefined 或 null
- 文本節點的 nodeValue 是文本自身
- 屬性節點的 nodeValue 是屬性的值
三、nodeType 屬性: 節點的類型，是只讀的。以下常用的幾種結點類型:
元素類型 節點類型
元素 1
屬性 2
文本 3
注釋 8
文檔 9
8.事件
<code>
<h2 id="con" onclick="c()" onmouseover="a()" onmouseout="b()">JavaScript課程</h2>
<input type="text" value="改變值發生變化" id="conn" onchange="d()" onfocus="e()" onselect="f()">
<script type="text/javascript">
var content = document.getElementById("con");
var content2 = document.getElementById("conn");
function c(){
content.style.color = "red";
}
function a(){
content.style.color = "green";
}
function b(){
content.style.color = "blue";
}
function d(){
content2.style.color = "grey";
}
function e(){
content2.style.color = "black";
}
function f(){
content2.style.color = "yellow";
}
</script>
</code>
9.對象
JavaScript 中的所有事物都是對象，如:字符串、數值、數組、函數等，每個對象帶有屬性和方法。
- 對象的屬性：反映該對象某些特定的性質的，如：字符串的長度、圖像的長寬等；
objectName.propertyName - 對象的方法：能夠在對象上執行的動作。例如，表單的“提交”(Submit)，時間的“獲取”(getYear)等；
JavaScript 提供多個內建對象，比如 String、Date、Array 等等，使用對象前先定義。
objectName.methodName()
9.1Date對象（日期時間對象，可以精確到毫秒）
常用方法：
<code>
var mydate=new Date();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
document.write("今天是：" +weekday[mydate.getDay()] );
var myyear= mydate.getFullYear();
document.write("年份:"+myyear);
document.write("當前時間："+mydate+"
");
// 2h = 2 * 60 * 60 * 1000 ms
mydate.setTime( mydate.getTime() + 2* 60 * 60 * 1000);
document.write("推遲二小時時間：" + mydate);
</code>
9.2 Math對象
9.3 數祖
-
sort方法
sort()方法使數組中的元素按照一定的順序排列。
語法:
arrayObject.sort(方法函數)
參數說明：
1.如果不指定<方法函數>，則按unicode碼順序排列。
2.如果指定<方法函數>，則按<方法函數>所指定的排序方法排序。
myArray.sort(sortMethod);
9.4 window對象
9.5 計時器
<code>
i = window.setInterval("cal()", 1000);
window.clearInterval(i);
</code>
9.6 History 對象
記錄著瀏覽器從打開瀏覽過的每一張頁面
back()相當于go(-1);
9.7Location對象
location用于獲取或設置窗體的URL，并且可以用于解析URL。
location對象屬性圖示:
-
location 對象屬性：
-
location 對象方法:
9.8 navigator對象
Navigator 對象包含有關瀏覽器的信息，通常用于檢測瀏覽器與操作系統的版本。
9.9 screen對象
screen對象用于獲取用戶的屏幕信息。
