JavaScript-DAY3学习笔记

1.for语句

1.1for语句的基本使用

语法:

for(变量起始值;终止条件;变量变化量){
//循环体
}

案例-输出1-100

  <script>
    for (let i = 1; i <= 100; i++) {
      document.write(`${i}<br>`)
    }
  </script>

案例-求1-100的偶数和

  <script>
    let sum = 0;
    for (let i = 0; i <= 100; i++) {
      if (i % 2 === 0) {
        sum += i
      }
    }
    alert(sum)
  </script>

案例-遍历数组

  <script>
    let arr = ['ok', 'fine', '6', 'shark', '大头']
    for (let i = 0; i < arr.length; i++) {
      console.log(arr[i])
    }
  </script>

注:

  • for(;;)构造无限循环
  • for和while循环的区别:当明确循环次数时推荐用for;当不明确循环次数的时候推荐使用while循环

1.2循环嵌套

语法

for(外部声明记录循环次数的变量;循环条件;变化值){

for(内部声明记录循环次数的变量;循环条件;变化值){
//循环体
}

}

案例-打印5行5列星星

  <script>
    for (let i = 1; i <= 5; i++) {
      for (let j = 1; j <= 5; j++) {
        document.write('★')
      }
      document.write(`<br>`)
    }
  </script>

案例-打印倒三角星星

  <script>
    for (let i = 1; i <= 5; i++) {
      for (let j = 1; j <= i; j++) {
        document.write(`☆`)
      }
      document.write(`<br>`)
    }
  </script>

案例-九九乘法表

  <script>
    for (let i = 1; i <= 9; i++) {
      for (let j = 1; j <= i; j++) {
        document.write(`<span>${j}*${i}=${i * j}</span>`)
      }
      document.write(`<br>`)
    }
  </script>

2.数组

2.1数组是什么

数组是一种可以按顺序保存数据的数据类型

2.2数组的基本使用

声明数组:

  • 字面量声明数组
let 数组名 = [数据1,数据2,数据3,···,数据n]
  • 使用new Array 构造函数声明

取值语法:

数组名[下标]

遍历数组:

for(let i = 0; i<数组名.length;i++){
         数组名[i]
}

2.3操作数组

案例-数组求和

  <script>
    let arr = [1, 3, 6, 4, 9, 7]
    let sum = 0
    for (let i = 0; i < arr.length; i++) {
      sum += arr[i]
    }
    alert(`和为${sum},平均值为${sum / arr.length}`)
  </script>

案例-数组最大值最小值

  <script>
    let arr = [81, 26, 54, 79, 28, 34, 23]
    let max = arr[0]
    let min = arr[0]
    for (let i = 1; i < arr.length; i++) {
      max < arr[i] ? max = arr[i] : max
      min > arr[i] ? min = arr[i] : min
    }
    alert(`最大值为${max},最小值为${min}`)
  </script>
</body>

2.2 操作数组

查询:数组[下标]

重新赋值:数组[下标]=新值

数组添加新的数据:

  • 数组.push(新增内容) :一个添加到数组末尾,并返回该数组的新长度       
  • 数组.unshift(新增内容):一个或多个元素添加到数组开头,并返回数组的新长度

案例-数组筛选(从数组中筛选大于等于10的元素放入到新数组中)

  <script>
    let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    let newArray = []
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] >= 10) {
        newArray.push(arr[i])
      }
    }
    console.log(newArray);
  </script>

删除数组中数据:

  • 数组.pop() :删除最后一个元素,返回删除元素的值      
  • 数组.shift():删除第一个元素,返回删除元素的值 
  • 数组.splice(起始位置-索引号,删除几个元素):删除指定元素 

 3.综合案例--根据数据生成柱状图

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            width: 700px;
            height: 300px;
            border-left: 1px solid pink;
            border-bottom: 1px solid pink;
            margin: 50px auto;
            justify-content: space-around;
            align-items: flex-end;
            text-align: center;
        }

        .box>div {
            display: flex;
            width: 50px;
            background-color: pink;
            flex-direction: column;
            justify-content: space-between;
        }

        .box div span {

            margin-top: -20px;
        }

        .box div h4 {
            margin-bottom: -35px;
            width: 70px;
            margin-left: -10px;
        }
    </style>
</head>

<body>
    <script>
        //4次输入放到一个数组中
        let fourSeasons = []
        for (let i = 1; i <= 4; i++) {
            fourSeasons.push(prompt(`请输入第${i}个季度的数据`))
        }
        // console.log(fourSeasons);
        //遍历数组,根据数据生成4个柱状图,渲染打印到页面中
        document.write(`<div class="box">`)
        for (let i = 0; i < fourSeasons.length; i++) {
            document.write(`
            <div style="height: ${fourSeasons[i]}px;">
            <span> ${fourSeasons[i]}</span>
            <h4>第${i + 1}季度</h4>
            </div>
        `)
        }
        document.write(`</div>`)

    </script>
</body>

</html>

  • 12
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值