Study Notes on parameters of functions in JavaScript

A function can contain parameters or no parameters. functions without parameters are mostly used for fixed operations. parameters are the most meaningful part of a function. Of course, anonymous functions do not have parameters.

The previously written function does not pass parameters to it. In fact, the so-called passing parameter is to pass the parameter to the function, and then the function does some processing internally. How can we pass parameters to the function, in fact, parameters are placed in brackets behind the function. The following is an example:

The Code is as follows:	Copy code
Function sum (a, B) { Alert (a + B ); } Sum (12, 5 );

In the above function, two parameters a and B are set for sum. When sum is called, two parameters are passed to the function, and a is changed to 12, B is changed to 5, and the function body also needs to change. A and B play a placeholder role, as if you and your classmates go to the canteen to cook, and suddenly think of eating in the morning and seeing that there is not much money in the meal card, you will tell your classmates to help me arrange the team first, after the meal is punched out, you will be taken to the position of your classmates when you come back. Of course, you will also swipe your card for the meal. The numbers in the above Code are you, the letters are your classmates, and alert (a + B) is the payment for meals. Of course, if you have a name, then a and B must also have a name. These parameters are called form parameters, which are placed there. The parameters in sum () are real parameters, the actual parameter, that is, you actually pay for it.

Some functions have parameters, or sometimes the parameters that need to be passed to the function are uncertain. What should we do? In fact, JS has helped us solve this problem, that is, each function has its own arguments object, which contains the parameters passed in. Take a look at the following code to understand.

The Code is as follows:	Copy code
Function sss () { Var sum = 0; For (var I = 0; I <arguments. length; I ++ ){ Sum + = arguments [I]; } Alert (sum ); } Sss (12, 5, 2 );

We didn't set the form parameter for the sss function, but we can still pass the parameter to it during the call. All these parameters are in arguments. arguments also has the length attribute, but it is not an array, the object is popped out using alert (typeof arguments). It can be seen that it is indeed an object type.

The next step is the method of the Operation attribute. In fact, there are two methods for the Operation attribute. In addition to vertices, there is also a method that uses square brackets for the operation. For details, refer to the Code:

The Code is as follows:	Copy code
Function setText (name) { Var oTxt = document. getElementById ('txt1 '); OTxt. value = 'asdfasdfasd '; OTxt ['value'] = 'asdfasdf '; }

The above Code sets the content of a text input box. The final effects of the two methods are the same, but they have their own advantages. It is obvious to use vertices to operate attributes, code writing is short and convenient, so there are not so many symbols. The method for setting attributes in square brackets cannot be seen from the code above. Then let's look at the following code:

The Code is as follows:	Copy code
Function setText (name) { Var oTxt = document. getElementById ('txt1 '); OTxt. value = 'asdfasdfasd '; OTxt [name] = 'er3523543 '; // OTxt. name = 'sdfqwrf '; this method is used to set the attribute value instead of the name parameter. } SetText ('value ');

I believe this time we can see the portal, that is, passing parameters. The advantage of setting attributes in square brackets is that you can set attributes for passing parameters in functions. Finally, it is a loop statement. This is not much to say. Like other languages, we will continue to practice in the following way. I hope you can leave a message after reading the source code.

The first exercise of the loop statement adds the background color to all the Divs.

The Code is as follows:

Copy code

<Style type = "text/css"> # Demo_main div {float: left; width: 100px; height: 100px; margin: 10px; border: 1px solid #000 ;} . Red {background-color: red ;} </Style> <Script type = "text/javascript"> Window. onload = function (){ Var oDiv = document. getElementById ('demo _ main'). getElementsByTagName ('div '); For (var I = 0; I <oDiv. length; I ++ ){ ODiv [I]. className = 'red '; } }; </Script> </Head> <Body> <Div id = "demo_topBox"> <Div class = "demo_topNav"> <P class = "demo_topText"> This is the demo page of the front-end customer summary. You are welcome to exchange and leave messages. </P> <A class = "demo_home" href = "http://f2eer.com/" title = "back to home"> back to home </a> </Div> </Div> <Div id = "demo_main"> <! -- Put the work here --> <Div> </div> <Div> </div> <Div> </div> <Div> </div> <Div> </div> <Div> </div> <Div> </div> <Div> </div> </Div> </Body>

The second is the combination of judgment and loop. All options are selected, reversed, and not selected.

The Code is as follows:

Copy code

<! Doctype html> <Html> <Head> <Meta charset = "UTF-8"> <Title> select none for all-round selection-front-end customer f2eer.com </title> <Style type = "text/css"> Input {float: left ;} </Style> <Script type = "text/javascript"> Window. onload = function (){ Var oAll = document. getElementById ('all '); Var oNo = document. getElementById ('no '); Var oContrary = document. getElementById ('contrary '); Var oDiv = document. getElementById ('div1 '); Var aIpt = oDiv. getElementsByTagName ('input '); OAll. onclick = function (){ For (var I = 0; I <aept. length; I ++ ){ AIpt [I]. checked = true; } }; ONo. onclick = function (){ For (var I = 0; I <aept. length; I ++ ){ AIpt [I]. checked = false; } }; OContrary. onclick = function (){ For (var I = 0; I <aept. length; I ++ ){ If (aIpt [I]. checked = false ){ AIpt [I]. checked = true; } Else { AIpt [I]. checked = false; } } }; }; </Script> </Head> <Body> <Div id = "demo_topBox"> <Div class = "demo_topNav"> <P class = "demo_topText"> This is the demo page of the front-end customer summary. You are welcome to exchange and leave messages. </P> <A class = "demo_home" href = "http://f2eer.com/" title = "back to home"> back to home </a> </Div> </Div> <Div id = "demo_main"> <! -- Put the work here --> <Div id = "div1"> <Input type = "button" value = "select all" id = "all"/> <Input type = "button" value = "do not select" id = "no"/> <Input type = "button" value = "invert" id = "contrary"/> <Input type = "checkbox"/> <Input type = "checkbox"/> <Input type = "checkbox"/> <Input type = "checkbox"/> <Input type = "checkbox"/> <Input type = "checkbox"/> <Input type = "checkbox"/> <Input type = "checkbox"/> </Div> </Div> </Body> </Html>

 

Third, product pop-up product introduction

The Code is as follows:

Copy code

<! Doctype html> <Html> <Head> <Meta charset = "UTF-8"> <Style> * {Padding: 0; margin: 0 ;} Li {list-style: none ;} . Prompt {width: 710px; height: 301px; background: url (images/bg.gif); margin: 50px auto 0; position: relative ;} . Prompt ul {position: absolute; top: 241px ;} . Prompt. list1 {left: 30px ;} . Prompt. list2 {right: 30px ;} . Prompt li {float: left; width: 103px; height: 30px; line-height: 30px; text-align: center; margin-right: 1px; background: url (images/li_bg.gif) repeat-x; position: relative; cursor: pointer ;} . Prompt h2 {color: # fff; font-size: 14px ;} . Prompt p {width: 128px; height: 100px; padding: 10px; background: url (images/p_bg.gif) no-repeat; filter: alpha (opacity = 80); opacity: 0.8; position: absolute; bottom: 28px; left:-24px; display: none; color: # fff; font-size: 12px; text-align: left; line-height: 16px; font-family: arial ;} . Prompt. active {background: url (images/active.gif) no-repeat; font-weight: bold ;} </Style> <Script type = "text/javascript"> Window. onload = function (){ Var oDiv = document. getElementById ('propt '); Var aH = oDiv. getElementsByTagName ('h2 '); Var aP = oDiv. getElementsByTagName ('P '); For (var I = 0; I <aH. length; I ++ ){ AH [I]. index = I; AH [I]. onmouseover = function (){ This. className = 'active '; AP [this. index]. style. display = 'block '; }; AH [I]. onmouseout = function (){ This. className = ''; AP [this. index]. style. display = 'none '; }; AP [I]. onmouseover = function (){ This. style. display = 'block '; }; AP [I]. onmouseout = function (){ This. style. display = 'none '; }; } } </Script> </Head> <Body>   <Div id = "demo_main"> <! -- Put the work here --> <Div id = "prompt" class = "prompt"> <Ul class = "list1"> <Li> <H2> product <P> NX5 <br/> Samsung NX platform camera's 0.146 million-pixel APS-C sensor features compact working structure and light weight </p> </Li> <Li> <H2> dealer <P> room 9019, block A, dinghao electronic building <br/> Tel: 010-62607039 13501246332 </p> </Li> <Li> <H2> price <P> NX5 <br/> reference price: 890 RMB </p> </Li> </Ul> <Ul class = "list2"> <Li> <H2> product <P> Ouda D350 <br/> 5 million pixels, with a maximum Interpolation of 12 million pixels. HD specifications: 1080 p </p> </Li> <Li> <H2> dealer <P> room 9019, block A, dinghao electronic building <br/> Tel: 010-62607039 13501246332 </p> </Li> <Li> <H2> price <P> NX5 <br/> reference price: 1890 RMB </p> </Li> </Ul> </Div> </Div> </Body> </Html>

Today's learning is here. If you have any mistakes in this article, please give me some advice. :)