/

HTML / CSS / JavaScript Tutorial

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


Desktop view | Switch to Mobile