JavaScript基础学习-EW帮帮网

微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

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;
}

JavaScript基础学习

1.一元运算符

2.比较运算符

3.运算符优先级

4.分支语句

案例：简易ATM取款机

案例：乘法表

5.数组

5.1新增

5.2删除

案例渲染柱形图

案例冒泡排序

6.立即执行函数

7.逻辑中断

8.对象

案例：渲染表格

9.内置对象

案例猜数字

案例随机颜色

案例渲染学习案例

网站公告

今日签到

热门文章

最新发布

JavaScript基础学习

1.一元运算符

2.比较运算符

3.运算符优先级

4.分支语句

案例：简易ATM取款机

案例：乘法表

5.数组

5.1新增

5.2删除

案例 渲染柱形图

案例 冒泡排序

6.立即执行函数

7.逻辑中断

8.对象

案例：渲染表格

9.内置对象

案例 猜数字

案例 随机颜色

案例 渲染学习案例

网站公告

今日签到

热门文章

最新发布

案例渲染柱形图

案例冒泡排序

案例猜数字

案例随机颜色

案例渲染学习案例