前端之JavaScript笔记1

一 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
原文地址:https://www.cnblogs.com/fangjie0410/p/7301114.html