jsPDF: Javascript İle Pdf Oluşturma

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
        crossorigin="anonymous">
</head>

<body class="container">
    <input type="button" value="Print Pdf" onclick="generatePdf()" class="btn btn-default">
    <div id="print-fields">
        <div class="form-group row">
            <label for="example-text-input" class="col-2 col-form-label">Text</label>
            <div class="col-10">
                <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
            </div>
        </div>
        <div class="form-group row">
            <label for="example-search-input" class="col-2 col-form-label">Search</label>
            <div class="col-10">
                <input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
            </div>
        </div>
        <div class="form-group row">
            <label for="example-email-input" class="col-2 col-form-label">Email</label>
            <div class="col-10">
                <input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
            </div>
        </div>
        <div class="form-group row">
            <label for="example-url-input" class="col-2 col-form-label">URL</label>
            <div class="col-10">
                <input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
            </div>
        </div>
        <div class="form-group row">
            <label for="example-tel-input" class="col-2 col-form-label">Telephone</label>
            <div class="col-10">
                <input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
            </div>
        </div>
        <div class="form-group row">
            <label for="example-password-input" class="col-2 col-form-label">Password</label>
            <div class="col-10">
                <input class="form-control" type="password" value="hunter2" id="example-password-input">
            </div>
        </div>
        <div class="form-group row">
            <label for="example-number-input" class="col-2 col-form-label">Number</label>
            <div class="col-10">
                <input class="form-control" type="number" value="42" id="example-number-input">
            </div>
        </div>
        <div class="form-group row">
            <label for="example-datetime-local-input" class="col-2 col-form-label">Date and time</label>
            <div class="col-10">
                <input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
            </div>
        </div>
        <div class="form-group row">
            <label for="example-date-input" class="col-2 col-form-label">Date</label>
            <div class="col-10">
                <input class="form-control" type="date" value="2011-08-19" id="example-date-input">
            </div>
        </div>
        <div class="form-group row">
            <label for="example-month-input" class="col-2 col-form-label">Month</label>
            <div class="col-10">
                <input class="form-control" type="month" value="2011-08" id="example-month-input">
            </div>
        </div>
        <div class="form-group row">
            <label for="example-week-input" class="col-2 col-form-label">Week</label>
            <div class="col-10">
                <input class="form-control" type="week" value="2011-W33" id="example-week-input">
            </div>
        </div>
        <div class="form-group row">
            <label for="example-time-input" class="col-2 col-form-label">Time</label>
            <div class="col-10">
                <input class="form-control" type="time" value="13:45:00" id="example-time-input">
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
    <script>
        function guid() {
            function S4() {
                return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            }
            return (S4() + S4() + "-" + S4() + "-4" + S4().substr(0, 3) + "-" + S4() + "-" + S4() + S4() + S4()).toLowerCase();
        }

        function generatePdf() {

            var doc = new jsPDF();

            var element = document.getElementById('print-fields');
            var yCoord = 30;
            var xCoord = 20;
            for (i = 1; i < 10; i++) {
                Array.from(element.children).forEach(_ => {
                    var label = _.children[0].innerHTML;
                    var value = _.children[1].children[0].value;
                    doc.setFont('helvatica');
                    doc.setFontType('bold');
                    doc.text(xCoord, yCoord, label);
                    doc.text(xCoord + 40, yCoord, ':');
                    doc.setFontType('normal');
                    doc.text(xCoord + 50, yCoord, value);
                    yCoord += 10;
                    if (yCoord > 280) {
                        yCoord = 30;
                        doc.addPage('a4', 1);
                    }
                });
            }
            var fileName = guid()+'.pdf';
            doc.save(fileName);

        }
    </script>
</body>

</html>

Kaynak: https://github.com/MrRio/jsPDF

Web Sayfana Matematik Denklemleri Ekle

MathJax kütüphanesi ile sayfamıza tex komutlarını ekleyeceğiz.

1. body kapanış tagının altına aşağıdaki script kodlarını ekleyeceğiz.

<script type="text/x-mathjax-config">

  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});

</script>

<script type="text/javascript" async

  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML">

</script>

2. Daha sonra sayfamızda görmek istediğimiz denklemleri http://docs.mathjax.org/en/latest/mathjax.html adresindeki dökümanlar yardımıyla ekleneecek.

Tamamlanmış html aşağıdaki gibidir.

<html lang="tr">
<head>
<meta charset="utf-8">
<title>MathJax TeX Test Page</title>
</head>
<body>
$a \ne 0$ için \(ax^2 + bx + c = 0\) denkleminin genel çözümü aşağıdaki gibidir.
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
</body>
</html>

$a \ne 0$ için \(ax^2 + bx + c = 0\) denkleminin genel çözümü aşağıdaki gibidir. $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

Lazy Load İle Sayfalara Resim Yükleme

Kullanılan Javascript Kütüphanesi : http://www.appelsiini.net/projects/lazyload

1. Jquery ve LazyLoad kütüphanelerini body kapanış tagından önce ekliyoruz.

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

2. Resimler  aşağıdaki şekilde <img> tagında yazıyoruz.
Burada classımız "lazy", src özelliği yerine de "data-original" özelliğimizi kullanıyoruz.

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

3. Son olara aşağıdaki jquery komutunu çalıştırıyoruz.

$("img.lazy").lazyload();

TÜM KODLAR AŞAĞIDAKİ GİBİDİR

<html>

<head>

<title>Lazy Load</title>

<style>

body {

  text-align: center;

}



.container {

  width: 660px;

  margin:0 auto;

}

</style>

</head>

<body>

  <div class="container">

      <img class="lazy" data-original="http://www.nkfu.com/wp-content/uploads/2016/05/romantik-resimler-3.jpg" width="640" height="480">

      <img class="lazy" data-original="https://guzelresimler.info/content/photos/6010/bi/14-subat-sevgililer-gunu-resimleri-56a7faaf28a2c.jpg" width="640" height="480">

      <img class="lazy" data-original="http://www.sendeyim.net/uploads/resim-galerisi/romantik-resimler_191346.jpg" width="640" height="480">

      <img class="lazy" data-original="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDsV8qI3IAjyTqU04J6f7ApitqFU7-xqswDCozS_HeOy0x_Ti648IrPgJbHA8R7F-MhqHa6tBQ7UKpEL0ORXR5A5m0iLS1AAG4XpPXiBib10fM4rcxG62OyjYbLfrN_oagsxfU29WlzcE/s1600/jaguar+hd+2013+resimler+rooteto.jpg" width="640" height="480">

      <img class="lazy" data-original="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGLzxwyKGDRdoJn9RvWKvRQ1f_EqS-fvyXAwkeclfqbLEyTNg7_V5KBoe-v3PXnNN42rSg62rQSvdMTCBNxl5Yujwa-77qn8QHoplLHa410I1Ubltpf4w76_c_TS_-O_gXwZ6vFJahUrg/s1600/enchanted+forest+2013+resimler+rooteto.jpg" width="640" height="480">

    </div>



<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>

<script type="text/javascript">

$("img.lazy").lazyload();

</script>

</body>

</html>

Kaynak: https://www.sitepoint.com/lazy-loading-images-not-really-annoy-users/

Code-Prettify : HTML siteleri içerisinde kodlarınız daha belirgin olsun.

code-prettify :  Google tarafından hazır olarak hazırlanmış olan html içerisindeki kodların daha güzel gözükmesi için yazılmış olan açık kaynak bir script dosyasıdır.
Resmi sitesi https://github.com/google/code-prettify


Aşağıda örnek html kodlarını görebilirsiniz.

<html>
<head>
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
</head>
<body>
    <pre class="prettyprint">
<code class="lang-cs">
 Console.WriteLine("Hello World!");
</code>
</pre>
</body>
</html>

Çıktısı Daha fazla kod örneğini Test adresinden kotrol edebilirsiniz.

Javascript İle TextBox içerisindeki yazıyı panoya kopyalama

Kopyalanacak Yazı :
İnternet explorer üzerinde düzgün çalışmayabilir.

<!DOCTYPE html> 

<html> 

<head runat="server"> 

<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 

<title>TextBox içerisini kopyalama</title> 

<script> 

function panoyaKopyala(txt) 

{ 

var copyTextarea = document.querySelector('#'+txt); 

copyTextarea.select(); 

try { 

var successful = document.execCommand('copy'); 

var msg = successful ? 'successful' : 'unsuccessful'; 

console.log('Copying text command was ' + msg); 

} catch (err) { 

console.log('Kopayalanamadı'); 

} 

} 

</script> 

</head> 

<body> 

<label>Kapyalanacak Yazı :</label> 

<input type="text" name="txtKopyalanacakYazi" id="txtKopyalanacakYazi" class="txt" value="http://barkinm.blogspot.com.tr/" /> 

<button onclick="panoyaKopyala('txtKopyalanacakYazi')" name="btnKopyala" id="btnKopyala">Panoya Kopyala</button> 

</body> 

</html>


Javascript ile otomatik olarak şifre üretmek.

Karakter Uzunluğu

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Password Generator</title>
<script type="text/javascript">
function sifreUret(sifre_uzunlugu){
var text="";
var karakterler='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890+-*!@$&=';
for (i = 0; i < sifre_uzunlugu; i++) {
text += char=karakterler.charAt(Math.floor((Math.random() * (karakterler.length+1))));
}
return text;
}
</script>
</head>
<body>
<label id="lblKarakterUzunlugu" name="lblKarakterUzunlugu" for="txtKarakterUzunlugu" >Karakter Uzunluğu</label>
<input id="txtKarakterUzunlugu" name="txtKarakterUzunlugu" type="text" value="16"/>
<br/>
<button onclick="document.getElementById('txtSifre').value=sifreUret(document.getElementById('txtKarakterUzunlugu').value)">Şifre Üret</button>
<input id="txtSifre" name="txtSifre" type="text" value=""/>
</label>
</body>
</html>