JavaScript基础part1

最新推荐文章于 2024-10-07 21:11:33 发布

超雄代码狂

最新推荐文章于 2024-10-07 21:11:33 发布

阅读量1.7k

点赞数 37

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

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

版权

前端同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

JavaScript基础

JS简介

是什么

运行在客户端的编程语言 => 实现人机交互

作用

网页特效（事件到反馈）
表单验证（合法性，如手机号等）
数据交互（获取后台的数据，渲染到前端）
服务端编程 node.js

组成

ECMAScript（语法基础）

WebAPIs

分为DOM BOM

书写位置

内部

用script标签包住写在body上面

本质：先有结构，样式，才可根据其进行交互

外部（推荐）

代码写在.js文件中，通过script在html中引入

内联

只会vue框架会采用这种模式

语法

注释

分为单行和多行

单行 ctrl + / “//”

多行 shift + Alt + a “/* */”

结束符

分号（可写可不写，跟随个人习惯以及公司代码形式）

但整体得保持一致，最好不要一会写，一会不写

输入输出语法

输入

prompt（'写提示内容'）

换行用‘\n

作用

显示对话框，可以作为返回值，类型为字符串

输出

document.write('内容') 【内容中写标签会被解析为网页元素】
alert（''） 【弹窗形式】
console.log('控制台打印') 【方便程序员进行调试操作】

代码执行顺序

按照编写顺序进行代码执行，但alert()和prompt()会比页面渲染先被执行

变量

变量名

命名规则：

不可用关键字，用下划线，英文，数字，$来组成，数字不可作为开头，区分大小写

字面量

一种类型的具体值，如'字符串'为字符串型字面量，整数，小数均为数字型字面量

可从中看出JavaScript为弱数据语言

声明

let 变量名 = 字面量

let为声明关键字

[!NOTE]

let 与 var ：

var为之前的声明关键字，有不合理的地方，如

可先声明，再使用
可重复声明
无法调整变量的作用域

数组体验

语法：

let 数组名 = [1,2,3,4]

补充：

可用数组名直接输出，也可带下标进行选择
.length可带长度

数据类型

原因：

更加充分和高效地利用内存
方便程序员管理

案例：

用户信息的包装

<!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,
    td {
      border: 1px solid beige;
    }

    table {
      text-align: center;
      margin: 0 auto;
    }

    .h2 {
      font-size: 40px;
      font-style: italic;
    }
  </style>
</head>

<body>



  <script>
    let name = prompt('请输入你的名字')
    let address = prompt('请输入你的收货地址')
    let itemName = prompt('请输入商品名字')
    let num = prompt('请输入购买商品的数量')
    let price = String(num * 1200);
    alert('你的订单信息已为你封装好了')
    document.write(`
    
  <table>
    <caption class="h2">订单信息</caption>
    <thead>
      <tr>
        <td>姓名</td>
        <td>收货地址</td>
        <td>商品名</td>
        <td>商品数量</td>
        <td>商品总价</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>${name}</td>
        <td>${address}</td>
        <td>${itemName}</td>
        <td>${num}</td>
        <td>${price}</td>
      </tr>
    </tbody>
  </table>
    `)
  </script>
</body>

</html>

实现效果：

在这里插入图片描述

分类

数字型

整数，小数，负数，正数都是数字型（弱数据类型语言）

[!WARNING]

NaN – not a number（计算错误控制台所返回的结果）

本身为数字型

字符串

单引号，双引号，反引号包裹的都是字符串

推荐用单引号

拼接通过加号（有一端是字符串就行了）

如何嵌套引号：

外双内单，或者内双外单

模板字符串

如何使用：

外面用反引号，里面${变量名}

里面可以运算

布尔型

boolean

两个值，true，false

其他类型转换为boolean

除了 '' 0 undefined null false NaN为 false，其余都为true

未定义类型

undefined

没有赋值的变量的默认值==>通过检测其值来判断用户是否传输数据

空类型null

语法：

let 变量名 = null

其数据类型为尚未创建的对象

检测数据类型

typerof 变量名

临时变量不用销毁

数组

按顺序保存数据

查询

通过下标进行寻找

赋值

通过下标进行赋值

添加

`pushu()`	在结尾添加
`unshift()`	在开头添加

删除

`pop()`	删除最后一个
`shift()`	删除第一个
`splice(初始位置，删除个数)`	通过下标指定删除

排序

sort(function(a,b){return a -b}) 升序排序

``sort(function(a,b){return b - a})` 降序排序

splice适用于抽奖，删除购物车中的商品的操作

案例

数组求和

    let array = [2, 6, 1, 7, 4]
    let all = 0;
    let average;
    for (let i = 0; i < array.length; i++) {
      all += array[i]
    }
    average = all / array.length
    document.write(`总和为${all},平均值为${average}`)

数组求最大最小值

 let array = [2, 6, 1, 77, 52, 25, 7]
    let min = array[0]
    let max = array[0]
    for (let i = 0; i < array.length; i++) {
      if (max < array[i]) {
        max = array[i]
      }
      if (min > array[i]) {
        min = array[i]
      }
    }
    document.write(`最大值为${max}，最小值为${min}`)

数组新增

let array = [1, 2, 3]
    //新增在结尾 push
    array.push(4, 5, 6)
    document.write(array)
    document.write('</br>')
    //新增在开头 unshift
    let array1 = [4, 5, 6]
    array1.unshift(1, 2, 3)
    document.write(array1)

数组筛选

 //找出大于10的数组元素，全部添加到一个新的数组中去
    let array = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    let newarray = []
    for (let i = 0; i < array.length; i++) {
      if (array[i] > 10) {
        newarray.push(array[i])
      }
    }
    document.write(newarray)
    document.write('</br>')
    //找出不等于0的数组元素，全部添加到一个新的数组中去
    let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    let newArr = []
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] !== 0) {
        newArr.push(arr[i])
      }
    }
    document.write(newArr)

数组删除

 //数组删除最后一个元素 pop（） 可返回值
    let array = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    let number = array.pop()
    document.write(number)
    document.write('</br>')
    document.write(array)
    document.write('</br>')
    //数组删除第一个元素 shift() 可返回值
    let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    let num = arr.shift()
    document.write(num)
    document.write('</br>')
    document.write(arr)
    document.write('</br>')
    //数组通过下标来指定删除对象 splice（起始位置，删除个数）,没有返回值
    let Arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    Arr.splice(1, 1)
    document.write(Arr)

冒泡排序

let arr = [5, 4, 1, 7, 3]
    for (let i = 0; i < arr.length - 1; i++) {
      for (let j = 0; j < arr.length - 1 - (i); j++) {
        if (arr[j] > arr[j + 1]) {
          let temp = arr[j]
          arr[j] = arr[j + 1]
          arr[j + 1] = temp
        }
      }
    }
    document.write(arr)

数组自带排序方法封装

 let arr = [5, 4, 3, 2, 1]
    let Arr = [1, 2, 3, 4, 5]
    arr.sort(function (a, b) {
      return a - b
    })
    Arr.sort(function (a, b) {
      return b - a
    })
    document.write(arr)
    document.write('</br>')
    document.write(Arr)

根据输入数据生成柱状图

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

    .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>
    //获取数组数据
    let arr = []
    for (let i = 0; i < 4; i++) {
      arr.push(prompt(`请输入第${i + 1}季度的数据`))
    }

    //渲染页面
    document.write(`<div class="box">`)
    //for循环内层盒子
    for (let i = 0; i < 4; i++) {
      document.write(`<div style="height: ${arr[i]}px;">
        <span>${arr[i]}</span>
        <h4>第${i + 1}季度</h4>
        </div>`)
    }
    document.write(`</div>`)
  </script>
</body>

</html>

在这里插入图片描述

常量

声明：

const 常量名= 字面值

必须初始化（不需要重新赋值的数据）

运算符

算术运算符

() > * / % > + -

赋值运算符

= += -= *= %= /=

自增运算符

前置与后置的区别在于这个表达式和这个变量的变化的先后顺序的区别

前置：表达式执行先于变量的变化

后置：与前面的相反

比较运算符

> < >= <= == === != !==

区别：

==：比较符号两边的值是否相同（不同类型会进行隐式转换）

===：比较符号两边的变量的类型和值是否都相同

!=：比较符号两边的变量的值是否不同（同样类型不同会进行隐式转换）

!==：比较符号两边的变量的值和类型是否不同（有一个就为false）

补充：

字符串比较ASCII码的大小
尽量不比较小数，有精度的问题
NaN不等于任何人（包括NaN自己）

逻辑运算符

优先级：

! > && > ||

短路

`&&`	左边为`false`则右边不用看，直接将左边的值赋予
`

案例

逻辑中断

let num = 1 || 2
    let num1 = 0 && 1
    document.write(num)
    document.write('</br>')
    document.write(num1)

数据类型转换

显式转换

Number() [但含数字以外的字符串转num违法]
parseInt()[保留整数（去掉不是数字及小数点后的数值)]
parseFloat()[保留小数]

后两者可以用于像素相加

隐式转换

拼接
除‘+’以外的算术运算符 ==>数字型
在字符串前加‘+’ => 数字型

语句

语句和表达式的区分

语句：可以执行，一个行为

表达式：有确定的值

分支语句

if语句

语法：

if(条件){内置代码 }else{}

还有if的嵌套语句，多分支if等

案例：

if判断用户输入信息是否正确

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let name = prompt('请输入用户名')
    let code = prompt('请输入你的密码')
    if (name === 'pink' && code === '123') {
      alert('登录成功')
      document.write(`
        <div>进入画面</div>
        `)
    } else {
      alert('登录失败')
      document.write(`
        <div>重新进入界面</div>
        `)
    }

  </script>
</body>

</html>

在小于10的时间前加个‘0’

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let num = prompt('请输入当前的时间')
    if (+num < 10) {
      num = 0 + num
    } else {

    }
    alert('当前时间为' + num);

  </script>
</body>

</html>

三元运算符

条件？执行1：执行2 （一般用于取值）

switch

条件是用===进行判断，不适合区间判断，配合break进行使用，避免贯穿的出现

案例：

通过判断符号来进行对应的计算

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let num1 = prompt('请输入第一个数字')
    let num2 = prompt('请输入第二个数字')

    let cal = prompt('输入想要计算的符号')
    let all;
    //判断+计算
    switch (cal) {
      case '+':
        all = (+num1) + (+num2)
        break
      case '-':
        all = (+num1) - (+num2)
        break
      case '*':
        all = (+num1) * (+num2)
        break
      case '/':
        all = (+num1) / (+num2)
        break
    }



    alert('计算的结果为' + all)
  </script>
</body>

</html>

循环结构

断点测试

浏览器中检查 ==> sourse ==> 在要检查的语句按一下，然后刷新就会在这句停下

while

语法：

while(条件){循环代码}

取款机综合案例：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let money = 2000
    let c = '2'
    while (c !== '4') {
      c = prompt('请选择您的操作\n\t1.取款\n\t2.存款\n\t3.查看余额\n\t4.退出')
      switch (c) {
        case '1':
          money--
          alert('您的余额为' + money)
          break
        case '2':
          money++
          alert('您的余额为' + money)
          break
        case '3':
          alert('您的余额为' + money)
          break
        case '4':
          alert('退出程序')
          break
      }
    }
  </script>
</body>

</html>

for循环

语法：

for(初始条件;判断条件;表达式)

熟用continue和break可以更好地利用for循环

案例

for循环练习

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    //输出1~100岁
    /*  for (let i = 1; i <= 100; i++) {
       document.write(i + '岁')
       document.write('</br>')
     } */
    //计算1~100之间的偶数和
    let all = 0;
    for (let i = 2; i <= 100; i += 2) {
      all += i;
    }
    document.write(all)

    //打印小星星
    for (let i = 0; i < 5; i++) {
      document.write('★')
    }
    document.write('</br>')
    //循环数组
    let name = ['m', 'z', 'zf', 'gy', 'hz']
    for (let i = 0; i < 5; i++) {
      document.write(name[i])
      document.write('</br>')
    }


  </script>
</body>

</html>

for嵌套练习

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    //打印几行几列的星星
    /* let i = prompt('请输入行数')
    let j = prompt('请输入列数')
    for (let a = 0; a < i; a++) {
      for (let b = 0; b < j; b++) {
        document.write('★')
      }
      document.write('</br>')
    } */
    //打印倒三角形星星
    let a = prompt('请输入行数')
    for (let i = 0; i < a; i++) {
      for (let j = 0; j <= i; j++) {
        document.write('★')
      }
      document.write('</br>')
    }
  </script>
</body>

</html>

for循环99乘法表

<!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>
    span {
      color: skyblue;
      background-color: rgb(218, 132, 218);
      margin: 5px;
      box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
      display: inline-block;
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
  </style>
</head>

<body>
  <!-- j + '*' + i + '=' + (i * j) + ' ' -->
  <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>
</body>

</html>

在这里插入图片描述

函数

语法：

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`)
    }