JavaScript

Embedded JavaScript çeşitli alanlarda kullanılarak uygulamalara dinamik özellikler kazandırır: 1. Oyun Motorları: Unity ve Unreal Engine gibi oyun motorları, oyun mantığı ve modlama için gömülü JavaScript kullanır. 2. Masaüstü Uygulamaları: Electron, Visual Studio Code ve Atom gibi uygulamaları çalıştırmak için V8 JavaScript motorunu kullanır. 3. Sunucu Tarafı Uygulamalar: Node.js, JavaScript'i sunucu tarafında çalıştırarak tam yığın JavaScript gelişimi sağlar. 4. Veritabanları: MongoDB gibi bazı NoSQL veritabanları, sorgu işleme ve sunucu tarafı komut dosyası oluşturma için JavaScript motorlarını kullanır. 5. Gömülü Sistemler: IoT cihazları ve akıllı ev aletleri, scripting ve otomasyon için gömülü JavaScript motorlarını kullanır. 6. İçerik Oluşturma Araçları: Adobe Creative Suite uygulamaları, genişletilebilirlik ve otomasyon için gömülü JavaScript motorlarına sahiptir. Ayrıca, hızlı prototipleme ve test süreçlerinde de JavaScript'in basit sözdizimi ve geniş topluluk desteği avantaj sağlar.

JavaScript, hem ön yüz (front-end) hem de arka yüz (back-end) geliştirme için kullanılabilen çok yönlü bir programlama dilidir, bu nedenle alt yapı dili olarak da kabul edilebilir.

iPhone'da JavaScript'i etkinleştirmek için Safari tarayıcısında aşağıdaki adımları izleyin: 1. Ayarlar uygulamasını açın. 2. Safari seçeneğini seçin. 3. Gelişmiş bölümüne gidin. 4. JavaScript anahtarını sağa kaydırarak yeşil hale getirin. Bu adımları tamamladıktan sonra JavaScript etkinleştirilmiş olacaktır.

Vite ile React kullanmak için aşağıdaki adımları izlemek gerekmektedir: 1. Node.js ve npm'in kurulumu: Vite'i kullanabilmek için Node.js ve npm'in sisteminizde yüklü olması gerekmektedir. 2. Yeni bir Vite projesi oluşturma: Terminalde aşağıdaki komutu çalıştırarak yeni bir React projesi oluşturabilirsiniz: `npm create vite@latest my-react-app --template react` Burada `my-react-app` yerine istediğiniz proje adını yazabilirsiniz. 3. Projenin içine girme ve bağımlılıkları yükleme: Oluşturulan projenin dizinine girip bağımlılıkları yüklemek için aşağıdaki komutu çalıştırmanız gerekmektedir: `npm install` 4. Sunucuyu başlatma: Geliştirme sunucusunu başlatmak için aşağıdaki komutu kullanabilirsiniz: `npm run dev` Bu komut, http://localhost:5173/ adresinde sunucuyu başlatacaktır. Vite, React ile birlikte kullanıldığında hızlı sıcak modül değişimi (HMR), optimize edilmiş üretim yapıları ve JSX için otomatik derleme gibi avantajlar sunar.

HTML `<span>` etiketi şu işlerde kullanılır: 1. Metin üzerinde stil uygulama: Metnin belirli bir bölümüne renk, yazı tipi veya font büyüklüğü gibi stil özellikleri eklemek için idealdir. 2. Metin içinde gruplama: Belirli bir metin parçasını grup haline getirip ona ayrı bir stil veya özellik eklemek için kullanılır. 3. JavaScript ile etkileşim: Dinamik web sayfaları oluştururken `<span>` etiketini JavaScript ile etkileşimli hale getirerek, kullanıcı bir öğeyi tıkladığında içeriğin değiştirilmesini sağlamak mümkündür. Ayrıca, `<span>` etiketi, CSS ile birlikte kullanılarak hover efektleri, animasyonlar ve diğer dinamik özellikler oluşturulabilir.

JavaScript'te `eval()` yerine kullanılabilecek bazı alternatifler şunlardır: 1. Function Constructor: Bu yöntem, bir string'den yeni bir fonksiyon oluşturur ve dinamik kod yürütme imkanı sunar. ```javascript const dynamicCode = "return 2 + 2;"; const sumFunction = new Function(dynamicCode); const result = sumFunction(); // Çıktı: 4 ``` 2. JSON.parse(): JSON verilerini değerlendirmek için güvenli bir alternatiftir. ```javascript const jsonString = '{"name": "John", "age": 30}'; const userObject = JSON.parse(jsonString); // Çıktı: {name: "John", age: 30} ``` 3. Template Literals: Dinamik string oluşturma için güvenli ve okunabilir bir yöntemdir. ```javascript const a = 5; const b = 10; const resultString = `The sum of ${a} and ${b} is ${a + b}.`; // Çıktı: The sum of 5 and 10 is 15. ```

Node.js için ileri seviye JavaScript bilgisi gereklidir. Bu, aşağıdaki konuların anlaşılmasını içerir: Asenkron Programlama: Callback'ler, promises ve async/await fonksiyonları gibi asenkron kod yazma. ES6 ve Ötesi: ECMAScript 2015 ve sonraki sürümlerin kullanımı. Node Package Manager (NPM): Paket yönetimi ve modüllerin kullanımı. Node.js Çerçeveleri: Express.js gibi çerçevelerin kullanımı. Ayrıca, veritabanı entegrasyonu, RESTful API tasarımı ve HTTP protokolü gibi backend konuları da önemlidir.

React, JavaScript programlama dilinde yazılmış bir kütüphanedir.

Vue.js için gerekli kurulum adımları şunlardır: 1. Node.js ve npm'in yüklü olması: Vue.js, Node.js ve npm (Node Paket Yöneticisi) gerektirir. Bunları resmi Node.js web sitesinden indirebilirsiniz. 2. Vue CLI'nin yüklenmesi: Vue CLI (Komut Satırı Arayüzü), Vue.js projelerini oluşturmak ve yönetmek için kullanılır. Terminal veya komut istemcisinde aşağıdaki komutu çalıştırarak global olarak yükleyin: `npm install -g @vue/cli`. 3. Yeni bir Vue projesi oluşturulması: Vue CLI kurulduktan sonra, aşağıdaki komutu kullanarak yeni bir Vue.js projesi oluşturun: `vue create proje-adı`. 4. Proje klasörüne geçiş: Proje oluşturulduktan sonra, `cd proje-adı` komutunu kullanarak proje klasörüne gidin. 5. Geliştirme sunucusunun çalıştırılması: Projeyi başlatmak için `npm run serve` komutunu çalıştırın.

Bun ve Node.js aynı değildir, ancak Bun, Node.js'ye alternatif olarak geliştirilmiştir. Bazı temel farklar: - Performans: Bun, JavaScriptCore motoru sayesinde daha hızlı başlatma ve çalışma süresi sunar. - Boyut ve Bağımlılıklar: Bun, daha hafif bir runtime olup, daha az kod ve bağımlılıkla gelir. - Entegre Araçlar: Bun, paket yöneticisi, bundler ve test koşucusu gibi entegre geliştirme araçları sağlar. - Ecosystem: Node.js, daha olgun bir ekosisteme ve geniş bir topluluk desteğine sahiptir. Bun, mevcut Node.js projeleriyle uyumlu olacak şekilde tasarlanmış olsa da, tüm Node.js API'lerini tam olarak desteklemez ve bazı modüllerle uyumsuzluklar olabilir.

Next.js kullanmak için aşağıdaki adımları izlemek gerekmektedir: 1. Node.js ve npm'i kurun: Next.js, Node.js 18.18 veya daha yeni bir sürüm ve npm ile çalışır. 2. Yeni bir Next.js projesi oluşturun: `npx create-next-app@latest` komutunu kullanarak yeni bir proje başlatın. 3. Gerekli bağımlılıkları yükleyin: `npm install next react react-dom` komutunu kullanarak gerekli paketleri yükleyin. 4. Geliştirme sunucusunu başlatın: `npm run dev` komutunu kullanarak geliştirme sunucusunu çalıştırın. 5. Uygulamayı görüntüleyin: Tarayıcınızda http://localhost:3000 adresine giderek uygulamayı görün. Next.js'in bazı temel özellikleri: - SSR (Server-Side Rendering): Sayfaların sunucu tarafında oluşturulmasını sağlar, bu da SEO performansını artırır. - Dosya tabanlı rota yönetimi: Routing, dosya sistemine göre yapılır, her dosya bir rotaya karşılık gelir. - Otomatik kod bölme: Uygulamanın sadece gerekli kod parçalarının yüklenmesini sağlar, performansı artırır. - TypeScript desteği: TypeScript ile geliştirme yaparak tip güvenliği ve gelişmiş bir geliştirme deneyimi sunar.

Express kullanarak dosya indirme işlemi `res.download()` yöntemi ile yapılır. Temel kullanım örneği: ```javascript res.download('/path/to/file.pdf'); ``` Bu örnekte, `/path/to/file.pdf` yolundaki dosya istemciye indirme olarak gönderilecektir. Özel dosya adı belirleme: İndirilecek dosyanın adını değiştirmek için ikinci bir argüman kullanılabilir: ```javascript res.download('/path/to/file.pdf', 'custom_name.pdf'); ``` Bu durumda dosya, `file.pdf` yerine `custom_name.pdf` adı ile indirilecektir. Hata işleme: İndirme işlemi sırasında oluşabilecek hataları yakalamak için bir callback fonksiyonu sağlanabilir: ```javascript res.download('/path/to/file.pdf', 'custom_name.pdf', function (err) { if (err) { // Hata işleme } else { // İndirme tamamlandıktan sonra yapılacak işlemler } }); ``` Ayrıca, Express 4.16.0 sürümünden itibaren `options` parametresi kullanılarak indirme işleminin daha fazla özelleştirilmesi mümkündür: ```javascript const options = { headers: { 'x-timestamp': Date.now(), 'x-sent': true } }; res.download('/path/to/file.pdf', 'custom_name.pdf', options, function (err) { if (err) { // Hata işleme } else { // İndirme tamamlandıktan sonra yapılacak işlemler } }); ```

Textarea elementinin bazı örnekleri şunlardır: 1. Geri Bildirim Formu: Kullanıcıların düşüncelerini veya önerilerini serbestçe ifade edebilmeleri için feedback kutularında kullanılır. Örnek kod: ```html <label for="feedback">Sizin geri bildiriminiz:</label><br> <textarea id="feedback" name="feedback" rows="6" cols="50"></textarea> ``` 2. İletişim Formu: Mesaj bölümü için kullanılır. Örnek kod: ```html <form action="/submit" method="post"> <label for="message">Mesaj:</label><br> <textarea id="message" name="message" rows="5" cols="40"></textarea> <br><button type="submit">Gönder</button> </form> ``` 3. Yorum Bölümü: Blog yazıları, forumlar ve topluluk sayfalarında yorum veya yanıt göndermek için kullanılır. Örnek kod: ```html <p>Yorumunuzu bırakın:</p> <textarea rows="4" cols="60" placeholder="Yorumunuzu buraya yazın..."></textarea> ``` 4. JavaScript ile Dinamik Kullanım: JavaScript kullanılarak metin alanına örnek veri doldurulabilir. Örnek kod: ```html <textarea id="notes" rows="4" cols="40"></textarea> <button onclick="updateTextarea()">Örnek metin doldur</button> <script> function updateTextarea() { document.getElementById("notes").value = "Bu, JavaScript ile eklenen örnek bir metindir."; } </script> ```

SSR (Server-Side Rendering), bir web uygulamasının sunucu tarafında işlenerek kullanıcılara statik bir HTML belgesi olarak sunulması tekniğidir. Diyot.net üzerinde SSR ile ilgili spesifik bir bilgi bulunmamakla birlikte, bu tekniğin genel avantajları şunlardır: Daha hızlı yükleme süreleri: Sayfalar sunucuda oluşturulduğundan, tarayıcının içeriği ekrana yüklemesi daha kısa sürer. İyileştirilmiş SEO: Arama motorları, statik HTML dosyalarını daha kolay tarar ve dizine ekler. Erişilebilirlik: JavaScript’in devre dışı olduğu durumlarda bile temel içerik görüntülenebilir. Geliştirme kolaylığı: Ön yüzde işlenmesi gereken JavaScript kod yoğunluğu azalır. SSR, React, Angular, Next.js gibi popüler JavaScript framework’leri ile birlikte kullanılır.

JavaScript'te iki ana tür metod vardır: string metodları ve nesne metodları.

Elif Nur Türk, JavaScript, TypeScript, Node.js, Vue.js, Nuxt.js, React ve Next.js gibi yazılım dillerini kullanmaktadır.

Web sitesinde sayfalar arası geçiş yapmak için HTML'de `<a>` etiketi kullanılır. Örnek bir geçiş kodu: ```html <a href="sayfa2.html">Sayfa 2'ye Git</a> ``` Bu kodda: - `sayfa2.html`: Bağlantının hedef sayfası; - "Sayfa 2'ye Git": Kullanıcıya gösterilecek bağlantı metnidir. Ayrıca, React gibi JavaScript kütüphaneleri kullanarak da dinamik ve kullanıcı etkileşimli sayfa geçişleri sağlanabilir.

JavaScript'te özel semboller, nesne özellikleri için benzersiz tanımlayıcılar oluşturmak amacıyla kullanılır. Sembolleri kullanmak için aşağıdaki adımlar izlenir: 1. Sembol Oluşturma: `Symbol()` fonksiyonu ile yeni bir sembol oluşturulur: ```javascript const mySymbol = Symbol("my description"); ``` 2. Sembolü Anahtar Olarak Kullanma: Semboller, nesnelerde anahtar olarak kullanılabilir, ancak JSON'da özellik adları olarak kullanılamaz: ```javascript const obj = { [mySymbol]: "bar" }; // {} ``` 3. Yineleyici Olarak Kullanma: İyi bilinen `Symbol.iterator` sembolü, yineleyici olarak kullanılabilir: ```javascript const arr = [1, 2, 3]; const it = arr[Symbol.iterator](); // { value: 1, done: false } ``` 4. Global Semboller: `Symbol.for()` fonksiyonu ile global semboller oluşturulabilir ve bu semboller, kodun farklı bölümlerinde paylaşılabilir: ```javascript let ssn = Symbol.for('ssn'); ```

preventDefault() fonksiyonu, JavaScript'te bir olayın varsayılan davranışını durdurmak için kullanılır. Bu fonksiyonun bazı kullanım alanları: Link Tıklamaları: Bir kullanıcı linke tıkladığında, varsayılan davranış linke giden bir yönlendirme yapmaktır. Form Gönderimleri: Form gönderildiğinde, varsayılan davranış formu sunucuya göndermek ve sayfayı yeniden yüklemektir. Anahtar Basışları: Belirli tuş basışları için, varsayılan davranışı (örneğin, kaydırma veya kısayol tetikleme) önlemek ve özel eylemler gerçekleştirmek için kullanılır. preventDefault() fonksiyonu, web uygulamalarının daha etkileşimli ve kullanıcı dostu olmasını sağlar.

ESLint, JavaScript kodunda statik analiz yaparak sorunları tespit eden bir araçtır. Şunları sağlar: Kod kalitesini artırır: Syntax hataları, biçimlendirme sorunları ve potansiyel bugs gibi yaygın hataları yakalar. Kod tutarlılığını sağlar: Takım üyelerinin aynı kodlama standartlarına uymasını sağlayarak kodun daha okunabilir ve anlaşılır olmasını sağlar. En iyi uygulamaları teşvik eder: Modern JavaScript özelliklerini ve en iyi kodlama uygulamalarını kullanmaya yönlendirir. Özelleştirilebilir kurallar: Projenin ihtiyaçlarına göre kuralların yapılandırılmasına, eklenmesine veya değiştirilmesine olanak tanır. Entegrasyon kolaylığı: Çeşitli geliştirme araçları ve editörlerle entegre olarak gerçek zamanlı geri bildirim sunar.

JavaScript'te `eval()` fonksiyonu, bir string şeklindeki JavaScript kodunu değerlendirip çalıştırır. Kullanım alanları: - Dinamik kod yürütme: Kodun dinamik olarak oluşturulması ve çalıştırılması gereken durumlarda kullanılır. - JSON parsing: JSON verilerinin ayrıştırılmasında, `JSON.parse()` metoduna alternatif olarak kullanılabilir. Güvenlik riskleri: `eval()`, herhangi bir JavaScript kodunu çalıştırdığı için, kod enjeksiyonu gibi güvenlik açıklarına yol açabilir.

Flatpickr Türkçe yapmak için aşağıdaki adımları izleyebilirsiniz: 1. Yerelleştirme Dosyasını İçe Aktarma: `flatpickr/dist/l10n/tr.js` dosyasını içe aktararak Türkçe lokalizasyonu kullanabilirsiniz. 2. Instance Düzeyinde Yerelleştirme: `locale` seçeneğini kullanarak belirli bir instance için Türkçe'yi ayarlayabilirsiniz. Örneğin: ```javascript flatpickr('.burayaclassismi', { locale: { weekdays: { longhand: ['Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi'], shorthand: ['Paz', 'Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt'] }, months: { longhand: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'], shorthand: ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'] }, today: 'Bugün', clear: 'Temizle' } }); ``` 3. Küresel Yerelleştirme: Tüm instancesler için Türkçe'yi varsayılan yapmak üzere `flatpickr.localize()` fonksiyonunu kullanabilirsiniz.