JavaScript Tutorial
1. Introduction
[this page | pdf | back links]
JavaScript is one of the
three main components of modern webpages, along with Hypertext Markup
Language (HTML) and Cascading Style
Sheets (CSS). HTML indicates to the browser what
elements should be included on the page (and in what order). CSS indicates how
each should be styled. JavaScript provides a means for webpage authors to
manipulate these elements programmatically and in response to actions by the
end user. Tutorials and reference material covering all three components
are available here.
In these pages, we
describe JavaScript further. Text used within HTML, CSS or JavaScript files is
generally shown in courier new
(i.e. a fixed space) font. The pages contain links to
an extensive body of reference material explaining HTML, CSS and JavaScript in
detail. We also provide a wide range of examples,
which can help you understand better how HTML, CSS and JavaScript work. See
below for further details on how to access these examples.
JavaScript can be added
to a webpage in one of three ways (somewhat akin to how CSS can be
added to a webpage):
(a)
By including it within an individual HTML event attribute.
This typically involves only very small JavaScript statements.
(b)
Within separate <script>
elements in the HTML
(c) In
external script files (these involve including in the HTML a <script>
element with its src
attribute set to the relevant script file name).
A simple example of
JavaScript involves the use of the document.write
method. For example, the following HTML text would return a web page the first
line of which says “Hello World (using HTML)” followed by a line break and a
second line saying “Hello World (using HTML)”. Script elements are typically
executed in the order in which they appear when the page is first loaded. In
this case the script cause the browser to add some more text to the web page.
<html>
<body>
Hello World (using
HTML)<br>
<script>
<!--
document.write("<br>Hello World (using Javascript)")
//-->
</script>
</body>
</html>
More sophisticated
approaches can alter individual HTML elements rather than merely adding to the
end of the document or can react to events such as the clicking of a button. For
example, the following HTML text returns a web page with two lines, the first
being “Hello World (using HTML)” and the second line being “and using
JavaScript”.
<!DOCTYPE html>
<html>
<head></head>
<body>
Hello World (using HTML)<br>
<em id="Added"></em>
<script>
document.getElementById("Added").innerHTML="and
using JavaScript"
// Adds text to the element with id="Added"
</script>
</body>
</html>
Note: we are here taking
advantage of the execution of script commands when the page first loads. A more
complicated (but more general way) of achieving the same result would be to add
an ‘event listener’ that is triggered when the page loads and to have a
function associated with this event listener that alters (here adds) the text
in the desired manner when the event
happens. By attaching the function to a different event, e.g. one triggered
when the user clicks on an element then the a more responsive webpage can be
created.
JavaScript comments
When writing computer
software, it often helps to add explanatory comments. In JavaScript, a single
line comment is indicated by “code // text” where the code is
still executed, but the text is ignored by the Browser.
Any text between “/*” and “*/” (not in quotes) including line breaks is also
ignored, allowing authors to create multi-line comments. These tend to be used
for formal documentation, e.g. material at the start of each function that describes
what the function does.
Tutorial
contents:
1.
Introduction
(i.e. this page)
2.
Variables
3.
Statements
4.
Functions
5.
Event
handling
6.
The
Document Object Model (DOM)
7.
Miscellaneous
To access HTML, CSS or JavaScript examples please go to
the webpage on www.nematrian.com that covers the specific feature you are seeking help
with.
Disclaimer: Whilst we have made efforts to check the
accuracy of the material in these pages, you should note that HTML, CSS and
JavaScript are evolving languages. Information contained in this document may
therefore be inaccurate or out-of-date. You should not rely on the accuracy or
fitness for purpose of any material that you obtain from the Nematrian website
(or from its associated web services). If you need these results to be accurate
or fit for purpose then you should seek independent corroboration of whatever
you extract from the Nematrian website. Whilst using the site, users may be
directed to the websites of other organisations, over which Nematrian may have
no control and for which it takes no responsibility. A copy of the current
Nematrian Web Services License Agreement can be viewed here.
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html>
<head></head>
<body>
Hello World (using HTML)<br>
<em id="Added"></em>
<script>
document.getElementById("Added").innerHTML =
"and using JavaScript"
</script>
</body>
</html>
|
NAVIGATION LINKS
Contents | Prev | Next | JavaScript