{"id":18367885,"url":"https://github.com/zehracakir/javascriptnotlarim","last_synced_at":"2025-04-06T17:31:36.784Z","repository":{"id":132835112,"uuid":"592337424","full_name":"zehracakir/JavascriptNotlarim","owner":"zehracakir","description":null,"archived":false,"fork":false,"pushed_at":"2023-02-06T10:16:45.000Z","size":1604,"stargazers_count":13,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-22T03:51:17.098Z","etag":null,"topics":["dom","es6","fetch-api","javascript","json","localstorage","nodejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zehracakir.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-23T14:15:54.000Z","updated_at":"2024-08-23T11:31:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"7970a014-35cf-4b23-a297-fd58cb7a87a7","html_url":"https://github.com/zehracakir/JavascriptNotlarim","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zehracakir%2FJavascriptNotlarim","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zehracakir%2FJavascriptNotlarim/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zehracakir%2FJavascriptNotlarim/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zehracakir%2FJavascriptNotlarim/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zehracakir","download_url":"https://codeload.github.com/zehracakir/JavascriptNotlarim/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247522305,"owners_count":20952520,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom","es6","fetch-api","javascript","json","localstorage","nodejs"],"created_at":"2024-11-05T23:23:50.501Z","updated_at":"2025-04-06T17:31:36.761Z","avatar_url":"https://github.com/zehracakir.png","language":"JavaScript","readme":"# Javascript\n\n## NodeJS Nedir?\n\n- Node.js, açık kaynaklı, genelde sunucu tarafında çalışan ve ağ bağlantılı uygulamalar için geliştirilmiş bir çalıştırma ortamıdır.\n- NodeJS kurulumu için : [https://nodejs.org/en/download/](https://nodejs.org/en/download/)\n- NodeJS versiyon kontrolü için cmd de → node —version komutunu çalıştırmamız gerekir.\n\n## **JavaScript Nedir?**\n\nJavaScript, kısaltılmış haliyle JS,minimum maliyetle maksimum verim alınmasına yönelik programlama (tasarım) konseptidir.\n\n### **JavaScript ile Java farklı dillerdir.**\n\nJavaScript ve Java arasında; isimleri, yazım şekli ve standart kütüphanelerindeki benzerlikler dışında bir bağlantı yoktur ve iki dilin semantikleri çok farklıdır.\n\n![resim1.PNG](images/resim1.png)\n\n## **HTML, CSS ve JavaScript (Web'in temel taşları)**\n\nHTML ve CSS ile JavaScript, World Wide Web'in (kısaca WWW veya Web) **temel üç öğesinden** biridir. Yaygın olarak web tarayıcılarında kullanılmakta olan JavaScript ile yazılan istemci tarafı betikler sayesinde tarayıcının kullanıcıyla etkileşimde bulunması, tarayıcının kontrol edilmesi, asenkron bir şekilde sunucu ile iletişime geçilmesi ve web sayfası içeriğinin değiştirilmesi gibi işlevler sağlanır.\n\nAşağıda yer alan görseldeki gibi HTML bir web sitesinin iskeletini yani ana yapısını oluşturmakta, CSS bu ana yapıya görsellik ve şekil vermekte, JavaScript ise yapının fonksiyonel olarak çalışmasını sağlamaktadır.\n\n![resim2.PNG](images/resim2.png)\n\n## **JavaScript'in Kullanılabileceği Alanlar**\n\n- Front-end\n- Back-end\n- Mobil (Mobile)\n- Masaüstü (Desktop)\n- Oyun (Game)\n- Makine Öğrenmesi, Derin Öğrenme ve Yapay Zeka (Machine Learning, Deep Learning \u0026 Artificial Intelligence)\n\n## Merhaba Dünya\n\n```csharp\nconsole.log(\"Merhaba Dünya\")\nalert(\"Merhaba Dünya\") // Sitede uyarı penceresi olarak göstermek için\ndocument.write(\"Merhaba Dünya\") // Dokümana yazdırmak için\n```\n\nconsole.log kullanımı : \n\n![resim3.PNG](images/resim3.png)\n\n## Değişken Tanımlama\n\n- Değişkenler, girdiğimiz verileri, bilgileri tutar. Değişken isimlendirmede dikkat etmemiz gerekenler şunlardır.\n    - Değişken isimleri harf, _ veya $ işareti ile başlayabilir.\n    - İlk harften sonra değişken isimlerinde rakamlar da kullanılabilir. $ ve _ dışında başka noktalama işaretleri kullanılamaz.\n    - Değişken ismindeki harfler arasında boşluk kullanılamaz.\n- JavaScript loosely typed bir programlama dilidir. Yani bir değişkeni tanımlarken değişkenin türünü (sayısal, metinsel, boolean) belirtmemize gerek yoktur.\n\n### var\n\n- Değişken değerleri değiştirilebilir.\n- Aynı isimle tekrardan tanımlanabilirler.\n- var ile tanımlanan değişkenler global scope veya function scope'tur. Global scope'ta tanımlanan değişkenlere her yerden ulaşılabilir. Function içerisinde tanımlanan değişkenlere ise tanımlı olduğu fonksiyonda ulaşılabilir.\n\n```jsx\n// var ile değişken tanımlamak\nvar serverName = \"zehracakir\";\nconsole.log(serverName);\n```\n\n### let\n\n- Değişken değerleri değiştirilebilir.\n- Aynı isimle tekrardan aynı blokta tanımlanamaz. Farklı block'larda aynı isimle tanımlanabilir.\n\n```jsx\n// let ile değişken tanımlamak\nlet serverName;\nconsole.log(serverName);\n\n// let ile değişkene bilgi atamak\nserverName = \"https://github.com/zehracakir\";\nconsole.log(serverName);\n\n//let ile değişkene bilgi atayarak tanımlamak\nlet password = \"1234\";\nconsole.log(password);\n\n// değişken ataması yapmadan önce kullanmaya çalışmak\n/* console.log(fullName);\n let fullName = \"Zehra Çakır\";\n--\u003e yukarıdaki kullanımda hata alırız. \nDeğişkeni tanımlamadan ekrana bastırmaya çalıştık.\nBunu var ile tanımlasak hatayı göremezdik sadece undefined derdi.*/\n\nlet fullName = \"Zehra Çakır\";\nconsole.log(fullName);\n\n// let kullandığımızda hataları daha net şekilde görebiliyoruz. var da böyle bir imkanımız olmuyor.\n\n//let ile tanımlanan değişkenin içindeki bilgiyi değiştirmek\nfullName = \"Lorem Ipsum\";\nconsole.log(fullName);\n// let ile tanımlanan değişkenlerin içlerindeki bilgiler birden fazla kez değiştirilebilir\n\n// let ile birleştirme veya ekleme işlemi\nfullName = \"Zehra\"; + fullName\nconsole.log(fullName);\nconsole.log(fullName + \" Deneme\");\nfullName += \" Yeni Eklenen Bilgiler\";\nconsole.log(fullName);\n\nfullName = \"Sıfırlandı\";\nfullName += \" ve yeni fullName\";\nconsole.log(fullName);\n```\n\n### const\n\n- const ile tanımlanan objelerin özellikleri (properties) değiştirilebilir fakat objenin kendisi değiştirilemez. Diziler içinde aynısı geçerlidir. Dizi değerleri değiştirilebilir fakat dizinin kendisi değiştirilemez.\n\n```jsx\n// const ile değişkeni boş tanımlamaya çalışmak\nconst serverPassword = \"\"; // içi boş bir değişken tanımladım\nconsole.log(serverPassword);\nconst  SERVER_PASSWORD = \"sdü\";\nconsole.log(SERVER_PASSWORD); \n// SERVER_PASSWORD = \"1234\"; \n// Bu kısımda hata alırız. Çünkü const ile tanımlanan değişkenlerin içerikleri daha sonradan DEĞİŞTİRİLEMEZ. Değiştirilebilecek bir değişken istersek bunu let ile tanımlayabiliriz.\n```\n\n## Number Veri Türü Kullanımı\n\nJavaScript dili weakly-typed yani güçsüz türlü bir dildir. Değişkenlerin ve parametrelerin türlerini bildirmek gerekmez. Tür kullanımdan dolaylı olarak çıkartılır.\n\n- Number veri türü tanımlamak :\n\n```jsx\n// number veri türü tanımlamak\nlet price = 100;\nlet tax = 0.18;\nlet priceTax = price * tax;\nlet total = price + priceTax;\nconsole.log(\"fiyat :\",price,\n            \"kdv oranı : \",tax,\n            \"kdv tutarı: \",priceTax,\n            \"Toplam Fiyat\",total);\n```\n\n- Aritmetik işlemler yapmak :\n\n```jsx\n// toplama işlemi\nlet counter = 320;\ncounter = counter + 1; // uzun yöntem\nconsole.log(counter);\n\ncounter +=1;\nconsole.log(counter); // kısa yöntem\n\ncounter++;\nconsole.log(counter); // en kısa yöntem\n\n// çıkarma işlemi\ncounter--; // 1 azaltma\nconsole.log(counter);\ncounter -=1; // 1 azaltma\nconsole.log(counter);\n\n// çarpma işlemi\ncounter *=10; \nconsole.log(counter);\n\n// bölme işlemi\ncounter /=10; \nconsole.log(counter);\n\n// işlem önceliği\nconsole.log(2 + 3 * 10); // 32\nconsole.log((2 + 3) * 10); // 50\n\n// mod(kalan) alma %\n// Örnekler üzerinden gidelim \n// 1-) sayı tek mi çift mi --\u003e 0 ise çift, 1 ise tek\nconsole.log(3 % 2); // kalan 1 olur\nconsole.log(14 % 2); // kalan 0 olur\n\n// 2-) 8 ürün alan koliye tüm ürünler sığıyor mu ?\nconsole.log(\"kalan ürün sayısı :\",18 % 8);\n\n// üs alma **\nconsole.log(\"normal çarpma ile\",2 * 2 * 2 * 2);\nconsole.log(\"üs alma ile\",2 ** 4);\n\n// aşağı yuvarlama işlemi --\u003e Math.floor()\nconsole.log(\"aşağı yuvarlama sonucu:\",Math.floor(1.9)); // 1\n\n// // yukarı yuvarlama işlemi --\u003e Math.ceil()\nconsole.log(\"yukarı yuvarlama sonucu:\",Math.ceil(1.9)); // 2\n\n// yakına yuvarlama işlemi --\u003e Math.round()\nconsole.log(\"yakına yuvarlama sonucu:\",Math.round(1.5)); // 2\nconsole.log(\"yakına yuvarlama sonucu:\",Math.round(1.4)); // 1\n```\n\n- String i number a dönüştürme\n\n```jsx\nlet stringNumber = \"11\";\nconsole.log(stringNumber);\nlet newNumber = Number(stringNumber);\nconsole.log(newNumber); // türü değişti\n```\n\n## **Boolean Veri Türü Kullanımı**\n\nBoolean veri tipleri sadece iki değerden birini ifade eder. Bunlar true ya da false'dur.\n\n- 0 ve 1 i anlamak\n\n```jsx\nlet isActive = false; // 0\nisActive = true; // 1\nconsole.log(isActive); // true\n```\n\n- True ve false’u neye göre döndürür\n\n```jsx\nlet userName;\nlet isUserName = Boolean(userName); // false \nconsole.log(isUserName); // false döndü\nconsole.log(Boolean(\"11\")); // true\nconsole.log(Boolean(\"\")); // false\n/*\n Boolean içi boş olursa false, dolu olursa true döndürür.\n*/\nuserName = \"user\";\nconsole.log(\"User Name :\",Boolean(userName)); //true\n\n// 0 ve -0 da Boolean false döndürür.\nconsole.log(Boolean(0)); // false \nconsole.log(Boolean(-0)); // false\nconsole.log(Boolean(-0.1)); // true\n\nconsole.log(Boolean(5 == 5)); // 5, 5 e eşit mi --\u003e true\nconsole.log(Boolean(5 == 10)); // 5, 10 a eşit mi --\u003e false\n```\n\n- Karar yapılarında boolean kullanırız.\n\n```jsx\nconsole.log(\"büyük mü\",Boolean(userName.length \u003e 0)); // true\n```\n\n### **Boolean Veri Türü JavaScript'te Neyi İfade Eder?**\n\nJavaScript'te boolean veri türü, primitive yani ilkel veri tiplerinden bir tanesidir. Mantık olarak diğer dillerle tamamen aynıdır. If-else, switch, while gibi koşullu ifadelerle birlikte oldukça sık bir şekilde kullanılır. Boolean veri türü Mozilla Firefox, Google Chrome, Safari, Opera ve Internet Explorer tarafından desteklenmektedir.\n\n### **Değişken Türünü Kontrol Etmek ve Değişken Türünü Değiştirmek**\n\n- typeof() ile verilerimizin türlerini kontrol edebiliriz.\n\n```jsx\n// veri turunu ogrenmek \"typeof\",\nlet price = 111;\nlet stringPrice = \"111\";\nlet hasPassword = true;\n\nconsole.log(\n    \"price :\",typeof(price)\n)\nconsole.log(\n    \"stringPrice :\",typeof(stringPrice)\n)\nconsole.log(\n    \"hasPassword :\",typeof(hasPassword)\n)\n```\n\n- typeof() u Console da da kullanabiliriz.\n\n![Untitled](images/Untitled%201.png)\n\n- === ifadesiyle typeof() içinde verilen veriyle türlerinin aynı olup olmadığını kontrol edebiliriz.\n\n![Untitled](images/Untitled%202.png)\n\n- Bir başka şekilde isInteger(), isFinite() veya isNaN() kullanarak da kontrol sağlayabiliriz.\n\n```jsx\n//isInteger( ) yöntemi, sayıların tam sayı olup olmadığını belirler.\nNumber.isInteger(123) //true\nNumber.isInteger(-123) //true\nNumber.isInteger(0.5) //false\n\n//isFinite () yöntemi, bir değerin sonlu bir sayı olup olmadığını belirler.\nNumber.isFinite(0) //true\nNumber.isFinite('123') //false\nNumber.isFinite('Hello') //false\nNumber.isFinite(-Infinity) //false\nNumber.isFinite(0 / 0) //false\n\n// Number.isNaN () yöntemi, bir değerin NaN (Not-A-Number) olup olmadığını belirler.\nNumber.isNaN(123) //false\nNumber.isNaN(0) //false\nNumber.isNaN('123') //false\nNumber.isNaN('Hello') //false\nNumber.isNaN('') //false\nNumber.isNaN(true) //false\nNumber.isNaN(undefined) //false\nNumber.isNaN('NaN') //false\nNumber.isNaN(NaN) //true\n```\n\n### **Değişken Türünü Değiştirmek**\n\n- String ifadeleri int ve float a dönüştürmek :\n\n```jsx\n// string(metinsel) bilgileri int ve float a donusturmek\nlet number1 = \"11\";\nnumber1 = parseInt(number1)\nconsole.log(\n    \"number1 :\",parseInt(number1),typeof(number1)\n)\n\nlet number2 = \"11px\";\nnumber2 = parseInt(number2)\nconsole.log(\n    \"number2 :\",parseInt(number2),typeof(number2)\n)\n```\n\n—\u003e ekran çıktımız\n\n![Untitled](images/Untitled%203.png)\n\n- Burada çevrim yapamaz. Başında string bir ifade bulunmasından dolayı.\n\n```jsx\nlet number3 = \"px11px\";\nnumber3 = parseInt(number3)\nconsole.log(\n    \"number3 :\",parseInt(number3),typeof(number3)\n)\n```\n\n—\u003e ekran çıktımız\n\n![Untitled](images/Untitled%204.png)\n\n```jsx\nlet number4 = \"11px\";\nnumber4 = Number(number4)\nconsole.log(\n    \"number4 :\",number4,typeof(number4)\n) // number4 : NaN number\n// Number; sadece sayı varsa çevrim yapabilir. Başka herhangi bir karakter varsa çevrim yapamaz.\nlet number5 = \"11\";\nnumber5 = Number(number5)\nconsole.log(\n    \"number5 :\",number5,typeof(number5)\n) // number5 : 11 number\n\nlet number6 = \"11.4px\";\nnumber6 = parseFloat(number6)\nconsole.log(\n    \"number6 :\",number6,typeof(number6)\n) // number6 : 11.4 number\n```\n\n- Number’dan stringe dönüşüm\n\n```jsx\n// number veri tipinden string e donusturmek\nlet number7 = 55;\nnumber7.toString()\nconsole.log(typeof(number7)); // number \nnumber7 = number1.toString(); // number --\u003e string\nconsole.log(typeof(number7)); // string\n```\n\n## **Template Literals Kullanımı**\n\n- Template literals, birden fazla satır yazabilme imkanı tanıyan ve kod okunabilirliğimizi artıran bir yapıdır.\n\n```jsx\nlet username= \"zehracakir\";\nconst DOMAIN = \"github.com\"\n\n// stringleri birleştirme\nlet email = username +\"@\"+DOMAIN\nconsole.log(\"Merhaba\",username,\"sitemize hoşgeldin\",\"mail adresin:\",email);\n\n// let info = `Merhaba username` // istedigimiz gibi değil çıktısı -\u003e Merhaba username\n// console.log(info)\n\n// template literals ile \nlet info = `Merhaba ${username} sitemize hoşgeldin.\nMail adresin: ${email} \nkisa isminiz: ${username[0]}.\nmail adresinin uzunluğu: ${email.length}\nborcunuz: ${(2+3)*10} TL\ngunun saat bilgisi: ${new Date().getHours()}`\nconsole.log(info) /* Merhaba zehracakir sitemize hoşgeldin.\n                     Mail adresin: zehracakir@github.com \n                     kisa isminiz: z.\n                     mail adresinin uzunluğu: 21\n                     borcunuz: 50 TL\n                     gunun saat bilgisi: 23*/\n```\n\n### Kısaca\n\n- Kod okunabilirliğini kolaylaştırır\n- Stringler içerisinde değişken yazma kolaylığını sağlar\n- Şablon etiketlerini daha az karmaşık hale getirir\n\n## **String Veri Türü İşlemleri**\n\nJavaScript metinlerin tümü “string” veri tipi içinde tutulur ve string veri türü ile ilgili yapabileceğimiz birden fazla işlem vardır.\n\n1. String veri tipinde bulunan bir ifadenin ne kadar uzun olduğunu bulmak için length özelliğimizi kullanırız.\n\n```jsx\nlet email = \"zehracakir@gmail.com\";\nlet firstName = \"Zehra\";\nlet lastName = \"Çakır\";\n\n// string karakter sayısı --\u003e length\nconsole.log(email.length); // 20\n```\n\n1. Metnin içinde aramayı indexOf() ile yaparız.  Aramak istediğimiz değerin index numarasını bize verir.\n\n```jsx\nconsole.log(DOMAIN.indexOf(\".\")); // . nın nerde olduğunu bulduk --\u003e 5.indexteymiş\nconsole.log(DOMAIN.slice(0,DOMAIN.indexOf(\".\"))); // sadece gmail kısmını aldık\n```\n\n1. search(), indexOf() ile aynı sonuçlara ulaşırız genel olarak \"***Regular Expressions***\" işlemleri için çok kullanılan bir metottur.\n\n```jsx\n// String içinde istediğimiz bilgiyi aramak ve yerini bulmak --\u003e search\nconsole.log(email.search(\"@\")); // 10\nconsole.log(email[10]); // @\n// Eğer olmayan bir şeyi arıyorsak bize -1 döndürür.\nconsole.log(email.search(\"github.com\")); // emailde github.com olmadığından -1 döner.\n```\n\n1. Metin içinden almak istediğimiz yerleri slice() ile alırız. Index numaralarını vererek metin içinde bulunan parçayı alabiliriz.\n\n```jsx\n// string içerisinden belli bir aralığı almak \nconsole.log(email.slice(0,10)); // zehracakir\n// domain bilgisi almak\nlet DOMAIN = email.slice(email.search(\"@\")+1); // almak istediğimiz yeri alırken +1 diyip almalıyız. Çünkü son elemanı dahil etmiyor.\nconsole.log(DOMAIN); // gmail.com\n```\n\n1. replace() ile aranan metni istediğimiz metin ile değiştiririz.\n\n```jsx\n// bilgiyi değiştir --\u003e replace \nemail = email.replace('gmail.com','github.com');\nconsole.log(email);\n```\n\n1. concat() ile elimizde bulunan iki string türündeki veriyi birleştiririz.\n\n```jsx\n// string birleştirme\n let firstName1=\"Zehra\";\n let lastName1=\"Çakır\";\n console.log(firstName1.concat(\" \",lastName1)); // Zehra Çakır\n```\n\n1. charAt() ile belirtilen index numarasında yer alan karakteri buluruz.\n\n```jsx\nconsole.log(firstName.charAt(0)); // Z\n// Burada ilk karakteri bulduk.\n```\n\n1. charCodeAt() ile belirtilen index numarasında yer alan karakterin Unicode değerini buluruz.\n\n```jsx\nvar name1= \"Zehra Çakır\";\n console.log(name1.charCodeAt(1)); // 101\n```\n\n9.  split() ile istenilen metin diziye çevirebiliriz. Kullanılan parametre ile metnin nasıl parçalanacağı belirtiriz.\n\n```jsx\nvar name2= \"Zehra,Çakır\";\nconsole.log(name2.split(\",\")); // ['Zehra', 'Çakır']\n```\n\n1. String bir ifadenin içerisinde, aradığımız karakterin yerini bulmak için [ ] de kullanabiliriz.\n\n```jsx\nconsole.log(firstName[0]); // Z\n```\n\n1. String bir ifadeyi tamamen büyük veya küçük harf yapmak istiyorsak. Büyük harf için toUpperCase(), küçük harf için ise toLowerCase() metotlarını kullanırız.\n\n```jsx\n// buyuk harf - kucuk harf  donusumleri\nfirstName=firstName.toUpperCase(); // hepsini büyük harfe çevirdik\nconsole.log(firstName); // ZEHRA\n\nfirstName=firstName.toLowerCase(); // hepsini küçük harfe çevirdik\nconsole.log(firstName); // zehra\n```\n\n1. İlk harfi büyük diğerlerini küçük yapmak.\n\n```jsx\nlet fullName = `${firstName[0].toUpperCase()}${firstName}`; // Zzehra --\u003e olmadı \nconsole.log(fullName);\nlet fullName1 = `${firstName[0].toUpperCase()}${firstName.slice(1)}`; // Zehra \nconsole.log(fullName1);\n```\n\n1. Aldığımız veri istediğimiz bilgiyle başladı mı? Veya istediğimiz bilgiyle bitti mi? Bu durumu kontrol etmek için startsWidth() ve endsWidth() metodunu kullanırız.\n\n```jsx\nconsole.log(email.startsWith(\"zehra\")); // true\nconsole.log(email.endsWith(\"@\")); // false\n```\n\n## **Document Object Model (DOM) Nedir?**\n\n **Document Object Model**, programların ve komut dosyalarının bir belgenin içeriğine, yapısına ve stiline dinamik olarak erişmesine ve güncellemesine izin veren bir platform ve dilden bağımsız bir arayüzdür.\n\nBir HTML belgesini iç içe geçmiş kutular olarak hayal edebilirsiniz. \u003cbody\u003e ve \u003c/body\u003e gibi çevreleyen etiketler, sırayla başka etiketler veya metinler içeren diğer etiketleri kapsar.\n\nTarayıcının belgeyi temsil etmek için kullandığı veri yapısı bu şekli izler. Her kutu için, hangi HTML etiketini temsil ettiği ve hangi kutuları ve metni içerdiği gibi şeyleri bulmak için etkileşime girebileceğimiz bir nesne vardır. Bu temsil, **Document Object Model** veya kısaca **DOM** olarak adlandırılır.\n\nDOM’da HTML ile hazırladığınız sayfa, ”document”; bu document'in içine yerleştirdiğiniz her türlü öğe ise ”element” olarak adlandırılır. DOM'da nesnelerin birer element olarak kullanılabilmesi için hiyerarşik bir düzen izlenerek çağrılmaları gerekir. HTML’deki her bir elamanın birbiri ile hiyerarşik bir yapı oluşturması ile oluşur. DOM bir ağaç dizini gibi bütün dokümanları birbirine bağlar.\n\n![Untitled](images/Untitled%205.png)\n\n- DOM ile yapabileceğimiz işlemlere birkaç örnek kod\n\n```jsx\nconsole.log(document.URL); // http://127.0.0.1:5500/index.html\nconsole.log(document.location); // host, hostname vs şeylere ulaşırız.\nconsole.log(document.location.hostname); // 127.0.0.1\nconsole.log(document.location.pathname);  // /index.html\nconsole.log(document.body); // dokumanin body kısmına ulaşırız\nconsole.log(document.head); // dokumanin head kısmına ulaşırız\nconsole.log(document.baseURI); // http://127.0.0.1:5500/index.html\n```\n\n- Ayrıca !\n\n```jsx\ndocument.body.style.backgroundColor = \"aqua\"; // document üzerinden body nin arka plan rengini aqua olarak değiştirdik\n```\n\n! Arkaplan rengi değiştirme vs gibi işlemleri CSS ile de yapabiliriz fakat Javascript bize dinamiklik sağlar.\n\n- **Dosya oluşturmak, elementleri ve içeriklerini silme/ekleme gibi fonsiyonları vardır.**\n\n```jsx\n\u003chtml\u003e\u003chead\u003e\u003ctitte\u003eForm\u003c/titte\u003e\u003cscript type=\"text/javascript\"\u003edocument.formAdi.isim.value = 'Baran Balin';\n           document.getElementbyId('yas').value = '25';\n       \u003c/script\u003e\u003c/head\u003e\u003cbody\u003e\u003cform name=\"formAdi\" method=\"post\" action=\"\"\u003e\u003cinput type=\"text\" name=\"isim\"\u003e\u003cinput type=\"text\" id=\"yas\"\u003e\u003c/form\u003e\u003c/body\u003e\n\u003c/html\u003e\n```\n\nHTML içerisine yerleştirilmiş öğeleri çağırmak için, içinde bulunduğu diğer öğelerin çağrılması bir yöntem iken, bir öğeye bir id vererek bu id üzerinden çağırmak da bir başka yöntemdir.\n\nJavascript kodumuzun ilk satırında metin kutusunun değeri hiyerarşik olarak çağırılmış ve değiştirilmiştir**.** İkinci satırda ise hiyerarşik yapı daha az önemsenerek Javascript içindeki DOM’un temellerinden olan ”getELementbyId” metodu kullanılmıştır.\n\n### **DOM içerisinden Etiket ve ID ile Öğe Seçimi**\n\nDocument Object Model'de öğeler birden fazla yöntem ile seçilebilir.\n\n1. getElementById ile\n\n```jsx\n\u003cul id=\"list\"\u003e\n        \u003cli\u003e\n            \u003ca href=\"#\"\u003eLink Bilgisi\u003c/a\u003e\n        \u003c/li\u003e\n    \u003c/ul\u003e\n```\n\nYukarıda verilen Link Bilgisini getElementById ile seçelim:\n\n```jsx\n//innerHTML ile içerisinde yazan bilgiye ulaşırız. \n//getElementBYId ile öge secimi\nlet title=document.getElementById('title')\n//console.log(title.innerHTML=\"Deneme\") //hem eşitleme hem de yazdırma işlemi yapar, çok iyi bir kullanım değil\ntitle.innerHTML=\"Degisen bilgi\" //içerisindeki bilgiyi değiştirdik\nconsole.log(title.innerHTML) //değişen bilgiyi ekrana yazdırdık\n```\n\n1. getElementsBytTagName ile\n\nElemanları etiket isimlerine göre seçmek için getElementsByTagName() metodu kullanılır. Birden çok elemente ulaşmak amacı ile kullanılır. Girdi olarak bir html elementi alır ve buna uygun bir HTMLCollection döndürür.\n\n```jsx\n\u003ch2 id=\"title\"\u003eMerhaba Dünya\u003c/h2\u003e\n```\n\nYukarıda verilen Merhaba Dünya bilgisini getElementsByTagName ile seçelim:\n\n```jsx\nlet h2=document.getElementsByTagName('h2')  //çok efektif bir çözüm olmadı\n```\n\ngetElementsByTagName ile sayfadaki tüm etiketleri de getirebiliriz:\n\n```jsx\ndocument.getElementsByTagName('*')\n// Çıktı: HTMLCollection(33) [html, head, meta, link#.....\n```\n\n1. getElementsByName ile\n\nElemanları isimlerine göre getirmek için getElementsByName() metodu kullanılır. Elemanların name değerlerine göre bir Nodelist objesi döndürür.\n\n```jsx\n\u003cinput type=\"text\" name=\"e-posta\"\u003e\n\u003cinput type=\"tel\" name=\"telefon\"\u003e\n\u003cinput type=\"date\" name=\"tarih\"\u003e\n```\n\nYukarıda verilen e-posta bilgisini getElementsByName ile seçelim:\n\n```jsx\nconst emails = document.getElementsByName('e-posta');\n// Çıktı: NodeList [input]\n```\n\n1. querySelector ile\n\nquerySelector() yöntemi, CSS seçicilere dayalı olarak DOM'dan html elemanlarını seçmenize izin veren iki modern JavaScript yönteminden biridir. Bu yöntem ile hem css class'larını hem de id'lerini kullanabilirsiniz. Bunu yaparken class için ön ek olarak nokta **\".\"**, id'ler için kare **\"#\"** kullanmanız gerekir. Sayfada eşleşen ilk elemanı size döndürecektir. Belirtilen elemanın eşleşememesi durumunda geriye null dönecektir.\n\n```jsx\n\u003cul id=\"list\"\u003e\n        \u003cli\u003e\n            \u003ca href=\"#\"\u003eLink Bilgisi\u003c/a\u003e\n        \u003c/li\u003e\n    \u003c/ul\u003e\n```\n\nYukarıda verilen Link Bilgisini querySelector ile seçelim:\n\n```jsx\n//querySelector ile öge secimi\nlet link=document.querySelector(\"ul#list\u003eli\u003ea\") //querySelector bir tane eleman seçebilir.querySelectorAll hepsini seçer.\n// console.log(link.innerHTML)\n// link.innerHTML=\"Yeni link bilgisi\"\n\nlink.innerHTML+=\" eklenen bilgi\" //var olan link içerisindeki bilgiye ekleme yapar\n\nlink.style.color=\"red\" //renk bilgisi eklemek\nlink.classList.add('btn') //class eklemek\n```\n\n1. querySelectorAll ile\n\nquerySelectorAll() metodu, querySelector() metodu ile aynı mantık ile çalışır tek farkı eşleşen ilk elamanı döndürmek yerine eşleşen tüm elemanları bir NodeList objesi olarak döndürmesidir.\n\n```jsx\nconst elems = document.querySelectorAll('.bird, .animal');\nconsole.log(elems.length); // 4\n```\n\nÖğrendiğimiz bu 5  metodu birlikte kullanabiliriz.Önce tek bir elemanı seçerek ardından içinde ikinci bir sorguyu yapabiliyoruz.\n\n### **Prompt ile Kullanıcıdan Nasıl Bilgi Alınır?**\n\nPrompt() kullanıcıya soru sorup klavyeden girilen bilgiyle işlem yapan, o bilgiyi döndüren bir window metodudur. alert() gibi Html üzerinde, HTML sayfasından bağımsız çalışır ve karşımıza diyalog penceresi şeklinde çıkar.\n\n```jsx\nlet fullName=prompt(\"lütfen adınızı giriniz: \")\nconsole.log(fullName) //kullanıcıdan adını aldık ve bunu console da görüntüledik\n```\n\nKullanıcının da görmesini istersek\n\n```jsx\n\u003ch1 id=\"greeting\"\u003eFront-End\u003c/h1\u003e\n//id ekledik\n```\n\n```jsx\nlet fullName=prompt(\"lütfen adınızı giriniz: \")\nlet greeting=document.querySelector(\"#greeting\") //kullanıcı da bunu görsün istiyorsak\ngreeting.innerHTML=`${greeting.innerHTML} \u003csmall style=\"color:red\"\u003e${fullName}\u003c/small\u003e\n```\n\n- Ekran Görüntüsü:\n\n![Untitled](images/Untitled%206.png)\n\n![Untitled](images/Untitled%207.png)\n\n- Prompt mantığı: Kullanıcı **Tamam** düğmesini tıkladığında, giriş alanına girilen metin döndürülür. Kullanıcı herhangi bir metin girmeden Tamam'ı tıklarsa, boş bir dize döndürülür. Kullanıcı **İptal**\n düğmesini tıklarsa, bu işlev boş döndürür.\n\n### **Liste İçerisindeki Öğeye Erişmek ve Yeni Öğe Eklemek**\n\nJavaScript’de çoğu zaman HTML elementlerine JavaScript ile müdahale ederiz. Bazen doğrudan bir elemente ulaşmaya çalışıyorken bazen spesifik bir liste öğesine ulaşmamız gerekebilir.\n\nListemiz: \n\n```jsx\n\u003cul class=\"sinif\" id=\"list\"\u003e\n        \u003cli\u003eZehra\u003c/li\u003e\n        \u003cli\u003eBilgisayar\u003c/li\u003e\n        \u003cli\u003eKod\u003c/li\u003e\n    \u003c/ul\u003e\n```\n\n- **Öğelere Erişim Yöntemleri**\n    - Kimlik (id) ile öğeye ulaşmak\n    - Sınıf (class) ile öğelere/öğeye ulaşmak.\n    - Etiket adı ile öğelere ulaşmak.\n- getElementById ile\n\n```jsx\nlet item = document.getElementById(\"list\");\n```\n\nYukarıda önce bir değişken tanımlayıp sonrasında ise list id değerine sahip elementi seçtik.Sayfamızda eğer ki bu id’ye sahip bir element var ise bize o elementi döndürür.\n\n- getElementsByClassName ile\n\n```jsx\nlet item2 = document.getElementsByClassName(\"sinif\");\n```\n\nBurada ise item isminde bir değişken tanımlayıp sinif sınıfına sahip olan tüm öğeleri alıyoruz. Burada önemli nokta ise getElementsByClassName i bize class’a sahip tüm öğeleri nodeList olarak döndürür.\n\n- Seçtiğimiz sınıfa müdahale edelim.\n    \n    item2 olarak tanımladığımız değişkenimizin içerisinde döngü yardımı ile dönelim ve sinif\n     sınıfına sahip olarak öğelerin renklerini değiştirelim. Döngü kullanmamızın bir sebebi de getElementsByClassName metodunun bize nodeList dönüyor olması.\n    \n    ```jsx\n    for (var i = 0; i \u003c item2.length; i++) { \n         item2[i].style.color  = \"red\"; \n    }\n    ```\n    \n- querySelector ile\n\n```jsx\nlet item =document.querySelector(\"ul#list\u003eli:last-child\") //en sondaki li yi döndürür\nconsole.log(item)\n\nlet item1 =document.querySelector(\"ul#list\u003eli:first-child\") //en bastaki li yi döndürür\nconsole.log(item1)i\n\nlet item2 =document.querySelector(\"ul#list\u003eli:first-child\").innerText //en baştaki li nin icerisinde yazan text i döndürür\nconsole.log(item2)\n\nlet item3 =document.querySelector(\"ul#list\u003eli:first-child\").innerText=\"değistii\"//en bastaki li nin icerisinde yazan text i değistirir döndürür\nconsole.log(item3)\n\nlet item4 =document.querySelector(\"ul#list\u003eli:first-child\")//en bastaki li nin icerisinde yazan text degistirir ve döndürür\nitem4.innerHTML=\"ilk öge değisti\"\n\nlet item5 =document.querySelector(\"ul#list\u003eli:last-child\")//en sondaki li nin icerisinde yazan text degistirir ve döndürür\nitem5.innerHTML=\"Son öge değisti\"\n```\n\nYeni bir eleman eklemek için:\n\n```jsx\nlet ulDOM=document.querySelector(\"ul#list\")\nlet liDOM=document.createElement('li') // createELement ile eleman ekliyoruz\nliDOM.innerHTML=\"Kendi olusturdugum li\"\nulDOM.append(liDOM) //append ile oluşturduğumuz elemanı en sona ekleriz\n\nulDOM.prepend(liDOM) //prepend ile oluşturduğumuz elemanı en başa ekler\n```\n\n### **DOM'a CSS Class Bilgisi Eklemek veya Çıkarmak**\n\n- **ClassList**\n\n```jsx\nlet greeting =document.querySelector(\"#greeting\")\nconsole.log(greeting.classList) //şu anda icerisi bos\n\n//add() : HTML öğesine bir veya daha fazla class ekler.\ngreeting.classList.add(\"text-primary\") //html dosyasında style ile renk ekledik\ngreeting.classList.add(\"title\")\ngreeting.classList.add(\"new-info\",\"second-class\") //bu şekilde birden fazla class ekleyebiliriz\n\n//remove() : HTML öğesinden bir veya daha fazla class'ı siler.\ngreeting.classList.remove(\"title\",\"second-class\") //birden fazla class silebiliriz bu şekilde\n//olmayan bir class adı yazarsak hata döndürmez\n\n//item() : HTML de class'ı verilen index sırasına göre döndürür. Eğer index, class length'inden (sayısından) daha büyük veya length'ine eşit olursa undefined döner.\nlet div = document.querySelector('#greeting');\ndiv.classList.item(0);\n\n//contains() : Element verilen class'ı içeriyorsa true, içermiyorsa false döner. Bu sayede bir işlem yaptırmadan önce kontrol edebiliriz.\nlet div0 = document.querySelector('#greeting');\ndiv.classList.contains('zehra')\n\n//Toggle() : classList.add() ve classList.remove() yöntemini aynı anda çağırmak yerine classList.toggle() yöntemini kullanılabilir.\nlet div1 = document.querySelector('#greeting');\ndiv.classList.toggle('visible');\n\n//replace() : Bir CSS sınıfını başka bir sınıfla değiştirmek için kullanılır.\nlet div2 = document.querySelector('#greeting');\ndiv.classList.replace('text-primary','block');\n//length() : Bir öğede bulunan sınıf sayısını bilmemizi sağlar.\n\nconsole.log(greeting.classList)\n```\n\n## Karar Yapıları / Koşullar\n\n### **Karşılaştırma Operatörleri**\n\nKarşılaştırma operatörleri, değişkenler veya değerler arasındaki eşitlik ve farkı bulmak için kullanılır. Bu iki değerin karşılaştırmasını yaparak true (doğru) veya false (yanlış) sonucu verir.\n\n- ****`==` Eşitse**\n\n```jsx\nlet price=\"100\" //string turunde\n\nconsole.log(price==1) // false\nconsole.log(price==100) //true\n```\n\n- ****`===` Hem değeri hem de türü eşitse**\n\n```jsx\nlet price=\"100\"\n\nconsole.log(\"=== : \",price===1) //false : turu de degeri de esit degil\nconsole.log(\"=== : \",price===100) // false : degeri esit fakat turu esit degil\n```\n\n- ****`!=` Eşit değilse**\n\n```jsx\nlet price=\"100\"\n\nconsole.log(price!=1) //true : price ın degeri 1 e esit degildir.\n```\n\n- ****`\u003c` Küçükse**\n\n```jsx\nlet price=\"100\"\n\nconsole.log(\"price\u003c100\",price\u003c100) //false\n```\n\n- ****`\u003c=` Küçük veya eşitse**\n\n```jsx\nlet price=\"100\"\n\nconsole.log(\"price\u003c=100\",price\u003c=100) //true\n```\n\n- ****`\u003e` Büyükse ve `\u003e=` Büyük veya eşitse**\n\n```jsx\nlet price=\"100\"\n\n// \u003e Buyukse \nconsole.log(\"price\u003e100\",price\u003e100) //false\n\n// \u003c= Buyuk veya esitse\nconsole.log(\"price=\u003e100\",price\u003e=100) //true\n```\n\n### **Mantıksal Operatörler**\n\nJavaScript mantıksal operatörleri kullanarak karşılaştırma işlemini birden fazla koşula göre yapabiliriz. Birden fazla koşulu karşılaştırıp operatörün işlevine göre true (doğru) veya false (yanlış) sonucunu verir.\n\n- ****`\u0026\u0026` ve**\n\n```jsx\nlet price=\"100\"\nlet user=\"zehra\"\n\nconsole.log( price==100 \u0026\u0026 user == \"zehra\") //true : tum sartlar dogruysa true\n```\n\n- ****`||` veya**\n\n```jsx\nlet price=\"100\"\nlet user=\"zehra\"\n\nconsole.log( price==100 || user == \"cakir\")//true : herhangi bir sart dogruysa true\n```\n\n- ****`!` değil**\n\n```jsx\nlet price=\"100\"\nlet user=\"zehra\"\n\nconsole.log( !(price==100 \u0026\u0026 user == \"zehra\")) //false\n```\n\n### **Koşul Yapısı Kullanımı (if / else)**\n\nIf else yapısı içerisinde koşulun sağlandığı kodlar **if** içerisinde yer alırken, koşulun sağlanmadığı kodlar ise **else** içerisinde yer alır.\n\nEğer ilk koşul yanlışsa başka bir koşul belirtmek amacıyla **else if** kullanılır. If/Else kullanımı aşağıdaki gibidir:\n\n```jsx\n// eger kullanici bilgisi varsa ekrana ismini yazdır\n/* eger(username.length\u003e0)\n    {\n        console.log(username)\n    }degilse{\n        console.log(\"bilgi yok\")\n    }\n*/\n\nlet username=prompt(\"Kullanıcı adınızı giriniz : \")\nif(username.length\u003e0){ //if kismi her zaman true ise calisir.\n    console.log(`Kullanıcı adınız : ${username}`)\n}\nelse{\n    console.log(\"bilgi yok\")\n}\n```\n\n- Hackerrank → ****Day 3: Intro to Conditional Statements****\n\n```jsx\n/*\nBir tamsayı verildiğinde, n, aşağıdaki koşullu eylemleri gerçekleştirin:\nn tek ise, Weird yazdır\nn çift ise ve to dahil aralığındaysa, Not Weird yazdırın\nn çift ise ve to dahil aralığındaysa, Weird yazdırın\nn çift ve değerinden büyükse, Not Weird yazdırın\nn'nin tuhaf olup olmadığını yazdırmak için düzenleyicinizde verilen saplama kodunu tamamlayın\n*/\nfunction main() {\n    const N = parseInt(readLine().trim(), 10);\n    if(N%2==1){\n        console.log(\"Weird\")\n    }\n    if((N%2==0) \u0026\u0026 ((N\u003e2)\u0026\u0026(N\u003c=5))){\n        console.log(\"Not Weird\")\n    }\n    if((N%2==0) \u0026\u0026 ((N\u003e6)\u0026\u0026(N\u003c=20))){\n        console.log(\"Weird\")\n    }\n    if((N%2==0) \u0026\u0026 (N\u003e20)){\n        console.log(\"Not Weird\")\n    }\n}\n```\n\n### **Çoklu Koşul Yapısı Kullanımı**\n\nJavaScript'te if-else koşul yapısındaki koşulların arttığı durumlarda kod okunabilirliğini artırmak ve daha performanslı sayılabilecek bir yapı olan **switch** yapısı tercih edilebilir.\n\nSwitch yapısı belirli bir değere göre hangi kodun çalıştırılacağını yönetmek için kullanılır. Bir switch yapısı tanımlarken switch keywordunu kullanırız ve ardından parantez içerisinde bir değer ya da değişken tanımlarız. Sonrasında  switch ile birlikte açılan blok içerisinde yerine getirilmesi gereken koşulları **case** ifadeleriyle birlikte tanımlayabiliriz, tanımlanmış her bir case etiketinden sonra `:` koymalıyız.\n\nCase tanımlamalarından sonra çalışmasını istediğimiz deyimleri belirtebiliriz. Program akışında switch ifadesine verilmiş değeri sağlayan case etiketine geçerek ilgili deyimleri çalıştıracaktır, bu kontrol switch ifadesine verilmiş değerlerin tanımlanmış case etiketleri ile değer ve tip kontrolünün (===) otomatik tip dönüşümü olmadan yapılmasıdır.\n\n- Switch\n\n```jsx\nswitch(ifade) {\n  case a:\n    // kod bloğu\n    break;\n  case b:\n    // kod bloğu\n    break;\n  default:\n    // kod bloğu\n}\n```\n\n### **Ternary Operatör ( Koşul ? Doğruysa : Yanlışsa) ile If Kullanımı**\n\n**Ternary Operator** 3 adet parametre alan tek JavaScript operatörüdür. If kullanarak kontrol etmek istediğimiz koşullarda ternary operator kullanarak satır sayısı olarak avantaj sağlayabiliriz.\n\n**Ternary operatörünün aldığı 3 parametre şu şekildedir:**\n\n- İlk önce bir condition belirtiriz ve sonrasında hemen bir *`?`* koyarız\n- Sonrasında, eğer yazdığımız condition doğru ise ne yapmak istediğimizi belirtir ve sonuna *`:`* koyarız\n- Ve sıra geldi koşulumuz yanlış ise ne yapmak istediğimize.\n\n```jsx\nlet userName=prompt(\"Kullanıcı Bilginizi yazınız\")\nlet info =document.querySelector(\"#info\")\n\n/* ternary kullanımı : \nkosul ? dogruysa : yanlissa\n*/\ninfo.innerHTML=`${userName.length\u003e0?userName:\"kullanıcı bilginiz bulunamadı\"}`\n```\n\n### **Koşullarla Çalışmak-**Bölüm sonu Egzersizi\n\n1. Prompt ile aldığın bilgiye göre aşağıdaki yapııyı kullanarak notun bilgisini #info ya yazdır\n\nAA→90-100\n\nBA→85-89\n\nBB→80-84\n\nCB→75-79\n\nCC→70-74\n\nDC→65-69\n\nDD→60-64\n\nFD→50-59\n\nFF→0-49\n\n1. Kullanıcının girdiği verinin istediğimiz aralıkta olup olmadığını kontrol et \n2. FF bilgisinde üzgün surat ikonu, diğerlerinde gülücük ikonu olsun\n3. FF class bilgisi text-danger, diğerlerinin ise text-primary olsun\n\n```jsx\nconst gulucuk=`\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-emoji-smile\" viewBox=\"0 0 16 16\"\u003e\n\u003cpath d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\"/\u003e\n\u003cpath d=\"M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z\"/\u003e\n\u003c/svg\u003e`\nconst uzgun=`\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-emoji-frown\" viewBox=\"0 0 16 16\"\u003e\n\u003cpath d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\"/\u003e\n\u003cpath d=\"M4.285 12.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z\"/\u003e\n\u003c/svg\u003e`\n\nlet not=prompt(\"Puanınızı giriniz: \")\nlet harfNotu;\nlet info=document.querySelector(\"#info\")\nif(not\u003e=0 \u0026\u0026 not\u003c=100){ //kapsayici blok\n    harfNotu = gulucuk;\n    info.classList.add('text-primary')\n    if(not\u003e=90){\n        harfNotu+=\" AA\";\n    }\n    else if(not\u003e=85){\n        harfNotu+=\" BA\";\n    }\n    else if(not\u003e=80){\n        harfNotu+=\" BB\";\n    }\n    else if(not\u003e=75){\n        harfNotu+=\" CB\";\n    }\n    else if(not\u003e=70){\n        harfNot+=\"  CC\";\n    }\n    else if(not\u003e=65){\n        harfNotu+=\" DC\";\n    }\n    else if(not\u003e=60){\n        harfNotu=\"  DD\";\n    }\n    else if(not\u003e=50){\n        harfNotu+=\" FD\";\n    }\n    else if(not\u003c50){\n        harfNotu=uzgun;\n        harfNotu+=\"  FF\";\n        info.classList.remove('text-primary')\n        info.classList.add('text-danger')\n    }\n}\nelse{\n    harfNotu=\"Bilgiler doğru değil\"\n}\n\ninfo.innerHTML=`${harfNotu} --\u003e ${not}`\n```\n\n \n\n### Ödev-1\n\nGirişte isminizi isteyip sonra bu ismi karşılama ekranına yerleştirerek o anki saati ve günü gösteren bir ekranın kodlarını yazınız.\n\n```jsx\nconst gulucuk=`\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-emoji-smile\" viewBox=\"0 0 16 16\"\u003e\n\u003cpath d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z\"/\u003e\n\u003cpath d=\"M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z\"/\u003e\n\u003c/svg\u003e`\n\nlet kullanici=prompt(\"Lütfen ad-soyad bilgilerinizi giriniz : \")\nlet kullaniciAdi=document.querySelector(\"#myName\")\nkullanici+=\" \"+gulucuk\nkullaniciAdi.innerHTML=`${kullanici}`\n\nfunction currentTime() {\n    let date = new Date(); \n    let hh = date.getHours();\n    let mm = date.getMinutes();\n    let ss = date.getSeconds();\n    let session = \"AM\";\n    var gunler= [\"Pazar\",\"Pazartesi\",\"Salı\",\"Çarşamba\",\"Perşembe\",\"Cuma\",\"Cumartesi\"];  \n      \n    if(hh \u003e 12){\n        session = \"PM\";\n     }\n    \n     hh = (hh \u003c 10) ? \"0\" + hh : hh;\n     mm = (mm \u003c 10) ? \"0\" + mm : mm;\n     ss = (ss \u003c 10) ? \"0\" + ss : ss;\n      \n     let time = hh + \":\" + mm + \":\" + ss + \" \" + session+\"  \"+gunler[date.getDay()];\n  \n    document.getElementById(\"myClock\").innerText = time; \n    var t = setTimeout(function(){ currentTime() }, 1000); \n  \n  }\n  \n  currentTime();\n```\n\n- Ekran çıktısı :\n\n![Untitled](images/Untitled%208.png)\n\n### **Fonksiyon Nedir? Neden Kullanırız?**\n\nFonksiyonlar adından anlaşılacağı gibi belli bir amacı gerçekleştirmek için oluşturulmuş yapılardır. Koda işlevsellik katmak için bunu sık sık kullanırız. Nasıl tanımlandığına gelecek olursak:\n\n- Fonksiyonu Adlandırmak\n    - İlk olarak `function` ibaresinden sonra fonksiyon adı yazılır. Bir fonksiyonu adı varsa bunlara Normal-Adlandırılmış Fonksiyonlar (**Regular/Named Functions**) deriz.\n    - Burada önemli olan kodun okunabilirliği açısından fonksiyonu işlevine uygun bir biçimde adlandırmaktır, dahası bu bir işlevi belirttiği için fonksiyon adımız bir eylem olmalıdır. Bunun için bazı ön ekler kullanabiliriz.\n    - Örneğin değer almak istediğimiz bir fonksiyon adında ön ek olarak `get` kullanabiliriz.\n    - Bununla birlikte şunu da unutmamalıyız istendiğinde adı olmayan anonim bir fonksiyon da kullanılabilir. Aşağıda bu fonksiyon türünden bahsediliyor :wink:\n\n- ****Fonksiyon Parametreleri ve Gövdesi****\n    - Sonrasında parantezler içinde alacağı parametreler belirlenir. Parametre olması zorunlu olmadığı gibi fazla parametre geçmek kodun okunurluğunu bozabilir.\n    - Parametre alan fonksiyonları kullandığımız zaman o parametrelere kendimiz bir değer atarız. Atanan bu değere argüman adı verilir.\n    \n    ```jsx\n    function hello(isim){ //isim adında bir parametre aldı.\n        console.log(\"Merhaba \"+ isim);\n    }\n    hello(\"Zehra\"); //// bir argüman vererek fonksiyonu çağırdık. Çıktı: Merhaba Zehra\n    ```\n    \n    - Son olarak da süslü parantezleri açarak içine çalışmasını istediğimiz JavaScript kodunu eklenir. Bu JavaScript koduna fonksiyonun gövdesi- body denir.\n- Anonim fonksiyonların (**Anonymous Functions**) bir adı yoktur ve bir değişkene atanarak yeri geldiğinde kullanılırlar.\n    - Değişken adı kullanılarak çağrıldıkları için birden çok anonim fonksiyonu aynı dizide kullanabilirsiniz.\n    - Dahası bir değişkene atandıklarından bu değişkeni başka bir fonksiyonun parametresine koyarak callback (geri arama) yapabilirsiniz.\n    \n    ```jsx\n    var add = function (sayi1,sayi2){  //Anonim bir fonksiyon oluşturduktan sonra bu \n                                       //fonsksiyonu bir değişkene atadık\n            console.log(sayi1+sayi2);\n    }\n    ```\n    \n- **Değer Döndüren Fonksiyonlar**\n    - Bazen fonksiyonun geriye göndereceği değeri ekrana çıktı vermek yerine bir değişken ya da başka bir fonksiyonda daha sonra kullanmamız gerekebilir. Bu gibi durumlarda fonksiyon gövdesinde **return** ifadesini kullanırız.\n- **Callback Fonksiyonlar ve Asenkron Çalışma**\n    - Senkron dediğimiz kavram şunu ifade etmektedir: kodumuz yukarıdan aşağı doğru sırayla işlenir ve bir satırdaki işlem bitmeden bir sonraki satıra geçilmez. Asenkron yapıda ise fonksiyonların birbirlerini beklemelerine gerek yoktur. Uzun zaman alan veya farklı görevleri olan fonksiyonlar aynı anda çalışabilir. JavaScript asenkron yapıdaki bir programlama dilidir. Bunu anlamak için içinde setTimeout(parameter1, parameter2) fonksiyonunu kullanacağız. Bu fonksiyon gördüğünüz gibi iki parametre ile kullanılacak: ilk parametre çalışması istenen fonksiyonu, ikinci parametre ise ne kadar süre sonra çalışması istendiğini ifade ediyor. Örneğin 1000 yazılarak 1000 milisaniye yani 1 saniye gecikme sağlanıyor.\n        \n        ```jsx\n        function printScreen1 (){\n            console.log(“İlk ekran çıktısı”);\n        }\n        \n         function printScreen2 (){\n           setTimeout(function(){\n        console.log(“İkinci ekran çıktısı”)  \n        }, 3000);\n        }\n        \n        function printScreen3 (){\n            console.log(“Üçüncü ekran çıktısı”);\n        }\n        printScreen1();\n        printScreen2();\n        printScreen3();\n        \n        /*\n        Ekran Çıktısı : \n        İlk ekran çıktısı\n        Üçüncü ekran çıktısı\n        İkinci ekran çıktısı\n        */\n        ```\n        \n- **Fonksiyon İfadeleri (Function Expressions)**\n    - JavaScript bir değişkene fonksiyon atanmasına ve daha sonra bu değişkenin fonksiyon olarak kullanılmasına izin verir. Buna fonksiyon ifadeleri denir.\n        - ****Arrow Functions****\n            - Fonksiyon yaratmanın bir diğer yolu ise ES6 ile birlikte hayatımıza giren, daha okunabilir daha basit bir syntax yapısına sahip olan arrow functions yapısıdır.\n            \n            ```jsx\n            let func = (param1, param2, param3) =\u003e expression;\n            ```\n            \n        - ****Recursion****\n            - Bir fonksiyonu çağırdığımız zaman o fonksiyon bir çok fonksiyonu daha çalıştırabilir. Kısaca bir fonksiyon kendisini tekrar çağırıyor ise biz buna recursion diyoruz.\n            \n            ```jsx\n            // bir fonksiyon yazalım bu fonksiyon sayının kuvvetini alsın.\n            // pow(2,2) = 4\n            // pow(2,3) = 8\n            // pow(2,4) = 16 değerlerini verecek şekilde diyelim.\n            \n            // 1.ci yol (recursion patterni ile düşünmeden)\n            function pow(x, n) {\n              let result = 1;\n            \n              for (let i = 0; i \u003c n; i++) {\n                result *= x;\n              }\n            \n              return result;\n            }\n            \n            alert(pow(2, 3)); // 8\n            // recursion ile\n            function pow(x, n) {\n              if (n == 1) {\n                return x;\n              } else {\n                return x * pow(x, n - 1);\n              }\n            }\n            \n            alert(pow(2, 3)); // 8\n            ```\n            \n\n**Fonsiyona Parametre (params) ve Geridönüş (return) Eklemek**\n\nFonksiyonlar, JavaScript'te oldukça önemli bir konudur. Genel işlevi itibariyle diğer programlama dillerindeki fonksiyonlara oldukça benzerler. Fakat, diğer programlama dillerinden farklı olarak JavaScript'te fonksiyonlar, birer nesne olarak değerlendirilir ve çok farklı şekillerde kullanılırlar.\n\nFonksiyonlar, parametreli veya parametresiz fonksiyonlar, değer döndüren veya değer döndürmeyen fonksiyonlar olarak farklı şekillerde oluşturulabilir. Hangi fonksiyon tipini kullanacağımız, yazmak istediğimiz algoritmanın ihtiyacına göre değişmektedir.\n\n```jsx\n// Temel Kurallar \n// 1: Bir fonksiyon bir veya birden fazla parametre alabilir veya hiç almayabilir\n// 2: Bir fonksisyon dışarı bilgi gönderebilir (return) veya göndermeyebilir\n// 3: Mümkünse fonksiyonun bağımlılıklarını azaltmak gerekir\n\nlet firstName= \"Zehra\" //Bizi disariya bagimli kılıyor. Disariya bagimliligi azaltmak icin firstName i fonksiyona parametre olarak gonderebiliriz.\nfunction greeting(){\n    console.log(`Merhaba ${firstName}`);\n}\ngreeting(); //parametre gonderilmeyen fonksiyon\n\nfunction greeting(firstName1){ //default parametre alıyor\n    console.log(`Merhaba ${firstName1}`);\n}\ngreeting(\"Çakır\"); //parametre gonderilen fonksiyon\n\nfunction greeting2(firstName,lastName){\n    let info=`Merhaba ${firstName} ${lastName}`\n    return info\n\n}\ngreeting2(\"Zehra\",\"Ç\") //bu bilgiyi yakalamamız lazım, disariya vermis\nlet info=greeting2(\"Zehra\",\"Ç\")\nconsole.log(info)\n\nfunction domIdWriteInfo(id,info){ //id ile bilgi gonderme\n    let domObject=document.querySelector(`#${id}`)\n    domObject.innerHTML=info;\n}\ndomIdWriteInfo(\"greeting\",greeting2(\"Zehra\",\"Ç\"))\n\nlet htmlInfo=`\u003cspan style=\"color:red\"\u003eColor Red\u003c/span\u003e`\ndomIdWriteInfo(\"greeting\",htmlInfo)\n```\n\n- **Örnek 1** : Herhangi iki sayıyı toplayıp, bir değişkene atayan fonksiyon ifadesini yazalım.\n\n```jsx\nfunction toplama (a , b) // a ve b toplanacak iki sayıyı temsil eden fonksiyon parametreleri(girdileri)\n {  \n    var sonuc = a+b; // Fonksiyonda aldığımız parametrelerle yaptığımız işlem\n\treturn sonuc;  \t// Herhangi iki sayının toplamından elde edeceğimiz işlem sonucunu, return ifadesinden hemen sonra belirtiyoruz.\n }\n```\n\n- Fonksiyonlarda return komutunun 2 önemli işlevi vardır.\n1. Fonksiyonun geri dönüş değerini oluşturur.\n2. Fonksiyonu sonlandırır.\n\nReturn komutundan sonra işlem, değişken veya sabit yazılabilir.\n\n### **Fat Arrow () =\u003e Fonksiyonu Kullanımı**\n\nFat Arrow()⇒ daha az kod satırı ile fonksiyonu yazmamıza olanak sağlıyor.\n\n```jsx\nfunction hello(name){\n    console.log(name)\n}\nhello(\"Javascript\");\n// bu fonksiyonu arrow function olarak aşağıda yazalım\nconst helloFuncV1=(name)=\u003e{\n    console.log(name)\n}\nhelloFuncV1(\"Merhaba\")\n\nconst helloFuncV2=(name,surname)=\u003e{\n    console.log(name,surname)\n}\nhelloFuncV2(\"zehra\",\"çakır\")\n\nconst helloFuncV3=(name,surname)=\u003e{\n    let info=name+surname\n    console.log(info)\n}\nhelloFuncV3(\"zehra1\",\"çakır1\")\n```\n\n- **Arrow fonksiyon kullanırken dikkat etmemiz gereken bazı durumlar vardır.**\n    - **\"return\"** keyword;\n        - Statement'lar süslü{ } parantez kullanılarak yazılırlar. Eğer fonksiyon içerisinde bu parantezlerden varsa return keyword'ü kullanmamız gerekir.\n        \n        ```jsx\n        var kediAcMi = (kedi) =\u003e {\n            if (kedi === 'ac') {\n              return 'Kedi aç';\n            } else {\n              return 'Kedi aç değil';\n            }\n          }\n        ```\n        \n    - **\"this\"** keyword;\n    - this'in arrow fonksiyonlardaki davranışı, regular fonksiyonlardaki davranışından farklıdır. Nasıl ve nerede oluşturulursa oluşturulsun this'in arrow fonksiyonu içerisindeki değeri her zaman parent fonksiyonuna eşittir. Diğer bir deyişle arrow fonksiyonu kendi execution context'ini oluşturmaz. Yani kendisini referans göstermez, her zaman parent'ına bakar.\n\n### **DOM Etkinlikleriyle Çalışmak**\n\n### Etkinlik Ekleme ve Özelliklerine Ulaşma\n\nEtkinlikler yani \"events\"ler uygulanacak eylemlerin ne zaman gerçekleşeceğinin öğrenilmesine ve sonrasında kodun çalıştırılmasına olanak sağlar. Sayfa üzerindeki eylemlere göre bir çok etkinlik eklemek mümkündür.\n\n- Event Listener ile Çalışmak\n\nEvent oluşumu öncelikle nesnenin seçimi ile başlar. Bir butona tıklandığında tıklandı uyarısı ekrana uyarı(alert) olarak ekrana yazdırabiliriz.\n\n1. Metot\n\n```jsx\nelement.addEventListener(event, function);\n// id =button olan nesne seçildi\nconst buton = document.querySelector(\"id\");\n// Nesneye bir etkinlik atandı..\nconst buton = document.querySelector(\"#button\");\n//Burada ilk olarak tip ('click') ,ikinci olarak da fonksiyonun kendisi parametre olarak eklenir\nbuton.addEventListener('click' , function(){\n  alert(\"Buton Tıklandı\");\n       })\n \n// Çıktı : Buton Tıklandı\n```\n\n1. Metot\n\nFonksiyon etkinlik parametresi olarak da çalışabilmektedir. Burada parametre olan \"event\"i bir değişkene atayıp hedef etkinlik tanımlandıktan sonra butona basıldığında hangi butonun tıklandığı bilgisine ulaşılabilmektedir.\n\n```jsx\nelement.addEventListener(event, functionName);\n\n//id =button olan nesne seçildi\nconst button = document.querySelector(\"#button\");\n//nesneye bir etkinlik atandı.Burada ilk olarak tip ('click')\n//ikinci olarak da aşağıda fonksiyon tanımlanır ,fonksiyon ismi parametre olarak girilir. \nbutton.addEventListener('click',btnClicked);\n  function btnClicked(){\n    alert(\"Buton Tıklandı!!!\")\n    }\n\n// Çıktı : Buton Tıklandı!!!\n```\n\n- Mouse Etkinliği\n\nMouse tıklaması ile gerçekleşen etkinliktir.\n\n```jsx\n//id=text olan buton çağrıldı\n//dblclick=çift tıklama etkinliği nesneye atandı,fonksiyon ismi parametre olarak tanımlandı\nconst button = document.querySelector(\"#text\");\nbutton.addEventListener('dblclick',clickFonksiyonu);\n  \n//fonksiyonda id=text olan element çağrılarak innerHTML ile içeriği değiştirildi.\nfunction clickFonksiyonu(){\n  document.getElementById(\"text\").innerHTML = \"NEW FORM\";\n  }\n```\n\n- Klavye Etkinliği\n\nKlavyeden herhangi bir tuşa tıklanması sonucu gerçekleşen etkinliklerdir.\n\n```jsx\n//id=fname olan nesne çağrılarak keyboard değişkenine atandı\nconst keyboard =document.querySelector('#fname');\n//keyboard isimli değişkene \"cut\" etkinliği atandı ve fonksiyon ismi parametre olarak atandı\nkeyboard.addEventListener(\"cut\",cuttingFunction);\n//cuttingFunction isimli fonksiyon ile form inputuna yazılan girdileri klavye ctrl+c ile kesildiğinde etkinlik çalışmaktadır\nfunction cuttingFunction(event){\n  console.log(\"etkinlik tipi: \" , event.type)\n  } \n  \n//console ekranı : etkinlik tipi: cut\n```\n\n## **LocalStorage ile Veri Eklemek, Düzenlemek ve Silme**\n\n### **Local Storage Nedir?,**\n\n- Web Storage terimi web sayfasında yapılan değişikliklerin kaydının tutulmasına karşılık gelmektedir. Örneğin bir web sayfasında kayıt formu doldurulurken sayfanın kapatıldığını veya başka sayfaya geçtiğimizi varsayalım. Kayıt form sayfasına döndüğümüzde kayıtların kaybolması sinir bozucu bir durum olabilir. Bu durumun önüne geçmek için cookie yani çerez dediğimiz sistemlerle geçici veriler saklanabilmekteydi. Ancak bu çerez dosyalarının hem 4 kb ile sınırlı olması hem de üçüncü şahıslar tarafından kolay erişilebiliyor olması Local Storage teriminin yaygınlaşmasına neden olmuştur. HTML 5 ile birlikte web sayfaları veriyi yerel (local) veya tarayıcı (browser) içinde saklayabilir hale gelmiştir. Bu sayede eskiden cookie’ler ile yaptığımız işlemler daha güvenli ve daha hızlı şekilde yapılabilir hale gelmiştir. Daha hızlı çalışmasının nedeni artık veriler her sunucu istediğinde değil, sadece çağırıldıklarında gelmektedir. Veriler **key/value** şeklinde saklanmaktadır ve web sayfaları sadece kendi oluşturdukları verilere erişebilmektedir. Birçok tarayıcı Web Storage API yapısıyla uyumlu şekilde çalışabilmektedir.\n\n### **Nasıl Kullanılır?**\n\n- HTML 5 ile tarayıcılar iki tane yerel kayıt türünü desteklemektedir.\n    - localStorage\n    - sessionStorage\n\nBu iki kayıt türü arasındaki en temel fark localStorage kayıtları zaman aşımı olmaksızın tutarken sessionStorage kayıtları oturum sonlanana kadar ya da veri kaybolana kadar tutmaktadır. Ancak LocalStorage ve SessionStorage kullanıcı tarafından kolayca okunabilir ve değiştirilebilir, bu sebeple uygulama içerisindeki güvenlik ile ilgili verilerin depolanmaması gerekmektedir. LocalStorage ve SessionStorage sayfalar arasındaki ve client işlemleri arasındaki hassas olmayan verilerin taşınmasında tercih edilmektedir.\n\n1. **Veri Ekleme**\n\n```jsx\nwindow.localStorage.setItem(\"key\",\"value\");\n```\n\nEğer daha önce belirttiğiniz bir anahtarı kullanırsanız kaydetmek için veri eski kaydın üzerine yazılacaktır. Veriniz güncellenmiş olacaktır. Veriyi kontrol edip yoksa kaydetmek isterseniz. verinin oluşturulup oluşturulmadığını kontrol etmeniz yeterli olacaktır. Verileri kaydederken sadece string biçiminde kayıt yapıldığını bilmemiz gerekmektedir. Karmaşık bir veriyi kaydetmek istediğinizde toString() metodu çalıştırılmalı ve üretilen değer kaydedilmelidir. Json verisini kaydetmek içinse JSON.stringify() metodu kullanılmalıdır.\n\n1. **Veri Okuma**\n\nlocalStorage üzerinde kayıtlı olan anahtarları okumak için getItem metodu kullanılır.\n\n```jsx\nwindow.localStorage.getItem(\"key\");\n```\n\nEğer veri daha önce kaydedilmeyen bir veriyi okumaya çalıştığımızda null değeri geri dönmektedir.\n\n1. **Veri Silme**\n\nTüm verileri silmek istiyorsak clear() metodunu kullanmamız gerekir. Şayet istediğimiz bir anahtarı silmek istiyorsak removeItem() metodunu kullanmamız gerekmektedir.\n\n```jsx\nlocalStorage.removeItem(\"key\");\nlocalStorage.clear();\n```\n\n### **LocalStorage İçine Farklı Türde Veriler Eklemek**\n\n```jsx\nlet user = {userName: 'zehra', isActive: true}\nlocalStorage.setItem('user', user)\n```\n\nBu kodun localStorage içerisindeki karşılığı [object Object] biçiminde olacak.\n\nBunun sebebi localStorage içindeki bilgilerin key: value şeklinde, yalnızca string türünde değerler ile saklanmasıdır.\n\n- String e çevirelim\n\n```jsx\nlet user = {userName: 'zehra', isActive: true}\nlocalStorage.setItem('userInfo', JSON.stringify(user)\n```\n\n- **LocalStorage'den Veri Alma**\n\nLocalStorage'da değişkenler string olarak tutulduğundan, localStorage'tan user objesini almak istediğimizde userName ve isActive değerlerine erişemeyiz. Stringify işlemini geri almak için parse() metodu kullanılabilir.\n\n```jsx\nlet user={userName:\"zehracakir\",isActive:true}\nuser=localStorage.getItem(\"user\")\nuser=JSON.parse(localStorage.getItem(\"user\")) //parse islemi\nconsole.log(user.userName)\nconsole.log(user.isActive)\n```\n\n### LocalStorage Bölüm Sonu Egzersizi\n\n```jsx\nlet counter=localStorage.getItem(\"counter\") ? Number(localStorage.getItem(\"counter\")) : 0\nlet counterDOM=document.querySelector(\"#counter\")\nlet increaseDOM=document.querySelector(\"#increase\")\nlet decreaseDOM=document.querySelector(\"#decrease\")\ncounterDOM.innerHTML=counter\n\nincreaseDOM.addEventListener(\"click\",clickEvent)\ndecreaseDOM.addEventListener(\"click\",clickEvent)\nfunction clickEvent(){\n    console.log(this.id)\n    this.id==\"increase\" ? counter+=1:counter-=1\n    localStorage.setItem(\"counter\",counter)\n    counterDOM.innerHTML=counter\n\n}\n```\n\n## Form-Form Submit Yönetimi\n\nForm tanımlama\n\n```jsx\n\u003cform action=\"siteadi\" method=\"get|post\"\u003e*form elementleri*\u003c/form\u003e\n```\n\nForm genelde backende istek yapmak istediğimizde kullanılan yapıdır.\n\n- **GET Methodu**: Form verilerini URL üzerinden gönderir. Örneğin; elimizde kullanıcıdan yaşını istediğimiz bir form elementi bulunsun. Kullanıcı yaşını girip gönder butonuna bastığı zaman mail alanına girdiği veri URL üzerinden gönderilir.\n\n**UYARI:** Get metodu önemsiz verilerde kullanılmalıdır, kullanıcı adı, şifre gibi bilgilerin bu method ile gönderilmesi uygun değildir.\n\n- **POST Methodu**: Verileri arka planda gönderir. Örneğin; kullanıcı mail adresini girip gönder butonuna bastığı zaman veriler kullanıcıya gözükmeyecek şekilde sayfaya gönderilir.\n\n### **Giriş (Input) elementi/etiketi**\n\nForm oluşturulduktan sonra içerisine text, buton, şifre vb. tiplerinde input (giriş) elementleri oluşturulur. Bu input tipleri ile tasarımcının isteğine göre formlar tasarlanabilir.\n\n1. Input(giriş) elementi text tipinde belirlenir. Yani klasik textbox kullanımı olarak ifade etsek yanlış olmaz. Örn; kullanıcı adı girişi için idealdir.\n\n```jsx\n\u003cinput type=\"text\"\u003e\n```\n\n1. Şifre tipinde veri girişi için kullanılır. Textbox’a girilen ifadeler “*****” şeklinde gizlenerek gösterilir.\n\n```jsx\n\u003cinput type=\"password\"\u003e\n```\n\n1. Radio button tipinde, istenilen verileri seçmek için geliştirilen giriş yöntemidir.\n\n```jsx\n\u003cinput type=\"radio\"\u003e\n```\n\n1. Checkbox tipinde, onay gerektiren durumlarda kullanılması için geliştirilen giriş yöntemidir.\n\n```jsx\n\u003cinput type=\"checkbox\"\u003e\n```\n\n1. Klasik buton oluşturur. Varsayılan olarak herhangi bir işlem yapmaz. JavaScript vb. programlama dilleri ile birlikte işlevsel hale gelir.\n\n```jsx\n\u003cinput type=\"button\"\u003e\n```\n\n1. Form içerisindeki elementlere girilen verileri, gönderme işlemini yapar. action ile açılacak yeni sayfaya veya mevcut sayfanın kendisine, get veya post metoduna göre değişecek şekilde veri gönderme işlevini gerçekleştirir. methot=\"get\" kullanılmışsa action durumunda göre sayfanın adres çubuğundaki url’in sonunda, methot=\"post\" kullanılmışsa sayfanın arka planında veriler saklanır.\n\n```jsx\n\u003cinput type=\"submit\"\u003e\n```\n\n1. Buton tipinde bir nesne oluşturur. Form içerisindeki elementlere veriler girilmiş halde iken reset’e tıklandığında görünen tüm verileri temizler ve elementleri ilk haline getirir.\n\n```jsx\n\u003cinput type=\"reset\"\u003e\n```\n\n1. Sadece e-mail girişi yapabilmek için kullanılır. E-mail formatı dışındaki girişlerde, düzgün veri girişi yapılması gerektiği yönünde uyarı vermektedir. Safari dışındaki tüm tarayıcılar desteklemektedir.\n\n```jsx\n\u003cinput type=\"email\"\u003e\n```\n\n1. Sadece sayı girişi yapabilmek için kullanılır. Sayı dışındaki girişlerde, düzgün veri girişi yapılması gerektiği yönünde uyarı vermektedir. Safari dışındaki tüm tarayıcılar desteklemektedir.\n\n```jsx\n\u003cinput type=\"number\"\u003e\n```\n\n1. Arama yapmamızı sağlayan giriş tipidir. Aktif olacak form içerisinde, girilecek olan veri aranır. Sadece Google Chrome ve Safari tarafından desteklenmektedir.\n\n```jsx\n\u003cinput type=\"search\"\u003e\n```\n\n**onSubmit:** Form submit olduğu anda ne yapacağını söyleyeceğimiz event'tir.\n\n**onChange:** Form'un içindeki form elementlerinin(input) value'su her değiştiğinde bu değişen value'yu bizim her defasında elde etmemize olanak sağlayan eventtir\n\n## Form Özellikleri\n\n- **ACTION:** action = Formunuzu submit ettikten sonra nasıl bir aksiyon alacağını belirlersiniz. Genellikle formlarda gönderi işlemi tamamlandıktan sonra form datası server'a gönderilir. Fakat server haricinde kendimiz bu form datasını başka bir dosyaya atayabiliriz. Örneğimizde görüleceği gibi dosyamız \"script.js\" adlı bir dosyaya gönderiliyor. Form datasının yönetimi bundan sonra bu dosya üzerinden yürütülür.\n\n**Örnek kullanım** `\u003cform action=\"/script.js\"\u003e\u003c/form\u003e`\n\n- **METHOD:** method = Form datanızın hangi methodla gönderileceğine karar verir. \"Get\" veya \"Post\" request olarak. Bu özellik verilmemesi durumunda default olarak \"Get\" methodu formunuza atanır.\n\n**Örnek kullanım** `\u003cform action=\"/script.js\" method=\"get\"\u003e\" veya \"\u003cform action=\"/script.js\" method=\"post\"\u003e`\n\n- **AUTOCOMPLETE:** autocomplete = Ingilizce isminden de anlaşılacağı üzere formunuzda otomatik tamamlama özelliğini açıp veya kapatmak için işinize yarar. Bu özelliği açmak daha önceki entry'lerinize göre formun tamamlama yapmasını sağlayacaktır.\n\n**Örnek kullanım** `\u003cform action=\"/script.js\" autocomplete=\"on\"\u003e veya \u003cform action=\"/script.js\" autocomplete=\"off\"\u003e`\n\n- **NOVALIDATE:** novalidate = Aktif olduğu sürece gönderdiğiniz form datanızın otomatik olarak doğrulanmamasını söyler.\n\n**Örnek kullanım** `\"\u003cform action=\"/my_script.js\" novalidate\u003e\"`\n\nForm tag'lerinizde birden fazla element bulundurabilirsiniz. Bunlardan olmazsa olmazı input'lar \u0026 butonlardır. Input elemanlarının başlıca özellikleri olarak ;\n\n**fname =** Görünecek olan yazıyı belirler. Bu yazı, adete bir html etiketi gibi görünür.\n\n**type =** Bu kısımda formunuzun text/numerik bir form olacağına karar verirsiniz.\n\n**name =** Input'unuzun name özelliğini belirlersiniz. Genelde isimlendirme küçük harf verilir backend kısmına uygun olması için\n\n**value =** Input'taki aktif görünecek olan yazı için verilir. Örnek olarak butonların üzerindeki yazı gibi düşünebiliriz.\n\n### Input İçerisinden Değer Almak\n\n- Inputu index.html dosyası içerisinde oluşturalım.\n\n```jsx\n\u003cdiv class=\"container mt-5\"\u003e\n    \u003cdiv class=\"row\"\u003e\n        \u003cdiv class=\"col-sm-8 offset-sm-2\"\u003e\n            \u003cform id=\"userForm\" method=\"GET\"\u003e\n                \u003cinput type=\"number\" name=\"score\" id=\"score\"\u003e\n                \u003cbutton type=\"submit\" class=\"btn btn-success\"\u003eGönder\u003c/button\u003e\n            \u003c/form\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n- İlgili .js uzantılı dosyamızdan inputumuzun içerisindeki değerleri alalım.\n\n```jsx\nlet formDOM=document.querySelector(\"#userForm\")\nformDOM.addEventListener(\"submit\",formSubmit)\n\nfunction formSubmit(event){\n    event.preventDefault()\n    console.log(\"işlem gerçekleşti\")\n    let scoreInputDOM=document.querySelector(\"#score\") //inputtan bilgiyi alma\n    console.log(scoreInputDOM.value) //alınan bilgiyi ekrana yazdırma\n```\n\nAldığımız bilgiyi istersek localStorage de kaydedebiliriz : \n\n```jsx\n  localStorage.setItem(\"score\",scoreInputDOM.value) //localstorage e kaydetme\n```\n\n### Form Bölüm Sonu Egzersizi\n\n- index.html dosyası içerisine :\n\n```jsx\n\u003cdiv id=\"alert\"\u003e\u003c/div\u003e\n\n\u003cdiv class=\"container mt-5\"\u003e\n    \u003cdiv class=\"row\"\u003e\n        \u003cdiv class=\"col-sm-8 offset-sm-2\"\u003e\n            \u003cform id=\"userForm\" method=\"GET\"\u003e\n                \u003cdiv class=\"mb-3\"\u003e\n                    \u003clabel class=\"form-label\" for=\"userName\"\u003eKullanıcı adı\u003c/label\u003e\n                    \u003cinput class=\"form-control\" type=\"text\" name=\"userName\" id=\"userName\"\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"mb-3\"\u003e\n                    \u003clabel class=\"form-label\" for=\"score\"\u003eNot bilgisi\u003c/label\u003e\n                \u003cinput class=\"form-control\"  type=\"number\" name=\"score\" id=\"score\"\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"mb-3\"\u003e\n                    \u003cbutton type=\"submit\" class=\"btn btn-success\"\u003eGönder\u003c/button\u003e\n                    \u003cbutton type=\"reset\" class=\"btn btn-danger\"\u003eResetle\u003c/button\u003e\n                \u003c/div\u003e\n            \u003c/form\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"col-sm-8 offset-sm-2 mt-4\"\u003e\n            \u003cul class=\"list-group\" id=\"userList\"\u003e\n                \n              \u003c/ul\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n- İlgili .js dosyası içerisine :\n\n```jsx\n// Form bolum sonu egzersizi\n/*  1-formu sec\n    2-input icerisindeki bilgiyi sifirla \n    3-form icindeki bilgiyi sifirla\n    4-eger forma bilgi girilmezse kullaniciyi uyar\n*/\nlet userFormDOM = document.querySelector('#userForm')\nuserFormDOM.addEventListener('submit', formHandler)\nconst alertDOM = document.querySelector('#alert')\n\nconst alertFunction = (title, message, className=\"warning\") =\u003e `\n\u003cdiv class=\"alert alert-${className} alert-dismissible fade show\" role=\"alert\"\u003e\n  \u003cstrong\u003e${title}\u003c/strong\u003e ${message}\n  \u003cbutton type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"\u003e\u003c/button\u003e\n\u003c/div\u003e\n`\n\nfunction formHandler(event) {\n    event.preventDefault()\n    const USER_NAME = document.querySelector(\"#userName\")\n    const SCORE = document.querySelector(\"#score\")\n    \n    if (USER_NAME.value \u0026\u0026 SCORE.value) {\n        addItem(USER_NAME.value, SCORE.value)  // gonderdikten sonra sifirladik\n        USER_NAME.value = \"\" \n        SCORE.value = \"\"\n    } else {\n        alertDOM.innerHTML = alertFunction(\n            \"Baslik Bilgisi\",\n            \"Eksik Bilgi Girdiniz\",\n            \"success\"\n        )\n    }\n    \n}\n\nlet userListDOM = document.querySelector('#userList')\n\nconst addItem = (userName, score) =\u003e {\n    let liDOM = document.createElement('li')\n    liDOM.innerHTML = `\n        ${userName} \n        \u003cspan class=\"badge bg-primary rounded-pill\"\u003e${score}\u003c/span\u003e\n    `\n    liDOM.classList.add(\n        'list-group-item', 'd-flex', 'justify-content-between', 'align-items-center'\n    )\n    userListDOM.append(liDOM)\n}\n```\n\n## **Dizi (Array) Oluşturmak ve Dizi İçindeki Elemanlara Ulaşmak**\n\n### **Array Nedir?**\n\nProgramlamanın temel amaçlarından birisi verileri saklamak ve manipüle edebilmektir. Arrays (diziler) bu işe yaramaktadır. Array'lerde bir değişken (variable) tanımlayarak birden fazla değeri (value) saklayabilir ve onları daha sonra çeşitli metotlarla kullanabiliriz. Array oluşturmak için köşeli parantez kullanırız. Oluşturulan array'de her bir değere 'element' (eleman) denir.\n\n- Bir array'in veri tipi object'dir.\n\n**DİKKAT:** Array'leri tanımladığımız değişkenin let veya const ile deklare edilmesi arasında fark bulunmaktadır. let ile deklare ettiğimiz bir array daha sonra yeniden tanımlanabilir. const ile deklare ettiğimiz bir array'i yeniden tanımlayamayız. const ile deklare ettiğimiz bir array yeniden tayin edilemese de içerisindeki elemanlara erişme ve değiştirme noktasında let ile aynıdır.\n\n- JavaScript'te array(dizi) tanımı birden çok value(değer) saklamamızı sağlar.Bir dizi oluşturmak için yapmamız gereken dizi ismini verip eşittir dedikten sonra köşeli parantezler içinde dizi elemanlarını yazmak. Her eleman arasında bir virgül koymamız gereklidir.\n- Dizi tanımlama :\n\n```jsx\nlet dizi = [1,2,3,false,\"zehra\"];\n```\n\n- Bir dizi içinde farklı bir dizi(diziler) tanımlayabiliriz. Örneğin:\n\n```jsx\nlet dizi1=[1,\"zehra\",[\"a\",2,\"b\"],true]\n```\n\n### Dizi İçerisindeki Elemanlara Erişim\n\nHer dizi elemanının index değeri vardır. İlk elemanın index değeri 0’dır.Bu index değerlerini kullanarak bizler dizi elemanlarına erişebiliriz. Örneğin:\n\n```jsx\nlet dizi2 = [1,2,3,\"dört\",\"beş\"];\nconsole.log( dizi2[3] ); //dört\nconsole.log( dizi2[0] ); //1\n```\n\nTüm elemanlara for döngüsü ile erişebiliriz:\n\n```jsx\nlet dizi2 = [1,2,3,\"dört\",\"beş\"];\n\nfor (let i = 0; i \u003c dizi2.length; i++) {\n  console.log(dizi2[i]);\n}\n```\n\nYa da tüm elemanlara forEach döngüsüyle de erişebiliriz:\n\n```jsx\nlet dizi3 = [1,2,3,\"dört\",\"beş\"];\ndizi3.forEach((item, index) =\u003e {\n  console.log(item, index);\n});\n```\n\nBurada arrow function şeklinde yazılmış forEach metodu her bir dizi elemanı için çalıştırılır. `item`\n değeri dizinin o anki elamanını tutar ve `index` değeri ise o anki elemanın index değeridir. \n\n```jsx\n//array olusturmak\nlet domain=\"zehra\"\nlet isActive=false\nlet items=[1, 2 ,3, isActive, domain]\nconsole.log(items)\n\nlet emptyArray=[] //bos bir dizi\n\n//array icerisindeki eleman/oge sayisini ogrenmek\nconsole.log(items.length)\n\n//array icindeki ilk elemani cagirmak\nconsole.log(items[0])\n\n//array icindeki son elemani cagirmak\nconsole.log(items[items.length-1])\n\n// degisken icindeki bilginin array olup olmaduğı bilgisini almak\nconsole.log(typeof(items)) //object doner\n\nconsole.log(Array.isArray(items)) //true\n\nconsole.log(\"[]: \",Array.isArray([])) //true\nconsole.log(\"1: \",Array.isArray(1)) //false\nconsole.log(\"true: \",Array.isArray(true)) //false\n\n//arrayin icindeki ortadaki elemanin cagirilmasi\nconsole.log(items[Math.floor(items.length/2)])\n```\n\n## **Diziye Yeni Eleman Eklemek, Çıkartmak ve Güncellemek**\n\n- Diziye Yeni Eleman Eklemek\n\nDizilere push(), unshift() ve splice() metotlarıyla yeni eleman ekleyebiliriz.\n\n### **push() metot**\n\npush() metot, var olan bir dizinin sonuna eleman eklemeye yarar.\n\n```jsx\nlet items=[10, 20, 30, 40]\nconsole.log(\"items - ilk hali : \",items)\n//arrayin sonuna eleman eklemek\nitems.push(50)\nconsole.log(items)\n```\n\n### **unshift() metot**\n\nunshift() metot, var olan bir dizinin başına eleman eklemeye yarar.\n\n```jsx\nlet items=[10, 20, 30, 40]\nconsole.log(\"items - ilk hali : \",items)\n//arrayin basina eleman eklemek\nitems.unshift(5)\nconsole.log(items)\n```\n\n### **splice() metot**\n\nsplice() metot diziye hem eleman eklemek için hem de eleman silmek için kullanılır. Metodun ilk parametresi işlemin yapılacağı index numarasını, ikinci parametre ise kaç elemanın silineceğini belirtir.\n\n```jsx\nvar sports = ['basketball', 'football', 'tennis' ];\n  console.log(sports); // basketball, football, tennis\n  sports.splice(1,0,'baseball');\n  console.log(sports); // basketball, baseball, football, tennis\n```\n\n- Diziden Eleman Silmek\n\nDizilerden pop(), shift() ve splice() metotlarıyla eleman silebiliriz.\n\n### **pop() metot**\n\npop() metot, var olan bir dizinin en sonundaki eleman silmeye yarar.\n\n```jsx\nlet items=[10, 20, 30, 40]\nconsole.log(\"items - ilk hali : \",items)\n//arrayin sonundaki elemani cikarmak\nlet lastItem=items.pop() //elemani cikardik yakaladik degiskene atadık\nconsole.log(items)\nconsole.log(lastItem)\n```\n\n### **shift() metot**\n\nshift() metot, var olan bir dizinin başından eleman silmeye yarar.\n\n```jsx\nlet items=[10, 20, 30, 40]\nconsole.log(\"items - ilk hali : \",items)\n//arrayin basindaki elemani cikarmak\nlet firstItem=items.shift() //elemani cikardik yakaladik degiskene atadık\nconsole.log(items)\nconsole.log(firstItem)\n```\n\n- Dizide Eleman Güncellemek\n\nDizi içerisindeki her bir eleman 0' dan başlayan bir indeks numarasına sahiptir. Bu sayede indeks numaralarını kullanarak güncelleme yapabiliriz.\n\n```jsx\nlet items=[10, 20, 30, 40]\nconsole.log(\"items - ilk hali : \",items)\n\n//array icindeki ilk ogenin bilgisini degistirmek\nitems[0]=2;\nconsole.log(items)\n\n//array icindeki ilk ogenin bilgisini degistirmek\nitems[items.length-1]=80\nconsole.log(items)\n```\n\n## **Array (Dizi) Metotlarının Kullanımı ve Array içinde Array Oluşturma**\n\n### **.includes()**\n\n- Includes metodu bir elemanın dizi içerisinde bulunup bulunmadığını kontrol eder. Boolean (true/false) olarak çıktı alınır.\n\n```jsx\n//x elemani array de var mi ?\nconst arananElemanVar = items.includes(\"elma\");\nconsole.log(\"aranan eleman var mı : \",arananElemanVar);\n```\n\n### **.join()**\n\n- Bazen Dizi içerisinde topladığınız verileri, string (sözdizimi) olarak yazdırmak isteyebilirsiniz. Join metodu bu konuda yardıma yetişiyor.\n- Parantez içerisine dizi elemanları arasına koymak istediğimiz string'i parametre olarak girebiliriz. Eğer bir parametre vermezsek virgül bastırır.\n\n```jsx\nconsole.log(allUsers.join(\" --- \"))// birlestirme islemi yapabiliriz joinle\n```\n\n### **.concat()**\n\n- Bu metot farklı dizileri birleştirip tek bir diziye çevirmemizi sağlıyor.\n\n### Örnek Kullanımlar\n\n```\nlet items=[1, 2, 3, 4, 5]\n\n//array icinde array\nlet femaleUsers= [\"ayse\", \"fatma\", \"hayriye\"]\nlet maleUsers=[\"ali\", \"ahmet\", \"mehmet\"]\n\nitems.unshift(femaleUsers) //basa eklemek\nconsole.log(items)\n\nitems.push(maleUsers) //sona eklemek\nconsole.log(items)\n\n//x elemani array de var mi ?\nconst arananElemanVar = items.includes(\"elma\");\nconsole.log(\"aranan eleman var mı : \",arananElemanVar);\n\nconsole.log(items.length) //items ın boyutu \n// array icinde array de icerdeki her bir array 1 eleman olarak sayilir\n\nconsole.log(items[0]) // (3)['ayse', 'fatma', 'hayriye']\nconsole.log(items[0][0]) //ayse\nconsole.log(items[0][1]) //fatma\nconsole.log(items[0][2]) //hayriye\nconsole.log(items[0].length) //array icindeki istedigimiz arrayin length bilgisine ulastik\n\n//array icerisinden oge ayirmak\nlet newItems=items.splice(2,4)\nconsole.log(\"newItems : \",newItems)\nconsole.log(\"items : \",items)\n\n//array icerisindeki ogenin index bilgisini bulmak\nitems.unshift(\"lorem\")\nitems.push(\"zehra\")\nconsole.log(items)\nconsole.log(items.indexOf(\"zehra\"))\n\n//array kopyalamak \nlet copyItems=items\nconsole.log(items)\ncopyItems.pop()\n//burda iki array de de degisiklik oldu. Biz bunu istemiyoruz.\nconsole.log(items)\nconsole.log(copyItems)\n//o zaman nasil yapmaliyiz ?\nconsole.log(\"kopyalandiktan sonra : \")\ncopyItems=items.slice()\ncopyItems.pop()\nconsole.log(items)\nconsole.log(copyItems)\n\nlet es6Items=[...items] //es6 ve sonrasinde gelen kopyalama islemi. slice ın yerine bu da kullanilabilir.\nconsole.log(es6Items)\n\n//iki array bilgisini birlestirmek\nlet allUsers=[...femaleUsers,...maleUsers] //es6 iile arrayleri birlestirmek\nconsole.log(allUsers)\n\n//array icerisindeki bilgiyi stringe cevirmek\nconsole.log(allUsers.toString())\nconsole.log(allUsers.join(\" --- \"))// birlestirme islemi yapabiliriz joinle\n\n//istedigimiz index bilgisine gore oge eklemek\nallUsers.splice(allUsers.length-1,0,\"Melisa\") //en sondaki elemandan bir önceki index e eleman ekledik\nconsole.log(allUsers)\n```\n\n## Döngüler\n\n### **for Döngüsü Kullanımı**\n\nBir for döngüsü, *belirtilen koşul doğru olduğu sürece komutların çalıştırılmasını sağlar.*\n Koşul sağlanmazsa döngü çalışmayı durdurur.\n\n```jsx\nfor(baslangicAtamasi; kosulIfadesi; arttirimIfadesi){\n    yapilacak islemler\n}\n```\n\nÖrnek tanımlama\n\n```jsx\nfor(let i=0; i\u003c10; i++){\n    console.log(i)\n}\n//i yi disarida da tanimlayabiliriz\nlet i=0\nfor(; i\u003c10; i++){\n    console.log(i)\n}\n```\n\n- Array in elemanlarini bastiralim\n\n```jsx\nlet users=[\"Zehra\", \"Çakır\", \"SDU\"]\nlet i=0\nfor(; i\u003cusers.length; i++){\n  console.log(users[i])\n}\n```\n\n### **Break ve Continue Kullanımı**\n\n**Break :** break ifadesi içinde bulunduğu döngüyü sonlandırmak diğer bir deyişle döngüden çıkılması hizmetini sunar. Bu hususta öneminin yeniden vurgulanması gereken nokta \"break\" ifadesinin sadece kendine en yakın yani içinde bulunduğu döngü içerisinde geçerli oluşudur.\n\n```jsx\nconst LOREM_LIST=[\n    \"lorem\", \"ipsum\", \"dolor\", \"sdü\", \"bilgisayar\", \"kod\", \"js\"]\nlet counter=0\nfor(; counter\u003c10; counter++){\n    if(counter===5){\n        break //5 gelince cikti\n    }\n    console.log(counter)\n} \n// baska ornek\nconst UL_DOM=document.querySelector(\"#userList\")\nfor(let index=0; index\u003cLOREM_LIST.length; index++){\n    if(LOREM_LIST[index] == \"dolor\"){ //dolor a gelince bitirir\n        break\n    }\n    let LI_DOM=document.createElement(\"li\")\n    LI_DOM.innerHTML=LOREM_LIST[index]\n    UL_DOM.append(LI_DOM)\n}\n```\n\n**Continue :** Continue ifadesi ise bulunduğu döngü içinde o anki çalışacak olan devir işlemini pas geçerek bir sonraki devir işlemini başlatır. Yine burada da vurgulanması gereken nokta \"continue\" ifadesinin sadece kendine en yakın yani içerisinde bulunduğu döngü içinde geçerli oluşudur.\n\n```jsx\nconst LOREM_LIST=[\n    \"lorem\", \"ipsum\", \"dolor\", \"sdü\", \"bilgisayar\", \"kod\", \"js\"]\nlet counter=0\nfor(; counter\u003c10; counter++){\n    if(counter===5){\n        continue // 5 i atlayip devam etti\n    }\n    console.log(counter)\n}\n//baska ornek\nconst UL_DOM=document.querySelector(\"#userList\")\nfor(let index=0; index\u003cLOREM_LIST.length; index++){\n    if(LOREM_LIST[index] == \"dolor\"){ //dolor u atlayip devam eder\n        continue\n    }\n    let LI_DOM=document.createElement(\"li\")\n    LI_DOM.innerHTML=LOREM_LIST[index]\n    UL_DOM.append(LI_DOM)\n}\n```\n\n### while **Döngüsü Kullanımı**\n\nWhile döngüsü oluşturabilmek için ilk olarak parametre olarak bir koşul vermemiz gerekmektedir verdiğimiz koşul sağlandığı sürece döngü devam eder. Bu koşul sınırsız olursa döngü de sonsuz kere devam eder ve biz bunu istemeyiz genel olarak sonlanacağı bir durumla döngü sonlandırılmalıdır.\n\n```jsx\nlet counter=0;\n\n//standart while kullanımı\nwhile(counter\u003c10){\n    console.log(counter)\n    counter ++\n}\n\n//baska ornek \nlet userName=\"\";\nwhile(userName==\"\"){ //kullanici adi girilmedigi surece while calisir, girildiginde sonlanir.\n    userName=prompt(\"Kullanici adinizi giriniz: \")\n    console.log(userName)\n}\n```\n\n**JavaScript'de forEach Nasıl Kullanılır?**\n\nJavaScript'te forEach , döngü oluşturmamızı ve bu döngüyü sırayla çalıştırmamızı sağlayan bir array metodudur.\n\nforEach fonksiyonu item, index, array olmak üzere 3 parametre alabilir.\n\n```jsx\narr.forEach(function(value, index, array) {\n  // index ve array kullanmak opsiyoneldir\n}\n```\n\nÖrnek\n\n```jsx\nconst PRODUCTS=[\"laptop\", \"phone\", \"speaker\", \"desktop pc\", \"server\", \"mouse\", \"keyboard\"]\nPRODUCTS.forEach((product,index,array) =\u003e{\n    console.log(product, index, array)\n})\n```\n\n**Filter Metodu**\n\nBir Array metodu olan **filter()**, dizi elemanlarını döngüye alıp, istediğimiz koşula sahip olanlarla yeni bir dizi oluşturmak için kullanılır.\n\nÖrnek\n\n```jsx\n//5 harften fazla olanları istiyorum\nconst PRODUCTS=[\"laptop\", \"phone\", \"speaker\", \"desktop pc\", \"server\", \"mouse\", \"keyboard\"]\n\nconst NEW_PRODUCTS = PRODUCTS.filter(item=\u003eitem.length\u003e5)\nconsole.log(NEW_PRODUCTS)\n\n//aktif kullanicilari bulmak istiyorum\nconst USERS=[\n    {fullName: \"Ayşe Sümer\", isActive:false},\n    {fullName: \"Zehra ç\", isActive:true},\n    {fullName: \"yusuf d\", isActive:true},\n    {fullName: \"Ayça k\", isActive:false}\n]\nconst ACTIVE_USERS=USERS.filter(user=\u003euser.isActive==true) //true istiyorsak true yazmasak da olur\nconsole.log(ACTIVE_USERS)\n```\n\n**Map ile Array İçerisideki Yapının Değiştirilerek Yeni Liste Oluşturulması**\n\nArray Map metodu, parametre ile kendisine gönderilen dizinin her bir elemanı için ayrı ayrı çalışır ve belirlenen işleme tabi tutup, yeni bir dizi meydana getirir.\n\nÖncelikle Array Map metodunun kullanımına bir göz atalım.\n\n```jsx\narray.map( function(value, index, array), this)\n```\n\n**Gönderilen parametreleri inceleyelim;**\n\n- array : Üzerinde işlem yapılacak olan diziyi belirtir. Bu dizinin her bir elemanı map metotunun içinde belirleyeceğimiz işleme tabi tutulacaktır.\n- value : Üzerinde işlem yapılan dizi değerini belirtir.\n- array : Üzerinde işlem yapılan diziye erişimi sağlar\n- this : Kullanımı zorunlu değildir(opsiyoneldir). this değişkenine iletilecek olan değeri belirtir.\n\nÖrnek \n\n```jsx\nconst USERS=[\"AYSE\", \"MehMet\", \"TugCe\", \"AkSEL\"]\n//userName icinde orijinal isim kalsin\n//shortName icinde ilk harf buyuk\n//newName icinde ilk harf buyuk olsun\n\nconst NEW_USERS=USERS.map(user =\u003e user.toLowerCase())\nconsole.log(NEW_USERS)\n\nconst USERS_OBJECT=USERS.map(item=\u003e\n    {\n\n        return {userName: item, shortName: `${item[0]}`, newName:`${item[0].toUpperCase()}${item.slice(1).toLowerCase()}`}\n    })\n    console.log(USERS_OBJECT)\n```\n\n## **Object(Nesne) Nedir? Nasıl Oluşturulur?**\n\nObjeler, içerisinde birden fazla değeri depolayan yapılardır. Property olarak bilinen bu değerler primitive(String,number, boolean vb.) veya başka objeler olabilirler ve her bir değer string veya sembol ile isimlendirilebilir.\n\n- Object Oluşturmak\n\nObjeler üç şekilde oluşturulabilir. Object literal, new Object keyword’ü ve Object.create() fonksiyonuyla. Object literal ve new Object yöntemleri, normal bir objeyi oluştururken kullanılan yöntemlerdir. Object.create() yöntemi ise, mevcut bir objeden kalıtım yoluyla bazı bilgiler alarak yeni bir obje oluşturmaya yarar.\n\n1. **Object Literals**\n\nJavaScript’te obje oluşturmanın en kolay yolu olarak bilinir. Süslü parantez `{}` kullanılarak oluşturulan objenin içerdiği property'lerin değerleri iki nokta `:` işaretiyle belirtilir. Property'ler birbirlerinden virgül `,` ile ayrılır.\n\n```jsx\nlet literalObjEx={\n    \"name\":\"zehra\",\n    \"surname\":\"cakir\"\n}\nconsole.log(\"literalObjEx tipi : \",typeof(literalObjEx))  //object\n```\n\n1. ****New Keyword**** \n\nNew keyword'ü yeni bir obje oluşturup başlatır. Oluşturulurken belli başlı bazı constructor invocation’lardan(kurucu çağrılarından) birini(Object, Array, Date vb.) yazmak ve sonuna mutlaka fonksiyon çağrısı olduğunu belirten parantezleri `()` eklemek gerekir. Fonksiyon çağrısı, objenin başlatılması için olmazsa olmazdır.\n\n```jsx\nlet item=new Object() //bunun object oldugunu belirttik\n```\n\n****Object Prototype****\n\nJavascript’te hemen her objenin bağlantılı olduğu ikinci bir obje vardır ve bu ikinci objelere prototype denir. Mevcut obje, ikinci objeden yani prototype’ından kalıtım(inheritence) alır. Object literal yöntemiyle oluşturulan her objenin prototipi aynıdır: `object.prototype` \n\nNew keyword'ü kullanılarak oluşturulan objelerin ise nereden kalıtım alacakları, function invocation’larına göre değişiklik gösterebilir.\n\n1. **Object.create**\n\nObje oluşturmadaki son yöntem olan object.create() yöntemi, yeni bir obje oluştururken nereden kalıtım alacağına karar vermemizi sağlayan bir yöntemdir.\n\n- Herhangi bir yerden kalıtım almasını istemediğimiz bir obje oluşturmak istediğimizde null parametresini atamak yeterli olacaktır.\n\n```jsx\nlet noInheritence = Object.create(null);   //herhangi bir kalıtım(inheritence) almaz\n```\n\n- standartObject isimli obje örneği, object literal ve new object keyword ile oluşturulan objelerin prototiplerini parametre olarak aldığı için, onlar gibi çalışır.\n\n```jsx\nlet standartObject = Object.create(Object.prototype) //standart obje kalıtımı alır.\n```\n\n- *argentina* isimli obje örneği ise daha önce oluşturduğumuz countriesTalkSpanish isimli object literal’dan kalıtım alacağı için onunla aynı property'lere sahip olur.\n\n```jsx\nlet argentina = Object.create(countriesTalkSpanish)\n```\n\n- objeye, ülkenin başkentini belirten yeni bir property atadık. Artık elimizde başkentini, konuşulan dili ve hangi kıtada yer aldığını bildiğimiz bir ülke var.\n\n```jsx\nargentina.capital = “buenos aires”;\n```\n\n### **Object Anahtar (Key) ve Değer (Value) Yapısının Kullanımı/Erişimi**\n\nBir obje(object), {…} süslü parantezleri ile, isteğe bağlı olarak bir özellikler(property) listesiyle oluşturulabilir. Property bir \"anahtar(key): değer(value)\" çiftidir ve burada key(\"property name\" de denir) bir string(yazı tipinde), value herhangi bir veri tipi olabilir.\n\n- doğru anahtar bilgisi oluşturmak\n\n```jsx\n//[key1:1, key2=2,...]\nlet laptop1={\n    brand: \"Apple\",\n    model: \"MackBook Pro\", //bir key baslarken mutlaka karakter ile baslar\n    \"1kg\": 2 //illa sayi ile baslamak istiyorsak tirnak icine almamız lazım\n    //keyler bosluksuz yazilmali camelCase ya da _ ile yazabiliriz. _ genelde kullanilmaz\n\n}\n\n//key lere ulasma\nconsole.log(laptop1.brand) \nconsole.log(laptop1[\"brand\"]) //ustteki ile ayni kullanim. Ikisini de kullanabiliriz\nconsole.log(laptop1.model)\nconsole.log(laptop1[\"1kg\"])\n```\n\n- anahtar bilgisine yeni değer eklemek\n\n```jsx\nlaptop1.brand=\"Mac\"\nconsole.log(laptop1) \nlaptop1[\"brand\"]=\"Mac1\"\nconsole.log(laptop1)\n```\n\n- yeni bilgi eklemek istiyorsak\n\n```jsx\nlaptop1.version=\"10.15.7\"\nconsole.log(laptop1)\n```\n\n- icerisindeki anahtarlara bakmak, bilgilerine bakmak\n\n```jsx\nkeys=Object.keys(laptop1)\nconsole.log(keys) // yontem 1\nconsole.log(Object.keys(laptop1)) //yontem 2\n\nkeys.forEach(key =\u003e { //yontem 3\n    console.log(key)\n    console.log(laptop1[key])\n});\n```\n\n- deger bilgilerine ulasmak (values) =\u003e Object.values(item)\n\n```jsx\nconsole.log(Object.values(laptop1))\n\nlet values=Object.values(laptop1)\nvalues.forEach(values =\u003e {\n    console.log(values)\n    \n});\n```\n\n- Bir propertyy’i kaldırmak için silme(delete) operatörünü kullanabiliriz:\n\n```jsx\ndelete laptop1.brand;\n```\n\nÖzetle\n\n```\nObjeler, birkaç özel niteliğe sahip ilişkilendirilebilir array(dizi)'lerdir.\n* Key / value şeklinde property'leri saklar.\n* Key ifadesi string veya sembol olmalıdır.\n* Value ifadesi herhangi bir değer alabilir.\n* Belli bir property'e erişmek için kullanabileceklerimiz:\n  * Dot notation: obj.property\n  * Square brackets notation obj[“property”]. Bu özellik key'in obj[varWithKey] gibi bir değişkenden alınmasına izin verir.\n\nBu zamana kadar bahsettiğimiz objeler “plain object” olarak isimlendirilir.\n```\n\n- Obje Metotları\n\n```\nObject.keys(obj) – Key’lerden oluşan bir array döner(return).\nObject.values(obj) – Value’lardan oluşan bir array döner.\nObject.entries(obj) – [key, value] çiftlerinden oluşan bir array döner.\n```\n\n### **Nesnelere Nasıl Metot Ekleriz?**\n\n- **Metotu Özellik Olarak Eklemek**\n\nMetot, bir nesnenin oluşturulduğu sırada özellik olarak eklenip tanımlanabileceği gibi, önceden tanımlanmış bir nesneye sonradan da eklenebilir.\n\n```jsx\nlet user1={\n    firstName:\"Bilgin\",\n    lastName:\"Uzman\",\n    score:[1, 2, 3, 4],\n    isActive:true,\n    shortName: function(){\n        return `${this.firstName} ${this.lastName}`\n    }\n};\nconsole.log(user1)\nconsole.log(user1.shortName()) //metoda erisim\n```\n\n## **Object ve Array Destructuring Kullanımı**\n\n### **Destructuring Nedir?**\n\nDestructuring bir obje veya bir array içinden her bir elemanın alınıp bir değişken içine kaydedilmesi.\n\n```jsx\nlet settings = {\n    userName: \"zehraCakir\",\n    password: \"sduBilgisayar\",\n    isActive: false,\n    ip: \"127.0.0.1\",\n    serverName: \"javascript.com\"\n}\n```\n\n- settings içinden herhangi birine şöyle ulaşabiliriz :\n\n```jsx\nlet userName= settings.userName\nconsole.log(userName)\n```\n\n- rename işlemi yapabiliriz :\n\n```\nlet {userName: user,password,isActive,ip,serverName}=settings\nconsole.log(userName,password,isActive,ip,serverName)\nconsole.log(settings)\nconsole.log(user) //ilk satirda userName:user diyerek userName i cagirmak istedigimizde user diyerek cagiracagimizi belirttik.\n```\n\n- object içindeki bazı bilgilerin çıkarılması\n\n```jsx\nlet {userName:userName2,password:pasword2,isActive:isActive2,...newSettings}=settings //{} --\u003e object oldugundan dolayi\nconsole.log(userName2, pasword2, isActive2, newSettings) //newSettings i ekrana basarken farkli bir object e alarak basar.\n```\n\n- object’in destructuring ile kopyalanması\n\n```jsx\n//HATALI\n// let settings2=settings\n// settings2.userName=\"yeni bilgi\" //burada kopyalama degil de icerik degistirme var\n// console.log(\"settings \",settings)\n// console.log(\"settings2\",settings2)\n\n//destructuring yapisi\nlet settings2={...settings} //cikar kopyala diyoruz aslinda bu yapida\nsettings2.userName=\"yeni bilgi\"\nconsole.log(\"settings \",settings)\nconsole.log(\"settings2\",settings2)\n//destructuring yapisi ile kopyalanan object te degisiklik yapmiyoruz, sadece kopya uzerinde degisiklik yapmis oluyoruz.\nlet score= [100, 200, 300, 400]\nlet[score1, score2, ...otherScore]=score  //[] --\u003e array oldugundan dolayi\nconsole.log(score1, score2, otherScore)\n//object kopyalama ile ayni\nlet copyOfScore = [...score]\nconsole.log(copyOfScore)\n```\n\n## **Try Ve Catch Kullanımı**\n\n**try...catch** ifadesini basitçe ifade edersek; Herhangi bir iş yaparken bir hatayla karşılaşılma durumunun ele alınması anlamına gelmektedir.\n\n**try** anahtar kelimesi kodları çalışma zamanında test etmek için kullanılırken, **catch** anahtar kelimesi ise çalışma zamanında hata çıkması durumunda bu hataları yakalamak için kullanılır.\n\n- Örnek kullanım :\n\n```jsx\n// UNUTMA!! Eger bir blokta hata varsa ve bu bloktaki hatayi yonetmediysen; artik daha asagiya inemezsin, islemleri goremezsin..\n//try-catch\nlet products;\n\ntry{\n    products.forEach(item=\u003econsole.log(item))\n}catch(error){\n    console.log(\"error : \",error)\n}\n\nconsole.log(\"hata yonetimi duzgun calisiyor\")\n\nlet info=\"zehracakir\"\nconsole.log(info)\n```\n\n**Throw İle İstisnalar Oluşturma**\n\n**throw** ifadesi bize özel hatalarımızı oluşturmanıza olanak tanır. Teknik olarak **throw**\n ile bir istisna (hata) atılabilir.\n\n- Örnek kullanım :\n\n```jsx\n\u003cinput type=\"text\" id=\"dogumTarihi\" /\u003e\n\u003cbutton onclick=\"valid()\"\u003eGönder\u003c/button\u003e\n```\n\n```jsx\nfunction valid(){\n    try {\n        if (document.querySelector(\"#dogumTarihi\").value == \"\") {\n            throw 'Doğum tarihini boş geçemezsiniz';\n        };\n    }catch(error) {\n        console.log(error);\n    }\n}\n```\n\n## **Fetch API İle Çalışmak**\n\n`Fetch API`, kaynakları (ağ genelinde dahil) getirilmesine yönelik basit bir arayüzdür.\n\n### Fetch Interfaces\n\n- `fetch()`, bu yöntem bir kaynak almak için kullanılır.\n- `Headers`, response/request başlıklarını temsil ederek bunları sorgulamanıza ve sonuçlara bağlı olarak farklı eylemler gerçekleştirmenize olanak tanır.\n- `Request` , bir kaynak talebini temsil eder.\n- `Response`, bir isteğe verilen yanıtı temsil eder.\n\n### Temel Fetch Kullanımı\n\nFetch API’ yi kullanmak için fetch metoduna istek yapacağımız url’ i parametre olarak vermek gerekiyor.\n\n```jsx\nfetch(url);\n```\n\nfetch() metodundan sonra, metodun sonuna then() promise metodunu ekleriz:\n\n```jsx\n.then(function() {\n})\n```\n\nÖrneğin “**[https://jsonplaceholder.typicode.com/todos”](https://jsonplaceholder.typicode.com/todos%E2%80%9D)** adresine get isteğinde bulunalım.\n\n```jsx\n// GET İsteği\nfetch(\"https://jsonplaceholder.typicode.com/todos\")\n\t.then((response) =\u003e response.json()) //parse json data\n\t.then(function (todos) {\n\t\ttodos.forEach((todo) =\u003e {\n\t\t\tconsole.log(todo.title); //Başlıkları console' a yazdırma\n\t\t});\n\t});\n```\n\n![Untitled](images/Untitled%209.png)\n\n```jsx\n.catch((err) =\u003e console.log(err))\n\n```\n\nVe en sonunda catch() metoduyla herhangi bir aşamada hata oluşursa, bu hatayı parametre olarak alıp console’a yazdırıyoruz.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzehracakir%2Fjavascriptnotlarim","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzehracakir%2Fjavascriptnotlarim","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzehracakir%2Fjavascriptnotlarim/lists"}