1. 程式人生 > >JavaScript筆記一

JavaScript筆記一

dex 就會 類型 打印 case javascrip 沒有 無效 count

一 JavaScript的引入方式

技術分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script>-->
        <!--alert("你好!")-->
    <!--</script>-->
    <script src="index.js"></script>
</head>
<body>

</body>
</html>
View Code

index.js文件

技術分享
/**
*Created by Administrator on 2017/8/7.
*/
alert(123);
View Code

二 JavaScript的變量,常量和標識符

技術分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        多行註釋的類容
        */
        //
單行註釋的內容 //聲明賦值一個變量 /* var i: i=10; var j=20; */ //一行聲明多個變量,以都好分開每一個變量 // var name="fang",age=18; //js以分號為一條語句的分隔符號 /* var i=12; var j=20; alert(i); alert(j); */ //一個變量如果只聲明未賦值,則會打印出undefind /* var x; alert(x); var n=10; var N=3.1415926;
*/ </script> </head> <body> </body> </html>
View Code

三 js 數據類型

技術分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
/*        var i=100.89;
        var s1="hello";
        var b=false;

        console.log(typeof i);   //number
        console.log(typeof s1);   //string
        console.log(typeof b);   //booleam
        */

/*        var arr=[111,222,"hello"];
        var obj={"name":"egon","age":"84"}
        var obj2={name:"fang",age:"18"}

        console.log(typeof arr);      //object
        console.log(typeof obj);    //object
        console.log(obj["name"]);    //object
        console.log(obj);           //object

        console.log(obj2);
        */

//    Undefined :1 當變量只聲明未賦值,的到返回值undefined值;
            //    2 當一個函數沒有返回值時,默認返回一個undefined值。
   /*     var a;
        console.log(a);       //undefined
        console.log(typeof a);    //undefined
        */

//        var a=null;
//        console.log(a);   //null
//        console.log(typeof a);     //object


        //NAN值屬於Number類型:當遇到將字符串轉成數字無效時,就會得到一個NaN數據

    var s="fang";
    var ret2=+s;
    console.log(ret2);   //NaN
    console.log(typeof ret2)   //number

    </script>
</head>
<body>

</body>
</html>
View Code

四 布爾類型

技術分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        console.log(true+2);
        console.log(false+2);

        if(1){
            console.log("ok");
        }
    </script>
</head>
<body>

</body>
</html>
View Code

五 運算符

技術分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //x++  ++x
        <!--var x=10;-->
            <!--x+=1;-->


        //x++  : 先賦值在計算

        <!--var ret=x++;  //x++(x=x+1)-->

        // ++x  先計算後賦值
        <!--var ret1=++x;  //++x(x=x+1)-->

        <!--console.log(x);-->
        <!--console.log(ret);-->
        <!--console.log(ret1);-->




        //   ===  !==
        <!--console.log(2==="2");-->


        //!  &&   ||  邏輯或與非

        <!--var name="egon";-->
        <!--var gender="male";-->
        <!--if (name=="egon"  && gender=="males"){-->
            <!--console.log("success!");-->
            <!--}-->

        //  +  :  字符串拼接

        console.log("hello"+"world");
        console.log("hello"+234);
    </script>
</head>
<body>

</body>
</html>
View Code

六 流程控制

技術分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
/*            //if 表達式;
                pass
            //JS 的if語句

        //雙分支
            if (表達式){
                執行語句
            }


        //多分支語句
            if (表達式){
                執行語句
            }
            else if (表示式){
                執行語句
            }

            else {
                執行語句
            }
            */

/*        //練習:
        var num=67;
        if (num>90){
            alert("優秀")
        }
        else if (num>80){
            alert("良")
        }
        else if (num>60){
            alert("及格")
        }
        else {
            alert("不及格")
        }
        */

//   switch case語句
 /*       var week=3;
        switch(week){
            case 1:console.log("星期一");break;
            case 2:console.log("星期二");break;
            case 3:console.log("星期三");break;
            case 4:console.log("星期四");break;
            case 5:console.log("星期五");break;
            case 6:console.log("星期六");break;
            case 7:console.log("星期日");break;
        }
        */


 //for 循環:
 //for 循環方式1:條件循環   (強烈推薦)
/*        for (var i=0;i<10;i++){
            console.log(i);
            }*/

//for  循環方式2: 遍歷循環
/*        var arr=[111,222,333];
        for (var i in arr){
            console.log(i,arr[i])
            }*/

<!--//while 循環-->
        <!--while (表達式){-->
            <!--循環體-->
            <!--}-->
        <!--var count=0;-->
        <!--var sum=0;-->
        <!--while (count<101){-->
            <!--sum+=count;-->
            <!--count++;-->
            <!--}-->
            <!--console.log(sum);-->


        var sum2=0;
        for (var i=0;i<101;i++){
            sum2+=i;
            }
            console.log(sum2);

            //break退出整個循環,continue退出當次循環
    </script>

</head>
<body>

</body>
</html>
View Code

七 字符串對象

技術分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var s="hello world";
    // console.log(s.length);

        console.log(s.charAt(4));
        console.log(s.lastIndexOf("l"));
        console.log(s.indexOf("l"));

        console.log(s.substr(3,4));  // lo w
        console.log(s.substring(3,4));  // l  顧頭不顧尾

        console.log(s.concat(" egon"));
    </script>
</head>
<body>

</body>
</html>
View Code

JavaScript筆記一