15 Ücretsiz JavaScript Örnek Siteniz İçin Parçacıklar

Güncelleme: Nis 29, 2021 / Makale: WHSR Guest

Ifşa: WHSR okuyucu desteklidir. Bağlantılarımız aracılığıyla satın aldığınızda bir komisyon kazanabiliriz.

JavaScript bugünlerde her yerde çevrimiçi olarak kullanılıyor - web sitesi etkileşimini iyileştirmek, bilgileri doğrulamak ve / veya bir web sitesinin görünümünü iyileştirmek için.

JavaScript ilk olarak 1995'te göründü ve o zamandan beri kabul edilme ve nasıl kullanıldığı konusunda uzun bir yol kat etti. JavaScript'te kullanılan sözdizimi C; fakat Java, Pearl, Python ve Scheme de rolünü oynadı.

JavaScripti Acemi İpuçları: Bilmeniz Gerekenler?

Yeni başlayanlar için bilmeniz gereken birkaç temel nokta:

  • JavaScript tarayıcıda kapatılabilir
  • Her sayfa yüklendiğinde JavaScript çalışır
  • JavaScript'in yavaş bir İnternet bağlantısına yüklenmesi zaman alıyor
  • JavaScript hala önbelleğe alınmış sayfalardan çalıştırılıyor
  • JavaScript'i bir web sayfasında veya harici olarak bir .js dosyasından barındırabilirsiniz.
  • JavaScript Java'dan tamamen farklı

JavaScript’in yanlış kullanıldığında felakete yol açacağını anlamak da önemlidir.

Kötü yapılandırılmış ve özensiz kodlanmış JavaScript'ler web sitenizi yavaşlatır ve genel site gezinmesine zarar verir. Bu da ziyaretçilerinizin geri dönüş oranını (kötü kullanıcı deneyimi nedeniyle) ve arama motoru sıralamalarını (yavaş web sitesi yanıt oranları ve bot taraması nedeniyle) etkiler. Buradaki durumumu doğrulamaya yardımcı olmak için, kendinizi bir izleyicinin yerine koyun. Ziyaret etmekte olduğunuz bir web sitesi yavaş yüklense, gezinmesi zor ve genel olarak çekici değilse, siteye geri döner miydiniz? Yapmazdım.

Aşağıda, JavaScript’e eklerken dikkat edilmesi gereken küçük bir liste bulunmaktadır. Senin internet siten.

  • Sitenin düzgün çalışması için JavaScript gerekli midir?
  • JavaScript engellendiğinde site neye benzeyecek?
  • JavaScript sunucu performansına zarar verir mi?
  • JavaScript'i eklemek, sitenizi gitmek istediğiniz yöne kaydırmaya yardımcı olur mu?

Hayır, seni bu noktalardan korkutmaya çalışmıyorum.

Aslında, korkma web sitelerinde JavaScript kullan tonlarca fayda sağladığı ve belirtildiği gibi çoğunluklar tarafından kullanıldığı için. Burada anlatmaya çalıştığım anahtar nokta, gereksiz olduklarında bir siteye sadece JavaScript özellikleri eklemeye devam etmek değil. Bazı sitelerin diğerlerinden daha fazla JavaScript'e ihtiyacı olacaktır; bazıları sadece daha azına ihtiyaç duyar - Bir site bunu yapıyor diye aynı şeyi yapmanız gerektiği anlamına gelmez.

Freebies: 15 Web Siteniz İçin Harika JavaScript Parçacıkları

Şimdi, buraya geldiğiniz maddelere geçelim - aşağıda sitenizi işlevsellik veya görünüm açısından geliştirecek 15 JavaScript parçasının bir listesi var. Kod, başlık ve gövde veya .js dosyası olmak üzere iki bölüme ayrılacaktır. Herhangi bir bölüm başlığı verilmemişse, o belirli snippet için gerekli değildir.

1. HTML5 Video’yu anlama

Hızlı Örnek

function understands_video() {
return !!document.createElement('video').canPlayType; // boolean
}

if ( !understands_video() ) {
// Must be older browser or IE.
// Maybe do something like hide custom
// HTML5 controls. Or whatever...
videoControls.style.display = 'none';
}

JavaScript pasajı ne yapar?

Bu küçük snippet, web sitenizin, tarayıcının destekleyemediği bir videoyu görüntülemeye çalışmasını, size bant genişliğini ve işlem gücünü korumasını önleyecektir.

2. JavaScript Çerezleri

Hızlı Örnek

/**

* Sets a Cookie with the given name and value.

*

* name       Name of the cookie

* value      Value of the cookie

* [expires]  Expiration date of the cookie (default: end of current session)

* [path]     Path where the cookie is valid (default: path of calling document)

* [domain]   Domain where the cookie is valid

*              (default: domain of calling document)

* [secure]   Boolean value indicating if the cookie transmission requires a

*              secure transmission

*/                        

function setCookie(name, value, expires, path, domain, secure) {

    document.cookie= name + "=" + escape(value) +

        ((expires) ? "; expires=" + expires.toGMTString() : "") +

        ((path) ? "; path=" + path : "") +

        ((domain) ? "; domain=" + domain : "") +

        ((secure) ? "; secure" : "");

}








/**

* Gets the value of the specified cookie.

*

* name  Name of the desired cookie.

*

* Returns a string containing value of specified cookie,

*   or null if cookie does not exist.

*/

function getCookie(name) {

    var dc = document.cookie;

    var prefix = name + "=";

    var begin = dc.indexOf("; " + prefix);

    if (begin == -1) {

        begin = dc.indexOf(prefix);

        if (begin != 0) return null;

    } else {

        begin += 2;

    }

    var end = document.cookie.indexOf(";", begin);

    if (end == -1) {

        end = dc.length;

    }

    return unescape(dc.substring(begin + prefix.length, end));

}








/**

* Deletes the specified cookie.

*

* name      name of the cookie

* [path]    path of the cookie (must be same as path used to create cookie)

* [domain]  domain of the cookie (must be same as domain used to create cookie)

*/

function deleteCookie(name, path, domain) {

    if (getCookie(name)) {

        document.cookie = name + "=" +

            ((path) ? "; path=" + path : "") +

            ((domain) ? "; domain=" + domain : "") +

            "; expires=Thu, 01-Jan-70 00:00:01 GMT";

    }

}

JavaScript pasajı ne yapar?

Bu snippet biraz uzun ama çok kullanışlı, sitenizin görüntüleyicinin bilgisayarında bilgi depolamasını ve daha sonra başka bir zamanda okumasını sağlayacak. Bu snippet, farklı görevleri gerçekleştirmek için birçok farklı şekilde kullanılabilir.

3. Resimlerinizi önceden yükleyin

Hızlı Örnek

var images = new Array();

function preloadImages(){

    for (i=0; i 

JavaScript pasajı ne yapar?

Bu kod parçası, sitenizin yalnızca sitenin bir bölümünü görüntülerken bu tuhaf süreye sahip olmasını önler; bu sadece kötü görünmekle kalmıyor aynı zamanda profesyonelce değil. Tek yapmanız gereken, resimlerinizi preloadImages bölümüne eklemek ve hazır olmaya hazırsınız.

4. E-posta Doğrulama

Hızlı Örnek

Başkanı:


function validateEmail(theForm) {
if (/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/.test(theForm.email-id.value)){
return(true);
}
alert("Invalid e-mail address! Please enter again carefully!.");
return(false);
}


Vücut: E:

JavaScript pasajı ne yapar?

Bu kod parçası, doğru biçimde biçimlendirilmiş bir e-posta adresinin bir forma girildiğini doğrulayacaktır, e-posta adresinin gerçek olduğunu garanti edemez, JavaScript ile bunu kontrol etmenin bir yolu yoktur.

5. Sağ Tıklama Yok

Hızlı Örnek

function f1() {
  if(document.all) { return false; }
}
function f2(e) {
  if(document.layers || (document.getElementById &! document.all)) {
    if(e.which==2 || e.which==3) { return false; }
  }
}
if(document.layers) {
  document.captureEvents(Event.MOUSEDOWN);
  document.onmousedown = f1;
}
else {
  document.onmouseup = f2;
  document.oncontextmenu = f1;
}
document.oncontextmenu = new function("return false");

JavaScript pasajı ne yapar?

Bu kod parçası, izleyicinin sayfanıza sağ tıklamasını engeller. Bu, ortalama kullanıcıyı sitenizden ödünç resim veya kod almaktan caydırabilir.

6. Rastgele Alıntıları Göster

Hızlı Örnek

baş:
  writeRandomQuote = function () {
    var quotes = new Array();
    quotes[0] = "Action is the real measure of intelligence.";
    quotes[1] = "Baseball has the great advantage over cricket of being sooner ended.";
    quotes[2] = "Every goal, every action, every thought, every feeling one experiences, whether it be consciously or unconsciously known, is an attempt to increase one's level of peace of mind.";
    quotes[3] = "A good head and a good heart are always a formidable combination.";
    var rand = Math.floor(Math.random()*quotes.length);
    document.write(quotes[rand]);
  }
  writeRandomQuote();


Vücut: writeRandomQuote();

JavaScript pasajı ne yapar?

Tamam, bu, tüm sitelerin kullanacağı bir snippet değil, ancak rastgele alıntılardan daha fazlasını görüntülemek için kullanılabilir. İçeriği istediğiniz gibi değiştirebilir ve sitenizin herhangi bir yerinde rastgele resim veya metin görüntüleyebilirsiniz.

7. Önceki / Sonraki Bağlantılar

Hızlı Örnek

Önceki Sayfa | Sonraki Sayfa

JavaScript pasajı ne yapar?

Bir makale veya öğretici üzerinde birden fazla sayfa varsa, bu snippet harika. Kullanıcının kolaylıkla sayfalar arasında gezinmesini sağlar. Aynı zamanda, kaynak açısından küçük ve hafiftir.

8. Bir Sayfayı İşaretleyin

Hızlı Örnek

Favorilere ekle

JavaScript pasajı ne yapar?

Bu kod parçası, kullanıcının sayfanızı kolaylıkla yer imlerine eklemesini sağlar; tek yapmaları gereken bağlantıya tıklamak. İzleyicilerinizin genel deneyimini artırabilen küçük özellikleri.

9. Kolay Baskı Sayfası Bağlantısı

Hızlı Örnek

Sayfayı yazdır

JavaScript pasajı ne yapar?

Bu küçük bağlantı, görünümlerinizin sayfanızı kolayca yazdırmasını sağlar. Tarayıcınız tarafından önceden ayarlanmış hızlı yazdırma özelliğini kullanır ve tıklanıncaya kadar kaynak kullanmaz.

10. Biçimlendirilmiş Tarihi Göster

Hızlı Örnek

baş:
  function showDate() {
    var d = new Date();
    var curr_date = d.getDate();
    var curr_month = d.getMonth() + 1; //months are zero based
    var curr_year = d.getFullYear();
    document.write(curr_date + "-" + curr_month + "-" + curr_year);
  }


Vücut: showDate();

JavaScript pasajı ne yapar?

Bu kod parçası, geçerli tarihi web sayfanızın herhangi bir yerinde görüntülemenizi sağlar ve güncellenmesi gerekmez. Basitçe yerine koyun ve unutun.

11. Virgül ayırıcı

Hızlı Örnek

baş:
function addCommas(num) {
  num += '';
  var n1 = num.split('.');
  var n2 = n1[0];
  var n3 = n1.length > 1 ? '.' + n1[1] : '';
  var temp = /(d+)(d{3})/;
  while (temp.test(n2)) {
    n2 = n2.replace(temp, '' + ',' + '');
  }
  var out = return n2 + n3;
  document.write(out);
}


Vücut: addCommas("4550989023");

JavaScript pasajı ne yapar?

Bu pasaj, çoğunlukla sayıları kullanan siteler tarafından kullanılır. Bu pasaj, numaralarınızı tahtanın tamamında aynı görmeye devam edecektir. Tek yapmanız gereken, numara eklemek istediğiniz gövde hattını kopyalamak ve buradaki numarayı numaranızla değiştirmek.

12. Bir Tarayıcının Ekran Alanını Alın

Hızlı Örnek

Your viewport width is '+viewportwidth+'x'+viewportheight+'');

//-->

JavaScript pasajı ne yapar?

Bu snippet, görüntüleme tarayıcınızda ekran alanının genişliğini ve yüksekliğini elde etmenizi sağlar. Bu, tasarımcıya, kullanıcının tarayıcı penceresinin boyutuna bağlı olarak farklı ekranlar oluşturma ve kullanma yeteneği verecektir.

13. İsteğe Bağlı Gecikmeli Yönlendirme

Hızlı Örnek

setTimeout( "window.location.href =

'http://walkerwines.com.au/'", 5*1000 );

JavaScript pasajı ne yapar?

Bu kod parçası, görüntüleyenlerinizi başka bir sayfaya yönlendirmenize izin verir ve gecikme ayarlama seçeneğine sahiptir. Bu pasajın kullanımı oldukça açıklayıcıdır ve kemerinizde olması çok değerli bir araçtır.

14. İPhone'ları Algıla

Örnek

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {

    if (document.cookie.indexOf("iphone_redirect=false") == -1) {

        window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";

    }

}

JavaScript pasajı ne yapar?

Bu snippet, izleyicinizin iPhone veya iPod'da olup olmadığını fark etmenize ve farklı içerik göstermenize olanak tanır. Bu snippet, mobil pazarın ne kadar büyük olduğu ve yalnızca büyümeye devam edeceği için paha biçilemez.

15. Mesajı Durum Çubuğuna Yazdır

Hızlı Örnek

 
"; 
// --> 

JavaScript pasajı ne yapar?

Bu küçük snippet, durum çubuğuna bir mesaj yazdırmanıza izin verir. En son veya önemli haberleri kullanıcının dikkatini çekecek bir alanda görüntüleyebilirsiniz.

Daha fazla oku:

WHSR Misafir Hakkında

Bu makale bir konuk katkıda bulunan tarafından yazılmıştır. Yazarın aşağıdaki görüşleri tamamen kendi başınadır ve WHSR'nin görüşlerini yansıtmayabilir.