JavaScript基础

1.JavaScript历史

布兰登.艾奇在1995年利用10天完成JavaScript设计。最开始在网景工作，网景最初命名为LiveScript,后来在与Sun合作之后将其改名为JavaScript，因为sun公司的主打是java，所以为了蹭javascript的热度，但内部实现原理与Java不同。

2.JavaScript是什么

JavaScript是世界上最流行的语言之一，是一种运行在客户端（自己的电脑）的脚本语言（Script是脚本的意思）
脚本语言：不需要编译，运行过程中有js解释器(js引擎)逐行来进行解释并执行
现在也可以基于Node.js技术进行服务器端编程。

3.JS的用处

1. 最开始的作用是表单动态验证，在没有JS之前，要经过后台验证表单，给服务器带来很大压力。
2. 网页特效
3. 服务端开发(Node.js)
4. 桌面程序（Electron）
5. APP（Cordova）
6. 控制硬件-物联网（Ruff）
7. 游戏开发（cocos2d-js）

4.HTML/CSS/JS的关系

HTML决定看到什么
CSS决定好不好看
JS决定功能

5.浏览器执行JS简介

浏览器分成两部分 渲染引擎和JS引擎
渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

浏览器本身并不会执行JS代码，而是通过内置JS引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码转化为二进制机器语言，然后由计算机去执行。

6.JS组成

ECMAScript DOM BOM
ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用广泛。

Jscript与JavaScript的本质是一样的。现在最流行的是JavaScript。ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵循的一套JS语法工业标准。
DOM——文档对象模型，是由W3C组织推荐的处理看扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作
BOM——浏览器对象模型

7.JS分类

1. 行内式的js
2. 内嵌式的js
3. 外部js k

8.JS输入输出语句

alert(msg) 浏览器弹出警示框
console.log(msg) 浏览器控制台打印输出信息
prompt(info) 浏览器弹出输入框，用户可以输入

9.变量

1. 变量概述
   变量是程序在内存中申请的一块用来存放数据的空间
2. 变量使用
   变量在使用时分为两步：1.声明变量 2.赋值
   声明变量：var age; var 是一个关键字，是variable变量的意思
   
3. 语法扩展
   更新变量，一个变量被重新赋值后，它原有的数据就会被替换。
   
4. 命名规范
   驼峰命名法。首字母小写，后面单子首字母大写
   尽量不要使用name作为变量名，因为有的浏览器是有含义的
   小结
   

数据类型

变量是用来存储值的所在处，他们有名字和数据类型。变量的数据类型决定 如何将代表这些值的位村存储到计算机的内存中。JS是一种**弱类型或者说动态语言**。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
js是动态语言 变量的数据类型是可以变化的。

1. js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
2. JS把数据类型分为两类：简单数据类型(Number,String,Boolean,Undefined,Bull)；复杂数据类型(object)
   
3. 在JS中八进制前面加0，十六进制前面加0x
4. 数字型的特殊值
   
5. isNAN()用来判断非数字，并且返回一个值，如果是数字返回的是false 如果不是数字返回的是true。判断是否是非数字
6. String字符串型
   只要是字符串类型一定要加引号，最好是单引号
7. 字符串转义字符
   都是用\开头 但要写到引号里面
8. 字符串长度
   字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。
9. 字符串拼接 只要有字符串类型的和其他类型相拼接，最终的结果是字符串类型
   数值想加，字符相连
   
   变量和字符串相连的口诀

 // 变量不要写在字符串里面
        var age = 16;
        console.log('今年' + age + '岁');

10. 布尔型
    

var flag = true;
        var flag1 = false;
        console.log(flag + 1);
        console.log(flag1 + 1);
        var str;
        console.log(str);
        var variable = undefined;
        console.log(variable + 'pink');

任何数据类型和字符串相连最后结果都是字符串
undefined 和 数字想加最后的结果是NaN、null和数字想加最后的结果是数字。因为undefined是未定义的，null是空值。

11. typeof variable
12. prompt取过来的值 是字符型的
13. 字面量
    是在源代码中一个固定值的表示法。
    数字字面量、字符串字面量、布尔字面量
14. 数据类型转化：
    使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说就是把一种数据类型的变量转换成另外一种数据类型。
    

 var num = 10;
        // 1.变量.toString
        var str = num.toString();
        console.log(typeof str);
        // 2.String(变量)
        console.log(String(num));
        // 3.利用加号品拼接字符串的方法,隐式转换
        console.log(num + '');

15. 转换为数字型
    
    大小写敏感

var age = prompt('请输入');
        // 1.parseInt(变量); 可以把字符型的转换为数字型 得到的是整数
        console.log(parseInt(age));
        console.log(parseInt('120px')); //120会去掉单位
        // 2.parseFloat(变量)
        console.log(parseFloat('3.14'));
        console.log(parseFloat('rem2.12px')); //NaN 从左开始往右检查，当碰到 r 时发现不是数字，直接输出NaN.

an
案例

 var age = prompt('请输入你的出生年份');
        console.log(age);
        var now = 2020 - parseInt(age);
        // alert(now);
        var now1 = 2020 - age;
        // alert(now1);
        var now2 = 2020 - Number(age);
        alert(now2);

案例2 两个数字相加

var num = prompt('第一个数字');
        var num2 = prompt('第二个数字');
        var total = parseFloat(num) + parseFloat(num2);
        var total2 = Number(num) + Number(num2);
        alert('您输入的数字是' + total2);

16. 转换为布尔型
    除了 ‘’,0,NanN,null,undefined之外都为true。
17. 解释型语言、编译型语言
    
18. 标示符、关键字、保留字
    
    
    
    

JavaScript 运算符

1. 运算符也被称为操作符，是用于实现赋值，比较和执行算数运算等功能的符号。
2. 算数运算符：
   浮点数 算数运算符里面会有问题（因为小数已经很小了，它要把小数转化成二进制，再进行运算，所以会有一定的误差）
   浮点数不能进行相比较，是否相等
3. 表达式：由数字、运算符、变量等组成的式子
4. 递增（++），递减（–）
   必须和变量配合使用
   ==前置递增运算符：num = num + 1; ==》++num 先加1，后返回值
   后置递增运算符： var n = 1;console.log(n++ + 10); 输出11 先返回值，再加1
5. 
6. 比较运算符
   返回的是true 或者 false
   
7. 逻辑运算符
   逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断。
   逻辑与 && and 两侧都为true 结果才是true
   逻辑或 || or 两侧都为false结果才为假
   逻辑非 not
   ！true 结果为false
   ！false 结果为true
   == 短路运算（逻辑中断）,当有多个表达式时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值==
   逻辑与短路运算 如果表达式1结果为真 则返回表达式2；如果表达式1为假，则返回表达式1；如果有空的或者否定的为假，其余是真的 0 ‘’ null undefined NaN
   逻辑或短路运算 如果表达式1结果为真 则返回表达式1；如果表达式1结果为假则返回表达式2.
   总之，短路运算就是当判断结束时，返回当前值。
   eg:

 var num = 0;
        console.log(123 || num++); //123
        console.log(num); //0

8. 赋值运算符

 var um = 10;
        // um = um + 2;
        um += 2; /////////////////////////////注意： += 中间没有空格但是两边有空格
        console.log(um);

9. 优先级：
   
   一元运算符里面的逻辑非优先级很高
   逻辑与比逻辑或优先级高

流程控制

1. 简单理解 ： 流程控制就是来控制我们的代码按照什么结构顺序来执行。
2. 分类：顺序结构、分支结构、循环结构
   
3. 分支结构：
   由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码，从而得到不同的结果
   if语句
   执行思路：如果if里面的条件表达式结果为真，则执行大括号里面的语句。如果if条件表达式结果为假，则不执行大括号里面的语句，则执行后面的代码
   
   加粗样式判断平闰年

 var a = prompt('请输入年份：');
        if (a % 4 == 0 && a % 100 != 0 || a % 400 == 0) {
            alert(a + '是闰年');
        } else {
            alert(a + '是平年');
        }

多分支语句
if () {
} else if （） {
} else if () {
} else {
}
成绩分级案例

var grade = prompt('请输入你的成绩');
        if (grade >= 90) {
            alert('您的评分为A');
        } else if (grade >= 80) {
            alert('您的评分B');
        } else if (grade >= 70) {
            alert('您的评分为C');
        } else if (grade >= 60) {
            alert('您的评分为D');
        } else {
            alert('您的评分为E');
        }

三元表达式 可以代替if else的式子
条件表达式 ? 表达式1 : 表达式2
如果条件表达式结果为真 则返回表达式1的值 如果表达式结果为假 则返回表达式2的值

 var num = 10;
        var result = num > 5 ? '是的' : '不是的'; //可以代替下面的代码
        console.log(result);  //可以代替下面的代码
        if (num > 5) {
            result = '是的';
        } else {
            result = '不是的';
        }

4. switch语句,也是多分支语句 执行效率更高
如果值是固定的则适合用switch,如果是范围的，用if更好

利用表达式的值 和 case 后面的选项值相匹配 如果匹配上则执行该语句，如果都没有匹配上则执行default语句
语法结构
switch (表达式) {
case value1 :
执行语句1；
break;
case value2:
执行语句2;
break;
…
default:
执行最后一句；
}

1. 我们开发里面 表达式我们经常写成变量
2. num的值和case里的值是全等的关系 必须是值和数据类型一致才可以 num ===1
3. 如果当前case里没有break，则不会退出switch 继续执行下一个case

###switch 语句与if else if语句的区别###

var num = prompt('请输入分数');
        // 转换成数字
        转换成整数、num/10  会有余数所以不正确
        switch (parseInt(num / 10)) {
            case 10:
                alert('A');
                break;
            case 9:
                alert('A');
                break;
            case 8:
                alert('B');
                break;
            default:
                alert('over');

for循环

1. prompt 输出的是字符串类型

2. 乘法口诀 var str = ''; for (var i = 1; i <= 9; i++) { for (var x = 1; x <= i; x++) { str = str + (x + '*' + i + '=' + i * x) + ' '; // console.log(x + '*' + i + '=' + i * x); } console.log(str + '\n'); var str = ''; }
   

3. ` var str = ‘’;
   for (var i = 10; i >= 0; i–) {
   for (var x = 0; x <= i; x++) {
   str = str + ‘☆’;
   }
   console.log(str + ‘\n’);
   var str = ‘’;

    }`
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020022012500670.png)
    **倒三角 方法二** 
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200220130753334.png)
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200220132203673.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1ptb25nbw==,size_16,color_FFFFFF,t_70)
   

while循环

1. 里面应该有计数器，初始化变量
2. 里面应该也有操作表达式，完成计数器的更新，防止死循环
3. var i = 1; var num = 0; while (i <= 100) { num += i; i++; } console.log(num);

do while循环

至少执行一次循环体

do {
循环体
} while (条件表达式)
执行思路跟while不同的地方在于 do while 先执行一次循环体 再判断条件 如果条件表达式结果为真则继续执行循环体。

continue 关键字

1. continue 关键字 用于立即跳出本次循环，继续下一次循环（本次循环体中continue之后的代码就会少执行）

break关键字

1. 马上退出整个循环

js命名规范和语法格式

操作符两侧各保留一个空格
单行注释： //
多行注释：/**/
括号左右两侧加空格
后一个大括号与配对的第一个字母对齐

ATM机案例：很神奇

 var money = 100;
        var j = prompt('请输入：\n 1.存钱 \n 2.取钱 \n 3.显示余额 \n 4. 退出');
        for (var i = j; i = j; i++) {
            if (i == 1) {
                var n = prompt('请输入您要存的钱数：');
                money = money + parseFloat(n);
                alert('你目前的余额为' + money);
                var j = prompt('请输入：\n 1.存钱 \n 2.取钱 \n 3.显示余额 \n 4. 退出');
            } else if (i == 2) {
                var m = prompt('请输入您要取的金额：');
                money = money - parseFloat(m);
                alert('您目前剩余金额为' + money);
                var j = prompt('请输入：\n 1.存钱 \n 2.取钱 \n 3.显示余额 \n 4. 退出');
            } else if (i == 3) {
                alert('您的余额为' + money);
                var j = prompt('请输入：\n 1.存钱 \n 2.取钱 \n 3.显示余额 \n 4. 退出');
            } else if (i == 4) {
                alert('正在退出.....');
                break;
            }
        }