JavaScripts

時間  2019-11-07
標籤 javascripts 欄目 JavaScript 简体版
原文   原文鏈接


第1章 JavaScripts簡介

1.1什麼是JS？

1.     JS是web的編程語言，全部現代在html中都是用JShtml

2.     JS是一種輕量級的編程語言，是可插入HTML的編程代碼web

3.     JS插入HTML頁面後，可由全部瀏覽器執行編程

1.2爲何要用JS？

1.     HTML定義了網頁的內容數組

2.     CSS描述了網頁的佈局瀏覽器

3.     JS則是網頁的行爲，或者說與用戶進行交互編程語言

第2章 JS如何引入及基本書寫規範

2.1JS通常在head和body後面均可以寫，可是建議寫在body後面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網頁標題</title>
</head>
<body>
    Js文件體
<script>
    alert('彈出警告')
</script>
</body>
</html>ide

2.2JS的註釋方式：

<script>
    //alert('彈出警告')
    /**
     * 注視內容
     */
</script>函數

2.3如何引入第三方JS文件？

<script src="js/test.js"></script>佈局

第3章 JS語法

3.1變量聲明

<script>
    varnum=123;
    console.log(num,typeof (num));
    var s='jiang';
    console.log(s,typeof s);
    var b=true;
    console.log(b,typeof b);
</script>this

3.2JS的類型轉換

<script>
    console.log('10'==10); //值比較
    console.log('10'===10); //值與類型的比較
    var res='100' -5;
    console.log(res);
</script>

3.3數字轉換爲字符串

<script>
    var res =111 +''; //數字轉換爲字符串
    res=111..toString()
    console.log(typeof res)
</script>

3.4字符串轉換爲數字：

<script>
    var res='111';
    res='111' - 0;
    console.log(typeof res)
</script>

3.5parse方法

<script>
    res=parseFloat('3.1.3ab')
    console.log(res)
    res=parseInt('3.2.2')
    console.log(res)
</script>

第4章 JS類型的使用

4.1如何表示多個數據的值以及數組的增刪改查操做

<script>
    var arr=[1,2,3];
    console.log(arr)
    console.log(arr[0]);
    delete arr[0]; //刪除
    console.log(arr)
    arr[0]=7; //修改
    console.log(arr)

    arr.unshift('111') //頭增
    console.log(arr)
    arr.shift('111') //頭刪
    console.log(arr)
    arr.push('111') //末尾增
    console.log(arr)
    arr.pop('234') //末尾刪
    console.log(arr)
</script>

4.2splice方法：

<script>
    var arr=[1,2,3];
    console.log(arr)
    //splice  從什麼索引開始，操做多少位，操做成什麼
    arr.splice(0,1,8)
    console.log(arr)

    arr.splice(0,2) //若是第三個參數省略，表示爲刪除
    console.log(arr)
</script>

4.3slice方法：

<script>
    var arr=[1,2,3];
    console.log(arr)

//slice（n，m）從索引n開始到m以前
    newarr=arr.slice(0,2);
    console.log(newarr)
</script>

4.4組合字符串以及字符串的逆運算

<script>
    var arr=[1,2,3];
    console.log(arr)
    var str=arr.join('@')
    console.log(str, typeof str)
    var r=str.split('@')
    console.log(r)
</script>

4.5JS中沒有字典，可是能夠用對象來徹底取代字典：

<script>
    var dic ={
        name:'jiang',
        age:'20',
    }
    console.log(dic.name)
//字典的增刪改查
    dic.sex='nihao';
    console.log(dic)
    dic.age='77'
    console.log(dic)
    delete dic.age
    console.log(dic)
</script>

第5章 JS的函數

5.1函數的定義：

正常定義方式

<script>
     function f1() {
         console.log('函數1')
     }
    f1()
 </script>

匿名函數的定義方式

<script>
     var f2=function () {
         console.log('函數2')
     }
    f2()
 </script>

當即調用函數的方式

<script>
     (function () {
         console.log('函數3')
     })();
 </script>

5.2函數的返回值：JS函數有且只有一個返回值

1.     沒有明確返回值將返回undefined

2.     空返回將返回undefined

3.     return

4.     正常返回一個值

5.     若是返回多個值，取最後一個值

6.     若是返回多個值，須要藉助字典或者數組

<script>
    function f1() {
//       console.log('函數1')
        return [10,20];
    }
    var res=f1()
    console.log(res)
</script>

5.3函數的參數

1.     形參與實參個數不須要統一，但必定按照位置傳參

2.     形參不足就會顯示形參違背賦值，實參多傳就會被丟棄

<script>
    function f1(a,b,c=4,d=2) {
        console.log(a,b,c,d)
    }
    f1(1,2)
</script>

3.     …args爲不定長形參

<script>
    function f1(a,...b) {
        console.log(a,b)
    }
    f1(1,2,3,4)
</script>

5.4常見模塊和經常使用方法：

日期類Date

<script>
    var d=new Date()
    console.log(d.getDate())//從date對象中返回一個月中的某一天
    console.log(d.getFullYear())//從date對象中以四位數字返回年份
    console.log(d.getMonth())//從date對象返回月份
    console.log(d.getDate())//從date對象返回一個月中的某一天
    console.log(d.getDay())//從date對象中返回一週中的某一天
    console.log(d.getHours())/返回date對象的小時
    console.log(d.getMinutes())//分鐘
    console.log(d.getSeconds())//秒數
</script>

Json的序列化和反序列化

<script>
    var str1='{"name":"jiang","age":20}';
    var str2={"name":"jiang","age":20}
    console.log(str1,str2)
    var obj=JSON.parse(str1)//序列化
    console.log(obj)
    var str=JSON.stringify(obj)//反序列化
    console.log(str)
</script>

url轉義

decodeURI()     解碼URI
decodeURIComponent()  解碼URI中的組件部分
encodeURI()     編碼URI
encodeURIComponent()  編碼URI中的組件部分
escape()        對字符串進行轉義
unescape()      對字符串進行解碼

第6章 JS頁面交互

6.1經過JS選擇器獲取頁面標籤對象

<body>
    <div class="test">hello</div>
</body>
<script>
    var res=document.querySelector('body .test');
    var box=document.querySelectorAll('.test');
    console.log(res)
    console.log(box)
</script>

6.2爲該目標標籤對象綁定交互的方式

<body>
    <div class="test">hello</div>
    <div class="test">hello</div>
</body>
<script>
    var res=document.querySelector('body .test');
    var box=document.querySelectorAll('.test');
    console.log(res)
    console.log(box)

    res.onclick=function () {
        console.log('test被點擊')
    }
    box[1].onmouseover=function () {
        console.log('box被懸浮')
    }
</script>

6.3在事件內部完成具體交互的業務邏輯

    <style>
        .test{
            font-size:50px;
        }
    </style>
</head>
<body>
    <div class="test">hello</div>
    <div class="test">hello</div>
</body>
<script>
    var res=document.querySelector('body .test');
    var box=document.querySelectorAll('.test');
    console.log(res)
    console.log(box)

    res.onclick=function () {
        console.log('test被點擊',this)
        //獲取內容
        var msg=this.innerText;
        //修改內容
        console.log(msg)
        this.innerHTML="<p>你好</p>"
        //獲取樣式
        var fontSize=getComputedStyle(this,null),fontSize;
        console.log(fontSize);
        //設置樣式
        this.style.backgroundColor="red"
        //獲取類名
        var className=this.className;
        console.log(className)
        //設置類名
        this.className=+"big";
    }
    box[1].onmouseover=function () {
        console.log('box被懸浮')
    }
</script>

第7章 JS流程控制

7.1If判斷

<body>
    <input class="inp" type="text">
    <button class="btn">判斷字符串是否爲數字</button>
</body>
<script>
    varinp=document.querySelector('.inp')
    varbtn=document.querySelector('.btn')

    btn.onclick=function () {
        v=inp.value;
        num=+v;
        if (!isNaN(num)) {
            alert('是數字')
        } else{
            alert('不是數字')
        }
        inp.value=""
    }
</script>

7.2while循環：不知道循環次數的狀況

<script>
    num=0
    while(num < 5){
        console.log("nihao");
        num=num+1;
    }
</script>

7.3for 循環：明確知道循環的次數

<script>
    for(vari=0; i < 5;i=i+1){
        console.log(i);
    }
</script>

7.4do while循環：在條件判斷以前就須要執行一次循環體

<script>
    count=0
    do{
        console.log(count);
        count=count+1;
    }while (count < 5)
</script>

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