JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts（1）

此篇仅包含JS语法基础

编程语言

分为机器语言，汇编语言，高级语言（C++,Pyhton,Jave…)；
高级语言需要翻译器翻译成计算机能识别的；

计算机基础

计算机组成

JavaScript初识

JS的概念

JS是一种运行在客户端的脚本语言（Script）是脚本的意思；脚本语言：不需要编译，运行过程由js解释器（js引擎）逐行来进行解释并执行；现在也可以基于Node.js技术进行服务器端编程；

JS的作用

HTML/CSS/JS的关系

HTML/CSS标记语言-描述类语言
JS脚本语言-编程类语言

浏览器执行JS简介

浏览器分为两部分：渲染引擎和JS引擎

浏览器本身并不执行JS代码，而通过内置JS引擎（解释器）执行JS代码，JS引擎执行代码时逐行解释每一句源码（转为机器语言）然后计算机去执行，所以JS语言归为脚本语言，会逐行解释执行。

JS的组成

js有三种书写位置，分为行内、内嵌、外部。
js用单引号，html用双引号；
ECMA简称es

js输入输出语句

    // 这是一个输入框
    prompt('请输入您的年轻');
    // alert弹出警示框 输出的 展示给用户的
    alert('计算的结果是：');
    // console 控制台输出，给程序员测试用
    console.log('我是程序员能看到的');

给程序员看到的在检查网页的console里看；想要输出多个变量用逗号分开即可~

变量

什么是变量

变量是存放数据的容器，通过变量名获取数据，甚至修改数据；
本质：变量是内存中申请的存放数据的一块空间；

变量的使用

声明变量

var age;

    // 1.声明了一个age的变量
    var age;
    // 2.赋值,把值存到变量中
    age = 18;
    // 3.输出结果
    console.log(age);
    // 变量的初始化
    var myname = 'xiaohu';
    console.log(myname);

变量应用（弹出输入的用户名）

    // 用户输入名字 存储到myname的变量里
    var myname = prompt('请输入您的用户名');
    // 弹出用户名
    alert(myname);      

变量的语法扩展

    // 1.更新变量
    var myname = '小苹果';
    console.log(myname);
    myname = '肖央';
    console.log(myname);
    // 2.声明多变量
    var age = 18,
        address = '火影村',
        gz = 2000;
    // 3.声明变量的特殊情况
    // 3.1 只声明不赋值 结果是undefined 未定义的
    var sex;
    console.log(sex);
    // 3.2不声明不赋值,会报错,且不会继续执行后面的内容
    // console.log(apple);
    // 3.3不声明只赋值,可以,但这个是全局变量
    sex = 'girl';
    console.log(sex);

变量命名规范

交换两个变量值

    var apple1 = '青苹果';
    var apple2 = '红苹果';
    var temp;
    temp = apple1;
    apple1 = apple2;
    apple2 = temp;
    console.log(apple1);
    console.log(apple2);

数据类型

简介

在计算机中，不同的数据所需占用的存储空间不同

变量的数据类型

JS是一种弱类型或动态类型的语言，变量是不确定它属于哪张数据类型，只有程序在运行过程中根据等号右边的值来确定，变量的数据类型是可以变化的；

数据类型的分类

JS分为两类：
简单数据类型 复杂数据类型(引用数据类型，object function array)

简单数据类型（基本数据类型）

ES6新增symbol

数字型

八进制：在数值前面加0，log后显示的是转换成的10进制。
十六进制：在数值前面加0x 0-9 a-f

    var num2 = 010;
    console.log(num2);
    var num3 = 0xa;
    console.log(num3);
    // 数字型的最大值
    alert(Number.MAX_VALUE);
    // 1.7976931348623157e+308
    // 数字型的最小值
    alert(Number.MIN_VALUE);
    // 5e-324
    // 数字型的最大值
    alert(Number.MAX_VALUE);
    // 1.7976931348623157e+308
    // 数字型的最小值
    alert(Number.MIN_VALUE);
    // 5e-324
    // 无穷大 Infinity
    console.log(Number.MAX_VALUE * 2);
    // 无穷小 -Infinity
    console.log(-Number.MAX_VALUE * 2);
    // 非数字 NaN
    console.log('xiaopingg' - 100);
    // isNaN()判断是否不是数字,用于验证用户输入的是不是数字
    console.log(isNaN(12));

字符串型

转义符要在引号里面
注意是反斜杠！

    // 关于引号外单内双(或外双内单)
    var str = '我是一个"白富美"程序媛';
    console.log(str);
    var str1 = "我是一个'白富美'\n的程序媛";
    console.log(str1);
    var str = 'my name is andy';
    console.log(str.length);
    //.length检测字符串长度

+号口诀，数值相加，字符相连

    // 关于引号外单内双(或外双内单)
    var str = '我是一个"白富美"程序媛';
    console.log(str);
    var str1 = "我是一个'白富美'\n的程序媛\\";
    console.log(str1);
    //length检测字符串长度
    var str = 'my name is andy';
    console.log(str.length);
    //字符串拼接+ 只要有字符串和其他类型拼接,最终是字符串型
    console.log('沙漠' + '骆驼' + 10);
    console.log(12 + 12);//24
    console.log('12' + 12);//1212
    var age = 18
    console.log('pink' + age + '岁');

解释型语言和编译型语言

js是解释型语言 java是编译型语言；

运算符

算术运算符

浮点数精度问题

表达式和返回值

表达式由数字、运算符、变量等组成的式子；
结果就是返回值，如2=1+1， 2就是返回值；

前（后）置自增（减）运算符

必须和变量一起使用噢~

    var num = 1;
    num = num + 1;//++num；
    console.log(num);//2
    console.log(++num + 10);//13
    age = 10;
    age++;
    console.log(age);//11
    console.log(age++ + 10);//21 不是22噢~先返回11进行运算，后来age才变化；
    console.log(age);//12

前置自增和后置自增如果单独使用效果是一样的，后置自增先返回原值后自加1；见上面age的例子；代码常用的是后置递增且独占一行。

比较运算符

    // 等号==会自动转换数据类型 ！=不等
    console.log(18 == '18');//true
    //全等===数据类型和值都要一样 !==不全等
    console.log(18 === '18');//false

    var num1 = 10;
    var num2 = 100;
    var res1 = num1 > num2;//false
    var res2 = num1 == 11;//false
    var res3 = num1 != num2;//true
    console.log(res1);
    console.log(res2);
    console.log(res3);

逻辑运算符

      // 逻辑与&&
    console.log(3 > 5 && 3 > 2);//false
    console.log(3 < 5 && 3 > 2);//true
    // 逻辑或 ||
    console.log(3 < 5 || 3 < 2);//true
    console.log(3 > 5 || 3 < 2);//flase
    // 逻辑非!
    var isOK = !true;
    console.log(isOK);//false
    console.log(!true);//false

逻辑中断（短路操作）

当逻辑与（或）两端是表达式或值时：
123 & 456
（表达式1）&&（表达式2）
逻辑与：如果表达式1是真，则返回表达式2，如果表达式1是假，则返回表达式1；
（0 ’ ’ null undefined NaN都是假）
逻辑或：如果表达式1是真，则返回表达式1，如果表达式1是假，则返回表达式2；

注意：逻辑中断相当于执行到那里就中断了

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

###运算符优先级

补充：异或的写法：
express1 ^ express2

JS流程控制

流程控制

分支结构

if语句（else)

if (条件表达式) {
条件表达式为真就执行这条语句；
}
else后面直接跟大括号

    var age = prompt('请输入您的age:')
    if (age >= 18) {
        alert('欢迎光临');
    }

    var age = prompt('请输入您的age:')
    if (age >=