JavaScript基础part2（完结）

超雄代码狂

于 2024-09-05 18:40:54 发布

阅读量807

点赞数 26

分类专栏：前端 JavaScript 文章标签： javascript 前端 vscode

本文链接：https://blog.csdn.net/wozhaonue_w/article/details/141938101

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

JavaScript基础

函数

语法：

function 函数名(形参表){代码}

代码中加return语句则可以返回值，默认返回值为undefined

两个相同的函数，后面会覆盖前面

命名规则：

前缀为动词

传参注意事项

实参个数 > 形参个数 ==> 没用上的实参被忽略
实参个数 < 形参个数 ==> 没赋予值得形参为undefined

作用域

全局变量	在函数体外定义
局部变量	在函数体中定义

访问原则：

有命名冲突，先用局部变量

匿名函数

没有函数名的函数，如何调用

函数表达式 let fn = function(){}
立即执行 (function(){})(); 防止变量污染

多个要用分号隔开，前后都要

案例：

函数传参为数组名

let arr = [1, 2, 3, 4]
    function calArr(a) {
      let all = 0
      for (let i = 0; i < a.length; i++) {
        all += a[i]
      }
      document.write(all)

    }
    calArr(arr)

局部与全局的区别

function f1() {
      let num = 123
      function f2() {
        console.log(num)
      }

    }
    f2()
    let num = 456
    f1()

匿名函数

 //1.函数表达式调用
    let fn = function () { document.write('hello') }
    fn();
    //2.立即执行
    (function () { document.write('byebye') })();

转换时间

let time = +(prompt('请输入秒数'))
    //1.小时
    let hour = parseInt(time / 3600)
    time -= hour * 3600
    if (hour < 10) {
      document.write(`0${hour}h`)
    } else {
      document.write(`${hour}h`)
    }
    //2.分钟
    let minute = parseInt(time / 60)
    time -= minute * 60
    if (minute < 10) {
      document.write(`0${minute}m`)
    } else {
      document.write(`${minute}m`)
    }
    //3.秒数
    let sec = time
    if (sec < 10) {
      document.write(`0${sec}s`)
    } else {
      document.write(`${sec}s`)
    }

对象

无序的数据集合 ==> 用来描述某个对象：静态特征（属性）和动态行为（方法）

声明语法

let 对象名 = {} 或 let 对象名 = new object()

属性书写语法

uname : '猪猪侠' ,

age : 18

若属性名中有特殊符号，用引号包住

方法书写

方法名 : function(形参表) {代码} ==若后面还有方法需要加,

有特殊符号也可用引号包起

方法调用

对象名.方法名

增删改查

增

对象名.新属性 = 属性值

删

delete 对象名.属性名 仅作了解

改

对象名.已有属性名 = 新属性值

查

两种方法

对象名.属性名
对象名['属性名']

遍历对象

可以用来遍历数组，但不推荐

书写语法

for(let k in 对象名){console.log(对象名[k])}

k代表的是属性名，可以用其他字母代替，但最好是k 或key

经验

script可以写在body标签的中部，可以更好地进行循环操作

内置对象

JavaScript内部提供的对象 ==> 给开发者调用

如

document.write()
console.log()

Math中提供了一系列做数学操作的运算方法

random 0~1的随机数，包含0但不包含1
ceil 向上取整
floor 向下取整
max 找最大
min 找最小
pow 幂运算
abs 绝对值

实际应用

N ~ M 之间的随机数

Math.floor(Math.random()*(M - N + 1) + N)

案例

对象声明

let goods = {
      name: '小米10 青春版',
      number: '100012816024',
      weight: '0.05kg',
      address: '中国大陆'
    }
    document.write(goods.name)
    document.write('</br>')
    document.write(goods.number)
    document.write('</br>')
    document.write(goods.weight)
    document.write('</br>')
    document.write(goods.address)
    document.write('</br>')

对象的增和改

 let goods = {
      name: '小米10 青春版',
      number: '100012816024',
      weight: '0.05kg',
      address: '中国大陆'
    }
    goods.name = '小米10 PLUS'
    goods.color = 'pink'
    document.write(goods)

对象的方法调用

let player = {
      dance: function () {
        document.write('dance')
        document.write('</br>')
      },
      song: function () {
        document.write('sing')
        document.write('</br>')
      }
    }
    //对象方法调用
    player.dance()
    player.song()

遍历对象数组

let students = [
      { name: '小明', age: 18, gender: '男', hometown: '河北省' },
      { name: '小红', age: 19, gender: '女', hometown: '河南省' },
      { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
      { name: '小丽', age: 18, gender: '女', hometown: '山东省' }
    ]
    //遍历对象数组
    for (let i = 0; i < students.length; i++) {
      for (let k in students[i]) {
        console.log(students[i][k])
      }
    }

数组对象渲染生成表格

<!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>
    table {
      width: 600px;
      text-align: center;
    }

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

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

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

    table thead {
      background-color: #ddd;
    }

    table tr:not(。thead):hover {
      background-color: #eee;
    }
  </style>
</head>


<body>
  <script>
    let students = [
      { name: '小明', age: 18, gender: '男', hometown: '河北省' },
      { name: '小红', age: 19, gender: '女', hometown: '河南省' },
      { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
      { name: '小丽', age: 18, gender: '女', hometown: '山东省' }
    ]
    document.write(`<table>
  <caption>学生列表</caption>
  <thead>
  <tr class = "thead">
    <td>序号</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
    <td>家乡</td>
  </tr>
  </thead>
  <tbody>`)
    for (let i = 0; i < students.length; i++) {
      document.write(`<tr>`)
      document.write(`<td>${i + 1}</td>`)
      for (let k in students[i]) {
        document.write(`<td>${students[i][k]}</td>`)
      }
      document.write(`</tr>`)
    }
    document.write(`</tbody>`)
  </script>
</body>

</html>

在这里插入图片描述

随机点名案例

 let nameArr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
    let n = Math.floor(Math.random() * (6 - 0) + 0)
    document.write(nameArr[n])
    nameArr.splice(n, 1)
    document.write(`</br>`)
    document.write(nameArr)

在这里插入图片描述

猜数字

 let n = Math.floor(Math.random() * (10 - 1) + 1)
    let num = +(prompt('请输入你要猜的数字'))
    while (n !== num) {
      num = +(prompt('猜错了，继续猜'))
    }
    alert('终于猜对了老弟')

综合案例

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>Document</title>
</head>

<body>


  <!-- 4. box核心内容区域开始 -->
  <div class="box w">
    <div class="box-hd">
      <h3>精品推荐</h3>
      <a href="#">查看全部</a>
    </div>
    <div class="box-bd">
      <ul class="clearfix">

        <script>
          let data = [
            {
              src: 'images/course01.png',
              title: 'Think PHP 5.0 博客系统实战项目演练',
              num: 1125
            },
            {
              src: 'images/course02.png',
              title: 'Android 网络动态图片加载实战',
              num: 357
            },
            {
              src: 'images/course03.png',
              title: 'Angular2 大前端商城实战项目演练',
              num: 22250
            },
            {
              src: 'images/course04.png',
              title: 'Android APP 实战项目演练',
              num: 389
            },
            {
              src: 'images/course05.png',
              title: 'UGUI 源码深度分析案例',
              num: 124
            },
            {
              src: 'images/course06.png',
              title: 'Kami2首页界面切换效果实战演练',
              num: 432
            },
            {
              src: 'images/course07.png',
              title: 'UNITY 从入门到精通实战案例',
              num: 888
            },
            {
              src: '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} alt="">
            <h4>
            ${data[i].title}}
            </h4>
            <div class="info">
              <span>高级</span> • <span>${data[i].num}</span>人在学习
            </div>
          </a>
        </li>
              `)

          }
        </script>

      </ul>
    </div>
  </div>
</body>

</html>