35-41

時間 2020-02-02

原文原文鏈接

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。javascript

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

<!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"。java

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

</head>
<body>

</body>
</html>

代碼：調用外部JS文件python

<!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效果。git

基礎

變量github

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

基本數據類型數組

字符串

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

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

定時器ide

<!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 函數名(參數){

}
函數名(參數)

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。