【零基础】学JS

news2024/10/7 17:24:23

喝下这碗鸡汤

“知识就是力量。” - 弗朗西斯·培根

1.三元运算符

目标:能利用三元运算符执行满足条件的语句

使用场景:其实是比if双分支更简单的写法，可以使用三元表达式

语法：条件 ? 满足条件的执行代码 : 不满足条件执行的代码

接下来用一个小案例来展示三元运算符

   <script>
        //1.用户输入
        let num = +prompt('请输入一个数字:')
        //2.判断输出  小于10才补0
        num = num < 10 ? '0' + num : num
        alert(num)

    </script>

2.断点调试

2.1为什么要进行断点调试?

学习可以使用帮助更好的理解代码运行，工作时可以更快找到BUG

2.2如何使用断点调试?

1.按F12打开开发者工具

2.点sources一栏

3.选择代码文件

 <script>
        let num = 18
        num = num + 1
        console.log(num)

    </script>

在console.log(num)打一个断点，刷新页面 num就会变成18啦如果num加1，所以程序正确。

3.简易ATM取款机案例

需求:用户可以实现存钱，取钱，查看余额和退出功能

分析:

1.循环的时候，需要反复提示输入框，所以提示框写到循环里面

2.退出的条件是用户输入了4，如果是4，循环结束，不再弹窗

3.提前准备一个金额先存储一个金额

4.取钱则是减法操作，存钱则是加法操作，查看余额则是直接显示金额

5.输入不同的值,可以使用switch来执行不同的操作

<body>

    <script>
        //1. 开始循环
        //3. 准备一个总金额
        let money = 100
        while (true) {
            let re = +prompt(`
                请你选择操作:
                1.存钱
                2.取钱
                3.查看余额
                4.退出
                `)
            //2. 如果用户输入的是4，退出循环 break
            if (re === 4) {
                break
            }
            //4. 根据输入做操作
            switch (re) {
                case 1:
                    //存钱
                    let cun = +prompt('请输入存款金额:')
                    money += cun
                    break
                case 2:
                    let qu = +prompt('请输入取款金额:')
                    money -= qu
                    break

                case 3:
                    alert(`您的银行卡余额是:${money}`)
                    break
            }
        }


    </script>

</body>

4.为什么需要函数?

函数:
function，是被设计为执行特定任务的代码块
函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用
比如我们前面使用的 alert()、prompt()和 console.log() 都是一些is 函数，只不过已经封装好了，我们直接使用的。

5.函数的使用

函数的语法声明:

function 函数名() {
     函数体
}

函数名命名规范

1.和变量命名基本一致尽量小驼峰式命名法
2.前缀应该为动词
3.命名建议:常用动词约定

接下来我们来写两个小案例吧~

需求:
1.封装一个函数，计算两个数的和

 function getSum() {
            let num1 = +prompt('请输入第一个数字:')
            let num2 = +prompt('请输入第二个数字:')

            console.log(num1 + num2)
        }

        getSum()

2.封装一个函数，计算1-100之间所有数的和

 <script>

        function getSum() {
            let sum = 0
            for (let i = 1; i <= 100; i++) {
                sum += i

            }
            console.log(sum)
        }
        getSum()

    </script>

6.函数传参

形参:声明函数时写在函数名右边小括号里的叫形参(形式上的参数)
实参:调用函数时写在函数名右边小括号里的叫实参(实际上的参数)
形参可以理解为是在这个函数内声明的变量(比如 num1=10)实参可以理解为是给这个变量赋值

7.函数的返回值

为什么需要返回值的?其实我们可以理解为当我用洗衣机洗衣服的时候，洗完衣服（函数执行完毕），我们需要拿衣服（也就是返回值），也可以理解为当我们买东西的时候，我们不希望买一件就显示多少钱，我们希望到了结算的时候才告诉我们多少钱，也就是说我们希望做到随时可以使用返回值。

细节:

在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
return 后面代码不会再被执行，会立即结束当前函数，所以return 后面的数据不要换行写return函数可以没有 return，这种情况函数默认返回值为 undefined

  <script>

        function fun() {
            return 20
        }

        //相当于执行 fun() 调用者 fun() = 20
        //console.log(fn())
        let re = fun()
        console.log(re)

    </script>