python學習之路前端-JavaScript

時間  2019-12-09
標籤 python 學習 之路 前端 javascript 欄目 Python 简体版
原文   原文鏈接

 JavaScript簡介

     JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，最先是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增長動態功能。javascript

1.基本特色html

    JavaScript是一種屬於網絡的腳本語言,已經被普遍用於Web應用開發,經常使用來爲網頁添加各式各樣的動態功能,爲用戶提供更流暢美觀的瀏覽效果。一般JavaScript腳本是經過嵌入在HTML中來實現自身的功能的。
1.是一種解釋性腳本語言（代碼不進行預編譯）。
2.主要用來向HTML（標準通用標記語言下的一個應用）頁面添加交互行爲。
3.能夠直接嵌入HTML頁面，但寫成單獨的js文件有利於結構和行爲的分離。
4.跨平臺特性，在絕大多數瀏覽器的支持下，能夠在多種平臺下運行（如Windows、Linux、Mac、Android、iOS等）。
   Javascript腳本語言同其餘語言同樣，有它自身的基本數據類型，表達式和算術運算符及程序的基本程序框架。Javascript提供了四種基本的數據類型和兩種特殊數據類型用來處理數據和文字。而變量提供存放信息的地方，表達式則能夠完成較複雜的信息處理。前端

2.平常用途java

嵌入動態文本於HTML頁面
對瀏覽器事件作出響應
讀寫HTML元素
在數據被提交到服務器以前驗證數據
檢測訪客的瀏覽器信息
控制cookies，包括建立和修改等
基於Node.js技術進行服務器端編程程序員

3.基本特色正則表達式

(1)腳本語言 JavaScript是一種解釋型的腳本語言,C、C++等語言先編譯後執行,而JavaScript是在程序的運行過程當中逐行進行解釋。
(2)基於對象 JavaScript是一種基於對象的腳本語言,它不只能夠建立對象,也能使用現有的對象。
(3)簡單 JavaScript語言中採用的是弱類型的變量類型,對使用的數據類型未作出嚴格的要求,是基於Java基本語句和控制的腳本語言,其設計簡單緊湊。
(4)動態性 JavaScript是一種採用事件驅動的腳本語言,它不須要通過Web服務器就能夠對用戶的輸入作出響應。在訪問一個網頁時,鼠標在網頁中進行鼠標點擊或上下移、窗口移動等操做JavaScript均可直接對這些事件給出相應的響應。
(5)跨平臺性 JavaScript腳本語言不依賴於操做系統,僅須要瀏覽器的支持。所以一個JavaScript腳本在編寫後能夠帶到任意機器上使用,前提上機器上的瀏覽器支 持JavaScript腳本語言,目前JavaScript已被大多數的瀏覽器所支持。
不一樣於服務器端腳本語言，例如PHP與ASP，JavaScript主要被做爲客戶端腳本語言在用戶的瀏覽器上運行，不須要服務器的支持。因此在早期程序員比較青睞於JavaScript以減小對服務器的負擔，而與此同時也帶來另外一個問題：安全性。
而隨着服務器的強壯，雖然程序員更喜歡運行於服務端的腳本以保證安全，但JavaScript仍然以其跨平臺、容易上手等優點大行其道。同時，有些特殊功能（如AJAX）必須依賴Javascript在客戶端進行支持。隨着引擎如V8和框架如Node.js的發展，及其事件驅動及異步IO等特性，JavaScript逐漸被用來編寫服務器端程序。編程

JavaScript的存在形式和存放位置

1.JavaScript的存在形式api

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js的兩種存在形式</title>
    <!--js的第二種存在形式-->
    <script src="common.js"></script>
    <!--js的第一種存在形式，直接在head頭部進行編寫-->
    <script>
        var ab = 123;
        alert(ab)
    </script>
</head>
<body>
</body>
</html>　

2.JavaScript的存放位置數組

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

因爲HTML代碼是從上向下執行，若是head中的js代碼耗時嚴重，就會致使用戶長時間沒法看到頁面，若是放置在body代碼塊底部，那麼即便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變量

JavaScript中變量的聲明是一個很是容易出現錯誤的點，局部變量必須以var開頭，若是未使用var，則默認表示聲明的是全局變量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js變量的定義</title>
</head>
<body>
    <script>
        //全局變量
        name = 'zhangsan'
        function func(){
            //局部變量
            var age = 18;
        }
        //全局變量
        gender = 'male'
    </script>
</body>
</html>

JavaScript中代碼的註釋：

單行註釋：//

多行註釋：/*  */

說明：此註釋僅在script中生效

數據類型

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

  • 原始類型
    • 數字
    • 字符串
    • 布爾值
  • 對象類型
    • 數組
    • 「字典」
    • ...

特別的，數字、布爾值、null、undefined、字符串是不可變。

null是JavaScript語言的關鍵字，它表示一個特殊值，經常使用來描述「空值」。
undefined是一個特殊值，表示變量未定義

一、數字（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( )
計算正切值。

二、字符串（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個組內容；
                                     $&：當前匹配的內容；
                                     $`：位於匹配子串左側的文本；
                                     $'：位於匹配子串右側的文本
                                     $$：直接量$符號

三、布爾類型（Boolean）

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

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

四、數組

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)       將數組元素鏈接起來以構建一個字符串
obj.concat(val,..)  鏈接數組
obj.sort( )         對數組元素進行排序

其餘

一、序列化

  • JSON.stringify(obj)   序列化
  • JSON.parse(str)        反序列化

二、轉義

  • decodeURI( )                   URl中未轉義的字符
  • decodeURIComponent( )   URI組件中的未轉義字符
  • encodeURI( )                   URI中的轉義字符
  • encodeURIComponent( )   轉義URI組件中的字符
  • escape( )                         對字符串轉義
  • unescape( )                     給轉義字符串解碼
  • URIError                         由URl的編碼和解碼方法拋出

三、eval

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

  • eval() 
  • EvalError   執行字符串中的JavaScript代碼

四、正則表達式

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

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

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

五、時間處理

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

  • 時間統一時間
  • 本地時間（東8區）

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

 語句和異常

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

 if(條件){
 
    }else if(條件){
         
    }else{
 
    }

 switch(name){
        case '1':
            name = xiaoming;
            break;
        case '2':
            name = xiaoxiang;
            break;
        default :
           name = yuemei;
    }

二、循環語句

JavaScript支持三種循環語句，分別是：

第一種：

var names = ["xiaoming", "xiaoxiang", "yuemei"];
 
for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}

第二種：

var names = ["xiaoming", "xiaoxiang", "yuemei"];

for(var index in names){
    console.log(index);
    console.log(names[index]);
}

第三種：

while(條件){
    // break;
    // continue;
}

三、異常處理

try {
    //這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
    // 若是try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
    //e是一個局部變量，用來指向Error對象或者其餘拋出的對象
}
finally {
     //不管try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
}

注：主動跑出異常 throw Error('xxxx')

函數

一、基本函數

JavaScript中函數基本上能夠分爲一下三類：

// 普通函數
    function func(arg){
        return true;
    }
          
// 匿名函數
    var func = function(arg){
        return "xiaoming";
    }
  
// 自執行函數
    (function(arg){
        console.log(arg);
    })('123')

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

2.做用域

JavaScript的做用域一直以來是前端開發中比較難以理解的知識點，對於JavaScript的做用域主要記住5句話

「JavaScript中無塊級做用域」

在JAVA或C#中存在塊級做用域，即：大括號也是一個做用域

public static void main ()
{
    if(1==1){
        String name = "seven";
    }
    System.out.println(name);
}
// 報錯

public static void Main()
{
    if(1==1){
        string name = "seven";
    }
    Console.WriteLine(name);
}
// 報錯

在JavaScript語言中無塊級做用域

function fun1(){
    if(1==1){
        var name = 'xiaoming';
    }
    console.log(name);
}
// 輸出： xiaoming

補充：標題之因此添加雙引號是由於JavaScript6中新引入了 let 關鍵字，用於指定變量屬於塊級做用域

JavaScript採用函數做用域

在JavaScript中每一個函數做爲一個做用域，在外部沒法訪問內部做用域中的變量

function fun1(){
    var innerValue = 'xiaoliang';
}
 
fun1();
 
console.log(innerValue);
 
// 報錯：Uncaught ReferenceError: innerValue is not defined

JavaScript的做用域鏈

因爲JavaScript中的每一個函數做爲一個做用域，若是出現函數嵌套函數，則就會出現做用域鏈。

xo = 'alex';
  
function Func(){
    var xo = "seven";
    function inner(){
        var xo = 'alvin';
        console.log(xo);
    }
    inner();
}
Func();

如上述代碼則出現三個做用域組成的做用域鏈，若是出現做用域鏈後，那麼尋找變量時候就會出現順序，對於上述實例：

當執行console.log(xo)時，其尋找順序爲根據做用域鏈從內到外的優先級尋找，若是內層沒有就逐步向上找，直到沒找到拋出異常。

JavaScript的做用域鏈執行前已建立

JavaScript的做用域在被執行以前已經建立，往後再去執行時只須要按照做用域鏈去尋找便可。

示例一：

xo = 'alex';
 
function Func(){
    var xo = "seven";
    function inner(){
 
        console.log(xo);
    }
    return inner;
}
 
var ret = Func();
ret();
// 輸出結果： seven

上述代碼，在函數被調用以前做用域鏈已經存在：

  • 全局做用域 -> Func函數做用域 -> inner函數做用域

當執行【ret();】時，因爲其代指的是inner函數，此函數的做用域鏈在執行以前已經被定義爲：全局做用域 -> Func函數做用域 -> inner函數做用域，因此，在執行【ret();】時，會根據已經存在的做用域鏈去尋找變量。

示例二：

xo = 'alex';
 
function Func(){
    var xo = "eirc";
    function inner(){
 
        console.log(xo);
    }
    xo = 'seven';
    return inner;
}
 
var ret = Func();
ret();
// 輸出結果： seven

上述代碼和示例一的目的相同，也是強調在函數被調用以前做用域鏈已經存在：

  • 全局做用域 -> Func函數做用域 -> inner函數做用域

不一樣的時，在執行【var ret = Func();】時，Func做用域中的xo變量的值已經由 「eric」 被重置爲 「seven」，因此以後再執行【ret();】時，就只能找到「seven」。

示例三：

xo = 'alex';<br>
function Bar(){
    console.log(xo);
}
 
function Func(){
    var xo = "seven";
     
    return Bar;
}
 
var ret = Func();
ret();
// 輸出結果： alex

上述代碼，在函數被執行以前已經建立了兩條做用域鏈：

  • 全局做用域 -> Bar函數做用域
  • 全局做用域 -> Func函數做用域

當執行【ret();】時，ret代指的Bar函數，而Bar函數的做用域鏈已經存在：全局做用域 -> Bar函數做用域，因此，執行時會根據已經存在的做用域鏈去尋找。

聲明提早

在JavaScript中若是不建立變量，直接去使用，則報錯：

console.log(xxoo);
// 報錯：Uncaught ReferenceError: xxoo is not defined

JavaScript中若是建立值而不賦值，則該值爲 undefined，如：

var xxoo;
console.log(xxoo);
// 輸出：undefined

在函數內若是這麼寫：

function Foo(){
    console.log(xo);
    var xo = 'seven';
}
 
Foo();
// 輸出：undefined

上述代碼，不報錯而是輸出 undefined，其緣由是：JavaScript的函數在被執行以前，會將其中的變量所有聲明，而不賦值。因此，至關於上述實例中，函數在「預編譯」時，已經執行了var xo；因此上述代碼中輸出的是undefined。

 

 

 

參考文章：http://www.cnblogs.com/wupeiqi/p/5649402.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程