Kategori arşivi: Javascript

Web Siteleri İçin Zaman Ayarlı Gece Modu Nasıl Yapılır?

Bildiğiniz üzere gece modu uygulaması günümüzde oldukça popüler, okuma alışkanlıkları değiştikçe ve geliştikçe bu tarz güzel özellikler arayüz tasarımlarında karşımıza çıkmakta. Basit bir şekilde zaman ayarlı gece modu oluşturabiliriz, üstelik bunu yaparken o kadar fazla kod bilgisi bilmenize gerek yok.

Önce zamana göre gece modunu aktif eden JavaScript kodumuzu şu şekilde paylaşıyorum. Burada belirttiğimiz zaman aralıklarında dark-mode.css devreye girecek. Yani akşam saatlerinde otomatik olarak bütün site kararacak.

function getStylesheet() {
      var currentTime = new Date().getHours();
      if (0 <= currentTime && currentTime < 7) {

            document.write("<link rel='stylesheet' href='/css/dark-mode.css' type='text/css'/>");
      }
      if (20 <= currentTime && currentTime < 24) {

            document.write("<link rel='stylesheet' href=/css/dark-mode.css' type='text/css'/>");
      }
}
getStylesheet();

Bunun hemen ardından, yapmanız gereken haliyle web siteniz için biraz css yazmak, temanız veya kullandığınız css dosyasını alıp genellikle beyazları siyah yapmak işinizi fazlasıyla görür. Bunun dışında yazı alanlarını da beyaz yapacaksınız.

Gelelim kullandığınız logo gibi şeylere, bunlar içinde css’de renkleri ile oynayacağız. Mozillanın bu konuda belgelendirmesini kullanabilirsiniz.

filter: invert(100%) saturate(0);

Ben bunlarla uğraşmak istemiyorum diyorsanız, aktif olarak geliştirilen darkmode.js sizin işinizi oldukça görecektir ancak gene bazı noktalarda CSS yazmak zorundasınız.

JavaScript ile Kullanıcı İşlem Yapmıyorsa Sayfa Nasıl Yenilenir?

Blog adresimde uzunca bir süre kullandığım, sayfada hiç bir işlem yapmadan kalan kullanıcılar için sayfayı yenileyen bir javascript kodudur, isteyen arkadaşlar sayfada öylece duran kullanıcıları istediği yere yönlendirebilirler.

Ben 30 saniye olarak belirledim, öylece duran kullanıcılar için sayfa yenileniyor.

<script>
var timeoutInMiliseconds = 30000;
var timeoutId; 
  
function startTimer() { 
    timeoutId = window.setTimeout(doInactive, timeoutInMiliseconds)
}
  
function doInactive() {
	window.location.reload(true)
}

function resetTimer() { 
    window.clearTimeout(timeoutId)
    startTimer();
}

function setupTimers () {
    document.addEventListener("mousemove", resetTimer, false);
    document.addEventListener("mousedown", resetTimer, false);
    document.addEventListener("keypress", resetTimer, false);
    document.addEventListener("touchmove", resetTimer, false);
     
    startTimer();
}
 
document.addEventListener("DOMContentLoaded", function() {
	setupTimers();
});
</script>

Wordpress’de Özelleştirilmiş Önizleme Linki Nasıl Oluşturulur?

Wordpress üzerinde Gutenberg kullanan benim gibi arkadaşlar kullandıkları preview linkini cache kurallarına göre özelleştirmek isteyebilirler, bu noktada aşağıdaki gibi functions.php dosyasında yapılacak bir değişiklik ile linki istediğiniz şekilde düzenleyebilme imkanınız mümkün

Zaman damgası eklemeyi unutmadık ve gereken kod şu şekilde oldu

function fix_preview_link_on_draft() {
  echo '<script type="text/javascript">
    jQuery(document).ready(function () {
      const checkPreviewInterval = setInterval(checkPreview, 1000);
      function checkPreview() {
        const editorPreviewButton = jQuery(".edit-post-header-preview__button-external");
        const editorPostSaveDraft = jQuery(".editor-post-save-draft");
        if (editorPostSaveDraft.length && editorPreviewButton.length && editorPreviewButton.attr("href") !== "' . get_preview_post_link() . '&no-cache=' . time() . '" ) {
          editorPreviewButton.attr("href", "' . get_preview_post_link() . '&no-cache=' . time() . '");
          editorPreviewButton.off();
          editorPreviewButton.click(false);
          editorPreviewButton.on("click", function() {
            editorPostSaveDraft.click();
            setTimeout(function() { 
              const win = window.open("' . get_preview_post_link() . '&no-cache=' . time() .'", "_blank");
              if (win) {
                win.focus();
              }
            }, 1000);
          });
        }
      }
    });
  </script>';
}
add_action('admin_footer', 'fix_preview_link_on_draft');

Bundan sonra admin panelinde cache silmeyi unutmayın, daha sonrasında istediğiniz gibi linkleriniz oluşmaya başlayacak.

Twitter Toplu Fotoğraf Silme

Twitter üzerinde tek tek fotoğraflarınızı silmek yerine toplu bir şekilde hepsinden kurtulabileceğiniz bir javascript kodunu sizlerle paylaşayım dedim.

Gelişmiş arama sayfasını kullanarak bu silme işlemini kendinize göre değiştirebilirsiniz. Gelişmiş aramaya ulaşmak için tıklayın

Burada silmek istediğiniz tarih aralığını girerek sonuçları getirin. Burada üst bölümde yer alan fotoğraflar sekmesini kullanarak tüm medyaları getirebilirsiniz. Ardından aşağıdaki kodu F12 de “Consol” kullanarak topluca silin

var hatasys = 0;
$(window).scrollTop(0, document.body.scrollBottom);
medyasil = setInterval(function() {
    $("#timeline").find('span.AdaptiveStreamGridImage.ok').remove();
    var tweetid = $("#timeline").find('span.AdaptiveStreamGridImage:not("ok")').first().attr("data-tweet-id");
    var token = $("#signout-form > input.authenticity_token").attr('value');
    $.ajax({
        type: "POST",
        url: "https://twitter.com/i/tweet/destroy",
        data: {
            _method: "DELETE",
            authenticity_token: token,
            id: tweetid
        },
        statusCode: {
            200: function() {
                $("#timeline").find('span.AdaptiveStreamGridImage').first().addClass("ok");
                $("#timeline").find('span.AdaptiveStreamGridImage.ok').remove();
            }
        },
        error: function() {
            hatasys++
        }
    });
    if ($("#timeline").find('span.AdaptiveStreamGridImage').length === 0) {
        clearInterval(medyasil);
        clearInterval(asagi);
        alert("Medya silme işlemi tamamlandı")
    }
    if (hatasys > 4) {
        clearInterval(medyasil);
        clearInterval(asagi);
        alert("Birden çok sorun oluştu. Lütfen kodu daha sonra tekrar uygulayın.");
    }
}, 1000);
var asagi = setInterval(function() {
    var medyasys = $("#timeline").find('span.AdaptiveStreamGridImage').length;
    if (medyasys <= 18 && medyasys > 0) {
        $(window).scrollTop(0, document.body.scrollBottom);
        setTimeout(function() {
            window.scrollTo(0, document.body.scrollHeight);
        }, 200)
    }
}, 2000);

Twitter İçin Kullanışlı JavaScript Kodları

Twitter diğer sosyal medyalara göre biraz daha derli toplu ve daha hızlı haber alınabilen bir platform. Gerek insanlar ile tanışmak gerek sektörünüzdeki haberleri görüntülemek için kullanabilirsiniz. Saçma işlerlede uğraşabilirsiniz.

Ama bunları yaparken bir takım adımları hızlı geçmek gerekiyor. Misal Takip etme, Takipden çıkma vb işlemler

Banada gerekli olduğu durumlarda aşağıdakileri kullanıyorum. Hem güncel hemde çalışır oldukları içinde sizinle paylaşmak istedim.

Tüm herkesi takipten çıkma

[].slice.call(document.querySelectorAll('.unfollow-text')).forEach(function(button) {
  button.click();
});

Rastgele kişileri takip etme

var FOLLOW_PAUSE = 1250;
var FOLLOW_RAND = 250; 
var PAGE_WAIT = 2000;
__cnt__ = 0; 
var f;
f = function() {
        var eles;
        var __lcnt__ = 0;
        eles = jQuery('.Grid-cell .not-following .follow-text').each(function(i, ele) {
                    ele = jQuery(ele);
                    if (ele.css('display') != 'block') {
                        console.trace('Already following: ' + i);
                        return;
                    }
                    setTimeout(function() {
                              console.trace("Following " + i + " of " + eles.length);
                            ele.click();
                            if ((eles.length - 1) == i) {
                                console.trace("Scrolling...");
                                window.scrollTo(0, document.body.scrollHeight);
                                setTimeout(function() {
                                    f();
                                }, PAGE_WAIT);
                            }
                    }, __lcnt__++ * FOLLOW_PAUSE + Math.random()*(FOLLOW_RAND) - FOLLOW_RAND/2);
                    __cnt__++;
        });
}
f();

Twitter Beğenme işlemi

$(document).ready(function () {
    var mintikfavori2015 = $(".content button.ProfileTweet-actionButton.js-actionButton.js-actionFavorite").length;
    var mintikfavorikodu = 0;
    var favorilerim = setInterval(function () {
        if (mintikfavorikodu > mintikfavori2015) {
            clearInterval(favorilerim);
            return
        }
        $(".content button.ProfileTweet-actionButton.js-actionButton.js-actionFavorite").eq(mintikfavorikodu).find('.HeartAnimation').trigger("click");
        mintikfavorikodu++;

    }, 500);
});

Retweet işlemi

var inputs = document.getElementsByClassName('js-actionRetweet');
for(var i=0; i<inputs.length;i++) {
inputs[i].click();
}

Toplu bir şekilde retweet ve beğeni silme

function findAncestor(el, cls) {
    while ((el = el.parentElement) && !el.classList.contains(cls));
    return el;
}

function removeRetweetsLikes() {
	setTimeout(function() {
		var items = document.getElementsByClassName("tweet-context");
		Array.prototype.forEach.call(items, function(element) {
			var parentLi = findAncestor(element, "stream-item");
			parentLi.parentNode.removeChild(parentLi);
		});
		removeRetweetsLikes();
	}, 1000);
}

removeRetweetsLikes();

Spam Korumalı Takip Etme Kodu (Katkılarından dolayı Fatih Demir beye teşekkürler.)

javascript: var followers = $(".not-following");
var user = $(".current-user a").attr("href");
var unfollowed = localStorage[user + "-unfollowed"] || "[]";
unfollowed = JSON.parse(unfollowed);
var j = 0;
var follow = function(e) {
    if (e < followers.length) {
        var t = 240000;
        if ($.inArray($(followers[e]).data("user-id"), unfollowed) == -1) {
            $(followers[e]).find(".follow-button").click();
            j++
        } else {
            t = 500
        }
        setTimeout(function() {
            follow(e + 1)
        }, t)
    } else {
        alert(" " + j + " kisi takip edildi!!")
    }
};
if (confirm(" " + followers.length + " kisi takip edilsin mi?")) {
    follow(0)
}

İstendiği taktirde kodları kendinize göre değiştirebilir ve geliştirebilirsiniz. Çalışmayan kodlar için lütfen iletişime geçin.

Javascript ile Beni Unutma Yapalım

Gene bir gün öyle normal bir şekilde oturuyorum google’nin bir sitesinde gözüme bir şey ilişti belli bir süre tarayıcıda aynı tab da olmadığınızda title değişiyor. ve Beni unutma, işte buradayım falan gibi şeyler yazmaya başlıyor. Bir an dedim ne oluyoruz ama sonradan araştırınca böyle bir özelliğin olduğunu fark ettim.

Araştırmalarım sonucunda aşağıdaki gibi güzel bir kod çıktı ortaya mevzu tab değişince focus diye bir olay tetiklenmesi yani üzerine gelindiğinde aktif olması başka tab lar da gezdiğinizde ise blur olarak geçiyor ve title değiştiriliyor. yani Focus bir yere odaklanınca işlem yapmak için kullanılıyor. Blur ise odaklanma işlemini sonlandırdığınızda her hangi bir işlem yaptırmak için kullanılıyor.

İsterseniz adama küfür edin istersenizde “Beni Unutma” şeklinde bir şeyler yazın ziyaretçi bakar mı bilmiyorum ama özellik güzel

<script src="https://code.jquery.com/jquery-1.12.4.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
      var message = "Beni Unutma :(";
      var original;

      $(window).focus(function() {
          if (original) {
              document.title = original;
          }
      }).blur(function() {
          var title = $('title').text();
          if (title != message) {
              original = title;
          }
          document.title = message;
      });
});
</script>

Bu koda isterseniz bir tanımlama yaparak işte adam tabı unuttuktan 2 dk sonra title değiştir gibi şeyleri ekleyebilirsiniz. timeout vermeniz her türlü yetecektir.

Javascript’de For ile Tablo Oluşturma

Javascript for döngüsünü kullanarak satır ve sütun sayısı belirli olan herhangi bir tabloyu yapabilirsiniz.Kod yazarken size kolaylık sağlayacaktır. içerisine gerekenleri ekleterek zamandan ve koddan tasarruf edebilirsiniz.Programa kaç satır ve kaç sutun olacağını belirtmeniz yeterli.

<script>
    var a = parseInt(prompt("Kaç Satır Olacak?"));
    var b = parseInt(prompt("Kaç Sutun Olacak?"));
    document.write("<table border='1'>");
    for (var i = 1; i <= a; i++) {
        document.write("<tr>");
        for (var j = 1; j <= b; j++) {
            document.write("<td>" + i + ". * " + j + ". </td>");
        }
        document.write("</tr>");
    }
    document.write("</table>");
</script>

Javascript ile Toplama ve Ortalama Bulma

Javascript dilinde basit algoritmaları gerçekleştirmek oldukça kolaydır.Pek çok dilde olduğu gibi javascriptdede yazacağız artık standartlaşmaya başladı diyebiliriz.Kullanıcıdan sayıları alabilmek adına prompt komutunu kullanacağız for döngüsü ile yaklaşık kaç adet sayı gireceğini kullanıcının belirlemesini istiyorum.Örnek kodumuz ise aşağıdaki gibidir.

<script>
    var sum = 0;
    var count_for = parseInt(prompt("Kaç Tane Sayı Toplanacak"));
    for (var i = 1; i <= count_for; i++) {
        var number = prompt(i + ".Sayi");
        document.write(i + ".number = " + number + "<br />");
        sum = sum + parseInt(number);
    }
    avg = parseInt(sum) / count_for;

    document.write("<br />Sum : " + sum);
    document.write("<br />Avg : " + avg);
</script>

Javascript Sonkart Yöntemi

Javascript ile bu örneğimizde son kart yöntemini göreceğiz her girdiğimiz sayı bir sonrakinin arkasından gelecek ve sıralı bir şekilde devam edecek siz ne zaman "0" sayısını girerseniz program sizden sayı istemeyi kesecek ve sıralı bir şekilde daha önceden yazdıklarınızı önünüze getirecek

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        var x = [];
        s = 0;
        while (x[s] != "0") {
            s++;
            x[s] = prompt("sayı?")
        }
        for (y = 1; y <= s; y++) {
            document.write(x[y] + "<br>");
        }

    </script>
</body>
</html>

Javascript ile Modulus Bulma

Javascript ile algoritma yazmaya devam ediyoruz ve bu makalemizde javascript kullanarak modulus işlemini gerçekleştireceğiz.verilen sayıya kadar bölümünden kalanı sıfır olanı süzeceğiz böylelikle hangi sayıların tam olarak bölündüğünü görebileceğiz.Bu örneğimizde 48 sayısına kadar tam bölenleri bulmayı amaçladık.Siz istediğiniz bir sayıya kadar alabilirsiniz.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        x = 48; b = 0;
        for (s = 0; s <= x; s++) {
            b = x % s;
            if (b == 0) {
                document.write(s + "<br>");
            }
        }
    </script>
</body>
</html>