JS基础学习目标

1.写代码能力！！！

2.逻辑思维！！

3.重点知识理解！

共识达成

每天的知识你学不会：
- 老师讲的你能听懂
- 你能够磕磕碰碰的写出来（达成目标）
- 自我独立完成（大牛）
三军未动，粮草先行
1. 代码写之前：先有注释（文字说明自己想要做什么）
2. 每做的一个案例：尝试做一下总结：通过当前案例主要要应用什么知识、难点在哪
3. 建议：写错的代码不要删除：注释上（补充说明文字：我为什么会出现这样的错误）

今日学习任务

01-能够记住javascript三个组成部分(ECMAScript、Dom、Bom)
02-能够使用typeof关键字检测数据类型
[ ] 03-变量
[ ] a.熟悉变量的声明/赋值/取值语法
b.了解第三方变量交换两个变量值的流程与原理
[ ] 04-运算符与表达式(算术运算)
[ ] a.算术运算符
b.复合算术运算符
c.自增/自减运算符
d.Math对象实现高级数学计算
e.掌握ES6的模板字符串语法

01-JavaScript入门

1.1-JavaScript简介（了解）

1.什么是Javascript？

javascript是一种编程语言
在浏览器上运行
js是可以嵌入到html中到一种脚本语言

2.学习Javascript的意义

一个前端网页主要由三门语言组成，他们之间是缺一不可的关系
- HTML：确定网页的结构
- CSS：确定网页的样式
- JavaScript：确定网页的行为(交互)
  - 众所周知，在前端开发中一个网页的源代码主要由三部分组成（HTML,CSS,Javascript）,其中HTML确定网页的结构，CSS确定网页的样式,而JavaScript则主要负责网页的行为（动态效果，交互事件等）。
JavaScript应用场景
- 1.网页特效
- 2.游戏开发(cocos2d-js)
- 3.服务端开发(Node.js)
- 4.命令行工具(Node.js)
- 5.桌面程序(Electron)
- 6.App(Cordova)
- 7.控制硬件-物联网(Ruff)
js作者有一句经典名言：凡是能用js实现的功能，最终都会用js来实现
3.JavaScript语言的组成

day01 - 图1

ECMAScript - JavaScript的核心（JS基础要学的）
- ECMAScript定义了JavaScript的语言规范
- JavaScript的核心：描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
DOM - 文档对象模型(WebAPI)
- 一套操作页面元素的API（别人提供好的一套方法）
- DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
BOM - 浏览器对象模型(WebAPI)
- 一套操作浏览器功能的API
- 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

1.2-JavaScript的三种写法（了解）

1-复习CSS代码的三种写法

1.外联样式：写在css文件中，使用link导入
- <link rel="stylesheet" href="路径/01-css外联样式.css">
  - css外联样式的本质其实就是字符串替换将下方这行代码替换成对应文件的所有代码
2.内联样式：写在style标签中,如果界面css样式比较简单可以使用，复杂的话不推荐
- <style>.div{background: green;}</style>
3.行内样式：不推荐，因为不便于维护
- <h1 style="background: green">你认真学习的样子真帅</h1>

2-JS代码三种写法

JavaScript也有三种书写方式，并且与CSS的三种书写方式几乎一致
1.外联样式：写在js文件中，使用script的src属性导入
- <script src="./01-JS外联写法.js"></script>
2.内联样式：写在script标签中,如果界面js代码较少可以使用，复杂的话不推荐
- <script >alert("这是JS内联样式")</script >
3.行内样式：不推荐，因为不便于维护
- <button onclick="window.alert('马云')">点我就告诉你黑马谁最帅</button>

3-细节注意点

1.无论是CSS还是JS的三种写法，当一个html文件存在多种写法时要记住HTML的代码是从上往下解析的
2.如果script标签没有src属性则表示内联样式，如果有src属性则表示外联样式，外联样式JS代码只能写在
js文件中而不能写在script标签中


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--1.外联，通常是做head中引入外部js-->
    <script src="路径/01-js外联写法.js"></script>    
    <!--2.内联，可以在需要位置书写，但是通常是做head中或者body的最后-->
    <script>
        alert('js内联')
    </script>
</head>
<body>
<!--3.行内，在具体需要效果的html元素内部-->
<div onclick="alert('js行内')">div</div>
    <!--
    总结：js三种写法
    1.外联写法：写在js中，使用script标签的src属性来导入
    2.内联写法:写在script标签中
    3.行内写法：不推荐，因为不便于维护
    注意事项：
    1.如果一个script标签有src属性（外联写法），此时内联的js代码不会执行
    2.src是js文件所在的路径，相对于当前html文件的路径，如js/01-js外联写法.js
    3.外联路径不一定是自己服务器上的相对路径，可以是外部服务器提供：如src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"
    4.外联写法、内联写法、行内写法，互不干扰，可以在一个html中使用多次（不同的内容）
-->
</body>
</html>

1.3-JS注释两种写法（了解）

代码注释的作用：
- 1.理清思路，方便自己以后阅读代码
- 2.规范编程，方便以后别人接手代码便于维护
- 3.新手阶段，建立自己的整体思维逻辑，通过注释将思路先完成，后指导写代码
JS注释有两种写法
- // 注释内容:单行注释：注释内容只能是一行，适用于注释内容较少
- /* 注释内容 */:多行注释：注释内容可以是多行，适用于注释内容较多，比如一行写不下


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
    //单行注释：注释内容只能是这一行
    /* 多行注释：注释内容可以是多行
    第一行
    第二行
    */
    /*
        强烈建议养成注释习惯
        1.写清楚自己要做什么，如
            从商店买个西瓜吃
        2.先写好，自己是如何理解要做的内容，怎么设计步骤，按照顺序来编写好注释，如
            1.确定兜里有足够买西瓜的钱
            2.找到商店
            3.选择西瓜
            4.支付钱
            5.切开西瓜
            6.吃到西瓜
        3.按照写好的思路来一步步用代码实现
    */    
    alert("JS注释");
</script>
</body>
</html>

1.4-JS常用五句话（了解）

JS中常用的五句话主要功能是用于调试以及浏览器简单的交互
- JS是一门面向对象高级编程语言，它对于逻辑思想的要求较高，所以在编写JS程序时我们很难做到一次性编写就可以完成所有功能
- 通常的做法是，我们逐步的去实现功能，每敲几行代码我们来打印一下检查代码是否有问题，如果没有就继续编写
  - 类似于我们使用HTML和CSS写静态界面时，并不是写完所有的代码才运行而是写一部分就看一下界面效果


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>千万别点，少年</h1>
<button onclick="document.write('点一次两百')">点我啊</button>
<script>
    //第一句话：弹出一个提示框，通常用于提示用户，也可以用于调试
    alert("hello world");
    //第二句话：打印某个数据的值，查看数据是否成功
    //这个写法不是给用户看的，而是给程序员自己调试看的
    console.log("欢迎大家来到黑马程序员");
    //第三句话：弹出一个输入框，可以用来输入数据
    prompt("0基础学习大前端是否ok？");
    //第四句话：弹出一个确认框，默认会有确定和取消按钮用于提示用户再次确认
    confirm("确定要开始学习前端？一旦开始就是停不下来的哦！");
    //第五句话：可以给body加内容
    //用的非常少，因为可能会把body原来的内容替换掉
    document.write("奔涌吧，后浪！");
</script>
</body>
</html>

1.5-js代码执行原理（了解）

1-计算机组成

1.软件
- 系统软件：windows，Linux，unix，OSX，iOS，android
- 应用软件：浏览器(chrome/ie/firefox)、QQ、Sublime、Word、VSCode
2.硬件
- 三大件：CPU（运算），内存（临时存储），硬盘（永久存储）
- 输入设备：鼠标，键盘，摄像头等
- 输出设备：显示器，打印机，投影仪等

day01 - 图2

day01 - 图3

2-代码运行的原理

day01 - 图4


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        程序运行原理：
        1.计算机将存储在硬盘中的html文件读取到内存中
        2.浏览器内核编译器开始编译代码（cpu只能处理二进制数据，需要将我们写的代码转成二进制）
        3.CPU处理与计算
        4.CPU将我们代码在运行时产生的数据保存到内存中
        5.系统将内存中的数据转换成人可识别的符号展示给用户（显示、存储等）
    -->
</body>
</html>

02-变量（重点）

1.1-变量声明/赋值/取值

1.实际开发因为数据是动态变化，不可能写死数据，因此需要使用变量来进行保存
2.变量（variable）：内存中用来保存数据的一块空间
3.变量作用：在内存中存储数据
4.语法:
- 1.声明变量:let 变量名
- 2.赋值：变量名 = 值
- 3.取值：直接写变量名即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /* 
        1.变量(variable)作用 ： 在内存中 存储数据
        2.变量语法
            a. 声明变量  ：  var 变量名;
            b. 变量赋值  ：  变量名 = 值
            c. 变量取值  :   变量名 
    */
    //需求：弹出一个输入框，保存用户输入的数据，并且在控制台打印
    //使用变量来保存数据
    let age = prompt('请输入你的年龄');
    console.log ( age );
    //1. 变量的作用：在内存中存储数据
    //变量(variable)本质：内存中的一块空间
    //2. 变量语法
    //2.1 声明变量 ：   let 变量名;
    let a;//let 关键字的作用就是内存开辟一块空间，这个空间的名字叫做a
    //2.2 变量的赋值：  变量名 = 数据
    //= ：赋值运算符：将右边的数据赋值给左边的变量
    a = 10;
    //2.3 变量的取值：直接使用变量名
    console.log ( a );//10
    //注意：这里打印的是a这个字符串，而不是变量a
    console.log ( 'a' );
</script>
</body>
</html>

图解变量工作原理

day01 - 图5

day01 - 图6

1.2-变量补充说明

本小节知识点
- 1.变量的初始化
- 2.变量的批量声明
- 3.变量批量声明赋值
- 4.变量的重复声明
- 5.变量的重复赋值
- 6.变量的值是另一个变量的值
- 7.JS老版本var声明变量
- 8.let和var的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /* 
        1.变量(variable)作用 ： 在内存中 存储数据
        2.变量补充说明
            a. 变量初始化
                语法： let 变量名 = 值;
            b. 变量重复声明
                语法 : let 变量名 = 值;
                特点 : 覆盖已经存在的变量
            c. 变量重新赋值
                语法 : 变量名 = 值;
                特点 : 先销毁旧值，然后存入新值
            d. 变量的值是另一个变量
                语法 : 变量名a = 变量名b
                特点 : 将变量b中的数据， 拷贝一份赋值给a
    */
    //1.变量的初始化：在声明的时候赋值
    let num = 10;//相当于(1)  let num;   (2)num = 10   这两行代码简写形式
    //2.变量的批量声明：同时声明多个变量
    let a,b,c;
    //3.批量声明的时候也可以赋值
    let num1 = 10,num2 = 20,num3 = 30;
    //4.变量的重复赋值：修改变量里面存储的数据
    num = 99;
    console.log ( num );//99
    //5.变量的值是另一个变量的值
    let n1 = 20;
    let n2 = n1;//将n1的值拷贝一份赋值n2
    console.log (  n2 );//20
    console.log ( n1 );//20
    //注意：这行代码的意思是将字符串'n1'赋值给变量n2，而不是变量n1的值
    //n2 = 'n1';
    //console.log ( n2 );//n1
    //6.var也可以声明变量，与let使用方法一样
    var n3 = 3;
    //7.let和var的区别：let同名变量只能声明一次，var可以声明多次（干掉原来的）
    let n4 = 4;
    //let n4 = 40;        // 错误：已经定义过，不能再定义
    var n5 = 5;
    var n5 = 50;        // 没问题：第二个n5会重新开辟内存，第一个n5被干掉（浪费内存）
    // 总结：实际开发的时候，我们都是使用let开发，很少使用var了
</script>
</body>
</html>

图解变量补充说明

day01 - 图7

day01 - 图8

1.3-变量命名规则与规范

规则：必须要遵守，否则会报错
- 规则是由语法决定的，无法更改
  - 1.变量只能以下划线、字母、$开头，后面接任意的数字、下划线、字母、$
  - 2.不能以JS的关键字作为变量名
    - 尽量不要使用关键字和保留字作为变量名，也不需要死记硬背，孰能生巧
    - 关键字：JS内置的一些关键字，代表着特殊的语法含义，不允许程序员擅自声明
    - 保留字：有可能在将来会成为关键字，现在可以用，但是并不能保证以后一直可以用
规范：程序员们在遵守规则时养成的一种习惯
- 规范是程序员的一种编码习惯，主要目的就是为了提高代码的易读性
  - 1.起名要有意义，最好用名词作为变量名
  - 2.使用驼峰命名法：变量名第一个单词首字母小写，后面如果有其他单词则每一个单词的首字母大写

day01 - 图9

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script>
    /* 
        1.变量(variable)作用 ： 在内存中 存储数据
        2.变量命名规则
            * 3.1规则：必须要遵守，否则会报错。由语法决定
                * 1.变量只能以下划线、字母、$开头，后面接任意的数字、下划线、字母、$
                * 2.不能以JS的关键字作为变量名
                * 3.js是严格区分大小写的， 例如：age与Age这是两个不同的变量名
            * 3.2规范: 大家都遵守的一种编码习惯，主要是为了提高代码的易读性
                * 1.起名要有意义，最好用名词作为变量名
     *          * 2.使用驼峰命名法：变量名第一个单词首字母小写，后面如果由其他单词则每一个单词的首字母大写
    */
    //1.这样命名虽然不会报错，但是代码一多，你自己都不知道是用来保存什么数据，别人看你代码也是一脸懵逼
    let ababababababbabab = "我就是这条街最靓的仔";
    //2.这样写代码会报错，因为不是以下划线、字母、$开头
    //let 123str = "123";
    //let #666 = "666";
    //3.这样写符合规则，不会报错
    let _123$$$_ssss6666 = "what?";
    //4.命名规范演示
    let age = 18;                //年龄
    let name = "张三";           //姓名
    let userName = "admin";        //用户名  驼峰命名法
    let passWord = "123456";    //密码 驼峰命名法
    let gender = "男";            //性别的英语单词
    let pwd = "1314520";        //密码password的简写
    let oldFe = "老铁";           //极其个别的英语名词不知道可以使用中文代替
</script>
</html>

1.4-练习：交换两个变量的值

day01 - 图10

<script>
    /*变量赋值的原理： 变量名 = 值
    1.先将变量内存空间中原本存储的数据销毁
    2.然后将等号右边的数据放入这个内存空间中
     */
    //需求：交换两个变量的值 让n2变成20，n1变成10
    let n1 = 10;
    let n2 = 20;
    //不能直接交换
    // n1 = n2;//将n2的值赋值给n1的时候，会变把n1原本的值销毁
    // n2 = n1;
    // console.log ( n1, n2 );//20 20
    //使用第三方变量来交换
    let temp = n1;                //先把n1的值存到变量temp中
    n1 = n2;                    //将n2的值赋值给n1
    n2 = temp;                    //将templ的值赋值给n2
    console.log ( n1, n2 );        //20,10
</script>

03-数据类型与直接量

1.1-数据类型与直接量介绍

1.在js中，只有符合数据类型的数据才能被识别
2.数据类型：软件在运行时，会产生数据，数据有很多种，不同的数据CPU的处理方式不同
所以需要对数据进行分类，不同的数据对应不同的类型
3.直接量（字面量）：只要是符合数据类型的数据都叫做直接量
- 顾名思义：让你从字面上理解这个数据
4.如果某行js代码报错，原因只有两个
- 第一：语法错误
- 第二：数据不识别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
        1.直接量 : 可以直接使用的数据  （能够被编译器识别的数据）
            * 哪些数据可以被识别 ：  必须要符合js的数据类型
        2.数据类型 : js代码在运行时会产生不同的数据，不同的数据存储与处理方式不一样，
所以要对数据进行分类,称之为数据类型。 
        * JS数据类型一起有6种，分为两大类
            a. 基本数据类型(5种)
            b. 复杂数据类型(1种)
        3.基本数据类型 :
            (1) 字符串类型(String) : 一切以单引号''  或  双引号""  引起来的内容
                * 作用：用于展示文本
            (2) 数值类型(Number) : 一切数学中的数字
                * 作用： 用于数学计算
            (3) 布尔类型(Boolean) : 只有两个值  true(真)   false(假)
                * 作用： 用于表示事物对立面 (条件成立 / 条件不成立)
            小技巧 ： 谷歌控制台， 字符串会显示黑色 ， 数字和布尔会显示蓝色
    */
    console.log('123');
    console.log(10);
    console.log(true);
    //console.log(哈哈);//程序会报错？为什么？
    /*
    注意：js代码报错原因
        (1) 编译器做两件事 ： 识别语法，处理(存储与计算)数据
        (2) 报错的原因只有两个 ： 
            a. 语法不识别 : SyntaxError
            b. 数据不识别 : ReferenceError
        (3) 一旦代码报错，程序终止运行，后面的代码都不会解析。
    */
</script>
</body>
</html>

1.2-基本数据类型

String类型

String：字符串
- 例如："张三",'abc'
- 范围：一切用双引号或者单引号包围起来的内容都是字符串
  - 作用：展示文本内容

Number类型

Number：数字
- 例如： 10 0.1
- 范围：数学中的一切数字，包含整数和小数
  - 作用：用于数学计算

Boolean类型

boolean：布尔类型
- 只有两个值：true、false
  - 作用：表示现实世界中事物的两种对立面真假、长短、开关、男女等
    - true表示真
    - false表示假

Undefined类型

undefined：变量只有声明，没有赋值
- null是一种空对象，只是目前没有具体内容

null类型

null：变量赋值为null
- 作用：不确定未来是什么数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
    //1 字符串类型：string     一切以单引号或者双引号引起来的内容
    //1.1 作用：在网页展示文本
    console.log ( "张三" );
    console.log ( '123' );
    console.log ( "" );//空字符串
    //1.2 注意点 ： 单引号和双引号没有区别。  主要用于字符串嵌套
    console.log('中国是世界上最"伟大"的国家');
    //2 数字类型：number   一切数学数字  (正数： 10 ， 负数 ： -10  小数：9.9)
    //2.1 作用：数学运算
    console.log ( 10 );
    //2.2 了解js中数字的极限范围
    console.log ( Number.MAX_VALUE );//最大的数字  1.7976931348623157e+308 无限接近正无穷
    console.log ( Number.MIN_VALUE );//最小的数字  5e-324   无限接近于0的正小数
    console.log ( Infinity );//正无穷
    console.log ( -Infinity );//负无穷
    //3. 布尔类型：boolean  只有两个值：true(真)和false(假)
    // 作用 ： 用于表示事物对立面 (条件成立 / 条件不成立)
    console.log ( true );
    console.log ( false );
    //4. undefined类型
    // 作用：只有声明，没有赋值，用于检查变量是否被使用
    let num;
    console.log( num );
    //5. null类型
    // 作用：变量不确定未来数据类型
    let a = null;
</script>
</body>
</html>

1.3- typeof关键字

作用：检测一个数据所属的类型
语法：typeof 数据 或者 typeof (数据)
- 会得到改属性所属类型的字符串: string number boolean


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        /*     
            1. 检测数据类型
                (1)语法
                    a.  typeof 数据
                    b.  typeof (数据)
                (2)结果 ： 得到该数据所属类型的字符串
                    typeof ('123')  ->  'string'
                    typeof (123)    ->  'number'
                    typeof (true)   ->  'boolean'
        */
        //1. typeof ：检测一个数据所属的类型,返回一个数据所属类型的字符串
        //语法 ： （1） typeof 数据   （2）typeof (数据)
        //关键字：具有特殊含义的英语单词
        console.log(typeof 123);    // "number"
        console.log(typeof '123');    // "string"
        console.log(typeof true);    // "boolean"
        console.log(typeof null);    // "object"：一类特殊对象
        console.log(typeof undefined);    // "undefined"
    </script>
</body>
</html>

课堂小彩蛋 ： 请说出下列代码的运行结果

typeof true;
typeof "true";
typeof (typeof true);
typeof (typeof "true");

04-运算符与表达式

1.运算符只是一种运算的符号，单独使用无意义，通常与需要计算的数据在一起组成表达式
2.表达式一定有结果，要么直接打印要么存入变量中

1.1-js中+号的作用

1.字符串连接符：连接字符串

* 条件 ： +号两边只要有一边是string类型
* 算术加法

条件 : +号两边都是number类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /* js中 +号 两个作用 
        1. 字符串连接符 ： 连接字符串
            * 条件 ： +号两边只要有一边是string类型
        2. 算术加法
            * 条件 : +号两边都是number类型
    */
    //1 字符串连接符：将 + 号 两边的字符串连接在一起组成一个新的字符串
    //前提条件：  + 号的两边，只要有一边是string类型
    let name = '马云';
    //console.log ( "我的名字是name" );//此时name是字符串的一部分，无法取到变量的值
    console.log ( "我的名字是:" + name);
    //示例：
    let res1 = '10' + 10;
    console.log ( res1 );//1010
    //2.数学加法
    //前提条件： 当 + 号两边都是number类型的时候，代表数学加法运算
    let res2 = 10 + 10;
    console.log ( res2 );//20
</script>
</body>
</html>

1.2-算术运算符与算术表达式

运算符只是一种运算的符号，由运算符参与的式子称之为表达式
表达式一定会得到一个运算的结果：要么直接打印这个结果（直接量），要么用变量保存

<script>
    /**1.算术运算符：数学中的算术运算
     +：加法
     -：减法
     *：乘法
     /：除法
     %：求余（求模运算）
     2.运算符只是一种运算的符号，由运算符参与的式子称之为表达式
     3.算术表达式（运算式）：由算术运算符组成的式子    例如： 数字1 + 数字2
     4.表达式一定会得到一个运算的结果：要么直接打印这个结果（直接量），要么用变量保存
     5.算术运算符的优先级与小学数学学的一致：小括号>乘除模>加减
     */
    /**加法*/
    console.log ( 1 + 1 );        //直接打印算术表达式的结果
    let num = 100 + 50;            //用变量保存表达式的结果
    console.log ( num );        //150
    /**减*/
    console.log ( 2 - 1 );        //1 数值
    /**乘法*/
    console.log ( 20 * 3 );        //60
    /**除法
     * 1.如果两数相除的结果是一个无理数（无限不循环小数）或者无限循环小数，则无法完整的表示所有的小数
     一般这种情况不影响开发，可以忽略
     * 2.数学中0不能作为除数，JS里也一样
     如果作为除数会得到一个关键字：Infinity，代表无穷大的意思
     */
    console.log ( 10 / 3 );        //3.333333
    console.log ( 10 / - 2 );    //-5
    console.log ( 10 / 0 );        //Infinity无穷大
    /**求模*/
    console.log ( 10 % 3 );        //1
</script>

1.3-复合算术运算符

符合算术运算符是算术运算符的一种简写形式
- num += 5 只是 num = num + 5的简写形式，他们之间完全等价

day01 - 图11

+=: 在自身值的基础上再加多少
-=：在自身值的基础上减多少
*=: 在自身值的基础上乘多少
/=: 在自身值的基础上除多少
%=：在自身值的基础上模多少

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /**复合算术运算符：简化算术运算的代码
        +=: 在自身值的基础上再加多
        -=：在自身值的基础上减多
        *=: 在自身值的基础上乘多
        /=: 在自身值的基础上除多
        %=：在自身值的基础上模多少
     */
    // +=
    let num1 = 10;
    num1 += 10;                //这行代码相当于 num1 = num1 + 10 的简写形式
    console.log ( num1 );    //20
    // -=
    let num2 = 70;
    num2 -= 10;             //相当于  num2 = num2 - 10;
    console.log(num2);        //60
    // *=
    let num3 = 20;
    num3  *=  4;              //相当于  num3 = num3 * 4;
    console.log(num3);        //80
    // /=
    let num4 = 90;
    num4 /= 3;                //相当于 num4 = num4 / 3
    console.log(num4);        //30
    // %=
    let num5 = 10;
    num5 %= 3;                 // num5 = num5 % 3;
    console.log(num5);        //1
    // 注意：不管是哪种复合运算，都是左边与右边的结果进行运算
    let num6 = 10;
    num6 -= 10 - 5;            //相当于 num6 = num6 - (10 - 5)
    console.log(num6);        //5
</script>
</body>
</html>

1.4-自增/自减运算符

1.自增/自减都称之为自操作运算
- ++：自增，自己+1
- —：自减，自己-1
2.自操作运算都是一元表达式，即只有一个变量参与运算
3.自操作运算不能用于直接量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //1.自增运算符 ++
    //后置自增表达式:   num++
    let num1 = 10;
    num1++;                    //这行代码相当于 num1 = num1 + 1 的简写形式
    console.log ( num1 );    //11
    //2.前置自增
    let num2 = 20;
    ++num2;                    //这行代码相当于 num2 = num2 + 1 的简写形式
    console.log( num2 );    //21
    //注意：以上内容说明：如果自操作是独立一行代码，不参与其他运算或者输出，那么
    //     *** 前置和后置没有区别    
    //3.前置和后置区别
    let num3 = num4 = 1;    //1赋值给num4，然后赋值给num3，相同值的不同变量简写初始化
    console.log(num3++);    //1 先保留num3的原始值1，用于输出，然后自增为2
    console.log(++num4);    //2 先运算num4自增，num4为2，然后2用于输出
    console.log(num3,num4);    //2 2
    //注意：以上内容说明：如果自操作是与其他操作一起运算，那么
    //     ***前置会先改变自己，后参与其他运算；后置是先保留自己参与运算，后改变自己
</script>
</body>
</html>

自操作内存效果图

day01 - 图12

day01 - 图13

—自操作与++操作一致，只是操作的结果是自身的值 - 1

<script>
    //1.自减运算符 --
    //自减表达式： num--
    let num5 = 20;
    num5--;                    //这行代码相当于 num2 = num2 - 1 的简写形式
    console.log ( num2 );    //19
    //2.前置自减
    let num6 = 40;
    --num4;
    console.log( num6 );    //39
    //3.自减操作参与其他运算
    let num7 = num8 = 1;
    console.log(num7--,--num8);    //1 0
</script>

课堂小菜单: 请说出以下代码的结果

let a = 10;
let b = a++ + a++;
console.log(b);

1.5-Math高级数学计算

内置的内容要懂得记重点：当前重点Math，其他的不用特别记
- MDN官网：https://developer.mozilla.org/zh-CN/

day01 - 图14

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /** 
     1. Math作用 ： 高级数学计算
     2. 常用
        a. Math.ceil(数字) ：向上取整 
        b. Math.floor(数字) ：向下取整 
        c. Math.max(数字1,数字2,...) ：求最大值
        d. Math.min(数字1,数字2,...) ：求最小值
        e. Math.random() ：返回 (0,1) 之间的小数
    */
    //1.圆周率
    let pi = Math.PI;
    console.log ( pi );                        //3.1415926.....
    //2.绝对值:一个数字与坐标原点的距离
    console.log ( Math.abs ( - 2 ) )        //2
    //3.天花板函数：向上取整
    console.log ( Math.ceil ( 10 ) );        //整数得到自身
    console.log ( Math.ceil ( 10.1 ) );        //11,小数则向上取整
    console.log ( Math.ceil ( -10.1 ) );    //-10
    //4.地板函数: 向下取整
    console.log ( Math.floor( 8 ) );        //8 整数得到自身
    console.log ( Math.floor ( 7.9 ) );        //7,小数则向下取整
    console.log ( Math.floor ( -7.9 ) );    //-8
    //5.四舍五入取整
    console.log ( Math.round ( 4.5 ) )        //5
    console.log ( Math.round ( 3.3 ) )        //3
    console.log ( Math.round ( - 9.9 ) )    //-10
    //6.求最大值。  数值数量不限使用逗号分割
    console.log ( Math.max ( 50, 99, 888, 123 ) )    //888
    //7.求最小值。  数值数量不限使用逗号分割
    console.log ( Math.min ( 50, 99, 888, 123 ) )    //50
    //8.生成一个随机数  范围 0 - 1 之间的小数
    console.log ( Math.random () );
    //如果想得到0-100之间的整数  可以乘以一百然后向下取整即可
    console.log ( Math.floor ( Math.random () * 100 ) );
    //9.幂运算 Math.pow(x,y)  返回x的y次幂
    console.log ( Math.pow ( 2, 8 ) );                //256    2的八次方
</script>
</body>
</html>

1.6-常量const关键字【ES6】

1.let关键字定义的叫做变量，变量的值可以随时随地随便改变
2.有的数据希望一开始定义好，后面就不发生变化，那就需要用到const关键字
- const是ES6的语法规范（为大型项目而生）
- const声明的叫做常量（固定量）
- 常量在声明的时候就必须赋值，且后续不再可以改变（只能使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /** 
     1. const定义常量，固定不让变化（只能使用）
    */
    //1.圆周率
    let pi = Math.PI;         // pi为3.141592653589793
    pi = 3.14;                // pi改为3.14
    const PI = Math.PI;
    //PI = 3.14;            // 语法错误
</script>
</body>
</html>

1.7-模板字符串【ES6】

ES6提供了一种新的写描述字符串的方式：反引号（数字键1旁边的英文状态下的符号）
作用
- 和引号标记字符串的效果一样
- 可以解决引号字符串过长不能换行的问题
- 可以解决字符串连接需要使用+号的问题
```
`${数据}`
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //1.引号字符串，不方便换行（保留结构）
    /*
        使用引号字符串实现div输出
        <div class="goods">
            <a href="#">华为mate40</a>
        </div>
    */
    //写在一行太长，且没有结构感，所以一般使用+号连接字符串
    let str = '<div class="goods">';
    str += '<a href="#">华为mate40</a>';
    str += '</div>';
    document.write(str);
    //2.模板字符串就可以直接换行保护结构
    let str = `<div class="goods">
            <a href="#">华为mate40</a>
        </div>`;
    document.write(str);
    //3.模板字符串里面可以方便解析变量，简化字符串的拼接
    let data = '华为mate40pro';
    let html = `
        <div class="goods">
            <a href="#">${data}</a>
        </div>
    `
    //注意：后面学习高级框架部分的时候，会经常使用模板字符串方式   
</script>
</body>
</html>

05-课后作业

课后作业

1.要求用户输入两个数字，然后算出两个数字的差相减
- 要求用户输入两个数字，然后算出两个数字的积相乘
- 要求用户输入两个数字，然后算出两个数字的商相除
2.随机生成0-100之间的三个数字，打印出每个数字，并打印出里面的最大值，最小值（★）
3.买鸡蛋的故事：
- 用户输入鸡蛋的数量，我们计算并打印出一共需要多少个篮子（一个篮子放10个鸡蛋）（★★）
4.站方队的故事：
- 写一个程序，输入总人数，每10人一列，要求站成一个方队（每队必须保持10人，不够就不要了），可以排多少列，余多少人。
  例：一共有30个人，一共可以排3列，余0个
  一共有31个人，一共也只可以排3列（因为每对必须保持10个人，不够就不要了），余1个
5.租房子的故事：
- 老王在广州有一套房子，租金整套 10000 一个月。让用户输入租房人数（合租），并打印出每个人的房租。
6.努力和不努力的区别
- 一个人每天努力一点，一年后的变化：每天都是前一天的1.01倍，一年365天，求最后一天是多少？：Math.pow(1.01,365)
- 一个人每天懈怠一点，一年后的变化：每天都是前一天的0.99倍，一年365天，求最后一天是多少？：Math.pow(0.99,365)
7.请说出下面程序的值(★★★)

    let a = 12;            
    let b = 10;
    let c = 5;        
    let d = a++; 12                
    let e = ++b;    11            
    let f = c + d++; 5 + 12 = 17    d++=13    
    let g = c + ++d; 5 + 14 = 19    ++d=14    
    算出d,e,f,g的值。

8.用变量保存，并打印（★）
- 要求用户输入两个数字，然后算出两个数字的和相加
  - 疑惑点：代码的结果不是相加，而是字符串连接！
  - 思考：什么样的情况， + 作用是连接符？
  - 如何解决？：需要预习第二天的 数据类型转换

day01

JS基础学习目标

今日学习任务

01-JavaScript入门

1.1-JavaScript简介（了解）

1.什么是Javascript？

2.学习Javascript的意义

3.JavaScript语言的组成

1.2-JavaScript的三种写法（了解）

1-复习CSS代码的三种写法

2-JS代码三种写法

3-细节注意点

1.3-JS注释两种写法（了解）

1.4-JS常用五句话（了解）

1.5-js代码执行原理（了解）

1-计算机组成

2-代码运行的原理

02-变量（重点）

1.1-变量声明/赋值/取值

图解变量工作原理

1.2-变量补充说明

图解变量补充说明

1.3-变量命名规则与规范

1.4-练习：交换两个变量的值

03-数据类型与直接量

1.1-数据类型与直接量介绍

1.2-基本数据类型

String类型

Number类型

Boolean类型

Undefined类型

null类型

1.3- typeof关键字

04-运算符与表达式

1.1-js中+号的作用

1.2-算术运算符与算术表达式

1.3-复合算术运算符

1.4-自增/自减运算符

1.5-Math高级数学计算

1.6-常量const关键字【ES6】

1.7-模板字符串【ES6】

05-课后作业

课后作业