1. 程式人生 > 其它 >JavaScript學習 第二週

JavaScript學習 第二週

if else 條件判斷

if

    if(條件式){
                語句1;
            }else{
                語句2;
            }

條件式拓展:

  • ===:嚴格等於,資料型別和數值完全相等!!!

    舉例 :3 == '3', true;
    :3 === '3',false;

  • !==:不嚴格等於。

switch 選擇結構

簡單的例子

舉個例子

1:

    <script>
        var num;
        var flag;
        num = prompt("input your number.",1);
        num = Number(num); //必須加這個,否則會報錯。
        switch(num){
            case 1:
            case 2:
            case 3:
                flag = 100; //當num等於1,2,3時
                break;
            case 4:
                flag = 200; //當num等於4時
                break;
            case 5:
                flag = 300;
                break;
            default:flag = 0;
        }
        alert(flag);
        alert(num);
    </script>

為什麼不加那個句子會報錯呢?

關於資料型別。

一般來說,在進行比較的時候,除非使用“===”這樣的嚴格等於,JavaScript是會自動轉換資料型別進行比較的。

然而方法prompt是“輸入一個字串”

但case裡面必須是數值型別。

所以需要使用函式Number,將變數num中的字串轉換為數值,再次儲存到變數month中。

函式

如Number一類,叫做函式。與方法不同,

與方法不同,函式的使用並不依賴物件。

for迴圈,while迴圈。

應用於製表

在網頁製作時,需要用到迴圈來指表:

    <body>
        <table>
            <tr>
                <th>和歷</th><th>西曆</th>
            </tr>
            <script>
                var i;
                for (i = 1; i <= 10; i++){
                document.write("<tr><td>平成", i, "年</td>");
                document.write ("<td>", i + 1988, "年</td></tr>");
                }
            </script>
        </table>
        
    </body>

同樣的,可以用while迴圈來執行這一製表過程。

    <body>
        <table>
            <tr>
                <th>和歷</th><th>西曆</th>
            </tr>
        <script>
            var MAX = 8;
            var i = 1;
            while (i <= MAX){
                    document.write("<tr><td>平成", i, "年</td>");
                    document.write ("<td>", i + 1988, "年</td></tr>");
                i++;
                }
        </script>
        <table>
    </body>

關於i++和++i

引用於java學習06:基本運算子
自增自減

  • b = a++:先執行這一行語句(賦值,把a此時的值賦給b),再自增

  • b = ++a:先自增,再執行這一行語句。

break終止迴圈。

函式與自定函式

簡單介紹

  • 自定函式要寫在head中
    虛擬碼如下:
        function 函式名(引數1,引數2……){
            程式碼塊;
            retun 返回值;
        }

舉個例子,進行一個簡單的人民幣轉日元:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>20201314呂榮祥</title>
    <style>
        
        body{
            background-color: aliceblue;
            font-size:larger;
            color: brown;
            text-align: center;
            
        }
    
    </style>

    <script>
        function rmbToYen(rmb,rate){
            var yen;
            yen = rmb*rate;
            return yen;
        }
    </script>
</head>
<body>
    <script>
        var rmb;
        rmb = prompt("input rmb",300);
        var yen1 = rmbToYen(rmb,15.306);
        document.write(rmb,"rmb = ",yen1,"円");
    </script>
</body>
</html>

沒有難點

函式的有效範圍(作用域)

  • 函式內定義的變數屬於區域性變數,只在函式內聲效。
  • 全域性變數不受區域性變數的影響。
<head>
    <script>
        function testFunc(){
            num = 5;
        }
    </script>
</head>
<body>
    <script>
        var num = 3;
        testFunc();
        document.write(num);
    </script>
</body>

這段程式碼中,函式僅僅起到一個改變數值的作用。他只是將全域性變數num從3改成5,所以輸出5.

<head>
    <script>
        function testFunc(){
            var num;
            num = 5;
        }
    </script>
</head>
<body>
    <script>
        var num = 3;
        testFunc();
        document.write(num);
    </script>
</body>

而這段程式碼中,在函式裡嘗試定義一個區域性變數num,並把它賦值為5。

但是它是一個區域性變數,在最後的輸出時他並不會被處理到。

所以最後輸出還是3。

物件的生成

有使用時不需要生成的,也有必要生成的。

window物件,document物件…等等到上次為止學習的物件,是從一開始就可以使用的物件。

生成管理日期和時間的Date物件,並儲存在變數now中。

    now = new Date();

介紹兩個關鍵字:

  • new:生成物件時使用的特殊運算子

  • Date:將某個時間點的日期時間作為資料管理的物件

生成可用的物件成為例項。

    <script>
        var aDay;
        aDay = new Date(2022,3,9,14,50,35);//當前的時間
        document.write("<h1>",aDay.toString(),"</h1>");

    </script>

toString:是將物件的內容轉換成字串返回的方法。

在Date()中,其中的引數:

  • 如果省略的話,就會生成具有當前日期的例項。
  • 指定後,生成具有特定日期的例項。
  • 時間:24小時制。
  • 月:指定1月為0的數值。例如,指定4月的時候是“3”。
  • 如果把時間省略:作為0點0分0秒處理。

Date 方法的使用。

  • new Date();後 會生成一系列的例項,例如:
    getFullYear:返回年
    getMonth:返回月,但是0是1月,1是2月。。。
    getDate:返回日
    getDay:返回星期幾。
    getHour:返回0~23小時。
    getMinutes:返回分鐘
    getSeconds:返回秒
    getTime:從1970年1月1日0時0分0秒開始以毫秒返回經過的時間。

使用時如下:

    <script>
            var now, date;
            now = new Date();
            date = now.getFullYear();
            document.write("<h1>",date,"</h1>");
    </script>

Math 的使用

    var num = Math.max(5,2,9,10);

這裡num會被賦為10;

    abs 絕對值
    exp e的p次方 Max.exp(p)
    pow pow(2,3) 就是2的三次方
    ceil 小數點向上取整
    floor 小數點向下取整
    round 小數點第一位四捨五入
    log 取對數
    max 最大值
    min 最小值
    random 0~1隨機數
    sin 
    cos
    tan

例項方法和靜態方法

例項方法要先now,比如Date。這裡Date是物件,.後面的是方法。
靜態方法比如Math,Math是物件。Math不用new就可以用後面的方法。

String 字串操作

charAt 取出指定位置的文字
charCodeAt 把指定位置的字元的字元碼放回(將Unicode轉換成10準數後返回)
IndexOf 查詢字串的位置
split 把字串轉換成陣列
substring 取出指定範圍內的字串的中間部分
toLowerCase 把半形英文字母轉換成小寫
toUppeCase 把半形英文字母轉換成大寫

使用例:

        <script>
            var str1 = new String("20201314 呂榮祥");
            document.write("<h1>",str1,"長:",str1.length,"</h1>");
            for(var i = 0; i <= (str1.length);i++){
                document.write("<h2>",str1.charAt(i),"</h2>");
            }
        </script>

順帶一提,摘星了。