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>