JS基础（一） - 爱码网

JS基础（一）

BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

JavaScript的书写位置

写在行内
写在script标签中
写在外部js文件中，在页面引入

<script src="main.js"></script>

注意点
引用外部js文件的script标签中不可以写JavaScript代码

变量

var声明变量

var age;

变量的命名规则和规范

规则 - 必须遵守的，不遵守会报错
- 由字母、数字、下划线、$符号组成，不能以数字开头
- 不能是关键字和保留字，例如：for、while。
- 区分大小写
规范 - 建议遵守的，不遵守不会报错
- 变量名必须有意义
- 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：在这里插入代码片userName、userPassword
  交换两个变量的值
  普通做法

var a = 1,
    b = 2,
    tmp;

tmp = a;
a = b;
b = tmp;

利用数组特性进行交换

var a = 1,
    b = 2;

a = [a, b];
b = a[0];
a = a[1];

数据类型

简单数据类型

Number、String、Boolean、Undefined、Null

Number类型

进制
注意事项：如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析

八进制
    var num1 = 07;   // 对应十进制的7
    var num2 = 019;  // 对应十进制的19
    var num3 = 08;   // 对应十进制的8

浮点数
- 浮点数的精度问题：不要判断两个浮点数是否相等

浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
   var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
   console.log( result);

数值判断
不要用NaN验证是不是NaN
- NaN：not a number
NaN 与任何值都不相等，包括他本身
- isNaN: boolean类型，true表示不是数字，flase表示是数字

String类型

字符串长度

length属性用来获取字符串的长度
```
var str = 'Hello World';
console.log(str.length);
```
字符串拼接

字符串拼接使用 + 连接
```
console.log(11 + 11);
console.log('hello' + ' world');
console.log('100' + '100');
console.log('11' + 11);
console.log('male:' + true);
```
1. 两边只要有一个是字符串，那么+就是字符串拼接功能
2. 两边如果都是数字，那么就是算术功能。

Boolean类型

Boolean字面量： true和false。true为1，false为0。

Undefined和Null

undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
null表示一个空，变量的值如果想为null，必须手动设置

var a=null；

复杂数据类型

Object 对象

    var nll = null;
 console.log(String(nll));//是null
    console.log(typeof nll);//Object

typeof获取变量的类型

var age = 18;
console.log(typeof age);  // 'number'

字面量

在源代码中一个固定值的表示法。

数值字面量：8, 9, 10

字符串字面量：‘hello’, “前端”

布尔字面量：true，false

注释

快捷键ctrl+/

单行注释

用来描述下面一个或多行代码的作用

// 这是一个变量

多行注释

用来注释多条代码

/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/

使用谷歌浏览器，快速的查看数据类型：字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的

数据类型转换

转换成字符串类型

toString()

var num = 5;
console.log(num.toString());

String()

String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null，用toString()会报错

拼接字符串方式

num + “”，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

转换成数值类型

Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN

console.log(Number("10"));//10
    console.log(Number("10afrswfdsf"));//NaN
  console.log(Number("g10"));//NaN
    console.log(Number("1fds0"));//NaN
   console.log(Number("10.98"));//10.98

parseInt()

var num1 = parseInt("12.3abc");  // 返回12，如果第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt("abc123");   // 返回NaN，如果第一个字符不是数字或者符号就返回NaN
 console.log(parseInt("1fds0"));//1

parseFloat()

  console.log(parseFloat("10"));//10
     console.log(parseFloat("10afrswfdsf"));//10
      console.log(parseFloat("g10"));//NaN
     console.log(parseFloat("1fds0"));//1
      console.log(parseFloat("10.98"));//10.98
     console.log(parseFloat("10.98fdsfd"));//10.98

+，-0等运算

var str = '500';
console.log(+str);		// 取正
console.log(-str);		// 取负
console.log(str - 0);

转换成布尔类型

Boolean()

0 ‘’(空字符串) null undefined NaN 会转换成false 其它都会转换成true

操作符

算术运算符

+ - * / %

一元运算符

只有一个操作数的运算符

前置++ 先加1，后参与运算

var num1 = 5;
++ num1; 
var num2 = 6;
console.log(num1 + ++ num2);//13
console.log(num1)//6
console.log(num2)//7

后置++ 先参与运算，后加1

var num1 = 5;
num1 ++;    
var num2 = 6 
console.log(num1 + num2 ++);//12
console.log(num1)//6
console.log(num2)//7

猜猜看

 var a = 1; var b = ++a + ++a; console.log(b);    //5
var a = 1; var b = a++ + ++a; console.log(b);   //4 
var a = 1; var b = a++ + a++; console.log(b);   //3 
var a = 1; var b = ++a + a++; console.log(b);  //4

前置-- ：先减1，后参与运算
后置-- ：先参与运算，后减1

逻辑运算符(布尔运算符)

&& 与 两个操作数同时为true，结果为true，否则都是false
|| 或 两个操作数有一个为true，结果为true，否则为false
!  非  取反

关系运算符(比较运算符)

<  >  >=  <= == != === !==

==与===的区别：==只进行值得比较，===类型和值同时相等，则相等

var result = '55' == 55;  	// true
var result = '55' === 55; 	// false 值相等，类型不相等
var result = 55 === 55; 	// true

赋值运算符

= += -= *= /= %=

例如：
var num = 0;
num += 5;	//相当于  num = num + 5;

运算符的优先级

优先级从高到底
	1. ()  优先级最高
	2. 一元运算符  ++   --   !
	3. 算数运算符  先*  /  %   后 +   -
	4. 关系运算符  >   >=   <   <=
	5. 相等运算符   ==   !=    ===    !==
	6. 逻辑运算符 先&&   后||
	7. 赋值运算符

表达式和语句

分支结构

if语句
略

三元运算符

表达式1 ? 表达式2 : 表达式3
是对if……else语句的一种简化写法

案例：
是否年满18岁

age>18?true:flase

switch语句

语法格式:

switch (expression) {
  case 常量1:
    语句;
    break;
  case 常量2:
    语句;
    break;
  case 常量3:
    语句;
    break;
  …
  case 常量n:
    语句;
    break;
  default:
    语句;
    break;
}

break可以省略，如果省略，代码会继续执行下一个case
switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换（例如，字符串'10' 不等于数值 10）

布尔类型的隐式转换

流程控制语句会把后面的值隐式转换成布尔类型

转换为true   非空字符串  非0数字  true 任何对象
转换成false  空字符串  0  false  null  undefined

var a = !!'123';
console.log(a)//true

循环结构

在javascript中，循环语句有三种，while、do…while、for循环。

while语句

while (循环条件) {
  //循环体
}

do…while语句

do…while的特点是不管条件成不成立，都会执行一次。

基础语法：

do {
  // 循环体;
} while (循环条件);

for语句

while和do…while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便

for循环语法：

// for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
  // 循环体4
}

打印9*9乘法表
var str = '';
for (var i = 1; i <= 9; i++) {
  for (var j = i; j <=9; j++) {
    str += i + ' * ' + j + ' = ' + i * j + '\t';
  }
  str += '\n';
}
console.log(str);

continue和break

break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）

continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）

调试

过去调试JavaScript的方式
- alert()
- console.log()
断点调试

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。

调试步骤

浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点

调试中的相关操作

Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
F10: 程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。
F8：跳到下一个断点处，如果后面没有断点了，则程序执行结束。

tips: 监视变量，不要监视表达式，因为监视了表达式，那么这个表达式也会执行。