StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I will give an little introduction to <code>javascript</code> pattern with my example. you can read about them in <a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="nofollow">http://addyosmani.com/resources/essentialjsdesignpatterns/book/</a> is not a easy reading but when you are ready you will understand pretty much about how to organize you javascript code with that book.</p> <p>meanwhile I can advise you to read about how to code forms with good practices at <a href="http://net.tutsplus.com/tutorials/html-css-techniques/20-html-forms-best-practices-for-beginners/" rel="nofollow">http://net.tutsplus.com/tutorials/html-css-techniques/20-html-forms-best-practices-for-beginners/</a></p> <p>Ok beside that here are the working example about how to work with click and forms <a href="http://jsfiddle.net/ncubica/BQaYz/" rel="nofollow">http://jsfiddle.net/ncubica/BQaYz/</a></p> <p>HTML</p> <pre><code><label><input type="Radio" name="gender" id="male" value="male" /> male</label> <label><input type="Radio" name="gender" id="female" value="female" />female</label> <input type="text" id="name" placeholder="name" /> <input type="text" id="lastname" placeholder="lastname" /> <input type="button" id="submit" value="store" /> </code></pre> <p>javascript</p> <pre><code>var survey = (function(_module){ var modulename = _module; var user = {}; /*private methods*/ function init(){ observers(); } function observers(){ $(document).on("click","#submit", survey.store) } /*public methods*/ $r = {} $r.store = function(){ user.name = $("#name").val(); user.lastname = $("#lastname").val(); user.gender = $("input:radio[name=gender]:checked").val(); survey.toString(); } $r.toString = function(){ var genderStr = (user.gender == "male") ? "Man" : "Girl"; alert(user.name + " " + user.lastname + " is " + genderStr); } $r.init = function(){ init(); } return $r; })("survey") survey.init(); </code></pre> <p>Ok, I know at first look a little "big" code but is really simple, in javascript a variable can take any kind of form from a function to a normal string.</p> <p>here we are working with <code>anonymous functions</code> to create a module will help us to work more clear and structure, this variable will have 2 kind of methods and variable, public and privates.</p> <p>for make a method public we have to return the methods in an object after we finish to run the code this is why exist the <code>$r</code> variable which is an object who have function by properties, and at the end of the code you return it doing <code>return $r</code> with this pattern now you can easily can navigate throw methods and catch events like click, change, etc....</p> <p>you only should have to add this event to the method <code>observers</code> create a private or public function which will be activate after the event an you are done.</p> <p>Read the code and if you have any further question you can ask me anything. I try to solve you problem and structure you code.</p> <p>best good luck</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload