Tag: javascript

N5 – Coding

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>