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 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.

WWW(Word Wide Web) nedir ?



WWW Nedir ?

WWW yani "Word Wide Web" günümüzde kulladığımız web sitelerinin standardıdır. Günlük hayatta en çok kullanığımız tabiri ise WEB 'dir. Yani aslında web sayfası derken "WWW" içerisinde geçen Web kelimesini kullanıyoruz. Peki nedir bu Web ?

Web 'in olmadığı yıllarda internet savunma amaçlı kullanılmaktaydı. İlk olarak internet ABD savunma bakanlığı tarafından ARPANET adında bir ağ şeklinde kullanılmaya başladı ve amacı sadece çeşitli bilgileri karşı tarafa göndermekti. Bu bilgiler de yalnızca metin içeriyordu.
Daha sonra internet 'e olan ilgi artmış ve çeşitli eğitim kuruluşlarının da ağ üzerine dahil olmasıyla internet geniş bir alana hızla yayılmaya başlamıştır.

WWW 'in İcadı

İnternet 'in yaygınlaşmasıyla beraber geniş bir ağ oluşmuş ve bu ağ üzerinden çeşitli bilgileri ve içeriği yayınlama sorunu oraya çıkmıştı. İnternet 'in ilk zamanlarında bir web sayfası yayınlamak şimdiki kadar cazibeli değildi. Çünkü ses,video,animasyon(multimedya içerikler) gibi içerikler internet ortamında paylaşılamıyordu.



Bundan dolayı bir gün Tim Benners-Lee adında bir bilim adamı CERN adında bir labaratuvarda internet 'teki bu sorunların çözümü için yeni bir fikir ortaya attı ve 1989 yılında günümüzde kullandığımız HTML adındaki işaretleme dilini icat etti.
Daha sonra 1994 yılında W3C (WWW Consortium/WWW Konsorsiyumukurulmuş, HTML ve zamanla da CSS icat edilerek bu dillerin uluslararası bir standart haline gelmesi sağlanmıştır.





HTML icat edildikten hemen sonra da milyonlara ulaşmış olan ilk WEB sayfasına aşağıdan ulaşabilirsiniz.

SEO nedir ve nasıl yapılır ?




SEO yani Search Engine Optimization/Arama Motoru Optimizasyonu,web sayfalarının arama motorlarında daha üst sıralarda görünmesini sağlamak için yine web sayfası üzerinde yapılan işlemlere verilen addır.
Hemen hemen birçok yerde görebileceğiniz kısa tanımı bu şekildedir. Ancak SEO 'yu daha iyi açıklamak ve anlamak önemlidir. Zira SEO sadece arama motorlarında üst sıralamalara girmek için yapılmaz. Aynı zamanda SEO, bir web sayfasının kullanıcı dostu olmasını sağlar.

Başarılı bir web sitesi hem kullanıcı dostu hemde arama motoru dostu olmalıdır. Yani bu ikisi bir arada bulunuyorsa o zaman SEO yapılmış demektir.
Bir web sitesinin SEO standartlarına uyabilmesi için aşağıdaki özellikleri bünyesinde barındırması gerekir;

  • Web sitesi kullanıcı dostu olmalıdır (Site tasarımı ve kod dizilimi SEO 'ya göre dizayn edilmelidir)
  • Web sitesi periyodik olarak güncellenmelidir.
  • Web sitesi Facebook, Twitter ve Instagram gibi uygulamalar üzerinden erişilebilir olmalıdır.
  • Link ve backlink (bir sitenin diğer bir site adresini vermesi) konusunda asla taviz verilmemelidir.
  • Web sitesi için, içeriğe uygun ve dikkat çekici anahtar kavramlar seçilmelidir.
  • Web sitesi kullanıcıları kimi zaman kelimeler yerine bir kaç kelime ile arama yapmaktadır. Bu durum göz önünde bulundurulmalıdır.
  • Bir web sitesi ilgili ekonomik ve kültürel koşullara göre iki yada daha fazla çok dilli olabilir.


Genel olarak bu özellikler SEO için oldukça önemlidir. Tabi zamanla daha da detaylaşan bir konudur ve takip edilerek yeniliklere karşı her zaman açık olunmalıdır.

PHP ile zaman aşımını görüntüleme



Bugün web sayfalarında Facebook gönderilerinde olduğu gibi paylaşılan içeriğin zaman aşımını görüntüleyen bir kodu sizlerle paylaşmak istedim.

1. Fonksiyon kodu


// Zaman aşımı fonksiyonu
function time_since($since) {
$chunks = array(
array(60 * 60 * 24 * 365 , 'yıl'),
array(60 * 60 * 24 * 30 , 'ay'),
array(60 * 60 * 24 * 7, 'hafta'),
array(60 * 60 * 24 , 'gün'),
array(60 * 60 , 'saat'),
array(60 , 'dakika'),
array(1 , 'saniye')
);

for ($i = 0, $j = count($chunks); $i < $j; $i++) {
$seconds = $chunks[$i][0];
$name = $chunks[$i][1];
if (($count = floor($since / $seconds)) != 0) {
break;
}
}

$print = ($count == 1) ? '1 '.$name : "$count {$name}";
return $print;
}


2. Kullanımı

Oldukça basit bir şekilde şimdiki zamandan gönderi/paylaşım zamanını çıkarıp time_since() içerisine yuvarlıyoruz.


//Kullanımı
echo time_since(strtotime("now")-$veri['soru_zaman']);

Sitene Facebook Paylaş Butonu Ekle




Nette pek güncel kaynak bulamadığım için biraz araştırmak durumunda kaldığım konulardan birisini de ilerde ihtiyacı olanlar için paylaşmak istedim. Facebook paylaş butonunu kendi projem üzerinde kullandım. Aslında çok kolay bir yolu var ama insan farklı işlerle uğraşırken bir de bunu mu öğrenelim şimdi demekten geri duramıyor.

Neyse uzatmadan kısaca anlatacağım. Dev/Facebook adresindeki bu makaleyi açalım. Buradaki işlemleri yapacağız. Öncelikle ben kendi Facebook Uygulamam üzerinden kodları aldım. Anlatımı da böyle yapacağım.

1. Aşağıda "head" tagı arasına eklemeniz gereken "meta" tagları var benim için lazım olanlar url, type, title ve description 'ndı. Daha fazlası makale içerisinde var. Bunları "head" içerisine ekliyoruz ve bulunduğunuz sayfanın bilgilerini etikette belirtildiği gibi "content" içerisine eklemeniz gerekiyor.

Örneğin ben sayfamın linkini ve listelemem gereken konunun bilgilerini PHP ile url bilgisi ile listelediğim verileri veritabanından çağırıp gerekli yerlere uyguladım.

<head>
<title>Site Başlığı</title>
<meta property="og:url" content="https://www.siten.com/icerik.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="İçerik başlığı" />
<meta property="og:description" content="İçeriğin açıklaması" />
<meta property="og:image" content="https://www.siten.com/resim.jpg" />
</head>


2. Uygulamanızın JS kodunu ve Paylaş Butonu kodunu "Share Button Configurator" alanından, gerekli ayarlamaları yapıp ve uygulamanızı seçip Get Code diyerek alın.



Aşağıdaki gibi bir JS kodu verecektir. "head" tagı içerisine ekleyin.
<!-- Facebook JS SDK Yükle -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>


Son olarak paylaş butonunu da hangi sayfada kullanacaksanız oraya ekleyip kullanabilirsiniz.
<!-- Paylaş Butonu -->
<div class="fb-share-button"
data-href="https://www.your-domain.com/your-page.html"
data-layout="button_count"> </div>



Bundan sonra sorunsuz çalışacaktır. Butonun türünü de yine kodları aldığınız api üzerinden ayarlayabilirsiniz.

LG G3 D855 Hardbrick Kurtarma


Bu yazımda sizlere kendime ait olan LG G3 model cep telefonumu hardbrick haldeyken nasıl açtığımı paylaşacağım. Umarım faydalı olur çünkü bu yazıyı aslında Boarddiag programının cep telefonunu görmemesi sorunu dolayısı ile paylaşıyorum. Boarddiag ile AP_Check yapmaya çalışmam sonucu "No Response from the device. Check PMIC first and if still boot problem, replace AP." uyarısı ile karşılaştım.
Bu yüzden de bu program yerine farklı uygulamalar kullanacağım. Böylelikle fazladan bir .tot dosyası indirmenize de gerek kalmayacak.

Birçoğunuz biliyorsunuzdur LG, G3 modeline Android 6 'dan sonra destek vermeyi kesti. Hal böyle olunca ben de meraklı bir vatandaş olarak Lineage OS kurma girişiminde bulundum ancak maalesef acemiliğimden dolayı telefonu root ettikten sonra netten kabaca indirdiğim TWRP Bootloader 'i flashlamam sonucu cihaza ilk önce uyarı verdirdim ve daha sonra da tekrar .kdz yüklemeye çalışırken tamamen açılmaz hale geldi.

Sonuç olarak yaklaşık üç gün telefonumu açmaya uğraştım, nette yabancı kaynakları alt üst ettim ve çok şükür üçüncü gün telefonumu bu durumdan kurtardım dahası Android 8.1(Lineage OS) sürümünü de başarılı bir şekilde kurdum şu anda sorunsuz kullanmaktayım.

Ek olarak nasıl buldun diye soracak olursanız biraz daha ağır çalışmasını beklerken tam tersine çok performanslı bir şekilde çalıştığını gözlemledim. Yani rahatlıkla yükleyebileceğinizi bildirmek isterim. (Bu arada telefonum G3 D855 16GB)

Başlayalım;

Öncelikle hiç bilmeyen birisine göre anlatmaya çalışacağım. Aşağıdaki linklerden dosyaları bilgisayarınıza indirin.

LG Mobile Driver İndir

HS-USB QDLoader Driver İndir

Android 5.0 Lolipop(.kdz) İndir

 

LG Smart Boot Diag Tool İndir Şifre: osmanusta123*

LGUP İndir

Güncelleme: Çalışmayan linkler güncellenmiştir.

1. Adım

İndirmeler tek dosya halinde değil ama idare edin artık. Öncelikle telefonunuz QDLoader 9008 sürücüsü ile aygıt yöneticisinde gözükür durumda olmalı. Bu yüzden HS-USB driver kurulumunu yapın ve telefon kapalı şekilde power tuşuna basılı tutarak ardından ses açma ve ses kapama tuşlarına aynı anda basın. LG logosu geldikten 1 sn sonra power tuşundan parmağınızı çekip tekrar basılı tutun.

Böylece ekran karanlık olacak ve daha önce yanıp sönen mavi+kırmızı ışık yanmayacak aygıt yöneticisinde şöyle bir donanım gözükecektir. Tam bu esnada parmağınızı tüm tuşlardan çekin.

Not: Eğer telefonunuzun ekranı hiç gelmiyor ise sadece USB kablosunu takmanız yeterli olacaktır.

 

2018-04-03 22_11_47-Bilgisayar Yönetimi.png














2. Adım

androidbrick_G3_fix.7z arşivini çıkarın. Şimdi Smart Tool aracını açın ve yukarıdaki işlemleri tekrar yaparak bağlantıyı yenileyin. "Not Ready !" yazan kısım COM X olarak değiştiği zaman telefonunuzun bağlantısını görecektir. Şimdi sağ üst Model info kısmından All EU Global_XXXX_XXXX seçerek gelen uyarıya Evet diyin. Kısa bir işlem yapacak ve ardından Could you fix it ? uyarısında da Evey diyin.
Açılan seçim penceresinden arşivden çıkardığınız AP_Chip > MSM8974_G3 > Recovery > All EU Global_XXXX_XXXX klasörünü seçin ve indirme işlemi yapacak işlemlerin tamamlanmasını bekleyin.

Picture4

Not: Daha önce telefonunuzun ekranı hiç gelmiyorsa bu işlemden sonra ekran da gelecektir.



3. Adım

İşlemler tamamlandıktan sonra LGUP aracını bilgisayarınıza yükleyin telefonunuzu Download Mod 'a alın ve LGUP programını çalıştırın.

 


Burada UPGRADE seçili iken aşağıdan "..." kısmına tıklayıp .kdz dosyasını seçiyoruz ve başındaki tik işarini kaldırıyoruz. Ardından REFURBISH kısmını aktif edip Start diyoruz. Bu işlemlerden sonra telefonunuz yeniden açılacak ve sıfırdan Android 5 Lollipop kurulmuş olacaktır.

Umarım işinize yarar elimden geldiğince sade anlatmaya çalıştım herhangi bir sorun ile karşılaşırsanız yorum olarak bildirin elimden geldiğince yardımcı olmaya çalışırım.