"JavaScript from Beginner to mastery" lesson three

The third lesson on JavaScript charm-03

Function Pass Parameter

In the last lesson we talked about what a function is, in fact, the function is functionally similar to the CSS class, wrapping a piece of code to use. In order to make the function more rich and practical, we need to use the function to pass the parameter . As we have already mentioned, JS places the parameters in parentheses after the function name, and in order to specify how the parameters are used, let's give a small example.

We put a colored div block in the HTML page and added 3 buttons to change the color of the div block by clicking the button. By learning from the previous two lessons, we can easily write the following code to achieve this function:

The effect is as follows:

As you can see, in order to achieve this function we have written three functions, the function is to make div block green, yellow, red. The structure of these three functions is almost identical: by getElementById get to Div1 and assign to Odiv, and then modify its background properties, the only difference is that the specific color values are different. So, is there a way to merge the three functions? Naturally, the method is the function that we are going to talk about in this lesson.

Here, we first take the definition of the function and the invocation of the example above.

function Show ()       {                       //define  alert ("a");} Show ();            Call

A window with the popup content "a" is pinned after the page is run. Is this feature too simple? What should I do if I want the content that pops up to be my given content? The answer is to use parameters.

The use of parameters is actually very simple, in this case, we put a num in the function (), this num is similar to the previous variable, the name is determined by the writer, and the value of NUM itself is unknown when the function is defined. How do I determine the value of num? When the function is called, the value entered in () is the specific value of Num. Examples are as follows:

function Show (num)       {                 alert (num);} Show (12);   

The results are as follows:

After running the program, the popup window value becomes 12. We modify the value in Show () and the result of the operation changes accordingly. So we can call num the parameter of function show (). As we can see in this example, the function parameter plays the role of a placeholder , and when defined, the parameter is only occupied by a position without a specific value, and its value is passed in when the function is called.

It is important to note that for a function, its arguments can be many, when passing in multiple parameters, we use commas to separate the arguments:

Function Show (A, B)       {                 alert (a+b);} Show (5,12);  

The results are as follows:

It is important to note that the value passed in corresponds to parameter one by one (a=5,b=12).

Now we're going to merge the previous code with the method of passing the arguments. We write a uniform function SetColor and pass in a color parameter (used to determine why the div is modified), retain the body part of the first three functions, and only modify the color specific value to color, The color-specific value is then determined when the SetColor function is called in the button. The modified code is as follows:

The specific content of the reference is these, but for the reference, many beginners will have this confusion: how can we tell if a function should be passed with parameters? A relatively simple method of judging is that when a part of our function cannot be determined when it is defined, it is necessary to use parameters to pass it.
Change any of the DIV's styles
Just the function in the program SetColor, its role can only modify the background color of the div. Suppose we want to change the various styles of a div by a function, such as width, height, border, and so on, how do we modify our function?
Obviously, to modify any of the div's styles, there are two uncertainties, one is the specific style name (name), and one is the value of the specific style, so we need two parameters. If you follow our previous instructions, then the JS function should be written as follows:
Functionsetstyle (name,value) {  var Odiv=document.getelementbyid (' Div1 ');  Odiv.style.name=value;}
In fact, if you try, you will find that this function is not working properly. The reason for this is that the browser does not assume that the name in ODiv.style.name is the same as the name in the argument, but that it is a style called "name" and that there is no style named "name" in the CSS and cannot be executed.
To solve this problem, we must understand the second method of manipulating properties. The first way to manipulate properties is to use the. Character connection that we have already learned, and all of our previous cases have been manipulated by this method to manipulate properties. The second way to manipulate properties is through the method of [' property name '] . Here's how to use it:
function SetText () {  var otxt=document.getelementbyid. (' Txt1 ');  The first method of manipulating properties  otxt.value= ' dsfasdfasdf ';  The second method of manipulating properties  otxt[' value ']= ' DSFASDFASDF ';}
In this small case, there is no difference between the two. In the ordinary writing, because the first is more convenient than the second one, so most of the choice of the wording. The advantage of the second notation is that [] the string is placed inside a string (which will be spoken at the end of the lesson on the exact contents of the string), and the strings can be stored by variables, and the specific values can be passed through the parameters. Therefore, in the previous case, it is possible to achieve this by changing the name of the style by the parameter. The implementation code is as follows:
The effect is as follows:
In this way, whatever attributes of the div you want to change can be implemented by passing parameters.
Incidentally, in JS, any place where the. Character is used, can be replaced by [], for example document.getElementById (' Div1 ') can be modified to document[' getElementById '] (' div1 '), Odiv.style. [Name] can be modified to odiv[' style '][name], how to use depending on the actual situation.
Strings and variables--differences and relationships
Looking at the previous code, you can see that there are a lot of places where "" and "are used, and in JS it is the string that is used in quotation marks. What is the correlation or difference between a variable and a string?
In this case, we mention the concept of a variable relative to JS: literal (constant). For the literal, the value is fixed, and we can clearly see how much it is. Numbers, strings are literal. In contrast, the specific value of a variable is indeterminate, and if you look at the variable itself, we cannot determine how much it is worth.
For variables and parameters, it is not necessary to use them in quotation marks, and strings must be quoted. For the following example:
Alert (ABC);
Our intention is to put the ABC output, but because there is no quotation marks, the browser will think that ABC is a variable, and because ABC has not been defined value, so there will be ABC not defined error. Strings and variables will continue to be applied in our future classes, and you will be familiar with the relationship and differences between them.
"JavaScript from Beginner to mastery" lesson three