Click here to view: full tutorial, source code and accompanying video
Contents of this article
1 Introduction
Before, we talked about the most basic introductory knowledge of JS, including data types, operators, and three basic program structures of sequence, selection, and loop.
From today onwards, the content of our explanation has been abstracted, that is to say, it is not easy to understand at the beginning. From my personal cognitive point of view, I think the previous knowledge is relatively basic, starting from today's function, which belongs to the more in-depth part.
2. Experience
The process of human growth and achievement is largely the accumulation of experience. Such as class experience, exam experience, swimming experience, eating experience.
So what is experience? It can be understood as knowledge or skills gained from repeated practice . Experience can be imparted. For example, if Zhang San can drive, he can pass on the experience to Li Si.
3. Experience in code
When writing code, you can also treat one thing as an experience, such as driving a car.
// 开车的经验
console.log("1.打开车门");
console.log("2.系好安全带");
console.log("3.启动车辆");
console.log("4.踩油门，开始驾驶");
Online shopping is also an experience, the code is as follows:
// 网购的经验
console.log("1.打开购物APP");
console.log("2.挑选商品");
console.log("3.加入购物车");
console.log("4.支付");
console.log("5.收货");
4. Application of code blocks
As we said before, the part enclosed in curly braces is called a code block. The code in the code block is a whole, so we can use the code block to gather the codes of the same function together, which will be more regulated, as follows:
{
// 开车的经验
console.log("1.打开车门");
console.log("2.系好安全带");
console.log("3.启动车辆");
console.log("4.踩油门，开始驾驶");
}
{
// 网购的经验
console.log("1.打开购物APP");
console.log("2.挑选商品");
console.log("3.加入购物车");
console.log("4.支付");
console.log("5.收货");
}
Through code blocks, the same thing or the same experience, the code comes together and becomes more organized.
5. Choose a different experience
We have two kinds of experiences above, and we can choose to display different experiences by selecting statements.
var userSelect = "学习开车的经验"; //用户选择
if (userSelect == "学习开车的经验") {
// 开车的经验
console.log("1.打开车门");
console.log("2.系好安全带");
console.log("3.启动车辆");
console.log("4.踩油门，开始驾驶");
} else if (userSelect == "学习网购的经验") {
// 网购的经验
console.log("1.打开购物APP");
console.log("2.挑选商品");
console.log("3.加入购物车");
console.log("4.支付");
console.log("5.收货");
}
When the user selects, that is, the content of the userSelect variable is different, we can output the corresponding experience. Note that code blocks must be used here, because if and else if affect the entire block that follows. If you don't use code blocks, you can only affect the next line of code, which is obviously wrong.
6. Problems with using code blocks to store experience
The above code seems to be quite smooth, but consider such a scenario, 4 people have to learn to drive, we need to write this code:
{
// 开车的经验
console.log("1.打开车门");
console.log("2.系好安全带");
console.log("3.启动车辆");
console.log("4.踩油门，开始驾驶");
}
{
// 开车的经验
console.log("1.打开车门");
console.log("2.系好安全带");
console.log("3.启动车辆");
console.log("4.踩油门，开始驾驶");
}
{
// 开车的经验
console.log("1.打开车门");
console.log("2.系好安全带");
console.log("3.启动车辆");
console.log("4.踩油门，开始驾驶");
}
{
// 开车的经验
console.log("1.打开车门");
console.log("2.系好安全带");
console.log("3.启动车辆");
console.log("4.踩油门，开始驾驶");
}
This is like, every time someone learns to drive, we have to tell these experiences again, which is actually very troublesome.
So can we write these experiences on paper, or record them into an mp3 file. In this way, when someone comes to learn to drive, he can directly pass the paper or mp3 file to him.
Well, here, the meaning of our function comes out.
7. Functions: Multiplexers of Experience
In programming languages, the reason why functions are needed is to reuse code experience.
In life, our experiences can be stored in our brains, written down on paper, recorded or saved as videos. These experiences are actually the integration of some operational steps.
In programming, our experience needs to be stored by functions. Functions contain several lines of code, which are wrapped as a whole by code blocks. The function contains several lines of code, which actually contains a series of operation steps.
In addition to including a block of code, a function actually needs a name. For example, the driving function saves the driving experience, and the online shopping function saves the online shopping experience.
8. Inference about function syntax
After the above analysis, the function has a name and also includes a code block, so the JS function should be roughly as follows:
这是一个函数:函数名
{
函数代码
函数代码
函数代码
}
For example, to drive a car, we can write the function:
这是一个函数:开车
{
console.log("1.打开车门");
console.log("2.系好安全带");
console.log("3.启动车辆");
console.log("4.踩油门，开始驾驶");
}
At this point, call the drive function to output 4 lines of code. Avoid typing these 4 lines of code every time, the code integrity will be much stronger.
9. Summary
The program is to solve the problems in the real society, so the program must map all kinds of affairs in the real society.
In reality, experience is very important, and functions are designed in the program to correspond to experience and make work more efficient!