葵花宝典之JavaScript基础（总计18章）第1到第4章

alert('i love you~ zhao li ying!');//以弹出框的形式输出内容
console.log('i love you~ zhao li ying! two');//以后台日志的形式输出内容；
document.write('i love you~ zhao li ying! three');//把内容当做页面的内容去输出；

1.5 JavaScript程序执行特点

JavaScript的代码是从上往下一行一行执行的。
每一行代表一句代码，分号是一句代码的结束标志，可以不写，但建议写上。
JavaScript代码必须是英文书写。
JavaScript的注释包含单行注释// 以及多行注释/**/

1.6 JavaScript书写位置

行内写法：
局限性很大，只能针对事件进行添加，用的很少。
它的代码分离性最差，可读性不强。
内嵌写法：
在body的最下面 script标签内去写我们的js代码。
教学和项目用的最多。
外链写法：
在外部js文件当中去写js代码。
最后通过script标签src引入到html当中。
项目最终都会把代码文件进行分离。
在外链的script标签之间不能去写代码。

<!--第一种：行内的js写法几乎不用-->
<div id="box" onclick="alert('i love you~')">点击变色(行内的js写法)</div>
<!--第二种：这个script标签写在body内部的最下方，称为内嵌js写法-->
<script type="text/javascript">
   alert('i love you~ zhao li ying!');
   console.log('i love you~ zhao li ying! two');
   document.write('i love you~ zhao li ying! three');
</script>
<!--第三种js书写方式，外链式，项目的最后都要变为外链式去写-->
<script type="text/javascript" src="js/index.js"></script>

第2章变量

2.1 什么是变量

变量：可以变化的量称作变量。

常量：不可以改变的量称作常量。

2.2 为什么要有变量

程序：代码的集合，一般指的是文件，静态的。
进程：程序的一次执行过程，动态的。
程序执行过程其实就是：输入数据、运算数据和输出数据的过程。
数据需要存储，那么就需要容器，变量扮演的就是容器的角色。
变量的本质归根结底就是一块内存（计算机的三大存储部件）。

2.3 变量的定义

先定义再赋值
定义的同时初始化
不带var定义变量
同时定义多个变量

//1、先定义后赋值
var a;//定义了一个变量，取名字叫a
a = 100;//然后把100这个数据 存储到a这个变量当中
a = 200;//变量内部的东西是随时可以改变的；
console.log(a);//打印a内部的数据，

//2、初始化一个变量
var b = 100;//完全等价于  var b; b = 100;
console.log(b);
b = 300;
console.log(b);

//3、特殊情况特殊对待
c;//这样是错误的，它是在取c的值，而c没定义；
c = 500;//也是可以定义一个变量，但是它和带var定义的变量有区别，区别，后面说。现在你可以认为差不多；
console.log(c);

//4、一次定义多个变量；
var d = 20,e = 30;//var d = 20;var e = 30;是完全等价的；
var d = e = 30; //如果两个值相等，可以这么定义变量，但是后面的e是没有带var的
// var d = 30; e = 30;

2.4 变量的命名规范

标识符规则
数字、字母、下划线及$组成。
不能以数字开头。
不能和关键字及保留字同名。
中英文大小写严格区分。
变量名字要见名思意。
变量名命名方法（大驼峰、小驼峰、下划线）。

var a = 100;
var a1 = 200;
var 2a;//错误的，不能数字开头   报错 语法错误；

//语义化，存年龄
var age = 30;
//小驼峰是我们主打的写法
var PersonName;//大驼峰
var personName;//小驼峰
var person_name;//下划线

2.5 变量在内存当中的展现

两种方式交换两个变量的值

var a = 10;
var b = 20;
console.log(a,b);
a = 20;//修改a的值为20
b = 10;//修改b的值为10
console.log(a,b);
//上面的它不是交换；

//1、借用第三方变量实现两个变量值得交换
var c;
c = a;// = 出现 代表要把=右侧的值，赋值给 =左侧的变量， =左侧一定是变量，右侧只要有值就行
console.log(a);//a内部的值还是存在的
a = b;
console.log(a);
b = c;
console.log(a,b);

//2、不借助第三方变量实现交换（求和）；
a = a + b;//a = 30
b = a - b;// 30 - 20 = 10  b = 10
a = a - b;// 30 - 10 = 20  a = 20;
console.log(a,b);

第3章数据类型

3.1 数据类型的分类

基本数据类型：数字Number、字符串String、 布尔值Boolean、 undefined 、null、

ES6 中新增的Symbol类型

对象数据类型：后面讲

3.2 基本数据的使用

数字：整数小数二进制八进制十六进制科学计数法
字符串：引号（单双引号都可以）包含的文本
布尔值：true和false
undefined：undefined
null：null

//1、数字 Number
var num = 10;//整数
num = -10;
num = -1.23;//小数
//下面都是了解
num = 0b10;//存储二进制数，前面加0b
num = 0o10;//存储八进制数，前面加0o，可以简写成只加0
num = 0x10;//存储十六进制数，前面加0x
num = 1.23e3;//科学计数法
console.log(num);
//2、字符串String  以单引号或者双引号包含的内容，统称字符串，其实就是我们说的文本内容
var str = '赵丽颖';
str = "asudgaklsdq8we2387,.f4jjashfdijiaas";
str = '10';//字符串10
str = '     ';//空白串
str = '';//空串
str = "i'm fine";//单双引号根据实际情况，要交叉使用（内单外双，内双外单）；
console.log(str);
//3、布尔值Boolean  用来表示真或者假   只有两个值
var bool = true;//真
bool = false;//假  
console.log(bool);
//4、undefined是一个基本数据类型    这个类型当中只有一个值，这个值就叫undefined
//undefined想要拿到这个值，定义变量不赋值，这个变量当中就是undefined；
//undefined的本意是未定义的意思，但是它在我们js当中并不是说变量没有定义，而是定义了变量没有赋值
var und;//里面会有一个值，undefined
console.log(und);
//5、null是一个基本数据类型，这个类型当中也只有一个值，就叫null;
//null想要拿到这个值，必须定义了变量，自己赋值为null,才能拿到null
var nul = null;//null经常用在初始化一个对象或者删除一个对象的时候使用；
console.log(nul);

3.3 基本数据类型的判断typeof

typeof是用来判断一个数据是什么类型的。
typeof之后的结果是什么。
typeof判断null的结果。

var a = 10;//’number‘
a = '';//’string‘
a = true;//’boolean‘
a = undefined;//’undefined‘
a = null;//’object‘;//这个是一个设计缺陷，造成的；
console.log(typeof a);
//小面试题
console.log(typeof 100);//'number';
console.log(typeof typeof 100);//typeof 'number'//'string';
console.log(typeof typeof typeof 100)//'string';

第4章运算符和表达式

4.1 运算符和表达式的概念

运算符：就是参与运算的符号。

表达式：由变量或者常量与运算符组成的式子；表达式是有值的。

4.2 运算符的分类

4.2.1 算术运算符和表达式

四则运算： + - * / %
%:求余或者取模 /：求商 %：求余数
%:作用很大，后期用的比较多：
判断一个数能否被另一个数整除
可以求出一个数字每个位上的数字
可以求一个范围内的数
例如：任何的一个数字对5取余，肯定落在0 - 4之间

//算术运算符   +  - * / %
//与其说讲运算符不如说讲表达式
var a = 10;
var b = 20;
console.log(a + b);//打印的是a+b这个整体的值，也就是说打印的是表达式的值；30
console.log(a - b);//-10
console.log(a * b);//200

console.log(a / b);//0.5    // /代表的是只求商，除不尽也要除，得到小数
console.log(a % b);//10     // %代表的是求余数，除不尽就拿余数

console.log(1725187231689 % 79 + 1); // 得到1 - 79之间的一个数字

自增自减： ++ --
++ --只能和变量组成表达式
作用都是让变量的值自增或者自减1
a 和 a++ 是两个东西 a代表变量 a++代表表达式
它们两个都是有值的；
a++ 和 ++a两个表达式的值
++在后，先把a的值赋值给表达式整体a++ 然后让a自增1；
++在前，先让a自增1 再把a的值赋值给++a这个表达式整体；

var a = 10;
//1
a++;//整体的值是10 执行过后a = 11 最终让a自增1
++a;//整体的值是12 执行过后a = 12 最终也是让a自增1
console.log(a);//12  打印a这个变量内部的值，
//2
console.log(a++);//10 打印a++这个表达式整体的值 a = 11
console.log(a++);//11   a = 12
console.log(a);//12
//3
console.log(++a);//11 打印++a这个表达式整体的值
console.log(a);  //11

4.2.2 赋值运算符和表达式

赋值运算符： =
是把= 右边的值赋值给 = 左边的变量。
=左边一定是变量（或者对象属性）
=右边一定是有值的东西
复合赋值运算符： += -= *= /= %=
a += b; <==等价于==> a = a + b
其余的都是一样的

4.2.3 条件运算符和表达式

条件（比较）运算符 > < >= <= == != ===全等 !== 不全等

最终表达式的值都是布尔值；

4.2.4 逻辑运算符和表达式

&& 与 || 或！非

通用：无论左右连接的是什么值都适用
&&   整个表达式的值：如果&&前面为真就取后面的值作为整个表达式的值如果&&前面为假就取前面的值作为整个表达式的值,后面的表达式根本不执行;
||    整个表达式的值：如果||前面为真就取前面的值作为整个表达式的值，后面的表达式根本不执行;如果||前面为假就取后面的值作为整个表达式的值;
!    要求后面必须值是布尔值，不是就转化为布尔值，必须是布尔值；

// && 与
//1）
var num = 0 && 10;//  非0即为真
console.log(num);
//2）
var a = 2;
console.log(0.2 && a++);//2  a3
console.log(a);

// ||或
//1
console.log(false || '赵丽颖');//
//2
var a = 30;
var b = 20;
console.log(a > b || a+b++);
console.log(a,b);

//!  非
console.log(!(a > 10));
console.log(!6);//非0即为真
console.log(!'zhaoliying');//非空即为真

常用：多个条件表达式的连接的时候
&&   一假则假
||    一真则真
!     非真即假非假即真

var money = 100000;
var faceValue = 50;
console.log(money > 50000 && faceValue > 80);//false
console.log(money > 50000 || faceValue > 80);//true
console.log(!(money > 50000 || faceValue > 80))//false;

4.2.5 三目运算符和表达式

一元 ++  -- ！ +（正） -（负）一侧有东西就能构成表达式
二元 +   - * / =               必须两侧都有东西才能构成表达式
三元 ?:                           三元（目）运算符只有一个
三元表达式执行过程
先看第一个表达式问号前面的值是否为真(不是布尔要转化为布尔)
如果为真，则取冒号前面的值作为整个表达式的值，后面的不执行
如果为假，则取冒号后面的值作为整个表达式的值，前面的不执行

//1
var a = 10;
var b = 20;
var c = a < 0?a:b;
console.log(c);
//2
var a = 10;
var b = 10?++a:a--;
console.log(b,a);
//3
var a = 10;
var b = 20;
var c = a?a+b:b++;
console.log(a,b,c);
//4
var a = 10;
var b = 30;
var c = 0;
var d = (a > c || c)? a+b*c++ :a-c+b++;
console.log(a,b,c,d)