<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_0nqztZ1oZQEdNILB1UhnA.jpeg"><figcaption><a href="http://yasinates.com/">yasinates.com</a></figcaption></figure>Herkese merhaba 😀, kişisel websitem <a href="http://yasinates.com/">yasinates.com</a> çok yakında yeni arayüzü ile yayına girecek.
Web sitemdeki verileri DEV API, medium.com API ve Github API hizmetlerini kullanarak oluşturuyorum. 😎
Burada yazmış olduğum makalelerin İngilizce versiyonlarına <a href="https://dev.to/yasinatesim">dev.to</a> profilimden ulaşabilirsiniz.
Bir sonraki makalemde websitemi yayına alma sürecinden bahsedeceğim.
Yeni makalelerde görüşmek dileğiyle. 👋
dev.to Profilim: <a href="https://dev.to/yasinatesim">dev.to/yasinatesim</a>
Kişisel websitem: <a href="http://yasinates.com/">yasinates.com</a>

Herkese merhaba 😀, kişisel websitem yasinates.com çok yakında yeni arayüzü ile yayına girecek.

yasinates.com Çok Yakında Yayında

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9eMyWLYOqU5aqBtVoFoi3Q.jpeg"><figcaption>A’dan Z’ye Typescript</figcaption></figure><h3>Typescript Nedir?</h3>
Typescript, Microsoft tarafından geliştirilen açık kaynak bir programlama dilidir. JavaScript diline katı kurallar eklemeyi sağlar.
<h3>Typescript Özellikleri</h3>
★ Typescript = Javascript’tir: Typescript temel yapı taşlarını Javascript’ten alır. Bu nedenle Typescript’i öğrenmeden önce Javascript yetkinliğinizin olması gerekir. Typescript ile yaptığınız bütün geliştirmeleriniz, makalenin kurulum adımında da göreceğiniz üzere Javascript’e dönüştürülür.
★ Typescript, tüm Javascript kütüphanelerini destekler: Typescript ile derlenen javascript çıktısı, bütün javascript kütüphaneleri ile birlikte kullanılabilir.
★ Typescript, taşınabilir ve portatiftir: TypeScript platform-serbest bir dildir ve farklı tarayıcılarda, cihazlarda, işletim sistemlerinde çalışabilir. javascript’in çalıştığı herhangi bir ortamda çalışabilir. Hali hazırda javascript ile geliştirilme yapılan bir projeye entegre edilebilir.
<h3>Typescript Avantajları</h3>
★ Typescript, nesne yönelimlidir.
★ Typescript, statik veri tiplemesine sahiptir.
★ Typescript, ES6 özelliklerini içeririnde barındırır.
★ Typescript, modülerdir.
★ Typescript’in söz dizimi Java, C# gibi yüksek seviyeli dillere benzerdir.
Typescript kodları, tarayıcılar tarafından direkt olarak yorumlanamayacağı için kodların derlenmesi ve javascript çıktısının oluşturulması gerekiyor.
Eğer hemen typescript yazmaya başlamak isterseniz, makalenin kurulum adımını geçerek, <a href="https://codepen.io/">Codepen</a>’i veya Typescript’in kendi dokümantasyon sayfasındaki <a href="https://www.typescriptlang.org/">Playground</a>’ı kullanabilirsiniz.
<h3>Typescript Kurulumu</h3>
Typescript’i kurabilmek için ilk başta bilgisayarımızda <a href="https://nodejs.org/en/">Node Js</a>’in kurulu olması gerekiyor. Ardından terminal üzerinden,
<pre>npm install -g typescript</pre>
komutunu çalıştıralım.
Şimdi örnek olarak, terminal üzerinden typescript yazmak istediğimiz dizine ilerleyerek, dizinimizde bir main.ts oluşturalım ve içerisine,
<figure><img alt="" src="https://cdn-images-1.medium.com/max/556/1*oOnjxB0OGhrsOgEXy8v0mw.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/typescript-kurulumu/main.ts">main.ts</a></figcaption></figure>bu kodları yazalım.
Ardından,
<pre>tsc main.ts -w</pre>
komutunu terminalde çalıştıralım.
Bu komut ile ana dizinimde bulunan main.ts dosyası javascript’e dönüştürülerek, ana dizine çıktılandı ve ana dizindeki main.js dosyasının içeriği,
<figure><img alt="" src="https://cdn-images-1.medium.com/max/456/1*cCS83D3i4IIgmKi-GDXDmg.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/typescript-kurulumu/main.js">main.js</a></figcaption></figure>bu şekilde oldu.
<blockquote>
-w parametresi main.ts dosyasıdaki değişikliklerin anlık olarak izleneceği ve dosya içerisindeki kodların anlık olarak main.js dosyasına çıktılanacağı anlamına gelir. Zorunlu bir parametre değildir.</blockquote>
Bu sayede ilk typescript kodumuzu yazmış ve derlemiş olduk. 🙂
<h3>Yapılandırma (Configuration) ve Klasör Yapısı</h3>
Terminalde,
<pre>tsc --init</pre>
komutunu çalıştırdıktan sonra. dizinimizde tsconfig.json dosyası oluşacaktır. Dizinizimde oluşan config dosyasındaki parametreleri düzenleyerek örnek bir klasör yapısı oluşturalım.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*AiKdv8E3EJrb-BM7e6co-Q.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/yapilandirma-configuration-ve-klasor-yapisi/tsconfig.json">tsconfig.json</a></figcaption></figure>Bu yapılandırma dosyasına göre, src dizini içerisinde yer alan .ts dosyalarımız dist dizinine çıktılanacaktır.
<h3>Statik Veri Tiplemesi (Static Type Checking) Nedir?</h3>
Typescript ile değişkenler, fonksiyonlar, ve fonksiyon parametreleri için tip kontrolü (type checking) yapabilirsiniz.
<h4>Özellikleri</h4>
★ Tamamen isteğe bağlıdır.
★ Hataları bulmanıza ve önlemenize yardımcı olur.
★ Daha açıklayıcı ve okunaklı kod yazmanızı sağlar.
<h3>Tipler</h3>
★ String: Metinsel veri türleri için kullanılır.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/666/1*5OprU4uC9LrJXy6tMVwXfw.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/string.ts">string.ts</a></figcaption></figure>★ Number: Sayısal veri türleri için kullanılır. ES6 ile gelen ikili ve sekizli değerleri de destekler.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/698/1*tVdEEpmEDGUr40JRct2wAw.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/number.ts">number.ts</a></figcaption></figure>★ Boolean: true/false değerler için kullanılır.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/734/1*ueaEdEtnQqrvWddO_BoIWA.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/boolean.ts">boolean.ts</a></figcaption></figure>★ Array: Dizi tanımlamaları için kullanılır. İki farklı yazım şekli vardır.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/888/1*zk2rzKnBARtT4AXZZRrSyQ.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/array.ts">array.ts</a></figcaption></figure>★ Any: Bilinmeyen değişken tipleri için kullanılır. Örneğin, dinamik değerler içeren değişkenler için kullanılabilir.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lyn1g-lRMDNX54uEOhUqdg.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/any.ts">any.ts</a></figcaption></figure>★ Void: Geriye herhangi bir değer return etmeyen fonksiyonlarda ve null veya undefined değer içeren değişkenlerde kullanılır.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*10VYRj5ZK1TtVFDOL3T9kA.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/void.ts">void.ts</a></figcaption></figure>★ Null: null değer içeren değişkenlerde kullanılır.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/574/1*bcK30V9s3SyOptXzVTCN7w.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/null.ts">null.ts</a></figcaption></figure>★ Undefined: undefined değer içeren değişkenlerde kullanılır.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/810/1*eFdkVUOz_LGSBHa9OorA_Q.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/undefined.ts">undefined.ts</a></figcaption></figure>★ Tuple: Grup türleri bilinen ancak aynı olması gerekmeyen dizilerde kullanılır.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/846/1*rsz6lblfyIrzHzC4hncp8Q.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/tuple.ts">tuple.ts</a></figcaption></figure>★ Enum: Obje içerisindeki key’lere veya key değerlerine daha kolay erişmek için kullanılır.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/768/1*7Oc6M8lT-Y2SkVTONEpsrg.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/enum/enum-1.ts">enum-1.ts</a></figcaption></figure>Key değerleri, varsayılan olarak 0'dan başlar ancak bunu değiştirmek mümkündür.
Tek bir key’in değerini veya birden fazla key’in değerini değiştirebiliriz. 👌💪
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1020/1*hq2NWx3EozsjqP0ZcH9Kig.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/enum/enum-2.ts">enum-2.ts</a></figcaption></figure>Key’lere erişmek için indis numarasını yazmamız yeterli. 😋
<figure><img alt="" src="https://cdn-images-1.medium.com/max/842/1*uKJ_psMseqWPwsU5mbDakw.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/enum/enum-3.ts">enum-3.ts</a></figcaption></figure><h3>Takma Adlar (Type Alias)</h3>
type sözcüğü ile tanımlanan ifadeler, tipleri içerisinde tutar ve bu tipleri birden fazla yerde kullanmamıza olanak tanır. 👌
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*0ViwhQ4CqpOUfulf4XK0TQ.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/alias/alias.ts">alias.ts</a></figcaption></figure>Yukarıdaki örnekte yer alan user alias’ı hem string tipindeki değişkenleri hem de object tipindeki değişkenler için tip kontrolünü sağlar.
<h3>Fonskiyonlar</h3>
★ Void: Geriye herhangi bir değer return etmeyen fonksiyonlarda kullanılır.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*86GKkerviGtnVOUFQs4O5w.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/fonksiyonlar/void.ts">void.ts</a></figcaption></figure>★ Geriye Değer Döndürebilen Fonksiyonlar:
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*KzF3Mc3x8l5IQwayERp3Gg.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/fonksiyonlar/object.ts">object.ts</a></figcaption></figure>Yukarıdaki örnek, object tipinde parametre alan ve geriye string tipinde değer döndüren bir fonksiyon kullanım örneğidir.
★ Parametresi Zorunlu (Required) Olmayan Fonksiyonlar:
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YbPR6IjZu9ky5-iZJ5eFaQ.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/fonksiyonlar/parameters.ts">parameters.ts</a></figcaption></figure>Yukarıdaki örnekte, action parametresi ve user objesi içinde gönderilen age anahtar kelimesi, zorunlu bir parametre değildir. Fonksiyon çalıştırıldığında bu parametreler gönderilmemiş durumsaysa bu kısım işleme alınmaz.
<h3>Sınıf Tabanlı Objeler (Class Based Object)</h3>
<h4>Sınıflar (Classes)</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*CxpirPjY83DufrkIITh-gg.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/classlar/classlar.ts">classlar.ts</a></figcaption></figure>Yukarıdaki örnektede gördüğümüz üzere, sınıf içerisinde yapılan değişken tipi tanımlamaları ve method içerisine gönderilen parametrelerin tip tanımlamaları, değişkenler ve fonksiyonlardaki ile aynıdır.
<h4>Soyut Sınıflar (Abstract Classes)</h4>
Soyut sınıflar,
★ Kendi instance objesinden türeyemeyen sınıflardır.
★ Kendisini kullanan başka sınıfların instance’ları aracılığıyla içerisindeki özelliklere erişilmesini sağlayan sınıflardır.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*RJj5a-NEbQokaGJ-d7p1Sw.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/classlar/abstract-class-1.ts">abstract-class-1.ts</a></figcaption></figure>Eğer soyut bir sınıftan instance üretmeye çalışırsak, hata alırız.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*AbpTIbm2TfCQed6f7wOD6A.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/classlar/abstract-class-2.ts">abstract-class-2.ts</a></figcaption></figure>Yukarıdaki örnekte, Person sınıfı instance’ından türetilen obje ile hem Person sınıfı içindeki parametrelere hem de User sınıfı içindeki parametrelere erişilebilir.
<h3>Interface</h3>
Dışarıdan erişilebilir durumda olan elemanları, objelere veya sınıflara bildiren yapılardır.
★ Birbirlerinden extend olabilirler.
★ Birbirlerinden implement olamazlar.
★ Objelere ve sınıflara atanabilirler.
<h4>Objelerde Kullanımı</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/758/1*s7esBzbHoAXhVqXxy2qw8w.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/interface/with-object.ts">with-object.ts</a></figcaption></figure>Yukarıdaki örnekte, age değeri obje içerisinde kullanımı zorunlu bir parametre olmadığı için soru işareti (?) ile birlikte kullanılmıştır.
<h4>Sınıflarda Kullanımı</h4>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Ls9hK9q39OJlyOyy5T0VRw.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/interface/with-class.ts">with-class.ts</a></figcaption></figure>Yukarıdaki örnekte, User sınıfı, IsPerson Interface’i içinde tanımlanmış olan özellikleri kullanmaktadır.
<h3>“public”, “private” ve “readonly”</h3>
★ public: Sınıf içerisinde kullanılan özellikleri dışarıdan erişilebilir ve değiştirilebilir hale getirir.
★ private: Sınıf içerisinde kullanılan özelliklerin dışarıdan erişilebilme ve değiştirilebilme durumunu devre dışı bırakır.
★ readonly: Sınıf veya Interface içerisinde kullanılan özelliklerin dışarıdan değiştirilebilme durumunu devre dışı bırakır.
Interface’lerde Kullanımı
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*90dOiR9etTVLmY-bR6_vLg.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/public-private-readonly/read-only-with-interface.ts">read-only-with-interface.ts</a></figcaption></figure>Sınıflarda Kullanımı
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*iFv2O3zffx0PJBHlMPKonQ.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/public-private-readonly/read-only-with-class.ts">read-only-with-class.ts</a></figcaption></figure>Sınıf veya obje içerisindeki readonly değerleri değiştirmeye çalışırsak, hata alırız.
<h3>Sonuç</h3>
Javascript diline katı kurallar eklememize yardımcı olan Typescript, ilk başlarda göze biraz tuhaf gözükse de alıştıktan sonra geliştirme esnasında karşımıza çıkardığı hata mesajlarıyla hayatımızı kolaylaştırıyor.
Bu makalede kullandığım resimlere ve paylaşmış olduğum kaynak kodlara, makale içerisinde bırakmış olduğum resimlerin altındaki linkler üzerinden ulaşabilirsiniz.
Bu linklerin tamamını görüntülemek için: <a href="https://github.com/yasinatesim/medium-stories/tree/master/02-a-dan-z-ye-typescript">https://github.com/yasinatesim/medium-stories/tree/master/02-a-dan-z-ye-typescript</a>
linkini takip edebilirsiniz.
Makaleyi hazırlarken kullandığım kaynaklar;
Typescript Documentation: <a href="https://www.typescriptlang.org/">https://typescriptlang.org</a>
The Net Ninja: <a href="https://www.youtube.com/watch?v=2pZmKW9-I_k&amp;list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI">https://www.youtube.com/watch?v=2pZmKW9-I_k&amp;list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI</a>
Traversy Media: <a href="https://www.youtube.com/watch?v=rAy_3SIqT-E">https://www.youtube.com/watch?v=rAy_3SIqT-E</a>

Typescript, Microsoft tarafından geliştirilen açık kaynak bir programlama dilidir. JavaScript diline katı kurallar eklemeyi sağlar.

A’dan Z’ye Typescript

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aUNIUIc3Q9QZs-i0Qkkf-Q.png"><figcaption>Bir HTML Preprocessors’u: Pug Js</figcaption></figure><h3>Pug Nedir?</h3>
Pug, HTML içerisinde Javascript yazarak, HTML kodlarını dinamik hale getirmenize olanak tanıyan bit HTML preprocessors’udur.
Pug kodları, tarayıcılar tarafından direkt olarak yorumlanamayacağı için kodların derlenmesi ve html çıktısının oluşturulması gerekiyor.
Eğer hemen pug yazmaya başlamak isterseniz, makalenin kurulum adımını geçerek, <a href="https://codepen.io/">Codepen</a>’i kullanabilirsiniz.
<h3>Pug Kurulumu</h3>
Pug’ı kurabilmek için ilk başta bilgisayarımızda <a href="https://nodejs.org/en/">Node Js</a>’in kurulu olması gerekiyor. Ardından terminal üzerinden,
<pre>npm i -g pug-cli</pre>
komutunu çalıştıralım.
Şimdi örnek olarak, terminal üzerinden pug yazmak istediğimiz dizine ilerleyerek, dizinimizde bir index.pug oluşturalım ve içerisine,
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FOcM2TflCU4TwF9s_WQeNw.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/01-bir-html-preprocessors-u-pug-js/index.pug">index.pug</a></figcaption></figure>bu kodları yazalım.
Ardından,
<pre>pug -w . -o ./html -P</pre>
komutunu terminalde çalıştıralım.
Bu komut ile ana dizinimde bulunan pug dosyaları html’e dönüştürülerek, ana dizindeki html klasörüne çıktılandı ve klasör içindeki index.html dosyasının içeriği,
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qSy7POHtYcQqKaM7bf7QDw.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/01-bir-html-preprocessors-u-pug-js/index.html">index.html</a></figcaption></figure>bu şekilde oldu.
<h3>Pug Kullanımı ve Sözdizimi</h3>
<h4>1- Açıklama Satırları</h4>
<h4>HTML çıktısında görünen açıklama satırları</h4>
HTML çıktısında görünen tekli açıklama satırı
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vAG0IfRgdv-VyWKpR2njUA.png"><figcaption>Tekli satırdan oluşan açıklama satırı</figcaption></figure>bu şekildedir.
HTML çıktısında görünen çoklu açıklama satırı ise,
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Q5zH5EOI8zSOtF9B0jUOuQ.png"><figcaption>Çoklu satırdan oluşan açıklama satırı</figcaption></figure>bu şekildedir.
Çoklu açıklamadan çıkmak için, açıklama satırının girintisinden çıkmak gerekir.
<h4>HTML çıktısında görünmeyen açıklama satırları</h4>
Bu açıklama satırları çıktılanan HTML çıktısında görünmez, sadece .pug dosyalarında görünür.
HTML çıktısında görünmeyen tekli açıklama satırı
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bhK75uLFSgUh_WPGqdz1HA.png"><figcaption>Tekli satırdan oluşan açıklama satırı</figcaption></figure>bu şekildedir.
HTML çıktısında görünmeyen çoklu açıklama satırı ise,
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*VSJTh3pRKwIgciJU6dz4XQ.png"><figcaption>Çoklu satırdan oluşan açıklama satırı</figcaption></figure>bu şekildedir.
Çoklu açıklamadan çıkmak için, açıklama satırının girintisinden çıkmak gerekir.
<h4>2- Özellik (Attribute) Tanımlama</h4>
HTML etiketinin sadece text kısmını yazdıktan sonra parantez içerisine o etiket içerisine tanımlamak istediğimiz özelliği (attribute) yazıyoruz. Birden fazla attribute tanımı yaparken istersek, virgül(,) ile ayırabiliriz.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*A9MmADdUaK3lrKGOtHC8qQ.png"><figcaption>Atrribute Tanımlama</figcaption></figure><h4>2.1- Id ve Class Tanımlama</h4>
Id ve class’ları tanımlamak için iki ayrı yöntem bulunuyor. Bunlardan ilki; “Özellik (Attribute) Tanımlama” başlığında anlattığım gibi, kincisi ise, tıpkı css yazar gibi class tanımlarında nokta(.), id tanımlarında diyez(#) işaretinden sonra belirtmek istediğimiz isim. Örneğin;
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Br-plOlbHonY6c8s-i0jhQ.png"><figcaption>Id ve Class Tanımlama</figcaption></figure><h4>3- Değişken Tanımlama ve Kullanma</h4>
Pug’da değişken tanımlamak için, tıpkı Javascript dilindeki gibi const veya var ifadesinden sonra belirlemek istediğimiz değişkenin adını yazıyoruz. Örneğin;
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*dD9jNfSCfAIA2sC8RkMz3A.png"><figcaption>Değişken Tanımlama</figcaption></figure>String bir ifadenin içinde değişken tanımlamak istersek,
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8DJEo1_psyTBE9Sb6-L04Q.png"><figcaption>String ifadenin içinde değişken kullanımı</figcaption></figure><h4>4- Döngüler</h4>
“for” döngüsü
Örnekteki HTML çıktısında, 3 kez “Liste Elemanı” metnine sahip li elemanları oluşacaktır.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*fIV438s-BS_2HFSa34dGMA.png"><figcaption>For Döngüsü</figcaption></figure>“each” döngüsü
Örnekteki HTML çıktısında, “users” değişkenine tanımlamış olduğumuz dizi elemanları li elemanları içerisine yazılacaktır.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*1-Bl6DCZR9NKI5oXl9-rZw.png"><figcaption>Each Döngüsü</figcaption></figure><h4>5- Koşullu İfadeler</h4>
“if” koşulu
Pug içerisinde if koşulunun kullanımı, Javascript diline benzerdir.
Örneğin;
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*K0ru53Y8o3ujmP74DLqQuA.png"><figcaption>If Koşulu</figcaption></figure>“case” koşulu
Case koşulu, Javascript dilindeki “switch” kullanımına benzerdir. Aradaki farkı bir örnekle inceleyelim.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*WF43mh9IB_P26BN0w8GoSQ.png"><figcaption>Case koşulu</figcaption></figure>Örnekte de görüldüğü gibi, Javascript dilinde kullandığımız switch sözcüğü, case sözcüğü ile Pug’ın içerinde yer alıyor. Yine Javascript dilinde kullandığımız switch içerisindeki koşulu sağlayan case sözcüğü Pug içerisinde when sözcüğü ile yer alıyor.
<blockquote>Bu kısıma kadar görmüş olduğumuz kullanımların tamamında istersek, Pug’ın söz dizimine bağlı kalmadan Javascript yazarak da işlemlerimizi gerçekleştirebiliriz. Pug, Javascript dili içerisindeki çoğu ifadeyi içerisinde barındırır. Bu yönüyle geliştiricilere, kolaylık sağlar.</blockquote>
Makalenin bu kısmından sonraki kısımlarda göreceğimiz ifadeler, Pug’a özgü ifadelerdir. Bu özellikleri diğer HTML preprocessors’larında da görebiliriz.
<h4>6- Kalıtım (Extends) ve Include</h4>
Örnek bir senaryo olarak, projemizde header, footer ve sidebar adında üç sabit olanımız olsun. Sayfanın içeriği ise dinamik olarak değişken bir alan olsun.
layout.pug adında bir dosya oluşturalım ve içerisine;
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aIuG9H9SLfj39r0AaEFolA.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/01-bir-html-preprocessors-u-pug-js/kalitim-extends-ve-include/layout.pug">layout.pug</a></figcaption></figure>bu kodları yazalım.
include ile belirttiğimiz kısımlar layout dosyası ile aynı dizinde bulunan sabit header.pug, sidebar.pug ve footer.pug dosyalarıdır. block ile belirttiğimiz kısım ise diğer dosyalar tarafından değiştirilmesine (extend edilmesine) izin verdiğimiz kısımdır. Yani, index.pug adında bir dosya oluşturup, içerisine bu dosyadan extend edildiğini belirtirsek, içeriğin dinamik olarak değişmesini sağlayabiliriz.Örneğin;
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XGATpS0ejimp3IR2S1QcBw.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/01-bir-html-preprocessors-u-pug-js/kalitim-extends-ve-include/index.pug">index.pug</a></figcaption></figure>include ve extends ifadelerini kullanırken, dosya uzantısı belirtmek zorunlu değildir. Yapılan örneklerde dosya uzantısı belirtilmediğini göreceksiniz.
<h4>7- Mixins</h4>
Sürekli olarak kullandığımız kodları bir mixin haline getirerek, bir yerde değişiklik olunca heryerde değişmesini sağlayabilir ve component bazlı geliştirme yapabiliriz.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*VZG0uW6L6cmjJvt0gU4xAg.png"><figcaption>Mixins</figcaption></figure><h3>Sonuç</h3>
Javascript diline kardeş olan Pug hakkındaki düşüncülerim, okunması zor olan HTML kodlarını basite indirgiyor ve içerisinde, Javascript dili ile geliştirme yapmamıza olanak sağladığı için, işimizi kolaylaştırıyor.
Bu makalede kullandığım resimlere ve paylaşmış olduğum bazı kaynak kodlara, makale içerisinde bırakmış olduğum resimlerin altındaki linkler üzerinden ulaşabilirsiniz.
Bu linklerin tamamını görüntülemek için: <a href="https://github.com/yasinatesim/medium-stories/blob/master/01-bir-html-preprocessors-u-pug-js/readme.md">https://github.com/yasinatesim/medium-stories/blob/master/01-bir-html-preprocessors-u-pug-js/</a>
linkini takip edebilirsiniz.
Makaleyi hazırlarken kullandığım kaynaklar;
Pug Documentation: <a href="https://pugjs.org/api/getting-started.html">https://pugjs.org/api/getting-started.html</a>
A Beginner’s Guide to Pug: <a href="https://www.sitepoint.com/a-beginners-guide-to-pug/">https://www.sitepoint.com/a-beginners-guide-to-pug/</a>

Pug, HTML içerisinde Javascript yazarak, HTML kodlarını dinamik hale getirmenize olanak tanıyan bit HTML preprocessors’udur.

Bir HTML Preprocessors’u: Pug Js

Hello everyone 😀, this is my first post. 

I will share the English of my articles on <a href="https://medium.com/@yasinatesim/">medium.com</a> here.

I create the data on my website using the DEV API, medium.com API, and Github API services 😎

I will write my next article is about the publishing process of my website.

Hope to see you in new articles. 👋 👋

My medium profile: <a href="https://medium.com/@yasinatesim/">medium.com/@yasinatesim/</a>

My personal website: <a href="http://yasinates.com/">yasinates.com</a>

Hello everyone 😀, this is my first post.   I will share the English of my articles on medium.com here...

yasinates.com is coming soon 😋

https://api.github.com/repos/yasinatesim/instagram-fullsize-picture/contents/{+path}

This project is a full size Instagram photo display tool. 😎

MIT License

instagram-fullsize-picture

https://api.github.com/repos/yasinatesim/react-link-list/contents/{+path}

This project was created to create a medium/large React project with React + Tailwind CSS, React Router, ContextAPI and Docker 😎

react-link-list

https://api.github.com/repos/yasinatesim/react-post-list/contents/{+path}

This project was created to create a medium/large React project with React Router and Docker 😎

react-post-list

https://api.github.com/repos/yasinatesim/react-product-list/contents/{+path}

This project was created to create a medium / large React and Grphql project 😋

react-product-list

https://api.github.com/repos/yasinatesim/react-todo/contents/{+path}

This project was created to create a medium/large React project folder structure 😋

react-todo

https://api.github.com/repos/yasinatesim/vue-todo/contents/{+path}

This project was created to create a medium/large Vue project folder structure 😋

vue-todo

https://api.github.com/repos/yasinatesim/basic-starter-kit/contents/{+path}

This project is a starter kit for develop the very small front-end web applications with Gulp 😋

basic-starter-kit

https://api.github.com/repos/yasinatesim/turkcekaynaklar-com/contents/{+path}

Özenle seçilmiş Türkçe kaynaklar listesi En: Curated list of Turkish resources 

Creative Commons Attribution 4.0 International

turkcekaynaklar-com

https://api.github.com/repos/yasinatesim/yasinatesim/contents/{+path}

yasinatesim

https://api.github.com/repos/yasinatesim/bicycle-404-error-page/contents/{+path}

This project was created to create a small project folder structure 😋

bicycle-404-error-page

https://api.github.com/repos/yasinatesim/chick-404-error-page/contents/{+path}

I wanted to code a beautiful 404 page that I saw in unsplash.com

chick-404-error-page

https://api.github.com/repos/yasinatesim/css-grid-layout-grid-system/contents/{+path}

CSS Grid Layout Grid System with Bootstrap Grid Class Names

css-grid-layout-grid-system

https://api.github.com/repos/yasinatesim/front-end-starter-kit-with-gulp/contents/{+path}

Frontend Starter Kit with Gulp for either Themeforest Projects or customizable projects.

front-end-starter-kit-with-gulp

https://api.github.com/repos/yasinatesim/href-and-src-convert-to-array/contents/{+path}

href-and-src-convert-to-array

https://api.github.com/repos/yasinatesim/medium-stories/contents/{+path}

Contains the source files and links on my Medium articles

medium-stories

https://api.github.com/repos/yasinatesim/next-starter-kit/contents/{+path}

This project is a starter kit for develop the front-end web applications with Next.js 😎

next-starter-kit

https://api.github.com/repos/yasinatesim/onu-psd-to-css/contents/{+path}

This project was one of my first works. I met PSD To CSS with this project 😋

onu-psd-to-css

https://api.github.com/repos/yasinatesim/permalink-with-javascript/contents/{+path}

Seo Friendly Link (Seflink) Function with Pure Javascript

permalink-with-javascript

https://api.github.com/repos/yasinatesim/react-counter-up/contents/{+path}

react-counter-up

https://api.github.com/repos/yasinatesim/react-native-counter-up/contents/{+path}

react-native-counter-up

https://api.github.com/repos/yasinatesim/tvmaze-api-batman-tv-shows/contents/{+path}

This project was developed to analyze the redux state management structure 😋

tvmaze-api-batman-tv-shows

https://api.github.com/repos/yasinatesim/vue-counter-up/contents/{+path}

vue-counter-up

https://api.github.com/repos/yasinatesim/vue-horizontal-collapse/contents/{+path}

Vue js version of accordion component developed with jquery on codepen.io 😋

vue-horizontal-collapse

https://api.github.com/repos/yasinatesim/yasinates.com/contents/{+path}

My personal website via Next.js + SSG 😎 💪

Hakkımda

Merhaba Ben Yasin ATEŞ, 👋🏻

Projelerim

Blog