JavaScript基礎

来源:http://www.cnblogs.com/programmer-tlh/archive/2016/08/20/5786547.html
-Advertisement-
Play Games

JavaScript基礎 JavaScript是一門編程語言，瀏覽器內置了JavaScript語言的解釋器，所以在瀏覽器上按照JavaScript語言的規則編寫相應代碼之，瀏覽器可以解釋並做出相應的處理。 一、基本知識 (一)、存在形式 1、JavaScript代碼存在形式 2、JavaScript ...


JavaScript基礎

     JavaScript是一門編程語言，瀏覽器內置了JavaScript語言的解釋器，所以在瀏覽器上按照JavaScript語言的規則編寫相應代碼之，瀏覽器可以解釋並做出相應的處理。

一、基本知識

(一)、存在形式

        1、JavaScript代碼存在形式

 

   <!--方式一-->
        <script type="text/javascript" src="js文件"></script>
   <!--方式二-->
        <script type="text/javascript">
            js內容
        </script>

        2、JavaScript存放位置

           HTML的head中

           HTML的body代碼塊底部(推薦)

          由於Html代碼是從上到下執行，如果Head中的js代碼耗時嚴重，就會導致用戶長時間無法看到頁面，如果放置在body代碼塊底部(執行完body代碼後再執行JavaScript代碼)，那麼即使js代碼耗時嚴重，也不會影響用戶看到頁面效果，只是js實現特效慢而已。

 

<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
<script>
    alert('123');
</script>
例子

 

(二)、變數

        JavaScript中變數的聲明是一個非常容易出錯的點，局部變數必須一個 var 開頭，如果未使用var，則預設表示聲明的是全局變數

   <script type="text/javascript">
 
       // 全局變數(對所有javascript都有作用)
       name = 'seven';
      function func(){
          // 局部變數(只對當前有作用)
          var age = 18;
 
          // 全局變數
          gender = "男";
    } 
  </script>

JavaScript中代碼註釋：

  • 單行 //
  • 多行 /*  */

註：此註釋僅在Script塊中生效。

(三)、數據類型

JavaScript 中的數據類型分為原始類型和對象類型：

  • 原始類型
    • 數字
    • 字元串
    • 布爾值
  • 對象類型
    • 數組
    • “字典”
    • ...

特別提醒：數字、布爾值、null、undefined、字元串的值是不可變的

null為特殊的值，表示什麼都沒有

undefined表示未定義

<script type="text/javascript">
        var a;
        alert(a)
</script>
例

1、數字（Number）

      字元串是由字元組成的數組，但在JavaScript中字元串是不可變的：可以訪問字元串任意位置的文本，但是JavaScript並未提供修改已知字元串內容的方法

轉換：

  • parseInt(..)    將某值轉換成數字，不成功則NaN
  • parseFloat(..) 將某值轉換成浮點數，不成功則NaN

特殊值：

  •  NaN，非數字。可使用 isNaN(num) 來判斷。
  • Infinity，無窮大。可使用 isFinite(num) 來判斷。

 

更多數值計算：

常量

Math.E
常量e，自然對數的底數。

Math.LN10
10的自然對數。

Math.LN2
2的自然對數。

Math.LOG10E
以10為底的e的對數。

Math.LOG2E
以2為底的e的對數。

Math.PI
常量figs/U03C0.gif。

Math.SQRT1_2
2的平方根除以1。

Math.SQRT2
2的平方根。

靜態函數

Math.abs( )
計算絕對值。

Math.acos( )
計算反餘弦值。

Math.asin( )
計算反正弦值。

Math.atan( )
計算反正切值。

Math.atan2( )
計算從X軸到一個點的角度。

Math.ceil( )
對一個數上舍入。

Math.cos( )
計算餘弦值。

Math.exp( )
計算e的指數。

Math.floor( )
對一個數下舍人。

Math.log( )
計算自然對數。

Math.max( )
返回兩個數中較大的一個。

Math.min( )
返回兩個數中較小的一個。

Math.pow( )
計算xy。

Math.random( )
計算一個隨機數。

Math.round( )
舍入為最接近的整數。

Math.sin( )
計算正弦值。

Math.sqrt( )
計算平方根。

Math.tan( )
計算正切值。
更多

 

2、字元串（String）

      字元串是由字元組成的數組，但在JavaScript中字元串是不可變的：可以訪問字元串任意位置的文本，但是JavaScript並未提供修改已知字元串內容的方法。

常見功能：

 

 

 

obj.length                           長度
 
obj.trim()                           移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        返回字元串中的第n個字元
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列(從原來的序列取出來便是子序列,子序列的位置按第一個字元取出來的位置定)位置（從前往後）
obj.lastIndexOf(substring,start)     子序列位置（從後往前）
obj.substring(from, to)              根據索引獲取子序列(用於提取字元串中介於兩個指定下標之間的字元)
obj.slice(start, end)                切片
obj.toLowerCase()                    大寫
obj.toUpperCase()                    小寫
obj.split(delimiter, limit)          分割
obj.search(regexp)                   從頭開始匹配，返回匹配成功的第一個位置(g無效)
obj.match(regexp)                    全局搜索，如果正則中有g表示找到全部，否則只找到第一個。
obj.replace(regexp, replacement)     替換，正則中有g則替換所有，否則只替換第一個匹配項，
                                     $數字：匹配的第n個組內容；
                                     $&：當前匹配的內容；
                                     $`：位於匹配子串左側的文本；
                                     $'：位於匹配子串右側的文本
                                     $$：直接量$符號

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div  id="i1" style="display: inline-block;background-color: green;color: white">歡迎寶強位臨指導</div>
    <script>
        // 時間設置1000(毫秒)
        setInterval('f1()',1000);
        function f1() {
        // js獲取標簽id=i1
        var tag=document.getElementById('i1');
        // 獲取標簽的內容
        var text = tag.innerText;
        var a=text.charAt(0);
        var sub=text.substring(1,text.length);
        var new_str=sub+a;
        //  重新設置innerText的值
        tag.innerText = new_str;
        }
    </script>
</body>
</html>
例

 

3、布爾類型（Boolean）

布爾類型僅包含真假，與Python不同的是其首字母小寫。

 

  • ==      比較值相等
  • !=       不等於
  • ===   比較值和類型相等
  • !===  不等於
  • ||        或
  • &&      且

4、數組

JavaScript中的數組類似於Python中的列表

 

常見功能：

obj.length          數組的大小
 
obj.push(ele)       尾部追加元素
obj.pop()           尾部獲取一個元素
obj.unshift(ele)    頭部插入元素
obj.shift()         頭部移除元素
obj.splice(start, deleteCount, value, ...)  插入、刪除或替換數組的元素
                    obj.splice(n,0,val) 指定位置插入元素
                    obj.splice(n,1,val) 指定位置替換元素
                    obj.splice(n,1)     指定位置刪除元素
obj.slice( )        切片
obj.reverse( )      反轉
obj.join(sep)       將數組元素連接起來以構建一個字元串(python是sep.join(obj))
obj.concat(val,..)  連接數組
obj.sort( )         對數組元素進行排序

5、通過對象來構造字典

 

//構造字典
     a = {'k1':123,'k2':456}
//訪問字典
      a['k1']

 

(四)、其他

1、序列化

  • JSON.stringify(obj)   序列化
  • JSON.parse(str)        反序列化
  a= {k1: 123, k2: 456}
  //把對象轉換成字元
  b=JSON.stringify(a)
  //把字元轉換成對象
  b=JSON.parse(b)

2、轉義

   url的轉義:

  • decodeURI( )                   URl中未轉義的字元
  • decodeURIComponent( )   URI組件中的未轉義字元
  • encodeURI( )                   URI中的轉義字元
  • encodeURIComponent( )   轉義URI組件中的字元
    發送值的轉義:
  • escape( )                         對字元串轉義
  • unescape( )                     給轉義字元串解碼
    ----------------------------------------------------------
  • URIError                         由URl的編碼和解碼方法拋出
 <script>
     var url= "http://www.baidu.com?=王寶強"
     // 把url中的值轉義成字元
      var a=encodeURI(url)
       console.log(a)
        // 還原轉義url中的值
       var b=decodeURI(url)
       console.log(b)
        //轉義url所有字元
       var c=encodeURIComponent(url)
       console.log(c) 
      //consonle中顯示結果
   </script>

3、eval

JavaScript中的eval是Python中eval和exec的合集，既可以編譯代碼也可以獲取返回值。

  • eval() 
  • EvalError   執行字元串中的JavaScript代碼
eval("alert(123)")

4、正則表達式

JavaScript中支持正則表達式，其主要提供了兩個功能：

  • test(string)     用於檢測正則是否匹配
  • exec(string)    用於獲取正則匹配的內容

註：定義正則表達式時，“g”、“i”、“m”分別表示全局匹配，忽略大小寫、多行匹配。

5、時間處理

JavaScript中提供了時間相關的操作，時間操作中分為兩種時間：

  • 時間統一時間
  • 本地時間（東8區）
d=new Date()
結果：Fri Aug 19 2016 14:45:44 GMT+0800 (中國標準時間)
//獲取年
d.getFullYear()
//獲取時
d.getHours
d.getUTCHours()
//改變時間
d.setMinutes(d.setMinutes() + 2)

更多操作參見：http://www.shouce.ren/api/javascript/main.html

6、typeof 運算符

返回一個用來表示表達式的數據類型的字元串。

  • 未定義：typeof(x)="undefined"   如果運算數未定義,返回的就是 "undefined".
  • 運算數為數字 ：typeof(x) = "number"
  • 字元串：typeof(x) = "string"
  • 布爾值：typeof(x) = "boolean"
  • 對象,數組和null：typeof(x) = "object"
  • 函數：typeof(x) = "function

 

  var name
      typeof(name)
      結構："undefined"

       在js里用到數組,比如 多個名字相同的input, 若是動態生成的, 提交時就需要判斷其是否是數組： if( typeof(document.mylist.length) != "undefined" ) {}或 if( !isNaN(document.mylist.length) ) {}

7、 document對象詳解

(五)、條件語句及異常

1、條件語句

JavaScript中支持兩個中條件語句，分別是：if 和 switch

  if(條件){
 
    }else if(條件){
         
    }else{
 
    }
if 
  switch(name){
        case '1':
            age = 123;
            break;
        case '2':
            age = 456;
            break;
        default :
            age = 777;
    }
switch

2、迴圈語句

JavaScript中支持三種迴圈語句，分別是：

var names = ["alex", "tony", "rain"];
 
for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}
方式一 
var names = ["alex", "tony", "rain"];

for(var index in names){
    console.log(index);
    console.log(names[index]);
}
方式二 
while(條件){
    // break;
    // continue;
}
方式三 

3、異常處理

try {
    //這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (err) {
    // 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
    //e是一個局部變數，用來指向Error對象或者其他拋出的對象
}
finally {
     //無論try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
}
註：主動拋出異常 throw new Error('錯誤信息')

 

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()">
</body>

</html>
例子

更多：http://www.w3school.com.cn/js/js_errors.asp

二、函數

(一)、基本函數

1、基本函數

JavaScript中函數基本上可以分為一下三類：

// 普通函數
    function func(arg){
        return true;
    }
          
// 匿名函數(把函數當成一個function對象，用變數名來調用)
    var func = function(arg){
        return "tony";
    }
  調用：func(alert(5));//結果為5
  
// 自執行函數(可做封裝)
    (function(arg){
        console.log(arg);
    })('123')

     註意：對於JavaScript中函數參數，實際參數的個數可能小於形式參數的個數，函數內的特殊值arguments中封裝了所有實際參數。

(二)、作用域

在Java或C#中存在塊級作用域，即：大括弧就是一個作用域

在JavaScript語言中無塊級作用域

<script>
    function f1()
    {
        if (1 == 1)
        {
            var name = 'server';
        }
        console.log(name);
    }
    f1();
       // 輸出:server
  </script>
/*註:在JavaScript6中新引用了 let關鍵字，用於定義塊級作用域。即: let name = 'server';*/

        JavaScript中每個函數都有自己的作用域，當出現函數嵌套時，就出現了作用域鏈。當內層函數使用變數時，會根據作用域鏈從內到外一層層的迴圈，如果不存在，則異常。

切記:所有的作用域在創建函數且未執行時候就已經存在。

 function f2(){
            var arg= [11,22];
            function f3(){
                console.log(arg);
            }
            arg = [44,55];
            return f3;
        }

        ret = f2();
        ret();
例子

      註:聲明提前，在JavaScript引擎“預編譯”時進行(js的預編譯大概順序，js引擎讀取一段js代碼，首先預編譯，就是逐行讀取js代碼，尋找變數和函數，遇到全局或局部變數，把變數的值變為undefind,存在記憶體中，遇到函數，直接存在記憶體中，這個過程如果發現語法錯誤，預編譯終止。)

作用域和作用域鏈詳解:

 點我!點我!

(三)、閉包

 

「閉包」，是指擁有多個變數和綁定了這些變數的環境的表達式（通常是一個函數），因而這些變數也是該表達式的一部分。

 

閉包是個函數，而它「記住了周圍發生了什麼」。表現為由「一個函數」體中定義了「另個函數」

 

由於作用域鏈只能從內向外找，預設外部無法獲取函數內部變數。閉包，在外部獲取函數內部的變數。

//利用封裝來閉包
//A公司
(function(){
      var ='bibao1'; 
      fuction f1()
    {
     console.log(var)
    }
      function f2()
     {
      console.log(var)
    }
       
})();
//B公司
(function(){
      var ='bibao2'; 
      fuction f1()
    {
     console.log(var)
    }
      function f2()
     {
      console.log(var)
    }       
})();

 

(四)、面向對象

function Foo (name,age) {
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
        return this.Name + arg;
    }
}
var obj = new Foo('alex', 18);
var ret = obj.Func("sb");
console.log(ret);

對於上述代碼需要註意：

  • Foo充當的構造函數
  • this代指對象
  • 創建對象時需要使用 new

上述代碼中每個對象中均保存了一個相同的Func函數，從而浪費記憶體。使用原型和可以解決該問題.

function Foo (name,age) {
    this.Name = name;
    this.Age = age;
}
Foo.prototype = {
    GetInfo: function(){
        return this.Name + this.Age
    },
    Func : function(arg){
        return this.Name + arg;
    }
}
var obj= new Foo(11,22)
name=obj.Name
obj.GetInto()

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前端之HTML知識點整理
    一、html概述 htyper text markup language 即超文本標記語言 超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程式等非文字元素。 標記語言: 標記（標簽）構成的語言. 網頁==HTML文檔，由瀏覽器解析，用來展示的 靜態網頁：靜態的資源，如xxx.html 動態網頁 ...
  • JavaScript學習筆記1之基礎知識點
    一、什麼是JavaScrip JavaScript是一種動態類型、弱類型、基於原型的客戶端腳本語言。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，在HTML網頁上使用，用來給HTML網頁增加動態功能。 動態： 在運行時確定數據類型，通常變數的類型取決於值的類型 ...
  • <![CDATA[的web使用簡單說明
    html、javascript會涉及到三個解析器，html解析器、xml解析器、javascript解析器。那麼好了，問題來了，以上代碼經常混編在一起，各自有各自的規則，終究會有衝突的，如下就是衝突。 根據W3C XHTML 1.0的規定：在XHTML中，因為<和&這兩個符號有特殊意義（小於號用於標 ...
  • 網站logo正確寫法，個人拙見，不喜勿噴
    網站logo既要考慮seo又需要用圖片代替網站名字，所有H1標簽帶來的權重還是需要使用 有些人喜歡直接把<H1></H1>標簽直接hidden掉，個人喜歡使用css Text-indent還是放到屏幕外 .logo h1 { overflow: hidden; position: absolute; ...
  • 正則表達式個人總結(二)：正則表達式語法的深入理解第二部分
    4.選擇與分組 （1）.分組 字元組[]:表示匹配若幹個字元之一 字元組可以淺顯的理解為一些字元的組合，字元組與普通字元的區別在於：abc普通字元表示匹配a接下來b接下來c而字元組[abc]表示在同一位置匹配a或者b或者c；由於字元組本身的含義也決定了可以將這個字元組看成是一個普通的特殊字元。 普通 ...
  • webpack學習總結
    前言 在還未接觸webpack，就有幾個疑問： 1. webpack本質上是什麼？ 2. 跟非同步模塊載入有關係嗎？ 3. 可否生成多個文件，一定是一個？ 4. 被引用的文件有其他非同步載入模塊怎麼辦？ 在學習webpack時，也有幾個疑問： 1. webpack有哪些常用的插件？ 2. 常用的Load ...
  • 原生JS實現-星級評分系統
    今天我又寫了個很酷的實例：星級評分系統（可自定義星星個數、顯示信息） 使用預設值5個星星，預設信息 `var msg = [........]; sufuStar.star(10,msg);`自定義星星個數為10、顯示信息msg格式參考預設值，條數必須和星星個數一致； 自己實現一些實例，有個好處，能 ...
  • javascript--函數定義與函數作用域--詳解
    最近在學習javascript的函數，函數是javascript的一等對象，想要學好javascript，就必須深刻理解函數。本人把思路整理成文章，一是為了加深自己函數的理解，二是給讀者提供學習的途徑，避免走彎路。內容有些多，但都是筆者對於函數的總結。 1.函數的定義 1.1：函數聲明 1.2：函數 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類