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
JavaScriptBasicsJavaScript Running a scriptRunning a ScriptVariablesExpressions and OperatorsObjects.Properties.MethodsThe Date ObjectStringsRegular ExpressionsDefining RegExp PatternsBranches and ConditionsLoopsArraysArray MethodsSorting ArraysUser-Defined FunctionsCookiesWindowsFrames

Home > JavaScript > Running a Scriptprinter version

JavaScript Running a Script

JavaScript may be embedded within an HTML document in several different ways.

Using the <script> Element

This uses the HTML script element that may be used for a number of client-side scripting languages, which in our case is JavaScript.

<script> Attributes

The <script> element has a closing tag and several attributes.



If these attributes are omitted the code will still run but you may find that the document will not pass strict HTML validation.

JavaScript tags may appear in either the head or body of an HTML document or both and may occur multiple times.

Scripts are executed in the order in which they appear in the document and later scripts are "aware" of the actions of earlier scripts within the same document so are considered as part of the same JavaScript programme.

Example of a JavaScript
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
    document.write('Hello World');
</script>
</body>
</html>


JavaScript Versions

Over time new versions of JavaScript have been developed with enhanced capabilities.

If you embed a version of JavaScript in a document that is read by a browser that doesn't support that version then it will produce an error.

For this reason the language attribute allows you to state the version that is being used
e.g. <script language="javascript1.2" type="text/javascript">
so that browsers that don't support that version will ignore the script.

JavaScript Include Files

The HTML script element also allows a src attribute, which allows script to be placed in an external file and loaded into a document at run time.

The src attribute must be the relative or absolute address of where the external file can be found on the server.

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.

Include files contain only JavaScript instructions without script tags, are saved with a .js file extension and there must be nothing between the opening and closing script tags used in the HTML document.

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');


JavaScript Event Handlers

Events are generated when for example a web page loads or a user moves the mouse.

JavaScript can capture these events to trigger a piece of code known as an event handler and this it what gives JavaScript the power to respond dynamically.

Event handlers are defined as attributes of various HTML tags and any number of event handlers may be defined as an attribute of an HTML tag.

Below is an example of an event handler attached to an HTML form. If the name field is left blank then the form won't submit and the user is alerted.

Example of an onsubmit Event Handler
<html>
<head>
</head>
<body>
<form method="post" action="test.php" name="userform" onsubmit="if(document.forms[0].elements[0].value=='') alert('Your Name is Required');return false;">
<input type="text" size="40' name="username">
<input type="submit">
</form>
</body>
</html>


The <noscript> Element

This displays an alternative to a JavaScript if the user's browser doesn't support JavaScript but won't display if the user's browser does.

Example of the <noscript> Element
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
    document.write('Hello World');
</script>
<noscript>
    Your browser doesn't support JavaScript.
</noscript>
</body>
</html>


Syntax

JavaScript is case-sensitive therefore keywords must be in lower-case and capitalization must be used consistently with identifiers for variables, functions etc.

When using names as identifiers there are words that you may not use since they are keywords in JavaScript e.g. var, function, break, true, false etc.

Whitespace is ignored in JavaScript therefore programme statements should end with a semicolon.

You can omit semicolons if you place each statement on a new line but it's good practice just to always use semicolons.

Comments are useful since they not only remind you of what code does but can be used to comment out sections when debugging.

Examples of Comments
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
// This is a single line comment

/* This is
a multiple line
comment */
</script>

</body>
</html>


Previous - JavaScript Basics Previous - JavaScript Basics     Next - Variables Next - JavaScript Variables


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 ReplacementUsing 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