Scripts in web design are generally split into client side scripts and server side scripts.

In combination with the HTML client side scripts can be very powerful tool for making the site looking more dynamic and more professional.

Once downloaded and interpreted by a browser a client based script gets stored in client's PC cache memory. That in turn speeds up the execution every time the script needs to be executed.

They are often used to:

  • increase interactivity with users, i.e. via intrinsic events (mouse clicked, keys pressed, etc...)
  • executing different function on documents loading or unloading (such as an image preloading)
  • form evaluation (i.e. after user's inputs or upon submission of a from)

Scripts can be evoked with an internal code by using, i.e., intrinsic events attributes (onclick, onmousemove, etc...) applied directly on an HTML element and with an external file evoked within the document's head section with an element called <script> and src attribute.

To optimize maintenance work and upgrades done to a larger website the best way to add a client based script to an HTML document is to use external source.

The most popular client side script nowadays is JavaScript that, in combination with DOM (Document Object Model) convention, offers a great tool for working with behaviors of HTML elements.

A good practice of using a client based JavaScript is a so called "unobtrusive JavaScript". Unobtrusive refers to:

  • separation of document's behavior layer from its content (HTML) and presentation (CSS)
  • program scalability and avoidance of problems related to browsers inconsistencies
  • "progressive enhancement" that suppose to ensure so called "graceful degrading" of the JavaScript code in case when a client's browser does not support JavaScript (rarely these days) or has JavaScript disabled.

The code for JavaScript differs from HTML and therefore will not be explained here but in our example below all mentioned possibilities will be shown.

In case of having JavaScript disabled the <noscript> element can be used for alternative message to a user.

Typical syntax for inline JavaScript:

<body onload="JS functionName()"></body>

Typical syntax for internal JavaScript:

<head><script type="text/javascript" />JS code</script></head>

Typical syntax for external JavaScript:

<head><script type="text/javascript" href="JS_code.js"/></script></head>

Example

Client side script JavaScript:

 

›› go to examples ››