Web前端學習——JavaScript

Rangle發表於2017-12-07
Web前端JavaScript

一、JavaScript介紹
JavaScript一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。它的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
二、JavaScript使用
1、JavaScript指令碼定義
(1)head標籤內定義

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        alert("警告");
</script>
</head>

(2)head標籤內引入

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js01.js">
    </script>
</head>

(3)body標籤內部末尾

<body>
    xxx
    <script src="js01.js">
    </script>
</body>

2、JavaScript註釋
(1)單行註釋
    //
(2)多行註釋
    /* xxx */
3、JavaScript常用資料型別
(1)變數宣告
    全域性變數定義：name='Tom'
    區域性變數：      var name='Tom'
(2)數字型別
    a=18;
    age="18"
    parseInt(age);        ##轉化為整數型別
    parseFloat(age);    ##轉化為浮點數型別
(3)字串型別
    name="Tom"
    a.charAt(1)            ##根據下標取字串值,0表示第一個字元
    a.substring(1,3)    ##獲取字串,起始結束為止,0表示第一個字元，範圍是[m,n)，即m=<name<n
    a.length            ##獲取字串長度
    a.trim()            ##移除空白
    a.trimleft()        ##移除左側空白
    a.trimright()        ##移除右側空白
    a.concat(value,...)    ##字串拼接
    a.indexOf(sub,start)##子序列位置，正數
    a.lastIndexOf(sub,start)##子序列位置，倒數
    a.slice(start,end)    ##切片
    a.toLowerCase()        ##轉換為大寫
    a.toUpperCase()        ##轉換為小寫
    a.split(delimiter,limit)    ##分隔
    a.search(regexp)    ##從頭開始匹配，返回匹配成功的第一個位置(g無效)
    a.match(regexp)        ##全域性搜尋,如果正則中有g表示找到全部，否則只知道第一個
    a.replace(regexp,replace)##替換，有g替換所有，否則只替換第一個，$數字：匹配的第n個組內容，$&當前匹配的內容,$`：位於匹配子串左側的文字
(4)布林型別
    true
    false
(5)陣列
    a=[1,'a','','tom']
    a.length            ##陣列長度
    a.splice(n,0,value)    ##從指定位置插入value
    a.splice(n,1,value)    ##從指定位置替換value
    a.splice(n,1)        ##從指定位置刪除value
    a.slice(m,n)        ##從指定位置切片
    a.join(sep)            ##陣列值按照指定分隔符拼接成字串
    a.concat(val,...)    ##對陣列元素進行排序
    a.sort()            ##對資料元素進行排序
    
(6)字典
    a={'k1':'v1','k2':'v2'}

4、常用語法
(1)函式定義語法
a.普通函式：

function fname(){
函式體
}
b.匿名函式
fsetInterval(function(){
console.log(123);
},5000)

c.自執行函式


(2)if語法
    if(條件){
    
    }else if(條件){
    
    }else if(條件){
    
    }else{
    
    }
    
    ==：非嚴格意義等號，1=="1"為true
    ===:嚴格意義等號，1==="1"為false
    !=:不等號
    &&:邏輯與
    ||:邏輯或  

name='1' ;
switch(name){
case '1':
console.log(123);
case '2':
console.log(456);
default:
console.log(789);

}

<script>
var name='1';
switch (name){
case '1':
age=123;
console.log(age)
case '2':
age=456;
console.log(age)
default:
age=999;
console.log(age)


}
</script>

(3)for迴圈

    1)語法
    a=[1,'a','','tom']
    for(var item in a){
        console.log(a[item]);
    }
    2)語法
    a=[1,'a','','tom']
    for(var i=0;i<a.length;i++){
        console.log(a[i]);
    }
  
5.其他常用函式
(1)計時器

<body>
    <script >
        setInterval("alert('警告')",5000)
    </script>
</body>

(2)console日誌記錄

<body>
    <script >
        function  f01() {
            console.log(123)
        }
        setInterval("f01()",5000)
    </script>
</body>

 (3)json和字串轉換

JSON.stringify(li) ##將陣列轉化為字串
JSON.parse(li) ##將字串轉化為陣列
(4)轉義

encodeURL() ##URL中轉義的字元
decodeURL() ##URL中未轉義的字元
encodeURLComponent() ##URL中元件未轉義的字元
decodeURLComponent() ##URL中元件轉義的字元
escape() ##對字串轉義
unescape() ##給轉義字串解碼
URLError() ##給URL編碼和解碼方法丟擲
(5)eval
javascript中eval是可以編譯程式碼，也可以獲取返回值
(6)時間
var dt=new Date()
dt.getxxx ##獲取時間
dt.setxxx ##設定時間
(7)確認框
confirm('輸入資訊內容')

(8)重定向
location.href='url' ##重定向
location.reload() ##重新載入
location.href ##獲取URL
(9)事件
事件呼叫有兩種方式：
a.一種是通過直接標籤繫結
onclick='xx()'
b.先獲取Dom物件，然後進行繫結
document.getElementById('xx').onclick
document.getElementById('xx').onfocus

onclick
onblur
onfocus

6、Dom間接選擇器
(1)找到標籤
a.直接查詢
獲取單個元素：document.getElementById('i1')
獲取多個元素：document.getElementsByTagName('div')
document.getElementsByClassName('c1')
document.getElementsByName('name')
b.間接查詢
tag=document.getElementById('i1')

parentElement ##父標籤元素
children ##子標籤元素
firstElementChild ##第一個子標籤元素
lastElementChild ##最後一個子標籤元素
nextElementSlibling ##下一個兄弟標籤元素
previousElementSlibling ##上一個兄弟標籤元素

(2)操作標籤
a.innerText
獲取標籤中的文字內容：標籤.innerText
標籤內容重新賦值：標籤.innerText=''
b.className
tag.className ##直接整體操作
tab.className.add('樣式名') ##新增指定樣式
tab.className.remove('樣式名') ##刪除指定樣式

7、作用域
(1)作用域範圍
a.其他語言：以程式碼塊作為作用域
public void Func(){
if(1==1){
string name='Java';
}
console.writeline(name);
}
Func(); ##此時執行報錯，因為name是區域性變數，其作用域為{}內
b.python:
def func():
if 1==1:
name='tom'
print(name)

func() ##此時執行成功，因為Python作用域是函式本身
c.javascript
def func(){
if (1==1){
name='tom';
}
console.log(123);
}

func() ##此時執行成功，因為javascript作用域是函式本身
##函式作用域存在作用域鏈中，並且也是在建立之前被宣告
##函式區域性變數提前宣告
8、JavaScript物件導向
function fo(n){
this.name=n;
}
var obj=new fo('Tom');

a.this 代指物件(python self)
b.建立物件時,new 函式名，表示類例項化
9、JS正則匹配
/../ 用於正則匹配
/../g 全域性匹配
/../i 忽略大小寫匹配
/../m 多行匹配
(1)test
判斷字串是否符合規定的正則，只要含有匹配內容就返回true
req=/^d+$/
req=/\bJava\b/g
(2)exec
獲取匹配資料



 

相關文章