TweetFacebookShareThis

JavaScript Basics Part 1

Previous Page    Next Page

Computer Studies javascript_logo

The code used to create the alert box that welcomed you to the tutorial as the page loaded is writen below, an alert is a function that opens up an alert box and the text that was displayed is written inside the brackets in between quotation marks you will also need to remember the semi-colon after the closing brackets in order to display the text in the alert box with your browser, also note that JavaScript is writen in between opening and closing script tags <script type="text/javascript"></script> these can be placed in between the head or the body tags of a document or both the head and body sections of the document, you can also link to an external script by including the src link and linking to the external file name which would need to be saved with the .js extension such as <script type="text/javascript" src="externalscript.js"></script>.

<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
alert("Hello and Welcome to the JavaScript Tutorial Click OK to continue");
</script>
</head>
<body>
</body>
</html>

To write JavaScripts open your web browser you don't even need to be connected to the internet also you need to open a simple text editor such as notepad you wouldn't use Microsoft word because when you save the document it saves other metadata which can cause problems with the scripts, you will have to make sure your code is written the same throughout as JavaScript is case sensitive.

<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
function DisplayMsg (message)
{
  alert("Are you ready: " + message);
}
</script>
</head>
<body>
<form>
<input type="button" value="Click here to see how the script works"
onclick="DisplayMsg('to begin your JavaScript Tutorial')">
</form>
</body>
</html>

JavaScript Event Handlers

Event handlers are built-in mechanisms that basically scan for events or actions to happen. For example: when someone clicks the mouse on a piece of text: onClick. when someone moves the mouse over an image: onMouseOver. when a page is loaded into the web browser: onLoad

Examples of using various event handlers to fire off alerts()

<p onclick="alert('This will open up an alert box when you click here');">Click Here!</p>

Click Here!

Note: when using the mouseover this will open the alert box wherever you move the mouse in line with the chosen text across the screen. to alter this in the code so that it just opens the alert box when hovering over just the text area in question add the following code:

<p style="width:220px" onmouseover="alert('This will open up an alert box when you move the mouse over it');">Move the mouse over here</p>

Move the mouse over here

You can also specify for an alert box to open up when the page is loaded into the browser by inserting onLoad within the body tag such as: <body onLoad="alert('this will open this alert when the page is loading');">

Some JavaScript Tutorials
www.w3schools.com
www.javascriptkit.com

Previous Page    Next Page

Recommended Books