Kişisel web tasarım ve kodlama blogu. Web tasarımı ve kodlama araçları ile ilgili bilgiler ve yardımcı dökümanlar.

Kod yazmak sanattır...

gokhankr.com

Blogger tarafından desteklenmektedir.

Javascript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Javascript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Javascript "Computed Propery Name"


Javascript Computed Property Name

Computed Property Name

ES6’nın "Computed Propery Name" özelliği, bir nesnede bir özellik adı olarak hesaplanacak bir ifadeye (bir değişken veya işlev çağrısı gibi tek bir değerle sonuçlanan bir kod parçası) sahip olmanızı sağlar.

Örnek Kodlama

Örneğin, iki bağımsız değişken (anahtar, değer) alan ve bu bağımsız değişkenleri kullanarak nesne döndüren bir fonksiyon oluşturmak istediğinizi varsayalım. Nesnedeki özellik adı bir değişken (anahtar) olduğundan, önce nesneyi oluşturmanız, ardından bu özelliği değere atamak için köşeli ayraç gösterimi kullanmanız gerekirdi.


function nesneYap (key, value) {
  let obj = {}
  obj[key] = value
  return obj
}

nesneYap('name', 'Kaan') // { name: 'Kaan' }

Ama artık Computed Propery Name ile bir nesneyi önce oluşturmak zorunda kalmadan, doğrudan nesne üzerinde bir özellik olarak atamak için nesne değişmez gösterimini kullanabilirsiniz. Yani yukarıdaki kod artık bu şekilde yeniden yazılabilir.


function nesneYap (key, value) {
  return {
    [key]: value
  }
}

nesneYap('name', 'Kaan') // { name: 'Kaan' }

Anahtar, köşeli parantez [ ] içine alındığı sürece herhangi bir şey olabilir.

Vuex Store - Mutations ve Vue.js Reaktivitesi


Mutasyonların Vue'nun Reaktivite Kurallarına Uyması

Bir Vuex mağazasının state'i Vue tarafından reaktif hale getirildiğinden, state üzerinde değişiklik yaptığınızda durumu gözlemleyen Vue bileşenleri otomatik olarak güncellenecektir. Bu aynı zamanda Vuex mutasyonlarının düz Vue ile çalışırken aynı reaktivite uyarılarına tabi olduğu anlamına gelir. 

Yani CLI üzerinden değil de, web üzerinde kullanmış olduğunuz Vue örneği ile Store üzerinde commit işlemi yapacağınız zaman karşınıza Vue'nun reaktivitesi sorunu çıkacaktır. Değişim yaptığınız veri ile değişen verileriniz birbirleri ile reaktif bir şekilde çalışacağından iki veri arasında bir bağ kurulmuş olacak ve siz store üzerinde değişiklik yapmadığınız halde değişim yapmış olduğunuz veri üzerinde değişiklik yaptığınızda Store üzerindeki veri de bundan etkilenecektir. Aşağıdaki örnekleri inceleyelim.


state: {
    user: {
      id: 1
    }
},

Yukarıdaki user'a bir mutation uygulayalım.


mutations: {
    setUserName (state, userData) {
        // userData = {
        //     id: 2,
        //     name: Ali
        //}
        state.user = userData;
}

Yukarıda gördüğünüz gibi "userData"yı direk "user"a mutate ettik. Şimdi "userData" yı bir Vue bileşeni içerisinde "userData.name = Veli" yaparsak, Store üzerindeki "user.name" de değişmiş olacak. Bu yüzden aşağıdaki yöntemler ile bu sorunu aşmanız gerekir.

state: {
    user: {
      id: 1
    }
  },
  getters: {
    getUserId: state => state.user.id,
    getUserName: state => state.user.name
  },
  mutations: {
    setUserName (state, name) {
      // İlk çözüm:
      // user üzerinde değeri önceden belirtin örn: user.name = null ve şöyle görünmeli
      // user: {
      //     id: 2,
      //     name: null
      // }
      // Böylelikle "name" daha önceden belirtildiği için Vue içerisindeki değişiklik
      // burayı tetiklemeyecek
      state.user.name = name

      // İkinci çözüm:
      // Object assign methodu ile her iki verinin de referansını sıfırlayın
      // Object.assign({}, state.user, { name })
      state.user = { ...state.user, name }

      // Üçüncü çözüm:
      // Vue'nun kendi içerisindeki Vue.set() fonksiyonunu kullanın.
      // Aynı sonucu verecektir.
      Vue.set(state.user, 'name', name)
}

Vue'nun reaktivitesinin Mutations üzerindeki etkisini ve bunun bir sorunken üç farklı yol ile çözümüne değindik. Tekrar hatırlatmakta fayda var bu sorun tam olarak düz Vue kullanırken karşılaşabileceğiniz bir durum. CLI üzerinde böyle bir sorun yaşamayacaksınız. Bir sonraki yazımda Mutatitonsların sabitler ile kullanımına değineceğiz. Teşekkürler.

Vuex Store - Mutations Kavramı ve Anlatımı


Bir Vuex mağazasında State üzerindeki veriyi değiştirmenin tek yolu bir mutasyon gerçekleştirmektir. Mutasyon içerisinde bir fonksiyon oluşturduğumuzda State'i ilk argüman olarak alır:


const store = new Vuex.Store({
  state: {
    miktar: 1
  },
  mutations: {
    artir (state) {
      // State üzerindeki "miktar"ı güncelle
      state.miktar++
    }
  }
})

Bir mutasyonu doğrudan nesne adı ile çağıramazsınız. Bunun için store.commit("") fonksiyonunu çağırmanız gerekir.


store.commit('miktar')

Veriyi Commit Etmek

Store.commit'e payload(güncelleyeceğiniz veri) olarak adlandırılan ek bir bağımsız değişken iletebilirsiniz:


mutations: {
  increment (state, payload) {
    state.miktar += payload.sayi
  }
}

Payload güncel olarak değişim yapacağınız data'dır.


store.commit('artir', {
  sayi: 10
})

Nesne Tarzında Commit Yapmak

Bir mutasyonu gerçekleştirmenin alternatif bir yolu, type özelliği olan bir nesneyi doğrudan kullanmaktır:


store.commit({
  type: 'artir',
  sayi: 10
})

Yukarıda commit() içerisine sadece bir nesne ekledik ve daha önce birinci parametrede belirttiğimiz mutasyon adını bu sefer type değeri ile ekledik. Vuex de adı type üzerinden aldı. Bu durum mutasyonun daha önceki yapısı üzerinde de bir değişiklik yapmanızı gerektirmez. Yani aynı işlemi yapmış olduk.

Mutasyonların nasıl işlediğine ve kullanıldığına değindik. Mutasyon kullanımını üç farklı makalede ele alacağız. Bir sonrakinde Vue'nun reaktivite sisteminin Mutasyonlar üzerindeki etkisini inceleyeceğiz.

.map dosyaları nedir, ne işe yarar ?


Web sayfanıza bir Javascript kütüphanesi eklediğinizde aşağıdaki gibi bir uyarıyı gözlemleyebilirsiniz. Çünkü sizden .min.x.js eklemesi yaptığınızda sonu .map uzantılı bir dosya isteyecektir.

Web üzerinde .map dosyaları Javascript, CSS ve Typescript dosyaları için kullanılmaktadır. Bu dosyalar kaynak haritaları olarak adlandırılırlar. Peki ne amaçla kullanılmaktadırlar.

Angular.js gibi bir kütüphane dosyasını minify ettiğinizde, elinizdeki düzenli kodu verip yerine okunamayacak biçimde yani sözdeyimi çirkin hale getirilmiş boşluklarından arındırılmış biçimini alırsınız. Uygulamanız üretim modunda yani projenin sunum halinde bir hata oluştuğunda kaynak haritası minify edilmiş dosyanızı otomatik olarak alacak ve kodun orjinal sürümünü görmenize izin verecektir. Bunu görmek için bir örnek uygulamakta fayda var.

.map Dosyasını Kullanmak

Örnek vermek gerekirse sitemizde Bootstrap kullanıyor olalım. Bootstrap içerisinde bootstrap.min.js ve bootstrap.min.js.map dosyalarını dist/js içerisinden site dizinimize atalım. İndirdiğiniz arşiv içerisindeki js/src altındaki dosyaları site dizininizde bir /maps klasörü oluşturun ve içerisine atın. Ardından .map dosyanızı editörde açın ve içerisindeki "../../js/src/" kaynak yollarının hepsini oluşturduğunuz /maps dizini yolu ile değiştirin.

Şimdi bootstrap.min.js dosyamızı <script> etiketi ile çağıralım. Siteyi açtığınızda Console altında .map dosyası için bir hata ile karşılaşmayacaksınız çünkü tarayıcı .min.js ile aynı dizinde olan .map dosyasını otomatik olarak tespit edecektir.

Ardından Geliştirici Araçlarının,  Sources panelinden bootstrap.min.js dosyasını bulup açtığınızda dosya içerisinde şöyle bir uyarı ile karşılaşacaksınız.

"Source Map detected". Yani .map dosyası tespit edildi. Bu uyarıyı gördüğünüze göre şimdi Ctrl+P ile dosya denetleyicisi penceresini açın ve oradan bir Bootstrap dosyası olan modal.js dosyasını açın. Dosyayı açtığınızda artık debug yapmak istediğinizde, buradan sorunun tam olarak nerede olduğunu dosyanın orjinali üzerinden tespit edebileceksiniz.

Aynı durum CSS için de geçerlidir. SASS ve SCSS dosyalarımızın kaynak haritasını da çıkartarak bu işlemi uygulayabiliriz.

Bir geliştirici bu işlemi nasıl uygulayabilir ?

Bir üretim uygulamasında hata ayıklamak için kullanırsınız. Geliştirme modunda, Angular'ın tam sürümünü kullanabilirsiniz. Üretimde, minify edilmiş sürümü kullanırsınız.

Kaynak haritası kullanmak zorunda mıyım ?

Üretim kodunda daha kolay hata ayıklamayı önemsiyorsanız, evet, yapmalısınız.

Map dosyası ile ilgili açıklamalar bu kadardı, bir sonraki makalede görüşmek üzere.

Vuex Store - State Kavramı ve Anlatımı


Daha önce Vuex Store'a bir giriş yapmış ve bir Vuex Store örneğini incelemiştik. Oradaki dört bölümden kısaca bahsetmiştik. Bunlar State, Getters, Mutations ve Actions'tı.

State Management Pattern

Vuex bir State Management Pattern yani bunu çevirmeyeceğim ama şöyle söyleyeyim Veri yönetimi kütüphanesidir. Bir devlet düşünün çatısı altında her şey yönetilir, işte State burada devlet konumundadır ve aynı zamanda hem uygulama içerisindeki veriyi hem de kendi kendini yöneten anlamına gelmektedir.

State kavramını anladığımıza göre Vuex'in işlevine geçelim. Vuex tam olarak veriyi veya verileri istediğiniz bir biçimde merkezi bir yapı içerisinde yönetmenizi sağlar. Yani kısaca tüm uygulama içerisinde bir merkezi depo görevi görür. State kavramını yukarıda açıklamıştım. Şimdi tam olarak çalışma sisteminden bahsedeceğim.


import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    isim: "Gokhan"
  },
  mutations: {
    ismiDegistir (state, data) {
      state.isim = data
    }
  }
})

Yukarıdaki bizim Vuex örneğimiz. Şimdi herhangi bir component içerisinde State'deki isim değerini alalım.

State Verisine Erişim


computed: {
  isim() {
    return this.$store.state.isim
  }    
}

Bildiğiniz gibi computed özelliği Vue'nun reaktivitesine dahil olmadığı için tekrar tekrar hesaplamaya dahil edilmiyor. Store içerisinden veriyi almak için de computed kullanılıyor. Çünkü set/get mantığıyla değil sadece get mantığı ile çalışıyor. Artık "isim" adında bir datamız var ve istediğimiz şekilde kullanabiliriz.

State Verisi Üzerine Değişim Uygulama

Önceki yayında mutationsların state üzerindeki veriyi değiştirmek yani mutasyona uğratmak için kullanıldığından bahsetmiştim. "ismiDegistir" adında bir mutations'ımız var. Şimdi state.isim'e yeni bir değer atayalım. Bunun için Vue örneği içerisinde daima this.$store.commit() fonksiyonunu kullanacağız.


methods: {
  yeniIsim(isim) {
    this.$store.commit('ismiDegistir', isim);
  }
}

Fonksiyon adları karışmasın diye method adını "yeniIsim" olarak kullandım. this.yeniIsim("Adınız") biçiminde artık Store üzerindeki veriyi değiştirebilirsiniz.

 

State üzerindeki verinin nasıl alındığını ve mutasyona uğratıldığını anlattım. Bir sonraki yazımda da Getters özelliğine geçeceğiz. 

Polyfill nedir, ne için kullanılır ?


Web platformu üzerindeki ilerleyen zamanlarınızda karşınıza Polyfill adında bir kavram çıktı. Nedir bu Polyfill ve ne demektir ?

PolyFill Kavramı

Polyfill, kısaca tanımlamak gerekirse yazmış olduğunuz kodlarınızın eski tarayıcılarda da çalışmasını sağlamak için ayrıca üretmiş olduğunuz destekleyici yazılımlara denir.

Tüm dünyada kullanılan birçok farklı tarayıcı ve tarayıcı sürümü vardır, her biri diğerlerinden biraz farklı özelliklere sahiptir. Bu, tarayıcılar için geliştirmeyi zor bir görev haline getirebilir. Popüler tarayıcıların en son sürümleri, eski tarayıcıların yapamadığı birçok şeyi yapabilir ancak yine de eski tarayıcıları desteklemeniz gerekebilir. Polyfill'ler, eksik özellikleri çoklu dolgularla yeniden oluşturmaya çalışarak farklı tarayıcıları desteklemeyi kolaylaştırır: Bunları destekleyen tarayıcılarda ve desteklemeyen tarayıcılarda en yeni ve en iyi özelliklerden yararlanabilirsiniz.

Mesela güncel tarayıcıların kullandığı Javascript Promise'ı düşünün.


Yukarıdaki caniuse.com/promises çıktısına baktığınız zaman Pormise'ların IE 6'dan 11'e kadar desteklemediği görürsünüz. Promise için ES6(Ecma Script 6) kullanmanız gerekmekte. İşte tam olarak burada Polyfill'ler devreye girmektedir. 
Ya sizin bunu kendinizin ek olarak bir kütüphane hazırlamanız ya da Promise örneği gibi bilinen bir özellik ise dışarıdan bir kütüphane ile bunu sağlamanız gerekir. Ancak eğer eski tarayıcılarla ilgili böyle bir sorununuz varsa.

Tabi ki bu durum yalnızca Javascript tarafında karşılaşılan bir durum değil. Ne demiştik, güncel tarayıcılar ve güncel olmayan tarayıcılar arasındaki farklılık. Bu yüzden aynı durum HTML ve CSS için de geçerli. 

Neler Kullanabiliriz ?

Aşağıda Polyfill için yardımcı olabilecek araçların bir listesi oluşturulmuş. Bu liste Modernizr projesi içerisinde bulunuyor. Evet, daha önce Modernizr ile karşılaştıysanız bu kütüphane de aslında Polyfill sağlıyor.

HTML5 Cross Browser Polyfills



Modernizr'ı da ayrıca vermek gerekirse:

Modernizr.com


Bununla beraber Polyfill.io adında yine web üzerinde aynı desteği sağlayan farklı bir kütüphane de bulunuyor. Ulaşmak için:

Polyfill.io



Vue.js 'e Giriş



Merhaba arkadaşlar, Vue.js Dersleri başlığı altında Vue ile ilgili tüm bilgileri sizlere elimden geldiğince aktarmaya çalışacağım. Burada bir giriş yazısı ile başlayıp küçük bir örnek ile de bitirmek istiyorum.

Nedir ?
Çok fazla detaya girmek istemiyorum çünkü React ve Angular 'ı duymayan herhalde yoktur. Vue 'da diğer kütüphaneler gibi Model ve View kısmı üzerinde eşzamanlı etkileşimi sağlar. Aynı sayfa üzerinde aktif olarak içeriklerinizi yenilemenizi ve işlem yapmanızı sağlar. Web sayfalarınızı daha pratik ve kullanışlı hale getirir.

Vue 'da herşey reaktiftir. Örneğin bir .js dosyası oluşturup sayfaya dahil edin ve aşağıdaki örneği girin;

var app3 = new Vue(
{
  el: '#app-3', 
  data: { 
    veri: "Merhaba" 
})


Şimdi Console 'u açın ve app3.veri yazıp enterlayın "Merhaba" yazısını alacaksınız. İsterseniz buna yeni bir değer girin o değeri alacak ve yazacaktır.
İşte uygulamalarımızı kodlarken sayfa üzerinde sürekli aktif olarak farklı işlerinizi sadece bir tık ile Vue üzerindeki bir değişkene veri aktarıp ardından farklı işlemleri otomatik olarak tetikleyebileceğiz.

Vue Öğrenmek İçin Ne Gerekli ?
Orta düzeyde Javascript bilmeniz yeterli. Özellikle Javascript Nesnelerini iyi bilmeniz gerekiyor. Çünki çalışmalarımızın temeli zaten buna dayanıyor. Javascript 'te herşey bir nesnedir ve bu yüzden bu konuda eksiğinizin olmaması yararınıza olur. Bundan sonraki yazımızda Vue 'nun sözdizimi ile başlayalım.


Javascript 'in Web Sayfalarında Kullanımı



Javascript kodlarını bir web sayfasında kullanmanın iki yolu vardır. Bunlardan ilki <script> etiketi içerisinde kullanımıdır.

<script> etiketi sayfanın herhangi bir yerinde olabilir. Yani ister "head" ister "body" etiketi olsun herhangi bir sorun teşkil etmiyor. Aşağıda JS kodlarının web sayfası içinde kullanımına örnek verilmiştir.

<script>
// js kodları
</script>

İkinci yöntem ise kodlarınızı .js uzantılı bir Javascript dosyası oluşturmak ve kodlarınızı bu dosya içerisine yazmaktır. Daha sonra oluşturduğunuz dosyayı da web sayfası içerisinde yine <script> etiketi ile belirtmek ancak etiket özelliği olarak dosyanızın, dosya yolu uzantısını girmektir. Aşağıda da buna bir örnek verilmiştir.

<script src="/dosyayolu/jsdosyasi.js" type="text/javascript"></script>

Her iki yöntemi de sayfa içerisinde herhangi bir yerde kullanabilirsiniz. Ancak en doğru yöntem footer alanına eklemektir. Çünkü web sayfaları yüklenirken yukarıdan aşağıya doğru yüklenir ve en alta indiğinde son olarak Javascript kodlarınız çalışır.
Böylelikle sayfa içerisinde herhangi bir HTML etiketine bir değişiklik yapıyorsanız, sayfa yüklenmiş olacak ve JS kodları da yüklenen sayfa üzerinde sorunsuz çalışacaktır.

Javascript Değişkenler ve Türleri



Javascript 'e her programlama dilinde olduğu gibi değişkenler ve türlerinden başlıyoruz. Değişkenler içerisinde veri tutabilen ve adından da anlaşılabileceği üzere içeriği genelde değişebilen ve değişken olan işlevlerdir.

Javascript Değişkenleri Tanımlama
Değişkenler metin, sayı, mantıksal(doğru-yanlış) gibi verileri içerisinde tutabilirler. Programlama dillerinin en temel işlevleridir. Öncelikle değişken tanımlamayı bir görelim.

var  degisken = "Gökhankrll"

Yukarıdaki örnekte klasik bir değişken tanımlama örneği verilmiştir. Bir değişken tanımlarken başına "variable(değişken)" kelimesinin kısaltılmışı olan "var" kelimesini giriyoruz ardından değişken adını ve eşittir işareti ile karşılığına alacağı değeri giriyoruz. Burada bir değişken oluşturduk ve içerisine "Gökhankrll" değerini girdik.

Değişken tanımladıktan sonra değişken adı dikkatinizi çekmiştir. Burada türkçe karakter kullanmadık yani bunun gibi değişken tanımlamanın bazı kuralları vardır. Bu kurallar;

  • Değişken isimleri sayı ile başlayamaz örn: 123gokhan ancak alt tire ile başlayabilirler örn: _123gokhan,
  • Değişken isimlerinde break ve boolean gibi isimler kullanılamaz,
  • Değişken isimleri büyük küçük harf duyarlıdır yani isim ile Isım aynı değildirler.

Javascript Değişken Türleri
Javascript 'te değişkenler farklı türde verileri alabilir demiştik. Her programlama dilinde değişkenler aldıkları verilelere göre farklı türlere dönüşür/dönüştürülür. Değişken türleri;

  • Numbers(Sayısal veriler) örn: 123, 243.34 gibi
  • String(Metinsel veriler) örn: "Çift tırnak içindeki yazı" olarak çift tırnak içerisine girilmiş tüm veriler.
  • Boolean(Mantıksal) true ya da false
Javascript ayrıca null ve undefined olarak iki değişken türü de alır. Null, boş ve undefined de tanımsız değerleridir. Örneğin;

var degisken1 = null; // Bu değişken boş
var degisken2 = undefined // Bu değişken tanımsız.

olacak şekilde tanımlanabilir. Bazı programlama dillerinde değişken türünü değişkenin başında belirtmek gerekir. Javascript 'te değişkene verdiğiniz değer neyse otomatik olarak değişken türü ona dönüşür. Örneğin;

var degisken1 = 123 // Bu değişken türü sayısal
var degisken2 = "123" // Bu değişken türü string

var degisken3 = true // Bu değişken türü boolean (mantıksal)



Javascript Değişken Kapsamı
Javascript 'te değişkenleri iki sınıfta değerlendirebiliriz. Bunlar;
  • Global(Genel) değişkenler: Genel değişken tüm sayfa içerisinde kullanabileceğiniz değişkendir.
  • Local(Yerel) değişkenler: Yerel değişkenler ise sadece tanımlanan fonksiyon alanı içerisinde kullanılan değişlenlerdir.
Aşağıda global(genel) ve local(yerel) değişkenlere örnek verilmiştir.

var degisken1 = "abc" //global
function islevadi() {
var degisken1 = "def" // local (yalnızca fonksiyon içerisinde tanımlanır/kullanılır)
}


Birisi genel olarak kullanılırken diğeri yalnızca tanımlanan fonksiyon içerisinde kullanılabilecektir.

Javascript 'te Değişken Anahtar Sözcükleri
Değişken tanımlamak için değişkenin başına var yazıyoruz dedik. Javascript 'e gelen son güncellemelerde değişken tanımlamada bazı anahtar sözcükler geldi.
Siz herhangi bir değişkeni aslında başında var olmadan da tanımlarsınız ve bu değişken başında ek olmadığı için otomatik olarak var biçiminde tanımlanmış kabul edilecektir. Bunun haricinde const ve let olarak iki ayrı tanım yapmamız mümkün.
const ile salt okunur yani içeriği değiştirilemeyen değişkenler tanımlayabilirsiniz. constant kelimesinin kısaltmasından oluşuyor.
let ise biraz daha farklı. Bu terim ile yukarıda bahsettiğimiz global ve local değişken türüne benzer bir tanım yapıyoruz. JS 'de scope denilen bir özellik var. Mesela bir fonksiyon oluşturduğumuz zaman devamında o fonksiyona ait olduğuna dair bir köşeli parantez açıyoruz ve fonksiyona ait kodları bu alan içerisine yazıyoruz. İşte scope denilen şey bu köşeli parantezlerin iç kısmıdır ve türkçe karşılığı da alan/kapsam demektir.

Şimdi siz aşağıdaki gibi bir köşeli parantez açtığınızda bir scope açmış oluyorsunuz.

{
//scope(alan/kapsam)
}


İşte burada let kullanılabiliyor. Bu alanın dışında bir değişken tanımladığınızda global olarak verdiğiniz değer ne ise onu sayfanın her alanında kullanabilirsiniz. Aynı değişkeni let ile bu alanın içerisinde tanımlarsanız yine bu alan içerisinde farklı bir değerde kullanabilirsiniz. Alan içerisinde tanımladığınız değer ise o alanın içerisinde kullanılır. Örnek;

var degisken1 = 10
// degisken burada 10
{
var degisken1 = 2
// degisken burada 2
}
// degisken burada da scope dışında olduğundan yine 10

Javascript değişkenlerini en detayına kadar burada anlatmaya çalıştım. Bir sonraki yazımda görüşmek üzere.

Javascript 'e Giriş ve Temelleri



Merhabalar Javascript derslerime hoşgeldiniz. Elimden geldiğince detaylı bir biçimde Javascript 'i sizlere anlatmaya çalışacağım. İlk olarak hiç kodlama bilmiyorsanız da buradan derslere başlayabilirsiniz. Nette detaylı anlatım yapan pek kaynak bulamadığımdan burada yeni jenerasyona uygun bir anlatım serisi yayımlayacağım.

Javascript Nedir ?
Adından da anlaşılacağı üzere Java dilinden türetilmiş bir dildir. Yani Java 'yı JS 'in ebeveyni gibi düşünebilirsiniz. Ancak Java ve JS birbirinden ayrıdır. Javascript aynı zamanda EcmaScript olarak ta bilinir. Web 'de bu konu üzerinde araştırmalar yapabilirsiniz.
Web üzerinde yoğun olarak kullanılan JS kodlama dili, uzun zamandır web dünyasının popüler bir dilidir. Dahası son zamanlarda o kadar kendini geliştirmiştir ki sadece web tarafında değil aynı zamanda masaüstü uygulamalarında da kullanılmaya başlamıştır. Bunun nedeni JS 'in nesneye dayalı bir yapısının olmasıdır.

Nedir bu nesneye dayalı dil ?
Javascript 'te her şey bir nesnedir. İngilizce olarak "Object" adı ile geçer. Yani bu şu demek kodlama içerisinde herşeyi bir nesne olarak yönetebilirsiniz. Bu konuya yabancı olanlar için ilerde Nesneler 'e değineceğiz.

Kullanım alanları ?
Javascript hem web üzerinde hem de masaüstü programlamada kullanılmaktadır dedik. Masaüstü programlama için Node.js+Elektron.js ikilisini örnek verebiliriz. Bu iki kütüphane ile platform bağımsız(Windows+Linux+MacOS) olarak masaüstü uygulamaları kodlanabilmektedir. Örneğin Visual Studio Code editörü Elektron.js ile kodlanmıştır. Bu konu detaylı ve ayrı bir konu, bizi ilgilendiren web üzerindeki Javascript.

Javascript Web üzerinde iki türde kullanılır. Bunlardan birincisi tarayıcı tarafında kullanılan Javascript. Yani buna Client Side(İstemci Tarafı) denmektedir.
Bildiğiniz üzere bir "html" veya "php" sayfası oluşturduğumuz zaman <script> etiketi içine veya ayrı bir .js dosyasına Javascript kodları giriyoruz. İşte bu kodlar tarayıcılar tarafından yorumlanıyor. Diğer bir değişle tarayıcılar içerisinde bir Javascript motoru bulunmaktadır. Bizim sayfalar içerisinde kullandığımız ve kullanıcıların da kaynak kodunu açtığında görebildiği JS kodları tarayıcılar tarafından yorumlanmaktadır. Örneğin, web üzerinde bu konuya aşina olanlar Google Chrome 'un "Javascript V8 Engine" motorunu daha önce duymuştur. Chrome, JS için güçlü bir altyapı sunmaktadır.

İkinci kullanım alanı ise aynı PHP ve Ruby gibi web programlama dillerinde olduğu gibi sunucu tarafında kullanılan Javascript vardır. Buna örnek olarak yine Node.js 'i verebiliriz. Node.js bir framework 'tür ve JS 'i sunucu tarafında çalıştırır. Buna da Server Side(Sunucu Tarafı) denmektedir.
Tabi Node gibi birçok farklı framework vardır ama şuan popüler olan Node.js tir. Tahmin edebileceğiniz gibi burada JS sunucu tarafında çalıştığı için kodları kullanıcılar göremez ve tıpkı Apache Server ile PHP nasıl çalışıyorsa burada da Javascript öyle çalışacaktır.


Javascript 'e giriş yazımı burada sonlandırıyorum bir sonraki derste Javascript Değişkenler Türlerini ve Değişken Tanımlamayı anlatacağım. Giriş dersi biraz uzun oldu ama eğer bu yazımı okuduysanız size JS adına temel bilgileri iyi oturtacağına eminin.