The Tech Interpreter: Using Scripts in HTML Web Pages

Web pages use a variety of technologies to present interactive content to users. If you are responsible for a website for your business, you can enhance its interactivity using scripting. The content and structure of a site generally involves HTML markup, which you can manipulate using scripting in JavaScript code. With website scripts, you can respond to user interaction with your page elements, for example detecting users moving the mouse over a particular part of the page and altering its appearance in response.

1.

Create a script area within your page. Open your HTML page in a text editor. Enter a script section within the head area as in the following outline:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

The script content will appear between the opening and closing script tags in the page head, with the page content inside the body section.

2.

Detect user interaction. JavaScript functions typically execute when events occur, such as user interaction. Within your HTML page elements, you can detect particular types of interaction. The following HTML markup instructs the browser to execute a particular JavaScript function when the user clicks the element:

The "onclick" code indicates a click listener. When the user clicks the image, the browser will call the function named "changeElement" which you will create next. By including "this" within the function brackets, you pass a reference to the image element as a parameter to the function. Alter the image "src" attribute to indicate the name and location of your own image.

3.

Create a JavaScript function. In the head section, between the opening and closing script tags, enter your function outline as follows:

function changeElement(elem) {
//function content

}

This is the function outline. The function name is followed by a parameter in the brackets, matching the syntax you included in your image element click listener. Within the function, your code has access to the element reference passed to it, so it can manipulate the image element within the page.

4.

Respond to user interaction. Inside your script function, between the opening and closing curled brackets, enter the following code for demonstration:

elem.style.marginLeft="50px";

This code uses the element reference parameter to alter its appearance in the page. To demonstrate the principle, the function alters the element style properties, in this case applying a margin to the left of it. You can carry out many different types of element manipulation within your script function.

5.

Test your page. Save your HTML file and open it in a browser to test it. Click the image to prompt the script function. You should see the element move instantly to the right, when the margin is applied to the left. To see the effect more than once, refresh the page and click the image again.

Notes

Web page scripts can detect multiple different events, including the user moving their mouse on and off elements.
If your scripts become complex, they may have unpredictable results, so testing is essential.

The Tech Interpreter

Thursday 26 July 2012

Using Scripts in HTML Web Pages

No comments:

Post a Comment