15 Cool JavaScript Örnek Parçacıkları

Yazan makale:
  • Özel Makaleler
  • Güncelleme: Mar 06, 2012

JavaScript Üzerine Hızlı Bir Bakış

JavaScript bugünlerde her yerde çevrimiçi olarak kullanılmaktadır - web sitesi etkileşimini geliştirmek, bilgileri doğrulamak ve / veya web sitesi görünümlerini geliş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ı.

JavaScript Nedir?

Eski bir YouTube klibi soruyu iyi yanıtlıyor. İşte gider.

Başlangıç ​​İ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ış JavaScripts web sitenizi yavaşlatır ve genel site navigasyonuna 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ı nedeniyle) etkiler. Buradaki davamı doğrulamak için kendini bir izleyicinin ayakkabılarına koy. Ziyaret ettiğiniz bir web sitesi yavaş yükleniyorsa, gezinmesi zordu ve genel olarak çekici değil - siteye geri döner misiniz? Yapmam.

Aşağıda, web sitenize JavaScript eklerken dikkat edilmesi gereken küçük bir liste bulunmaktadır.

  • 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, web sitelerinizde JavaScript'i tonlarca yarar sağladığı ve belirtildiği gibi çoğunluklar tarafından kullanıldığı için kullanmaktan korkmayın. Buraya girmeye çalıştığım en önemli nokta, gereksiz olduklarında bir siteye yalnızca JavaScript özellikleri eklemeye devam etmemektir. Bazı sitelerin diğerlerinden daha fazla JavaScript ihtiyacı olacak; bazıları sadece daha azına ihtiyaç duyar - Sadece bir site yapıyor olması aynı şeyi yapmanız gerektiği anlamına gelmez.

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

JavaScript Snippet'i

Şimdi, buraya geldiğiniz şeylere inelim. Aşağıda, sitenizi işlevsellik veya görünüm açısından geliştiren bir 15 JavaScript snippet listesi bulunmaktadır. Kod, baş ve gövde veya .js dosyası olmak üzere iki bölüme ayrılacaktır. Bölüm başlığı verilmezse, o belirli snippet için gerekli değildir.

HTML5 Video’yu anlama

Hızlı Örnek

<script type="text/javascript">

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

if (!ULS_video ()) {
// Eski tarayıcı veya IE olmalı.
// Belki de gizlemek gibi bir şey yap
// HTML5 denetimleri. Ya da her neyse…
videoControls.style.display = 'none';
}

</ Script>

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.

JavaScript Çerezleri

Hızlı Örnek

<script type="text/javascript">

/ **

* Verilen isim ve değer ile bir Çerez ayarlar.

*

* İsim Çerezin adı

* Çerezin değer değeri

* [expires] Çerezin son kullanma tarihi (varsayılan: geçerli oturumun sonu)

* [yol] Çerezin geçerli olduğu yol (varsayılan: belge çağırma yolu)

* [etki alanı] Çerezin geçerli olduğu alan adı

* (varsayılan: arama belgesinin alanı)

* [güvenli] Çerez aktarımının bir gerekip gerekmediğini gösteren Boole değeri

* güvenli iletim

*/

function setCookie (isim, değer, geçerlilik süresi, yol, alan adı, güvenli) {

document.cookie = isim + "=" + kaçış (değer) +

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

((Yol) "; yol =" + yolu: "") +

((etki alanı)? "; etki alanı =" + etki alanı: "") +

((Güvenli) "; güvenli": "");

}

</ Script>

<script type="text/javascript">

/ **

* Belirtilen çerezin değerini alır.

*

* İsim İstediğiniz çerezin ismi.

*

* Belirtilen çerezin değerini içeren bir dize döndürür,

* veya çerez yoksa, null.

*/

işlev getCookie (isim) {

var dc = document.cookie;

var öneki = ad + "=";

var begin = dc.indexOf (";" + önek);

eğer (başlangıç ​​== -1) {

begin = dc.indexOf (önek);

eğer (begin! = 0) dönüş null;

} Else {

+ = 2 başlar;

}

var end = document.cookie.indexOf (";", başlar);

eğer (end == -1) {

end = dc.length;

}

unescape dönüşü (dc.substring (begin + prefix.length, end));

}

</ Script>

<script type="text/javascript">

/ **

* Belirtilen çerezi siler.

*

* Çerezin isim ismi

* Çerezin [yol] yolu (çerez oluşturmak için kullanılan yolla aynı olmalıdır)

Çerezin * [alan adı] alanı (çerez oluşturmak için kullanılan alan adıyla aynı olmalıdır)

*/

deleteCookie işlevi (ad, yol, etki alanı) {

eğer (getCookie (isim)) {

document.cookie = isim + "=" +

((Yol) "; yol =" + yolu: "") +

((etki alanı)? "; etki alanı =" + etki alanı: "") +

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

}

}

</ Script>

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.

Resimlerinizi önceden yükleyin

Hızlı Örnek

<script type="text/javascript">

var images = new Array ();

işlev preloadImages () {

(i = 0; i <preloadImages.arguments.length; i ++) {için

görüntüler [i] = yeni Görüntü ();

images [i] .src = preloadImages.arguments [i];

}

}

preloadImages ("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg");

</ Script>

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.

E-posta Doğrulama

Hızlı Örnek

Başkanı:

<script type="text/javascript">
işlevi validateEmail (theForm) {
if (/ ^ w + ([.-]? w +) * @ w + ([.-]? w +) * (. w {2,3}) + $ /. testi (theForm.email-id.value)) {
return (true);
}
uyarı ("Geçersiz e-posta adresi! Lütfen dikkatlice tekrar girin!" ";
return (false);
}
</ Script>

Vücut:

<form onSubmit = "return validateEmail (bu);" action = "">
E-posta Adresi:
<input type = "text" name = "emailid" />
<input type = "gönder" değer = "Gönder" />
<input type = "reset" value = "Reset" />
</ Form>

JavaScript pasajı ne yapar?

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

Sağ Tıklama Yok

Hızlı Örnek

<script type="text/javascript">
f1 () işlevi
if (document.all) {false döndürür; }
}
f2 işlevi (e) {
if (document.layers || (document.getElementById &! document.all)) {
if (e.which == 2 || e.which == 3) {yanlış döndürür; }
}
}
if (document.layers) {
document.captureEvents (Event.MOUSEDOWN);
document.onmousedown = f1;
}
else {
document.onmouseup = f2;
document.oncontextmenu = f1;
}
document.oncontextmenu = yeni işlev ("return false");
</ Script>

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.

Rastgele Tırnakları Görüntüle

Hızlı Örnek

baş:

<script type="text/javascript">
writeRandomQuote = function () {
var quotes = new Array ();
tırnak [0] = "Eylem, zekanın gerçek ölçüsüdür.";
tırnak [1] = "Beyzbol daha erken bitmiş olma kriketine karşı büyük bir avantaja sahip.";
quotes [2] = "Her hedef, her eylem, her düşünce, her bir duygu, bir bilinçli veya bilinçsiz olarak bilinen olsun, her birini hissetme, kişinin huzur düzeyini artırma girişimidir.";
tırnak [3] = "İyi bir kafa ve iyi bir kalp her zaman zorlu bir kombinasyondur.";
var rand = Math.floor (Math.random () * quotes.length);
document.write (tırnak [rand]);
}
writeRandomQuote ();
</ Script>

Vücut:

<script type = "text / javascript"> writeRandomQuote (); </script>

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.

Önceki / Sonraki Bağlantılar

Hızlı Örnek

<a href="javascript:history.back(1)"> Önceki Sayfa </a> | <a href="javascript:history.back(-1)"> Sonraki Sayfa </a>

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.

Bir Sayfayı İşaretleyin

Hızlı Örnek

<a href="javascript:window.external.AddFavorite('http://www.yoursite.com ',' Sitenizin Adı')"> Sık Kullanılanlara Ekle </a>

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.

Kolay Sayfayı Yazdır

Hızlı Örnek

<a href="javascript:window.print();"> Sayfayı Yazdır </a>

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.

Biçimlendirilmiş Tarihi Göster

Hızlı Örnek

baş:

<script type="text/javascript">
showDate () {işlevi
var d = yeni Tarih ();
var curr_date = d.getDate ();
var curr_month = d.getMonth () + 1; // aylar sıfır tabanlı
var curr_year = d.getFullYear ();
document.write (curr_date + "-" + curr_month + "-" + curr_year);
}
</ Script>

Vücut:

<script type = "text / javascript"> showDate (); </script>

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.

Virgül Ayırıcı

Hızlı Örnek

baş:

<script type="text/javascript">
addCommas (num) işlevi {
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 = dönüş n2 + n3;
(Çıkış) document.write;
}
</ Script>

Vücut:

<script type = "text / javascript"> addCommas ("4550989023"); </script>

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.

Bir Tarayıcının Görüntü Alanını Alın

Hızlı Örnek

<script type="text/javascript">

<! -

var viewport genişliği;

var viewportheight;

// daha fazla standart uyumlu tarayıcılar (mozilla / netscape / opera / IE7) window.innerWidth ve window.innerHeight'ı kullanır

eğer (typeof.innerWidth! = 'undefined')

{

viewportwidth = window.innerWidth,

viewportheight = window.innerHeight

}

// IE6 standartlara uygun modda (yani belgede ilk satır olarak geçerli bir doktrin ile)

else if (documenteofocumentElement! = 'undefined')

&& typeof document.documentElement.clientWidth! =

'undefined' && document.documentElement.clientWidth! = 0)

{

viewportwidth = document.documentElement.clientWidth,

viewportheight = document.documentElement.clientHeight

}

// IE'nin daha eski sürümleri

başka

{

viewportwidth = document.getElementsByTagName ('body') [0] .clientWidth,

viewportheight = document.getElementsByTagName ('body') [0] .clientHeight

}

document.write ('<p> Görünümünüzün genişliği' + viewportwidth + 'x' + viewportheight + '</ p>');

// ->

</ Script>

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.

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

Hızlı Örnek

<script type="text/javascript">

setTimeout ("window.location.href =

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

</ Script>

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.

İPhone'ları Algıla

Örnek

<script type="text/javascript">

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";

}

}

</ Script>

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.

Mesajı Durum Çubuğuna Yazdır

Hızlı Örnek

<script language = "javascript" type = "text / javascript">
<! -
window.status = "<MESAJINIZI TIP>";
/ / ->
</ Script>

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.

WHSR Guest tarafından Makale

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.