Skip to content

Commit 4fc473b

Browse files
IncrementisIncrementis
committed
Init
First upload and possibly the last if no changes are needed.
1 parent db6fa61 commit 4fc473b

File tree

5 files changed

+236
-0
lines changed

5 files changed

+236
-0
lines changed

‎Cancer.jpg

10.7 KB
Loading

‎Healthy.jpg

15.1 KB
Loading

‎index.html

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!DOCTYPE HTML>
2+
3+
<html>
4+
5+
<head>
6+
7+
<title>Methods on Prototypes</title>
8+
<meta charset="UTF-8">
9+
10+
</head>
11+
12+
13+
<!--
14+
NOTE:
15+
===============================================================================================
16+
17+
Because of simplicity & demonstration purposes, the "style" attribute is used within html tags.
18+
Nevertheless it is recommended to use CSS for styling.
19+
20+
In '<body>' the 'style="text-align:center;"'
21+
centers similar like the tag '<center>' which was used in previous mini-projects.
22+
23+
===============================================================================================
24+
-->
25+
26+
27+
<body style="text-align:center;">
28+
29+
<section>
30+
31+
<h2>Select Type of Growth</h2>
32+
33+
<img id="genetic-pic" src="#">
34+
35+
<br>
36+
37+
<input id="healthy-growth" type="radio" checked="checked" name="Growth" onclick="loadImage();">
38+
<label for="healthy-growth" onclick="loadImage();">Healthy Growth</label>
39+
40+
<br>
41+
<br>
42+
43+
<input id="unhealthy-growth" type="radio" name="Growth" onclick="loadImage();">
44+
<label for="unhealthy-growth" onclick="loadImage();">Unhealthy Growth</label>
45+
46+
</section>
47+
48+
49+
<br>
50+
<hr style="width:50%">
51+
<br>
52+
53+
54+
<section>
55+
56+
<h2>Select Number of Growth</h2>
57+
58+
<input id="num-of-growth" type="number" min="1" step="1" value="1">
59+
60+
<br>
61+
<br>
62+
63+
<button type="button" onclick="numOfGrowth();">START</button>
64+
<button type="button" onclick="refresh();">REFRESH</button>
65+
66+
<p style="color:magenta;">Please, open debugger tools for analysing performance and memory usage!</p>
67+
68+
</section>
69+
70+
71+
<br>
72+
<hr style="width:50%">
73+
<br>
74+
75+
76+
<section>
77+
78+
<br>
79+
<br>
80+
For more explanation please visit -
81+
<a href="https://github.com/Incrementis/Javascript-methods-on-prototypes-/wiki">
82+
Methods on Prototypes Wiki</a>
83+
84+
</section>
85+
86+
87+
</body>
88+
89+
90+
91+
<footer>
92+
93+
<script language="javascript" type="text/javascript" src="methods.js"></script>
94+
95+
</footer>
96+
97+
98+
</html>

‎methods.js

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
/*
2+
==================================================================================
3+
NOTE:
4+
5+
The use of global variables is not recommended, due to higher risk of errors.
6+
7+
The code below serves only demonstration purposes.
8+
==================================================================================
9+
*/
10+
11+
//Will contain Instances of HealthyGenes or Cancer
12+
var healthyGenes = [];
13+
var unhealthyGenes = [];
14+
15+
16+
//=======================
17+
//Class HealthyGenes
18+
//=======================
19+
function HealthyGenes(){};
20+
21+
//Generates prototype methods of HealthyGenes
22+
for(var method = 0; method < 100; method++)
23+
{
24+
25+
HealthyGenes.prototype["GROWTH" + method] = function()
26+
{
27+
var growth_InPercent = method
28+
29+
return growth_InPercent;
30+
};
31+
}
32+
33+
34+
//=======================
35+
//Class Cancer
36+
//=======================
37+
function Cancer()
38+
{
39+
//Generates methods within Cancer
40+
for(var method = 0; method < 100; method++)
41+
{
42+
43+
this[method] = function()
44+
{
45+
var growth_InPercent = method
46+
47+
return growth_InPercent;
48+
};
49+
}
50+
};
51+
52+
53+
//=======================
54+
//Inputs
55+
//=======================
56+
57+
//Generates dynamic numbers of Cancer or HealthyGenes instances
58+
function numOfGrowth()
59+
{
60+
//Converting to type number with the "+" operator
61+
var genes = +document.getElementById('num-of-growth').value;
62+
var healthy = document.getElementById('healthy-growth');
63+
var unhealthy = document.getElementById('unhealthy-growth');
64+
65+
66+
67+
//Resete genes if number of growth(user input) is reduced
68+
if(healthy.checked && (genes < healthyGenes.length))
69+
{
70+
healthyGenes = [];
71+
72+
}
73+
else if(unhealthy.checked && (genes < unhealthyGenes.length))
74+
{
75+
unhealthyGenes = [];
76+
77+
}
78+
79+
80+
//Generating HealthyGenes instances
81+
for(var gene = 0; gene < genes; gene++)
82+
{
83+
84+
85+
if(healthy.checked)
86+
{
87+
88+
healthyGenes[gene] = new HealthyGenes();
89+
90+
}
91+
else if(unhealthy.checked)
92+
{
93+
94+
unhealthyGenes[gene] = new Cancer();
95+
96+
}
97+
else
98+
{
99+
alert("ERROR: Type of Growth doesn`t exist! Please check code...");
100+
}
101+
102+
}
103+
104+
}
105+
106+
107+
//Reloades page (releasing memory)
108+
function refresh()
109+
{
110+
location.reload();
111+
}
112+
113+
114+
//Change picture depending on the selected radio buttons
115+
var loadImage = function()
116+
{
117+
var healthy = document.getElementById('healthy-growth');
118+
var unhealthy = document.getElementById('unhealthy-growth');
119+
var image = document.getElementById('genetic-pic');
120+
121+
122+
if(unhealthy.checked)
123+
{
124+
image.src = "Cancer.jpg";
125+
}
126+
else if(healthy.checked)
127+
{
128+
image.src = "Healthy.jpg";
129+
}
130+
else
131+
{
132+
alert("WARNING: Missing image!");
133+
}
134+
135+
};
136+
137+
//Initializing image when page is loaded the first time
138+
loadImage();

‎wiki_images/Figure1.png

33.1 KB
Loading

0 commit comments

Comments
 (0)