├── 10 Days of JavaScript └── 10 Days of JavaScript.js ├── README.md └── img └── hackerrank.png /10 Days of JavaScript/10 Days of JavaScript.js: -------------------------------------------------------------------------------- 1 | //10 Days of JavaScript 2 | 3 | // Tüm soruları gerek farklı kaynaklardan yararlanarak gerek kendim çözerek sizin için açıklamaya çalıştım. 4 | 5 | // Yararlı olması dileğiyle :) 6 | 7 | 8 | // Day 0: Hello, World! 9 | 10 | function greeting(parameterVariable) { 11 | // This line prints 'Hello, World!' to the console: 12 | console.log('Hello, World!'); 13 | 14 | // Write a line of code that prints parameterVariable to stdout using console.log: 15 | 16 | console.log(parameterVariable); 17 | 18 | 19 | } 20 | //*******************************************************************************************************************/ 21 | 22 | 23 | 24 | // Day 0:Data Types 25 | 26 | // Write code that uses console.log to print the sum of the 'firstInteger' and 'secondInteger' (converted to a Number type) on a new line. 27 | console.log(firstInteger + Number(secondInteger)); // İçindeki sayıları toplamak istediğimiz için başında Number fonksiyonu kullandık aksi taktirde cevap 412 olurdu. 28 | 29 | // Write code that uses console.log to print the sum of 'firstDecimal' and 'secondDecimal' (converted to a Number type) on a new line. 30 | console.log(firstDecimal + Number(secondDecimal)); 31 | 32 | // Write code that uses console.log to print the concatenation of 'firstString' and 'secondString' on a new line. The variable 'firstString' must be printed first. 33 | console.log(firstString + secondString); 34 | //*******************************************************************************************************************/ 35 | 36 | 37 | 38 | 39 | // Day 1: Arithmetic Operators 40 | 41 | function getArea(length, width) { 42 | let area; 43 | // Write your code here 44 | area = length * width; 45 | return area; 46 | } 47 | 48 | function getPerimeter(length, width) { 49 | let perimeter; 50 | // Write your code here 51 | perimeter = 2 * (length + width) 52 | return perimeter; 53 | 54 | } 55 | //*******************************************************************************************************************/ 56 | 57 | 58 | 59 | 60 | // Day 1: Functions 61 | 62 | // First Method 63 | function factorial(n) { 64 | if (n === 0) { 65 | return 1; 66 | }else { 67 | return n * factorial(n-1); 68 | } 69 | } 70 | 71 | // Second Method 72 | 73 | function factorial(n) { 74 | let finalValue = 1; 75 | for(let i = n; i>1; i--) { 76 | finalValue *= i; 77 | } 78 | return finalValue; // Döngü tamamlandıktan sonra return ile finalValue değerini dışarı veriyor. 79 | } 80 | //*******************************************************************************************************************/ 81 | 82 | 83 | 84 | 85 | //Day 1: Let and Const 86 | 87 | function main() { 88 | 89 | // Write your code here. Read input using 'readLine()' and print output using 'console.log()'. 90 | const PI = Math.PI; 91 | let input = Number(readLine()); // yukardaki açıklama satırında girdiyi okuyabilmek için "readline()" fonksiyonuna inputu ata diyor bu yüzden böyle yaptık. 92 | 93 | // Print the area of the circle: 94 | console.log(PI* Math.pow(input,2)) 95 | 96 | // Print the perimeter of the circle: 97 | console.log(2 * PI * input) 98 | //*******************************************************************************************************************/ 99 | 100 | 101 | 102 | 103 | // Day 2: Conditional Statements: If-Else 104 | 105 | function getGrade(score) { 106 | let grade; 107 | // Write your code here 108 | if (score > 25 && score <= 30) { //bunu "score > 25" diyerekte başlayabilirdik. 109 | return grade = "A"; //return grade = A deseydik A'ya tanımsız diyecekti o yüzden A,B,C,D,E notlarını string şeklinde yazmayı unutma! 110 | }else if (score > 20 && score <= 25) { 111 | return grade = "B"; 112 | 113 | }else if (score > 15 && score <= 20) { 114 | return grade = "C"; 115 | 116 | }else if (score > 10 && score <= 15) { 117 | return grade = "D"; 118 | 119 | }else if (score > 5 && score <= 10) { 120 | return grade = "E"; 121 | 122 | }else if (score >= 0 && score <= 5) { // bunu direk " else grade = 'F' " diyede bitirebilirdik. 123 | return grade = "F"; 124 | } 125 | return grade; 126 | } 127 | //*******************************************************************************************************************/ 128 | 129 | 130 | 131 | // Day 2: Conditional Statements: Switch 132 | 133 | // First Method 134 | 135 | // Write your code here 136 | switch(s.charAt(0)) { 137 | case 'a' : // Durumu yazdıktan sonra ":" koymayı unutma! 138 | case 'e' : 139 | case 'i' : 140 | case 'o' : 141 | case 'u' : 142 | letter = "A" 143 | break; 144 | 145 | case 'b' : 146 | case 'c' : 147 | case 'd' : 148 | case 'f' : 149 | case 'g' : 150 | letter = "B" 151 | break; 152 | 153 | case 'h' : 154 | case 'j' : 155 | case 'k' : 156 | case 'l' : 157 | case 'm' : 158 | letter = "C" 159 | break; 160 | 161 | case 'n' : 162 | case 'p' : 163 | case 'q' : 164 | case 'r' : 165 | case 's' : 166 | case 't' : 167 | case 'v' : 168 | case 'w' : 169 | case 'x' : 170 | case 'y' : 171 | case 'z' : 172 | letter = "D" 173 | break; 174 | } 175 | 176 | return letter; 177 | } 178 | 179 | // Second Method 180 | 181 | // Write your code here 182 | switch(true) { 183 | case 'aeiou'.includes(s[0]) : //string'in 0. indexinde aeiou'dan biri varsa letter = A demek. 184 | letter = "A"; 185 | break; 186 | case 'bcdfg'.includes(s[0]) : 187 | letter = "B"; 188 | break; 189 | case 'hjklm'.includes(s[0]) : 190 | letter = "C"; 191 | break; 192 | case 'npqrstvwxyz'.includes(s[0]) : 193 | letter = "D"; 194 | break; 195 | } 196 | return letter; 197 | //*******************************************************************************************************************/ 198 | 199 | 200 | 201 | 202 | //Day 2: Loops 203 | 204 | let vowels = 'aeiuo' 205 | function vowelsAndConsonants(s) { 206 | for (var i = 0; i < s.length; i++) { 207 | 208 | if (vowels.includes(s[i])) { 209 | console.log(s[i]); 210 | } 211 | } 212 | for (var i = 0; i < s.length; i++) { 213 | 214 | if (!vowels.includes(s[i])) { 215 | console.log(s[i]); 216 | } 217 | } 218 | } 219 | //*******************************************************************************************************************/ 220 | 221 | 222 | 223 | // Day 3: Arrays 224 | 225 | // First Method 226 | 227 | function getSecondLargest(nums) { 228 | // Complete the function 229 | nums = new Set(nums); 230 | nums = Array.from(nums); // set'ten yeni bir array elde etmemize izin verir. 231 | nums.sort(comparator); 232 | return nums[nums.length - 2] // -2 dememizin nedeni array'de sondan 0 ve 1. indexte 6 sayısı olması 233 | } 234 | 235 | function comparator(a,b) { 236 | return a-b; // Küçükten büyüğe doğru sıraladık | b-a deseydik büyükten küçüğe sıralamış olurduk. 237 | } 238 | 239 | // Second Method 240 | 241 | function getSecondLargest(nums) { 242 | let largest = nums[0]; 243 | let secondLargest = nums[0]; 244 | 245 | for (let i = 1; i < nums.length; i++) { //Bu döngünün amacı en büyük sayıyı bulmak. 246 | if (nums[i] > largest) { 247 | secondLargest = largest; 248 | largest = nums[i]; 249 | continue; 250 | } 251 | 252 | if ((nums[i] > secondLargest) && (nums[i] < largest)) { // Bu döngünün amacı ise en büyük sayıyı kullanarak en büyük ikinci sayıyı bulmak. 253 | secondLargest = nums[i]; 254 | } 255 | } 256 | 257 | return secondLargest; 258 | } 259 | //*******************************************************************************************************************/ 260 | 261 | 262 | 263 | 264 | // Day 3: Try, Catch, and Finally 265 | 266 | function reverseString(s) { 267 | try { 268 | s = s.split("").reverse().join("") 269 | 270 | }catch(exception) { // exception burda temsili yani beklediğimiz hatayı temsil eder "error" da yazabilirdik 271 | console.log("s.split is not a function"); 272 | 273 | }finally { 274 | console.log(s) 275 | } 276 | 277 | } 278 | //try ve catch arasına çalışacak kodlar yazılır. 279 | 280 | //catch ile finally arasına hata yakalandığında çalışacak kodlar yazılır. 281 | 282 | //finally'den sonra ise try tamamlandıktan sonra hata olsada olmasada çalışacak kodlar yazılır. 283 | //*******************************************************************************************************************/ 284 | 285 | 286 | 287 | 288 | // Day 3: Throw 289 | 290 | function isPositive(a) { 291 | 292 | if (a > 0 ) { 293 | return "YES" 294 | }else if(a === 0) { 295 | throw Error("Zero Error") 296 | }else if(a < 0 ) { 297 | throw Error("Negative Error") 298 | } 299 | } 300 | 301 | // Burda throw'u özel bir hatayı belirtmek için kullandık. Yani biz bir duruma özel bir hata oluşturmak istiyorsak throw kullanabiliriz. 302 | //*******************************************************************************************************************/ 303 | 304 | 305 | 306 | 307 | //Day 4: Create a Rectangle Object 308 | 309 | //Method 1 310 | 311 | function Rectangle(a, b) { 312 | return { 313 | length: a, 314 | width: b, 315 | perimeter: 2*(a + b), 316 | area: a*b 317 | } 318 | } 319 | 320 | // Bizden bir obje oluşturup içersine istenen özellikleri atamamızı istedi, sonrasındada return ile oluşturduğumuz bilgileri geri döncez. 321 | 322 | // Objelerde dikkat edilmesi gerekenler: Objenin içindeki özellikler veya methodlar virgül ile ayrılması gerekir ve son olusturulan özellikten sonra virgul konmaz. 323 | 324 | // Unutma her fonksiyon bir nesnedir. 325 | //*******************************************************************************************************************/ 326 | 327 | 328 | 329 | 330 | // Day 4: Count Objects 331 | 332 | function getCount(objects) { 333 | let counter = 0; 334 | 335 | for(let i= 0; i< objects.length; i++) { 336 | if (objects[i].x == objects[i].y) { 337 | counter++; 338 | } 339 | } 340 | return counter; 341 | } 342 | 343 | //objects[i].x -> object parametresinin içindeki x değerinin i. index değeri demek. 344 | //*******************************************************************************************************************/ 345 | 346 | 347 | 348 | 349 | // Day 4: Classes 350 | 351 | // Bazen kullanabileceğimiz herhangi bir standart var mı diye merak ederiz aynı nesneyi üretmekten emin olmak için, manuel olarak tekrar ve tekrar yazmamak için. 352 | // Bizden aşağıdaki property'leri içeren bir polygon class'ı olusturmamızı istedi. 353 | //Çokgenin kenarlarının uzunluklarını tanımlayan bir dizi tam sayı değeri alan bir constructor tanımlamalıyız. 354 | //Çokgenin çevresini return eden bir perimeter yöntemi tanımlamalıyız. 355 | 356 | class Polygon { // Biz burda polygon classı olusturarak bütün çokgenler için bu işlemi yapabilir hale geldik. Hepsi için ayrı ayrı uğraşmıcaz. 357 | 358 | constructor(sides) { 359 | this.sides = sides; // Bir dizi tam sayı değerini almak için sides parametresini kullanarak sides property'sini olusturduk. 360 | 361 | } 362 | 363 | perimeter() { // perimeter methoduyla girilen sayıları topluyoruz. 364 | let sum = 0; 365 | for(let i=0; i< this.sides.length; i++) { 366 | sum = sum + this.sides[i] 367 | } 368 | return sum; 369 | } 370 | } 371 | //Burda this'i sides parametresini ne ile eşitlemek istiyorsan onunla eşitlemek için kullandık. 372 | // Perimeter methodda herhangi bir sey girmeme gerek yok, çünkü input property'nin kendisinde. 373 | //*******************************************************************************************************************/ 374 | 375 | 376 | 377 | 378 | //Day 5: Inheritance 379 | 380 | /* 381 | * Write code that adds an 'area' method to the Rectangle class' prototype 382 | */ 383 | Rectangle.prototype.area = function() { 384 | return this.h * this.w 385 | } 386 | 387 | // Reçeteli nesne üretmenin 2 yolu var biri prototype ikincisi new biz prototype ile Renctangle class'ına bir area methodu ekledik. 388 | 389 | /* 390 | * Create a Square class that inherits from Rectangle and implement its class constructor 391 | */ 392 | 393 | class Square extends Rectangle { 394 | constructor(w) { 395 | super(w,w) 396 | } 397 | } 398 | 399 | // extends ile Rectangle class'ının inheritance'ı yani mirascısı olan yani bütün özelliklerini alan Square class'ını olusturduk. 400 | 401 | // Burdaki rectangle superClass Square ise Subclass olarak tanımlanır. 402 | // Constructor ile subclassımıza superclass'ımızda olan nesnemizi atadık. 403 | // super(w,w) diyerek sen git bunları super class'tan al ve superClass'ın methodunu uygula dedik. 404 | 405 | //*******************************************************************************************************************/ 406 | 407 | // Day 5: Template Literals 408 | 409 | function sides(literals, ...expressions) { 410 | let Area = expressions[0] // expressions'ın içinde tanımlı olan ifadeleri Area ve Perimeter olarak tanımladık. 411 | let Perimeter = expressions[1] 412 | let s1 = (Perimeter + islem(Area, Perimeter)) / 4 413 | let s2 = (Perimeter - islem(Area, Perimeter)) / 4 414 | return [s2, s1] // s2 ve s1 değerlerini küçükten büyüğe doğru sıralamamızı istiyor. 415 | } 416 | function islem(Area, Perimeter) { // Area ve Perimeter parametrelerini kullanarak s1 ve s2 için ortak olan islemin fonksiyonunu olusturduk. 417 | return Math.sqrt(Math.pow(Perimeter,2)-(16 * Area)) 418 | } 419 | 420 | //*******************************************************************************************************************/ 421 | 422 | //Day 5: Arrow Functions 423 | 424 | // Method 1 425 | 426 | function modifyArray(nums) { 427 | let Array1 = function(n) { 428 | if(n % 2 == 0) 429 | return n * 2 // tek işlem yaptığımız için süslü parantezin içine almadık. 430 | else 431 | return n * 3 432 | } 433 | let Array2 = nums.map(Array1); // Bunun anlamı, nums dizisinin içindeki bilgileri al ve Array1 değişkenine ata ve map fonksiyonu yardımıyla Array1'e atadığın fonksiyonu kullanarak yeni bir Array2 dizisi elde et. 434 | return Array2 435 | } 436 | 437 | // map() fonksiyonunun olayı dizinin içindeki tüm elemanları tek tek döndürüp mevcut diziyi değiştirmeden yeni bir dizi elde etmek. 438 | 439 | // Method 2 440 | // Bu methodda arrow function ve ternary operator kullanalım. 441 | 442 | function modifyArray(nums) { 443 | let Array1 = n => (n % 2 == 0) ? n * 2: n * 3 444 | let Array2 = nums.map(Array1) 445 | return Array2 446 | } 447 | 448 | // arrow function kullanımında Array1 fonksiyonun ismi n ise paremetresidir. 449 | // Ternary operator kullanımında kısaca n 2'ye bölünürse 2 ile bölünmezse 3 ile çarp dedik. Yani kısa if else gibi düşünebiliriz. 450 | 451 | //Day 6: Bitwise Operators 452 | 453 | // Önce soruyu anlayalım. Soruda verilen n değerini (1, 2, 3 ...n) şeklinde yazmamızı ve bu değerleri n'e kadar a < b olacak şekilde yazmamızı istiyor. 454 | // Örneğin n = 3 için sol taraftakiler a'yı sağ taraftakiler b'yi temsil edecek şekilde. 455 | // 1 - 2 456 | // 1 - 3 457 | // 2 - 3 458 | // Yazmanızı istiyor. 459 | 460 | // Örneğin 1 - 2 için 001 & 010 = 000 sonucu çıkıyor. Anlamadıysan ve operatörünün özelliklerini incele. 461 | 462 | // Sonrasında ise çıkan sonucun k değerinden küçük olmasını istiyor. 463 | // Sorudaki tabloya baktığımızda n = 8 k = 5 için inceleyelim. 464 | // 5'den küçük en büyük değer 4'tür. 465 | 466 | // n = 2 k = 2 örneğine baktığımızda 2'den küçük en büyük değer 1 diye düşünebilirsiniz ama a ve b seklinde sıraladığımızda bunun 0 oldugunu görüyoruz çünkü n = 2. 467 | 468 | // 1 - 2 şeklinde oluyor sadece oda 001 & 010 = 000 yani 0'dır. 469 | 470 | // Geçelim Cevaba 471 | 472 | function getMaxLessThanK(n, k) { // Hangi fonksiyonu olusturcağımızı öğrenmek için en alttaki satırı aç ve incele. 473 | let max = 0; 474 | for(let a = 1; a < n; a++) { 475 | for(let b = a+1; b <= n; b++) { 476 | if((Number(a & b) < k) && (Number(a & b) > max)) { 477 | max = a & b; 478 | } 479 | } 480 | } 481 | return max; 482 | } 483 | // İki farklı for döngüsü olusturarak tablodaki 1-2, 1-3, 1-4... şeklinde belirtilen a ve b sayılarını oluşturduk burda b sayısının a sayısından büyük olmasına dikkat. 484 | 485 | // Sonrasında ise bizden istenen 2 farklı işlemi if döngüsü içersinde and operatörünü kullanarak oluşturduk. 486 | 487 | //******************************************************************************************************************/ 488 | 489 | 490 | // Day 6: JavaScript Dates 491 | 492 | // Method 1 493 | 494 | function getDayName(dateString) { 495 | let dates = new Date(dateString) 496 | let dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; 497 | let dayName = dayNames[dates.getDay()] 498 | return dayName; 499 | } 500 | 501 | // JavaScript'te Gün atamasını new Date() ile yapıyoruz. 502 | // new Date() methodunu uygulayarak input'u dates değişkenine atadık. 503 | // getDay() methodu belirtilen tarihin gün olarak sıramasını 0'dan başlayarak 6'ya kadar veriyor örneğin verilen tarih Pazartesi gününe denk geliyorsa çıktımız 1 oluyor. 504 | 505 | // Method 2 506 | 507 | function getDayName(dateString) { 508 | let dayName; 509 | // Write your code here 510 | let dates = new Date(dateString) 511 | switch(dates.getDay()) { 512 | case 0 : dayName = "Sunday"; break; 513 | case 1 : dayName = "Monday"; break; 514 | case 2 : dayName = "Tuesday"; break; 515 | case 3 : dayName = "Wednesday"; break; 516 | case 4 : dayName = "Thursday"; break; 517 | case 5 : dayName = "Friday"; break; 518 | case 6 : dayName = "Saturday"; break; 519 | } 520 | return dayName; 521 | } 522 | 523 | //******************************************************************************************************************/ 524 | 525 | // Day 7: Regular Expressions I 526 | 527 | // Konu ile ilgili detaylı bilgiye Github -> JavaScript Konu Anlatımı -> Yeni Konular -> 3-Regular-Expressions-Regex-(Düzenli-ifadeler) başlıklarını takip ederek ulaşabilirsiniz. 528 | 529 | // Regex ifadeleri her zaman iki eğik çizgi "/Regex ifadeleri/" arasında belirtilir. 530 | 531 | // Method 1 532 | 533 | function regexVar(str) { 534 | let re = /^([aeiou]).+\1$/; 535 | return re; 536 | } 537 | 538 | // ^ ifade ile satır başını şeçer. 539 | 540 | // () Şeçtiğimiz satır başında parantez kullanılarak parantezin içersinde eşleşen değer varsa saklanır. 541 | 542 | // [] Köşeli parantez bizim bir aralık belirlememizi sağlar. Yani biz ^([aeiou]) diyerek satırın başında aeiou harflerinden biri var mı bak varsa seç demiş oluyoruz. 543 | 544 | // Sonrasında ise .+ kullanarak . ile seçtiğimiz tüm karekterleri + ile birleşitiriyoruz. 545 | 546 | // \1 biraz önce ilk seçeceğimiz aeiou elemanlarının aynısından bir tane daha varsa aralığı şeç demek. Yani a ile baslıyorsa gene a olması lazım veya aeiou elemanları değilde 9 deseydik "987529" tamamını secerdi. Ama regular expression ifadesini bu sekilde bırakırsak sıkıntı yasarız cunku "assdsdasds" assdsda yı şeçer fakat biz baştaki ve sondakini seçmesini istiyoruz. Bu yüzden sonuna $ isaretini ekledik. Yani baştaki harf ile sondaki harf eşleşirse seç demiş olduk. 547 | 548 | // Method 2 549 | 550 | function regexVar() { 551 | /* 552 | * Declare a RegExp object variable named 're' 553 | * It must match a string that starts and ends with the same vowel (i.e., {a, e, i, o, u}) 554 | */ 555 | 556 | let re = /^(a|e|i|o|u).+\1$/ // Köşeli parantez'in yerine veya operatörünü kullanarak ayırdık. 557 | /* 558 | * Do not remove the return statement 559 | */ 560 | return re; 561 | } 562 | 563 | //******************************************************************************************************************/ 564 | 565 | // Day 7: Regular Expressions II 566 | 567 | function regexVar() { 568 | /* 569 | * Declare a RegExp object variable named 're' 570 | * It must match a string that starts with 'Mr.', 'Mrs.', 'Ms.', 'Dr.', or 'Er.', 571 | * followed by one or more letters. 572 | */ 573 | 574 | let re = /^(Mr|Mrs|Ms|Dr|Er)(\.)([a-zA-Z])+$/ 575 | /* 576 | * Do not remove the return statement 577 | */ 578 | return re; 579 | } 580 | 581 | // Burda belki sondaki +$ ifadesi anlaşılmayabilir. 582 | // + ifadesini koymasaydık sadece ön ek ve noktadan sonraki ilk harfi seçerdi melela "Mr.Duran" da seçilen kısım Mr.D olurdu. 583 | 584 | // +'nın yanına $ koymamızın nedeni ise içerde alfanümerik kelime varsa seçmesini engellemek yani "Mr.Duran123" oldugunda $ koymazsak Mr.Duran'ı seçer biz bunu istemiyoruz biz hiç bir karekteri seçmemesini istiyoruz. Bu yüzden sondaki karekterler a-zA-Z ise seç anlamında $ işaretini kullandık. 585 | 586 | //******************************************************************************************************************/ 587 | 588 | // Day 7: Regular Expressions III 589 | 590 | // Method 1 591 | 592 | function regexVar() { 593 | /* 594 | * Declare a RegExp object variable named 're' 595 | * It must match ALL occurrences of numbers in a string. 596 | */ 597 | let re = /\d+/g; 598 | 599 | /* 600 | * Do not remove the return statement 601 | */ 602 | return re; 603 | } 604 | 605 | // \d dememizin nedeni tüm digitleri yani rakamları seçmesini istememiz. 606 | 607 | // + koymamızın nededi ise istenilen rakamları birleşik halde seçmesini istememiz yani + koymasaydık 102 sayısını 1 0 2 şeklinde ayrı ayrı seçerdi. 608 | 609 | // Bu soruda belki en önemli kısım global flag kullanımı. /g kullanımının nedeni global flag tüm yazının dikkate alınmasını sağlıyor yani olmadıgında yazının eşlesen ilk kısmını alıyor sadece. Global flag olmasaydı, çıktı sadece 102 olurdu. 610 | 611 | // Bir diğer önemli nokta flagler her zaman eğik çizgilerin dışına koyulur. Dikkat!!! 612 | 613 | // Method 2 614 | 615 | let re = /[0-9]+/g; // Bu şekilde aralık belirleyerek de sonuca gidebilirdik. 616 | 617 | //*****************************************************************************************************************/ 618 | 619 | // Day 8: Create a Button 620 | 621 | // Dikkat!!! id'yi btn yapmanı istiyor, farklı bir id yazma yoksa benim gibi 1 saat farklı farklı yollardan çözmeyi denersin :) 622 | 623 | // CSS 624 | // #btn { 625 | // width: 96px; 626 | // height: 48px; 627 | // font-size: 24px; 628 | // } 629 | 630 | //****************************************************** 631 | // HTML 632 | 633 | // 634 | // 635 | // 636 | // 637 | // 638 | // Button 639 | 640 | // 641 | // 642 | // 643 | // 644 | // 645 | // 646 | 647 | //****************************************************** 648 | 649 | // Method 1 650 | 651 | // JavaScript 652 | /* This assigns the element with id 'buttonId' to 'btn' */ 653 | var btnDOM = document.getElementById("btn"); 654 | let counter = 0; 655 | /* This sets the action to perform on a click event */ 656 | btnDOM.addEventListener("click", function() { 657 | /* This changes the button's label */ 658 | counter = counter + 1; 659 | btnDOM.innerHTML = counter; 660 | }); 661 | 662 | // getElementById ile ekrandaki butona ulaşıp onu btnDOM'a atadık. 663 | //addEventListener fonksiyonunu eklediğiniz HTML elementlerine olay dinleyicisi ekler. Yani kullanıcı sayfada herhangi bir işlem yaptığında(click vb.) istediğimiz aksiyonları alabilmemizi sağlar. 664 | // click event'ini de ekleyerek butona her bastığımızda yazdığımız fonksiyonu yaptırdık. 665 | // innerHTML ile değişen counter değerini btnDOM değişkeni üzerinden butona yazdırdık. 666 | 667 | // Method 2 668 | var buttonCounter = document.getElementById('btn'); 669 | buttonCounter.addEventListener('click', function() { 670 | buttonCounter.innerHTML = +(buttonCounter.innerHTML) + 1; 671 | }); 672 | 673 | // Method 3 674 | 675 | // direk HTML sayfasının içine yazarak da sonuca ulaşabiliriz. 676 | 677 | //*****************************************************************************************************************/ 678 | 679 | // Day 8: Buttons Container 680 | 681 | // HTML 682 | 683 | // 684 | // 685 | // 686 | // 687 | // 688 | // Buttons Grid 689 | // 690 | // 691 | //
692 | // 693 | // 694 | // 695 | // 696 | // 697 | // 698 | // 699 | // 700 | // 701 | //
702 | // 703 | // 704 | // 705 | 706 | //****************************************************** 707 | 708 | // CSS 709 | 710 | // .btnContainer { 711 | // width: 75%; 712 | // } 713 | 714 | // .btn { 715 | // width: 30%; 716 | // height: 48px; 717 | // font-size: 24px; 718 | // } 719 | 720 | 721 | // JS 722 | const ids = [1, 2, 3, 6, 9, 8, 7, 4]; // Sayıların 1'den başlayıp saat yönünde yazılmış ilk hali saat yönünde hareket ettirirken bu diziyi baz alacağız. 723 | let nums = [1, 2, 3, 6, 9, 8, 7, 4]; // saat yönünde döndüreceğimiz dizi. 724 | let btn5DOM = document.getElementById("btn5"); 725 | btn5DOM.onclick = function() { 726 | nums.unshift(nums.pop()); 727 | for (i = 0; i < 8; i++) { 728 | document.getElementById("btn" + ids[i]).innerHTML = nums[i]; 729 | } 730 | }; 731 | 732 | // // pop() Metodu 733 | 734 | // pop() metodu dizinin son elemanını siler ve dizinin yapısını değiştirir. Aynı zamanda da diziden silinen elemanı döndürür. 735 | 736 | let array = ["1", "2", "3"] 737 | let silinenArray = array.pop() 738 | console.log(silinenArray) // "3" 739 | console.log(array) // "1" "2" 740 | 741 | // unshift() Metodu 742 | 743 | // Javascript de dizilerin başına eleman ya da elemanlar eklemek için unshift() metodunu kullanıyoruz. Metot diziye eleman ya da elemanlar eklerken dizinin yapısını değiştirir. push() metodu ile de sonuna ekleriz. 744 | let dizi = ["6", "7", "8"] 745 | dizi.unshift("5") 746 | console.log(dizi) // ["5","6","7","8"] 747 | 748 | // Yani nums.unshift(nums.pop()); bu ifade ile sondaki elemanı alıp başa eklemiş olduk. 749 | //[4,1,2,3,6,9,8,7] bu hale getirdik. 750 | 751 | // yani biz 5'e basınca nums değişkeni değişti ve şöyle oldu -> nums = [4,1,2,3,6,9,8,7] 752 | 753 | // Şimdi döngüye sokalım. 754 | btn1 = nums[0] = 4 755 | btn2 = nums[1] = 1 756 | btn3 = nums[2] = 2 757 | btn6 = nums[3] = 3 758 | btn9 = nums[4] = 6 759 | btn8 = nums[5] = 9 760 | btn7 = nums[6] = 8 761 | btn4 = nums[7] = 7 762 | 763 | // Bu şekilde yukarda değiştirdiğimiz nums değerini, id numarası üzerinden butonlarda gözükmesini sağladık. 764 | 765 | // Ve bu döngü her 5'e tıkladığımızda benzer şekilde devam eder. 766 | 767 | //*****************************************************************************************************************/ 768 | // HTML 769 | 770 | // AllCollection 771 | // 772 | // 773 | // 774 | // 775 | // 776 | // Binary Calculator 777 | // 778 | // 779 | 780 | //
// Bu ekran yani üzerine tıklamıyoruz o yüzden ayrı bir div içersinde yazdık. 781 | //
782 | // // üzerine tıklandığımda clickZero fonksiyonu çalıssın dedik. 783 | // 784 | // 785 | // 786 | // 787 | // 788 | // 789 | // 790 | 791 | //
792 | 793 | // 794 | // 795 | // 796 | 797 | //****************************************************** 798 | 799 | // CSS 800 | 801 | // body{ 802 | // width:33%; 803 | // } 804 | 805 | // Body komple hesap makinesinin kapladığı yeri ayarlamak için kullandık. 806 | 807 | // #res{ 808 | // background-color:lightgray; 809 | // border:solid; 810 | // height:48px; 811 | // font-size:20px; 812 | // } 813 | 814 | // res hesap makinesin ekran boyutunu ayarlamak için kullandık. 815 | 816 | // #btn0,#btn1{ 817 | // background-color:lightgreen; 818 | // color:brown; 819 | // } 820 | 821 | // Dikkat!!! Aynı stili vermek istediğimiz id'leri virgül ile birleştirerek ortak bir stil verebiliriz. 822 | 823 | // #btnClr,#btnEql{ 824 | // background-color:darkgreen; 825 | // color:white; 826 | // } 827 | // #btnSum,#btnSub,#btnMul,#btnDiv{ 828 | // background-color:black; 829 | // color:red; 830 | // } 831 | // button{ 832 | 833 | // width:25%; 834 | // height:36px; 835 | // font-size:18px; 836 | // margin:0px; 837 | // float:left; 838 | 839 | // } 840 | 841 | //****************************************************** 842 | 843 | // JavaScript 844 | 845 | var resultScreen=document.getElementById("res"); 846 | var result=0; 847 | var operatorsSeq=""; 848 | function clickZero() 849 | { 850 | 851 | resultScreen.innerHTML+="0"; 852 | } 853 | // clicZero fonksiyonuyla, 0 butonuna bastıkça ekrana 0 ekle dedik. 854 | function clickOne() 855 | { 856 | 857 | resultScreen.innerHTML+="1"; 858 | } 859 | function clickSum() 860 | { 861 | operatorSeq="+"; 862 | result=parseInt(resultScreen.innerHTML,2); 863 | resultScreen.innerHTML+="+"; 864 | } 865 | 866 | // parseInt() ile fonksiyona girdiğiniz ikinci parametre ile dönüştürmek istediğiniz sayı sistemine dönüşüm yaptırabilirsiniz. 867 | // örneğin, console.log(parseInt("10110", 2)) // 22, yani 10110 sayısının 2'li sistemdeki onluk karşılığı 22'dir. parseInt("a",b) a parametresi string veya sayı olabilir. 868 | 869 | function clickSub() 870 | { 871 | operatorSeq="-"; 872 | resultScreen.innerHTML+="-"; 873 | } 874 | function clickMul() 875 | { 876 | operatorSeq="*"; 877 | result=parseInt(resultScreen.innerHTML,2); 878 | resultScreen.innerHTML+="*"; 879 | } 880 | function clickDiv() 881 | { 882 | operatorSeq="/"; 883 | resultScreen.innerHTML+="/"; 884 | } 885 | function clickEql() 886 | { 887 | var ans=0; 888 | 889 | if(operatorSeq=='+') 890 | { 891 | var i =(resultScreen.innerHTML).indexOf("+"); 892 | // indexOf ile + işaretinin index numarası tespit edilip i değişkenine atandı. 893 | var operand2=parseInt((resultScreen.innerHTML).substr(i+1),2); 894 | ans =result+operand2; 895 | } 896 | //substr(i+1) dememizin nedeni operatörden sonraki sayıyı alabilmek için. 897 | else if(operatorSeq=='-') 898 | 899 | { 900 | var i =(resultScreen.innerHTML).indexOf("-"); 901 | var operand2=parseInt((resultScreen.innerHTML).substr(i+1),2); 902 | ans =result-operand2; 903 | } 904 | 905 | else if(operatorSeq=='*') 906 | 907 | { 908 | var i =(resultScreen.innerHTML).indexOf("*"); 909 | var operand2=parseInt((resultScreen.innerHTML).substr(i+1),2); 910 | ans =result*operand2; 911 | } 912 | else if(operatorSeq=='/') 913 | 914 | { 915 | var i =(resultScreen.innerHTML).indexOf("/"); 916 | var operand2=parseInt((resultScreen.innerHTML).substr(i+1),2); 917 | ans =result/operand2; 918 | } 919 | 920 | 921 | resultScreen.innerHTML=ans.toString(2); 922 | } 923 | // toString(2) ile birlikte parseInt ile 2'lik tabandan 10'luk tabana çevirdiğimiz sayıyı tekrar string halde 2'lik tabana geri çeviriyoruz. 924 | function clickClear() 925 | { 926 | resultScreen.innerHTML=""; 927 | 928 | } 929 | 930 | //SON 931 | 932 | 933 | 934 | 935 | 936 | 937 | 938 | 939 | 940 | 941 | 942 | 943 | 944 | 945 | 946 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HackerRank 2 | 3 | ## 10 Days of Javascript 4 | 5 |
6 | 7 | -------------------------------------------------------------------------------- /img/hackerrank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oguzhanduran/HackerRank-10-Days-of-Javascript/a0921b3f966868ad339be5f09a63f608013ffe2c/img/hackerrank.png --------------------------------------------------------------------------------