add: 函数的调用
This commit is contained in:
parent
0bbb6c66de
commit
aa6ef99b5f
@ -26,23 +26,6 @@ web标准总结:
|
|||||||
- 表现标准: 相当于人的衣服。css就是对网页进行美化的。
|
- 表现标准: 相当于人的衣服。css就是对网页进行美化的。
|
||||||
- 行为标准: 相当于人的动作。JS就是让网页动起来,具有生命力的。
|
- 行为标准: 相当于人的动作。JS就是让网页动起来,具有生命力的。
|
||||||
|
|
||||||
### 浏览器介绍
|
|
||||||
|
|
||||||
浏览器是网页运行的平台,常用的浏览器有谷歌(Chrome)、Safari、火狐(Firefox)、IE、Edge、Opera等。如下图所示:
|
|
||||||
|
|
||||||
![](http://img.smyhvae.com/20191204_1900.png)
|
|
||||||
|
|
||||||
浏览器内核:
|
|
||||||
|
|
||||||
|浏览器 | 内核|
|
|
||||||
|:-------------:|:-------------:|
|
|
||||||
|chrome / 欧鹏 |Blink |
|
|
||||||
|Safari|Webkit|
|
|
||||||
|Firefox 火狐|Gecko|
|
|
||||||
|IE|Trident |
|
|
||||||
|
|
||||||
PS:「浏览器内核」也就是浏览器所采用的「渲染引擎」,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。**渲染引擎是兼容性问题出现的根本原因。**
|
|
||||||
|
|
||||||
## 编辑器相关
|
## 编辑器相关
|
||||||
|
|
||||||
### VS Code 的使用
|
### VS Code 的使用
|
||||||
@ -1105,7 +1088,13 @@ aaa/../bbb/1.jpg
|
|||||||
|
|
||||||
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
|
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
|
||||||
|
|
||||||
![](http://img.smyhvae.com/cnblogs/%E7%94%9F%E5%91%BD%E5%9B%A2%E9%98%9F%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg)
|
## 我的公众号
|
||||||
|
|
||||||
|
想学习<font color=#0000ff>**代码之外的技能**</font>?不妨关注我的微信公众号:**千古壹号**(id:`qianguyihao`)。
|
||||||
|
|
||||||
|
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
|
||||||
|
|
||||||
|
![](http://img.smyhvae.com/2016040102.jpg)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
34
04-JavaScript基础/00-编程语言.md
Normal file
34
04-JavaScript基础/00-编程语言.md
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
|
||||||
|
## 编程语言
|
||||||
|
|
||||||
|
### 编程
|
||||||
|
|
||||||
|
**编程**:让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程。
|
||||||
|
|
||||||
|
**计算机程序**:就是计算机所执行的一系列的**指令集合**,而程序全部都是用我们所掌握的语言来编写的,所以人们如果要控制计算机,则需要通过计算机语言向计算机发出命令。
|
||||||
|
|
||||||
|
### 计算机语言
|
||||||
|
|
||||||
|
**计算机语言**:人与计算机之间通讯的语言。它是人与计算机之间传递信息的媒介,是用来控制计算机的一系列指令。
|
||||||
|
|
||||||
|
计算机语言的种类非常的多,总的来说可以分成三大类:机器语言、汇编语言和高级语言。
|
||||||
|
|
||||||
|
计算机最终所执行的都是机器语言,它是由“0”和“1”组成的二进制数,二进制是计算机语言的基础。
|
||||||
|
|
||||||
|
### 编程语言
|
||||||
|
|
||||||
|
通过类似于人类语言的 ”语言”来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言。不同的编程语言,有不同的语法,必须遵守。
|
||||||
|
|
||||||
|
如今通用的编程语言有两种形式:汇编语言和高级语言。
|
||||||
|
|
||||||
|
- **汇编语言**:与机器语言实质是相同的,都是直接对硬件操作,只不过指令采用了英文缩写的标识符,容易识别和记忆。
|
||||||
|
|
||||||
|
- **高级语言**:主要是相对于低级语言而言,它并不是特指某一种具体的语言,而是包括了很多编程语言,比如:C语言、C++、Java、C#、PHP、JavaScript、Python、Objective-C、Swift、Go语言等。
|
||||||
|
|
||||||
|
### 编译器
|
||||||
|
|
||||||
|
高级语言所编写的程序不能直接被计算机识别,必须经过转换才能被执行,为此,我们需要一个编译器。
|
||||||
|
|
||||||
|
编译器可以将我们所编写的源代码转换(翻译)为机器语言,这也被称为二进制化。
|
||||||
|
|
||||||
|
|
@ -8,7 +8,7 @@ Web前端有三层:
|
|||||||
|
|
||||||
- CSS:从审美的角度,描述**样式**(美化页面)
|
- CSS:从审美的角度,描述**样式**(美化页面)
|
||||||
|
|
||||||
- JavaScript:从交互的角度,描述**行为**(提升用户体验)
|
- JavaScript:从交互的角度,描述**行为**(实现业务逻辑和页面控制)
|
||||||
|
|
||||||
JavaScript是世界上用的最多的**脚本语言**。
|
JavaScript是世界上用的最多的**脚本语言**。
|
||||||
|
|
||||||
@ -80,7 +80,8 @@ JavaScript运行在用户的终端网页上,而不是服务器上,所以我
|
|||||||
|
|
||||||
**后台语言**是运行在服务器上的,比如PHP、ASP、JSP等等,这些语言都能够操作数据库,都能够对数据库进行“增删改查”操作。
|
**后台语言**是运行在服务器上的,比如PHP、ASP、JSP等等,这些语言都能够操作数据库,都能够对数据库进行“增删改查”操作。
|
||||||
|
|
||||||
备注:Node.js是用 JavaScript 开发的,但属于后台的技术栈。
|
备注:Node.js是用 JavaScript 开发的,现在也可以基于 Node.js 技术进行服务器端编程。
|
||||||
|
|
||||||
|
|
||||||
### JavaScript的组成
|
### JavaScript的组成
|
||||||
|
|
||||||
@ -92,6 +93,52 @@ JavaScript基础分为三个部分:
|
|||||||
|
|
||||||
- **BOM**:浏览器对象模型,操作**浏览器部分功能**的API。比如让浏览器自动滚动。
|
- **BOM**:浏览器对象模型,操作**浏览器部分功能**的API。比如让浏览器自动滚动。
|
||||||
|
|
||||||
|
## 浏览器的介绍
|
||||||
|
|
||||||
|
浏览器是网页运行的平台,常用的浏览器有谷歌(Chrome)、Safari、火狐(Firefox)、IE、Edge、Opera等。如下图所示:
|
||||||
|
|
||||||
|
![](http://img.smyhvae.com/20191204_1900.png)
|
||||||
|
|
||||||
|
|
||||||
|
### 浏览器的组成
|
||||||
|
|
||||||
|
浏览器分成两部分:渲染引擎和 JS 引擎。
|
||||||
|
|
||||||
|
1、**渲染引擎**:(浏览器内核)
|
||||||
|
|
||||||
|
浏览器所采用的「渲染引擎」也称之为「浏览器内核」,用来解析 HTML与CSS。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。**渲染引擎是兼容性问题出现的根本原因。**
|
||||||
|
|
||||||
|
常见浏览器的内核如下:
|
||||||
|
|
||||||
|
|浏览器 | 内核|
|
||||||
|
|:-------------:|:-------------:|
|
||||||
|
|chrome / 欧鹏 |Blink |
|
||||||
|
|Safari|Webkit|
|
||||||
|
|Firefox 火狐|Gecko|
|
||||||
|
|IE|Trident |
|
||||||
|
|
||||||
|
2、**JS 引擎**:
|
||||||
|
|
||||||
|
也称为 JS 解释器。 用来解析网页中的JavaScript代码,对其处理后再运行。
|
||||||
|
|
||||||
|
浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行时会逐行解释源码(转换为机器语言),然后由计算机去执行。
|
||||||
|
|
||||||
|
浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行。所以 JavaScript 语言归为脚本语言,会逐行解释执行。
|
||||||
|
|
||||||
|
常见浏览器的 JS 引擎如下:
|
||||||
|
|
||||||
|
|浏览器 | JS 引擎|
|
||||||
|
|:-------------:|:-------------|
|
||||||
|
|chrome / 欧鹏 | V8 |
|
||||||
|
|Safari|Nitro|
|
||||||
|
|Firefox 火狐|SpiderMonkey(1.0-3.0)/ TraceMonkey(3.5-3.6)/ JaegerMonkey(4.0-)|
|
||||||
|
|Opera|Linear A(4.0-6.1)/ Linear B(7.0-9.2)/ Futhark(9.5-10.2)/ Carakan(10.5-)|
|
||||||
|
|IE|Trident |
|
||||||
|
|
||||||
|
参考链接:
|
||||||
|
|
||||||
|
- [主流浏览器内核及JS引擎](https://juejin.im/post/5ada727c518825670b33a584)
|
||||||
|
|
||||||
### 浏览器工作原理
|
### 浏览器工作原理
|
||||||
|
|
||||||
![](http://img.smyhvae.com/20180124_1700.png)
|
![](http://img.smyhvae.com/20180124_1700.png)
|
||||||
@ -112,11 +159,6 @@ JavaScript基础分为三个部分:
|
|||||||
|
|
||||||
参考链接:<https://www.2cto.com/kf/201202/118111.html>
|
参考链接:<https://www.2cto.com/kf/201202/118111.html>
|
||||||
|
|
||||||
**浏览器的组成**:
|
|
||||||
|
|
||||||
- shell部分。
|
|
||||||
|
|
||||||
- 内核部分。包括:渲染引擎(语法规则和渲染)、js引擎、其他模块。
|
|
||||||
|
|
||||||
## JavaScript 的特点
|
## JavaScript 的特点
|
||||||
|
|
||||||
|
@ -106,10 +106,11 @@ var fun2 = function() {
|
|||||||
语法:
|
语法:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var 变量名/函数名 = new Function('形参1', '形参2', '函数体']);
|
var 变量名/函数名 = new Function('形参1', '形参2', '函数体');
|
||||||
```
|
```
|
||||||
|
|
||||||
注意,这里是直接将函数体放在**字符串**里包裹起来,放在 Function 的最后一个参数的位置;而且,形参也必须放在**字符串**里。
|
注意,Function 里面的参数都必须是**字符串**格式。也就是说,形参也必须放在**字符串**里;函数体也是放在**字符串**里包裹起来,放在 Function 的最后一个参数的位置。
|
||||||
|
|
||||||
|
|
||||||
代码举例:
|
代码举例:
|
||||||
|
|
||||||
@ -140,18 +141,138 @@ fun3(1, 2); // 调用函数
|
|||||||
|
|
||||||
2、函数既然是实例对象,那么,**函数也属于“对象”**。还可以通过如下特征,来佐证函数属于对象:
|
2、函数既然是实例对象,那么,**函数也属于“对象”**。还可以通过如下特征,来佐证函数属于对象:
|
||||||
|
|
||||||
- 我们直接打印某一个函数,比如 `console.log(fun2)`,发现它的里面有`__proto__`。(这个是属于原型的知识,后续再讲)
|
(1)我们直接打印某一个函数,比如 `console.log(fun2)`,发现它的里面有`__proto__`。(这个是属于原型的知识,后续再讲)
|
||||||
|
|
||||||
- 我们还可以打印 `console.log(fun2 instanceof Object)`,发现打印结果为 `true`。这说明 fun2 函数就是属于 Object。
|
(2)我们还可以打印 `console.log(fun2 instanceof Object)`,发现打印结果为 `true`。这说明 fun2 函数就是属于 Object。
|
||||||
|
|
||||||
## 函数的调用
|
## 函数的调用
|
||||||
|
|
||||||
|
|
||||||
|
### 方式1:普通函数的调用
|
||||||
|
|
||||||
函数调用的语法:
|
函数调用的语法:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
函数名();
|
函数名();
|
||||||
```
|
```
|
||||||
|
|
||||||
|
或者:
|
||||||
|
|
||||||
|
```
|
||||||
|
函数名.call();
|
||||||
|
```
|
||||||
|
|
||||||
|
代码举例:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function fn1() {
|
||||||
|
console.log('我是函数体里面的内容1');
|
||||||
|
}
|
||||||
|
|
||||||
|
function fn2() {
|
||||||
|
console.log('我是函数体里面的内容2');
|
||||||
|
}
|
||||||
|
|
||||||
|
fn1(); // 调用函数
|
||||||
|
|
||||||
|
fn2.call(); // 调用函数
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### 方式2:通过对象的方法来调用
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var obj = {
|
||||||
|
a: 'qianguyihao',
|
||||||
|
fn2: function() {
|
||||||
|
console.log('千古壹号,永不止步!');
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
obj.fn2(); // 调用函数
|
||||||
|
```
|
||||||
|
|
||||||
|
如果一个函数是作为一个对象的属性保存,那么,我们称这个函数是这个对象的**方法**。
|
||||||
|
|
||||||
|
PS:关于函数和方法的区别,本文的后续内容里有讲到,可以往下面翻。
|
||||||
|
|
||||||
|
|
||||||
|
### 方式3:立即执行函数
|
||||||
|
|
||||||
|
代码举例:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
(function() {
|
||||||
|
console.log('我是立即执行函数');
|
||||||
|
})();
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
立即执行函数在定义后,会自动调用。
|
||||||
|
|
||||||
|
PS:关于立即执行函数,本文的后续内容里有讲到,可以往下面翻。
|
||||||
|
|
||||||
|
|
||||||
|
上面讲到的这三种方式,是用得最多的。接下来讲到的三种方式,暂时看不懂也没关系,可以等学完其他的知识点,再回过头来看。
|
||||||
|
|
||||||
|
### 方式4:通过构造函数来调用
|
||||||
|
|
||||||
|
代码举例:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function Fun3() {
|
||||||
|
console.log('千古壹号,永不止步~');
|
||||||
|
}
|
||||||
|
|
||||||
|
new Fun3();
|
||||||
|
```
|
||||||
|
|
||||||
|
这种方式用得不多。
|
||||||
|
|
||||||
|
### 方式5:绑定事件函数
|
||||||
|
|
||||||
|
代码举例:
|
||||||
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="btn">我是按钮,请点击我</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var btn = document.getElementById('btn');
|
||||||
|
//2.绑定事件
|
||||||
|
btn.onclick = function() {
|
||||||
|
console.log('点击按钮后,要做的事情');
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
这里涉及到DOM操作和事件的知识点。
|
||||||
|
|
||||||
|
### 方式6:定时器函数
|
||||||
|
|
||||||
|
代码举例:(每间隔一秒,将 数字 加1)
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let num = 1;
|
||||||
|
setInterval(function () {
|
||||||
|
num ++;
|
||||||
|
console.log(num);
|
||||||
|
}, 1000);
|
||||||
|
```
|
||||||
|
|
||||||
|
这里涉及到定时器的知识点。
|
||||||
|
|
||||||
## 函数的参数:形参和实参
|
## 函数的参数:形参和实参
|
||||||
|
|
||||||
函数的参数包括形参和实参。先来看下面的图就很好懂了:
|
函数的参数包括形参和实参。先来看下面的图就很好懂了:
|
||||||
|
Loading…
Reference in New Issue
Block a user