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.
Page 2 of 2 FirstFirst 12
Results 16 to 27 of 27
  1. #16
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Hashim1 View Post
    I've always been taught it should be placed within the <head> tag? Could anyone expand on this? What are the pros/cons of putting it within the <body> tag as opposed to the <head>?
    JavaScript will delay the rendering of the page if the script is attached higher in the page and it doesn't have an async or defer attribute on it or it runs in a browser that doesn't understand async or defer (currently most if not all browsers don't understand those attributes). Your page therefore appears to load faster if you attach the script at the bottom.

    In order to interact with the web page the HTML must be already there before you can interact with it. So you can either wrap all the JavaScript inside an event listener that waits for the entire page to load including all the images and place the script where ever you like in the page or you can place the script immediately before the </body> tag where you know that all the HTML is already loaded and so run the JavaScript sooner without having to wait for the rest of the content to load. Some (but not all) browsers do have an alternative event that fires when the HTML finishes loading which would allow you to achieve the same result using a lot more code in those browsers but would still have the same delay in the other browsers if you do that.

    So the page renders faster and the JavaScript is smaller and runs sooner when attached to the bottom of the page.

    It was considered good practice to attach JavaScript in the head of the page back when Netscape 4 was still around but JavaScript has changed completely since then and the modern code works better at the bottom. There are still lots of people teaching history of JavaScript classes where they teach how to write JavaScript to work with Netscape 4 and earlier - which is why you see so much antique JavaScript code still being written today because the students (and probably the teacher as well) don't realise it is a history class rather than a coding class).

    Back then they also used to teach the <noscript> tag which modern JavaScript has made totally obsolete. HTML 5 proposes allowing the use of <noscript> in the head of the page where it will serve some use if wrapped around CSS but HTML 4 only allows it in the body where it serves no purpose whatsoever.
    Last edited by felgall; 06-16-2012 at 10:41 PM.
    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.

  2. Users who have thanked felgall for this post:

    Hashim1 (06-17-2012)

  3. #17
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,011
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by felgall View Post
    Back then they also used to teach the <noscript> tag which modern JavaScript has made totally obsolete. HTML 5 proposes allowing the use of <noscript> in the head of the page where it will serve some use if wrapped around CSS but HTML 4 only allows it in the body where it serves no purpose whatsoever.
    Sorry, felgall, I do not understand that. What is wrong with

    Code:
    <noscript>
    <p class = "noscr">
    Sorry! &nbsp It appears that your browser does not support JavaScript, <br>
    or JavaScript has been disabled, possibly by your network administrator. <br>
    This means that you are unable to view or navigate some parts of this website correctly.<br><br></p>
    </noscript>

    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.

  4. #18
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Philip M View Post
    Sorry, felgall, I do not understand that. What is wrong with

    Code:
    <noscript>
    <p class = "noscr">
    Sorry! &nbsp It appears that your browser does not support JavaScript, <br>
    or JavaScript has been disabled, possibly by your network administrator. <br>
    This means that you are unable to view or navigate some parts of this website correctly.<br><br></p>
    </noscript>

    You mean apart from that message basically telling people to go away because you can't be bothered to write your web site so it works without JavaScript?

    Because you are limited to entire blocks of content and limited to JavaScript being enabled or disabled. By using JavaScript to do it instead you can change inline text rather than the entire block of text and you can also test for specific parts of JavaScript being enabled - just having JavaScript enabled is meaningless as older browsers only support part of JavaScript and so if your script needs a particular part of the language then if their version of JavaScript doesn't have it then they effectively don't have JavaScript as far as your script is concerned but the <noscript> tag will not work.

    For example suppose your need their version of JavaScript to support Ajax calls.

    Your HTML might look like:

    Code:
    <p>Ajax is <span id="ex2">not </span>supported.</p>
    and your JavaScript:

    Code:
    function supportsAjax() {
    if (typeof XMLHttpRequest != 'undefined') return true;
    else if (window.ActiveXObject) {
    var avers = ["Microsoft.XmlHttp", "MSXML2.XmlHttp"];
    for (var i = avers.length -1; i >= 0; i--) {
    try {
    httpObj = new ActiveXObject(avers[i]);
    return true;
    } catch(e) {}
    }
    }
    else return false;
    }
    if (supportsAjax()) document.getElementById('ex2').style.display = 'none';
    Now you show me how to replicate that with <noscript> if you think that noscript still has a use.

    Even your example can be handled without the noscript tag:

    Code:
    <p id="noscr">
    Sorry! &nbsp It appears that your browser does not support JavaScript, <br>
    or JavaScript has been disabled, possibly by your network administrator. <br>
    This means that you have to leave because I was too lazy to write this website correctly.</p>
    <script type="text/javascript">document.getElementById('noscr').style.display = 'none';</script>
    which has the added flexibility that you don't necessarily need it to be a complete block of text - if you use JavaScript rather than noscript you can adjust inline text whereas noscript is a block level tag.
    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.

  5. Users who have thanked felgall for this post:

    Hashim1 (06-17-2012)

  6. #19
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Philip M View Post
    Sorry, felgall, I do not understand that. What is wrong with

    Code:
    <noscript>
    <p class = "noscr">
    Sorry! &nbsp It appears that your browser does not support JavaScript, <br>
    or JavaScript has been disabled, possibly by your network administrator. <br>
    This means that you are unable to view or navigate some parts of this website correctly.<br><br></p>
    </noscript>

    You mean apart from that message basically telling people to go away because you can't be bothered to write your web site so it works without JavaScript?

    Because you are limited to entire blocks of content and limited to JavaScript being enabled or disabled. By using JavaScript to do it instead you can change inline text rather than the entire block of text and you can also test for specific parts of JavaScript being enabled - just having JavaScript enabled is meaningless as older browsers only support part of JavaScript and so if your script needs a particular part of the language then if their version of JavaScript doesn't have it then they effectively don't have JavaScript as far as your script is concerned but the <noscript> tag will not work.

    For example suppose your need their version of JavaScript to support Ajax calls.

    Your HTML might look like:

    Code:
    <p>Ajax is <span id="ex2">not </span>supported.</p>
    and your JavaScript:

    Code:
    function supportsAjax() {
    if (typeof XMLHttpRequest != 'undefined') return true;
    else if (window.ActiveXObject) {
    var avers = ["Microsoft.XmlHttp", "MSXML2.XmlHttp"];
    for (var i = avers.length -1; i >= 0; i--) {
    try {
    httpObj = new ActiveXObject(avers[i]);
    return true;
    } catch(e) {}
    }
    }
    else return false;
    }
    if (supportsAjax()) document.getElementById('ex2').style.display = 'none';
    Now you show me how to replicate that with <noscript> if you think that noscript still has a use.

    Even your example can be handled without the noscript tag:

    Code:
    <p id="noscr">
    Sorry! &nbsp It appears that your browser does not support JavaScript, <br>
    or JavaScript has been disabled, possibly by your network administrator. <br>
    This means that you have to leave because I was too lazy to write this website correctly.</p>
    <script type="text/javascript">document.getElementById('noscr').style.display = 'none';</script>
    which has the added flexibility that you don't necessarily need it to be a complete block of text - if you use JavaScript rather than noscript you can adjust inline text whereas noscript is a block level tag.

    <noscript> is even less useful in JavaScript than document.write and neither should be used in a live web page.
    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.

  7. #20
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Keeping in mind that I completely agree with felgall when it comes to coding what he likes to call "modern JavaScript" I don't understand how you can honestly defend exclusion as an argument for not using noscript, or even for enforcing modern JavaScript... All other technologies that exist for the web require that you have the right software, and at times, the right version. A lot of proprietary sites will even make you download or upgrade to satisfy their liscencing agreements... Packaged software always comes with a minimum system requirements... The fact is that enforcing a minimum of soft/hardware is neither outdated nor uncommon. It's not even that unreasonable if you honestly have a product that can't reasonably be recreated without it. Have you ever tried maps.google.com without JavaScript enabled? You get a static map, and that's about it. (talk about downgrading gracefully)
    @philip with the exception of the occasional app, how often have you really needed to resort to that? I can't think of any myself... And I've been at this since the days of Netscape. Not to mention I'm not even as skilled as you...
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  8. #21
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by blaze4218 View Post
    I don't understand how you can honestly defend exclusion as an argument for not using noscript
    my argument for not using <noscript> is:

    1. In the body it can't do anything that JavaScript itself cannot do in browsers more modern that Netscape 4.
    2. It is a block level tag and therefore can only display or not display a block of text depending on whether Javascript is or isn't enabled whereas JavaqScript can display or not display any inline text depending on whether or not a specific JavaScript command is or isn't available.

    Therefore <noscript> can only do a small portion of what JavaScript can do regarding what to display or not when JavaScript or a part of JavaScript is not available. Anywhere someone uises noscript in the body they could replace the noscript tag with JavaScript. Not all of the Javascript that determines what to display when JavaScript is/isn't enabled can be replaced with noscript. Most of the time not using noscript achieves the same or a better result with less code.

    Where <noscript> is actually useful is wrapped around CSS in the head of the page - which is only valid in HTML 5.
    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.

  9. #22
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Now that's a much stronger argument. Everyone has to fork based on feature detection; so if a particular feature fails without a backup, the end-user can be shown the "not supported" message instead of a blanket "you don't have js" message. But in lieu of the noscript tag- wouldn't you still require a div with the same information, that needs JavaScript to hide the div?(for those with/without js) Unless I'm missing something, that's still the same end result as what Philip suggested... But with slightly more work. Perhaps if you didn't write in such vague terms...Remember, we're not all professors.
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  10. #23
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,509
    Thanks
    77
    Thanked 4,378 Times in 4,343 Posts
    Felgall is referring to the fact that the <noscript> tag is a BLOCK tag. Meaning it acts like a <div> in the sense that it can't be used in-line.

    His argument, in part, is that you can use JavaScript with non-block tags (e.g,, <span>) to have finer control over the with/without JavaScript-enabled content.

    See his example:
    Code:
    <p>Ajax is <span id="ex2">not </span>supported.</p>
    To do the equivalent with <noscript>, you would need:
    Code:
    <noscript>Ajax is not supported.</noscript>
    <div id="whatever" style="display: none;">Ajax is supported.</div>
    And then use JS code to change the style of the whatever <div> to block.

    It's not a real strong argument. In either case, you have to use JavaScript to change the display style of something. To me, it's more a stylistic choice.

    The stronger argument is probably simply that there's no NEED for <noscript> as it's just another way of doing something that can be done if it didn't exist.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  11. #24
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post

    See his example:
    Code:
    <p>Ajax is <span id="ex2">not </span>supported.</p>
    To do the equivalent with <noscript>, you would need:
    Code:
    <noscript>Ajax is not supported.</noscript>
    <div id="whatever" style="display: none;">Ajax is supported.</div>
    And then use JS code to change the style of the whatever <div> to block.

    It's not a real strong argument.
    With that particular sample code you can't do it with <noscript> as that tag doesn't know if the browser supports Ajax calls or not - it just knows if JavaScript is enabled or not - which is NOT the same thing. You'd actually need additional HTML outside the <noscript> to display the message when JavaScript is enabled but Ajax is not supported. Since that would replicate the noscript text the noscript becomes unnecesary.

    Code:
    <noscript>Ajax is not supported.</noscript>
    <div id="ajaxno"  style="display: none;">Ajax is not supported.</div>
    <div id="ajaxyes" style="display: none;">Ajax is supported.</div>
    Often you will not only need to know if JavaScript is enabled or not but also whether particular commands are supported - particularly with all the new commands recently added that only some browsers currently support.

    The only place where <noscript> can do something that can't be more easily done with JavaScript is to wrap it around CSS in the head of the page - something you can only do with HTML 5 as in HTML 4 the <noscript> tag is only valid in the body of the page where it serves no useful purpose.
    Last edited by felgall; 06-18-2012 at 07:37 AM.
    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.

  12. #25
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,011
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Perhaps I am too lazy to write the web site so it works without JavaScript. I take the view that people who disable Javascript (which has long since ceased to be a security issue) must take the consequences of that strange decision. Likewise people who continue to use ancient browsers - if some feature is not supported then that is their problem.

    In the past some people may have disabled Javascript (but IMO 95% of ordinary users would have no idea how to do so or what, if any, the advantages of that might be).

    My on-line banking requires Javascript. Are the banks too lazy to make their sites work without it? The reality is that these days Javascript is absolutely essential for browsing the web. As blaze4218 says, "All other technologies that exist for the web require that you have the right software, and at times, the right version."

    I have no idea how many, if any, people see the <noscript> message. Very few, I suspect. I usually include it as a matter of routine as a "fail-safe". I shall continue to do so.

    It is a block level tag and therefore can only display or not display a block of text depending on whether Javascript is or isn't enabled whereas JavaScript can display or not display any inline text depending on whether or not a specific JavaScript command is or isn't available.
    I see that as clutching at straws. How can Javascript display inline text if it is not enabled?

    I think this is an issue on which we must agree to disagree!

    ===================================================

    The more I think about this the more I am convinced that felgall's argument does not hold water.

    A visitor to my site who has Javascript disabled (or not available) is informed that without Javascript he cannot experience the full functionality of the site. So he will not, for example, see the date/time clock. His options are (a) to enable Javascript (b) accept the loss of functionality or (c) leave the site (perhaps not such a big loss!).

    I do not see how if I were less lazy I could maintain the full functionality of the site without Javascript. If that were possible there would be no purpose in Javascript! Here is another example where <noscript> is useful:-

    Code:
    <script type = "text/javascript">
    
    var goodurl = "";
    // obfuscate the url from bots
    var urlrev = "ku.oc.hocus.bca"
    urlrev = urlrev += "xyz@jklm"
    goodurl = urlrev.split("").reverse().join("");
    goodurl = goodurl + "?subject=Enquiry";
    document.write('<a href=\"mailto:' + goodurl +'">');
    document.write('Contact us by email' + '<\/a>');
    
    </script>
    
    <noscript>
    <p class = "protected">Email address protected by JavaScript.<br>
    Please enable JavaScript in your browser to contact us.
    </p>
    </noscript>
    It may be that in some cases the <noscript> tag can be replicated without it, and hence it is not essential. That is true of quite a few Javascript commands.
    Sometimes they offer just another way of doing something that can be done equally well (if perhaps at greater length) if that command didn't exist.
    __________________
    Last edited by Philip M; 06-18-2012 at 11:18 AM.

    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.

  13. #26
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,383
    Thanks
    264
    Thanked 32 Times in 31 Posts
    I know this is a bit old but this was a very interesting and informative read on both sides. I was wanting to use noscript to actually hide the login input on the login page if they did not have javascript enabled. Only because i prefer they use the javascript part of my script for validation rather than the php part.

    I do validate both ways, i develope it first validating input with php and when that is hight and tight then i toss in the javascript. This gives me two layers which is the way most do it now days from what i gather.

    So yes for me and my simple script that is only 32 files it will work with no javascript enabled but i want them to use javascript simply for the fact that its my script and i made that choice. So i use no script to put a message up very similar to what Philip had. I am however still alittle iffy on wether i want to actually hide the login input on the login page so they have to enable javascript to log in even but i am leaning that way.

    Both sides to me made very good points. To me i think if you have a large script that will have tons of public users and has very sensitive data like banking, maybe you do want to take it to the level that Felgall has talked about where you actually want to be more specific in your determination of actually what part of js they have and dont have.

    But i also agree with Philip about js being secure now days and that if they choose to not have js enabled or use a dusty old browser then there are consequences for that.

    My particular script will only be used by admins so they should have js enabled in my mind and if they dont well then they need to enable it or not be able to log in lol...

    I will now have a cup of coffee and think about this and to what extent i want to use my block coding lol...

    Very nice read and hats off to you both for such a great post and conversation
    Last edited by durangod; 02-16-2013 at 06:11 PM.

  14. #27
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,011
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by durangod View Post
    Very nice read and hats off to you both for such a great post and conversation
    Glad you found this discussion of interest!

    I invite you to consider the script at
    Need help on real-time calculation for array
    which seems to me to be fairly typical of how Javascript is used in modern web-pages.

    For the life of me I do not see how this sort of thing can be achieved without Javascript.

    You are absolutely right - JavaScript form validation only provides convenience for users, not security. If for example a script verifies that the user agreed to a firm's terms of service, or filters invalid characters out of fields that should only contain numbers, or calculates the cost of purchases, the validation must also be performed server-side, and not just on the client.

    But I hold firmly to my view that people who disable Javascript (which has long since ceased to be a security issue) must take the consequences of that strange decision. Likewise people who continue to use ancient browsers - if some feature is not supported then that is their problem. Same with monochrome monitors! Having said that, I think it is important to continue to support browsers which are still in use by as many as say 1% of users - IE6 for example. If only to display a warning message asking them to upgrade!
    Last edited by Philip M; 02-16-2013 at 06:46 PM.

    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.


 
Page 2 of 2 FirstFirst 12

Posting Permissions

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