webveuje/js/kejian/javascriptday1.md

# javascript Day1

### 主流浏览器（内核）

| 浏览器  | 内核          |
| ------- | ------------- |
| IE      | trident       |
| Chrome  | webkit/ blink |
| Firefox | gecko         |
| Opera   | presto        |
| Safari  | webkit        |



## 简介

javascript 主要是由

- ECMAScript
- DOM
- BOM

> 其中 dom 与 bom 由 浏览器提供 

> dom指的是html页面上的标签

> bom 是浏览器提供的接口



## Js 特点

- js是一种解释性语言

- js是单线程语言

单线程：同一时间只能做一件事情



## ECMAScript

ECMAScript 是一种语言规范 javascript就是基于这个规范来编写的。

使用语言的时候必须遵循这个规范来进行开发 
他包括

- 语法
- 类型
- 语句
- 关键字
- 保留字
- 操作符
- 对象

## DOM

文档对象模型 是由浏览器提供的一个接口 能在javascript中可以操作页面

## BOM

浏览器对象模型 是浏览器提供的一些对于浏览器与用户界面的一些接口 比如可以操作浏览器高度 宽度 与位置等等



## 如何引入js

- html 内嵌<script></script>

  <script type="text/javascript></script>

- 外部引入 <script  src="url"></script>

  javascript 文件后缀名为 .js
  

为符合web标I准（w3c标准中的一项） 需要 结构，样式，行为相分离   

#### 结构样式行为相分离：

结构： html

样式： css

行为：js

思考：引入js的时候，能不能用一个script 标签 里面写入src属性引入外部js   又在里面写js代码 ？

类似：
html:

```
<script src="./day1.js">
	document.write("我们开始学javascript啦！")
</script>
```

day1.js

```
document.write("这是我们学js的第一天哦")
```



思考一下这样运行出来的页面上会显示什么内容

<details>
    <summary>点此查看答案</summary>
	<p>这是我们学js的第一天哦</p>    
    <p>原因： 当内嵌和外部引入同时使用的时候，只有外部引入的js会起作用</p>
</details>



## js 基本语法

### js 和 html css区别：

html 和css 严格来讲不叫编程语言   编程语言有个特点必须有变量，函数，数据结构可以进行基本运算

### 变量（varible）

概念：用于装程序中用到的数据的一个篮子

- 变量声明
  - 声明，赋值分解
  - 单一 var
- 命名规则 
  - 变量名必须以字母，_，$开头
  - 变量名可以包括字母，数字，_，$开头
  - 不可以用系统的关键字 ，保留字作为变量名



变量声明赋值过程

1. 跟系统要一个篮子  声明
2. 把东西放到篮子里   赋值

```
 var a;  声明
 
 a=100
```

同时声明多个变量：

```
var a=1,
	b=2,
	c=3;
```



## 数据类型：

#### 原始值

Number  String  Boolean  undefined  null

#### 引用值

object  (array 和 function 是 object 的实例  不算是单独的数据类型) 



**根据数据类型的的不同，有的变量存储在栈中，有的存储在堆中。**

- 原始变量类型及他们的值存储在栈中，当把一个原始变量传递给另一个原始变量时，是把一个一段栈空间的内容复制到另一段栈空间，这两个原始值互相不影响。
- 引用值是把引用变量的名称存储在栈中，但是把其实际对象存在堆中，且存在一个指针有变量名指向存储在堆中的实际对象，当把引用对象传递给另一个变量时，复制的其实是指向实际对象的指针，此时，若通过方法改变其中一个变量的值，则访问另一个变量时，其值也会随之加以改变;但若不通过方法，而是通过重新赋值 此时 相当于 重新开了一段内存 该值的原指针改变 ，则另外一个 值 不会随他的改变而改变。

　总结：

　　Number、Stirng、Boolean、Null、Underfined这些基本数据类型，他们的值直接保存在栈中;

　　Object、（Function、Array、Date、RegExp）这些引用类型，他们的引用变量储存在栈中，通过指针指向储存在堆中的实际对象



### 检测数据类型以及数据类型的转换

#### 检测数据类型

**typeof** 返回数据类型 ，返回值包括 number boolean symbol string  undefined function 

其中  原始值数据类型直接返回， 引用值除了function 返回的是function  其他的引用值返回的是 object 



**instanceof**   A instanceof B  用来判断  A是否为B的实例 

例： 

```
var arr=[1,2,3]
console.log(arr instanceof Array)
```

Object.prototype.toString.call(要检测的值)

toString()  是Object的原型方法，调用该方法会返回当前对象的[[class]] 这是一个内部属性  格式为 [object XXX]  其中 XXX就是检测目标的数据类型

```
Object.prototype.toString.call(1234)   //"[object Number]"
Object.prototype.toString.call('') 	//"[object String]"
Object.prototype.toString.call([9,8,4]) // "[object Array]"
```

数据类型转换：

数据转换分为显示转换和隐式转换

- ☀️显示转换：常见的️显式转换方法有：Boolean()、Number()、String()等等
- 🌛隐式转换：常见的隐式转换方法：四则运算(加减乘除) 、== 、判断语句(if)等

字符串转数字

- Number()
- parseInt()
- parseFloat
- +‘...字符串内容’
  - +’234‘   ==》 234

Number 转String

- toString()
- +''  加空字符串



Number 转Boolean  

除了 0和NAN 对应的是false  其他的数值对应的都是true



Boolean 数据转换

除了下面6个转完是 false  其他的都是true

- undefined 
- null
- false
- 0
- NAN