JS函数与对象

最新推荐文章于 2022-06-30 10:28:00 发布

weixin_44949447

最新推荐文章于 2022-06-30 10:28:00 发布

阅读量62

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_44949447/article/details/125495617

版权

引入方式

内部式：body→script

<body>
    <script></script>
</body>

外部式：（使用最多）后缀名为js的文件

<link rel="stylesheet" href="">
<script src="./js基础.js"></script>

行内式

变量

变量就是一个装东西的盒子，通俗的来说，变量就是存放数据的容器。我们通过变量名获取数据，甚至可以修改数据。
声明变量

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="./js基础.js"></script>
</head>
<body>
    <script>
        // 声明关键字 变量名称=变量值；
        var name = 'jack';
        var age = 18;
        // 之所以称为变量，是因为这个值存进去后，是可以进行修改的，可以变化的
        console.log(name);
        console.log(age);
    </script>
</body>
</html>

数据类型

分为简单数据类型和复杂数据类型

number数字类型 boolean布尔来信 string字符串 undefined未定义 null空

分支语句、条件判断

if(){代码块}

else if()

{代码块}

<!DOCTYPE html>
<html lang="en">
<head>

    <script src="./js基础.js"></script>
</head>
<body>
    <script>
 
        var name = 'jack';
        var age = 18;

        console.log(name);
        console.log(age);

// if的括号内，就是对条件的半段，括号内的值只能是布尔值
            if(age>19){
                console.log('可以上网')
            }
    </script>
</body>
</html>

if语句

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="./JS基础.js"></script>
</head>

<body>
    <script>
    
        // 3.分支语句/条件判断
        /**
         * if(){
         * 代码块
         *      }else if(){
         * 代码块
         *      }else{
         * 代码块
         * }
       
         */
        // if的括号内，就是对条件的判断，括号内的值只能是布尔值
        // 在if 条件判断的 代码块中，如果满足其中一个条件，只会选择执行一个代码块，然后结束条件判断语句
        // if 的使用场景为在范围性的内容判断时使用
        // 第一种
         if (age >= 18) {
            console.log('这是第一个条件判断');
            console.log('年龄达到，可以上网');
        }
        // // 第二种
        if (age >= 18) {
           console.log('这是第二个条件判断');
           console.log('年龄达到，可以上网');
        } else {
             console.log('这是第二个条件判断');
            console.log('年龄不足， 不能进');
        }
        // // 第三种
        if (count > 90) {
            console.log('成绩优秀');
        } else if (count > 60) {
            console.log('成绩合格');
      } else {
            console.log('成绩不合格');
         }


    </script>
</body>

</html>

switch语句

是在有特定或者固定值的时候来使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./JS基础.js"></script>
</head>

<body>

    <script>

         var key = prompt('请选择');
         console.log(typeof (key));
         switch (parseInt(key)) {
             case 1:
                 console.log('吃面条');
                 break;
            case 2:
                 console.log('吃盖饭');
                 break;
             case 3:
                 console.log('吃抄手');
                 break;
             case 4:
                 console.log('吃火锅');
                 break;

             default:
                 console.log('啥都不吃了');
                 break;
         }

  
    </script>
</body>

</html>

函数/方法

封装执行的代码块或者利于重复调用的代码块，可实现复用,提高代码利用率，减少冗余代码

创建方式

① function name(){代码块}

②匿名函数

var name = function(){代码块}

声明方式 function关键字方法名(){}

<body>

    <script>
var num = ['刘备', '关羽', '张飞', '马超', '赵云', '黄忠', '诸葛亮'];
        var count = [1, 2, 3, 4, 5, 6, 7, 8];

       function person() {
            for (var i = 0; i < num.length; i++) {
               console.log(num[i]);
            }
         }

         person();
        // 函数括号内没有变量，则这是一个无参函数，若有变量，则是带参函数

       // one 在此刻为 形参 ，在声明时候使用
         var person = function (one) {
             for (var i = 0; i < one.length; i++) {
                 console.log(one[i]);
             }
         }

        //在调用函数时候，传入的参数称为 实参 
         person(num);
        person(count);
 </script>

</body>

用于计算的函数

<body>

    <script>
function getSum(a, b) {
             var sum = 0;
             sum = a + b;

             console.log(sum);
         }

         var num1 = prompt('请输入数字1');
         var num2 = prompt('请输入数字2');

         getSum(parseInt(num1), parseInt(num2));
  </script>

</body>

对象

对象属于复杂数据类型

属性方法

创建方式

①字面量创建

var star = {

属性名：属性值,

方法名:函数(){}

}

②new 关键字

var name = new Object();

name.属性名 = 值;

name.方法名 = 函数(){

③构造函数创建

function Person(name,age,gender){

this.name = "jack";

this.age = 15;

this.gender = male;}

var jack = new Person;};

创建一个实例对象

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
 function Person(name1, age1, gender1) {
            // 下方 第一个 name是该对象的属性， 第二个name是该函数的形参
            this.name = name1;
            this.age = age1;
            this.gender = gender1;
        }

        // 创建一个实例对象
        var jack = new Person('jack', 28, 'male');
        var Rose = new Person('Rose', 25, 'Female');
        console.log(jack);
        console.log(Rose);
        console.log(Rose.name);





        // var person = new Object();
        // person.name = '王五';
        // person.age = 28;
        // person.run = function () {
        //     console.log('我能跑路');
        // }
        // console.log(person);



        // var people = {
        //     name: '张三',
        //     gender: 'male',
        //     age: 38,
        //     eat: function () {
        //         console.log('我可以吃饭了');
        //     },
        //     sleep: function () {
        //         console.log('我可以睡觉了');
        //     }
        // }

        // console.log(people);

        // people.name = '李斯';

        // console.log(people.name);
        // console.log(people.eat());
    </script>

</body>

weixin_44949447

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS函数与对象

数据类型分为简单数据类型和复杂数据类型number数字类型 boolean布尔来信 string字符串 undefined未定义 null空 if(){代码块} else if() {代码块}if语句 switch语句是在有特定或者固定值的时候来使用函数/方法封装执行的代码块或者利于重复调用的代码块，可实现复用,提高代码利用率，减少冗余代码① function ...
复制链接

扫一扫