OmniStack Lab

1.JavaScript介绍

1.1 JavaScript是什么

JavaScript是什么? 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
作用是什么？
- 网页特效 (监听用户的一些行为让网页作出对应的反馈)
- 表单验证 (针对表单数据的合法性进行判断)
- 数据交互 (获取后台的数据, 渲染到前端)
- 服务端编程 (node.js)
JavaScript的组成有什么?
- ECMAScript: 规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等

Web APIs :
- DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
- BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

JavaScript权威网站MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

实战案例点击切换按钮的案例-体验HTML+CSS+JS 实现交互效果

html

<!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>
        .pink {
            background-color: pink;
        }
    </style>
</head>
<body>
    <button class="pink">按钮1</button>
    <button>按钮1</button>
    <button>按钮1</button>
    <button>按钮1</button>
    <script>
        let bts = document.querySelectorAll('button');
        for (let index = 0; index < bts.length; index++) {
            bts[index].addEventListener('click',function () {
                document.querySelector('.pink').className = '';
                this.className = 'pink';
            })
            
        }
    </script>
</body>
</html>

1.2 JavaScript书写位置

内部JavaScript
直接写在html文件里，用script标签包住
规范：script标签写在</body>上面

html

<!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>
</head>

<body>
  <!-- 内部js -->
  <script>
    // 页面弹出警示框
    alert('你好，js~')
  </script>
</body>

</html>

注意事项: 我们将 <script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTML。
如果先加载的JavaScript期望修改其下方的HTML，那么它可能由于HTML尚未被加载而失效。
因此，将JavaScript代码放在HTML页面的底部附近通常是最好的策略。

外部JavaScript 代码写在以.js结尾的文件里
语法：通过script标签，引入到html页面中。

html

<!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>
</head>

<body>
  <script src="./js/my.js">
    // 中间不要写内容
  </script>
</body>

</html>


alert("我是外部js")

注意事项:

script标签中间无需写代码，否则会被忽略！
外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。

内联JavaScript 代码写在标签内部注意：此处作为了解即可，但是后面vue框架会用这种模式语法：

html

<!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>
</head>

<body>
  <button onclick="alert(逗你玩)">点击</button>
</body>

</html>

1.3 JavaScript注释

目标: 会使用两种JavaScript注释方法

单行注释
- 符号：//
- 作用: //右边这一行的代码会被忽略
- 快捷键: ctrl + /
块注释
- 符号: /* */
- 作用: 在/* 和 */ 之间的所有内容都会被忽略
- 快捷键：shift + alt + A

html

<!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>
</head>

<body>
  <script>
    //这是单行注释
    /*
    这是块注释
    */
  </script>
</body>

</html>

1.4 JavaScript结束符

目标: 了解JavaScript结束符

作用: 使用英文的;代表语句结束
实际情况: 实际开发中，可写可不写, 浏览器(JavaScript 引擎) 可以自动推断语句的结束位置
现状: 在实际开发中，越来越多的人主张，书写 JavaScript 代码时省略结束符
约定: 为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求.）

html

<!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>
</head>

<body>
  <script>
    alert(1);
    alert(2);
    alert(1)
    alert(2)
  </script>
</body>

</html>

1.5 JavaScript输入输出语法

目标: 能写出常见 JavaScript 输入输出语法
什么是语法:

人和计算机打交道的规则约定
我们要按照这个规则去写
比如: 你吃了吗？
我们程序员需要操控计算机，需要计算机能看懂

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

输出语法:

语法1:

javascript

//作用：向body内输出内容
//注意：如果输出的内容写的是标签，也会被解析成网页元素
document.write('要输出的内容')
document.write('<h1>一级标题</h1>')

语法2:

javascript

//作用：页面弹出警告对话框
alert('要输出的内容')

语法3

javascript

//作用：控制台输出语法，程序员调试使用
console.log('控制台打印输出')

输入语法:

javascript

//作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
prompt('请输入你的姓名:')

JavaScript代码执行顺序:

`按HTML文档流顺序执行JavaScript代码
alert() 和 prompt() 它们会跳过页面渲染先被执行（目前作为了解，后期讲解详细执行过程）

1.6 字面量

目标: 能说出什么是字面量
在计算机科学中，字面量(literal)是在计算机中描述事/物
比如:

我们工资是: 1000 此时 1000 就是数字字面量
'黑马程序员' 字符串字面量
还有接下来我们学的 [] 数组字面量 {} 对象字面量等等

2.变量

2.1 变量是什么？

白话: 变量就是一个装东西的盒子。
通俗: 变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。注意: 变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

2.2 变量的基本使用

声明变量: 要想使用变量，首先需要创建变量（也称为声明变量或者定义变量）

javascript

let 变量名

声明变量有两部分构成: 声明关键字、变量名（标识）
let 即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语

举例:

javascript

let age

我们声明了一个age变量
age 即变量的名称，也叫标识符

变量赋值: 定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个=，然后是数值。

注意: 是通过变量名来获得变量里面的数据
简单点，也可以声明变量的时候直接完成赋值操作,这种操作也称为变量初始化。

javascript

<script>
    //声明了一个age变量，同时里面存放了18这个数据
    let age = 18
</script>

更新变量: 变量赋值后，还可以通过简单地给它一个不同的值来更新它。

javascript

//正确写法
let age = 18;
age = 19;
document.write(age);

//错误写法 控制台会报错
let age = 18;
let age = 19;
document.write(age);

声明多个变量: 变量赋值后，还可以通过简单地给它一个不同的值来更新它。

javascript

//多个变量中间用逗号隔开。
let age = 18, uname = 'jack';

//一行只声明一个变量。
let age = 18;
let uname = 'jack';

实验案例1-弹出姓名
需求: 浏览器中弹出对话框: 请输入姓名，页面中输出：刚才输入的姓名

html

<!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 uname = prompt("请输入姓名");
        document.write(uname);
    </script>
</body>
</html>

变量案例2-交换变量的值
需求: 有2个变量: num1里面放的是10， num2里面放的是20最后变为num1里面放的是20，num2里面放的是10

html

<!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. 声明一个临时变量 temp
            2. 把num1的值赋值给 temp
            3. 把num2的值赋值给num1
            4. 把temp的值给num2
        */
        let num1 = 10;
        let num2 = 20;
        let temp;
        temp = num1;
        num1 = num2;
        num2 = temp;
        document.writeln(num1,"  ",num2)
    </script>
</body>
</html>

2.3 变量的本质

目标: 能够说出变量的本质是什么
内存: 计算机中存储数据的地方，相当于一个空间
变量本质: 是程序在内存中申请的一块用来存放数据的小空间

2.4 变量命名规则与规范

规则: 必须遵守，不遵守报错(法律层面)
规范: 建议，不遵守不会报错，但不符合业内通识(道德层面)

规则:
- 不能用关键字
- 关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等
- 只能用下划线、字母、数字、$组成，且数字不能开头
- 字母严格区分大小写，如 Age 和 age 是不同的变量
规范：
- 起名要有意义
- 遵守小驼峰命名法
- 第一个单词首字母小写，后面每个单词首字母大写。例: userName

2.5 变量拓展-let和var的区别

let和var区别:
在较旧的JavaScript，使用关键字 var 来声明变量，而不是 let。
var 现在开发中一般不再使用它，只是我们可能再老版程序中看到它。
let 为了解决 var 的一些问题。
var 声明:

可以先使用在声明 (不合理)
var 声明过的变量可以重复声明(不合理)
比如变量提升、全局变量、没有块级作用域等等
结论:
var 就是个bug，别迷恋它了，以后声明变量我们统一使用 let

2.6 变量拓展-数组

数组 (Array) ——一种将一组数据存储在单个变量名下的优雅方式

数组的基本使用目标: 能够声明数组并且能够获取里面的数据

javascript

//声明语法
//let 数组名 = [数据1,数据2,数据3,数据4...,数据n]
let names = ['小明','小刚','小红','小丽','小木']

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

取值语法

javascript

//数组名[下标]
let names = ['小明','小刚','小红','小丽','小木']
names[0]//小明
names[1]//小刚

通过下标取数据
取出来是什么类型的，就根据这种类型特点来访问

一些术语

元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的length属性获得

3.常量

3.1 常量的基本使用

概念：使用 const 声明的变量称为“常量”。
使用场景: 当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。
命名规范: 和变量一致
注意：常量不允许重新赋值,声明的时候必须赋值（初始化）
小技巧：不需要重新赋值的数据使用const
常量使用:

javascript

//声明一个常量
const G = 9.8
//输出这个常量
console.log(G)

//错误示范
G = 9.9
console.log(G)//控制台报错

4.数据类型

JS 数据类型整体分为两大类:

基本数据类型
引用数据类型

4.1 数据类型 – 数字类型（Number）

即我们数学中学习到的数字，可以是整数、小数、正数、负数。
JavaScript 中的正数、负数、小数等统一称为数字类型。

javascript

let age = 88//整数
let price = 99.99//小数
let score = -100//负数

注意事项:

JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认
Java是强数据类型例如 int a = 3 必须是整数

数字可以有很多操作，比如，乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。
数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。

+: 求和
-: 求差
*: 求积
/: 求商
%: 取模（取余数）开发中经常作为某个数字是否被整除

同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。
JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。

乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用 () 可以提升优先级
总结: 先乘除后加减，有括号先算括号里面的~~~

NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果
NaN 是粘性的。任何对 NaN 的操作都会返回 NaN

4.2 数据类型 – 字符串类型（string）

通过单引号（''）、双引号（""）或反引号(``) 包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

javascript

let name = '小明'//单引号
let gender = "男"//双引号
let goods = `小米`//反引号
let tel = '13666666666'//看上去是数字，实际上是字符串因为被引号包裹起来
let str = ''//空字符串

注意事项:

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
必要时可以使用转义符 \，输出单引号或双引号

字符串拼接

javascript

//场景： + 运算符 可以实现字符串的拼接。
//口诀：数字相加，字符相连
document.write('我叫' + 'jack')
let str = '我叫'
let name = 'jack'
document.write(str + name)

模板字符串

javascript

//使用场景
//拼接字符串和变量
//在没有它之前，要拼接变量比较麻烦
document.write('大叫好，我叫' + name + '，今年' + age + '岁')
//`` (反引号)
//在英文输入模式下按键盘的tab键上方那个键（1左边那个键）
//内容拼接变量时，用 ${ } 包住变量
document.write(`大叫好，我叫${name}，今年${age}岁`)

4.3 数据类型 – 布尔类型（boolean）

表示肯定或否定时在计算机中对应的是布尔类型数据。
它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。

javascript

let isCool = true
console.log(isCool)//true

4.4 数据类型 – 未定义类型（undefined）

未定义是比较特殊的类型，只有一个值 undefined。
什么情况出现未定义类型？
只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

javascript

let age//声明变量但是没有赋值
document.write(age)//输出 undefined

工作中的使用场景:
我们开发中经常声明一个变量，等待传送过来的数据。
如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来

4.5 数据类型 – null（空类型）

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

javascript

let obj = null
console.log(obj)//null

null 和 undefined 区别:

undefined 表示没有赋值
null 表示赋值了，但是内容为空 null 开发中的使用场景:
官方解释：把 null 作为尚未创建的对象
大白话：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

4.6 控制台输出语句和检测数据类型

javascript

let age = 18
let name = 'jack'
let flag = false
let buy
console.log(age)
console.log(name)
console.log(flag)
console.log(buy)

控制台语句经常用于测试结果来使用。
可以看出数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色

4.7 通过typeof关键字检测数据类型

typeof 运算符可以返回被检测的数据类型。它支持两种语法形式:

作为运算符: typeof x （常用的写法）
函数形式: typeof(x) 换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法。

javascript

let age = 18
let name = 'jack'
let flag = false
let buy
console.log(typeof age)
console.log(typeof name)
console.log(typeof flag)
console.log(typeof buy)

5.类型转换

5.1 为什么需要类型转换

JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。
使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

javascript

console.log('10000' + '2000') //100002000

此时需要转换变量的数据类型。
通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。

5.2 隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
规则:

+号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型

缺点:

转换类型不明确，靠经验才能总结

小技巧:

+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串

javascript

<script>
    console.log(1 + 1)//2
    console.log('pink' + 1)//pink1
    console.log(2 + 2)//4
    console.log(2 + '2') // 22
    console.log(2 - 2)//0
    console.log(2 - '2')  // 0
    console.log(+12)//12
    console.log(+'123')  // 转换为数字型
    console.log(+'123' + 11)//134
    console.log(+'123' + '11')//12311
</script>

5.3 显示转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。
为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

转换为数字型

Number(数据)
- 转成数字类型
- 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
- NaN也是number类型的数据，代表非数字
parseInt(数据)
- 只保留整数
parseFloat(数据)
- 可以保留小数
转换为字符型:
- String(数据)
- 变量.toString(进制)

javascript

<script>
    let str = '123'
    console.log(Number(str))//123
    console.log(Number('pink'))//NaN
    console.log(parseInt('12px'))//12
    console.log(parseInt('12.34px'))//12
    console.log(parseInt('12.94px'))//12
    console.log(parseInt('abc12.94px'))//NaN

    // -------------------
    console.log(parseFloat('12px')) // 12
    console.log(parseFloat('12.34px')) // 12.34
    console.log(parseFloat('12.94px')) // 12.94
    console.log(parseFloat('abc12.94px')) // NaN

    console.log(String(123))//123 String类型
    let num1 = 100
    console.log(num1.toString())//100 String类型
</script>

6.用户订单信息案例

需求: 用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息
分析:
①: 需要输入3个数据，所以需要3个变量来存储 price num address
②: 需要计算总的价格 total
③: 页面打印生成表格，里面填充数据即可
④: 记得最好使用模板字符串

html

<!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>
        h2 {
            text-align: center;
        }

        table {
            /* 合并相邻边框 */
            border-collapse: collapse;
            height: 80px;
            margin: 0 auto;
            text-align: center;
        }

        th {
            padding: 5px 30px;
        }

        table,
        th,
        td {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
<h2>订单确认</h2>


<script>
    // 1 用户输入
    let price = +prompt('请输入商品价格：')
    let num = +prompt('请输入商品数量：')
    let address = prompt('请输入收获地址：')
    // 2.计算总额
    let total = price * num
    // 3.页面打印渲染
    document.write(`
      <table>
          <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
          </tr>
          <tr>
            <td>小米青春版PLUS</td>
            <td>${price}元</td>
            <td>${num}</td>
            <td>${total}元</td>
            <td>${address}</td>
          </tr>
        </table>
    `)
</script>
</body>
</html>

1.JavaScript介绍 ​

1.1 JavaScript是什么 ​

1.2 JavaScript书写位置 ​

1.3 JavaScript注释 ​

1.4 JavaScript结束符 ​

1.5 JavaScript输入输出语法 ​

1.6 字面量 ​

2.变量 ​

2.1 变量是什么？ ​

2.2 变量的基本使用 ​

2.3 变量的本质 ​

2.4 变量命名规则与规范 ​

2.5 变量拓展-let和var的区别 ​

2.6 变量拓展-数组 ​

3.常量 ​

3.1 常量的基本使用 ​

4.数据类型 ​

4.1 数据类型 – 数字类型（Number） ​

4.2 数据类型 – 字符串类型（string） ​

4.3 数据类型 – 布尔类型（boolean） ​

4.4 数据类型 – 未定义类型（undefined） ​

4.5 数据类型 – null（空类型） ​

4.6 控制台输出语句和检测数据类型 ​

4.7 通过typeof关键字检测数据类型 ​

5.类型转换 ​

5.1 为什么需要类型转换 ​

5.2 隐式转换 ​

5.3 显示转换 ​

6.用户订单信息案例 ​

1.JavaScript介绍

1.1 JavaScript是什么

1.2 JavaScript书写位置

1.3 JavaScript注释

1.4 JavaScript结束符

1.5 JavaScript输入输出语法

1.6 字面量

2.变量

2.1 变量是什么？

2.2 变量的基本使用

2.3 变量的本质

2.4 变量命名规则与规范

2.5 变量拓展-let和var的区别

2.6 变量拓展-数组

3.常量

3.1 常量的基本使用

4.数据类型

4.1 数据类型 – 数字类型（Number）

4.2 数据类型 – 字符串类型（string）

4.3 数据类型 – 布尔类型（boolean）

4.4 数据类型 – 未定义类型（undefined）

4.5 数据类型 – null（空类型）

4.6 控制台输出语句和检测数据类型

4.7 通过typeof关键字检测数据类型

5.类型转换

5.1 为什么需要类型转换

5.2 隐式转换

5.3 显示转换

6.用户订单信息案例