Description and identification of coding to create and modify information systems including JavaScript mouse events.
Javascript is used in HTML documents to add interactivity. The HTML file below has a number of interactive elements to it. Use notepad++ to investigate it further.
<!DOCTYPE html>
<html>
<head>
<title> Teacher Example </title>
<!--
The <script> in the <head> tag allows the functions to be called from
anywhere in the document
-->
<script>
<!-- Changes Style on Mouse Over -->
function mouseOver() {
document.getElementById("demo").style.color = "red";
}
<!-- Changes Style back after Mouse Over -->
function mouseOut() {
document.getElementById("demo").style.color = "black";
}
<!-- Asks for and displays a name -->
function myFunction() {
<!-- Asks the user to enter their name -->
var person = prompt("Please enter your name", "Harry Potter");
<!-- Displays the persons name in ID demo3 -->
if (person != null) {
document.getElementById("demo3").innerHTML =
"Hello " + person + "! How are you today?";
}
}
</script>
</head>
<body>
<!-- Display a heading that can be changed later -->
<h1 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">Welcome</h1>
<!-- Displays a button that when pressed will display the date in the first Heading-->
<p>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<!-- Uses Javascript to display the message "Your Text Here" -->
<p>
<script>
document.write("Your Text Here");
</script>
<!-- The text RESULT is not displayed as it is replaced by
the results of the calculation below it-->
<h1 id="demo2">RESULT</h1>
<script>
var price1 = 5;
var price2 = 6;
var total = price1 + price2;
document.getElementById("demo2").innerHTML =
"The total is: " + total;
</script>
<!-- This button calls the function myFunction from above -->
<p>Click the button to demonstrate the prompt box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo3"></p>
</body>
</html>
Description, exemplification and implementation of coding to create and modify information system including the use of HTML with the tags for:
o Document
o Links
o Graphics
The documents below show a HTML document with the basic html document tags and a document showing the html tags for links and images ![]()
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> Page1 </title>
</head>
<body>
<h1>Example of a heading of type 1</h1>
<h2>And this is heading 2</h2>
<!-- The anchor tag <a> is used to link a html document to another document.
The href attribute gives the name of the destination of the link. -->
<p>Here is a paragraph of text,
which includes a link to <a href="page2.html">page 2</a></p>
<p>
<!-- The image tag <img> is used to display an image.
The src attribute is the name of the image -->
<image src="logo.png">
</body>
</html>
