This is the third day of my participation in the August More text Challenge. For details, see: August More Text Challenge
A, functions,
Function: In computer languages, a function is a block of code with fixed functionality and logic. It only needs to be declared once and can be executed an infinite number of times. They are also called methods in OOP (object-Oriented Programming) languages.
1.1 Understanding function meaning
Consider this requirement:
Requirement: there is a number of total, the value is 10,; Add 10 to the total, divide by 2, multiply by 3, add 5 to the total, and output the total to the console
var total = 10;
total += 10;
total /= 2;
total *= 3;
total += 5;
console.log(total);
var total = 10;
total += 10;
total /= 2;
total *= 3;
total += 5;
console.log(total);
var total = 10;
total += 10;
total /= 2;
total *= 3;
total += 5;
console.log(total);
Copy the codeThe downside of the above code is that it leads to a lot of duplicated code on the page, which reduces development efficiency. In cases like this, we find that all the code is the same, doing the same thing, can we have something that saves the code, and then when we need it, we can pull it out and run around for a while, and do something like this? This thing right here is the function.
function fn() {
var total = 10;
total += 10;
total /= 2;
total *= 3;
total += 5;
console.log(total);
}
fn();
fn();
fn();
Copy the code1.2 Function Syntax
Standard function syntax: a function that works is made up of two parts:
- Function declaration,
1.1 Use function keyword to declare a function variable. Fn is also a variable. A function variable is called the function name; Function fn (); function fn (); function fn (); function fn (); function fn (); function fn (); Function execution (call) Function execution is the name of the function followed by a parenthesis, such as fn(); In addition to letting the function execute, function execution also means getting the result of the function’s execution, which is called the return value of the function. For example, isNaN(‘ ABC ‘), the combination of the function name and parentheses, means: The result of isNaN is to determine whether the string ‘ABC’ is the result of a NaN conversion. This result is true, which means that isNaN(‘ ABC ‘) also means true. And isNaN(‘ ABC ‘) return true.
1.3 Parameter mechanism of functions
Arguments are the entry points into a function. When we encapsulate a function in a function, we want it to do what we want it to do for us. The definition and execution of the function; The parameter corresponds to these two parts and is also composed of two parts:
- Function declaration: parameters. Parameters are variables inside a function that are used to represent and store values.
- Function execution: arguments, which are the actual values assigned to the parameter. That is, the actual value that the function’s parameters represent when it executes.
// Summation function
function sum(a, b) {
// Both a and b are parameters
console.log(a, b);
var total = 0;
total = a + b;
console.log(total);
}
sum(10.20); // 10 and 20 are arguments. When the function is executed, the parameter a is given 10 and the parameter b is given 20. The argument positions correspond to the parameters one to one.
sum(1); // the default value is undefined if b is not passed
sum(); // If there is no argument, then a and b are both undefined
sum(4.5.6); // 4, 4, 6 are arguments, a is 4, b is 5, nobody accepts 6
Copy the code1.4 Return value mechanism of functions
1.4.1 Function return value mechanism
In addition to what we give it, what it does for us, the other important thing is it gives us what it does. IsNaN (), for example, returns the result of the function’s execution. We should write a function that does that.
We have a summation function here, and we want to get the sum of the two numbers:
function sum(a, b) {
var total = 0;
total = a + b;
console.log(total)
}
var result = sum(1.2);
console.log(result) // undefined
console.log(total); // Uncaught ReferenceError: ...
Copy the codeCause: Total is a variable declared inside the function body. This declaration makes variables inside the function body private. Private variables are not accessible outside the function because of closures.
Closure: A mechanism by which a function protects its internal variables from external interference.
? How can I get total at this time? This is where the function’s return value mechanism is needed: the function’s return value mechanism: the result of the function (or some information in the function) specified as the return result of the function is given to the outside of the function. Use the return keyword in a function to specify the return value of the function.
The modified code of the sum function:
function sum(a, b) {
var total = 0;
total = a + b;
return total;
}
var result = sum(1.2);
console.log(result); / / 3
console.log(sum(1.2));
Copy the code1.4.2 Details of function return values
- The return value is used to specify the value returned by a function
- If there is no return inside the function or nothing following the return, then the return value of the function is undefined
- The return keyword also has an important function ———— to force the end of the code after return. (Code after return does not execute)
- Return always returns a value. If it is an expression, return waits for the expression to be evaluated before returning the value.
2. Tabs
- Custom attribute method to solve the problem
When the click event is triggered, I has already changed to tablist.length, but the number of cycles in the recirculation process is the number of cycles I, so we should save I.
Where is it? Since each LI is an element object, we say that the object can add attributes to store information on each Li element;
- The HTML code
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jiangwai - TAB</title>
<style>
* {
margin: 0;
padding: 0;
}
ul.li {
list-style: none;
}
.wrapper {
margin: 30px auto;
width: 800px;
}
.header {
width: 602px;
border: 1px solid # 000;
}
.header:after {
display: block;
content: ' ';
visibility: hidden;
clear: both;
}
.header li {
float: left;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 18px;
cursor: pointer;
}
.header li.active {
background: yellow;
}
.header li:nth-child(2) {
border-left: 1px solid # 000;
border-right: 1px solid # 000;
}
.wrapper div {
display: none;
height: 200px;
width: 602px;
border: 1px solid # 000;
line-height: 200px;
text-align: center;
font-size: 20px;
}
.wrapper div.active {
display: block;
}
</style>
</head>
<body>
<div class="wrapper" id="wrapper">
<ul id="header" class="header">
<li class="active">The practical work</li>
<li>music</li>
<li>fashion</li>
</ul>
<div class="active">The practical work</div>
<div>music</div>
<div>fashion</div>
</div>
<script src="Js /7-4-tab function encapsulation. Js"></script>
</body>
</html>
Copy the code- Js code
var wrapper = document.getElementById('wrapper');
var header = document.getElementById('header');
var tabList = header.getElementsByTagName('li');
var divList = wrapper.getElementsByTagName('div');
for (var i = 0; i < tabList.length; i++) {
tabList[i].myIndex = i;
TabList [I] = 0; tabList[I] = 0
// tabList[I] represents the second li element, which records its index 1
// tabList[I] represents the third li element, which records its index 2
tabList[i].onclick = function () {
for (var j = 0; j < tabList.length; j++) {
tabList[j].className = ' ';
divList[j].className = ' ';
}
// We have recorded the index of each li. The key point here is, which one we click on, then we take the myIndex property of that one
// In the event function, this represents the element object of this event
var myIndex = this.myIndex;
tabList[myIndex].className = 'active';
divList[myIndex].className = 'active'; }}Copy the code