JavaScript基础学习

1.一元运算符

正负号，自增运算符

2.比较运算符

判断相等用===

字符串比较，比较的是ASC码

尽量不要比较小数，小数有精度

不同类型比较会有隐式转换

3.运算符优先级

4.分支语句

除了0，其余数字都是真。除了空字符串，其余字符串都是真。

案例：简易ATM取款机

<body>

  <script>
    let money = 100
    while (true) {
      let re = prompt(`
      请选择要进行的操作
      1.存钱
      2.取钱
      3.查看余额
      4.退出
      
      `)//这里需要用反引号，才能多行输出
      if (re === '4') {
        break;
      }
      switch (re) {
        case '1':
          let save = +prompt('请输入存钱金额')
          money = money + save
          break;
        case '2':
          let out = +prompt('请输入取钱金额')
          money = money - out
          break;
        case '3':
          alert(`账户余额还有${money}元`)
          break
        default:
          alert('输入的不对')
          break
      }
    }


  </script>


</body>

案例：乘法表

<head>
  <meta charset="utf-8">
  <title>练习</title>
  <style>
    span{
      display:inline-block;
      padding: 3px;
      border: 1px solid pink;
      margin: 3px;
      width: 100px;
      box-shadow: 2px 2px 2px rgba(255,192,203,.2);
      border-radius: 2px;
    }
  </style>
</head>

<body>

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


  </script>


</body>

</html>

undifined加上任何数都是NAN

5.数组

5.1新增

数组.push（）方法将一个或多个元素添加到数组末尾，并返回该数组新长度

arr.unshift（新增内容）在数组开头添加，返回数组新长度

5.2删除

arr.pop（）删除最后一个元素，并返回该元素的值

arr.splice（start，deleteCount）起始位置和删除几个元素常用

arr.shift（）不带参数，删除开头一个元素，返回是删除元素

案例渲染柱形图

<head>
  <meta charset="utf-8">
  <title>练习</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

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

    /*只会选取那些直接嵌套在.box元素内部的<div>元素，而不会选择那些嵌套在更深层级的<div>元素*/
    .box>div {
      display: flex;
      width: 50px;
      background-color: pink;
      flex-direction: column;
      /* 主轴是垂直方向 */
      justify-content: space-between;
      /* 两端的 flex 项紧贴容器的边缘，而中间的 flex 项之间有相等的空间 */

    }

    .box div span {
      margin-top: -20px;
      text-align: center;
    }

    .box div h4 {
      margin-bottom: -30px;
      width: 70px;
      margin-left: -5px;

    }
  </style>
</head>

<body>


  <script>
    let arr = []
    for (let i = 0; i < 4; i++) {
      arr.push(prompt(`请输入第${i + 1}季度数额`))
    }
    document.write(`<div class="box">`)
    for (i = 0; i < arr.length; i++) {
      document.write(`
      <div style="height: ${arr[i]}px;">
      <span> ${arr[i]} </span>
      <h4>第${i + 1}季度</h4>
      </div>
      `)
    }

    document.write(`</div>`)


  </script>


</body>

</html>

案例冒泡排序

<body>


  <script>
    /* 冒泡排序 */
    let arr = [2, 4, 1, 3, 5]
    for (let i = 0; i < arr.length - 1; i++) {
      for (let j = 0; j < arr.length - i - 1; j++) {
        if (arr[j] > arr[j + 1]) {
          let temp = arr[j]
          arr[j] = arr[j + 1]
          arr[j + 1] = temp
        }
      }
    }
    document.write(arr)


  </script>


</body>

开发中直接 arr.sort()进行排序升序

arr.sort(function (a, b) {

return a - b

}) 升序排序

降序b-a

6.立即执行函数

防止变量污染，很常用

(function(){

console.log(11)

})()；需要加分号了

7.逻辑中断

&&一假则假，都是真，返回最后一个真值

|| 一真则真，左边真，右边不执行

‘’-2=-2 空字符串当0看

undifined+3=NAN undifined作任何操作都是NAN

8.对象

遍历对象用 for（let k in obj）{} ，获得对象属性是k（字符串形式），获得对象的值是obj【k】

案例：渲染表格

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>练习</title>
  <style>
    table {
      text-align: center;
      width: 600px;
    }

    table,
    th,
    td {
      border: 1px solid #ccc;
      border-collapse: collapse;
    }

    caption {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    tr {
      height: 20px;
      cursor: pointer;
    }

    table tr:nth-child(1) {
      background-color: #ddd;
    }

    table tr:not(:first-child):hover {
      background-color: #eee;
    }
  </style>

</head>

<body>
  <h2>学生信息</h2>
  <p>将数据渲染到页面中</p>
  <table>
    <caption>学生列表</caption>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>家乡</th>

    </tr>

    <script>
      let student = [
        { name: '小明', age: 18, gender: '男', hometown: '河北省' },
        { name: '小红', age: 16, gender: '女', hometown: '河南省' },
        { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
        { name: '小丽', age: 15, gender: '女', hometown: '山东省' }

      ]
      for (let i = 0; i < student.length; i++) {
        document.write(`
         <tr>
          <td>${i+1}</td>
          <td>${student[i].name}</td>
          <td>${student[i].age}</td>
          <td>${student[i].gender}</td>
          <td>${student[i].hometown}</td>
         </tr>
        `)
      }
    </script>
  </table>

</body>

</html>

9.内置对象

js内部提供的对象，包含各种属性和方法

Math： Math.ceil（1.2）向上取整，math.floor（）向下取整，math.round（）四舍五入

math.max（1,4,9）取最大值，math.random（） 0-1随机数包括0不包括1，math.pow（2,3）2的3次方

null 是空对象


    <script>
      let arr=['赵云','黄忠','关羽']
      let random=Math.floor(Math.random()*arr.length)
      document.write(arr[random])
      arr.splice(random,1)
      document.write(`<br>`)
      document.write(arr)
    </script>

案例猜数字

 <script>
    function getRandom(M, N) {
      return Math.floor(Math.random() * (N - M + 1) + M)
    }
    let ran = getRandom(1, 10)
    while (true) {
      let num = +prompt('输入一个数字')
      if (num > ran) {
        alert('猜大了')
      } else if (num < ran) {
        alert('猜小了')
      } else {
        alert('猜对了')
        break
      }
    }
  </script>

案例随机颜色

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>练习</title>
  <style>
    div{
      height: 200px;
      width: 300px;
    }
  </style>


</head>

<body>
  <div></div>


  <script>
    function getRandomColor(flag=true){
      if(flag){
        let str='#'
        let arr=['0','1','2','3','4','5','6','7','8','9','a',
          'b','c','d','e','f'
        ]
        for(let i=0;i<6;i++){
          let data=Math.floor(Math.random()*arr.length)
          str+=arr[data]
        }
        return str

      }else{
        let r=Math.floor(Math.random()*256)
        let g=Math.floor(Math.random()*256)
        let b=Math.floor(Math.random()*256)
        return `rgb(${r},${g},${b})`

      }

    }
    const div=document.querySelector('div')
    div.style.backgroundColor=getRandomColor()
  </script>


</body>

</html>

案例渲染学习案例

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>练习</title>
  <link rel="stylesheet" type="text/css" href="test.css">

</head>

<body>
  <div class="box w">
    <div class="box-hd">
      <h4>精品推荐</h4>
      <a href="#">查看更多</a>
    </div>
    <div class="box-bd">
      <ul class="clearfix">

        <script>
          let data = [
            {
              src: 'JavaScript基础笔记和作业/JavaScript基础第五天/06-素材/综合作业素材/images/course01.png',
              title: 'Think PHP 5.0 博客系统实战项目演练',
              num: 1125
            },
            {
              src: 'JavaScript基础笔记和作业/JavaScript基础第五天/06-素材/综合作业素材/images/course02.png',
              title: 'Android 网络动态图片加载实战',
              num: 357
            },
            {
              src: 'JavaScript基础笔记和作业/JavaScript基础第五天/06-素材/综合作业素材/images/course03.png',
              title: 'Angular2 大前端商城实战项目演练',
              num: 22250
            },
            {
              src: 'JavaScript基础笔记和作业/JavaScript基础第五天/06-素材/综合作业素材/images/course04.png',
              title: 'Android APP 实战项目演练',
              num: 389
            },
            {
              src: 'JavaScript基础笔记和作业/JavaScript基础第五天/06-素材/综合作业素材/images/course05.png',
              title: 'UGUI 源码深度分析案例',
              num: 124
            },
            {
              src: 'JavaScript基础笔记和作业/JavaScript基础第五天/06-素材/综合作业素材/images/course06.png',
              title: 'Kami2 首页界面切换效果实战演练',
              num: 432
            },
            {
              src: 'JavaScript基础笔记和作业/JavaScript基础第五天/06-素材/综合作业素材/images/course07.png',
              title: 'UNITY 从入门到精通实战案例',
              num: 888
            },
            {
              src: 'JavaScript基础笔记和作业/JavaScript基础第五天/06-素材/综合作业素材/images/course08.png',
              title: 'Cocos 深度学习你不会错过的实战',
              num: 590
            }

          ]
          for (let i = 0; i < data.length; i++) {
            document.write(`
            <li>
              <a href="#">
                <img src="${data[i].src}"" title="${data[i].title}">
                <h4>${data[i].title}</h4>
                <div class="info">
                  <span>高级</span> • <span>${data[i].num}</span>人在学习
                </div>
              </a>
            </li>
            `)
          }
        </script>
      </ul>
    </div>

  </div>






</body>

</html>

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f3f5f7;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.w {
  width: 1200px;
  margin: auto;
}

.box {
  margin-top: 30px;

}

.box-hd {
  height: 40px;
}

.box-hd h4 {
  font-size: 20px;
  float: left;
  color: #494949;

}

.box-hd a {
  float: right;
  color: #a5a5a5;
  font-size: 12px;
  margin-top: 10px;
  margin-right: 30px;
}

.box-bd ul {
  width: 1225px;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}


.box-bd ul li {
  position: relative;
  float: left;
  width: 228px;
  height: 270px;
  margin-right: 15px;
  margin-bottom: 15px;
  background-color: #fff;
  transition: all .3s;
}

.box-bd ul li a {
  display: block;
}

.box-bd ul li:hover {
  top: -8px;
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .1);
}

.box-bd ul li img {
  width: 100%;
}

.box-bd ul li h4 {
  margin: 20px 20px 20px 25px;
  font-size: 14px;
  font-weight: 400;
  color: #050505;

}

.box-bd .info {
  font-size: 12px;
  color: #999;
  margin: 0 20px 0 25px;
}

.box-bd .info span {
  color: #ff7c2d;
}