Bilgisayar Mühendisliği Öğrenci Blogu

2 Ekim 2018 Salı

Abstract class nedir? Nasıl kullanılır?

By Berkay 22:51 C#, NYP, OOP 1 comment

Bu yazıda Abstract class'ın ne olduğunu, nasıl kullanılacağını anlatmaya çalışacağım.

Abstract class

Class'ların miras alacağı ana class'lardır. Abstract class'ta oluşturulan abstract metotların alt sınıflarda override edilmesi gerekirken, abstract olarak tanımlanmayan metotlar için ekstra bir işlem yapılmasına gerek yoktur.

Hemen basit bir örnek üzerinden açıklamak gerekirse :

Öncelikle Ulke adında abstract class oluşturuyorum. Daha sonra da bu class'tan inherit alan Almanya, Fransa ve İtalya class'larını oluşturacağım.

abstract class Ulke
{
        public string Kita() {
            return "Avrupa";
        }
        public string ParaBirimi() {
            return "Euro";
        }
        public abstract string Dil();
  }

Almanya, Fransa ve İtalya. Üçü de Avrupa kıtasında bulunduğu ve para birimleri de Euro olduğu için, Kita ve ParaBirimi metotlarını abstract olarak tanımlamadım. Dil ise tüm ülkelerde farklı. Bu nedenle Dil metodunu abstract olarak tanımladım ve 3 alt sınıfta da override ederek kendi değerlerini set edeceğim.

Öncelikle Almanya sınıfımı Ulke sınıfından miras alacak şekilde oluşturuyorum.

class Almanya : Ulke 
{

}

Projeyi build ettiğimde Dil metodunu implement etmediğim için hata alıyorum.

Tüm class'larımı oluşturuyorum.

class Almanya : Ulke
 {
 public override string Dil()
        {
            return "Almanca";
 }
}

class Fransa : Ulke
{
        public override string Dil()
        {
            return "Fransızca";
        }
}

class Italya : Ulke
{
        public override string Dil()
        {
            return "İtalyanca";
        }
}

Görmek istediğim değerleri ekrana basıyorum.

            var a = new Almanya();
            var f = new Fransa();
            var i = new Italya();

            Console.WriteLine("Almanya : " + a.Kita() + " " + a.ParaBirimi() + " " + a.Dil());
            Console.WriteLine("Fransa : " + f.Kita() + " " + f.ParaBirimi() + " " + f.Dil());
            Console.WriteLine("İtalya : " + i.Kita() + " " + i.ParaBirimi() + " " + i.Dil());

Sonuç da aşağıdaki gibi.

HTML5 ile nesne oluşturma ve hareket ettirme

By Berkay 20:23 HTML 5, JavaScript 7 comments

Bu yazıda HTML 5 ve JavaScript kullanarak bir nesne oluşturacağız ve klavyedeki sağ - sol yön tuşları yardımıyla nesneyi hareket ettireceğiz.

Öncelikle sayfamıza yeni bir canvas ekliyorum. Body onload fonksiyonu olarak da drawGame fonksiyonunu tanımlıyorum. Çizim işlemlerimi bu fonksiyonda yapacağım.

<body onload="drawGame()">
    <canvas id="game">Tarayıcınız HTML 5 desteklememektedir.</canvas>
</body>

drawGame fonksiyonunda carImage ve carObject isminde sırasıyla Image ve Context oluşturuyorum.

function drawGame() {
    var canvas = document.getElementById("game");
    if(canvas.getContext) {
        var carObject = canvas.getContext("2d");
        var carImage = new Image();
        carImage.src = 'car.png';
        carImage.onload = function() {
            carObject.drawImage(carImage, 0, 0);
        }
    }
}

Şu an sayfamı çalıştırdığımda arabanın ekrana basıldığını görebilirim.

Şimdi klavye kullanarak aracı sağa sola hareket ettirmek için gerekli olan kodu yazıyorum.

Öncelikle yeni bir event tanımlıyorum.

window.addEventListener('keydown', moveCar, true);

moveCar fonksiyonunu oluşturarak gerekli işlemleri orada gerçekleştiriyorum.

function moveCar(event) {
    switch(event.keyCode) {
        case 37:
            horizontalPosition -= 5;
            break;
        case 39:
            horizontalPosition += 5;
            break;
    }

    carObject.clearRect(0, 0, canvas.width, canvas.height);
    carObject.drawImage(carImage, horizontalPosition, 0);
}

Kodun tamamı

<!DOCTYPE html>
<head>
<title>HTML5 Canvas</title>
<script type="text/javascript">
var canvas;
var horizontalPosition = 100;
var carObject;
var carImage;
function drawGame() {
    canvas = document.getElementById("game");
    if(canvas.getContext) {
        window.addEventListener('keydown', moveCar, true);
        carObject = canvas.getContext("2d");
        carImage = new Image();
        carImage.src = 'car.png';
        carImage.onload = function() {
            carObject.drawImage(carImage, horizontalPosition, 0);
        }
    }
}
function moveCar(event) {
    switch(event.keyCode) {
        case 37:
            horizontalPosition -= 5;
            break;
        case 39:
            horizontalPosition += 5;
            break;
    }

    carObject.clearRect(0, 0, canvas.width, canvas.height);
    carObject.drawImage(carImage, horizontalPosition, 0);
}
</script>
</head>
<body onload="drawGame()">
    <canvas id="game">Tarayıcınız HTML 5 desteklememektedir.</canvas>
</body>
</html>

JavaScript replace işlemleri

By Berkay 11:03 JavaScript, javascript boşluk değiştirme, javascript replace Leave a Comment

Bu yazıda JavaScript'te herhangi bir string değer üzerinde replace işlemlerinin nasıl yapıldığını anlatacağım.

String ifademiz üzerindeki herhangi bir kelimeyi, harfi ya da istediğimiz bir text'i değiştirmek için replace fonksiyonunu kullanıyoruz.

var metin = "Bilgisayar mühendisleri blog";
metin = metin.replace("blog","site");
alert(metin);

Bu örnekte "Bilgisayar mühendisleri blog" şeklinde bir metin tanımladık ve replace komutu ile "blog" ifadesini "site" olarak değiştirdik.

Peki birden fazla ifadeyi değiştirmek istersek bu kod işimizi görür mü? Replace fonksiyonu ile metin içerisinde birden fazla ifadeyi değiştiremiyoruz.

var metin = "Bilgisayar mühendisleri blog";
metin = metin.replace(" ","-");
alert(metin);

Yukarıdaki kodda boşlukları "-" ile değiştirmek istedim. Kodu çalıştırdığımda çıktı aşağıdaki gibi oldu.

Görüldüğü gibi sadece ilk boşluk değiştirildi.

Bunun için Regular Expression'lardan yararlanacağız. Yeni bir prototype ekliyoruz.

String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.replace(new RegExp(search, 'g'), replacement);
};

Ve bu eklemiş olduğumuz metodu çağırıyoruz.

var metin = "Bilgisayar mühendisleri blog";
metin = metin.replaceAll(" ","-");
alert(metin);

Çalıştırdığımda aşağıdaki görselde görebileceğiniz gibi tüm boşlukların "-" ile değiştirmiş oluyorum.

TypeScript nedir?

By Berkay 09:08 JavaScript, TypeScript 1 comment

JavaScript istemci tarafında kullanılan en önemli dil. Node.js gibi teknolojiler ile birlikte JavaScript'i server tarafında da kullanmaya başladık.

JavaScript ile büyük uygulamalar geliştirmek oldukça zordur. Kod büyüdükçe oldukça karmaşık bir hale gelir ve kodu okumak da kullanmak da gitgide zorlaşır. Ayrıca OOP ilkelerini karşılamaması, derleme zamanı hata denetimi özelliklerini benimsememesi JavaScript'in server tarafında başarılı bir teknoloji olmasını engeller. Bu açıkları kapatmak için Microsoft tarafından TypeScript geliştirilmiş ve kullanıma sunulmuştur.

TypeScript nedir?

TypeScript'in tanımı "Uygulama ölçekli geliştirme için JavaScript" tir. Nesne yönelimli, derlenebilir bir dildir. C#'ın da tasarımcısı olan Anders Hejlsberg tarafından geliştirilmiştir. TypeScript, JavaScript'e derlenen JavaScript'in bir üst kümesidir.

TypeScript'in özellikleri

Sadece JavaScript. TypeScript, JavaScript'le başlar ve JavaScript'le biter. Temel yapıtaşlarını JavaScript'ten alır. TypeScript kullanabilmek için sadece JavaScript bilmek yeterlidir. TypeScript ile yazdığımız kodlar JavaScript koduna dönüştürülür.

Diğer JavaScript kütüphanelerini destekler. Derlenmiş TypeScript kodları, herhangi bir JavaScript uygulaması tarafından kullanılabilir. Tüm JavaScript framework'lerini, tool'ları ve kütüphanelerini kullanabilir.

JavaScript aynı zamanda TypeScript. Herhangi bir .js dosyasını .ts uzantısıyla kaydederek derlenmesi sağlanabilir.

TypeScript sanal makineye ihtiyaç duymaz. JavaScript'in çalıştığı her ortamda çalışabilir.

Andres Hejlsberg tarafından sunulan TypeScript tanıtım videosuna buraya tıklayarak ulaşabilirsiniz.

TypeScript open source (açık kaynak) bir üründür. IDE olarak Visual Studio önerilirken, desteklenen diğer IDE'leri buradan görebilirsiniz.

JavaScript class tanımlamanın 3 yolu

By Berkay 14:15 JavaScript Leave a Comment

Syntax'ı göz önünde bulundurduğumuzda JavaScript, nesne yönelimli programlamada ciddi bir esneklik sağlamaktadır. Bu yazıda JavaScript'te sınıf oluşturmanın 3 yolundan bahsedeceğim. 3 yöntemi de gördükten sonra hangisini kullanmanız gerektiğine karar verebilirsiniz.

Her ne kadar class tanımlama olarak bahsedilse de JavaScript'te genel olarak bir class yapısı yok. Her şey nesnelerden oluşuyor. Nesnelerden başka nesneler türetiliyor. Diğer OOP dilleri gibi classlardan class türetme olayı yok.

1) Fonksiyonlar kullanma

En çok kullanılan yöntemlerden bir tanesi bu. Normal bir JavaScript fonksiyonu tanımlanır ve new keyword'ü kullanılarak yeni bir nesne oluşturulur. Property ve metot'lar fonksiyon oluşturulurken belirtilir. this komutu kullanılır.

function Araba(marka) {
 this.marka = marka;
 this.model = "Q7";
 this.yil = "2018";
}

var araba = new Araba('Audi');
alert(araba.marka + ' ' + araba.model + ' ' + araba.yil);

Yukarıdaki örnekte Araba class'ından bir nesne türettik ve bilgilerini ekranda gösterdik. Peki Araba class'ına ait, bilgileri gösteren bir metot tanımlamak istersem ne yapmam gerekir?

Bunun için kullanabileceğim 2 yöntem var. Birincisi fonksiyon (class) içinde metodu tanımlamak. İkincisi ise prototype eklemek.

1.1) Class içinde metodu tanımlamak

function Araba(marka) {
 this.marka = marka;
 this.model = "Q7";
 this.yil = "2018";
 this.bilgileriGetir = function() {
  return this.marka + ' ' + this.model + ' ' + this.yil;
 };
}

var araba = new Araba('Audi');
alert(araba.bilgileriGetir());

1.2) Prototype eklemek

function Araba(marka) {
 this.marka = marka;
 this.model = "Q7";
 this.yil = "2018";
}

Araba.prototype.bilgileriGetir = function() {
 return this.marka + ' ' + this.model + ' ' + this.yil;
};

var araba = new Araba('Audi');
alert(araba.bilgileriGetir());

2) Object Literal Kullanımı

Object literal'ler kısa yoldan dizi ya da nesne tanımlamaya imkan sağlar. Boş bir nesne aşağıdaki gibi oluşturulabilir.

var nesne = {};

Dizi tanımlama

var dizi = [];

Fonksiyon olarak tanımladığımız class'ı şimdi literal kullanarak tanımlayalım.

var araba = {
  marka: "Audi",
  model: "Q7",
  yil: 2018,
  bilgileriGetir: function() {
   return this.marka + ' ' + this.model + ' ' + this.yil;
  }
 }

 alert(araba.bilgileriGetir());

3) Singleton fonksiyon kullanımı

Son yöntem, önceki iki yöntemin kombinasyonu gibi. Singleton nesne tanımlamak için yine fonksiyon kullanıyoruz.

var araba = new function() {
 this.marka = "Audi",
 this.model = "Q7";
 this.yil = 2018;
 this.bilgileriGetir = function() {
  return this.marka + ' ' + this.model + ' ' + this.yil;
 }
}

alert(araba.bilgileriGetir());

jQuery - parent, parents ve closest metotlarının kullanımı

By Berkay 15:57 JavaScript, jQuery Leave a Comment

Bu yazıda jQuery'deki parent, parents ve closest ifadelerinin ne olduklarını, aralarındaki farkları ve nasıl kullanıldıklarını anlatmaya çalışacağım.

Jquery'de bu metotlara ihtiyaç duyulan anlar oluyor. Gönderilerden oluşan bir sayfamız olduğunu düşünelim. Gönderilerin içerisinde de görsel, başlık ve metin bulunsun. En altta da herhangi bir buton olsun ve bu butona tıkladığımda da bir takım işlemler yapmak istediğimi farzedelim. Gönderilerim aşağıdaki gibi görünüyor.

<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
.post {
 border: 5px solid #f5f5f5;
 margin: 20px;
}

.post img {
 display: block;
 float: left;
 margin-right: 20px;
}
</style>
</head>
<body>
<div class="post">
 <img src="https://cdn.pixabay.com/photo/2015/10/07/12/17/post-976115_960_720.png" width="100" height="100" />
 <h1>Gönderi 1</h1>
 <p>1. gönderinin içeriği</p>
 <div class="buttons">
  <input type="button" value="Tıkla"/>
 </div>
</div>
<div class="post">
 <img src="https://cdn.pixabay.com/photo/2015/10/07/12/17/post-976115_960_720.png" width="100" height="100" />
 <h1>Gönderi 2</h1>
 <p>2. gönderinin içeriği</p>
 <div class="buttons">
  <input type="button" value="Tıkla"/>
 </div>
</div>
<div class="post">
 <img src="https://cdn.pixabay.com/photo/2015/10/07/12/17/post-976115_960_720.png" width="100" height="100" />
 <h1>Gönderi 3</h1>
 <p>3. gönderinin içeriği</p>
 <div class="buttons">
  <input type="button" value="Tıkla"/>
 </div>
</div>
<div class="post">
 <img src="https://cdn.pixabay.com/photo/2015/10/07/12/17/post-976115_960_720.png" width="100" height="100" />
 <h1>Gönderi 4</h1>
 <p>4. gönderinin içeriği</p>
 <div class="buttons">
  <input type="button" value="Tıkla"/>
 </div>
</div>
</body>
</html>

Şimdi head tag'leri arasına jquery kodlarımı yazmaya başlıyorum.

$(document).ready(function(){
 $(".post input[type='button']").on("click", function(){

 });
});

Click fonksiyonunun içinde this komutunu kullandığımda tıklanan butona erişebilirim.

$(this).parent() komutunu çalıştırdığımda ise bir üst element olan buttons class'lı div'e erişiyorum.

$(this).parents() komutunu çalıştırdığımda ise tıkladığım butonun ana elementlerini görüyorum.

Closest komutuyla da istediğim herhangi bir parent elemente ulaşabiliyorum. Bana doğrudan bu butonu içinde parındıran .post class'lı element lazım. Bunun için aşağıdaki kodu yazıyorum.

$(this).closest(".post");

Aşağıdaki kod ile tıklanılan buton hangi class'taysa o class'ın arkaplan rengini değiştiriyorum.

$(document).ready(function(){
 $(".post input[type='button']").on("click", function(){
  var post = $(this).closest(".post").css("background","#f5f5f5");
 });
});

Aşağıdaki gibi kodun doğru şekilde çalıştığını görüyorum.

CSS - after ve before ifadelerinin kullanımı

By Berkay 16:06 CSS 1 comment

After ve before ifadeleri ile istediğimiz elementin öncesine ya da sonrasına herhangi bir içerik ekleyebiliyoruz. Bir menümüz olduğunu düşünelim ve menü elemanlarının başında istediğimiz bir görseli göstermek istiyoruz. Bunu sağlayabilmenin tabi ki birçok yöntem var ancak after ve before ifadelerini kullanarak bu işlemi çok çok kolay bir şekilde gerçekleştirebiliriz.

Aşağıdaki gibi bir menümüz olsun.

<ul id="menu">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
</ul>

Herhangi bir değişiklik yapmadığımız taktirde çıktısı aşağıdaki gibi olacak.

Instagram gönderilerini sayfada göstermek (Instafeed.js)

By Berkay 13:24 Instagram, JavaScript, jQuery, plugin Leave a Comment

İçinde bulunduğumuz dönemde sosyal ağların önemi çok büyük. Instagram da tartışmasız en büyük sosyal ağlardan bir tanesi. Sadece kişisel hesaplar değil, sahibi olduğumuz işletmeler için de Instagram hesabı açarak aktif olarak kullanıyoruz.

Bu yazıda Instafeed.js plugin'ini kullanarak Instagram hesabımızdaki gönderilerimizi sayfamızda göstereceğiz.

Öncelikle instagram hesabımız için access token almamız gerekecek. Daha sonra plugin'imizi sayfamıza ekleyeceğiz ve istediğimiz gibi düzenleyeceğiz.

1 - Instagram access token oluşturma

Instagram hesabımıza login olduktan sonra https://www.instagram.com/developer/ adresine gidiyoruz ve aşağıdaki görselde işaretlediğim "Manage Clients" butonuna tıklıyoruz.

Daha sonra Register a New Client butonuna tıklıyoruz.

Açılan formdaki bilgileri giriyoruz ve Register butonuna tıklıyoruz.

Application Name: Herhangi bir isim verebiliriz. Oluşturduğumuz client'ın ismi olacak.
Description: Açıklama giriyoruz.
Company Name: Site adresini yazabiliriz.
Website URL: Site adresi
Valid redirect URIs: Site adresi
Privacy Policy URL: Site adresi
Contact email: Email adresimiz

Bilgileri girdikten sonra Register diyerek client'ı oluşturuyoruz.

Successfully registered 'client adı'
Yazısıyla karşılaştık. Client'ımız başarıyla oluşturuldu.

2 - Plugin'i çalıştırma

Şimdi http://instagram.pixelunion.net/ adresine giderek access token bilgimizi alıyoruz.

Sayfamızı oluşturuyoruz.

<!DOCTYPE html>
<html>
<head>
<script src="instafeed.min.js"></script>
<style>
    #instafeed .item {
        float: left;
    }
</style>
</head>
<body>
<script type="text/javascript">
    var feed = new Instafeed({
        get: 'user',
        userId: 'self',
  accessToken: '8303600137.1677ed0.9..........',
  template: '<div class="item"><a href="{{link}}" target="_blank"><img src="{{image}}" /></a></div>'
 });
 
    feed.run();
</script>
<div id="instafeed"></div>
</body>
</html>

Sayfayı çalıştırdığımda çektiğim görseller yükleniyor.

Swift - post request ile url'den json çekme

By Berkay 12:23 decodable, iOS Programlama, JSON, Swift Leave a Comment

Bu yazıda Swift ile herhangi bir url'e istek göndererek nasıl json veri çekebileceğimizi ve çektiğimiz veriyi nasıl nesneye çevirebileceğimizi anlatacağım.

Json'ı https://jsonplaceholder.typicode.com/users/1 adresine istek göndererek alacağım. Json içeriği aşağıdaki gibi.

StoryBoard'a aşağıdaki gibi element'leri ekliyorum.

Getir butonuna tıkladığımda çektiğim verilerden id, name, username, email değerlerini text field'lara yazdıracağım.

TextField'ları ViewController sınıfıma ekledim.

Json'ı incelediğimizde bir root struct, address, geo ve company alanları için de birer struct eklemem gerektiğini görüyorum.

User adlı Decodable struct.

Address adlı struct.

Geo adlı struct.

Ve son olarak Company adlı struct

Şimdi eklediğim butonun touch inside action'ında kodlarımı yazıyorum.

Projeyi simülatörde çalıştırıyorum ve Getir butonuna tıklıyorum. Bilgilerin başarıyla geldiğini görüyorum.

Bilgisayar Mühendisliği Öğrenci Blogu

2 Ekim 2018 Salı

Abstract class nedir? Nasıl kullanılır?

Abstract class

18 Eylül 2018 Salı

HTML5 ile nesne oluşturma ve hareket ettirme

31 Ağustos 2018 Cuma

JavaScript replace işlemleri

TypeScript nedir?

TypeScript nedir?

TypeScript'in özellikleri

29 Ağustos 2018 Çarşamba

JavaScript class tanımlamanın 3 yolu

1) Fonksiyonlar kullanma

1.1) Class içinde metodu tanımlamak

1.2) Prototype eklemek

2) Object Literal Kullanımı

3) Singleton fonksiyon kullanımı

17 Ağustos 2018 Cuma

jQuery - parent, parents ve closest metotlarının kullanımı

16 Ağustos 2018 Perşembe

CSS - after ve before ifadelerinin kullanımı

15 Ağustos 2018 Çarşamba

Instagram gönderilerini sayfada göstermek (Instafeed.js)

1 - Instagram access token oluşturma

2 - Plugin'i çalıştırma

12 Ocak 2018 Cuma

Swift - post request ile url'den json çekme

Popular Posts

Search

Labels

Blog Archive

Translate