JavaScript从入门到精通之入门篇（一）概念与语法

入门篇大纲

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190907175408160.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyMDUxNjU=,size_16,color_FFFFFF,t_70

第一部分概念与语法

1.JavaScript的历史

2.基本概念

3.JavaScript的使用、调试和异常处理

4.基本词法和变量

5.数据类型和类型转换

6.运算符

算数运算符

赋值运算符

一元运算符

使用一元运算符，将会把所有的内容转换为数值运算，不使用字符运算
例子：

var i = “10”;
i++;  // 与 i += 1 或者 i = i + 1 类似
console.log(i) // 输出： 11

注意： i++ 和 ++i 的区别

i++和++i 独立运算时，运算的结果是完全相同的；
但是如果将i++和++i进行赋值、打印、获取时，运算的先后顺序就会影响赋值的先后顺序；
如果是i++，变量在前，先赋值，再运算
如果是++i，变量在后，先运算，再赋值

例子：

var i = '10';
i++;
console.log(i); // 输出： 11
++i;
console.log(i); // 输出： 12var i = '10';
var x = i++;
var y = ++i;
console.log(x); // 输出：10
console.log(y); // 输出：12

位运算符

进制

2进制和16进制的互转技巧: 8421法

二进制数值：        1101   0001   0011   0011   1101
二进制比值：        8421   8421   8421   8421   8421 
16进制下标：         13     1      3       3     13   
16进制结果：         d      1      3       3      d所以：11010001001100111101（二进制） = d133d （16进制）

位非运算符 ~

位与运算符 &

有一个0为0，没有0为1

1 & 1 = 1， 1 & 0 = 0，0 & 1 = 0，0 & 0 = 0

var a = 20; // 转成二进制：10100
var b = 10; // 转成二进制：01010// 位与运算后：00000 转成10进制 --> 0
console.log(a&b); // 输出：0

位或运算符 |

有一个1为1，没有1为0

1 | 1 = 1， 1 | 0 = 1，0 | 1 = 1，0 | 0 = 0

var a = 20; // 转成二进制：10100
var b = 10; // 转成二进制：01010// 位或运算后：11110  转成10进制 --> 30
console.log(a|b); // 输出：30

位异或运算符^

相同为0，不同为1

1 ^ 1 = 0， 1 ^ 0 = 1，0 ^ 1 = 1，0 ^ 0 = 0

var a = 20; // 转成二进制：10100
var b = 10; // 转成二进制：01010// 异或运算后：11110  转成10进制 --> 30
console.log(a^b); // 输出：30

左移位运算符、右移位运算符

console.log(8<<2); // 10000 --> 32
console.log(8>>2); // 10    --> 2
console.log(1<<n); // 可以求2的n次幂
console.log((0x0000FF<<16).toString(16)); // 颜色值

关系运算符

常见的关系运算符：< >
重点关注 == 和 === 的区别:

== 自带隐式转换
null == undefined
0 == “” == false
NaN与任何内容都不同，NAN也不等于NaN，常使用isNaN判断某值是否为数字

console.log(1 == "1");          // true
console.log(null == undefined);  // true
console.log(0 == "");           // true
console.log(0 == false);        // true
console.log(isNaN(parseInt('10a'))); // falseif(!x) { // 满足条件的x值有： ""  0  false undefined null NaN
}

=== 表示两者之间的类型和值是否都相等

逻辑运算符

常用的逻辑运算符有： ! && ||

7.循环语句

所谓循环，具体有以下几个特点：

必须要有条件初始变量
必须要有进入循环的条件
必须有向条件外发展的表达式

while循环

例子：

<div id="btn0">按钮0</div>
<div id="btn1">按钮1</div>
<div id="btn2">按钮2</div>
<div id="btn3">按钮3</div>
<div id="btn4">按钮4</div>
<div id="btn5">按钮5</div>
<div id="btn6">按钮6</div>
<div id="btn7">按钮7</div>
<script>
var i = 0;
while (i <= 7) {var btn = document.getElementById("btn" + i);btn.onclick = function() {console.log(i);    // 无论点击哪个按钮，始终输出 8console.log(this); // 点击按钮时，会输出你点击的按钮本身}i++;
}
</script>