251 lines
5.4 KiB
Markdown
251 lines
5.4 KiB
Markdown
# 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
|
||
|
||
|
||
|