Lesson 10: .js files Today we will discuss a method for "embedding" JavaScript coding on webpages by using the src attribute of the The page containing the JavaScript coding should be named with a file extension ending in .js and should only contain JavaScript, no html tags (except those contained within your script). This method allows you to create coding that is used on multiple pages, and any changes made only have to be made to the .js file instead of to each page. So if you used a .js file to create a navigation menu, then had several pages upon which you wished to use it, you could place the coding in a .js file then include it in any pages necessary. Perhaps you have a cookie that stores the user's preferred background and text color combination, then reads it on each page to set it up for the user accordingly. If you used a .js file to read the cookie, rather than 10-30 lines of cookie reading code, you could have one line including the script on each page. One of the greatest advantages to using .js files across mutliple pages is that the files are cached after the initial use, and are ready immediately on subsequent pages, speeding up load times after the initial page visited at your site. Things to remember when using .js script tags: 1) Always include a closing script tag 2) Never place anything between the opening and closing script tags (exception for Nav 2) 3) Don't use HTML tags on the .js file page (except that generated by scripting) 4) Pay CLOSE attention to variable names so as to avoid conflicts between those named on the page and those in the .js file 5) Keep function call names simple to prevent naming conflicts and memory lapse (that's me) 6) Remember to include some form of file load check in your page's scripting to insure the .js file loads before it's scripting is called Example- Basic Color Cube .js File Script tag to use on HTML pages: '; function cc(c){ with(document){ if(s.clr[0].checked==true){ bgColor=c;s.d.value=bgColor;} if(s.clr[1].checked==true){ fgColor=c;s.d.value=fgColor;} if(s.clr[2].checked==true){ linkColor=c;s.d.value=linkColor;} if(s.clr[3].checked==true){ vlinkColor=c;s.d.value=vlinkColor;} }} document.write(t); // End JavaScript Color Cube |