www.webdeveloper.com
Results 1 to 3 of 3

Thread: How to load javascript from an external file (keep it simple plz)

  1. #1
    Join Date
    Dec 2008
    Posts
    35

    Question How to load javascript from an external file (keep it simple plz)

    Ok so I have this script:

    Code:
    <script type="text/javascript">
    
    			window.onload = (function()
    			{
    				var numberOfBackGroundImages = 5;
    				return function()
    				{
    					document.getElementsByTagName('body')[0].style.backgroundImage = 'url(images/background/0' + Math.ceil(Math.random() * numberOfBackGroundImages) + '.jpg)';
    				};
    			}());
    
    		</script>
    And its a in-page javascript for loading a random background image when the page first loads.

    Try as I might I'm looking for a VERY SIMPLE tutorial on how to take this script and put it in a external javascript file and then load it when the page first loads.
    And then call it into the HTML page first thing, like right after the body tag opens.

    Now I really don't know much about javascript and there in lies the problem with many of the tutorals that I'm trying to read, they have a lot of extra info and background stuff, and to be really honest I just don't want to learn all that stuff at this point.

    So I guess my question is how to I take the above script change it enough so its in and exteral JS file and then load it into the HTML page and then call the function into the body section of HTML page first thing.

    Thanks for the help,

    John

  2. #2
    Join Date
    Oct 2012
    Posts
    41
    a) copy the javascript into a new file and save it as 'main.js' :
    Code:
    window.onload = (function()
    {
    	var numberOfBackGroundImages = 5;
    	return function()
    	{
    		document.getElementsByTagName('body')[0].style.backgroundImage = 'url(images/background/0' + Math.ceil(Math.random() * numberOfBackGroundImages) + '.jpg)';
    	};
    }());
    b) edit your HTML file, removing the existing javascript tag in the <head> of the document and replace it with
    Code:
    <script type="text/javascript" src="main.js"></script>
    You can call the javascript file whatever you like as long as you put the correct filename in the src attribute of the script tag. You can also put the javascript file in a subdirectory if you want -

    / = web site root directory
    / index.html
    / assets / js / main.js

    update script tag so the src attribute reads 'assets/js/main.js'

  3. #3
    Join Date
    Dec 2013
    Posts
    3
    Make a new file *.js file and cut the code into it, then in the <head> tag of your HTML include
    Code:
    <script src="relativPathToFile.js"></script>
    (since its in the head tag, it'll load before the page

    This however can get quite messy if you have say 20+ files, Then you might wanna consider one of these options
    http://ntt.cc/2008/02/10/4-ways-to-d...th-source.html

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