js基础理解

实现业务逻辑和页面控制,相当于人的各种动作
三大组成
- Javascript语法ECMAScript
- 页面文档对象模型DOM
- 浏览器对象模型BOM

1. dom-----文档对象模型

是W3C组织推荐的处理可错账标记语言的标准编程接口

2. BOM--------浏览器对象模型

它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等

3. 引入

3.1 行内式

input type"button" value="点我" onclick="alert('Hello World')"

alert__弹出框

可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
该形式,可读性较差

3.2 内嵌

<script>
    alert('Hello  World~!');
 </script>

3.3 外部

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

引用外部 JS文件的 script 标签中间不可以写代码

3.4 注释

//

/* */

4. 输入输出语句

**较为常用: **

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框,用户可以输入	浏览器

注意：

alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。

变量

程序在了内存中申请的一块用来存放数据的空间

使用:

声明

var age;

// var是JS关键字,variable变量
赋值

age = 10;

结合: var age = 10;
变量命名规范
- 严格区分大小写
- 首字母小写，后面单词的首字母需要大写。 myFirstName

数据类型

1.1 类型

JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。*

var age = '是的'; // 这是一个字符串

JS引擎根据右边变量值的数据类型来判断

上述也就意味着,JS拥有动态类型,变量的类型可以发生变化

1.2 分类

简单数据类型
1. Number
2. String
3. Boolean
4. Undefined
5. Null
复杂数据类型
1. object

1.3 简单(基本)数据类型

类型	说明	默认值
Number	数字型,包括整形和浮点型	0
Boolean	布尔型	false
String	字符串	“”
Null	var a = null; 声明a为空值	null
Undefined	var a; 声明了变量a 但没有给值	null

1.3.1 Number

八进制在前面加0,十六进制在前面加0x
范围

最大值-1.7976931348623157e+308 Number.MAX_VALUE

最小值-5e-32 Number.MAX_VALUE

三个特殊值

alert(Infinity);  // Infinity
alert(-Infinity); // -Infinity
alert(NaN);       // NaN   代表一个非数值

isNaN()

判断一个变量是否为非数字的类型，返回true或者false

返回true表示不是数字

1.3.2 String

字符串加双引号或单引号

JS可以用单引号嵌套双引号,或者反过来

转义符

\n 换行符
\\ 斜杠
\' 单引号
\" 双引号
\t tab缩进
\b 空格

length 属性

通过其可以获取整个字符的长度

var strMsg = "我是帅气多金的程序猿！";
alert(strMsg.length); // 显示 11

拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串

//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12);     // 1112

与变量拼接

console.log('pink老师' + 18);           // 只要有字符就会相连 
var age = 18;
// console.log('pink老师age岁啦');       // 这样不行哦
console.log('pink老师' + age);          // pink老师18
console.log('pink老师' + age + '岁啦');  // pink老师18岁啦
// 注意,变量不可以加引号,否则会被认定为字符串

1.3.3 Boolean

当布尔型和数字型相加时,true表示1,false表示0

1.3.4 Undefined和Null

注意两者的区分

Undefined加数字相加,为NaN

1.3.5 获取检测变量的数据类型

typeof num

var num = 18;
console.log(typeof num) // 结果 number

1.3.6 数据类型转换

注意： 使用表单，prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而是需要进行变量的数据类型转换

转换为字符串

toString()

var num = 1; alert(num.toString());//转换成字符串

String()强制转换

var num = 0; alert(String(num))//它可以将任何类型强制转换为字符串

加号拼接成字符串

和字符串拼接的结果是字符串,也被称为隐式转换
```
var num = 1; alert(num+"字符串转换")
```

转换为数字型

parseInt(string)函数

parseInt('78') 转换为int

若得到'120px',转换会去掉px
若是'rem120',转换会直接输出为NaN(parseFloat也是如此)

parseFloat(string)函数 // 只能解析十进制数,若解析内容只有整数,则解析为整数

parseFloat('78.21') 转换为float
Number()强制转换函数

Number('12')
js隐式转换(- * /)

利用算术运算隐式转换

'12'-0

小加法例子

// 1. 先弹出第一个输入框，提示用户输入第一个值 
 var num1 = prompt('请输入第一个值：');
// 2. 再弹出第二个框，提示用户输入第二个值 
 var num2 = prompt('请输入第二个值：');
// 3. 将输入的值转换为数字型后，把这两个值相加，并将结果赋给新的变量  
 var result = parseFloat(num1) + parseFloat(num2);
// 4. 弹出结果
 alert('结果是:' + result);

转换为布尔型
1. Boolean()函数
  
  Boolean("true")
  - 代表空\否定的值会被转换为false
    
    如: ‘’ 、0、NaN、null、undefined、
  - 其余的值均会转换为true

2. 关键字

break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

运算符\流程控制-分支

1. 算术运算符

+   -    *    /    %(取余)

1.1 浮点数精度问题

浮点数的最高精度为17位小数,但在进行算术计算时其精确度远远不如整数

var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);   // 结果不是 7，  而是：7.000000000000001

**注意：**不要直接判断两个浮点数相等

还需注意算术运算的优先级，先乘除后加减

2. 递增和递减运算符

++   --

分前置,和后置

3. 比较运算符

<   >   >=    <=    ==   !=   ===全等,要求值和数据类型都一致    !==

4. 逻辑运算符

&& || !

返回true或false

一般可以引用短路运算

5. 赋值运算符

= += -= *= /= %=

6. 运算符优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ – !
3	算术运算符	先* /%后±
4	关系运算符	< > <= >=
5	相等运算符	== != === !==
6	逻辑运算符	先&&后\|\|
7	赋值运算符	=
8	逗号运算符	,

【前端三剑客——JS】js基础理解