Parameters for functions in JavaScript learn notes

The function we wrote before does not give it a reference, in fact, the so-called reference is to pass the parameters to the function, and then the function in the interior to do some processing, then how to pass parameters to the parameter, in fact, the function behind the parentheses inside is to put the parameters, the following example:

The code is as follows	Copy Code
function sum (A, B) { alert (A+B); } SUM (12, 5);

In the function above, 2 parameters A and B are set for sum, and when sum is invoked, 2 arguments are passed to the function, at which point a becomes a 12,b and becomes 5, and the body of the function also changes. A and B play a role as a placeholder, just as you and your classmates go to the cafeteria to play rice, suddenly think of eating in the morning to see the rice card money is not much, you will give your classmate said first to help me line up, washed the rice card on the past, when you come back, you stand to the classmate's position, of course, the rice is also your own card. The number in the above code is you, the letter is your classmate, alert (A+B) is to pay for rice. Of course, your classmate has a name, then this A and B must also have a name, they this parameter is called formal parameters, is a formal parameter is placed there, this sum (12,5) in the parameter is the argument, the actual parameters, that is, you actually pay the money.

Some functions and physical parameters, or sometimes to pass to the function of the parameter is not sure, then how to do it, in fact, JS has helped us solve the problem, that is, each function has its own arguments object, this object is loaded in the parameters of those passed in. Take a look at the code below to see.

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);

SSS function We do not give a parameter to the setting, but we can still give it a reference at the time of the call, all of which are in the arguments, arguments also have the length attribute, but it is not an array, with alert (typeof arguments) It's an object, and it's really a type of thing.

The next is the method of manipulating properties, in fact, there are 2 methods of operation properties, in addition to using points to operate, there is a square bracket to operate, the specific or look at 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 is to set a text input box content, the final effect of the 2 methods are the same, but each has its own advantages, with points to manipulate the attributes of a bit very obvious, the code to write short, convenient, not so many symbols. And the way the square bracket sets the property from the above code is nothing to see what a bit of it is. Then 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 becomes the value of setting the property, not the parameter name } SetText (' value ');

I believe this time we can see the doorway, that is, the argument, the advantage of setting the property with square brackets is that you can set the property to a function pass parameter. The last is the circular statement, this is not much to say, and other languages, the following or practice, look at the source after the following message exchange.

Practice of the first loop statement, which adds a background color to all the div.

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> <body> <div id= "Demo_topbox" > <div class= "Demo_topnav" > <p class= "Demo_toptext" > here is the front end of the demo page, welcome to all kinds of exchanges, all kinds of messages. </p> <a class= "Demo_home" href= "http://f2eer.com/" title= "Back Home" > Back home </a> </div> </div> <div id= "Demo_main" > <!--put the works 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 circulation, select, reverse, and not select

The code is as follows

Copy Code

<! DOCTYPE html> <meta charset= "Utf-8" > <title> selection-Front end guest 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<aipt.length;i++) { Aipt[i].checked=true; } }; Ono.onclick=function () { for (Var i=0;i<aipt.length;i++) { Aipt[i].checked=false; } }; Ocontrary.onclick=function () { for (Var i=0;i<aipt.length;i++) { if (Aipt[i].checked==false) { Aipt[i].checked=true; }else{ Aipt[i].checked=false; } } }; }; </script> <body> <div id= "Demo_topbox" > <div class= "Demo_topnav" > <p class= "Demo_toptext" > here is the front end of the demo page, welcome to all kinds of exchanges, all kinds of messages. </p> <a class= "Demo_home" href= "http://f2eer.com/" title= "Back Home" > Back home </a> </div> </div> <div id= "Demo_main" > <!--put the works here--> <div id= "Div1" > <input type= "button" value= "All selected" id= "All"/> <input type= "button" value= "not selected" id= "No"/> <input type= "button" value= "anti-election" 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>

The third is the introduction of merchandise pop-up products

The code is as follows

Copy Code

<! DOCTYPE html> <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 (' Prompt '); 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> <body> <div id= "Demo_main" > <!--put the works here--> <div id= "Prompt" class= "prompt" > <ul class= "List1" > <li> <p>nx5<br/> Samsung NX Platform camera 146,000 megapixel APS-C sensor works in compact, lightweight </p> </li> <li> <p> Ding good electronic building block 9019 Room <br/> Tel: 010-62607039 13501246332</p> </li> <li> <p>nx5<br/> Reference price: 890 CNY </p> </li> </ul> <ul class= "List2" > <li> <p> d350<br/>500 million pixel, maximum interpolation 12 million pixel HD specification:1080p</p> </li> <li> <p> Ding good electronic building block 9019 Room <br/> Tel: 010-62607039 13501246332</p> </li> <li> <p>nx5<br/> Reference Price: 1890 CNY </p> </li> </ul> </div> </div> </body>

Today's study is here, the article if there is a wrong understanding, but also please advise. :)