Python開發【前端】：JavaScript，pythonjavascript
JavaScript入門 JavaScript一種直譯式指令碼語言，是一種動態類型、弱類型、基於原型的語言，內建支援類型。它的解譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於用戶端的指令碼語言，最早是在HTML（標準通用標記語言 (SGML)下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。 在1995年時，由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。但實際上它的文法風格與Self及Scheme較為接近。 為了取得技術優勢，微軟推出了JScript，CEnvi推出ScriptEase，與JavaScript同樣可在瀏覽器上運行。為了統一規格，因為JavaScript相容於ECMA標準，因此也稱為ECMAScript
簡單瞭解下：
<body> <input type="text" id="user" /> <input type="button" onclick="GETDATA();" value="點我"/> <script> function GETDATA() { var i = document.getElementById('user'); alert(i.value); } </script></body>
在input框裡輸入使用者名稱後，點擊點我後瀏覽器視窗彈出剛剛輸入的使用者名稱
兩種引用方式：
<head> <meta charset="UTF-8"> <title>Title</title> <!--第一種方式引用js檔案--> <script src="commons.js"></script> <!--第二種方式直接寫在html中--> <script> alert('James') </script></head>
字串記得要加引號
JavaScript常用資料類型
1、變數
JavaScript中變數的聲明是一個非常容易出錯的點，局部變數必須一個 var 開頭，如果未使用var，則預設表示聲明的是全域變數
<script type="text/javascript"> // 全域變數 name = 'James'; function func(){ // 局部變數 var age = 18; // 全域變數 gender = "男" }</script>
2、數字
JavaScript中不區分整數值和浮點數值，JavaScript中所有數字均用浮點數值表示。
轉換：
特殊值：
<script> //字串轉換為數字 age="18"; i = parseInt(age); </script>
更多數值計算
常量Math.E常量e，自然對數的底數。Math.LN1010的自然對數。Math.LN22的自然對數。Math.LOG10E以10為底的e的對數。Math.LOG2E以2為底的e的對數。Math.PI常量figs/U03C0.gif。Math.SQRT1_22的平方根除以1。Math.SQRT22的平方根。靜態函數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( )計算正切值。MathMath
3、字串
字串是由字元組成的數組，但在JavaScript中字串是不可變的：可以訪問字串任意位置的文本，但是JavaScript並未提供修改已知字串內容的方法
① charAt （輸入索引位置擷取字元）
>a = 'James'<"James">a.charAt(1)<"a">a.charAt(2)<"m">a.charAt(3)<"e"
② substring （輸入起始位置，結束位置擷取字元）
>a = 'James'<"James">a.substring(0,2)<"Ja">a.substring(2,5)<"mes"
③ lenght （擷取當前字串長度）
>a = 'James'<"James">a.length<5
④ concat （字串拼接）
>a = 'James';<"James">a.concat('eric');<"Jameseric"
⑤ indexOf（子序列位置）
>a = 'James';<"James">a.indexOf('me');<2>a.indexOf('es');<3
⑥ split （分割字元）
>a = 'JamesaJames';<"JamesaJames">a.split('a');<["J", "mes", "J", "mes"]>a.split('a',1);<["J"]>a.split('a',3);<["J", "mes", "J"]
更多：
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個組內容； $&：當前匹配的內容； $`：位於匹配子串左側的文本； $'：位於匹配子串右側的文本 $$：直接量$符號more
4、布爾值
布爾類型僅包含真假，與Python不同的是其首字母小寫。
5、數組
① 建立數組
li = [11,22,33,44][11, 22, 33, 44]
② split插入、刪除或替換數組的元素
>li = [11,22,33,44]<[11, 22, 33, 44]>li.splice(1,0,99);<[]>li<[11, 99, 22, 33, 44]>li.splice(1,1,888);<[99]>li<[11, 888, 22, 33, 44]>li.splice(1,1)<[888]>li<[11, 22, 33, 44]
③ slice 切片
>li = [11,22,33,44]<[11, 22, 33, 44]>li.slice(1,3)<[22, 33]
其他常用功能：
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( ) 對數組元素進行排序
6、字典
建立字典
>dic = {'k1':'v1','k2':'v2'};<Object {k1: "v1", k2: "v2"}
JavaScript語句和異常
1、迴圈
JavaScript中支援兩個中迴圈語句，分別是：for 和 while
① 第一種方式： for迴圈，迴圈時，迴圈的元素是索引
迴圈數組
> a = [11,22,33,44] for(var item in a){ console.log(a[item]) }11223344
迴圈字典
> a = {'k1':'v1','k2':'v2'} for(var item in a){ console.log(a[item]) }v1v2
② 第二種迴圈： for迴圈，迴圈條件判斷
for (var i=0;i<10;i++){ //迴圈十次}
結合數組迴圈
a = [11,22,33,44] for(var i=0;i<a.length;i=i+1){ console.log(a[i]) }11223344
③ 第三種迴圈： while迴圈，迴圈條件判斷
while(條件){ // break; // continue;}
2、條件陳述式
JavaScript中支援兩個中條件陳述式，分別是：if 和 switch
① if條件陳述式
if(條件){ }else if(條件){ }else if(條件){ }else{ }
② switch條件陳述式
switch(name){ case '1': age = 123; break; case '2': age = 456; break; default : age = 777; }switch語句
③ ==、===、!=、!== 四者的關係
1 == "1";true1 === "1";false1 != "1";false1 !== "1";true
==只匹配數值、===不止匹配數值還匹配類型
④ &&and 與 ||或
andif (1==1 || 2==2)或if (1==1 && 2==2)
JavaScript函數
1、基本函數
JavaScript中函數基本上可以分為一下三類：
// 普通函數 function func(arg){ return true; } // 匿名函數 var func = function(arg){ return "tony"; } // 自執行函數 (function(arg){ console.log(arg); })('123')
JavaScript其他知識
1、定時器
<script> //定義函數 function func() { console.log(1); //console端列印資料 } //建立一個定時器 setInterval("f1();",5000); //5000表示5秒 單位毫秒</script>
setInterval（“執行函數”，“時間”）表示建立一個定時器；console.log（“資料”）在console列印輸入的資料
2、跑馬燈（滾動字元）
<body><div id="i1">歡迎習大大蒞臨指導</div><script> function func() { //根據ID擷取指定標籤的內容，定於局部變數 var tag = document.getElementById('i1'); //擷取標籤內部的內容 var content = tag.innerText; var f = content.charAt(0); var l = content.substring(1,content.length); var new_content = l + f; tag.innerText = new_content; } setInterval('func()',500);</script></body>
最終效果“歡迎習大大蒞臨指導”字元滾動顯示，結合了字串處理和定時器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
