Her Sayfa Yenilendiğinde Değişen Yazı, Resim

8
Her Sayfa Yenilendiğinde Değişen Yazı
BeğenmedimYetersizİdare Ederİşime yaradıMükemmel (7 kişi oy kullandı. 5 üzerinden ortalama puan 4,71, oy kullanmak istemez misin?)
Loading...

Genellikle oyun yüklenme, arayüz geçişlerinde gördüğümüz her sayfa yenilendiğinde değişen yazı kodunu sizlere en basit haliyle aktaracağız.

Popüler birçok oyunda az sonra aktaracağımız kod yapısı ile olmasa da harita yüklenmesi, oyuna giriş, sayfa yüklenmesi gibi bölümlerinde karşınıza bilgi vermek, daha fazla detay aktarmak, beklenme süresinde ziyaretçileri sıkmamak ve aynı yapıdan, görünümden uzak tutmak için kullanılan bu özellik internette gereksiz zaman harcanılarak ancak elde edilebilmektedir. Birkaç javascript kodu ile de elde edebileceğiniz bu özellik için de vakit harcamak istemeyen webmaster dostlarımız da faydanalabilir.

Javascript nedir? Neredeyse tüm web tabanlı tarayıcıların desteklediği ve bu alanda kullanılan sayfaların dinamik yapısı için yüksek katkı sağlayan programlama, kodlama dilidir. HTML ve CSS kardeşliğine dinamik kazandıran Javascript, en çok bu ikili ile tercih edilmektedir.

Kodumuzu vermeden hafiften bahsetmek gerekirse HTML içi javascript kullanacağız. Bunu biraz açmak gerekirse harici javascript dosyasından çekmeden bileşenlerini direk html satır olarak yazacağız. Harici olarak çekimleme modelini de ilerleyen günlerde ek olarak düzenleyeceğiz.

Sponsorlu Bağlantılar

Harici javascript dosyası nasıl kullanılır? Web dünyasının gelişmesiyle ve hız faktörünün değerinin artmasıyla header’den footer’a yolculuk yapan javascript dosya çekme komutu <script type="text/javascript" src="dosya-dizini"></script> ile “dosya-dizini” bölümünün harici javascript dosyasının dizininin girilmesiyle sayfaya etki edecek derecede kullanılabilir.

Sayfa Yenilendiğinde Değişen Yapı Oluşturma

Her Sayfa Yenilendiğinde Değişen Yazı

Her sayfaya girişte farklı bir yazının görüntülendiğinde, yazımızın başında bahsettiğimiz gibi yüklenme ekranlarının vazgeçilmezi bu özelliği HTML ve Javascript’e uyarladık.

<script language="Javascript">
function degisenyazi() {
};
degisenyazi = new degisenyazi();
number = 0;

// Değişecek yazılarımız
degisenyazi[number++] = '<font color="black">buraya rastgele gösterilmesini istediğiniz bir yazı giriniz. #1</font>'
degisenyazi[number++] = '<font color="black"><strong>buraya rastgele gösterilmesini istediğiniz bir yazı giriniz. #2</strong></font>'
degisenyazi[number++] = '<font color="black">buraya rastgele gösterilmesini istediğiniz bir yazı giriniz. #3</font>'
increment = Math.floor(Math.random() * number);
document.write(degisenyazi[increment]);
// © 2018 ahmetonursolmaz.com.tr - Tüm Hakları Saklıdır.
</script>

Kodu ilgili yere, yazıların rastgele her sayfa yenilendiğinde değişen yazı şekilde gösterilmesini istediğiniz yere, ekleyiniz. Kodda karışık bir durum gördüğünüzde yorum kısmından veya iletişim alanlarımızdan ulaşabilirsiniz.

Her Sayfa Yenilendiğinde Değişen Resim

Önceki kodumuzdan değişik olarak yazı yerine resim göstereceğiz. Kodumuzda ‘ yapısından ” yapısına geçiş yapıp resim çektiğimiz dizini ise ‘ ile göstereceğiz. Buyrun ihtiyacınız olan kod yapısı;

<script language="Javascript">
function degisenaosresim() {
};
degisenaosresim = new degisenaosresim();
number = 0;

// Değişecek yazılarımız
degisenaosresim[number++] = "<img src='https://ahmetonursolmaz.com.tr/wp-content/uploads/aoslmzlogomini2.png'></img>"
degisenaosresim[number++] = "<img src='https://ahmetonursolmaz.com.tr/wp-content/uploads/aoslmzlogomini2.png'></img>"
degisenaosresim[number++] = "<img src='https://ahmetonursolmaz.com.tr/wp-content/uploads/aoslmzlogomini2.png'></img>"
increment = Math.floor(Math.random() * number);
document.write(degisenaosresim[increment]);
// © 2018 ahmetonursolmaz.com.tr - Tüm Hakları Saklıdır. 
</script>

Kodu kullanmak için resim dizinlerini kendi istediğiniz resimleri koyabilirsiniz. Yukarıdaki yazı kodu gibi aynı şekilde kullanmak istediğiniz yere, her sayfa yenilendiğinde değişen resim olmasını istediğin yere, koyabilirsiniz.

Her sayfayı yenilendiğinde değişen yazı, resim demosu

Yazımızda sizlere sayfanın yeniden yüklediğinde farklı bir sayfaymış gibi görünmesini sağlayabilecek bu özellikten bahsettik ve en basit kullanabileceğiniz yapısını gösterdik. Kodlar hakkında bir problem yaşadığınızda yorum alanından veya iletişim adreslerinden ulaşabilirsiniz.

Önceki İçerikWindows Bilgisayarı Otomatik Kapatma
Sonraki İçerikDroid4x Nedir Android emülatör Alternatifleri 2018
2012 senesinde başladığım ve hala aktif olarak yer aldığım web alanında; front-end, back-end kodlamaları, tasarım ve makale yazarlığı yapmaktayım. Web alanında çok yönlü bir eğilim sergiliyorum. Leadfure markası ile pazarlama, web hizmetleri ve onun adı altında kurduğumuz birçok proje üzerinde çalışmalarımız devam ediyor.
Paylaş

8 YORUMLAR

  1. Her sayfayı yenilendiğinde yenilenecek olan içerik sırayla çekilebilir mi. Ayrıca yenileme farklı Aypi adreslerinden olursa yine sıralama yapılabilir mi

    • Yani anlattığınız şey sanırım, birinci yenilemeden sonra ekrana gelecek içeriğin bilinerek gelmesi. Bu söylediğiniz yapılabilir ve kodumuzun increment = Math.floor(Math.random() * number); yeriyle orantılı bir seçenek.

  2. Güzel bir konuya değinmişsiniz. Bunu C+’da denemiştim bahsettiğiniz gibi oyun ekranı geçişinde mantık aynı ama fonksiyon oldukça değişik.

  3. Its like you read my mind! You appear to know so much about this,
    like you wrote the book in it or something.
    I think that you could do with some pics to drive the message home
    a little bit, but other than that, this is fantastic blog.

    A fantastic read. I’ll definitely be back.

CEVAP VER

Please enter your comment!
Please enter your name here