Basics
Creating a Document
Head and Body Elements
Formatting Text
Creating Lists
Embedding Images
URLs Explained
Linking to Documents
Creating Tables
Forms Form Basics
Input and Textarea
Select Lists
Frames Framesets
The Frame Element
Nested Framesets
Targetting Frames
Inline Frames
Tips and Tricks Meta Tags
Transition Effects
HTML Generators Create a Document
Create a List
Create a Table
HTML
Basics
Implementing CSS
CSS Syntax
Pseudo Classes/Elements
CSS Classes
CSS Properties Font Properties
Color and Background
Text Properties
Border Properties
Margins and Padding
Size and Position
Tips and Tricks Menu Buttons
Special Effects
CSS
Basics
Running a Script
Variables
Expressions and Operators
Objects.Properties.Methods
The Date Object
Strings
Regular Expressions
Defining RegExp Patterns
Branches and Conditions
Loops
Arrays Array Basics
Array Methods
Sorting Arrays

User-Defined Functions
Cookies
Windows
Frames
Tips and Tricks Image Replacement
Using Includes
Form Validation
Debugging
JavaScript
Basics
Creating a Script
Running a Script
Variables
Expressions and Operators
Strings Strings Basics
Strings and Substrings
Replacing Substrings
Regular Expressions
Branches and Conditions
Loops
Arrays Array Basics
Array Functions
Sorting Arrays
User-Defined Functions
Include and Require
Uploading Files
File Functions
Session Variables
Tips and Tricks Page Templates
Form Reply Scripts
Form Validation
JavaScript to PHP
PHP
Basics
Create and Drop
Show and Describe
Insert, Update and Delete
Querying
Join Queries
Functions
Table Locking
PHP/MySQL Functions Accessing a Database
Querying with PHP
Create and Drop with PHP
Insert and Update with PHP
Frequently Used Functions MySQL
Basics
Layout and Navigation
Page Content Style
Web Page Copy
Graphics and Animation
HTML Forms
Accessibility
Legal Requirements
MySQL
JavaScriptBasicsRunning a ScriptVariablesExpressions and OperatorsObjects.Properties.MethodsThe Date ObjectStringsRegular ExpressionsDefining RegExp PatternsBranches and ConditionsLoopsArraysArray MethodsSorting ArraysUser-Defined FunctionsCookiesWindowsFrames

Home > JavaScript Tips and Tricks > Using Includesprinter version

Using JavaScript Includes

As covered in the tutorial on Running a Script, this involves removing a script from an HTML page and placing it in a separate JavaScript file then referring to it from within the HTML page.

This allows you to reuse code required by multiple pages - simplifying maintenance. An include file that has been downloaded is held in cache and doesn't need to be downloaded again.

Example of using Include
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript" src="test.js">
</script>
</body>
</html>


The test.js Include File used by the Example above
document.write('Hello World');


Problems with HTML Validation

Sometimes when you use the document.write() method to output HTML in a page you may encounter a problem validating the page.

This is because the validator reads the HTML tags within the JavaScript statement and assumes them to be part of the HTML code.

If you've used a decision branch to output a choice of start tags, with a single end tag after the branch, then a mismatch of start and end tags will be assumed by the validator.

To avoid this remove the JavaScript to an include file and the validator will ignore it.

Problems with HTML Validation with Flash

If you embed a Flash movie within a page you may encounter a problem with validation. This problem isn't related to JavaScript but can be resolved with it.

The problem occurs because of the different ways that different browsers display Flash.

Internet Explorer browsers use the HTML <object> tag, which is recognised by the W3C validator, and Mozilla browsers use the <embed> tag, which is not recognised by the W3C validator.

However, for the Flash movie to display in both Internet Explorer and Mozilla, both tags must be used.

To get round the problem a JavaScript include file may be used to hold all the required HTML code within a document.write() statement.

All carriage return and tab characters should be removed first or the JavaScript will produce an error.

Example of Including Flash
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript" src="flash.js">
</script>
</body>
</html>


The flash.js Include File used by the Example above
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab# version=6,0,79,0" id="shockwave" width="100" height="16"><param name="movie" value="shockwave.swf"><param name="bgcolor" value="#FFFFFF"><param name="quality" value="high"><param name="wmode" value="transparent"><param name="allowscriptaccess" value="samedomain"><embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" name="shockwave" width="100" height="16" src="shockwave.swf" bgcolor="#FFFFFF" quality="high" wmode="transparent" swliveconnect="true" allowscriptaccess="samedomain"><noembed></noembed></embed></object>');


In the example above a Flash file called shockwave.swf is uploaded to the same directory as the flash.js and HTML file.




Privacy | Terms | Contact | Links | Sitemap | RSS Feeds RSS and JavaScript Feeds
©2010 www.webdesignworkmate.co.uk all rights reserved 
Design and Production by smallbizonline website design © 2000-2010
Valid HTML 4.01! Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0Valid CSS!
Tips and TricksImage ReplacementJavaScript using includesUsing IncludesForm ValidationDebugging
Got any JavaScript Tips?
Send me your tip and if it's suitable I'll put it on the site, credit it to you and add a link back to your site.
Recommended Reading
Javascript the definitive guide

Javascript and DHTML cookbook

Pro javascript techniques

simply javascript