Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    49
    Thanks
    46
    Thanked 0 Times in 0 Posts

    Make function A visible to function B

    Question:
    If client-side wasn't an issue, what is the best OOP structure or practice in JavaScript syntax, that keeps things encapsulated and adds the greatest security from having your variables exposed to manipulation?

    Is it true that there are three choices to make a variable from one function to be visible and usable by another function? For function A to be visible to function B, or a variable of Function A to be passed and visible within function B?

    Do I have have three choices:

    1. make it a global
    2. make it an object property, or
    3. pass it as a parameter when calling B from A.


    What about "namespaces"? Not sure how to phrase it, but if I want a variable in one function to be visible in another how can I pass it or make it visible to the other function, while not exposing my variables to securty risks and manpiulation? I have heard that global variables are inherently bad and evil.
    Last edited by ryanjohnsond; 06-24-2013 at 07:32 AM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by ryanjohnsond View Post
    I have heard that global variables are inherently bad and evil.

    Don't believe everything you read in the newspapers. There is nothing wrong with having global variables which have ids sufficiently distinct to make duplication unlikely if another script is added.

    You can avoid making variables global to the entire page, just accessible from your entire script - which can be achieved by adding (function() { at the front of your script and })(); at the end.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    ryanjohnsond (06-22-2013)

  • #3
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    49
    Thanks
    46
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Don't believe everything you read in the newspapers. There is nothing wrong with having global variables which have ids sufficiently distinct to make duplication unlikely if another script is added.

    You can avoid making variables global to the entire page, just accessible from your entire script - which can be achieved by adding (function() { at the front of your script and })(); at the end.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    That looks like a namespace. The first time I heard of of one was last night. I saw this on another forum by a coder called Christoph:

    Question: If client-side wasn't an issue, what is the best OOP structure or practice in JavaScript syntax, that keeps things encapsulated and adds the greatest security from having your variables exposed to manipulation? Just a good OOP practice question.
    Last edited by ryanjohnsond; 06-22-2013 at 10:19 PM.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,472
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Quote Originally Posted by Philip M View Post
    Don't believe everything you read in the newspapers. There is nothing wrong with having global variables which have ids sufficiently distinct to make duplication unlikely if another script is added.
    Of course simply by wrapping the entire code inside an anonymous function you get rid of all the globals without affecting the functions within your code's ability to access one another.

    Doing that also prevents any other function in some other code added to the page from accessing your functions and so properly implements encapsulation.

    When writing OOP using JavaScript the only things in the global namespace should be the ids and classes in the HTML that you are accessing and perhaps vone or more variables passing JavaScript frameworks into your code.

    Philip is right in that there is nothing wrong with using global variables with sufficiently unique names when you are using JavaScript to write procedural style code rather than OOP or prototyping code (JavaScript supports all three styles of coding).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    ryanjohnsond (06-22-2013)

  • #5
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    216
    Thanks
    0
    Thanked 29 Times in 27 Posts
    For example, this script (inspired by PPK) return an unique function sndRqt(url,cllbck,pstDta) for Ajax calls.
    Code:
    (function(){
    	var xmlObj=false;
    	var xmlFct=[function(){return new XMLHttpRequest()}
    		,function(){return new ActiveXObject("Msxml2.XMLHTTP")}
    		,function(){return new ActiveXObject("Msxml3.XMLHTTP")}
    		,function (){return new ActiveXObject("Microsoft.XMLHTTP")}];
    	for (var i=0;i<xmlFct.length;i++) {try{xmlObj = xmlFct[i]();}catch(e){continue;}break;}
    	
    	return sndRqt=function(url,cllbck,pstDta){
    		var req=xmlObj;
    		if (!req) return;
    		var mth=(pstDta)? "POST":"GET";
    		req.open(mth,url,true);
    		req.setRequestHeader('User-Agent','XMLHTTP/1.0');
    		if (pstDta) req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    		req.onreadystatechange=function(){
    			if (req.readyState!=4) return;
    			if (req.status!=200 && req.status!=304) return;
    			cllbck(req);}
    		if (req.readyState==4) return;
    		req.send(pstDta);
    	};
    }());

  • Users who have thanked 007julien for this post:

    ryanjohnsond (06-22-2013)

  • #6
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    49
    Thanks
    46
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    Of course simply by wrapping the entire code inside an anonymous function you get rid of all the globals without affecting the functions within your code's ability to access one another.

    Doing that also prevents any other function in some other code added to the page from accessing your functions and so properly implements encapsulation.

    When writing OOP using JavaScript the only things in the global namespace should be the ids and classes in the HTML that you are accessing and perhaps vone or more variables passing JavaScript frameworks into your code.

    Philip is right in that there is nothing wrong with using global variables with sufficiently unique names when you are using JavaScript to write procedural style code rather than OOP or prototyping code (JavaScript supports all three styles of coding).
    You said, "wrapping the entire code inside an anonymous function." Is this below a global function, a namespace or is a namespace a global function?

    Code:
    (function( global ) {
      // code ...
      global.some_variable = 100;
      // code ...
    })(this);
    Quote Originally Posted by 007julien View Post
    For example, this script (inspired by PPK) return an unique function sndRqt(url,cllbck,pstDta) for Ajax calls.
    Code:
    (function(){
    	var xmlObj=false;
    	var xmlFct=[function(){return new XMLHttpRequest()}
    		,function(){return new ActiveXObject("Msxml2.XMLHTTP")}
    		,function(){return new ActiveXObject("Msxml3.XMLHTTP")}
    		,function (){return new ActiveXObject("Microsoft.XMLHTTP")}];
    	for (var i=0;i<xmlFct.length;i++) {try{xmlObj = xmlFct[i]();}catch(e){continue;}break;}
    	
    	return sndRqt=function(url,cllbck,pstDta){
    		var req=xmlObj;
    		if (!req) return;
    		var mth=(pstDta)? "POST":"GET";
    		req.open(mth,url,true);
    		req.setRequestHeader('User-Agent','XMLHTTP/1.0');
    		if (pstDta) req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    		req.onreadystatechange=function(){
    			if (req.readyState!=4) return;
    			if (req.status!=200 && req.status!=304) return;
    			cllbck(req);}
    		if (req.readyState==4) return;
    		req.send(pstDta);
    	};
    }());
    How do you call that with an event handler? And what type of function do you call that?

    Is that a namespace or global function? I am learning. Did you make that an anonymous function by wrapping it with a Parenthesis?

    I am used to making simple event calls on functions like onclick=functionName(). But this starts with a parenthesis "(function( global ){" etc... Sorry for the ambiguity.
    Last edited by ryanjohnsond; 06-22-2013 at 11:24 PM.

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,472
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Wrapping in an anonymous function means adding the following lines around the script:

    Code:
    (function(){
    // your code here
    })();
    or

    Code:
    (function(){
    // your code here
    }());
    You can pass in global variables as parameters - for example to add in Jquery you'd use the following (which has one extra statement to stop jQuery creating a second unnecessary global variable:

    Code:
    jQuery.noConflict();
    (function($) {
    // your code here
    })(jQuery);
    The anonymous function is in the global namespace but as it does not have a name there is no way to reference it from anywhere.

    All of your JavaScript needs to go inside the anonymous function as there is no way to reference any of the code inside it from outside it. This includes any event handlers that you are using. The simplest way to add event handlers is to give the HTML tag that you are adding it to an id. You can then use document.getElementById from within the JavaScript to add the event handler. For example if you are adding an onclick event handler to a tag with id="x" you'd use (if the function to be called needs parameters passed):

    Code:
    document.getElementById('x').onclick = function() {functionName('a');};
    or if it doesn't need parameters passed you can simply use:

    Code:
    document.getElementById('x').onclick = functionName;
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    49
    Thanks
    46
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    Wrapping in an anonymous function means adding the following lines around the script:

    Code:
    (function(){
    // your code here
    })();
    or

    Code:
    (function(){
    // your code here
    }());
    You can pass in global variables as parameters - for example to add in Jquery you'd use the following (which has one extra statement to stop jQuery creating a second unnecessary global variable:

    Code:
    jQuery.noConflict();
    (function($) {
    // your code here
    })(jQuery);
    The anonymous function is in the global namespace but as it does not have a name there is no way to reference it from anywhere.

    All of your JavaScript needs to go inside the anonymous function as there is no way to reference any of the code inside it from outside it. This includes any event handlers that you are using. The simplest way to add event handlers is to give the HTML tag that you are adding it to an id. You can then use document.getElementById from within the JavaScript to add the event handler. For example if you are adding an onclick event handler to a tag with id="x" you'd use (if the function to be called needs parameters passed):

    Code:
    document.getElementById('x').onclick = function() {functionName('a');};
    or if it doesn't need parameters passed you can simply use:

    Code:
    document.getElementById('x').onclick = functionName;
    If I had a function named userInput() I would encapsulate it like this?

    (function userInput()){ //stuff here }();

    and if I wanted to pass an argument via an onclick, it would be like this?

    document.getElementById('x').onclick = userInput;

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,472
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Quote Originally Posted by ryanjohnsond View Post
    If I had a function named userInput() I would encapsulate it like this?

    (function userInput()){ //stuff here }();

    and if I wanted to pass an argument via an onclick, it would be like this?

    document.getElementById('x').onclick = userInput;
    No the entire thing gets wrapped in the anonymous function so it looks like this:

    Code:
    (function() {
    var userInput = function() {
    // code for function goes here
    };
    document.getElementById('x').onclick = userInput;
    })();
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #10
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    49
    Thanks
    46
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    No the entire thing gets wrapped in the anonymous function so it looks like this:
    So my originally intended function becomes a type of variable?

    "function userInput()", becomes "var userInput = function()"

    Interesting. I can store an entire function in a variable.

    The simplest way to add event handlers is to give the HTML tag that you are adding it to an id. You can then use document.getElementById from within the JavaScript to add the event handler
    Confused. I see the onclick is stored within the function.

    (function() {
    var userInput = function() {
    // code for function goes here
    };
    document.getElementById('x').onclick = userInput
    })()

    How do I use it? If I have a set of buttons, like a calculator, how do I pass the argument to the anonymous function?

    E.g., these code snippets are for buttons outside the anonymous function, and i want to pass the arguments of 1 or 2 into the anonymous function, in order that the calculator's screen will display that I inputted the number "1" or the number "2". Is this the way to do it?

    This is the normal way I do it.
    Code:
    function InputValues(value){
    // stuff happens here;
    }
    <a href="#" onclick=userInput(1)">1</a>
    <a href="#" onclick=userInput(2)">2</a>
    Or this way (i.e., the way you showed)?

    Code:
    <a href="#" document.getElementById('1').onclick = userInput;> 1</a>
    <a href="#" document.getElementById('2').onclick = userInput;> 2</a>
    Last edited by ryanjohnsond; 06-24-2013 at 07:54 AM.

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by ryanjohnsond View Post
    How do I use it? If I have a set of buttons, like a calculator, how do I pass the argument to the anonymous function?
    The whole point of having an anonymous, self-executing function to encapsulate your script is so there is no data leakage. An extension of that is that you won't be able to access the script's functions from outside of the script. Consider this simple example:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    		<style>
    			* { margin: 0; padding: 0; }
    			button { margin: 0.5em 1em 1em; padding: 0.5em; }
    			p { margin: 1em 1em 0.5em; padding: 0.5em; }
    		</style>
    		<script>
    			function do_something_A() {
    				document.getElementsByTagName("p")[0].style.setProperty("background", "silver", "");
    			}
    			(function () {
    				function do_something_B() {
    					document.getElementsByTagName("p")[0].style.setProperty("background", "lightblue", "");
    				}
    			})();
    		</script>
    	</head>
    	<body>
    		<p>This is filler text.</p>
    		<button onclick="do_something_A(); try { do_something_B(); } catch (error) { document.defaultView.alert(error); }">Click Me</button>
    	</body>
    </html>
    do_something_A executes without a hitch. do_something_B fails to execute because it's been scoped to the anonymous function and therefore doesn't exist for the purpose of the onclick handler.

    In other words, if you're going to adopt the encapsulating anonymous function practice, then you need to stop using inline event handlers (such as the onclick attribute) and start manipulating events from one place: within your encapsulated script. That results in code like this:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    		<style>
    			* { margin: 0; padding: 0; }
    			button { margin: 0.5em 1em 1em; padding: 0.5em; }
    			p { margin: 1em 1em 0.5em; padding: 0.5em; }
    		</style>
    		<script>
    			(function () {
    				function do_something_A() {
    					document.getElementsByTagName("p")[0].style.setProperty("color", "white", "");
    				}
    				function do_something_B() {
    					document.getElementsByTagName("p")[0].style.setProperty("background", "black", "");
    				}
    				document.defaultView.onload = function () {
    					document.getElementsByTagName("button")[0].onclick = function () {
    						do_something_A();
    						do_something_B();
    					};
    				};
    			})();
    		</script>
    	</head>
    	<body>
    		<p>This is filler text.</p>
    		<button>Change Class</button>
    	</body>
    </html>
    Or this, if you would use the DOM addEventListener method instead of HTML event properties:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    		<style>
    			* { margin: 0; padding: 0; }
    			button { margin: 0.5em 1em 1em; padding: 0.5em; }
    			p { margin: 1em 1em 0.5em; padding: 0.5em; }
    		</style>
    		<script>
    			(function () {
    				function do_something_A() {
    					document.getElementsByTagName("p")[0].style.setProperty("color", "white", "");
    				}
    				function do_something_B() {
    					document.getElementsByTagName("p")[0].style.setProperty("background", "black", "");
    				}
    				document.addEventListener("DOMContentLoaded", function () {
    					document.getElementsByTagName("button")[0].addEventListener("click", function () {
    						do_something_A();
    						do_something_B();
    					}, false);
    				}, false);
    			})();
    		</script>
    	</head>
    	<body>
    		<p>This is filler text.</p>
    		<button>Change Class</button>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    ryanjohnsond (06-27-2013)

  • #12
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    49
    Thanks
    46
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by Arbitrator View Post
    The whole point of having an anonymous, self-executing function to encapsulate your script is so there is no data leakage. An extension of that is that you won't be able to access the script's functions from outside of the script. Consider this simple example:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    		<style>
    			* { margin: 0; padding: 0; }
    			button { margin: 0.5em 1em 1em; padding: 0.5em; }
    			p { margin: 1em 1em 0.5em; padding: 0.5em; }
    		</style>
    		<script>
    			function do_something_A() {
    				document.getElementsByTagName("p")[0].style.setProperty("background", "silver", "");
    			}
    			(function () {
    				function do_something_B() {
    					document.getElementsByTagName("p")[0].style.setProperty("background", "lightblue", "");
    				}
    			})();
    		</script>
    	</head>
    	<body>
    		<p>This is filler text.</p>
    		<button onclick="do_something_A(); try { do_something_B(); } catch (error) { document.defaultView.alert(error); }">Click Me</button>
    	</body>
    </html>
    do_something_A executes without a hitch. do_something_B fails to execute because it's been scoped to the anonymous function and therefore doesn't exist for the purpose of the onclick handler.

    In other words, if you're going to adopt the encapsulating anonymous function practice, then you need to stop using inline event handlers (such as the onclick attribute) and start manipulating events from one place: within your encapsulated script. That results in code like this:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    		<style>
    			* { margin: 0; padding: 0; }
    			button { margin: 0.5em 1em 1em; padding: 0.5em; }
    			p { margin: 1em 1em 0.5em; padding: 0.5em; }
    		</style>
    		<script>
    			(function () {
    				function do_something_A() {
    					document.getElementsByTagName("p")[0].style.setProperty("color", "white", "");
    				}
    				function do_something_B() {
    					document.getElementsByTagName("p")[0].style.setProperty("background", "black", "");
    				}
    				document.defaultView.onload = function () {
    					document.getElementsByTagName("button")[0].onclick = function () {
    						do_something_A();
    						do_something_B();
    					};
    				};
    			})();
    		</script>
    	</head>
    	<body>
    		<p>This is filler text.</p>
    		<button>Change Class</button>
    	</body>
    </html>
    Or this, if you would use the DOM addEventListener method instead of HTML event properties:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    		<style>
    			* { margin: 0; padding: 0; }
    			button { margin: 0.5em 1em 1em; padding: 0.5em; }
    			p { margin: 1em 1em 0.5em; padding: 0.5em; }
    		</style>
    		<script>
    			(function () {
    				function do_something_A() {
    					document.getElementsByTagName("p")[0].style.setProperty("color", "white", "");
    				}
    				function do_something_B() {
    					document.getElementsByTagName("p")[0].style.setProperty("background", "black", "");
    				}
    				document.addEventListener("DOMContentLoaded", function () {
    					document.getElementsByTagName("button")[0].addEventListener("click", function () {
    						do_something_A();
    						do_something_B();
    					}, false);
    				}, false);
    			})();
    		</script>
    	</head>
    	<body>
    		<p>This is filler text.</p>
    		<button>Change Class</button>
    	</body>
    </html>
    That's a great post.

    What if your element is in an unordered list? id="btn-nav" is in the <ul>, but my link is in the <li>

    Code:
    <ul id="btn-nav" class="btns">
      <li><a href="#" onclick="userSelect(1)">1</a></li>
      <li><a href="#" onclick="userSelect(2)">2</a></li>
      <li><a href="#" onclick="userSelect(3)">3</a></li>
    </ul>
    What is the "" part, at the end of this piece?
    Code:
    document.getElementsByTagName("p")[0].style.setProperty("background", "black", "");
    What does the onload do in your code? What's it' checking for loading?

    Code:
    document.defaultView.onload = function () {
    					document.getElementsByTagName("button")[0].onclick = function () {
    						do_something_A();
    						do_something_B();
    If it was a link instead of a button

    Learned a lot! Thanks, Arbitrator.
    Last edited by ryanjohnsond; 06-23-2013 at 09:07 AM.

  • #13
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by ryanjohnsond View Post
    What if your element is in an unordered list? id="btn-nav" is in the <ul>, but my link is in the <li>

    Code:
    <ul id="btn-nav" class="btns">
      <li><a href="#" onclick="userSelect(1)">1</a></li>
      <li><a href="#" onclick="userSelect(2)">2</a></li>
      <li><a href="#" onclick="userSelect(3)">3</a></li>
    </ul>
    You would use a loop to iterate through the a elements which are descendents of the ul element. "a elements which are descendents of the ul element" is represented by this code:

    Code:
    document.getElementById("btn-nav").getElementsByTagName("a");
    And the result would look something like:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    		<style>
    			* { margin: 0; padding: 0; }
    			ul { text-align: center; }
    			li { display: inline-block; margin: 1em; padding: 2em; background: lightgray; }
    			li:hover { background: darkgray; cursor: pointer; }
    		</style>
    		<script>
    			(function () {
    				"use strict";
    				
    				function userSelect(stringified_number) {
    					document.defaultView.alert(stringified_number);
    				}
    				
    				function initialize_script() {
    					var navigation_list = document.getElementById("btn-nav");
    					var links = navigation_list.getElementsByTagName("a");
    					var i = 0;
    					while (i < links.length) {
    						links[i].addEventListener("click", function (event) {
    							event.preventDefault();
    							userSelect(this.firstChild.data);
    						});
    						i += 1;
    					}
    				}
    				document.addEventListener("DOMContentLoaded", initialize_script);
    			})();
    		</script>
    	</head>
    	<body>
    		<nav>
    			<ul id="btn-nav">
    				<!-- The href attributes are used for server-side fallback when JavaScript is not available.
    				If the href attributes are not to be used (because, say, server-side fallback is too much trouble to create), then the a elements may be eliminated and event assignments made to the li elements instead. -->
    				<li><a href="?userSelect=1">1</a></li>
    				<li><a href="?userSelect=2">2</a></li>
    				<li><a href="?userSelect=3">3</a></li>
    			</ul>
    		</nav>
    	</body>
    </html>
    Quote Originally Posted by ryanjohnsond View Post
    What is the "" part, at the end of this piece?
    Code:
    document.getElementsByTagName("p")[0].style.setProperty("background", "black", "");
    That's the priority flag. There's only one priority flag in CSS—"important"—and there's no point in specifying it when using inline style sheets.

    element.style (document.getElementsByTagName("p")[0].style) refers to an inline style sheet. You're probably more familiar with inline style sheets represented like this: <p style="/* inline style sheet */">.

    Apparently, the priority argument is now optional in the latest version of the CSS Object Model spec, so maybe I should have eliminated it. I'll need to investigate which browsers support omitting that once mandatory argument without throwing an error.

    Quote Originally Posted by ryanjohnsond View Post
    What does the onload do in your code? What's it' checking for loading?
    It's checking ("listening") to see if the document is loaded.

    document.defaultView is another way of referring to the window object. It's my preferred way as I like referring to the window object as a subordinate object of the document, not the other way around. Most of the other coders here will probably disagree with the idea though.

    Given that I just said "It's checking ("listening") to see if the document is loaded.", you might wonder why I'm checking document.defaultView/window instead of document. For legacy reasons, the onload property is part of the document.defaultView/window object. When you use the more modern addEventListener method to listen for events, things make a bit more sense: you can listen for the load events directly on the document object. (You can also listen for the DOMContentLoaded event, which is more useful since it doesn't wait until images are loaded like the load event does.)
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    ryanjohnsond (06-27-2013)


  •  

    Posting Permissions

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