#Javascript'te

[burakbuluut]

JavaScript NEDİR?

Bu yazımda sizlere günümüzde çok kullanılan dinamik programlama dillerinden bahsedeceğim :) Temel olarak web geliştirmeye yeni başlayan geliştiriciler içindir. Kariyerine başlayan insanlar genellikle soru soruyor - neden JavaScript varken jQuery? veya JavaScript ile jQuery arasındaki fark nelerdir? Hangisini kullanmak daha iyidir? Gibi sorularla karşılaşılabiliyor. Kafanızdaki soru işaretlerine çözüm bulmak için gelin yazıma bir göz atalım. Önce JavaScript'in ne olduğuna bakalım; JavaScript NEDİR? JavaScript (JS) dinamik bir programlama dilidir. Tercüme edilmiş bir dildir. İsimsiz talihsizlikler dışında, Java programlama dili ile ilgisi yoktur. Adından da anlaşılacağı gibi, JavaScript bir betik dilidir. En sık kullanıcı ara yüzüne (hareketli nesneler, ekrandaki gösterişli unsurlar gibi), kullanıcı etkileşimlerine (müşteri tarafında doğrulama, açılır pencereyi gösterme vb.) Daha dinamik kullanım sağlamak ve kullanıcıya gösterilen sayfa içeriğini göstermek için kullanılır. JavaScript'i desteklemek için tarayıcıya eklemeniz gereken hiçbir şey yok. Bunun nedeni, doğuşundan beri internetin dili olarak kabul edildi. Herhangi bir eklenti olmadan tüm modern tarayıcılarda çalışır. JavaScript ile örnek bir değişken görelim; Çoğu programlama dili dinamik davranışa sahiptir. Fakat JavaScript durumunda hemen hemen her şey dinamiktir. Tüm değişkenler tür ve varoluş bakımından dinamiktir. Bir değişken örneği;var  blog =  "Merhaba Dünya!" ;   var blog = "Merhaba Dünya!" ; JavaScript'te yazılmış kod dinamiktir, çalışma zamanında bir değişken oluşturabilirsiniz ve çalışma zamanında tür belirlenir. Çalışma zamanında yeni işlevler oluşturabilir veya mevcut işlevleri değiştirebilirsiniz. Daha fazla komut dosyası yüklendiğinde tarayıcıya yeni kodlar eklenir ve istediğiniz zaman istediğiniz sayıda dosya ekleyebilirsiniz

Burdan Jquery ile ilgili yazıma ulaşabilirsiniz :) Read the full article

[miratcan]

Javascript ve Nesnel Programlama Notlarım

Bu yazıyı bitmiş bir makale değil de benim tuttuğum notlardan oluşan bir yazı olarak düşünmek daha doğru. O yüzden bölük bölçük ve bitmemiş durumda zamanla düzelte düzelte adam edeceğim.

Baya bir süredir Javascript kullanırım ancak bu kullanım var olan JQuery pluginlerini doğru dürüst entegre etmek, gerekirse bir iki fonksiyon yazmaktan öteye geçmez. Son bir iş var yapmam gereken ve pek öyle basit bir iş değil adam akıllı bir MVC yapısı kurmam, gerekli. Önce Backbone.js kullanmayı denesem de, Backbone'un view katmanının DOM elemanlarını manuple edecek şekilde hazırlanmış olması işi bozdu. Zira benim yapacağım iş kullanıcıya canvas üzerinde bir takım resimler çizdirmek.

Javascript ile Nesne Yönelimli Programlamaya dair tuttuğum notlar şu şekilde

Variable Scope (Değişken Kapsamı)

Javascript değişkenlerin nerede görünür nerede görünmez olduğuna function scope (fonksiyon kapsam) kullanarak karar veriyor. Yani her değişken kendi içinde bulunduğu fonksiyon içerisinde görünür durumda. Ancak iç içe geçmiş fonksiyonlarda  içerideki bir değişken kullanıldığı zaman önce fonksiyon içerisinde, eğer bulunamaz ise dıştaki fonksiyonda aratılıyor.

Aşağıdaki örnekte bir myvar adlı bir değişken var, bu global bir değer en tepede duruyor. is_exists() fonksiyonu çağırıldığı zaman önce fonksiyon içerisinde aranıyor, bulunamadığı için bir üste yani global katmanına çıkılıyor. Orada bulunduğu için myvar görüntüleyebiliyoruz.

var myvar = "here i am!"; function is_exists() { console.log(myvar); }; is_exists(); > here i am!

Global değişken görülmüyor olsa da eğer fonksiyonları iç içe kullanır isek, alttaki fonksiyon üsttekine ait değişkenleri görebiliyor. Aşağıdaki örnekte outer fonksiyonunu çağırıyoruz, o da değer olarak kendi içindeki inner fonksiyonunu döndürüyor. inner fonksiyonu outer'a ait myvar değerini getiriyor.

function outer() { var myvar = "here i am!" function inner() { console.log(myvar); } return inner(); }; outer(); > "here i am!"

Fonksiyon Tanımlamaları

Javascript'te klasik fonksiyon tanımlamaları mümkün, bunun yanında bir de anonim (isimsiz) fonksiyonlar var. Anonim fonksiyonlar genelde bir değer üzerine atanarak kullanılıyor ya da başka fonksiyonlara parametre olarak gönderiliyor. (evet biraz kafa karıştırıcı olmaya başladı)

Aşağıdaki bir klasik fonksiyon oluşturma örneği:

function nameOfFunction(listOfVariableNames) { ... ... } var a = nameOfFunction();

Bu fonksiyonun yaptığı işlemin sonucunu bir a değişkenine atadık. Eğer istersek tekrar kullanabilir, başka bir değişkene de atayabiliriz.

Aşağıdaki ise isimsiz bir fonksiyon

b = function(listOfVariableNames) { ... ... };

Burada fonksiyonumuzu b değişkenine atamış oluyoruz ancak atamayabilirdik. Bir fonksiyon diğerine parametre olarak verildiğinde kullanılıyor genelde bu özellik.

Nesneler

Javascript her ne kadar kendini nesnel bir programlama dili olarak tanıtsa da Javascript'de her şey nesne değil. İlkel değerlere (undefined, null, boolean, string ve number) sahip. İlginçtir ki bu ilkel değerlere objeymiş gibi davranır, her hangi bir metodunu çağırmaya kalkarsanız; ilkel değer, nesneye düşüyor (fall back) ve metod çağırılıyor.

var a = "hi!" // bu bir string, yani ilkel değer console.log(a.length); // burada fall back işlemi gerçekleşiyor, objeye dönüşüyor > 3

İkinci bir gariplik ise Javascript'de sınıf kavramının bulunmayışı. O_o

Ancak türetme işlerini bir obje oluşturup buna ait metodları ve özellikleri yine de başka objelere aktararak halledebiliyoruz.

Javascript'de bir obje oluşturmanın en kısa yolu şu şekilde:

var ninja = { name: 'Shadow Warrior' health: 100, swing_sword: function() { alert("swosh!"); } }; ninja.swing_sword();

ninja adında bir obje oluşturmuş olduk. İçindeki swing_sword (kılıç salla) metodunu kullandık. Ancak bunu oluştururken dict nesnesini baz alarak oluşturduğumuz için her ne kadar boş bir nesne oluşturduk gibi gözükse de dict objesinin metodları ile birlikte gelmiş oluyor.

İnşa Edici Fonksiyonlar (Constructor Functions) ve New ifadesinin kullanımı.

Adından da anlaşılacağı üzer inşa edici fonksiyonlar sizin nesneleri inşa etmenizi sağlayan fonksiyonlar oluyor. Bizim nesneleri dinamik bir biçimde inşa edebilmemizi sağlıyor. Örneğin bir kaç ninja nesnesine ihtiyaç duymuş olalım ve bunların name ve health değerleri birbirinden farklı olsun. Bu durumda uzun uzun yazmak yerine aşağıdaki gibi bir yol izleyebiliriz.

function NinjaConstructor(name, health) { this.name = name; this.health = health; this.swing_sword: function() { alert("swosh!"); } } var ninja1 = new NinjaConstructor('mirat', 100); var ninja2 = new NinjaConstructor('osman', 62); console.log(ninja1.name, ninja1.health); > mirat, 100 console.log(ninja2.name, ninja2.health); > osman, 62

Burada new ifadesi dikkatinizi çekmiştir, bu ifade al bu fonksiyondan obje üret demek için kullanılıyor. new ifadesini kullanmasaydık atadığınız değerler fonksiyonun kendisi olacaktı.

İnşa edici fonksiyonumuzu (NinjaConstructor) yazdıktan sonra aslında fonksiyonun ürettiği özellik ve metodları üretilen nesnelere aktardığımız için bir nebze miras alma-verme mevzusunu çözmüş oluyoruz. Ancak yine de bazı durumlarda bu yeterli olmaya biliyor.

Miras Mevzusu (Prototypal Inheritance)

Javascript miras alma işlerini nesnelerin içine yerleştirdiği prototype adındaki başka bir objeyi kullanarak hallediyor. Siz nesne içindeki bir özelliği ya da metodu çağırdığınızda eğer yok ise, prototipine bakılıyor, orada da yok ise undefined döndürüyor. Şöyle,

// bu a nesnesini, prototip olarak kullanacağım: class a = { hello: function () { alert("hello!") }, } // bu da miras alacak şahıs: class b = { bye: function () { alert("goodbye!") }, } // şu anda b nesnesi hello fonksiyonuna sahip değil console.log(b.hello) > undefined // b nesnesinin prototipini a olarak belirliyorum b.__proto__ = a // hello fonksiyonunu çağırdığımda önce b objesine bakılacak // bulunamadığı için prototipine gidilecek, oradaki metod çalıştırılacak. b.hello() > hello!

Bu arada yeri gelmişken hemen belirtmek gerekir ki new ifadesi ise aslında yeni bir obje oluştururken, ona verdiğiniz inşa edici fonksiyonun prototipine bakıyor.

[eciftcomtr]

Javascript'te nasıl HTTP isteği yapabilirim?

Javascript'te nasıl HTTP isteği yapabilirim? ​fetch() işlev veya XMLHttpRequestjavascriptKodu kopyalaÜretmeyi durdurfetch()bir HTTP GET isteği yapmak için nasıl kullanılacağına dair bir örnek: javascriptKodu kopyala fetch('https://example.com/api/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); Buhttps://example.com/api/datahttps://example.comthen() yöntem şu şekildedircatch() bir hata varsa yöntem çağrılır. Alternatif olarak, XMLHttpRequestnesneyi yapmak için kullanabilirsiniz javascriptKodu kopyala const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://example.com/api/data'); xhr.responseType = 'json'; xhr.onload = function() { console.log(xhr.response); }; xhr.onerror = function() { console.error('Error making request.'); }; xhr.send(); Bu kodhttps://example.com/api/data ve bir JSON yanıtı bekliyor. onload()Yanıt alındığında işlev çağrılır,onerror() bir hata varsa işlev çağrılır. Yanıt kullanılarak erişilirresponse XMLHttpRequestnesnenin özelliği. ​XMLHttpRequest nesne veya daha yeni fetchAPI. İşte her yöntemi kullanarak basit bir GET isteğinin nasıl yapılacağına dair bir örnek:   Xmlhttprequest'i kullanma: javascriptKodu kopyala const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1'); xhr.onload = function() { if (xhr.status === 200) { console.log(xhr.responseText); } else { console.error('Request failed. Returned status of ' + xhr.status); } }; xhr.send(); Getirme özelliğini kullanma: javascriptKodu kopyala fetch('https://jsonplaceholder.typicode.com/posts/1') .then(response => { if (!response.ok) { throw new Error('Request failed.'); } return response.json(); }) .then(data => { console.log(data); }) .catch(error => { console.error(error); }); Her iki yöntem de eşzamansızdır, bu nedenle şunları yapmanız gerekirXMLHttpRequest yöntemonload, olay işleyicisini şu şekilde ayarlamanızı gerektirirfetch yöntem, zincirleyebileceğiniz bir Söz döndürürthencatch yanıt veya hataları sırasıyla işleme yöntemleri. Read the full article