This website stores cookies. Click here to accept them.cookie information page

What is Javascript?

14th December 2011

Not to be confused with Java, Javascript is a computer language intended mainly for use on web pages. Unlike, for instance, PHP, ASP and server-side Java, which give the web server computer instructions and produce web pages, Javascript gives the client's computer instructions, which are only processed when you're viewing the web page in a browser.

To put it simply, a PHP script may connect to a database, create a web page and send it to the browser; Javascript runs on the browser and is mainly used for visual effects.

Here is a sample web page with some Javascript in it - you can save it as an .html file and run it and it should work in any browser:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

function doThings()
{
document.getElementById('btn_things').style.color="yellow";
document.getElementById('btn_things').style.backgroundColor="blue";
}

</script>

</head>

<body>

<button id="btn_things" onclick="doThings();">click here</button>

</body>
</html>

First of all, the page loads into your browser and you see a button saying "click here".  The button has an attribute (which is not visible ot the user) called "onclick".  This is the name of an event, and you can see a complete reference of html events on the w3schools website.

When the event is triggered (by clicking the button), the browser looks up the value of the onclick attribute and finds that it's "doThings();".  This tells it to look for the "doThings" function in any script on the page.

function doThings()
{
    document.getElementById('btn_things').style.color="yellow";
    document.getElementById('btn_things').style.backgroundColor="blue";
}

The first instruction in the doThings() function is an assignment... assigning the value "yellow" to something called "document.getElementById('btn_things').style.color".  The document.getElementById is an instruction to find the object in the HTML of that name, and when this is found, the instruction references the style property of the object and the "color" property of "style".  Properties of elements in an HTML document can be looked up again on the w3schools website.

That very short demonstration is an introduction to inserting Javascript code into an HTML page. We will come back to Javascript in future posts to discuss how to make it work harder!


Add your comment for "What is Javascript?":

© Alberon Ltd 2018

8 Standingford House
26 Cave Street
Oxford
OX4 1BA

01865 596 144

Oxford Web is a trading name of Alberon Ltd, registered company no. 5765707 (England & Wales).