JavaScript基础第四天有感

第一天相关知识

js有三种书写方式 : 

1.内部样式

2.外部样式

3.行内样式

js的相关输出语法 : 

1.在页面上输出内容,在页面可以输出标签   document.write()

2.在浏览器弹窗   alert()

3.在控制台打印   console.log()

4.弹窗使用户输入内容   prompt()

变量相关

1.使用变量需要先定义一个变量

然后给它赋值 就可以将这个变量输出

let age
age = 18
let height = 170
console.log(height,age)

控制台输出多个数据 , 中间用逗号隔开

2.变量的交互

我们可以准备一个临时变量 利用这个临时变量达到交互的目的

let jj = '不死战神道友明'
    let xhz = '忠肝义胆多隆'
    // 准备一个临时变量
    let temp = jj
    // console.log(temp)

    // 把xhz的数据赋值给jj
    jj = xhz
    // console.log(jj)

    // 把temp的数据赋值给xhz
    xhz = temp
    console.log(jj,xhz)

3.字符串相关

只要是'' "" `` 包裹起来的内容都是字符串

字符串拼接  +

加号两边只要有一个字符串,加号就是拼接符

加号两边都是数字类型是加运算

console.log('我叫' + '吴彦祖') //我叫吴彦祖
        console.log(12 + 3) //15
        console.log('我今年' + 23) //我今年23
        console.log('12' + 23) //1223

拓展 (检测数据类型)  :

    <script>
        console.log(typeof 12)//number 数字类型
        console.log(typeof '行侠')//string 字符串类型
        console.log(typeof true)//boolean 布尔类型
        let a
        console.log(typeof a)//undefined 未定义类型

        let age = prompt('请输入您的年龄')
        console.log(typeof age)//string 字符串类型
        console.log(`五年以后俺${age + 5}岁了`)//xx5岁了
    </script>

拓展 (隐式转换)  :  

-  *  /  %都会把两边转换为数字类型进行运算

+数据 转为数字类型

    console.log(typeof+"2") //number
    let age = prompt('请输入您的年龄')
    console.log(typeof age)
    console.log(+age+5)

第二天相关知识

if分支语句

1.单分支语句

if(条件) {

         条件为true执行的代码

         条件为false不执行

         }

''  0  undefined null NaN  转布尔类型1为false 其他全部转为true

if (条件)  如果条件不是布尔类型 会隐式转换为布尔类型

2.双分支语句

if(条件) {

         条件为true执行该处代码

            }    else {

         条件为false执行该处代码

            }

<script>
// 用户输入 用户名:pink 密码:123456 则提示登陆成功 否则提示登陆失败
// 1.用户
        let user = prompt('请输入用户名')
        let pwd = prompt('请输入密码')
// 2.分支语句
        if (user === 'pink' && pwd === '123456') {
            alert('登陆成功')
        } else {
            alert('登陆失败')
        }
</script>

我们可以拓展一个小案例来加深印象  :  

    <script>
        // 找真 找到条件为true得 执行代码 后面的不执行
        // if(条件1) {
        // 条件1为true,执行该处代码,后面的代码不执行
        // } else if (条件2) {
        // 条件2为true,执行该处代码,后面的代码不执行
        // } else if (条件3) {
        // 条件3为true,执行该处代码,后面的代码不执行
        // } else {
        // 如果以上条件都为false,执行该处代码
        // }

        // 1.输入成绩
        let score = + prompt('请输入成绩')
        // 2.分支语句 多个分支 最终只会执行一个分支
        if (score > 90) {
            alert('非常牛逼')
        } else if (score > 70) {
            alert('有点牛逼')
        } else if (score > 60) {
            alert('一般牛逼')
        } else {
            alert('不太牛逼')
        }
    </script>

switch选择语句

    <script>
        // 根据输入的年龄 弹框用户喜欢的内容
        let love = prompt('请输入您的年龄')
        switch (like) {
            case '10':
                alert('钱')
                break   //阻断代码向下执行
            case '20':
                alert('钱钱')
                break   //阻断代码向下执行
            case '30':
                alert('钱钱钱')
                break   //阻断代码向下执行
            case '40':
                alert('钱钱钱钱')
                break   //阻断代码向下执行
            // 如果前面的数据和case得值都不全等 则执行default
            default:
                alert('钱钱钱钱钱')
        }
    </script>

while循环

我们需要先设置一个变量的起始值   :   let i = 1

然后需要终止条件   :   i <= 3

    while (i <= 3) {
        // 每循环一次 就去再看条件 条件为true 继续循环 条件为false 循环结束
        alert(`我是第${i}次循环`)
        // 变量的变化值
        i++
    }

拓展 (continue和break退出循环)

continue 跳过本次循环 下次循环继续 continue 下面的代码不执行

break 结束当前循环 break下面的代码不执行

第三天相关知识

for循环相关知识点

1.   for(循环开始值;循环条件;计数器) {

         循环体

      }

循环次数已知的 用for循环方便 循环未知的 用while方便

打印一个五行五列的小星星可以这么写

<script>
    // 打印五行 每一行五颗星星
    // 一行五颗星星
    // 外层循环控制的是行数
    for (let j = 1; j <= 5; j++) {
        // 里层循环控制的是每一行星星的个数
        for (let i = 1; i <= 5; i++) {
            document.write('★')
        }
        // 每行换行
        document.write('<br>')
    }
</script>

数组相关

1.数组求和

我们可以准备一个空的数组   用来保存累加和的结果 然后遍历数组

        for (let i = 0; i < arr.length; i++) {
            sum = sum + arr[i]
        }

将每次加的结果存到sum里面

arr.length 数组的长度 数组里面元素的个数

将数组的总和与数组的长度相除 我们就可以得到数组的平均值

2.求数组的最大值与最小值

    <script>
        let arr = [2, 6, 1, 7, 400, 55, 88, 100]
        // 假设max(数组里面的第一个元素)是最大值
        let max = arr[0]
        // 假设min(数组里面的第一个元素)是最小值
        let min = arr[0]
        for (let i = 1; i < arr.length; i++) {
            // 如果后面的元素比max打 则把后面的元素存到max里面去
            // if (arr[i] > max) {
            //     max = arr[i]
            // }
            // if (arr[i] > max) max = arr[i]
            arr[i] > max ? max = arr[i] : max
            arr[i] < min ? min = arr[i] : min
        }
        alert(`最大值是${max},最小值是${min}`)
    </script>

3.数组的 增,删,改,查

增  :  arr.push() 向数组最后面增加新的元素

         数组名 .unshift()像数组最前面增加新的元素

删  :  数组名.pop() 删除数组里面的最后一个元素

         数组名.shift() 删除数组里面第一个元素

         数组名(下标值,删除的个数)

         例  :  arr.splice(1,3)

         数组名.splice(数字) 只写一个值 从当前索引开始 后面的全删除

改  :  数组名[下标] = 值

查  :  查询(访问)数组元素 数组名[下标]

4.数组筛选例子

    <script>
        // 重点案例
        let arr = [2, 0, 6, 1, 77, 9, 54, 3, 78, 7]
        // 定义新数组 用来存放大于10的元素
        let newArr = []
        // 遍历旧数组
        for (let i = 0; i < arr.length; i++) {
            // 大于等于10的元素筛选出来
            if (arr[i] >= 10) {
                // 大于等于10的老数组的元素追加到新数组里面去
                newArr.push(arr[i])
            }
        }
        console.log(newArr)
    </script>

结合第三天相关知识点 我们可以完成一个用户输入案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        ul {
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
            width: 600px;
            height: 300px;
            border-left: 1px solid pink;
            border-bottom: 1px solid pink;
            margin: 100px auto;
        }

        li{
            position: relative;
            top: 41px;
            width: 40px;
            text-align: center;
        }

        p {
            background-image: linear-gradient(red,blue);
        }

        h3 {
            white-space: nowrap;
            text-indent: -10px;
            height: 40px;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <!-- <ul>
        <li>
            <div>13</div>
            <p style="height: 13px;"></p>
            <h3>第1季度</h3>
        </li>
        <li>
            <div>26</div>
            <p style="height: 26px;"></p>
            <h3>第2季度</h3>
        </li>
        <li>
            <div>35</div>
            <p style="height: 35px;"></p>
            <h3>第3季度</h3>
        </li>
        <li>
            <div>46</div>
            <p style="height: 46px;"></p>
            <h3>第4季度</h3>
        </li>
    </ul> -->

    <script>
        // 创建一个空数组 用来存放用户输入的数据
        let arr = []
        // 循环将输入的数据存入到数组里面
        for (let i = 1; i <= 4; i++) {
            arr.push(prompt(`请输入第${i}季度的数据`))
        }
        // console.log(arr)
        document.write('<ul>')
        // 遍历打印li标签
        for (let x = 0; x <arr.length; x++) {
            document.write(`
            <li>
            <div>${arr[x]}</div>
            <p style="height:${arr[x]}px;"></p>
            <h3>第${x+1}季度</h3>
        </li>
            `)
        }
        document.write('</ul>')
    </script>
</body>

</html>

第四天相关知识

函数

1.函数的基本使用

首先声明一个函数  :  

function 函数名() {

   函数体

}

函数调用 : 函数名() 函数不调用不执行 调用才执行 函数可以多次调用 调用一次 就执行一次函数体代码

2.函数参数

function 函数名 (形参1,形参2) {

     函数体

}

函数名(实参1,实参2)

// 声明函数的时候,()里面的是形参 形式上的参数

// 调用函数的时候,()里面的是实参 实参会赋值给形参

(实参是可以任意类型的数据)

现要求  :  求n-m之间的和 封装成函数

可用如下写法  :  

<script>
        let n = +prompt('请输入第1个数')
        let m = +prompt('请输入第2个数')

        function getTotal(q, w) {
            let sum = 0
            for (let i = q; i <= w; i++) {
                sum += i
            }
            alert(sum)
        }

        getTotal(n, m)
</script>

3.函数的返回值

返回值是函数处理的结果返回给函数调用

如果元素只是在函数里面打印 结果还在函数里面 没有到函数外面

    <script>
        function fn(x) {
            let a = 2 + 3
            console.log(a)
            return a
            alert('针不戳')
        }

        // 相当于 return 后面的值 赋值给了fn() fn使用函数调用后就是 fn() = a

        console.log(fn(9) + 3)
    </script>

★函数没有返回值 或者return后面没有数据 函数返回值默认undefined

★函数体里面 return下面的代码不执行 return后面的数据不要换行写

4.函数的极值

    <script>
        // 求任意数组中的最大值并返回这个最大值
        function getMax(arr = []) {
            // 假设数组里面第一个元素是最大值
            let max = arr[0]
            let min = arr[0]
            for (let i = 1; i < arr.length; i++) {
                // 如果max比后面的元素小 则把后面的元素赋值给max
                if (max < arr[i]) {
                    max = arr[i]
                }
                if (min > arr[i]) {
                    min = arr[i]
                }
            }
            return [max, min]
        }

        let sum1 = getMax([12, 23, 3, 4, 9])
        console.log(`函数的最大值是${sum1[0]},函数的最小值是${sum1[1]}`)
    </script>

5.函数的部分细节

函数名相同 后面覆盖前面

参数不匹配 形参和实参个数不相等

     (★形参多 多余的形参默认值undefined)

     (★实参多 多余的实参没有形参接受 被忽略)

return 和 break 的区别

     break   结束当前循环

     return   函数里面执行到return 整个函数结束执行

6.作用域

全局变量 : 生效范围是js代码部分 在任何范围和区域都可以范围和修改

局部变量 : 只在函数里面访问和生效

    <script>
        function fn1() {
            let a = 20
        }
        console.log(a)   // 报错
    </script>

7.立即执行函数

    立即执行函数 避免全局变量污染

    (匿名函数)();

    (function(a){console.log('立即执行函数方法1')})();

    (匿名函数());

    (function(){console.log('立即执行函数方法2')}());

8.拓展

变量的特殊情况  :  

变量没有声明 直接赋值 也是全局变量 不推荐

函数的形参可以当局部变量来看待 函数外面不能访问

函数表达式  :  

匿名函数表达式调用 必须写在后面

具名函数 调用顺序在函数前面后面都可以

完成一个用户输入秒数 我们转化为时分秒的小案例来巩固今天的记忆  

    <script>
        // 用户输入总秒数
        let seconds = +prompt('请输入总的秒数')
        // 函数   参数   功能   返回值
        function getTime(t) {
            // 处理秒
            let s = parseInt(t % 60)
            // if (s < 10) {
            // s = '0' + s
            // }
            // 补0操作
            s = s < 10 ? '0' + s : s
            // 处理分
            let m = parseInt(t / 60 % 60)
            // 补0操作
            m = m < 10 ? '0' + m : m
            // 处理小时
            let h = parseInt(t / 60 / 60 % 24)
            // 补0操作
            h = h < 10 ? '0' + h : h
            return `${h}:${m}:${s}`
        }

        let res = getTime(seconds)
        document.write(res)
    </script>