目录

一、JavaScript基础

1. JavaScript介绍

1.1 JavaScript是什么？

1.2 JavaScript的组成是什么？

2.js的书写位置

1.1内部

1.2外部（以后开发最常用）

1.3行内

3.js的注释

1.单行 注释

2.多行注释

 4.js的结束符

5.js的输入输出语法

1.输出语法

 2.输出语法

 6.字面量

二、变量

1.变量是什么？

2.变量的基本使用

1.声明变量

2.变量的赋值

3.更新变量

4.多个变量声明

案例1：

案例2

 3.变量的本质

案例：需求：让用户输入自己的名字、年龄、性别再输出到

三、数组

1.数组的基本使用

1.声明语法

2.取值语法

3.术语

四、数据类型

1.数据类型

1.数字型（number）

2.字符串型（string）

模板字符串 `` 反引号

案例：

3.布尔型(boolean)

4.未定义类型（undefined）

5.空类型（null）

2.检测数据类型

五、类型转换

1.为什么需要转换类型

2.隐式转换

3.显式转换

1.Number（数据）

2.parseInt（数据） 只保留整数 

3.parseFloat（数据） 可以保留小数 如果是整数转换还是保留整数

4.String（数据）转换为字符串型 变量.toString（进制）

5.转换为布尔型 Boolean(数据)

六、综合案例

用户订单信息案例

需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息

---

一、JavaScript基础

1. JavaScript介绍

1.1 JavaScript是什么？

 js是 一门运行在浏览器上的一门编程语言（脚本语言） 来实现==人机交互效果==

1.2 JavaScript的组成是什么？

1.ECMAScript(基础语法)

2.DOM

3.BOM

2.js的书写位置

1.1内部

<script>
    alert('嘿嘿')
</script>
</body>

写到</body>上面的位置是因为：代码是从上到下的先后顺序执行的    

js要获取元素如果写在元素上面获取不到 会出错。

1.2外部（以后开发最常用）

引入js文件 注意：当使用的是外部引入的方式标签之间是不能再写js代码的

直接引入js文件

<script src="./my.js"></script>

一般创建一个js的文件夹把js文件放在js文件夹里面引入

<script src="js/my.js"></script>

1.3行内

<button onclick="alert('enen')">点击</button>

使用很少、以后到vue会使用到。

3.js的注释

1.单行 注释

快捷键 Ctrl + /

//这是单行注释的

2.多行注释

快捷键 shift + alt + A

/* 这是多行注释的
    这是多行注释的
    这是多行注释的 */

vscode 的默认多行注释比较麻烦。可以自定义设置多行注释的方法：

找到左下角的管理>键盘快捷键方式

 输入注释，找到切换块注释 双击修改为：Ctrl + Shift + /

个人这个和单行很好区分，挺好用的。

 4.js的结束符

• 以前都是有 英文的分号 “;”做一段代码的结束符的
• 可以写也可以不写
• 现在越来越多的程序员很少有结束符了，因为在以后在Vue中有结束符会有很多报错
• 但为了统一风格要写全写，要不写都不写（按团队的需求） 

5.js的输入输出语法

那么怎么和计算机做交互呢？

1.输出语法

1.document.write('需要输出的内容')

向body内输入内容

document.write('我真帅')

如果冒号内有标签名则会解析为网页元素

 document.write('<h1>我真帅</h1>')

 2.alert('需要输出的内容') 显示一个警示框

alert('我真帅')

3.console.log('需要输出的内容'); 控制台打印 程序员调试专用

console.log('程序员用的控制台打印')

 2.输出语法

prompt('请输入内容：') 显示一个属于对话框

    prompt('请输入你的名字：')

 6.字面量

如：

• 100 数字字面量
• 张三 字符串字面量
• [] 数组字面量
• {} 对象字面量

二、变量

1.变量是什么？

变量是计算机储存数据的一个 ‘容器’

注意：变量不仅仅是数据本身  它们只是存储数据的一个盒子

2.变量的基本使用

1.声明变量

声明关键字 变量名
let age

age 就是变量名称 也叫标识符

2.变量的赋值

 // 声明一个age 的变量
    let age
    // 把18 赋值给age这个变量
    age = 18
    // 页面打印
    document.write(age)

注意：页面打印变量不加冒号 ， 加冒号只是打印冒号里面的内容

也可以声明变量的同时直接赋值

// 声明了一个变量 同时里面存放了一个18 的数据
    let age = 18

3.更新变量

let age = 18
// 变量数据发生改变 重新把19 赋值给了age变量
age = 19
// 页面打印
document.write(age)

注意：千万不能更新变量的时候再let 关键字声明 因为同一个变量名不能重复声明

    let age = 18
    // 变量数据发生改变 重新把19 赋值给了age变量
    let age = 19
    // 页面打印
    document.write(age)
    //报错

4.多个变量声明

多个变量声明中间用逗号隔开。

let uname = 'z张三', age = 18

案例1：

需求： 浏览器中弹出对话框： 请输入姓名， 页面中输出：刚才输入的姓名  

// 先声明一个变量 等号右边先执行 把输入框值得到的值赋值给变量 uname
let uname = prompt('请输入姓名：')
// 页面打印
document.write(uname)

案例2

需求： 有2个变量： num1 里面放的是 10， num2 里面放的是20 最后变为 num1 里面放的是 20 ， num2 里面放的是 10

    let num1 = 10
    let num2 = 20
    // 先声明一个临时变量 temp
    let temp
    // 把 num1 的值赋值给临时变量 那么temp = 10 num1 为空
    temp = num1
    // 再把num2 的值赋值给num1 那么此时num1 = 20 num2 为空
    num1 = num2
    // 最后把临时变量的值赋值给num2 完成需求
    num2 = temp
    // 页面打印
    document.write('num1的值为' + num1)
    document.write('num2的值为' + num2)

需要注意的是把 num1 的值赋值给临时变量temp

是temp在等号左边而不是num1

 3.变量的本质

内存：计算机中存储数据的地方，相当于一个空间

变量：是程序在内存中申请的一块用来存放数据的小空间

变量的本质就是去内存申请空间

案例：需求：让用户输入自己的名字、年龄、性别再输出到

三、数组

如果要保存的数据成千上百怎么办呢?

1.数组的基本使用

数组（Array）是一种可以按顺序存储多个数据

1.声明语法

// let 数组名 = [数据1, 数据2, ... ,数据n]
let names = ['张三', '李四', '王二', '小明']

•  数组是按顺序保存，所以每个数据都有自己的编号
•  计算机中的编号从0开始，所以张三的编号为0，李四编号为1，以此类推
•  在数组中，数据的编号也叫索引号或下标
•  数组可以存储任意类型的

2.取值语法

names[0] //张三
names[3] //小明

3.术语

• 元素是数组中每一个保存到数据是数组元素
• 下标就是数组的索引号
• length表示长度，也就是数组的个数

可以通过names.length 获取数组个数        

那么names.length - 1 为数组中最后一个数组数据

四、数据类型

1.数据类型

js数据类型整体分为两大类：

基本数据类型

引用数据类型

基本数据类型：数字型（number）、字符串型（string）、布尔型（boolean）、未定义型（undefined）、空类型（null）

引入数据类型：对象（object）、函数（function）、数组（array）

1.数字型（number）

JavaScript中的正数、负数、小数、统一为数字型

注意事项：

js是弱数据类型，变量到底是哪一种类型，需要赋值之后才知道

像Java是强数据类型 例如 int a = 3  就必须是整数

强类型：声明变量的时候 需要先指明变量的类名

弱类型：声明变量的时候 并不知道属于什么类型 类型是由数据（变量的值）决定的

2.字符串型（string）

被单引号 ''、双引号""、反引号``所包裹的数据都是字符串型

注意事项：

单双引号必须成对出现

嵌套遵循

模板字符串 `` 反引号

遇到这种情况就在页面打印不出用户输入的内容 此时需要字符拼接

1.作用：

拼接字符串和变量

新出现的 在没有它之前拼接字符串比较麻烦 有  '++' 引引加加拼接法

语法：``

反引号``包裹内容${} 花括号内输入变量名 

还有强大的一点反引号包裹的内容可以换行解析HTML元素

案例：

需求：页面弹出对话框，输入名字和年龄，页面显示： 大家好，我叫xxx，今年xx岁了

<script>
    // 先声明两个变量接收用户输入的内容
    let uname = prompt('请输入您的年龄：')
    let age = prompt('请输入您的年龄：')
    // 页面打印 反引号包裹
    document.write(`大家好，我叫${uname},今年${age}岁了`)
</script>

3.布尔型(boolean)

一共就两个值 true 和 false

true表示1 false表示0

4.未定义类型（undefined）

什么是未定义类型呢？

通俗来讲：声明了变量没有赋值

let age // 声明了变量但没有赋值
console.log(age) // 控制台输出 undefined

5.空类型（null）

let age = null // 表示值为空

2.检测数据类型

可以通过typeof 关键字控制台检测数据类型

    let age = 18
    let uname = '张三'
    let flag = false
    let sex
    console.log(typeof age) // number
    console.log(typeof uname) // string
    console.log(typeof flag) // boolean
    console.log(typeof sex) // underfined

五、类型转换

1.为什么需要转换类型

js是弱数据类型 它也不知道变量到底属于哪种数据类型

console.log('1000' + '200') //1000200  而不是1200

所以需要我们想要的数据类型

2.隐式转换

有一些运算符执行的时候 系统内部就自动数据转换 这就是隐式转换

规则：

+号两边只有有一个是字符串，都会把另一个转换为字符串

除了+号以外的运算符号 - *  / 都会把数据转换为数字型

缺点：转换的类型不明确 很多靠猜 和经验总结

小技巧：+号作为 正号解析转换为number数字型

    // 声明两个变量分别接收两个数 输入前加 + 正号就会解析成数字型 而不是拼接
    let num1 = +prompt('请输入第一个数：')
    let num2 = +prompt('请输入第二个数：')
    // 声明一个变量让它们相加
    let sum = num1 + num2
    document.write(`结果为${sum}`) 

3.显式转换

1.Number（数据）

• 转换为数字型
• 但是如果转换的内容非数字 则转换失败 结果为NaN （Not a Number） 不是一个数字
• NaN也是数字类型，代表的是非数字

2.parseInt（数据） 只保留整数 

3.parseFloat（数据） 可以保留小数 如果是整数转换还是保留整数

4.String（数据）转换为字符串型 变量.toString（进制）

5.转换为布尔型 Boolean(数据)

• ➢ 字符串类型：空字符串会转成false 其他的都会被转换成true
• ➢ 数字类型：0与NaN会转换成 false 其他的都会被转换成true
• ➢ undefined类型：会被转换成false
• ➢ null 类型：会被转换成fals

六、综合案例

用户订单信息案例

需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息

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

    table,
    th,
    td {
      border: 1px solid #000;
    }

    tr {
      height: 40px;
      line-height: 40px;
    }
  </style>
</head>

<body>

  <script>
    //声明三个变量接收用户输入的内容
    let price = prompt('请您输入商品的价格：')
    let num = prompt('请您输入商品的个数：')
    let address = prompt('请您输入商品的地址：')
    // 因为是乘号不会拼接不需要在之前加正号 加 +号反而会报错
    let sum = price * num
    // 声明一个变量接收用反引号`` 修改用户输入的内容
    let str = `
    <table>
    <caption>
      <h2>订单确认</h2>
    </caption>
    <tr>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品数量</th>
      <th>总价</th>
      <th>收货地址</th>
    </tr>
    <tr>
      <td>小米手机</td>
      <td>${price}</td>
      <td>${num}</td>
      <td>${sum}</td>
      <td>${address}</td>
    </tr>
  </table>
    `
    // 界面打印
    document.write(str)
  </script>
</body>

</html>