APPENDIX THE CODE BELOW TO A STORED THE DATA IN LINKED LIST

(1)

APPENDIX

THE CODE BELOW TO A STORED THE DATA IN LINKED LIST

1. class Node{

2. constructor(data){

3. this.data = data;

4. this.next = null;

5. this.prev = null;

6. }

THE CODE BELOW TO A CREATE DUBLY LINKED LIST

1. class Doubly{

2. constructor(){

3. this.head = null;

4. this.tail = null;

5. this._length = 0;

6. } 7. 8.

9. add(data){

10. const node = new Node(data); 11. if(this._length != 0){

12. this.tail.next = node;

13. node.prev = this.tail;

14. this.tail = node;

15. }

16. else{

17. this.head = node;

18. this.tail = node;

19. }

30. node = this.head;

31. var done = false;

32. while (!done) {

34. done = true;

35. while(node != null){

36. if(node.next != null

&& node.data > node.next.data ){

console.log(node);

37. temp.data = node.data;

38. node.data = node.next.data;

(2)

39. node.next.data = temp.data;

49. var node = new Node(baru);

50. var temp;

51. console.log(node);

52. var current = this.head;

53. while(current != null){

54. if(current.data == posisi){

55. temp = current;

56. node.next = temp.next;

57. node.prev = temp;

58. current.next.prev = node;

59. current.next = node;

60. console.log(node);

61. }

62. current = current.next;

63. }

72. var node=new Node();

73. var cari= new Node();

74. this.aa = 2;

82. this.aa = this.aa + canvas.xawl +

canvas.panjangnode + canvas.jarakx;

83. if(canvas.xawl > 1000){

84. this.aa = 115;

85. canvas.yawl=canvas.yawl+50;

86. }

87. if(node.data == a){

88. cari=node;

89. canvas.drawcari(this.aa);

90. break;

91. }

(3)

92. else{

103. while(tmp != null){

104. if(tmp.data == value){

105. if(tmp == this.head && tmp.next==null){

106. this.head = null;

107. }

108. else if(tmp == this.head){

109. this.head = this.head.next;

110. this.head.prev =null;

111. }

112. else if(tmp.next == null){

113. var temp = tmp;

124. tmp = tmp.next;

125. }

142. while(node.next.next != null){

143. node = node.next;

144. }

145. node.next = null;

(4)

146. this.tail=node;

document.getElementById("demo").innerHTML = "jumlah node : "+this._length;

159. temp = this.head;

160.

161. canvas.xawl=10;

162. canvas.yawl=10;

163.

164. canvas.liney1 =10;

165. canvas.linepy1 = 40;

166. canvas.linex1 =125;

167. canvas.linepx1 = 125;

168.

169. canvas.liney =10;

170. canvas.linepy = 40;

171. canvas.linex =165;

172. canvas.linepx =165;

173.

174. canvas.x = 130;

175. canvas.y = 32;

176.

183. canvas.kepalay = 16;

184. canvas.kepalay1 = 20;

185. canvas.kepalay3 = 24;

186. canvas.kepalax = 210;

187. canvas.kepalax1 = 220;

188. canvas.kepalax3 = 210;

189.

190. canvas.kepalabawahy = 26;

191. canvas.kepalabawahy1 = 30;

192. canvas.kepalabawahy3 = 34;

193. canvas.kepalabawahx = 185;

194. canvas.kepalabawahx1 = 175;

196.

197. canvas.panahy = 20;

(5)

198. canvas.panah2 = 20;

199. canvas.panahx = 170;

200. canvas.panah1 = 210;

201.

202. canvas.panahbawahy = 30;

203. canvas.panahbawah2 = 30;

204. canvas.panahbawahx = 180;

206. while(temp != null) {

207. if(canvas.xawl > 1000){

208. xbaru=115;

209. canvas.yawl=canvas.yawl+50;

210. canvas.linex1 =125;

211. canvas.linepx1 = 125;

212. canvas.liney1 =canvas.liney1+50;

213. canvas.linepy1 =canvas.linepy1+50;

214.

215. canvas.linex =165;

216. canvas.linepx = 165;

217. canvas.liney =canvas.liney+50;

218. canvas.linepy =canvas.linepy+50;

219.

220. canvas.x = 130;

221. canvas.y = canvas.y+50;

222.

223. canvas.kepalax = 210;

224. canvas.kepalax1 = 220;

225. canvas.kepalax3 = 210;

226. canvas.kepalay = canvas.kepalay +

50;

227. canvas.kepalay1 = canvas.kepalay1

+ 50;

228. canvas.kepalay3 = canvas.kepalay3

+ 50; 229.

230. canvas.kepalabawahx = 185;

233. canvas.kepalabawahy =

242. canvas.panahx = 170;

243. canvas.panah1 = 210;

(6)

244. canvas.panahy = canvas.panahy + 50;

245. canvas.panah2 = canvas.panah2 +

50; 246.

247. canvas.panahbawahx = 180;

249. canvas.panahbawahy =

259. canvas.x = canvas.x+105;

260.

261. canvas.garis();

262. canvas.linex1 = canvas.linex1+105;

263. canvas.linepx1 =

canvas.linepx1+105;

264. canvas.linex = canvas.linex+105;

265. canvas.linepx = canvas.linepx+105;

266. if(temp.next != null){

267. canvas.jarumpanah();

273. canvas.kepalabawahx =

canvas.kepalabawahx + 105;

274. canvas.kepalabawahx1 =

canvas.kepalabawahx1 + 105;

275. canvas.kepalabawahx3 =

canvas.kepalabawahx3 + 105;

281. canvas.bulatbawahx =

canvas.bulatbawahx + 105;

(7)

282.

287. canvas.panahbawahx =

canvas.panahbawahx + 105;

288. canvas.panahbawah1 =

canvas.panahbawah1 + 105;

289. }

290. temp = temp.next;

291. }

292. };

293. }

THE CODE BELOW TO CREATE DRAW A LINKED LIST

HTML5

13. this.linepx1 = 125;

14. this.linepy1 = 40;

15.

16. this.linex =165;

17. this.liney =10;

18. this.linepx = 165;

19. this.linepy = 40;

20.

21. this.kepalax = 210;

22. this.kepalay = 16;

23. this.kepalax1 = 220;

24. this.kepalay1 = 20;

25. this.kepalax3 = 210;

26. this.kepalay3 = 24;

27.

28. this.kepalabawahx = 185;

29. this.kepalabawahy = 26;

30. this.kepalabawahx1 = 175;

31. this.kepalabawahy1 = 30;

32. this.kepalabawahx3 = 185;

(8)

33. this.kepalabawahy3 = 34;

46. this.panahx = 170;

47. this.panahy = 20;

48. this.panah1 = 210;

49. this.panah2 = 20;

50.

51. this.panahbawahx = 180;

52. this.panahbawahy = 30;

53. this.panahbawah1 = 224;

54. this.panahbawah2 = 30;

55. }

56.

57. draw(xbaru){

58. this.kontek.fillStyle = 'rgba(0,0,0,0.01)';

59. this.kontek.lineWidth = 2;

66. this.kontek.fillStyle = 'rgba(225,0,0,0.5)';

67. this.kontek.lineWidth = 2;

68. this.kontek.strokeRect(aa,this.yawl,

74. this.kontek.strokeStyle = 'black'

75. this.kontek.moveTo(this.panah1,this.panah2);

76. this.kontek.lineTo(this.panahx,this.panahy);

77. this.kontek.moveTo(this.panahbawah1,this.panah bawah2);

78. this.kontek.lineTo(this.panahbawahx,this.panah bawahy);

79. this.kontek.stroke(); 80. this.kontek.closePath();

(9)

81. } 82.

83. garis(){

84. this.kontek.beginPath();

86. this.kontek.moveTo(this.linepx,this.linepy);

87. this.kontek.lineTo(this.linex,this.liney);

88. this.kontek.moveTo(this.linepx1,this.linepy1);

89. this.kontek.lineTo(this.linex1,this.liney1);

90. this.kontek.stroke();

91. this.kontek.closePath();

92. }

93.

94. jarumpanah(){

96. this.kontek.moveTo(this.kepalax,this.kepalay);

97. this.kontek.lineTo(this.kepalax1,this.kepalay1); 98. this.kontek.lineTo(this.kepalax1,this.kepalay1); 99. this.kontek.lineTo(this.kepalax3,this.kepalay3);

100. this.kontek.fill();

101. }

102.

103. jarumpanahbawah(){

105. this.kontek.moveTo(this.kepalabawahx,this.kepa labawahy);

106. this.kontek.lineTo(this.kepalabawahx1,this.kep alabwahy1);

107. this.kontek.lineTo(this.kepalabawahx1,this.kep alabawahy1);

108. this.kontek.lineTo(this.kepalabawahx3,this.kep alabawahy3);

110. }

111.

112. huruf(a){

113. this.kontek.fillStyle = 'black'

114. this.kontek.font = "20px Arial";

115. this.kontek.fillText(a,this.x,this.y);

this.radius, 0, 2 * Math.PI);

this.bulatbawahy, this.radius1, 0, 2 * Math.PI);

(10)

130. }

131.

132. jarum(){

135. this.kontek.moveTo(this.jarum1,this.jarum2);

143. this.kontek.clearRect(0, 0, 15000,750 );

144. }

145. }

146.

147. const list = new Doubly();

148. const canvas = new Canvas();

149. document.getElementById("input")

170. var hps = document.getElementById("input5").value;

171. list.hapus(hps);

181. var pj = document.getElementById("paanjang").value;

182. list.panjang(pj);

(11)

183. } 184.

185. function sorting(){

186. var srt = document.getElementById("sortingx").value; 187. list.sorting(srt);

188. list.print();

189. }

190.

191. function addnengah(){

192. var addt = document.getElementById("input1").value; 193. var addt2 = document.getElementById("addtengah2").value; 194. list.addtengah(addt, addt2);

195. list.print();

196. }

(12)

Filename: Affri_Prayitno_13.02.0080_Doubly_linked_list.odt Date: 2017-07-27 05:50 UTC

Results of plagiarism analysis from 2017-07-27 05:52 UTC

2445 matches from 103 sources, of which 8 are online sources.

PlagLevel: 7.5%/59.1%

[0] (286 matches, 0.0%59.1%) from a PlagScan document of your organisation...IPT_DAN_HTML5.odt" dated 2017-07-27

[1] (285 matches, 0.0%59.0%) from a PlagScan document of your organisation...IPT_AND_HTML5.odt" dated 2017-07-26 [2] (32 matches, 4.1%/4.5%) from a PlagScan document of your organisation...T'S_GRADE.pdf" dated 2017-07-26

(+ 1 documents with identical matches)

[4] (25 matches, 3.4%/3.5%) from a PlagScan document of your organisation...Using_Android.odt" dated 2017-07-26 (+ 1 documents with identical matches)

[6] (24 matches, 3.2%/3.3%) from a PlagScan document of your organisation...roid_Platform.pdf" dated 2017-07-26 (+ 1 documents with identical matches)

[8] (24 matches, 3.3%/3.4%) from a PlagScan document of your organisation...ULTIPLE_HEAPS.odt" dated 2017-07-25 [9] (23 matches, 3.2%/3.3%) from a PlagScan document of your organisation...LTIPLE_HEAPS..odt" dated 2017-07-26 [10] (23 matches, 3.0%/3.3%) from a PlagScan document of your organisation...ING_ARRAYLIST.pdf" dated 2017-07-26

[12] (23 matches, 2.9%/3.1%) from a PlagScan document of your organisation...STRATION_FORM.odt" dated 2017-07-26 (+ 1 documents with identical matches)

[14] (23 matches, 3.0%/3.1%) from your PlagScan document "Reinardus_E...using_Gateway.odt" dated 2017-07-27 (+ 2 documents with identical matches)

[17] (22 matches, 3.0%/3.1%) from a PlagScan document of your organisation...port_13020053.pdf" dated 2017-07-25 [18] (22 matches, 2.9%/3.0%) from a PlagScan document of your organisation..._WITH_ARDUINO.odt" dated 2017-07-27 (+ 1 documents with identical matches)

[20] (22 matches, 2.9%/3.0%) from a PlagScan document of your organisation...D_APPLICATION.odt" dated 2017-07-26 [21] (22 matches, 2.9%/3.0%) from a PlagScan document of your organisation...D_APPLICATION.odt" dated 2017-07-26

[24] (22 matches, 2.9%/3.0%) from a PlagScan document of your organisation...n_using_HTML5.odt" dated 2017-07-27 [25] (21 matches, 2.9%/3.0%) from a PlagScan document of your organisation...ARES_IDENTIFY.pdf" dated 2017-07-26 (+ 1 documents with identical matches)

[27] (21 matches, 2.9%/3.0%) from a PlagScan document of your organisation...RCE_ALGORITHM.pdf" dated 2017-07-27 [28] (21 matches, 2.9%/3.0%) from a PlagScan document of your organisation...REST_LOCATION.odt" dated 2017-07-27

[29] (21 matches, 2.9%/3.0%) from a PlagScan document of your organisation...RCE_ALGORITHM.odt" dated 2017-07-27 [30] (21 matches, 2.9%/3.0%) from a PlagScan document of your organisation...REST_LOCATION.odt" dated 2017-07-26 (+ 2 documents with identical matches)

[33] (21 matches, 2.9%/3.0%) from a PlagScan document of your organisation...WS_CLUSTERING.pdf" dated 2017-07-26 [34] (21 matches, 2.8%/2.9%) from a PlagScan document of your organisation...ject_13020005.odt" dated 2017-07-25

[35] (21 matches, 2.9%/3.0%) from a PlagScan document of your organisation...hm_Comparison.odt" dated 2017-07-25 [36] (21 matches, 2.9%/3.0%) from a PlagScan document of your organisation...WS_CLUSTERING.pdf" dated 2017-07-25 [37] (21 matches, 2.8%/3.0%) from your PlagScan document "Sindhu_Hart...using_Ardvino.pdf" dated 2017-07-27

[41] (21 matches, 2.9%/3.0%) from a PlagScan document of your organisation...AIML_DATABASE.pdf" dated 2017-07-26

[42] (21 matches, 2.9%/2.9%) from a PlagScan document of your organisation...oT_Technology.odt" dated 2017-07-26 (+ 1 documents with identical matches)

[44] (21 matches, 2.9%/3.0%) from a PlagScan document of your organisation..._NORTH_MALUKU.odt" dated 2017-07-26 (+ 2 documents with identical matches)

[47] (21 matches, 2.9%/3.0%) from a PlagScan document of your organisation...AIML_DATABASE.pdf" dated 2017-07-25

(13)

[48] (21 matches, 2.9%/3.0%) from a PlagScan document of your organisation...MATIC_PATTERN.pdf" dated 2017-07-26 [49] (19 matches, 2.8%/2.9%) from a PlagScan document of your organisation...att_Algorithm.pdf" dated 2017-07-26

[50] (21 matches, 2.8%/2.9%) from a PlagScan document of your organisation...TRA_ALGORITHM.odt" dated 2017-07-26 [51] (19 matches, 2.8%/2.9%) from a PlagScan document of your organisation...att_Algorithm.pdf" dated 2017-07-25 [52] (21 matches, 2.8%/2.9%) from a PlagScan document of your organisation...TRA_ALGORITHM.odt" dated 2017-07-25 [53] (21 matches, 2.8%/2.9%) from a PlagScan document of your organisation...R_&_HISTOGRAM.odt" dated 2017-07-25 [54] (21 matches, 2.9%/2.9%) from a PlagScan document of your organisation...oll_a_Toy_Car.odt" dated 2017-07-26

[56] (21 matches, 2.8%/2.9%) from a PlagScan document of your organisation..._USING_PYTHON.odt" dated 2017-07-27 [57] (20 matches, 2.8%/2.9%) from a PlagScan document of your organisation...RCE_ALGORITHM.pdf" dated 2017-07-26 [58] (21 matches, 2.8%/2.9%) from a PlagScan document of your organisation...D_APPLICATION.odt" dated 2017-07-26 (+ 1 documents with identical matches)

[60] (20 matches, 2.8%/2.9%) from a PlagScan document of your organisation...g_Google_Maps.odt" dated 2017-07-27 [61] (20 matches, 2.8%/2.9%) from a PlagScan document of your organisation...nd_Clustering.pdf" dated 2017-07-26 [62] (20 matches, 2.8%/2.9%) from a PlagScan document of your organisation...g_Google_Maps.odt" dated 2017-07-26 [63] (20 matches, 2.8%/2.9%) from a PlagScan document of your organisation...g_and_k-means.pdf" dated 2017-07-21 [64] (20 matches, 2.8%/2.9%) from a PlagScan document of your organisation...RED_PROCEDURE.odt" dated 2017-07-26 (+ 1 documents with identical matches)

[66] (20 matches, 2.8%/2.9%) from a PlagScan document of your organisation...RED_PROCEDURE.pdf" dated 2017-07-27 [67] (20 matches, 2.8%/2.9%) from a PlagScan document of your organisation...OLLING_SYSTEM.odt" dated 2017-07-26 [68] (20 matches, 2.8%/2.9%) from a PlagScan document of your organisation...oT_Technology.odt" dated 2017-07-26 [69] (20 matches, 2.8%/2.9%) from a PlagScan document of your organisation...RED_PROCEDURE.pdf" dated 2017-07-26 [70] (20 matches, 2.8%/2.9%) from a PlagScan document of your organisation...ON_ON_ANDROID.odt" dated 2017-07-26

[73] (20 matches, 2.8%/2.9%) from a PlagScan document of your organisation...OLLING_SYSTEM.odt" dated 2017-07-25 [74] (20 matches, 2.8%/2.9%) from a PlagScan document of your organisation...oT_Technology.odt" dated 2017-07-26 [75] (20 matches, 2.8%/2.9%) from a PlagScan document of your organisation..._GEDONG_SONGO.odt" dated 2017-07-26 [76] (20 matches, 2.8%/2.9%) from a PlagScan document of your organisation...TUBE_DATA_API.odt" dated 2017-07-26

[78] (20 matches, 2.8%/2.9%) from a PlagScan document of your organisation..._USING_PYTHON.odt" dated 2017-07-26 [79] (19 matches, 2.7%/2.8%) from a PlagScan document of your organisation...R_&_HISTOGRAM.odt" dated 2017-07-26 [80] (19 matches, 2.7%/2.8%) from a PlagScan document of your organisation..._GEDONG_SONGO.odt" dated 2017-07-26 [81] (18 matches, 2.6%/2.7%) from a PlagScan document of your organisation...ogle_Maps_API.odt" dated 2017-07-27

[83] (18 matches, 2.6%/2.7%) from a PlagScan document of your organisation...ogle_Maps_API.odt" dated 2017-07-25 [84] (17 matches, 2.5%/2.6%) from a PlagScan document of your organisation...n_using_HTML5.odt" dated 2017-07-26 [85] (19 matches, 0.8%/2.6%) from a PlagScan document of your organisation...IPT_DAN_HTML5.odt" dated 2017-07-26 [86] (10 matches, 1.7%) from a PlagScan document of your organisation...Project-v2-1.docx" dated 2016-03-02

[87] (9 matches, 1.7%) from a PlagScan document of your organisation..._Service_Chat.pdf" dated 2017-03-04

[88] (9 matches, 1.6%) from a PlagScan document of your organisation...N_COEFFICIENT.pdf" dated 2017-03-03

[89] (15 matches, 1.2%/1.3%) from a PlagScan document of your organisation...G_PHP_OBJECTS.pdf" dated 2017-07-26 [90] (8 matches, 1.3%) from a PlagScan document of your organisation...DAG_Algorithm.pdf" dated 2017-03-03

[91] (7 matches, 1.3%) from a PlagScan document of your organisation...Z_APPLICATION.pdf" dated 2017-03-02 [92] (6 matches, 1.1%) from docplayer.net/47167263-Building-network-with-mikrotik-routerboard.html

[93] (6 matches, 1.1%) from a PlagScan document of your organisation...ject-13020031.doc" dated 2017-03-20 [94] (3 matches, 0.7%) from docplayer.net/35569745-Implementation-minimax-algorithm-in-mini-pacman-game.html [95] (6 matches, 0.6%) from a PlagScan document of your organisation...mation_System.pdf" dated 2017-07-27 [96] (2 matches, 0.4%) from www.academia.edu/3287106/Scrabble_Cheat

(14)

[97] (3 matches, 0.2%/0.3%) from a PlagScan document of your organisation...os Merry R.P.docx" dated 2016-07-27 [98] (2 matches, 0.2%) from library.binus.ac.id/eColls/eThesisdoc/Bab5/Bab 5_11-69.pdf

[99] (1 matches, 0.1%) from https://www.linkedin.com/in/kapilmanek

[100] (1 matches, 0.2%) from tensoftwares.com/video-editing/camtasia-studio-9-free-download-full-version [101] (1 matches, 0.0%0.2%) from projaringan.blogspot.com/

[102] (1 matches, 0.0%0.2%) from cs.uph.edu/component/wmcontents/content/32.html

Settings

Sensitivity: Medium

Bibliography: Consider text

Citation detection: Reduce PlagLevel Whitelist:

--Analyzed document

=====================1/46====================== Cover

PROJECT REPORT

DOUBLY LINKED LIST VISUALIZATION USING JAVASCRIPT AND HTML5

AFFRI PRAYITNO 13.02.0080

Faculty of Computer Science Soegijapranata Catholic University 2017

i

=====================2/46====================== APPROVAL AND RATIFICATION PAGE

DOUBLY LINKED LIST VISUALIZATION USING JAVASCRIPT AND HTML5

by

AFFRI PRAYITNO – 13.02.0080

This project report has been approved and ratified by the Faculty of Computer Science on July, 12, 2017 With approval,

Supervisor,

Rosita Herawati, ST.[2] ..., MIT NPP : 058.1.2004.263

Examiners, 1.)

Suyanto EA, Ir., M.Sc

NPP : 058.1.1992.116 2.)

Hironimus Leong, S.Kom., M.Kom NPP : 058.1.2007.273

3.)