js从零开始第5天

最新推荐文章于 2024-08-04 16:33:59 发布

summerDreams

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量288

点赞数 1

分类专栏： js 文章标签：对象 javascript

本文链接：https://blog.csdn.net/shiyujie0822/article/details/53468703

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天给大家讲解一下js的一些基础知识，顺便巩固一下之前学的。今天会讲js的变量，数据类型，注释，对象，函数，东西比较多，所以大家要认真看一下。OK直接贴代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <span id="test">和夏天一起学JS 第5天</span>
        <button type="button" onclick="test('summer')">点我</button>

        <script type="text/javascript"> 

            function test(name){
                //数字类型
                var x=1,c=3,d=4;
                console.log(x,c,d);
                //字符串类型
                x="s";
                console.log(x);
                //布尔类型
                x=true;
                console.log(x);
                //数组类型
                x=["111","222"];
                console.log(x);
                //对象类型
                x={ names:"summer",
                    age:20,
                    test:function(){
                        //将当前对象的名字和年龄返回
                        return this.names+"  "+this.age;
                    }
                };
                //打印对象的test方法
                console.log(x.test());
                //打印对象的test属性
                console.log(x.test);
                alert(name);
                x=returnF(2,3);

            }

            function returnF(a,b){
            //          alert(name);
                var x=a*b;
                return x;
            }
        </script>
    </body>
</html>

直接运行，打开谷歌debug模式（F12），点击按钮。

OK，先不点确定我们来看代码。

            function test(name){
                //数字类型
                var x=1,c=3,d=4;
                console.log(x,c,d);
                //字符串类型
                x="s";
                console.log(x);
                //布尔类型
                x=true;
                console.log(x);
                //数组类型
                x=["111","222"];
                console.log(x);
                //对象类型
                x={ names:"summer",
                    age:20,
                    test:function(){
                        //将当前对象的名字和年龄返回
                        return this.names+"  "+this.age;
                    }
                };
                //打印对象的test方法
                console.log(x.test());
                //打印对象的test属性
                console.log(x.test);
                alert(name);
                x=returnF(2,3);
                alert(x);
            }

            function returnF(a,b){
                //          alert(name);
                var x=a*b;
                return x;
            }
        </script>

首先这是个button的绑定事件，还是一个带参数的，onclick="test('summer')" 传了一个字符串，然后我在下面用了一个变量来接收这个’summer’字符串 function test(name){....} name就是我声明的变量而且是个局部变量，我们可以测试一下 // alert(name); 这里我注释了一句话，解除注释我们试一下，注释语句是可以阻止执行的，我们在另外一个function中alert一下这个name看看是否可以获取到。
刷新一下页面，点击按钮，点击确定，再点确定

这是个空说明name不是全局变量。由于他的代码是一句一句从上往下执行的，所以可以确定第二个弹出框是我们需要显示name，

alert(name);
x=returnF(2,3);
alert(x);

这边第一个alert 把当前这个name变量显示了。所以显示了summer可以看图一，
然后x=returnF(2,3); 这也是带参方法调用了下面的事件，这个事件里面有个alert(name)
这个alert就是把name这个全局变量找出来，但是我们并没有找到name这个全局变量，所以我们可以确定 function test(name){....} 这个name是个局部变量。
OK继续往下说，我们继续把returnF()这个function里面的alert(name) 注释掉，刷新一下，点击按钮，点击确定，OK先别动继续看。

这步的弹出框其实上面也是讲过了。
x=returnF(2,3); alert(x);
带参方法将返回的值放进x 这个变量里面，讲解一下里面的方法，上一章已经讲过了但是还是继续再讲一次。

function returnF(a,b){
    //          alert(name);
        var x=a*b;
        return x;
    }

将传过来的值放入a，b两个变量里面。做了一个简单地运算，然后放入声明的局部变量 x （这个x 只有当前方法能访问到。）里面，然后将值return回去。
OK继续往下讲，回到页面点击确定，看控制台。

这边是对应打印的值，

                //数字类型
                var x=1,c=3,d=4;
                console.log(x,c,d);
                //字符串类型
                x="s";
                console.log(x);
                //布尔类型
                x=true;
                console.log(x);
                //数组类型
                x=["111","222"];
                console.log(x);
                //对象类型
                x={ names:"summer",
                    age:20,
                    test:function(){
                        //将当前对象的名字和年龄返回
                        return this.names+"  "+this.age;
                    }
                };
                //打印对象的test方法
                console.log(x.test());
                //打印对象的test属性
                console.log(x.test);

都对应添加了注释，var x=1,c=3,d=4; 这句话主要是为了让大家知道var 是声明变量的关键词，而且可以一次性声明多个变量。

                x="s";
                console.log(x);
                //布尔类型
                x=true;
                console.log(x);
                //数组类型
                x=["111","222"];
                console.log(x);
                //对象类型
                x={ names:"summer",
                    age:20,
                    test:function(){
                        //将当前对象的名字和年龄返回
                        return this.names+"  "+this.age;
                    }
                };

这几句话是想说明每个变量都是有动态类型的，可以改变里面的值所对应不同的类型。

                //对象类型
                x={ names:"summer",
                    age:20,
                    test:function(){
                        //将当前对象的名字和年龄返回
                        return this.names+"  "+this.age;
                    }
                };
                //打印对象的test方法
                console.log(x.test());
                //打印对象的test属性
                console.log(x.test);

这个重点是后面两句console 打印的内容
这里写图片描述
test()代表x 这个对象里面的test()这个方法，所以他会打印这个方法返回的东西。
而x.test 则是直接打印test这个属性，把里面的内容当成了字符串来打印出来。
OK今天讲的东西比较多比较杂，希望大家多看一下，然后多写一下！

summerDreams

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js从零开始第5天

今天给大家讲解一下js的一些基础知识，顺便巩固一下之前学的。今天会讲js的变量，数据类型，注释，对象，函数，东西比较多，所以大家要认真看一下。OK直接贴代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <sp
复制链接

扫一扫