Know and understand the behaviour layer is for a scripting language to control elements within a web page

Topic: 21 Website Authoring

Objective

Know and understand that the behaviour layer is for a scripting language to control elements within a web page.

1. What is the Behaviour Layer?

The behaviour layer sits on top of the content (HTML) and presentation (CSS) layers. Its purpose is to add interactivity, respond to user actions, and manipulate the document structure while the page is displayed.

2. Common Scripting Languages

• JavaScript – the standard language supported by all browsers.
• VBScript – historically used in Internet Explorer (now largely obsolete).
• TypeScript – a superset of JavaScript that adds static typing (compiled to JavaScript).

3. How the Behaviour Layer Works

When a web page loads, the browser creates a Document Object Model (DOM). The scripting language can:

1. Access any element in the DOM.
2. Read or change element attributes, styles, and content.
3. Listen for events (e.g., clicks, key presses) and execute code in response.
4. Create, delete, or move elements dynamically.

4. Key Concepts

• Event listeners – functions attached to elements that run when a specific event occurs.
• DOM manipulation – methods such as getElementById, querySelector, appendChild, and removeChild.
• Timing functions – setTimeout and setInterval for delayed or repeated actions.
• Form validation – checking user input before it is sent to the server.

5. Example: Simple Interaction

The following JavaScript code changes the text of a paragraph when a button is clicked.

<button id="myBtn">Click me</button>
<p id="myPara">Original text.</p>
<script>
document.getElementById('myBtn').addEventListener('click', function() {
document.getElementById('myPara').textContent = 'Text updated by JavaScript!';
});
</script>

6. Layer Interaction Diagram

7. Summary Table

8. Examination Tips

• Remember that the behaviour layer does not affect the underlying HTML markup; it only changes how the page behaves when viewed.
• Be able to write a simple event‑listener function and explain what each part does.
• Know the difference between innerHTML (adds HTML markup) and textContent (adds plain text).
• Understand how to prevent default actions (e.g., event.preventDefault()) when handling form submissions.