前端学习-js基础-day_1

@TOC

一、预解析案例

 <script>
         // 预解析案例
            // 案例1
        // var num = 10;
        //     fun();
        //     function fun() {
        //         console.log(num);
        //         var num = 20;
        //     }

        // 案例2
        // var num = 10;
        // function fn() {
        //     console.log(num);
        //     var num = 20;
        //     console.log(num);
        // }
        // fn();

        // 案例3
        // var a = 18;
        // f1();
        // function f1() {
        //     var b = 9;
        //     console.log(a);
        //     console.log(b);
        //     var a = '123';
        // }

        // 案例4
        f1();
        console.log(c);
        console.log(b);
        console.log(a);
        function f1() {
            var a = b = c = 9;
            // 相当于var a=9;b=9;c=9;  b 和 c 直接赋值 没有var 声明 当 全局变量看
            console.log(a);
            console.log(b);
            console.log(c);
        }

二、利用对象字面量创建对象

<script>
        // 利用对象字面量创建对象
        // var obj={}  //创建了一个空的对象
        var obj = {
            uname: '张三丰',
            age: 18,
            sayHi: function () {
                console.log('hi~');
            }
        }
        console.log(obj.uname);
        console.log(obj['age']);
        obj.sayHi();
    </script>

三、练习-请按照要求写出对象

 <script>
        var theDog = {
            name: ' keke',
            type: 'alasija',
            age: 5,
            color: 'brownish - red',
            skill: function () {
                console.log('bark');
                console.log('showFilm');
            }


        }
        console.log(theDog.name);
        theDog.skill();
    </script>

四、利用new Object创建对象

 <script>
        var obj = new Object();
        obj.uname = '张三丰';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function () {
            console.log('hihi');
        }
        console.log(obj.uname);
        console.log(obj['sex']);
        obj.sayHi();
    </script>

五、练习-利用new Object创建对象

<script>
        var obj = new Object();
        obj.uname = '名人';
        obj.sex = '男';
        obj.age = 19;
        obj.skill = function () {
            console.log('影分身术');
        }
        console.log(obj.uname);
        obj.skill();
    </script>

六、利用构造函数创建对象

<script>
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;

            this.sing = function (sang) {
                console.log(sang);
            }

        }
        var ldh = new Star('刘德华', 18, '男');
        console.log(typeof ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨');
        var zxy = new Star('张学友', 20, '男');
        console.log(zxy.name);
        console.log(zxy['age']);
        zxy.sing('李香兰')
    </script>

七、练习利用构造函数创造对象

 <script>
        function Hero(uname, type, blood) {
            this.name = uname;
            this.type = type;
            this.blood = blood;
            this.attack = function (atck) {
                console.log(atck);

            }
        }
        var lp = new Hero('廉颇', '力量型', '500血量');
        var hy = new Hero('后羿', '射手型', '300血量');

        console.log(lp.name);
        console.log(lp['blood']);
        lp.attack('近战');
        console.log(hy.name);
        console.log(hy['blood']);
        lp.attack('远程');

    </script>

八、遍历对象

 <script>
        function Hero(uname, type, blood) {
            this.name = uname;
            this.type = type;
            this.blood = blood;
            this.attack = function (atck) {
                console.log(atck);

            }
        }
        var lp = new Hero('廉颇', '力量型', '500血量');
        for (var k in lp) {
            console.log(k);
            console.log(lp[k]);
        }
    </script>

九、练习做一个简易计算器

   <script>
        var tips = '欢迎使用简易计算器：\n1.加法运算：\n2.减法运算：\n3.乘法运算：\n4.除法运算：\n5.退出；\n请输入您的选项'
        var sel = prompt(tips);
        var num1;
        var num2;
        function num() {
            num1 = parseFloat(prompt('请输入第一个值'));
            num2 = parseFloat(prompt('请输入第二个值'));
        }

        if (sel == 1) {
            num();
            alert(num1 + num2);
        }
        if (sel == 2) {
            num();

            alert(num1 - num2);
        }
        if (sel == 3) {
            num();

            alert(num1 * num2);
        }
        if (sel == 4) {
            num();

            alert(num1 / num2);
        }
        if (sel == 5) {
            alert('欢迎下次使用');
        }




    </script>
运行结果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/2b9b9a2e622d4376972ec90cdc38e264.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c92c69ee81dd4c308164ab760e488746.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/7327cae632fe469988001b951b6705bb.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f8aed5fdda064ca5bc39a6e92209b8a3.png)