Created
July 24, 2018 12:22
-
-
Save han85uk/e10944869043e6691692d382e3440f2e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<link rel="stylesheet" href="stylequestion1unit14.css"> | |
</head> | |
<body> | |
<div id="title">UNIT 14</div> | |
<div id="slogan">Question One</div> | |
<div id="maincontent"> | |
<h2>This Page will Evidence the Following:</h2> | |
<ul> | |
<li> Create client-side arrays using custom objects </li> | |
<li> Create two functions for manipulating client-side arrays </li> | |
<li> Create two methods for manipulating client-side arrays</li> | |
<li> Use the prototype property via an object constructor function </li> | |
</ul> | |
<h1>Create client-side arrays using custom objects. The array needs three objects, you must have at least two arrays of objects</h1> | |
<p id="Arrayscustom"></p> | |
<script> | |
function paint(type,size,colour) { | |
this.type = type; | |
this.size = size; | |
this.colour = colour; | |
this.changePaintType = function (newPaintType) { | |
this.type = newPaintType; | |
} | |
} | |
var arr = []; | |
arr.push (new paint ("Acrylic", "Large", "Red")); | |
arr.push (new paint ("Oil", "Medium", "Blue")); | |
arr.push (new paint ("Watercolour", "Small", "Yellow")); | |
var i; | |
for (i=0; i < arr.length; i = i + 1) { | |
console.log(arr[i].type); | |
document.getElementById("Arrayscustom").innerHTML += "Paint " + (i + 1) + ":" + arr[i].type + "<br>"; | |
} | |
</script> | |
<h1>Create two methods for manipulating client-side arrays</h1> | |
<h2> Method 1 toString </h2> | |
<p id="methodsonarrays1"></p> | |
<h2> Method 2 Pop Method </h2> | |
<p id="methodsonarrays2"></p> | |
<script> | |
var paints = ["Acrylic","Oil","Watercolour","Gloss"]; | |
document.getElementById("methodsonarrays1").innerHTML = paints.toString(); | |
paints.pop(); | |
document.getElementById("methodsonarrays2").innerHTML = paints; | |
</script> | |
<h1>Create two Functions for Manipulating Array (Methods as functions)</h1> | |
<h2> Function 1 reverse method as function </h2> | |
<p id="functionssonarrays1"></p> | |
<button onclick="reverseFunction()"> Click To Reverse Order </button> | |
<script> | |
// below i now will show two methods invoked as functions upon clicking abutton - the push and reverse | |
var paints = ["Acrylic","Oil","Watercolour","Gloss"]; | |
document.getElementById("functionssonarrays1").innerHTML = paints; | |
function reverseFunction() { | |
paints.reverse(); | |
document.getElementById("functionssonarrays1").innerHTML = paints; | |
} | |
</script> | |
<h2> Function 2 Push Method As Function</h2> | |
<button onclick="pushFunction()"> Click To add colour </button> | |
<p id="functionsonarrays2"></p> | |
<script> | |
var paintcolours = ["red","blue","green","yellow"]; | |
document.getElementById("functionsonarrays2").innerHTML = paintcolours; | |
function pushFunction() { | |
paintcolours.push("pink"); | |
document.getElementById("functionsonarrays2").innerHTML = paintcolours; | |
} | |
</script> | |
<div id="footer"> | |
<div id="copyrightdesign"> | |
Copyright © 2018 Hannah Smythe | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment