VirtualMV/Internet and Web(1)/Activity/JavaScript

From WikiEducator
Jump to: navigation, search

JavaScript

VmvIcon Assessed Activity.png
Assessed Activity 7.1 (2016) JavaScript [3 marks]
  1. Read JavaScript Overview http://wikieducator.org/VirtualMV/JavaScript/Home
  2. Read JS and HTML
  3. Create a web page in your web site called jsNumberGuess.html
    • Add HTML code following.
  4. Create a text (txt) document and call it jsNumberGuess.js
    • Add JavaScript code following.
  5. Modify the JavaScript Code to add additional functionality
    • Eg. Change the logic so the message says "too high" or "too low"

Marking

  • Marks will be awarded based on the completeness of your submission (2 marks for having a working JS program, 1 mark for the additional functionality)

jsNumberGuess.html

<html>
<head>
<!--
Demonstration JavaScript file
*By: M Verhaart 2014 (virtualMV)
*Features
* <Script> included in head and contains
** A global variable (actually a random integer number)
** A function that gets called when the input button is pressed
* <Script> inline (Computer guess)   
*An object declaration (objMsg) allows for more readable code
*An alert box to show how a popup can be used to show whats happening
*document.write - writes directly onto the page
//-->
<script src="jsNumberGuess.js" type="text/javascript"></script>
</head>
<body>
<form name="myForm">
  Enter Your guess:&nbsp;
    <p><input name="txtVal1" /></p>
  <p><input type="button" value="Check Guess" onClick= "fnChkGuess()" /></p>
  <p id="idMessage">?</p>
  <p>Computer guess=
     <script type="text/javascript">document.write (intGuess); </script>
  </p>
</form>
</body>
</html>

jsNumberGuess.js

//A global integer variable 
var intGuess = parseInt((Math.random() * 10) + 1);
//function to check the guess against the computers number
function fnChkGuess() {
    intNum1=parseInt(document.myForm.txtVal1.value);
	alert ("You entered " +intNum1);
	objMsg = document.getElementById("idMessage")
	if (intNum1==intGuess) {
      objMsg.innerHTML ="Correct";}
	else {
      objMsg.innerHTML ="Try again";}
}