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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <!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
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html><html><head><title> </title></head><body></body></html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!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> |
