Question:
Where should I place my JavaScript code?
Answer:
Best practice is to separate content (HTML) from presentation (CSS) from behavior (JavaScript).
Just as you should link to external .css files to style your html page, you should also link
to external .js files to manage behavior of your html page.
Question:
How do I create an external JS file?
Answer:
Your favorite editor should have an option to create a new JavaScript file.
You can also open Notepad and save-as a new file with the extension .js - be sure
to select Save as type: All files (*.*), otherwise your file will have the .txt extension.
Question:
How do I link to an external JS file?
Answer:
CSS uses the "link" element, or tag, but JavaScript uses the "script" tag, with the attribute: src.
Please see the below example:
<head>
<title>My Home Page</script>
<link type="text/css" rel="stylesheet" href="styles/default.css" />
<script type="text/javascript" src="scripts/default.js"></script>
...
</head>
Notice that link uses the href attribute, while script uses the src attribute to identify the file to be utilized by the html page.
Also notice link is a self-closing or "empty" tag, while script requires
both and opening and closing tag.
Also, it has become common practice recently to place your script tag to link to an external .js file
just before the closing body tag. For example:
...
<script type="text/javascript" src="scripts/default.js"></script>
</body>
Question:
Is it better to link to an external .js file in the head, or just before the closing body tag?
Answer:
There are different reasons for each placement. Placing your link just before the closing body tag
provides for the html page to load faster, but then you have to wait for the .js file to load before
your JavaScript behavior is available. Placing your link in the head ensures that JavaScript is available
when the page loads, but causes the loading of the html page to wait until the .js file finishes loading.
Question:
What are the advantages of using an external .js file?
Answer:
Once a .js file loads, it remains in browser memory for the duration of your session,
so it does not need to be re-loaded as you navigate to different html pages - thus improving page-load performance.
Also, if you need to make a change to your JavaScript that affects your entire website,
you only need to make the change once, in your .js file, and not multiple times in each html file.
Question:
Can I link to more than one .js file in an html document?
Answer:
Yes, you may link to as many .js files as needed. Keep in mind, each additional file
adds to the initial load time for the first html page. As noted above, once the .js files are in memory,
that is no longer a concern, but you do not want visitors to turn away before the first page loads.
You may also place links both in the head and just before the closing body tag in the same html document.
Question:
Should I write JavaScript code differently in an external file compared to JavaScript code embedded in an html file?
Answer:
You write the same code as you would for embedded JavaScript - you simply
omit the opening and closing script tags in the external .js file.
Checkpoint
- You should know 9.1
-
- How to create an external JavaScript file
- How to link to an external JavaScript file
- How to write code in an external JavaScript file.
- Questions 9.1
-
- What tag should you use to link to an external .js file?
- Is that tag an "empty" tag?
- What attribute contains the value of the path/name of the external .js file?
- What are the advantages in using an external .js file?
- Exercise 9.1
-
- Create a file named scripts.js
- Inside your new scripts.js file, write code to change the background color to #cde of the element with the ID: wxHtmlResults
- web developer toolbox 9.1
- Add a link to the JavaScript menu
- Open menu_js.html in your favorite editor
- If you don't already have an Events category, (create a new dt tag to) add a category: Events
- (Create a new a tag inside a new dd tag to) add a link: External JS
- href should be: javascript/events_external.html
- Add a new JavaScript page
- In the javascript folder, open aaa_template.html in your favorite editor,
and save-as: events_external.html
- Below the comment "edit category name", change text from template to Events
- Below the comment "edit publish and update dates", change both dates to the current date
- Update the new page
- Below the comment "edit company name, page title, and page description", change:
- Company Name to: your name
- Template to: External JS
- ...template to: Linking to external .js files
- Update the comments section:
- <dt>External JS</dt>
- <dd>Use the script tag to link to an external js file</dd>
- <dd>The src attribute contains the path/nam of the .js file</dd>
- <dd>Place links either in the head section, or just before the closing body tag</dd>
- Insert html inside the wxHtmlResults div:
- <p>The background color was changed.</p>
- <p>An external .js file was used.</p>
- Place a link to your external .js file just before the closing body tag.
- Open menu_js.html in your browser and click on your new link