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

From WikiEducator
Jump to: navigation, search
Internet and Web(1)



Name : ___________________________________________

Week 7: JavaScript

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";}
}

JavaScript - Canvas

VmvIcon Assessed Activity.png
Assessed Activity 7.2 (2016) JavaScript Canvas [2 marks]
  1. Create a web page in your web site called jsCanvas.html
    • Add HTML code following (put your name in where it says "YourName").
    • Test the code
  2. Modify the JavaScript Code to add more features (you may like to refer to http://www.w3schools.com/html/html5_canvas.asp )
  3. Create a web page in your web site called jsCanvasScrollText.html
    • Add HTML code following (put your name in where it says "YourName").
    • Test the code
  4. Modify the JavaScript Code to add more features (you may like to refer to https://www.udemy.com/blog/html5-canvas-animation/ )

Marking

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

jsCanvas.html

<!DOCTYPE html>
<html>
<head>
<!--
Demonstration JavaScript file
*By: M Verhaart 2014 (virtualMV)
*Source reference: http://www.w3schools.com/html/html5_canvas.asp
<script src="jsCanvas.js" type="text/javascript"></script>
//-->
</head>
<body>
<div>
  <canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;">
  Your browser does not support the HTML5 canvas tag.
  </canvas>
</div>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,300,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle = grd;
ctx.fillRect(10,10,480,380);
//Draw a line
ctx.moveTo(10,10); ctx.lineTo(480,380); 
ctx.stroke();
//Draw a Circle
ctx.beginPath(); ctx.arc(250,200,100,0,2*Math.PI);
ctx.stroke();
//Add some text
ctx.fillStyle = "#0000FF"; ctx.font = "50px Arial";
ctx.fillText("Hello World",100,200);
ctx.fillText("YourName here",100,250);
</script>
</body>
</html>

jsCanvasScrollText.html

<!DOCTYPE html>
<html>
<head>
<!--
Demonstration JavaScript file
*By: M Verhaart 2014 (virtualMV)
*Source reference: https://www.udemy.com/blog/html5-canvas-animation/
*For an explanation of how it works
<script src="jsCanvasScrollText.js" type="text/javascript"></script>
//-->
    <title>Text Animation</title>
       <style>
        canvas{border: 3px solid #bbb;}
        .subdiv{width: 320px;}
        .text{margin: auto; width: 290px;}
       </style>
	   <script type="text/javascript">
  var idCan, ctx, step, steps = 0, intDelay = 20;
  function fnInit() {
    idCan = document.getElementById("MyCanvas");
    ctx = idCan.getContext("2d");
    ctx.fillStyle = "blue"; ctx.font = "20pt Verdana";
    ctx.textAlign = "center"; ctx.textBaseline = "middle";
    step = 0; steps = idCan.width + 50;
    fnScrollText();
  }
  function fnScrollText() {
    step++;
    //Clear the previous screen
    ctx.clearRect(0, 0, idCan.width, idCan.height);
    ctx.save();
    ctx.translate(step, idCan.height / 2);
    // Write Welcome on the screen at the new position
    ctx.fillText("Hello World YourName here", 0, 0);
    ctx.restore();
    if (step == steps) { step = 0;}
    if (step < steps) {
       var t = setTimeout('fnScrollText()', intDelay);}
  }
  </script>
  </head>
  <body onload="fnInit();">
    <div>
       <canvas id="MyCanvas" width="300" height="200">
       This browser or document mode doesn’t support canvas object
       </canvas>
    </div>
</body>
</html>

VmvIcon References.png References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/Internet and Web(1)/Assessment/JavaScript. (2024). In WikiEducator/VirtualMV wiki. Retrieved December 22, 2024, from http:https://wikieducator.org/VirtualMV/Internet_and_Web(1)/Assessment/JavaScript    (zotero)

Retrieved from "https://wikieducator.org/index.php?title=VirtualMV/Internet_and_Web(1)/Assessment/JavaScript&oldid=968807"