Veb saytlarınız üçün 15 pulsuz JavaScript nümunə parçaları

JavaScript bu günlərdə onlayn olaraq hər yerdə istifadə olunur – veb saytın interaktivliyini yaxşılaşdırmaq, məlumatı doğrulamaq və / və ya veb sayt görünüşlərini yaxşılaşdırmaq üçün.


JavaScript ilk dəfə 1995-ci ildə ortaya çıxdı və o vaxtdan bəri qəbul edilmə və necə istifadə edildiyi baxımından uzun bir yol keçdi. JavaScript-də istifadə olunan sintaksis C-yə güclü təsir göstərdi; lakin Java, Pearl, Python və Sxem də öz rolunu oynadı.

JavaScript Başlanğıc Göstərişləri: Bilməlisiniz?

Başlayanlar üçün bilməli olduğunuz bir neçə əsas bunlardır:

  • JavaScript brauzerdə söndürülə bilər
  • JavaScript bir səhifə yüklənəndə hər dəfə işə salınacaqdır
  • JavaScript yavaş bir İnternet bağlantısını yükləmək üçün vaxt tələb edir
  • JavaScript hələ də önbelleğli səhifələrdən işləyir
  • Bir veb səhifəsi daxilində və ya .js faylı xaricində JavaScript qəbul edə bilərsiniz
  • JavaScript Java-dan tamamilə fərqlidir

JavaScript’in səhv bir şəkildə istifadə edildiyi zaman həqiqətən fəlakətə səbəb olacağını başa düşmək vacibdir.

Zəif konfiqurasiya edilmiş və səliqəli kodlu JavaScriptts veb saytınızı yavaşlatacaq və ümumi sayt naviqasiyasına zərər verəcəkdir. Bu, öz növbəsində ziyarətçilərinizin geri dönüş sürətinə (istifadəçi təcrübəsi pis olduğuna görə) və axtarış motoru reytinqlərinə (veb saytların yavaş dərəcələri və bot sürünməsi səbəbindən) təsir göstərir. İşimi burada təsdiqləməyimə kömək etmək üçün özünüzü izləyicinin ayaqqabılarına qoyun. Ziyarət etdiyiniz bir veb sayt yavaş yüklənərsə, getmək çətindi və ümumiyyətlə, müraciət etməmisiniz – sayta qayıdacaqsınız? Etməzdim.

Aşağıda veb saytınıza JavaScript əlavə edərkən düşünməli olduğunuz kiçik bir siyahı.

  • Saytın düzgün işləməsi üçün JavaScript tələb olunur?
  • JavaScript bloklandığı təqdirdə sayt nə görünəcək?
  • JavaScript serverin işinə zərər verəcəkmi??
  • JavaScript yardımı əlavə etməklə saytınızı istədiyiniz istiqamətə köçürəcəkdir?

Xeyr, bu məqamlarla sizi qorxutmağa çalışmıram.

Əslində, veb saytlarınızda JavaScript istifadə etməkdən qorxmayın, çünki bu ton üstünlüklər verir və qeyd edildiyi kimi, əksəriyyət tərəfindən istifadə olunur. Buradan keçməyə çalışdığım əsas məqam lazımsız olduqda bir sayta JavaScript xüsusiyyətlərini əlavə etmək deyil. Bəzi saytlar digərlərindən daha çox JavaScript tələb olunur; bəzilərinə daha az ehtiyac var – Yalnız bir saytın bunu etməsi, eyni şeyi etməlisiniz demək deyil.

Freebies: Veb saytınız üçün 15 Sərin JavaScript parçaları

İndi buraya gəldiyiniz işlərə nəzər salaq – aşağıda saytınızı həm işləmə, həm də görünüş baxımından inkişaf etdirəcək 15 JavaScript parçasının siyahısı verilmişdir. Kod iki hissəyə bölünəcək, baş və bədən və ya .js faylı. Heç bir bölmə adı verilmirsə, o zaman həmin parça üçün lazım deyil.

1. HTML5 Video anlayışı

Tez Nümunə

funksiya başa düşür_video () {
qayıt !! sənəd.createElement (‘video’). canPlayType; // boolean
}

əgər (! anlayır_video ()) {
// Daha köhnə brauzer və ya IE olmalıdır.
// Bəlkə gizlətmək kimi bir şey edə bilərsiniz
// HTML5 nəzarət. Ya da nə varsa…
videoControls.style.display = ‘heç biri’;
}

JavaScript parçası nə edir?

Bu kiçik parça veb saytınızın brauzerinizin dəstəkləyə bilmədiyi bir video görüntüsünü göstərməyə mane olur, bant genişliyini və işləmə gücünü saxlayır.

2. JavaScript Cookies

Tez Nümunə

/ **

* Verilən ad və dəyəri olan bir çərəz hazırlayır.

*

* adı Cookie adı

* dəyər Cookie dəyəri

* [başa çatır] çerezin istifadə müddəti (defolt: cari sessiyanın sonu)

* [yol] Çerezin etibarlı olduğu yol (default: sənəd çağırış yolu)

* [domain] çerezin etibarlı olduğu domen

* (Standart: çağırış sənədinin domeni)

* [təhlükəsiz] çerez ötürülməsinin tələb olunduğunu bildirən boolean dəyəri

* Təhlükəsiz ötürmə

* /

funksiya setCookie (adı, dəyəri, müddəti, yolu, domeni, etibarlı) {

sənəd.cookie = ad + "=" + qaçmaq (dəyər) +

((başa çatır) ? "; müddəti =" + başa çatır.toGMTString (): "") +

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

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

((etibarlı) ? "; etibarlı" : "");

}

/ **

* Göstərilən çerezin dəyərini alır.

*

* adı İstədiyiniz çərəzin adı.

*

* Müəyyən edilmiş çerez dəyərini ehtiva edən bir simli qaytarır,

Çerez mövcud deyilsə * və ya null.

* /

funksiya getCookie (adı) {

var dc = sənəd.cookie;

var prefiks = ad + "=";

var start = dc.indexOf ("; " + prefiks);

əgər (başlamaq == -1) {

start = dc.indexOf (prefiks);

if (begin! = 0) return null;

} başqa {

başlamaq + = 2;

}

var end = sənəd.cookie.indexOf (";", başlamaq);

əgər (son == -1) {

son = dc.length;

}

unescape qayıt (dc.substring (başlanğıc + prefiks. uzunluq, son));

}

/ **

* Göstərilən çerezi silir.

*

* çerezin adı

* [yol] çerezin yolu (çerez yaratmaq üçün istifadə olunan yol ilə eyni olmalıdır)

* [cookie] domeni (çerez yaratmaq üçün istifadə olunan domenlə eyni olmalıdır)

* /

funktsiya deleteCookie (ad, yol, domen) {

əgər (getCookie (adı)) {

sənəd.cookie = ad + "=" +

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

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

"; bitəcək = Thu, 01 Yanvar-70 00:00:01 GMT";

}

}

JavaScript parçası nə edir?

Bu parça bir az uzun, lakin çox faydalıdır, saytınıza məlumatı izləyicinin kompüterində saxlamağa və sonra başqa vaxt oxumağa imkan verəcəkdir. Bu parçadan fərqli tapşırıqları yerinə yetirmək üçün bir çox yoldan istifadə edilə bilər.

3. Şəkillərinizi əvvəlcədən yükləyin

Tez Nümunə

var images = yeni Array ();

funksiya preloadImages () {

üçün (i = 0; i < əvvəlcədən yükləyən şəkillər.arguments.length; i ++) {

şəkillər [i] = yeni Şəkil ();

şəkillər [i] .src = preloadImages.arguments [i];

}

}

əvvəlcədən yükləyən şəkillər ("logo.jpg", "ana_bg.jpg", "bədən_bg.jpg", "başlıq_bg.jpg");

JavaScript parçası nə edir?

Bu parça, saytın yalnız hissəsini göstərdikdə saytınızı o qədər də pis keçirməməsinə mane olur; bu nəinki pis görünür, həm də qeyri-peşəkardır. Sadəcə şəkillərinizi preloadImages bölməsinə əlavə etməlisiniz və gəzməyə hazırsınız.

4. Elektron poçtun təsdiqlənməsi

Tez Nümunə

Baş:

funksiya validateEmail (theForm) {
əgər (/ ^ w + ([.-]? w +) * @ w + ([.-]? w +) * (. w {2,3}) + $ /. test (theForm.email-id.value))) {
qayıt (gerçək);
}
xəbərdarlıq ("E-mail ünvanı səhvdir! Xahiş edirəm yenidən diqqətlə daxil olun!.");
qayıt (yalan);
}

Bədən:

Elektron poçt ünvanı:

JavaScript parçası nə edir?

Bu parça düzgün biçimlendirilmiş bir e-mail adresinin bir formada daxil edildiyini təsdiqləyəcək, e-poçt adresinin gerçək olduğuna zəmanət verə bilməz, JavaScript ilə bunu yoxlamaq üçün bir yol yoxdur.

5. Doğru klik yoxdur

Tez Nümunə

funksiya f1 () {
if (document.all) {return false; }
}
funksiya f2 (e) {
əgər (sənəd.layerlər || (sənəd.getElementById) &! sənəd.all)) {
əgər (e.which == 2 || e.which == 3) {return yalan; }
}
}
əgər (sənəd.layers) {
sənəd.captureEvents (Hadisə.MOUSEDOWN);
sənəd.onmousedown = f1;
}
başqa {
sənəd.onmouseup = f2;
sənəd.oncontextmenu = f1;
}
document.oncontextmenu = yeni funksiya ("yalan qayıt");

JavaScript parçası nə edir?

Bu parça izləyicinizin səhifənizi sağ vurmağı maneə törədir. Bu, orta istifadəçini saytınızdakı borc şəkillərindən və ya koddan çəkindirə bilər.

6. Təsadüfi sitatları göstərin

Tez Nümunə

Baş:

writeRandomQuote = funksiya () {
var quotes = yeni Array ();
sitatlar [0] = "Fəaliyyət zəkanın əsl ölçüsüdür.";
sitatlar [1] = "Beysbolun daha tez bitməsinin kriket üzərində böyük üstünlüyü var.";
sitatlar [2] = "Şüurlu və ya şüursuz olaraq bilinən hər məqsəd, hər hərəkət, hər düşüncə, hər bir hiss, baş verən dinclik səviyyəsini artırmaq üçün bir cəhddir.";
sitatlar [3] = "Yaxşı bir baş və yaxşı ürək həmişə çətin bir birləşmədir.";
var rand = Math.floor (Math.random () * quotes.length);
sənəd.write (sitatlar [rand]);
}
writeRandomQuote ();

Bədən:

writeRandomQuote ();

JavaScript parçası nə edir?

Yaxşı, bu, bütün saytların istifadə edəcəyi bir parça deyil, ancaq təsadüfi sitatlardan daha çox görüntüləmək üçün istifadə edilə bilər. Sitatlarınızı sitatlarınızı istədiyinizə dəyişə bilərsiniz və saytınızın hər yerində təsadüfi şəkillər və ya mətnlər var.

7. Əvvəlki / Sonrakı Links

Tez Nümunə

Əvvəlki səhifə | Növbəti səhifə

JavaScript parçası nə edir?

Bir məqalə və ya dərslikdə çox sayda səhifəniz varsa bu parça əladır. Bu istifadəçiyə səhifələr arasında asanlıqla göz gəzdirməyə imkan verəcəkdir. Həm də resurs baxımından kiçik və yüngüldür.

8. Səhifəni işarələyin

Tez Nümunə

Seçilmişlərə əlavə et

JavaScript parçası nə edir?

Bu parça istifadəçiyə səhifənizi asanlıqla nişanlamağa imkan verəcəkdir; etdikləri şey linki vurmaqdır. Tamaşaçıları ümumi təcrübənizi artıra biləcək bu kimi kiçik xüsusiyyətləri.

9. Asan çap səhifəsi bağlantısı

Tez Nümunə

Səhifəni çap edin

JavaScript parçası nə edir?

Bu kiçik link, baxışlarınızın səhifənizi asanlıqla çap etməsinə imkan verəcəkdir. Brauzeriniz tərəfindən əvvəlcədən quraşdırılmış sürətli çap xüsusiyyətindən istifadə edir və tıklanana qədər heç bir qaynaqdan istifadə etmir.

10. Formatlanmış tarixi göstərin

Tez Nümunə

Baş:

showDate () {funksiyası
var d = yeni Tarix ();
var curr_date = d.getDate ();
var curr_month = d.getMonth () + 1; // aylar sıfır əsaslıdır
var curr_year = d.getFullYear ();
sənəd.write (proqram_müddet + "-" + cərgə_ aylıq + "-" + Curr_year);
}

Bədən:

showDate ();

JavaScript parçası nə edir?

Bu parça, veb saytınızdakı cari tarixi göstərməyə imkan verəcək və yeniləməyə ehtiyac yoxdur. Sadəcə yerinə qoyun və unutun.

11. Vergül ayırıcı

Tez Nümunə

Baş:

funksiya addCommas (num) {
num + = ”;
var n1 = num.split (‘.’);
var n2 = n1 [0];
var n3 = n1.length > 1? ‘.’ + n1 [1]: ”;
var temp = / (d +) (d {3}) /;
isə (temp.test (n2)) {
n2 = n2.replace (temp, ” + ‘,’ + ”);
}
var out = qayıt n2 + n3;
sənəd.write (çıxdı);
}

Bədən:

addCommas ("4550989023");

JavaScript parçası nə edir?

Bu parça əsasən nömrələri tez-tez istifadə edən saytlar tərəfindən istifadə ediləcəkdir. Bu parça, nömrələrinizin lövhədə eyni görünməsini təmin edəcəkdir. Yalnız bir nömrəni əlavə etmək istədiyiniz bədən xəttini kopyalayın və oradakı nömrəni nömrənizlə əvəz edin.

12. Bir Brauzerin Ekran Sahəsini əldə edin

Tez Nümunə

Jeffrey Wilson Administrator

Sorry! The Author has not filled his profile.
follow me
    0
    Like this post? Please share to your friends:
    Adblock
    detector
    map