JavaScript的基本使用

来源:https://www.cnblogs.com/God-Li/archive/2018/03/15/8511573.html
-Advertisement-
Play Games

一、JavaScript的簡單介紹 JavaScript是一種屬於網路的腳本語言（簡稱JS）,已經被廣泛用於Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。它的解釋器被稱為JavaScript引 ...


一、JavaScript的簡單介紹

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

　　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標簽內，但建議將其放置在body標簽內部的最下方（這樣寫瀏覽器會先載入網頁的內容，再載入其動態效果）。

二、JavaScript的基本數據類型

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

　　在JavaScript中申明一個變數：

PI = 3.14      // 聲明一個全局變數，賦值3.14， 數字類型

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

c = null   // 清空變數c

 字元串類型的常用方法：

"string".length                           返回字元串長度

"  string ".trim()                           移除字元串的空白
"  string ".trimLeft()                     移除字元串左側的空白
"  string ".trimRight)                    移除字元串右側的空白
"string".charAt(n)                        返回字元串中的第n個字元
"string".concat(string2, string3, ...)               拼接
"string".indexOf(substring,start)         子序列起始位置
"string".lastIndexOf(substring,start)     子序列終止位置
"string".substring(from, to)              根據索引獲取子序列
"string".slice(start, end)                切片
"string".toLowerCase()                    將字元串轉為大寫
"string".toUpperCase()                    將字元串抓為小寫
"string".split(delimiter, limit)          以特定字元分割字元串

// 與正則表達式搭配使用
"string".search(regexp)                   從頭開始匹配，返回匹配成功的第一個位置(g無效)
"string".match(regexp)                    全局搜索，如果正則中有g表示找到"string".replace(regexp, replacement)     替換，正則中有g則替換所有，否則只替換第一個匹配項，
                                     $數字：匹配的第n個組內容；
                                     $&：當前匹配的內容；
                                     $`：位於匹配子串左側的文本；
                                     $'：位於匹配子串右側的文本
                                     $$：直接量$符號

 數組類型的常用方法：

obj.length          數組的大小

obj.push(ele)       尾部追加元素
obj.pop()           從尾部彈出元素
obj.unshift(ele)    頭部插入元素
obj.shift()         頭部移除元素

// 可用此句完成對數組的插入，刪除，替換操作
obj.splice(start, deleteCount, value, ...)  從start位置開始，刪除deleteCount個元素，插入value,...

obj.slice( )        切片
obj.reverse( )      反轉
obj.join(sep)       將數組元素連接起來以構建一個字元串
obj.concat(val,..)  連接數組
obj.sort( )         對數組元素進行排序

四、JavaScript的選擇和迴圈語句

　　與其他編程語言類型，JS也有三種程式執行流程，即順序，選擇，和迴圈。

 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都不滿足執行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. 迴圈時迴圈的是索引
 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. 常規for迴圈
14 for (var i=0; i<10; i++){
15     //js代碼
16 }
for迴圈 
1 var len = 10;
2 var i = 0;
3 while(i < len){
4     console.log(i);  // 代指js代碼
5     i++;
6 }
while迴圈

五、JavaScript的函數申明

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

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

六、JS面向對象

　　在JavaScript中，面向對象其實是函數的一種變種，與函數的定義非常類似。

方式一：

// 定義一個類
function Foo(n){
    this.name = n;  // 屬性
    // 方法
    this.sayHello = function(){
        console.log("hello,", name);
    }
}

//  實例化一個對象
var obj = new Foo('abc');
obj.name;   // 調用屬性
obj.sayHello();  // 調用方法

方式二：

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中常用的系統方法

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

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

2. 超時器，設置一段時間，比如5秒鐘，當時間超過5秒鐘後執行某一任務。

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

 3. 彈出提示框

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

 4. 彈出確認框

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

 5. 刷新頁面

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

 6. 頁面跳轉

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

7. eval（使用eval，可將字元串轉換成代碼執行）

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

8. 序列化

　　序列化試將一個對象轉化成字元串，方便存儲，列印等。在任何一門編程語言中都存在序列化。

　　而反序列化是將讀取到的字元串轉化為對象，方便程式使用。

　　在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() 對應
encodeURIComponent()  // 對URI編碼
decodeURIComponent()  // 對URI解碼與encodeURIComponent() 對應

八、觸發JavaScript的事件

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

標簽綁定事件的方式：

對div標簽綁定點擊事件
方式一：
<div id="i1" onclick="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             --- 滑鼠點擊執行js函數
onfocus             --- 游標選中執行js函數
onblur              --- 游標移走執行js函數
onmouseover         --- 滑鼠移到某個標簽執行js函數
onmouseout          --- 滑鼠從某個標簽移走執行js函數　　

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

1. HTML中的模態對話框

 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 <
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 微信小程式初探【類微信UI聊天簡單實現】
    微信小程式最近很火，火到什麼程度，只要你一打開微信，就是它的身影，幾乎你用的各個APP都可以在微信中找到它的複製版，另外官方自帶的跳一跳更是將它推到了空前至高的位置。對比公眾號，就我的感覺來說，有以下區別： 公眾號略顯繁瑣：我首先要關註才能看到內容，而小程式不用(個人對微信公眾號研究不深，不對之處還 ...
  • Css Secret 案例Demo全套
    Css Secret 案例全套 "github地址" "案例地址" 去年買了一本CSS揭秘的css專題書，該書揭示了 47 個鮮為人知的 CSS 技巧，主要內容包括背景與邊框、形狀、 視覺效果、字體排印、用戶體驗、結構與佈局、過渡與動畫等。去年買入時，就決定將裡面所有Demo案例全部擼一遍，作為自己 ...
  • Css問題 margin float 文檔流 背景圖底部充滿
    今天來整理一下做網頁遇到的問題吧 1.插入背景圖片並使圖片居於div底部充滿整個行。 屬性： background-position：背景位置屬性用於設置背景圖像的位置，這個屬性只能應用於塊級元素和替換元素。其中替換元素包括img、input、textarea、select。 語法取值有兩種：長度和 ...
  • javascript模塊化編程-立即執行函數（IIFE）
    IIFE 全拼Imdiately Invoked Function Expression，立即執行的函數表達式。 語法 使用上面的寫法，外部代碼無法讀取內部的_count變數。 括弧的意義 1、包住function(){}的括弧的意義 這個括弧的目的，是為了把function(){}轉化為表達式。方 ...
  • css自適應佈局之“聖杯雙飛翼”
    首先，這個這麼扯淡又裝逼的名字不知道是誰起的，大意就是說：中間的內容隨著瀏覽器寬度的不同，進行寬度自適應操作，而兩邊的內容固定寬度。 來，上個代碼演示一下： 然後出來的效果是這樣的： 這個大塊頭的中間部分確實可以隨著瀏覽視窗寬度的改變而改變： 但是，卧槽，很獵奇啊有木有？！中間的主體叉在兩側內容上方 ...
  • html中常見的小問題（1）
    問題：自適應高度的塊級元素內添加圖片後，其高度會比圖片高度多出一塊 簡單代碼如下： 效果圖如下： 1、我們可以發現div的高度比圖片的高度多出來了幾個像素，這是為什麼呢？ 這是因為img標簽為行塊級標簽，它既有塊級標簽的特性，也有行級標簽的特性。這就需要我們理解行級標簽中vertical-align ...
  • 幾種常用的清除浮動影響的方法
    這是css裡面一個比較常見的操作，現在稍微小小地總結一下，雖然沒什麼技術含量，但也可以作為一種複習。 1，給父級元素添加overflow:hidden可以清除浮動； 2，給父級元素添加after偽類，並定義其樣式如下： 這種寫法比較高大上，推薦使用； 3，在父容器的末尾添加一個毫無意義的子標簽，然後 ...
  • HTML/CSS的基本使用
    本篇博客主要介紹一下HTML/CSS的基本使用，關於它們的介紹便不在贅述，讀者可自行google或百度。 一、HTML 先來簡單介紹一下HTML標簽： HTML 標簽是由尖括弧包圍的關鍵詞，比如 <html> HTML 標簽通常是成對出現的，比如 <b> 和 </b> 標簽對中的第一個標簽是開始標簽 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類