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

  

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. } 20. this._length++; 21. console.log(data); 22. return node; 23. 24. }; 25.

  26. 27. sorting(){ 28. var node; 29. var temp = new Node(); 30. node = this.head; 31. var done = false; 32. while (!done) { 33. node = this.head; 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;

  39. node.next.data = temp.data; 40. done = false; 41. } 42. node=node.next; 43. } 44. } 45. }; 46.

  47. 48. addtengah(baru, posisi){ 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. } 64. this._length++; 65. }; 66.

  67. 68. mencari(a){ 69. canvas.hapuscanvas(); 70. this.print(); 71. canvas.xawl=2; 72. var node=new Node(); 73. var cari= new Node(); 74. this.aa = 2; 75. node=this.head; 76. cari=null; 77. if(node==null){ 78. console.log("empty"); 79. } 80. else{ 81. while(node !=null){ 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. }

  92. else{ 93. node=node.next; 94.

  } 95. } 96. } 97. return cari; 98. }; 99. 100. 101. hapus(value){ 102. var tmp=this.head; 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; 114. temp.prev.next=null; 115. tmp = temp; 116. } 117. else{ 118. var node1=tmp; 119. node1.prev.next=node1.next; 120. node1.next.prev=node1.prev; 121. tmp = node1; 122. } 123. } 124. tmp = tmp.next; 125. } 126. return this.head; 127. }; 128. 129. 130. hapushead(){ 131. var node = new Node(); 132. node=this.head; 133. this.head=node.next; 134. node.next=null; 135. this._length--; 136. }; 137. 138. 139. hapustail(){ 140. var node = new Node(); 141. node = this.head; 142. while(node.next.next != null){ 143. node = node.next; 144. } 145. node.next = null;

  146. this.tail=node; 147. this._length--; 148. }; 149. 150. 151. panjang(){ document.getElementById("demo").innerHTML = "jumlah node : "+this._length; 152. }; 153. 154. 155. print(){ 156. canvas.hapuscanvas(); 157. var temp; 158. var xbaru; 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. 177. canvas.bulaty=20; 178. canvas.bulatx=170; 179. 180. canvas.bulatbawahy=30; 181. canvas.bulatbawahx=225; 182. 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; 195. canvas.kepalabawahx3 = 185; 196. 197. canvas.panahy = 20;

  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; 205. canvas.panahbawah1 = 224; 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; 231. canvas.kepalabawahx1 = 175; 232. canvas.kepalabawahx3 = 185; 233. canvas.kepalabawahy = canvas.kepalabawahy + 50; 234. canvas.kepalabawahy1= canvas.kepalabawahy1 + 50; 235. canvas.kepalabawahy3 = canvas.kepalabawahy3 + 50; 236. 237. canvas.bulatx=170; 238. canvas.bulaty = canvas.bulaty + 50; 239. canvas.bulatbawahx=225; 240. canvas.bulatbawahy = canvas.bulatbawahy + 50; 241. 242. canvas.panahx = 170; 243. canvas.panah1 = 210;

  244. canvas.panahy = canvas.panahy + 50; 245. canvas.panah2 = canvas.panah2 + 50; 246. 247. canvas.panahbawahx = 180; 248. canvas.panahbawah1 = 224; 249. canvas.panahbawahy = canvas.panahbawahy + 50; 250. canvas.panahbawah2 = canvas.panahbawah2 + 50; 251. } 252. else{ 253. xbaru = canvas.xawl + canvas.panjangnode + canvas.jarakx; 254. } 255. 256. canvas.draw(xbaru); 257. canvas.huruf(temp.data); 258. 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(); 268. canvas.kepalax = canvas.kepalax + 105; 269. canvas.kepalax1 = canvas.kepalax1 + 105; 270. canvas.kepalax3 = canvas.kepalax3 + 105; 271. 272. canvas.jarumpanahbawah(); 273. canvas.kepalabawahx = canvas.kepalabawahx + 105; 274. canvas.kepalabawahx1 = canvas.kepalabawahx1 + 105; 275. canvas.kepalabawahx3 = canvas.kepalabawahx3 + 105; 276. 277. canvas.bulat(); 278. canvas.bulatx = canvas.bulatx + 105; 279. 280. canvas.bulatbawah(); 281. canvas.bulatbawahx = canvas.bulatbawahx + 105;

  282. 283. canvas.panah(); 284. canvas.panahx = canvas.panahx+ 105; 285. canvas.panah1 = canvas.panah1+105; 286. 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

  1. class Canvas{ 2. constructor(){ 3. this.canvas=document.getElementById("canvas"); 4. this.kontek= this.canvas.getContext("2d"); 5. this.xawl=10; 6. this.yawl=10; 7. this.panjangnode=60; 8. this.lebarnode=30; 9. this.jarakx=45; 10. 11. this.linex1 =125; 12. this.liney1 =10; 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;

  33. this.kepalabawahy3 = 34; 34. 35. this.x = 130; 36. this.y = 32; 37. 38. this.bulatx=170; 39. this.bulaty=20; 40. this.radius=1.5; 41. 42. this.bulatbawahx=225; 43. this.bulatbawahy=30; 44. this.radius1=1.5; 45. 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; 60. this.kontek.strokeRect(xbaru,this.yawl, this.panjangnode, this.lebarnode); 61. this.kontek.fillRect(xbaru,this.yawl, this.panjangnode, this.lebarnode); 62. this.xawl = xbaru; 63. }; 64. 65. drawcari(aa){ 66. this.kontek.fillStyle = 'rgba(225,0,0,0.5)'; 67. this.kontek.lineWidth = 2; 68. this.kontek.strokeRect(aa,this.yawl, this.panjangnode, this.lebarnode); 69. this.kontek.fillRect(aa,this.yawl, this.panjangnode, this.lebarnode); 70. }; 71. 72. panah(){ 73. this.kontek.beginPath(); 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();

  81. } 82. 83. garis(){ 84. this.kontek.beginPath(); 85. this.kontek.strokeStyle = 'black' 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(){ 95. this.kontek.beginPath(); 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(){ 104. this.kontek.beginPath(); 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); 109. this.kontek.fill(); 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); 116. } 117. 118. bulat(){ 119. this.kontek.beginPath(); 120. this.kontek.arc(this.bulatx, this.bulaty, this.radius, 0, 2 * Math.PI); 121. this.kontek.stroke(); 122. this.kontek.fill(); 123. } 124. 125. bulatbawah(){ 126. this.kontek.beginPath(); 127. this.kontek.arc(this.bulatbawahx, this.bulatbawahy, this.radius1, 0, 2 * Math.PI); 128. this.kontek.stroke();

  129. this.kontek.fill(); 130. } 131. 132. jarum(){ 133. this.kontek.beginPath(); 134. this.kontek.strokeStyle = 'black' 135. this.kontek.moveTo(this.jarum1,this.jarum2); 136. this.kontek.lineTo(this.jarumx,this.jarumy); 137. this.kontek.stroke(); 138. this.kontek.closePath(); 139. } 140. 141. 142. hapuscanvas(){ 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") 150. 151. function tampilkan(){ 152. var nilai=document.getElementById("input1").value; 153. list.add(nilai); 154. list.print(); 155. } 156. 157. function hapuskepala(){ 158. document.getElementById("input2"); 159. list.hapushead(); 160. list.print(); 161. } 162. 163. function hapusekor(){ 164. document.getElementById("input3"); 165. list.hapustail(); 166. list.print(); 167. } 168. 169. function hapus(){ 170. var hps = document.getElementById("input5").value; 171. list.hapus(hps); 172. list.print(); 173. } 174. 175. function carii(){ 176. varcarix=document.getElementById("search").value; 177. list.mencari(carix); 178. } 179. 180. function panjangg(){ 181. var pj = document.getElementById("paanjang").value; 182. list.panjang(pj);

  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. }

  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

[2] (32 matches, 4.1% /4.5%) from (+ 1 documents with identical matches) [4] (25 matches, 3.4% /3.5%) from (+ 1 documents with identical matches) [6] (24 matches, 3.2% /3.3%) from (+ 1 documents with identical matches)

[8] (24 matches, 3.3% /3.4%) from

[10] (23 matches, 3.0% /3.3%) from

(+ 1 documents with identical matches) [12] (23 matches, 2.9% /3.1%) from (+ 1 documents with identical matches) [14] (23 matches, 3.0% /3.1%) from (+ 2 documents with identical matches)

[17] (22 matches, 3.0% /3.1%) from

  (+ 1 documents with identical matches)

[20] (22 matches, 2.9% /3.0%) from

[21] (22 matches, 2.9% /3.0%) from

(+ 2 documents with identical matches)

[24] (22 matches, 2.9% /3.0%) from

  (+ 1 documents with identical matches) [27] (21 matches, 2.9% /3.0%) from

[28] (21 matches, 2.9% /3.0%) from

[30] (21 matches, 2.9% /3.0%) from

(+ 2 documents with identical matches) [33] (21 matches, 2.9% /3.0%) from

[35] (21 matches, 2.9% /3.0%) from [37] (21 matches, 2.8% /3.0%) from (+ 3 documents with identical matches)

[41] (21 matches, 2.9% /3.0%) from

  

[48] (21 matches, 2.9% /3.0%) from

[49] (19 matches, 2.8% /2.9%) from

[51] (19 matches, 2.8% /2.9%) from

[53] (21 matches, 2.8% /2.9%) from

  (+ 1 documents with identical matches)

[56] (21 matches, 2.8% /2.9%) from

[57] (20 matches, 2.8% /2.9%) from

  (+ 1 documents with identical matches)

[60] (20 matches, 2.8% /2.9%) from

[61] (20 matches, 2.8% /2.9%) from

[63] (20 matches, 2.8% /2.9%) from

  (+ 1 documents with identical matches)

[66] (20 matches, 2.8% /2.9%) from

[67] (20 matches, 2.8% /2.9%) from

[69] (20 matches, 2.8% /2.9%) from

  (+ 2 documents with identical matches)

[73] (20 matches, 2.8% /2.9%) from

[74] (20 matches, 2.8% /2.9%) from

[76] (20 matches, 2.8% /2.9%) from

(+ 1 documents with identical matches)

[78] (20 matches, 2.8% /2.9%) from

[80] (19 matches, 2.7% /2.8%) from

  (+ 1 documents with identical matches)

[83] (18 matches, 2.6% /2.7%) from

[84] (17 matches, 2.5% /2.6%) from

[86] (10 matches, 1.7% ) from [88] (9 matches, 1.6% ) from

[90] (8 matches, 1.3% ) from [92] (6 matches, 1.1% ) from

  [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 [99] (1 matches, 0.1% ) from [101] (1 matches, 0.0%0.2%) from

  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 ... , 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