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

Yazan makale:
  • Özel Makaleler
  • Güncelleme: Eylül 23, 2019

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

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ış 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ı ve bot taramaları 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, 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ğunluk tarafından kullanılır. 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ı

Ş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.

1. HTML5 Video’yu anlama

Hızlı Örnek

<script type = "text / javascript"> işlevi-büyüklükler_video () {return !! document.createElement ('video'). canPlayType; // boolean} if (! fundamentalds_video ()) {// Eski tarayıcı veya IE olmalı. // Belki de özel gizleme 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.

2. JavaScript Çerezleri

Hızlı Örnek

<script type = "text / javascript"> / ** * Belirtilen ad ve değerde bir Çerez ayarlar. * * name Çerezin adı * değer Çerezin değeri * [süresi biter] Çerezin son kullanma tarihi (varsayılan: geçerli oturumun sonu) * [yol] Çerezin geçerli olduğu yol (varsayılan: çağıran belgenin yolu) * [ etki alanı] Çerezin geçerli olduğu etki alanı * (varsayılan: çağıran belgenin etki alanı) * [secure] Çerez iletiminin * güvenli iletim * gerektirdiğini belirten Boolean değeri * / function setCookie (ad, değer, süresinin dolması, yol, etki alanı, güvenli) {document.cookie = name + "=" + escape (değer) + ((sona erecek)? "; expires =" + expires.toGMTString (): "") + ((path)? "; yol =" + yol: "") + ((etki alanı)? "; etki alanı =" + etki alanı: "") + ((güvenli)? "; güvenli": ""); } </script> <script type = "text / javascript"> / ** * Belirtilen çerezin değerini alır. * * name İstediğiniz çerezin adı. * * Tanımlanan tanımlama bilgisi değerini içeren bir dize, * veya tanımlama bilgisi yoksa null değerini döndürür. * / function getCookie (name) {var dc = document.cookie; var önek = ad + "="; var begin = dc.indexOf (";" + önek); if (begin == -1) {begin = dc.indexOf (prefix); if (begin! = 0) null döndürür; } else {begin + = 2; } var end = document.cookie.indexOf (";", başlama); if (end == -1) {end = dc.length; } dönüş unescape (dc.substring (begin + prefix.length, end)); } </script> <script type = "text / javascript"> / ** * Belirtilen tanımlama bilgisini siler. * * Çerezin adı * Çerezin [yol] yolu (Çerez oluşturmak için kullanılan yol ile aynı olmalıdır) Çerezin alanı [[etki alanı]] (Çerez oluşturmak için kullanılan etki alanı ile aynı olmalıdır) * / function name, path, domain) {if (getCookie (name)) {document.cookie = name + "=" + ((yol)? "; yol =" + yol: "") + ((etki alanı)? "; etki alanı = "+ domain:" ") +"; süresi dolmuş = Thu, 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.

3. Resimlerinizi önceden yükleyin

Hızlı Örnek

<script type = "text / javascript"> var images = new Array (); fonksiyon preloadImages () {((i = 0; i <preloadImages.arguments.length; i ++) {images [i] = new Image (); görüntüler [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.

4. E-posta Doğrulama

Hızlı Örnek

Başkanı:

<script type = "text / javascript"> işlevi validateEmail (theForm) {if (/^w+(Г.- class?w+)*@w+(Г.- sınıf?w+)*(.w{2,3))+$ /.test(theForm.email-id.value)) {return (true); } alert ("Geçersiz e-posta adresi! Lütfen dikkatlice tekrar girin !."); (Yanlış) döndürür; } </script>

Vücut: <form onSubmit = "return validateEmail (bu);" action = ""> E-posta Adresi: <giriş türü = "metin" name = "emailid" /> <giriş türü = "Gönder" değer = "Gönder" /> <giriş türü = "reset" değer = "Sıfırla" /> </form>

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

<script type = "text / javascript"> işlevi f1 () {if (document.all) {return false; }} işlevi 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 = 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.

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

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.

7. Ö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.

8. 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.

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

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.

10. Biçimlendirilmiş Tarihi Göster

Hızlı Örnek

baş: <script type = "text / javascript"> function showDate () {var d = new Date (); var curr_date = d.getDate (); var curr_month = d.getMonth () + 1; // aylar sıfır tabanlıdır 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.

11. Virgül ayırıcı

Hızlı Örnek

baş: <script type = "text / javascript"> 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; (Çı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.

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

Hızlı Örnek

<script type = "text / javascript"> <! - var viewportwidth; var görüntü yüksekliği; // standartlara uygun tarayıcılar (mozilla / netscape / opera / IE7), window.innerWidth ve window.innerHeight if (typeof window.innerWidth! = 'undefined') kullanıyorsanız {viewportwidth = window.innerWidth, viewportheight = window.innerHeight / IE6 standartlara uygun modda (örn. Belgedeki ilk satır olarak geçerli bir belge ile) başka bir durumda (typeof document.documentElement! = 'Undefined' && typeof document.documentElement.clientWidth! = 'Undefined' && document.documentElement.clientWidth) ! ('body') [0] .clientHeight} document.write ('<p> Görüntü alanı genişliğiniz' + görüntü genişliği + 'x' + görüntü alanı + '</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.

13. İ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.

14. İ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.

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

Hızlı Örnek

<script language = "javascript" type = "text / javascript"> <! - window.status = "<MESAJINIZ TÜRÜ>"; // -> </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 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.