www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Improve code - object oriented - window.onload

  1. #1
    Join Date
    Dec 2010
    Location
    Brazil
    Posts
    32

    resolved [RESOLVED] Improve code - object oriented - window.onload

    How could I improve this code so that I didn't need to place all code inside initAll()?

    I have some form handling stuff, and I want to refactor that to OOP. This is the first thing I need to be more sure about.

    Code:
    /* Handling forms with object oriented programming. */
    
    /* Wait for the DOM the be ready. */
    window.onload = initAll;
    
    function initAll() {
    
        var FormValidator = { // {{{
            msg: document.forms['contact'].msg,
    
        }; // }}}
    
        //console.log(FormValidator.msg);
        /* Inserts 'value' into the textarea. */
        FormValidator.msg.value = 'Hello world, from JavaScript!';
    }
    /* vim:set foldmethod=marker foldmarker={{{,}}}: */

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    There isn't much code to go on, but if your goal is to encapsulate the functions and variables (avoiding global scope), then doing it all in the initAll function is fine.

    To be a little cleaner you could also just assign the function directly to the window.onload event and drop the name:

    Code:
    /* Handling forms with object oriented programming. */
    
    /* Wait for the DOM the be ready. */
    window.onload = function()
    {
    	var FormValidator = { // {{{
    		msg : document.forms['contact'].msg
    	}; // }}}
    
    	//console.log(FormValidator.msg);
    	/* Inserts 'value' into the textarea. */
    	FormValidator.msg.value = 'Hello world, from JavaScript!';
    };
    
    /* vim:set foldmethod=marker foldmarker={{{,}}}: */
    JavaScript: Learn | Validate | Compact

  3. #3
    Join Date
    Dec 2010
    Location
    Brazil
    Posts
    32
    What if I just want to create an object, like:

    Code:
    var myObj = {
        /* Gets the <textarea> element. */
        my_element: document.forms['contact'].msg
    }
    
    /* Places a (default) text inside the <textarea>. */
    myObj.my_element.value = 'Hello, world';
    Is there a way to load it when the DOM is ready, but without placing all the code inside a function attached to the "onload" event? Otherwise I will always have to place all my code inside a single function... Bear with me, please.

  4. #4
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    If you just want to declare the objects, and avoid using the onload event then just have the script somewhere after the <form>:

    Code:
    <body>
    
    	<form id="contact">
    		<textarea name="msg"></textarea>
    	</form>
    	
    	<script type="text/javascript">
    	
    		var myObj = {
    			/* Gets the <textarea> element. */
    			my_element: document.forms['contact'].msg
    		};
    	
    		/* Places a (default) text inside the <textarea>. */
    		myObj.my_element.value = 'Hello, world';
    	
    	</script>
    
    </body>
    ... but obviously the object will end up in the global space (if that is at all a concern).
    JavaScript: Learn | Validate | Compact

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles