shaijuelayidath Posted September 5, 2012 Share Posted September 5, 2012 I am studying Javascript from the W3Schools TutorialsIn the 'JS Where To' section of the Tutorial, in the begning says :(A JavaScript can be put in the <body> and in the <head> section of an HTML page.)But did anyone try....some Javascripts are not working from <head>Test the below Javascripts. <script type="text/javascript">var editor="dreamweaver";document.getElementById("trial").innerHTML=editor;</script> and <script type="text/javascript">document.getElementById("trial").innerHTML="This is first Javascript";</script> Yesterday When I asked this as a topic I got the answer thatit should be add by 'window.onload'. That is OK.As I am a new student of Javascript I was testing by placed both in<body> and <head> as per the word in tutorialIn the <body> it is working but not from the <head>.But in the tutorial there is no any explanation about this exceptions.A new comer in Javascript Tutorial will be totally confused by this.So I says it will be very helpfull an explanation about this. 1 Link to comment Share on other sites More sharing options...
Krewe Posted September 5, 2012 Share Posted September 5, 2012 We have no control over the tutorial, but you are right. It would be very confusing learning from this site, wondering why JS in the head isn't working.I highly doubt the admins of the site will ever read this, but it would be a great, small addition the JS tuts. Link to comment Share on other sites More sharing options...
Ingolme Posted September 5, 2012 Share Posted September 5, 2012 What they mean is that you are allowed to place it in both the body and in the head. A reference to an element can only be done after the element has loaded. In order to improve efficiency, Javascript starts running as soon as it has been sent to the browser even if the rest of the HTML hasn't arrived. This is why putting Javascript before the element it is trying to access will fail, unless it is contained in a function that is called after the element was loaded. Link to comment Share on other sites More sharing options...
justsomeguy Posted September 5, 2012 Share Posted September 5, 2012 In case it's still not clear, you can put any code you want in the head, there's no problem with that, the only problem is that if the code in the head runs immediately then it can't make changes to the page yet because the page hasn't been set up yet. When you were given the answer in the other topic about using the onload event, that code runs immediately. It immediately runs and adds a function to run when the page is finished loading, that's what that code does. Then when the page is finished loading and the onload event fires, it runs the other code that you told it to run. Since the page is finished loading by that point, that code can make changes to it. So the code still runs as soon as the browser gets to the head, but the only code running at that point is the code to set up the onload event to run the other code. You can put whatever code you want in the head as long as you aren't telling the browser to make changes to the page before the page has loaded. Link to comment Share on other sites More sharing options...
ShadowMage Posted September 5, 2012 Share Posted September 5, 2012 if the code in the head runs immediately then it can't make changes to the page yet because the page hasn't been set up yet.This can be further demonstrated using a script placed in the body as well:<body><script type="text/javascript">document.getElementById("trial").innerHTML="This is first Javascript";</script><div id='trial></div></body> The above will fail because it's trying to access an element before the element has been created. JavaScript runs as soon as it is encountered, no matter if it is placed in the head or the body. This is why it is often recommended to place scripts at the end of the body right before the closing tag or in the head but wrapped in an onload handler. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now