JavaScript的使用

JavaScript · 發表 2018-09-23 23:26:08

摘要：前言: JavaScript作為使用得最多的指令碼語言，可以說是無處不在。所有主流瀏覽器都支援JavaScript。目前，全世界大部分網頁都使用JavaScript。它可以讓網頁呈現各種動態效果。作為後臺程式員的我們，JavaScript也是必備的。接下來就一起來學習一下JavaScri...

前言:

JavaScript作為使用得最多的指令碼語言，可以說是無處不在。所有主流瀏覽器都支援JavaScript。目前，全世界大部分網頁都使用JavaScript。它可以讓網頁呈現各種動態效果。作為後臺程式員的我們，JavaScript也是必備的。接下來就一起來學習一下JavaScript，感受它的魅力！

一、JavaScript簡介：

JavaScript是指令碼語言，簡稱js，用來給HTML網頁增加動態功能。注意JavaScript和Java並沒有半毛錢關係，Java是編譯執行的語言，也就是一次性把程式碼轉換成cpu看得懂的語言，一行行執，而JavaScript是解釋執行的語言，一行行的解析，解析一行執行一行。

二、js基礎：

1、js程式碼的位置：

在html，通過下面的標籤編寫js：

<script type="text/javascript">
// js編寫區
</script>

不過不建議將js程式碼直接寫在html頁面中，可以單獨編寫js檔案，然後在html頁面中按下面的方式引入js檔案：

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

這樣就把script.js引入進來了。

2、JavaScript註釋：

JavaScript註釋和Java一樣，單行註釋用//，多行註釋用/* */。

3、js的變數：

js中用 var 宣告變數，取分大小寫。變數的命名需遵循如下規則：

(1)變數必須使用字母、下劃線_或者美元符$開始。

(2)然後可以使用任意多個英文字母、數字、下劃線_或者美元符$組成。

(3)不能使用JavaScript關鍵詞與JavaScript保留字。

變數需先宣告再賦值，也可重複賦值，如下：

var mychar;
mychar="javascript";
mychar="hello";// 可重複賦值
var mynum = 6;

4、if ... else判斷：

if(條件)
{ 條件成立時執行的程式碼 }
else
{ 條件不成立時執行的程式碼 }

if條件判斷和Java中的是一樣的。

5、js函式的定義：

所謂函式，就是Java中所說的方法，JavaScript中用function關鍵字來定義函式：

function 函式名()
{
函式程式碼;
}

上面的是無參函式，也可以定義帶參函式，和Java中的帶參方法一樣，多個引數用逗號隔開。函式不呼叫不執行，呼叫直接寫函式名即可。

6、輸出內容：

可以使用 document.write() 直接在網頁中輸出內容，，就和Java的 System.out.println() 差不多，可以輸出變數，也可以輸出""之間的內容，還可以加 <br> 換行標籤等。

7、alert彈窗：

我們在訪問網站的時候，有時會突然彈出一個小視窗，上面寫著一段提示資訊文字。如果你不點選“確定”，就不能對網頁做任何操作，這個小視窗就是使用alert實現的。直接 alert("在此輸入彈窗內容") 即可。我們經常用該方法來除錯js程式碼。

8、confirm訊息對話方塊：

confirm 訊息對話方塊通常用於允許使用者做選擇的動作，如：“你對嗎？”等。彈出對話方塊(包括一個確定按鈕和一個取消按鈕)。當用戶點選"確定"按鈕時，返回true當用戶點選"取消"按鈕時，返回false。看如下案例：

function rec(){
var mymessage=confirm("你是女的嗎？");
if(mymessage==true){
document.write("你是女士!");
}
else{
document.write("你是男士!");
}
}
<body>
<input name="button" type="button" onClick="rec()" value="點選我，彈出確認對話方塊" />
</body>

當點選“點選我，彈出確認對話方塊”按鈕後，就會有“你是女的嗎”的彈窗，如果點“確定”，那頁面就會輸出“你是女的”，如果點“取消”，就會輸出“你是男的”。

9、prompt訊息對話方塊：

直接看案例：

function rec(){
var myname=prompt("請輸入你的姓名:");
if(myname!=null){
alert("你好"+myname);
}
else{
alert("你好 my friend");
}
}

呼叫了rec方法後，就會有個彈窗，彈窗中有個輸入框叫你輸入姓名，如果輸入了“劉亦菲”點確定，那麼就會彈出“你好劉亦菲”，沒輸入內容點確定就會彈出“你好 my friend”。

10、window.open():

open() 方法可以查詢一個已經存在或者新建的瀏覽器視窗。語法如下：

window.open([URL], [視窗名稱], [引數字串])

例如：

window.open('http://www.baidu.com',
'_blank',
'width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')

這段程式碼表示開啟百度網首頁，_blank表示新視窗開啟，該引數值還可以為_self和_top，_self表示在當前視窗開啟新頁面，_top表示在框架網頁中在上部視窗中顯示目標網頁；第三個引數字串可以設定如下內容：

引數	值	說明
top	Number	視窗頂部離開螢幕頂部的畫素數
left	Number	視窗左部離開螢幕左端的畫素數
width	Number	視窗的寬度
height	Number	視窗的高度
menubar	yes,no	視窗有沒有選單
toolbar	yes,no	視窗有沒有工具條
scrollbars	yes,no	視窗有沒有滾動條
status	yes,no	視窗有沒有狀態列

11、迴圈：

for迴圈、while迴圈、do while迴圈都和Java中的是一樣的。

12、事件：

所謂事件，就是滑鼠單擊、滑鼠滾動之類動作，主要事件列表如下：

事件	說明
onclick	滑鼠單擊
onmouseover	滑鼠經過
onmouseout	滑鼠移開
onchange	文字框內容改變
onselect	文字款內容被選中
onfocus	游標聚集
onblur	游標離開
onload	網頁匯入
onunload	關閉網頁

我們最常用的就是onclick事件了，比如給一個按鈕新增一個onclick事件，就是在按鈕標籤那裡新增 onclick = "fun()" ，就表示單擊了這個按鈕就會呼叫fun這個函式。其他事件此處不再做詳細解釋。

三、js的內建物件：

至於什麼是物件，這裡就不再解釋了。接下來看看js提供了哪些內建物件：

1、Date日期物件：

定義日期物件： var date = new Date() ，也可以帶引數定義： var date = new Date(2018,9,23)

日期物件的方法：

方法名	作用
get/setDate()	返回/設定日期
get/setFullYear()	返回/設定年份，四位數表示
get/setYear()	返回/設定年份
get/setMonth()	返回/設定月份，0是一月 …… 11是十二月
get/setHours()	返回/設定小時，24小時制
get/setMinutes()	返回/設定分鐘
get/setSeconds()	返回/設定秒
get/setTime()	返回設定時間(毫秒為單位)

返回星期的方法：

<script type="text/javascript">
var mydate=new Date();//定義日期物件
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定義陣列物件,給每個陣列項賦值
var mynum=mydate.getDay();//返回值儲存在變數mynum中
document.write("今天是："+ weekday[mynum]);//輸出星期幾
</script>

2、String字串物件：

定義字串的方法就是直接賦值： var mystr = "I love JavaScript!"
獲取字串長度： mystr.length
將字串中的大(小)寫字母轉為小(大)寫： mystr.toLowerCase() 、 mystr.toUpperCase()

返回字串中指定位置的字元： mystr.charAt(2) ，從0開始，空格也算一個字元

分割字串：

var mystr = "www.baidu.com";
document.write(mystr.split(".")+"<br>");// 用 . 分割
document.write(mystr.split(".", 2)+"<br>");// 用 . 分割，返回兩個串
document.write(mystr.split("")+"<br>");// 每隔字元間都會分割一下

第一個結果是www，baidu，com；第二個結果是www，baidu；第三個結果是w,w,w,.,b,a,i,d,u,.,c,o,m 。

提取字串： mystr.substring(startPos,stopPos) ，兩個引數分別是開始位置和結束位置，第二個引數可選。

獲取指定數目的字串： mystr.substr(startPos,length)

3、Math物件：

Math物件提供資料的數學計算，和Java中的Math物件差不多。提供的方法有很多，此處不逐一列舉，常用的有 Math.random() ，用來獲取隨機數。

4、Array陣列物件：

(1)、一維陣列：

js中的陣列儲存的資料可以是任何型別（數字、字元、布林值等），定義陣列方式如下：

var myarr=new Array(); //定義陣列
 myarr[0]=80; 
 myarr[1]=90;
 myarr[2]=99;
 myarr.length; //獲得陣列myarray的長度

或者這樣：

var myarray = new Array(66,80,90,77,59);//建立陣列同時賦值

或者簡寫為：

var myarray = [66,80,90,77,59];//直接輸入一個數組（稱 “字面量陣列”）

注意js中陣列長度是可變的，增加元素的個數，length自然改變，或者直接 myarr.length=10 也可以設定陣列長度。

(2)、二維陣列：

定義方法：

var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]

四、認識BOM：

BOM全稱是Browser Object Model，中文就是瀏覽器物件模型，由多個物件組成，接下來就來學習一下它的物件。

1、window物件：

window物件是BOM的頂層物件，其它物件都是這個物件的子物件，代表瀏覽器視窗。window物件的方法如下：

image.png

常用的一些方法在本文js基礎部分已經講過，這裡不再贅述。

2、History物件：

history物件記錄了使用者曾經瀏覽過的頁面(URL)，並可以實現瀏覽器前進與後退相似導航的功能。語法： window.history.屬性 或 window.history.方法 。

History物件的屬性：

屬性	含義
length	瀏覽器歷史列表中的URL數量

History物件的方法：

方法	作用
back()	相當於返回上一頁
forward()	載入history列表中的下一個url
go(引數)	載入history列表中的某個具體的頁面，引數為1表示下一頁，為-1表示前一頁，以此類推

3、location物件：

location用於獲取或設定窗體的URL，並且可以用於解析URL。語法： location.[屬性|方法] 。

location物件屬性圖示:

image.png

location 物件屬性：

image.png

location 物件方法:

方法	作用
assign()	載入新的文件
reload()	重新載入當前文件
replace()	用新的文件替換當前文件

4、navigator物件：

Navigator 物件包含有關瀏覽器的資訊，通常用於檢測瀏覽器與作業系統的版本。語法： navigator.屬性名 。

該物件的屬性有：

image.jpg

5、screen物件：

screen物件用於獲取使用者的螢幕資訊。語法： window.screen.屬性 。

其屬性有：

image.png

五、認識DOM:

DOM（Document Object Model）就是文件物件模型，定義訪問和處理HTML文件的標準方法。DOM 將HTML文件呈現為帶有元素、屬性和文字的樹結構（節點樹），如下圖：

image.png

HTML文件可以說由節點構成的集合，三種常見的DOM節點:

(1) 元素節點：上圖中<html>、<body>、<p>等都是元素節點，即標籤。

(2) 文字節點:向用戶展示的內容，如<li>...</li>中的JavaScript、DOM、CSS等文字。

(3) 屬性節點:元素屬性，如<a>標籤的連結屬性href="http://www.imooc.com"。

現有如下程式碼：

<a href="http://www.imooc.com">JavaScript DOM</a>

那麼其DOM結構如下：

image.png

理解了DOM之後，再來學習以下方法：

1、獲取元素：

獲取元素通過document物件呼叫以下方法：

方法名	作用	返回
getElementById("id")	通過指定id獲取元素	一個
getElementsByName("name")	通過元素name屬性獲得元素	一組
getElementsByTagName("Tagname")	通過標籤名稱獲得元素	一組

<input type="checkbox" name="hobby" id="hobby1">音樂
<input type="checkbox" name="hobby" id="hobby2">登山
document.getElementById(“hobby1”)<!--通過id獲取-->
document.getElementsByName("hobby")<!--通過name獲取-->
document.getElementsByTagName("input")<!--通過TagName獲取-->

2、innerHTML 屬性：

innerHTML 屬性用於獲取或替換 HTML 元素的內容。語法如下：

Object.innerHTML

案例：

<h2 id="con">javascript</h2>
var mychar=document.getElementById("con") ;// 獲取h2元素
document.write("原標題:"+mychar.innerHTML+"<br>"); //輸出原h2標籤內容
mychar.innerHTML = "Hello world";// 修改h2標籤的內容
document.write("修改後的標題:"+mychar.innerHTML); //輸出修改後h2標籤內容

執行結果如下：

image.png

3、改變HTML樣式：

語法如下：

Object.style.property=new style;

部分基本屬性(property)如下表：

屬性	描述
backgroudColor	設定元素背景顏色
height	設定元素高度
width	設定元素寬度
color	設定文字顏色
font	設定字型屬性
fontSize	設定字型大小

案例：

<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>

這段程式碼就是把“Hello World！”設定為紅色、字型大小為20、背景顏色為藍色。

4、顯示和隱藏(display):

我們在論壇或者貼吧下載別人分享的資源時，通常是要評論了以後才會顯示下載連結，沒評論就不會顯示，這就是用到了display屬性。語法如下：

Object.style.display = value

value的取值如下：

值	描述
none	此元素不會被顯示
block	此元素將顯示為塊級元素

案例：

<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.display="none";
</script>

這樣就會把“Hello World！”隱藏掉。

5、控制類名(className屬性)：

一般的標籤除了有id，還會有class，那麼通過下面的方式就可以獲取和改變class值。語法：

獲取class的值：

object.className

改變class的值：

object.className = " ..."

案例：

<p id="pcon" class="one">Hello world</p>
<script>
function fun(){
var mychar = document.getElementById("pcon");
mychar.className="two";
}
</script>

呼叫了fun函式後，就會把p標籤的class屬性的值由one變為two。

6、getAttribute()和setAttribute()方法：

getAttribute()方法是通過元素節點的屬性名稱獲取屬性的值，語法： elementNode.getAttribute(name) ；setAttribute()方法就是增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定為指定的值，語法： elementNode.setAttribute(name,value) 。elementNode是使用getElementById()、getElementsByTagName()等方法，獲取到的元素節點，name是要想查詢的元素節點的屬性名字，value是要新增或者設定的值。案例：

<h1 id="alink" title="測試">hello JavaScript1</h1>
var elementNode = document.getElementById("alink");
var attr1 = elementNode.getAttribute("id");
var attr2 = elementNode.getAttribute("title");
elementNode.setAttribute("title","測試更新");

attr1就是“alink”，attr2就是“測試”，最後一行程式碼就是將“測試”改為“測試更新”。

7、節點屬性：

在文件物件模型 (DOM) 中，每個節點都是一個物件。DOM 節點有三個重要屬性：

(1)、 nodeName : 節點的名稱，是隻讀的

a. 元素節點的 nodeName 與標籤名相同

b. 屬性節點的 nodeName 是屬性的名稱

c. 文字節點的 nodeName 永遠是 #text

d. 文件節點的 nodeName 永遠是 #document

(2)、 nodeValue ：節點的值

a. 元素節點的 nodeValue 是 undefined 或 null

b. 文字節點的 nodeValue 是文字自身

c. 屬性節點的 nodeValue 是屬性的值

(3)、 nodeType ：節點的型別，是隻讀的，常用的幾種結點型別如下表：

元素型別	節點型別
元素	1
屬性	2
文字	3
註釋	8
文件	9

案例：

<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var list = document.getElementsByTagName("li");
list[0].parentNode.nodeName;// 獲取父節點的名稱，也就是ul節點
for(i=0;i<=list.length;i++){
document.write(list[i].nodeName);// 結果輸出三個li
}
var node = document.getElementsByTagName("ul");//獲取ul的子節點
var result = node[0].childNodes.length;// 子節點的個數(結果是3，因為有3個li)
node.firstChild;// 獲取到的是第一個li
node.lastChild;// 獲取到的是最後一個li
</script>

對於節點的操作還有：

訪問兄弟節點、插入節點、刪除節點、替換節點、替換元素節點、建立元素節點、建立文字節點等。

總結:

JavaScript十分強大，且使用廣泛，幾乎所有的web應用都會用到JavaScript。重點要理解DOM以及對DOM的一些操作。由於本人學後端的，所以DOM部分對節點操作的很多方法沒有進行研究，不過這些方法都很易懂，需要用時自行百度即可。

JavaScript的使用

前言:

一、JavaScript簡介：

二、js基礎：

4、if ... else判斷：

三、js的內建物件：

四、認識BOM：

五、認識DOM:

總結:

您可能也會喜歡…