JS介紹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert(123)
    </script>
</head>
<body>

</body>
</html>

代碼：在head中使用script，表示其中的語法都是JavaScript。

上圖：這是alert(123)的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        alert(123)
    </script>
</head>
<body>

</body>
</html>

代碼：
之所以可以被識別成JavaScript，是因爲默認情況下在script中有個type="text/javascript"。
不進行配置的話默認就是type="text/javascript"。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js-01.js"></script>

</head>
<body>

</body>
</html>

代碼：調用外部JS文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div>123</div>
    <div>321</div>

    <script src="js-01.js"></script>
</body>
</html>

代碼：當去打開一個網頁，如果使用了JavaScript，則會先加載JavaScript的效果，纔會去加載內容，如果有些JavaScript效果是需要人爲主動觸發的話（比如鼠標點擊），可效果遲遲加載不出來，那麼就一直也看不到內容；
所以最好是先加載內容後加載JavaScript的話，需要將JavaScript的內容放在body中的最下面，這樣就會先看到內容，後看到JavaScript效果。

基礎

變量

name = 'test'   全局變量
var name = 'test'   局部變量

基本數據類型

字符串

age = "18";
i = parseInt(age);  <!--將字符串轉成整數-->
x = parseFloat(age);    <!--將字符串轉成浮點數-->

上圖：
在瀏覽器的console中直接定義變量和調用相關屬性
字符串的幾種屬性；
charAt 獲取指定下標對應的字符
substring 獲取指定範圍下標的字符
length 獲取當前字符串的長度

定時器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        setInterval("alert(123);",5000)
    </script>

</body>
</html>

代碼：5000是毫秒。

上圖：每5秒就會彈出一次

函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>

        function f1(){
            console.log(123);
        }
        setInterval("f1()",2000)
    </script>

</body>
</html>

代碼：每2秒調用一次f1函數，並且console.log(123)

上圖：console.log就是在瀏覽器的console中輸出內容，圖中可以看到當前123已經被輸出了12次。

實現內容滾動效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="i1">歡迎大家光臨北京</div>

    <script>

        function  func() {
            /*獲取div標籤及內容*/
            var tag = document.getElementById('i1');

            /*獲取div標籤中的內容*/
            var content = tag.innerText;

            /*獲取整個內容的第1個下標內容，也就是：歡*/
            var f = content.charAt(0);

            /*獲取整個內容的第2個內容到最後一個內容，也就是：迎大家光臨北京*/
            var l = content.substring(1,content.length);

            /*l+f= 迎大家光臨北京歡*/
            var new_content = l + f;

            /*這裏全局變量，讓其等於最新的內容，這樣下次調用的函數時依照上面的操作就會實現內容滾動效果*/
            tag.innerText = new_content;

        }

        setInterval('func()',500);

    </script>

</body>
</html>

上2圖：隨意抓取的兩個滾動中的內容

字符串常見功能

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

split分割

上圖：分割的時候加數字，就是獲取分割的幾個數據。

布爾值

上圖：在JS中，布爾值是小寫

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

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

數組

JS中的數組與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( )         對數組元素進行排序

obj.splice

上圖：
a.splice(1,1,99) 第一個1表示其實位置（22）；第二個1表示對幾個數據進行操作；最後一個值插入的數據，表示將22替換成99。

上圖：第二個值是0，表示新值，可以看到在下標1的位置，插入了一個909的新值。

上圖：這裏沒有第三個值，表示將下標1開始的第一個值刪除後，不會再插入其他值。

字典

上圖：在JS中字典的使用與Python中差不多

for 循環

JS中有兩種for循環的方式

第一種for循環方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>

        a = [11,22,33,44];
        for (var item in a){
            console.log(item);
        }

    </script>

</body>
</html>

代碼：進行for循環操作

上圖：圖中沒有取到值，卻取的是索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>

        a = [11,22,33,44];
        for (var item in a){
            console.log(a[item]);
        }

    </script>

</body>
</html>

代碼：根據索引取a變量中的值

for 循環字典


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

a = {'k1':'v1','k2':'v2'};
for (var item in a){
    console.log(item);
}

</script>

</body>
</html>

代碼：這裏打印item

![enter description here](https://www.github.com/aubreyzheng/python_learn/raw/master/小書匠/1565826884922.png)

上圖：打印的是key

- 打印value
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    a = {'k1':'v1','k2':'v2'};
    for (var item in a){
        console.log(a[item]);
    }

</script>

</body>
</html>

代碼：a[item]

上圖：這裏打印的是value

同時打印key和value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    a = {'k1':'v1','k2':'v2'};
    for (var item in a){
        console.log(item,a[item]);
    }

</script>

</body>
</html>

第二種for循環方式


<!--  初始i等於0，當i小於10的時候會一直for循環；  -->
<!--  第一次循環i等於0，下一次循環時會i++，相當於i+=1  -->
for(var i=0; i<10; i++){

    }

這種for循環不支持字典

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    a = [11,22,33,44];

    for(var i=0; i<a.length; i++){
        console.log(a[i]);
    }

</script>

</body>
</html>

條件語句

<!--if else-->

if(條件){

}else if(條件){

}else if(條件){

}else{

}

等號

上圖：==只判斷值是否相等，不判斷類型； === 即判斷值又判斷類型是否相等。

&&，||

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    if(1==1 && 2==2){
        console.log(true)
    }

</script>

</body>
</html>

代碼：
&&相當於 and
||相當於 or

函數

function 函數名(參數){

}
函數名(參數)

35-41

JS介紹

基礎

字符串

布爾值

數組

字典

for 循環

條件語句

函數

Kafka存儲機制

aws語音呼叫調用，告警電話

【轉】[C#] WebAPI 防止併發調用二（冥等性）

HTTP URL 詳解

創新工具：2024年開發者必備的一款表格控件（二）

車牌識別控制檯可快速整合二次開發

95-96

66-69

92-94

28-34

9-17

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結