一、JavaScript的簡單介紹

　　JavaScript是一種屬于網(wǎng)絡(luò)的腳本語言（簡稱JS）,已經(jīng)被廣泛用于Web應(yīng)用開發(fā),常用來為網(wǎng)頁添加各式各樣的動態(tài)功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現(xiàn)自身的功能的。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。

　　JavaScript代碼常存在于HTML文檔中，被script標簽所包裹。為了方便多個HTML使用同一份JavaScript代碼，也可以將JavaScript代碼寫在js文件中，需要在HTML文檔中使用，導入即可。

1 <script> 2 //JavaScript代碼 3 alert(123); 4 </scpript> 5 6 <script type="text/javascript"> 7 //JavaScript代碼 8 alert(123); 9 </scpript> 代碼存在于HTML文檔中 使用HTML文檔導入JavaScript代碼

　　注：script標簽可放在HTML文檔的head標簽內(nèi)，但建議將其放置在body標簽內(nèi)部的最下方（這樣寫瀏覽器會先加載網(wǎng)頁的內(nèi)容，再加載其動態(tài)效果）。

二、JavaScript的基本數(shù)據(jù)類型

　　JavaScript的基本數(shù)據(jù)類型有數(shù)字(在JS中，數(shù)字不區(qū)分整型和浮點類型)、數(shù)組，字符串，布爾(只用兩個值，true和false)。

　　在JavaScript中申明一個變量：

PI = 3.14 // 聲明一個全局變量，賦值3.14， 數(shù)字類型var a = 6; // 聲明一個局部變量a，為其賦值6，是數(shù)字類型 var b = [1,2,3,4] // 數(shù)組 var c = "hell world" // 字符串 var d = true // 布爾類型 var e = {'k1':v1, 'k2':v2, 'k3':v3} //字典 c = null // 清空變量c

?字符串類型的常用方法：

"string".length 返回字符串長度" string ".trim() 移除字符串的空白 " string ".trimLeft() 移除字符串左側(cè)的空白 " string ".trimRight) 移除字符串右側(cè)的空白 "string".charAt(n) 返回字符串中的第n個字符 "string".concat(string2, string3, ...) 拼接 "string".indexOf(substring,start) 子序列起始位置 "string".lastIndexOf(substring,start) 子序列終止位置 "string".substring(from, to) 根據(jù)索引獲取子序列 "string".slice(start, end) 切片 "string".toLowerCase() 將字符串轉(zhuǎn)為大寫 "string".toUpperCase() 將字符串抓為小寫 "string".split(delimiter, limit) 以特定字符分割字符串// 與正則表達式搭配使用 "string".search(regexp) 從頭開始匹配，返回匹配成功的第一個位置(g無效) "string".match(regexp) 全局搜索，如果正則中有g(shù)表示找到"string".replace(regexp, replacement) 替換，正則中有g(shù)則替換所有，否則只替換第一個匹配項，$數(shù)字：匹配的第n個組內(nèi)容；$&：當前匹配的內(nèi)容；$`：位于匹配子串左側(cè)的文本；$'：位于匹配子串右側(cè)的文本$$：直接量$符號

?數(shù)組類型的常用方法：

obj.length 數(shù)組的大小obj.push(ele) 尾部追加元素 obj.pop() 從尾部彈出元素 obj.unshift(ele) 頭部插入元素 obj.shift() 頭部移除元素// 可用此句完成對數(shù)組的插入，刪除，替換操作 obj.splice(start, deleteCount, value, ...) 從start位置開始，刪除deleteCount個元素，插入value,...obj.slice( ) 切片 obj.reverse( ) 反轉(zhuǎn) obj.join(sep) 將數(shù)組元素連接起來以構(gòu)建一個字符串 obj.concat(val,..) 連接數(shù)組 obj.sort( ) 對數(shù)組元素進行排序

四、JavaScript的選擇和循環(huán)語句

　　與其他編程語言類型，JS也有三種程序執(zhí)行流程，即順序，選擇，和循環(huán)。

1 if (判斷條件){ 2 // js代碼 3 }else if(判斷條件){ 4 // js代碼 5 }else{ 6 // js代碼 7 } 8 9 // 常用判斷符號與邏輯符號 10 && 邏輯與 11 || 邏輯或 12 > < 大于 小于 13 == != 判斷值 14 === !== 判斷值和類型 選擇語句_1 1 // x代指變量，case為x不動的取值情況，defult當上面的case都不滿足執(zhí)行defult，相當于else 2 switch(x){ 3 case '1': 4 var i = 1; 5 break; 6 case '2': 7 var i = 2; 8 break; 9 case '3': 10 var i = 3; 11 break; 12 defult: 13 i = 0; 14 } 選擇語句_2 1 1. 循環(huán)時循環(huán)的是索引 2 a = [11,22,33]; 3 for (var item in a){ 4 console.log(a[item]); // 在瀏覽器的console中打印a[item]的值，item是索引 5 } 6 7 8 a = {'k1':'v1', 'k2':'v2', 'k3':'v3'}; 9 for (var item in a){ 10 console.log(a[item]); 11 } 12 13 2. 常規(guī)for循環(huán) 14 for (var i=0; i<10; i++){ 15 //js代碼 16 } for循環(huán) 1 var len = 10; 2 var i = 0; 3 while(i < len){ 4 console.log(i); // 代指js代碼 5 i++; 6 } while循環(huán)

五、JavaScript的函數(shù)申明

　　與其他編程語言類型，JS也有函數(shù)，在JS中申明一個函數(shù)特別簡單。

// 常規(guī)函數(shù) function funcname(a, b, c) {var a = 0; // JS代碼塊 } // 匿名函數(shù)，匿名函數(shù)只有某一塊代碼使用，在聲明時已經(jīng)確定由誰來執(zhí)行它 setIntervar(function(){console.log(123); // js代碼塊 }, 5000) // 自執(zhí)行函數(shù)，函數(shù)聲明完后立即執(zhí)行并且不會被其他代碼調(diào)用 (function(arg){console.log(arg); //js代碼塊 })(1)

六、JS面向?qū)ο?/h2>

　　在JavaScript中，面向?qū)ο笃鋵嵤呛瘮?shù)的一種變種，與函數(shù)的定義非常類似。

方式一：

// 定義一個類 function Foo(n){this.name = n; // 屬性// 方法this.sayHello = function(){console.log("hello,", name);} }// 實例化一個對象 var obj = new Foo('abc'); obj.name; // 調(diào)用屬性 obj.sayHello(); // 調(diào)用方法

方式二：

function Foo(n){this.name = n; }Foo.prototype = {'sayHello': function(){console.log("hello,", this.name);} }var obj = new Foo('abc'); obj.name; obj.sayHello();

　　注：通常使用方式二來定義和使用一個對象。

七、JavaScript中常用的系統(tǒng)方法

1. 定時器，每隔特定的時間執(zhí)行一次特定的任務(wù)，用途十分廣泛。

var a = setInterval(function(){console.log('hello');}, 間隔時間);
clearInterval(a); // 清除定時器

2. 超時器，設(shè)置一段時間，比如5秒鐘，當時間超過5秒鐘后執(zhí)行某一任務(wù)。

var b = setTimeout(funciton(){console.log('hello')}, 5000); // 設(shè)置超時器 clearTimeout(b); // 清除超時器，比如當用戶執(zhí)行某一操作后，取消超時器使用它

?3. 彈出提示框

alert('message') // message代指要提示的信息

?4. 彈出確認框

// 向用戶彈出一個確認框，如果用戶選擇確認，v=true；否則，v=false。 var v = confirm('message') // message為確認提示信息，比如真的要刪除嗎？

?5. 刷新頁面

location.reload(); // 執(zhí)行此方法瀏覽器自動刷新當前頁面，可以和定時器配合使用用以定時刷新頁面

?6. 頁面跳轉(zhuǎn)

location.href // 獲取當前頁面的url location.href = url; // 從當前頁面跳轉(zhuǎn)到指定url，可與超時器配合使用，做網(wǎng)站的頁面跳轉(zhuǎn) location.href = location.href; // 與location.reload()效果相同，刷新當前頁面

7. eval（使用eval，可將字符串轉(zhuǎn)換成代碼執(zhí)行）

var s = '1+2'; var a = eval(s); console.log(a);

8. 序列化

　　序列化試將一個對象轉(zhuǎn)化成字符串，方便存儲，打印等。在任何一門編程語言中都存在序列化。

　　而反序列化是將讀取到的字符串轉(zhuǎn)化為對象，方便程序使用。

　　在js中，序列化與反序列畫的操作如下：

ls = [1,2,3,4]; s = JSON.stringify(ls); //object ---> string console.log(s); new_ls = JSON.parse(s) //string ---> object console.log(new_ls);

9. 字符串的編碼與解碼?

　　為了能夠在所有計算機上識別出字符串，在傳輸過程中要對字符串編碼，傳輸完成后要對字符串解碼。

escape(str) // 對字符串編碼 unescape(str) // 對字符串解碼 encodeURI() // 對URI編碼 decodeURI() // 對URI解碼與encodeURI() 對應(yīng) encodeURIComponent() // 對URI編碼 decodeURIComponent() // 對URI解碼與encodeURIComponent() 對應(yīng)

八、觸發(fā)JavaScript的事件

　　當我們用鼠標點擊瀏覽器界面中的一個按鈕時就觸發(fā)了一個事件(即點擊事件)，類似的還有很多其他事件，比如當鼠標移動到某個標簽上，光標選中某個輸入框等，這些都是事件，那么就，接下來就介紹一下一些常用的事件。

標簽綁定事件的方式：

對div標簽綁定點擊事件 方式一： <div id="i1" οnclick="funcname">點我</div> 方式二：
<div id="i1">點我</div> tag = document.getElementById("i1"); tag.onclick = funciton () {console.log("div i1");}; 方式三：
<div id="i2">點我</div> tag = document.getElementById("i2"); tag.addEventListener("click", function () {console.log("div i2"); }, false);

　　注：使用方式二和方式三可做到事件與標簽相分離，在測試代碼時，可以使用方式一綁定標簽與事件，在日常編程中建議使用方式二和方式三。

常用的事件有：

onclick --- 鼠標點擊執(zhí)行js函數(shù) onfocus --- 光標選中執(zhí)行js函數(shù) onblur --- 光標移走執(zhí)行js函數(shù) onmouseover --- 鼠標移到某個標簽執(zhí)行js函數(shù) onmouseout --- 鼠標從某個標簽移走執(zhí)行js函數(shù)　　

八、使用JavaScript完成一些常用功能

1. HTML中的模態(tài)對話框

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 .c2{ 9 background-color: black; 10 opacity: 0.4; 11 z-index: 8; 12 position: fixed; 13 top: 0; 14 right: 0; 15 bottom: 0; 16 left: 0; 17 18 } 19 .c3{ 20 background-color: white; 21 z-index: 9; 22 height: 200px; 23 width: 500px; 24 position: fixed; 25 top: 25%; 26 left: 50%; 27 margin-left: -250px; 28 } 29 .hid{ 30 display: none; 31 } 32 </style> 33 </head> 34 <body style="margin: 0 auto;"> 35 <div> 36 <table style="border: 1px solid red" border="1"> 37 <thead> 38 <tr> 39 <th>host</th> 40 <th>port</th> 41 </tr> 42 </thead> 43 <tbody> 44 <tr> 45 <td>1.1.1.1</td> 46 <td>1111</td> 47 </tr> 48 <tr> 49 <td>1.1.1.2</td> 50 <td>1112</td> 51 </tr> 52 <tr> 53 <td>1.1.1.3</td> 54 <td>1113</td> 55 </tr> 56 </tbody> 57 </table> 58 </div> 59 <div> 60 <input type="button" value="添加" onclick="ShowModel();"/> 61 </div> 62 63 <!--遮罩層--> 64 <div id="i2"; class="c2 hid"></div> 65 <!--對話框--> 66 <div id="i3" class="c3 hid"> 67 <fieldset style="border: 1px solid red;"> 68 <legend>添加</legend> 69 <div> 70 <label>host:</label> 71 <input type="text"/> 72 </div> 73 <div> 74 <label>port:</label> 75 <input type="text"/> 76 </div> 77 <p> 78 <input type="button" value="取消" onclick="HiddenModel();"/> 79 <input type="button" value="確定"/> 80 </p> 81 </fieldset> 82 </div> 83 84 <script> 85 function ShowModel() { 86 tag = document.getElementById('i2').classList.remove('hid'); 87 tag = document.getElementById('i3').classList.remove('hid'); 88 } 89 function HiddenModel() { 90 tag = document.getElementById('i2').classList.add('hid'); 91 tag = document.getElementById('i3').classList.add('hid'); 92 } 93 </script> 94 </body> 95 </html> View Code

2. HTML中的全選，反選，取消按鈕

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div> 9 <div> 10 <input type="button" value="全選" onclick="checkedAll();"/> 11 <input type="button" value="反選" onclick="reverseAll();"/> 12 <input type="button" value="取消" onclick="cancelAll();"/> 13 </div> 14 15 <table style="border: 1px solid red;" border="1"> 16 <thead> 17 <tr> 18 <th>opotion</th> 19 <th>host</th> 20 <th>port</th> 21 </tr> 22 </thead> 23 <tbody id="i3"> 24 <tr> 25 <td><input type="checkbox"></td> 26 <td>1.1.1.1</td> 27 <td>1111</td> 28 </tr> 29 <tr> 30 <td><input type="checkbox"></td> 31 <td>1.1.1.2</td> 32 <td>1112</td> 33 </tr> 34 <tr> 35 <td><input type="checkbox"></td> 36 <td>1.1.1.3</td> 37 <td>1113</td> 38 </tr> 39 <tr> 40 <td><input type="checkbox"></td> 41 <td>1.1.1.4</td> 42 <td>1114</td> 43 </tr> 44 <tr> 45 <td><input type="checkbox"></td> 46 <td>1.1.1.4</td> 47 <td>1114</td> 48 </tr> 49 <tr> 50 <td><input type="checkbox"></td> 51 <td>1.1.1.5</td> 52 <td>1115</td> 53 </tr> 54 </tbody> 55 </table> 56 </div> 57 <script> 58 function checkedAll() { 59 var tags = document.getElementById("i3").children; 60 for (var i in tags) { 61 var checkbox = tags[i].firstElementChild.firstElementChild; 62 checkbox.checked = true; 63 } 64 } 65 66 function cancelAll() { 67 var tags = document.getElementById("i3").children; 68 for (var i in tags) { 69 var checkbox = tags[i].firstElementChild.firstElementChild; 70 checkbox.checked = false; 71 } 72 } 73 74 function reverseAll() { 75 var tags = document.getElementById("i3").children; 76 for (var i in tags) { 77 var checkbox = tags[i].firstElementChild.firstElementChild; 78 if (checkbox.checked) { 79 checkbox.checked = false; 80 } 81 else { 82 checkbox.checked = true; 83 } 84 85 } 86 } 87 </script> 88 </body> 89 </html> View Code

3. 類似于購物商城的左側(cè)菜單欄

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 .item { 9 margin-bottom: 15px; 10 } 11 12 .menu { 13 background-color: blueviolet; 14 height: 30px; 15 line-height: 30px; 16 font-weight: bolder; 17 } 18 19 .hide { 20 display: none; 21 } 22 23 .content{ 24 background-color: lightseagreen; 25 } 26 </style> 27 </head> 28 <body> 29 30 <div style="height: 150px;"></div> 31 <div style="width: 350px; border: 1px solid red;"> 32 <div class="item"> 33 <div id="i1" class="menu" onclick="ChangeMenu('i1');">菜單1</div> 34 <div class="content"> 35 <div>內(nèi)容1</div> 36 <div>內(nèi)容1</div> 37 <div>內(nèi)容1</div> 38 <div>內(nèi)容1</div> 39 </div> 40 </div> 41 <div class='item'> 42 <div id="i2" class="menu" onclick="ChangeMenu('i2');">菜單2</div> 43 <div class="content hide"> 44 <div>內(nèi)容2</div> 45 <div>內(nèi)容2</div> 46 <div>內(nèi)容2</div> 47 <div>內(nèi)容2</div> 48 </div> 49 </div> 50 <div class='item'> 51 <div id="i3" class="menu" onclick="ChangeMenu('i3');">菜單3</div> 52 <div class="content hide"> 53 <div>內(nèi)容3</div> 54 <div>內(nèi)容3</div> 55 <div>內(nèi)容3</div> 56 <div>內(nèi)容3</div> 57 </div> 58 </div> 59 <div class='item'> 60 <div id="i4" class="menu" onclick="ChangeMenu('i4');">菜單4</div> 61 <div class="content hide"> 62 <div>內(nèi)容4</div> 63 <div>內(nèi)容4</div> 64 <div>內(nèi)容4</div> 65 <div>內(nèi)容4</div> 66 </div> 67 </div> 68 </div> 69 70 <script> 71 function ChangeMenu(id) { 72 menu = document.getElementById(id); 73 items = menu.parentElement.parentElement.children; 74 75 for (var i=0; i<items.length; i++) { 76 var current_item = items[i].children; 77 current_item[1].classList.add('hide'); 78 } 79 menu.nextElementSibling.classList.remove('hide'); 80 } 81 </script> 82 </body> 83 </html> View Code

4. 鼠標移到標簽?zāi)承懈淖兤錁邮?#xff0c;移走恢復

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <table border="1" width="300px"> 9 <tr><td>1</td><td>2</td><td>3</td></tr> 10 <tr><td>1</td><td>2</td><td>3</td></tr> 11 <tr><td>1</td><td>2</td><td>3</td></tr> 12 </table> 13 14 <script> 15 var myTag = document.getElementsByTagName('tr'); // 找到標簽 16 17 for (var i=0, len=myTag.length; i<len; i++) { 18 myTag[i].onmouseover = function () { 19 this.style.backgroundColor = "red"; // 改變樣式 20 } 21 22 myTag[i].onmouseout = function () { 23 this.style.backgroundColor = ""; //恢復樣式 24 } 25 </script> 26 </body> 27 </html> View Code

5. 搜索框提示信息 ?

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .search{ 8 margin: 0 auto; 9 border: 1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <div style="width: 100%;"> 15 <input id="i1" class="search" type="text" name="keywords" οnfοcus="Focus();" οnblur="Blur();" value="請輸入關(guān)鍵字"/> 16 <input type="button" value="搜索"/> 17 </div> 18 19 <script> 20 function Focus() { 21 tag = document.getElementById('i1'); 22 val = tag.value; 23 console.log(val); 24 if (val == "請輸入關(guān)鍵字") { 25 tag.value = ""; 26 } 27 } 28 function Blur() { 29 console.log(2); 30 tag = document.getElementById('i1'); 31 val = tag.value; 32 if (val == "") { 33 tag.value = "請輸入關(guān)鍵字"; 34 } 35 } 36 37 </script> 38 </body> 39 </html> View Code

?

總結(jié)

以上是生活随笔為你收集整理的JavaScript的基本使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。