demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

How To Write JavaScript On An HTML Page

javascript / introduction

Estimated reading time: 1 minute, 54 seconds

is executed client-side, on the browser. Like , it can be written either inline, embedded, or linked, and (just like CSS) those methods are in order of preference in terms of power and adaptability. A link to a JavaScript file is often written inside the <head> section of the page on which it is used:

<head>
<title>An HTML Page With Linked Javascript<title>
<script src="assets/scripts/prettify.js"></script>
</head>

There are a few possible downsides to this:

  1. Page rendering may be halted until the script is loaded and executed.
  2. A script written in the <head> may attempt to modify DOM elements that have not yet appeared on the page.

Alternatively, links to JavaScript files can be placed at the end of the document, typically just before the closing </body> tag.

<script src="assets/scripts/prettify.js"></script>
</body>
</html>

…thus avoiding both issues.

JavaScript files must have a .js extension in the filename. (You will occasionally see a language attribute used when linking to a JavaScript file, but that is deprecated and invalid in HTML.)

It is also possible to link to a JavaScript file outside your own domain: this is frequently done when using JavaScript frameworks such as jQuery to centralize code and potentially speed up load times. (Cross-domain files will load in a seperate simultaneous “stream” from the rest of the page, and will be cached by the browser: if the user has previously visited a site that uses the same technique for the same file, the cached version of the file will be used, rather than downloading it again.)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>

The second and less preferable option is to write the JavaScript embedded, again in the <head> section:

<script>
/* JavaScript code goes here */
</script>

Note that you cannot write or directly inside JavaScript; like CSS, using another language between the opening and closing <script> tags, or in the linked JavaScript file, will cause it to stop working. The only HTML you can use in embedded script is a very special case:

<script>
<!--
/* JavaScript code goes here */
-->
</script>

The HTML comment around embedded JavaScript code accomplishes two things:

  1. It protects very old browsers that may not understand JavaScript, and will attempt to run the code as HTML.
  2. More practically, it allows us to continue to validate the HTML page without confusing the validator.

    You do not, as a general rule, write JavaScript code inline, for reasons we shall cover shortly.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.