前言:

JavaScript作為使用得最多的腳本語(yǔ)言，可以說是無處不在。所有主流瀏覽器都支持JavaScript。目前，全世界大部分網(wǎng)頁(yè)都使用JavaScript。它可以讓網(wǎng)頁(yè)呈現(xiàn)各種動(dòng)態(tài)效果。作為后臺(tái)程序員的我們，JavaScript也是必備的。接下來就一起來學(xué)習(xí)一下JavaScript，感受它的魅力！

歡迎大家關(guān)注我的公眾號(hào) javawebkf，目前正在慢慢地將簡(jiǎn)書文章搬到公眾號(hào)，以后簡(jiǎn)書和公眾號(hào)文章將同步更新，且簡(jiǎn)書上的付費(fèi)文章在公眾號(hào)上將免費(fèi)。

一、JavaScript簡(jiǎn)介：

JavaScript是腳本語(yǔ)言，簡(jiǎn)稱js，用來給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。注意JavaScript和Java并沒有半毛錢關(guān)系，Java是編譯執(zhí)行的語(yǔ)言，也就是一次性把代碼轉(zhuǎn)換成cpu看得懂的語(yǔ)言，一行行執(zhí)，而JavaScript是解釋執(zhí)行的語(yǔ)言，一行行的解析，解析一行執(zhí)行一行。

二、js基礎(chǔ)：

1、js代碼的位置：
在html，通過下面的標(biāo)簽編寫js：

<script type="text/javascript">
       // js編寫區(qū)
</script>

不過不建議將js代碼直接寫在html頁(yè)面中，可以單獨(dú)編寫js文件，然后在html頁(yè)面中按下面的方式引入js文件：

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

這樣就把script.js引入進(jìn)來了。

2、JavaScript注釋：
JavaScript注釋和Java一樣，單行注釋用//，多行注釋用/* */。

3、js的變量：
js中用var聲明變量，取分大小寫。變量的命名需遵循如下規(guī)則：
????(1)變量必須使用字母、下劃線_或者美元符$開始。
????(2)然后可以使用任意多個(gè)英文字母、數(shù)字、下劃線_或者美元符$組成。
????(3)不能使用JavaScript關(guān)鍵詞與JavaScript保留字。
變量需先聲明再賦值，也可重復(fù)賦值，如下：

var mychar;
mychar="javascript";
mychar="hello";// 可重復(fù)賦值
var mynum = 6;

4、if ... else判斷：

if(條件)
{ 條件成立時(shí)執(zhí)行的代碼 }
else
{ 條件不成立時(shí)執(zhí)行的代碼 }

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

5、js函數(shù)的定義：
所謂函數(shù)，就是Java中所說的方法，JavaScript中用function關(guān)鍵字來定義函數(shù)：

function 函數(shù)名()
{
     函數(shù)代碼;
}

上面的是無參函數(shù)，也可以定義帶參函數(shù)，和Java中的帶參方法一樣，多個(gè)參數(shù)用逗號(hào)隔開。函數(shù)不調(diào)用不執(zhí)行，調(diào)用直接寫函數(shù)名即可。
6、輸出內(nèi)容：
可以使用document.write() 直接在網(wǎng)頁(yè)中輸出內(nèi)容，，就和Java的System.out.println()差不多，可以輸出變量，也可以輸出""之間的內(nèi)容，還可以加<br>換行標(biāo)簽等。

7、alert彈窗：
我們?cè)谠L問網(wǎng)站的時(shí)候，有時(shí)會(huì)突然彈出一個(gè)小窗口，上面寫著一段提示信息文字。如果你不點(diǎn)擊“確定”，就不能對(duì)網(wǎng)頁(yè)做任何操作，這個(gè)小窗口就是使用alert實(shí)現(xiàn)的。直接alert("在此輸入彈窗內(nèi)容")即可。我們經(jīng)常用該方法來調(diào)試js代碼。

8、confirm消息對(duì)話框：
confirm 消息對(duì)話框通常用于允許用戶做選擇的動(dòng)作，如：“你對(duì)嗎？”等。彈出對(duì)話框(包括一個(gè)確定按鈕和一個(gè)取消按鈕)。當(dāng)用戶點(diǎn)擊"確定"按鈕時(shí)，返回true當(dāng)用戶點(diǎn)擊"取消"按鈕時(shí)，返回false?？慈缦掳咐?/p>

function rec(){
    var mymessage=    confirm("你是女的嗎？")     ;
    if(mymessage==true){
        document.write("你是女士!");
    }
    else{
        document.write("你是男士!");
    }
}    
<body>
    <input name="button" type="button" onClick="rec()" value="點(diǎn)擊我，彈出確認(rèn)對(duì)話框" />
</body>

當(dāng)點(diǎn)擊“點(diǎn)擊我，彈出確認(rèn)對(duì)話框”按鈕后，就會(huì)有“你是女的嗎”的彈窗，如果點(diǎn)“確定”，那頁(yè)面就會(huì)輸出“你是女的”，如果點(diǎn)“取消”，就會(huì)輸出“你是男的”。

9、prompt消息對(duì)話框：
直接看案例：

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

調(diào)用了rec方法后，就會(huì)有個(gè)彈窗，彈窗中有個(gè)輸入框叫你輸入姓名，如果輸入了“劉亦菲”點(diǎn)確定，那么就會(huì)彈出“你好劉亦菲”，沒輸入內(nèi)容點(diǎn)確定就會(huì)彈出“你好 my friend”。

10、window.open():
open() 方法可以查找一個(gè)已經(jīng)存在或者新建的瀏覽器窗口。語(yǔ)法如下：
window.open([URL], [窗口名稱], [參數(shù)字符串])
例如：

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

這段代碼表示打開百度網(wǎng)首頁(yè)，_blank表示新窗口打開，該參數(shù)值還可以為_self和_top，_self表示在當(dāng)前窗口打開新頁(yè)面，_top表示在框架網(wǎng)頁(yè)中在上部窗口中顯示目標(biāo)網(wǎng)頁(yè)；第三個(gè)參數(shù)字符串可以設(shè)置如下內(nèi)容：

參數(shù)	值	說明
top	Number	窗口頂部離開屏幕頂部的像素?cái)?shù)
left	Number	窗口左部離開屏幕左端的像素?cái)?shù)
width	Number	窗口的寬度
height	Number	窗口的高度
menubar	yes,no	窗口有沒有菜單
toolbar	yes,no	窗口有沒有工具條
scrollbars	yes,no	窗口有沒有滾動(dòng)條
status	yes,no	窗口有沒有狀態(tài)欄

11、循環(huán)：
for循環(huán)、while循環(huán)、do while循環(huán)都和Java中的是一樣的。

12、事件：
所謂事件，就是鼠標(biāo)單擊、鼠標(biāo)滾動(dòng)之類動(dòng)作，主要事件列表如下：

事件	說明
onclick	鼠標(biāo)單擊
onmouseover	鼠標(biāo)經(jīng)過
onmouseout	鼠標(biāo)移開
onchange	文本框內(nèi)容改變
onselect	文本款內(nèi)容被選中
onfocus	光標(biāo)聚集
onblur	光標(biāo)離開
onload	網(wǎng)頁(yè)導(dǎo)入
onunload	關(guān)閉網(wǎng)頁(yè)

我們最常用的就是onclick事件了，比如給一個(gè)按鈕添加一個(gè)onclick事件，就是在按鈕標(biāo)簽?zāi)抢锾砑?code>onclick = "fun()"，就表示單擊了這個(gè)按鈕就會(huì)調(diào)用fun這個(gè)函數(shù)。其他事件此處不再做詳細(xì)解釋。

三、js的內(nèi)置對(duì)象：

至于什么是對(duì)象，這里就不再解釋了。接下來看看js提供了哪些內(nèi)置對(duì)象：
1、Date日期對(duì)象：
定義日期對(duì)象：var date = new Date()，也可以帶參數(shù)定義：var date = new Date(2018,9,23)
日期對(duì)象的方法：

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

返回星期的方法：

<script type="text/javascript">
  var mydate=new Date();//定義日期對(duì)象
  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定義數(shù)組對(duì)象,給每個(gè)數(shù)組項(xiàng)賦值
  var mynum=mydate.getDay();//返回值存儲(chǔ)在變量mynum中
  document.write("今天是："+ weekday[mynum]);//輸出星期幾
</script>

2、String字符串對(duì)象：
定義字符串的方法就是直接賦值：var mystr = "I love JavaScript!"
獲取字符串長(zhǎng)度：mystr.length
將字符串中的大(小)寫字母轉(zhuǎn)為小(大)寫：mystr.toLowerCase()、mystr.toUpperCase()
返回字符串中指定位置的字符：mystr.charAt(2)，從0開始，空格也算一個(gè)字符
分割字符串：

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

第一個(gè)結(jié)果是www，baidu，com；第二個(gè)結(jié)果是www，baidu；第三個(gè)結(jié)果是w,w,w,.,b,a,i,d,u,.,c,o,m 。
提取字符串：mystr.substring(startPos,stopPos) ，兩個(gè)參數(shù)分別是開始位置和結(jié)束位置，第二個(gè)參數(shù)可選。
獲取指定數(shù)目的字符串：mystr.substr(startPos,length)

3、Math對(duì)象：
Math對(duì)象提供數(shù)據(jù)的數(shù)學(xué)計(jì)算，和Java中的Math對(duì)象差不多。提供的方法有很多，此處不逐一列舉，常用的有Math.random()，用來獲取隨機(jī)數(shù)。

4、Array數(shù)組對(duì)象：
(1)、一維數(shù)組：
js中的數(shù)組存儲(chǔ)的數(shù)據(jù)可以是任何類型（數(shù)字、字符、布爾值等），定義數(shù)組方式如下：

var myarr=new Array(); //定義數(shù)組
 myarr[0]=80; 
 myarr[1]=90;
 myarr[2]=99;
 myarr.length; //獲得數(shù)組myarray的長(zhǎng)度

或者這樣：

var myarray = new Array(66,80,90,77,59);//創(chuàng)建數(shù)組同時(shí)賦值

或者簡(jiǎn)寫為：

var myarray = [66,80,90,77,59];//直接輸入一個(gè)數(shù)組（稱 “字面量數(shù)組”）

注意js中數(shù)組長(zhǎng)度是可變的，增加元素的個(gè)數(shù)，length自然改變，或者直接myarr.length=10也可以設(shè)置數(shù)組長(zhǎng)度。
(2)、二維數(shù)組：
定義方法：

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

四、認(rèn)識(shí)BOM：

BOM全稱是Browser Object Model，中文就是瀏覽器對(duì)象模型，由多個(gè)對(duì)象組成，接下來就來學(xué)習(xí)一下它的對(duì)象。
1、window對(duì)象：
window對(duì)象是BOM的頂層對(duì)象，其它對(duì)象都是這個(gè)對(duì)象的子對(duì)象，代表瀏覽器窗口。window對(duì)象的方法如下：

image.png

常用的一些方法在本文js基礎(chǔ)部分已經(jīng)講過，這里不再贅述。

2、History對(duì)象：
history對(duì)象記錄了用戶曾經(jīng)瀏覽過的頁(yè)面(URL)，并可以實(shí)現(xiàn)瀏覽器前進(jìn)與后退相似導(dǎo)航的功能。語(yǔ)法：window.history.屬性或window.history.方法。
History對(duì)象的屬性：

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

History對(duì)象的方法：

方法	作用
back()	相當(dāng)于返回上一頁(yè)
forward()	加載history列表中的下一個(gè)url
go(參數(shù))	加載history列表中的某個(gè)具體的頁(yè)面，參數(shù)為1表示下一頁(yè)，為-1表示前一頁(yè)，以此類推

3、location對(duì)象：
location用于獲取或設(shè)置窗體的URL，并且可以用于解析URL。語(yǔ)法：location.[屬性|方法]。
location對(duì)象屬性圖示:

image.png

location 對(duì)象屬性：

image.png

location 對(duì)象方法:

方法	作用
assign()	加載新的文檔
reload()	重新加載當(dāng)前文檔
replace()	用新的文檔替換當(dāng)前文檔

4、navigator對(duì)象：
Navigator 對(duì)象包含有關(guān)瀏覽器的信息，通常用于檢測(cè)瀏覽器與操作系統(tǒng)的版本。語(yǔ)法：navigator.屬性名。
該對(duì)象的屬性有：

image.jpg

5、screen對(duì)象：
screen對(duì)象用于獲取用戶的屏幕信息。語(yǔ)法：window.screen.屬性。
其屬性有：

image.png

五、認(rèn)識(shí)DOM:

DOM（Document Object Model）就是文檔對(duì)象模型，定義訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)（節(jié)點(diǎn)樹），如下圖：

image.png

HTML文檔可以說由節(jié)點(diǎn)構(gòu)成的集合，三種常見的DOM節(jié)點(diǎn):
????(1) 元素節(jié)點(diǎn)：上圖中<html>、<body>、<p>等都是元素節(jié)點(diǎn)，即標(biāo)簽。
????(2) 文本節(jié)點(diǎn):向用戶展示的內(nèi)容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
????(3) 屬性節(jié)點(diǎn):元素屬性，如<a>標(biāo)簽的鏈接屬性。
現(xiàn)有如下代碼：

<a >JavaScript DOM</a>

那么其DOM結(jié)構(gòu)如下：

image.png

理解了DOM之后，再來學(xué)習(xí)以下方法：

1、獲取元素：
獲取元素通過document對(duì)象調(diào)用以下方法：

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

<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 元素的內(nèi)容。語(yǔ)法如下：
Object.innerHTML
案例：

<h2 id="con">javascript</h2>
var mychar=  document.getElementById("con") ;// 獲取h2元素
document.write("原標(biāo)題:"+mychar.innerHTML+"<br>"); //輸出原h(huán)2標(biāo)簽內(nèi)容
mychar.innerHTML = "Hello world";// 修改h2標(biāo)簽的內(nèi)容
document.write("修改后的標(biāo)題:"+mychar.innerHTML); //輸出修改后h2標(biāo)簽內(nèi)容

運(yùn)行結(jié)果如下：

image.png

3、改變HTML樣式：
語(yǔ)法如下：
Object.style.property=new style;
部分基本屬性(property)如下表：

屬性	描述
backgroudColor	設(shè)置元素背景顏色
height	設(shè)置元素高度
width	設(shè)置元素寬度
color	設(shè)置文本顏色
font	設(shè)置字體屬性
fontSize	設(shè)置字體大小

案例：

<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！”設(shè)置為紅色、字體大小為20、背景顏色為藍(lán)色。

4、顯示和隱藏(display):
我們?cè)谡搲蛘哔N吧下載別人分享的資源時(shí)，通常是要評(píng)論了以后才會(huì)顯示下載鏈接，沒評(píng)論就不會(huì)顯示，這就是用到了display屬性。語(yǔ)法如下：
Object.style.display = value
value的取值如下：

值	描述
none	此元素不會(huì)被顯示
block	此元素將顯示為塊級(jí)元素

案例：

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

這樣就會(huì)把“Hello World！”隱藏掉。

5、控制類名(className屬性)：
一般的標(biāo)簽除了有id，還會(huì)有class，那么通過下面的方式就可以獲取和改變class值。語(yǔ)法：
獲取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>

調(diào)用了fun函數(shù)后，就會(huì)把p標(biāo)簽的class屬性的值由one變?yōu)閠wo。

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

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

attr1就是“alink”，attr2就是“測(cè)試”，最后一行代碼就是將“測(cè)試”改為“測(cè)試更新”。

7、節(jié)點(diǎn)屬性：
在文檔對(duì)象模型 (DOM) 中，每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象。DOM 節(jié)點(diǎn)有三個(gè)重要屬性：
????(1)、 nodeName : 節(jié)點(diǎn)的名稱，是只讀的
????????????a. 元素節(jié)點(diǎn)的 nodeName 與標(biāo)簽名相同
????????????b. 屬性節(jié)點(diǎn)的 nodeName 是屬性的名稱
????????????c. 文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text
????????????d. 文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document
????(2)、 nodeValue ：節(jié)點(diǎn)的值
????????????a. 元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null
????????????b. 文本節(jié)點(diǎn)的 nodeValue 是文本自身
????????????c. 屬性節(jié)點(diǎn)的 nodeValue 是屬性的值
????(3)、 nodeType ：節(jié)點(diǎn)的類型，是只讀的，常用的幾種結(jié)點(diǎn)類型如下表：

元素類型	節(jié)點(diǎn)類型
元素	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;// 獲取父節(jié)點(diǎn)的名稱，也就是ul節(jié)點(diǎn)
    for(i=0;i<=list.length;i++){
        document.write(list[i].nodeName);// 結(jié)果輸出三個(gè)li
    }
    var node = document.getElementsByTagName("ul");//獲取ul的子節(jié)點(diǎn)
    var result = node[0].childNodes.length;// 子節(jié)點(diǎn)的個(gè)數(shù)(結(jié)果是3，因?yàn)橛?個(gè)li)
    node.firstChild;// 獲取到的是第一個(gè)li
    node.lastChild;// 獲取到的是最后一個(gè)li
  </script>

對(duì)于節(jié)點(diǎn)的操作還有：
訪問兄弟節(jié)點(diǎn)、插入節(jié)點(diǎn)、刪除節(jié)點(diǎn)、替換節(jié)點(diǎn)、替換元素節(jié)點(diǎn)、創(chuàng)建元素節(jié)點(diǎn)、創(chuàng)建文本節(jié)點(diǎn)等。

總結(jié):

JavaScript十分強(qiáng)大，且使用廣泛，幾乎所有的web應(yīng)用都會(huì)用到JavaScript。重點(diǎn)要理解DOM以及對(duì)DOM的一些操作。由于本人學(xué)后端的，所以DOM部分對(duì)節(jié)點(diǎn)操作的很多方法沒有進(jìn)行研究，不過這些方法都很易懂，需要用時(shí)自行百度即可。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

JavaScript的使用

JavaScript的使用

前言:

一、JavaScript簡(jiǎn)介：

二、js基礎(chǔ)：

三、js的內(nèi)置對(duì)象：

四、認(rèn)識(shí)BOM：

五、認(rèn)識(shí)DOM:

總結(jié):

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

JavaScript的使用

前言:

一、JavaScript簡(jiǎn)介：

二、js基礎(chǔ)：

三、js的內(nèi)置對(duì)象：

四、認(rèn)識(shí)BOM：

五、認(rèn)識(shí)DOM:

總結(jié):

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、JavaScript簡(jiǎn)介：

二、js基礎(chǔ)：

三、js的內(nèi)置對(duì)象：

四、認(rèn)識(shí)BOM：

五、認(rèn)識(shí)DOM: