Top

javascript Tag

  • All
  • Dijital medya
  • Dijital reklam
  • Dijital strateji
  • Eğitim
  • Growth hacking
  • Haber
  • İnceleme
  • Kişisel
  • Kurumsal
  • Markalar
  • Medya
  • Rehber
  • Teknoloji

İstemcide veri depolama


HTML5 istemcide(client) veri depolama için iki yeni nesne sunmakta;

localStorage – zaman limitsiz depolama

sessionStorage – bir oturumluk depolama


Öncelinde, çerezlerle gerçekleşiyordu bu durum. Çok büyük veriler için de çerezler(cookies) uygun değil, çünkü her bir istekte sunucudan geçmekte bu da işlemin çok yavaş ve etkisi düşük kılıyordu.

HTML5’te, her sunucu isteğinde veri çağırılmamakta sadece sorulduğunda çağırılmakta. Böylelikle site performansı etkilenmeden büyük miktarlarda veri depolaması mümkün olmakta.

Veriler farklı web sitelerin farklı alanlarında depolanmakta ve bir websitesi kendi depoladığı veriye erişebilir.

HTML5 Javascript’i kullanarak verileri depolar ve ulaşır/erişir.


localStorage Nesnesi

Zaman limitsiz veri depolama nesnesidir. Veri sonraki gün, hafta ya da yıl erişilebilir olacaktır.


Nasıl oluşturur ve erişirsiniz?;
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

denemek için adresi; 

bu sıradaki örnek ise kullanıcının sayfa ziyaretini saymakta;

<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

denemek için adresi;


sesssionStorage Nesnesi

Bir oturumluk veri depolar. Kullanıcı tarayıcısını kapatıp çıkış yaptığında depolanan veri silinir.

Nasıl oluşturur ve erişim sağlarsınız bir sessionStorage ile?;
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

denemek

Canvas elementi bir web sayfası üzerinde çizim yapmak için kullanılır. Javascript ile beraber HTML5 içinde kullanılırak elde edilir çizimler web sayfasında.

Bir canvas bir dikdörtgen alandır ve herbir pikseli kontrol edebilirsiniz.

Canvas elementi, birkaç metoda sahiptir, çizim yolları, kutular, daireler, karakterler ve imaj eklemeleri gibi.

Canvas elementi oluşturmak

HTML5 sayfasına canvas elementini ekleyin. Id’yi, width’i ve height’ini da verin.

<canvas id=”cizimalanim” width=”200″ height=”100″></canvas>  gibi…

Javascript ile çizmek

Canvas elementinin kendi kendine bir çizim gücü yok. Herşey javascriptin kendi içinde gerçekleşmekte;

<script type=”text/javascript”>
var c=document.getElementById(“cizimalanim”);
var cxt=c.getContext(“2d”);
cxt.fillStyle=”#FF0000″;
cxt.fillRect(0,0,150,75);
</script>

bu örnekte olduğu gibi. Javascript canvas elementini bulmak için id’yi kullanmakta;

var c=document.getElementById("cizimalanim");

Sonra bağlamında nesneyi çizmekte;

var cxt=c.getContext("2d");

getContext(“2d”) nesnesi bir HTML5 ile yapılmış nesne ve birçok yolu var çizgiler, kutular, daireler, karakterler ve imajlar veya daha fazlası için.

Sonraki iki adım ise bir kırmızı dikdörtgen çizmek;

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

Fillstyle yöntemi kırmızı yapar onu ve fillrect yöntemi ise şekilin pozisyonu ve boyutunu belirler.

Çeviriler tırnak içinde gösterilir. Çevirilerin kaynağı; w3schools.com'dur. Çeviri haricindekiler bana aittir. Temel HTML derslerine de bakabilirsiniz bu konuya yabancıysanız. 16 Bölümdür ve ilk bölüme buradan ulaşabilirsiniz. Editör olarak; Notepad++, Dreamweaver ya da w3Schools'a ait paylaşacak olduğum online editörü kullanabilirsiniz. HTML, Meta ve Scripts Verilere dair bilgi sunar...

HTML ile kendi web sayfalarınızı oluşturabilirsiniz.  W3Schools.com ‘dan yapacağım bu çeviriler ile HTML’yi kolaylıkla öğrenebileceksiniz. HTML’nin öğrenmesi kolaydır ve zevkli bulacaksınız bu dili.

Başlangıç olarak bilgi; çevirileri(başlıklar hariç) çift tırnak içinde göstereceğim. Kendi yazdıklarım normal yazı olarak kalacak. Anlatacaklarımı uygulayabilmeniz için ilk önce denetim masasından klasör seçeneklerini bulmanız ve klasör uzantılarını göster halini seçmelisiniz. Ardından istediğiniz bir alanda(mesela masaüstünde) bir klasör açın web ismini verin. Klasörün içine girin(fare ile çift tık). Fare ile sağ tuş tıklayın ve metin belgesi(yeni metin.txt diye yazar) dosyasını oluşturun. Biz bu yeni metin.txt dosyası ile HTML dosyalarımızı oluşturacağız. Yeni metin.txt dosyasını açın ve farklı kaydete tıklayın. Açılan pencerede isim kısmına index.html yazın ve kaydedin web klasörümüzün içine. index.html klasörüne çift tıklayın ve browser(chrome, firefox, opera, internet explorer gibi)’da görebilelim. Artık web klasörümüzün içinde yeni metin.txt ve index.html adlı iki dosya olacağını biliyorsunuz ve artık hazırsınız. Bunu hazırlayamadıysanız bile, örnekleri uygulayabilmeniz için W3Schools‘taki metin editörünü paylaşmış olacağım. Sol taraftaki verileri silip, etiketleri(anlatacağım) yazarsınız ve edit and click me yazan yere basarsınız sağ tarafta da web sayfasının durumunu görebilirsiniz böylece. Bu benim ilk çalışmam. Umarım hepimize yararlı olur. Anlaşılmayan yerleri yorum olarak yazabilirsiniz/sorabilirsiniz. Kolay gelsin.


HTML iFrame

Web sayfasının içinde web sayfası gösterimi iFrame ‘dir.

<iframe src=”URL”></iframe> şeklinde kullanılır. URL alınması istenen sayfadır.

Iframe – Height ve Width

Height ve Width genişlik ve yüksekliğin belirlenmesini sağlar iframe’de de. Piksel olarak olduğu gibi yüzdelik olarak da belirtilebilir.

<iframe src=”iframe.htm” width=”200″ height=”200″></iframe> gibi kullanılır.

Iframe  – Sınırları/Çerçeveyi yani border’i kaldırma

Frameborder özelliği border boyutu belirlenir ve bu sayede isterseniz kenarları gösterirsiniz isterseniz göstermezsiniz 0 değeri ile.

<iframe src=”iframe.htm” frameborder=”0″></iframe>

Bir hedef ya da bağlantı olarak iframe’i kullanma

Bir iframe bir bağlantı için hedef çerçeve/frame olarak kullanılabilir.

Linke bağlı target/hedef özelliği iframe’in name özelliğinin değerini taşıması gerekir.

<iframe src=”iframe.htm” name=”iframe”></iframe>

<p><a href=”http://nefarkederki.com” target=”iframe”>Nefarkederki</a></p>

gibi kullanılabilir.