javascript - Category (4)

Optimasi Image dengan Lazy Load

Bisa Koding ~ Pada tutorial kali ini kita akan belajar bagaimana melakukan optimasi image di website agar mempercepat loading image dengan menggunakan lazy load. Fungsi dari lazy load adalah ketika website kita dibuka maka tidak semua gambar yang di load, hanya ketika kita men scroll kebagian yang kita inginkan maka gambar baru akan di load. Berikut tutorial penggunaan nya.

Gunakan blank.gif untuk dibagian src dari tag image kamu untuk memberikan image default ketika gambar di load & setelah gambar selesai di load baru tampilkan gambar yang ada di attribut data-src dan menampilkan gambar nya ketika gambar diarahkan.

Dan jangan lupa untuk menuliskan class=”lazy” pada tag image kamu agar fungsi javascript dapat berjalan pada image kamu.

<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152">
<script>
!function(window){
  var $q = function(q, res){
        if (document.querySelectorAll) {
          res = document.querySelectorAll(q);
        } else {
          var d=document
            , a=d.styleSheets[0] || d.createStyleSheet();
          a.addRule(q,'f:b');
          for(var l=d.all,b=0,c=[],f=l.length;b<f;b++)
            l[b].currentStyle.f && c.push(l[b]);

          a.removeRule(0);
          res = c;
        }
        return res;
      }
    , addEventListener = function(evt, fn){
        window.addEventListener
          ? this.addEventListener(evt, fn, false)
          : (window.attachEvent)
            ? this.attachEvent('on' + evt, fn)
            : this['on' + evt] = fn;
      }
    , _has = function(obj, key) {
        return Object.prototype.hasOwnProperty.call(obj, key);
      }
    ;

  function loadImage (el, fn) {
    var img = new Image()
      , src = el.getAttribute('data-src');
    img.onload = function() {
      if (!! el.parent)
        el.parent.replaceChild(img, el)
      else
        el.src = src;

      fn? fn() : null;
    }
    img.src = src;
  }

  function elementInViewport(el) {
    var rect = el.getBoundingClientRect()

    return (
       rect.top    >= 0
    && rect.left   >= 0
    && rect.top <= (window.innerHeight || document.documentElement.clientHeight)
    )
  }

    var images = new Array()
      , query = $q('img.lazy')
      , processScroll = function(){
          for (var i = 0; i < images.length; i++) {
            if (elementInViewport(images[i])) {
              loadImage(images[i], function () {
                images.splice(i, i);
              });
            }
          };
        }
      ;
    // Array.prototype.slice.call is not callable under our lovely IE8 
    for (var i = 0; i < query.length; i++) {
      images.push(query[i]);
    };

    processScroll();
    addEventListener('scroll',processScroll);

}(this);
</script>

Manfaat Lazy load diatas adalah image / gambar akan di load default image dahulu yaitu blank.gif setelah loading selesai maka gambar sebenarnya baru ditampilkan, dan juga gambar baru akan di load jika kamu menscroll kursor kamu kearah gambar nya.

jika dirasa script javascript diatas kepanjangan, kamu dapat menggunakan script yang menggunakan library jQuey sebagai berikut:

!function(window){
    
    function loadImage($el, $fn) {
        jQuery($el).attr('src', jQuery($el).attr('data-src'));
        $fn ? $fn() : null;
    }
    
    function elementInViewport($el) {
        var $rect = $el.getBoundingClientRect();
        return ($rect.top >= 0 && $rect.left >= 0 && $rect.top <= (window.innerHeight || document.documentElement.clientHeight)
        );
    }
    
    jQuery(document).ready(function() {
        
        var images = new Array()
        , query = jQuery('img.lazy')
        , processScroll = function() {
            jQuery.each(images, function(i, img) {
                if (elementInViewport(img)) {
                    loadImage(img, function () {
                        images.splice(i, 1);
                    });
                }
            });
        };
        
        query.each(function() {
           images.push(this);
        });
        
        processScroll();
        jQuery(window).bind('scroll', processScroll);
        
    });
    
}(this);

Mungkin sekian tutorial tentang lazy load pada javascript, jika ada yang ingin ditanyakan silahkan tulis di kolom komentar. Semoga bermanfaar. Terima Kasih ~ ^-^

javascript - Category (3)

Operator pada JavaScript

Bisa Koding – Secara sederhana operator pada JavaScript adalah sebuah simbol yang digunakan untuk operasi. Operator dibagai menjadi 3 jenis yaitu operator binary, ternary dan operator unary.

1. Operator Binary

Operator binary adalah jenis operator yang membutuhkan 2 operand dengan contoh sebagai berikut:

operand1 operator operand2

Operator yang termasuk operator binary adalah sebagai berikut:

Operator Aritmatika

OperatorKeterangan
+Penambahan
Pengurangan
*Perkalian
**Exponentiation
/Pembagian
%Modulus (Sisa Bagi)
++Increment
Decrement

Tabel diatas adalah simbol yang digunakan dalam melakukakan operator aritmatika pada JavaScript. Dalam operator aritmatika ada aturan yang mengatur urutan matematika yang lebih dikenal dengan operator precedence yang dapat dicontoh kan sebagai berikut: 

KukaBaTaKu : (), *, /, +, –  (kurung, kali, bagi, tambah, kurang) jadi operator tersebut yang akan didahulukan ketika melakukan operasi aritmatika.

contoh penggunaan operator aritmatika:

1+1
2-1
3*1
4/2
(1+1)2*2

Operator Penugasan / assignment

OperatorContohSama Seperti
=x = yx = y
+=x += yx = x + y
-=x -= yx = x – y
*=x += y x = x * y
/=x /= yx = x / y
%=x %= yx = x % y
**=x **= yx = x**y

Operator Penugasan biasa nya digunakan dalam variable dengan contoh sebagai berikut:

var x = 10;
x += 5;  //maka nilai x menjadi 15

Operator String

var operand1 = "Bisa";
var operand2 = "Koding";
var operand3 = operand1 + " " + operand2;
//maka hasilnya jadi : Bisa Koding 

var operand1 = "Mau Bisa Koding ?";
operand1 += "belajar di bisa koding aja";
//maka hasilnya jadi : Mau Bisa Koding? belajar di bisa koding aja

Operator String and Numbers

var x = 1 + 1;
var y = "1" + 1;
var z = "Bisa Koding" + 1;
//hasilnya : x = 2, y = 11, z = Bisa Koding1

Operator Perbandingan

OperatorKeterangan
==sama dengan
===sama dengan & tipe data sama
!=tidak sama dengan
!==bukan nilai yang sama & bukan tipe data sama
>lebih besar dari
<lebih kecil dari
>=lebih besar dari sama dengan
<=lebih kecil dari sama dengan
?operator ternary

Operator perbandingan akan mengembalikan nilai boolean yaitu true or false.

5 &lt;= 1 = false
3 >= 1 = true
OperatorKeterangan
&&logical and
||logical or
!logical not

Operator Logika akan mengembalikan nilai boolean yaitu true or false.

5 &lt; 1 &amp;&amp; 1 > 5 = false
5 > 1 || 1 > 5 = true
!(6 == 3) = true 

2. Operator Ternary

Operator Ternary adalah jenis operator yang membutuhkan 3 operand di dalamnya. Contoh operator ternary adalah operator kondisional.

Operator Kondisional

Operator Kondisional adalah operator yang mengembalikan nilai true atau false sesuai dengan kondisi yang dihasilkan.

(kondisi) ? true : false

(x % 2 == 0) ? "genap" : "ganjil"

3. Operator Unary

Operator Unary adalah jenis operator yang hanya membutuhkan 1 operand saja.

OperatorKeterangan
typeofmengembalikan tipe data pada variable
instanceofMengembalikan nilai true jika objek adalah turunan dari tipe data objek
typeof(1) //hasilnya : number
typeof("bisakoding") //hasilnya : string
typeof(true) //hasilnya : boolean

Mungkin sekian penjelasan tentang operator semoga dapat menambah pengetahuan kamu. Jika ada yang ingin ditanyakan silahkan tulis di kolom komentar. Terima Kasih ~ ^-^ ~

javascript - Category (2)

Apa itu Javascript ?

Menurut Wikipedia JavaScript adalah javascript is a high-level, scripting, untyped and interpreted programming language.

  • JavaScript high level language karena JavaScript sederhana nya adalah bahasa yang mendekati bahasa manusia sehingga lebih mudah untuk dimengerti.
  • scripting karena JavaScript dibuat khusus untuk interaksi dalam halaman web.
  • untyped / dinamically typed : yang artinya kamu tidak tidak perlu mendeskripsikan tipe data ketika kamu membuat sebuah variable.
  • interpreted : bahasa pemrogramman yang harus dijalankan berdasarkan interpreted.

Jadi kesimpulannya JavaScript adalah bahasa pemrograman scripting yang berjalan di halaman website agar website tersebut menjadi lebih dinamis dan interaktif.

JavaScript juga memiliki banyak dukungan framework dan library sehingga mudah untuk dipelajari, javaScript dapat berjalan pada  dua type yaitu client side dan server side yang memiliki dukungan framework sebagai berikut

Client Side Web Development / Front End

  • native JavaScript / vanilla JavaScript
  • library: jQuery
  • framework : Angular, React Js, Vue dll.

Server Side Web Development / Back End

  • nodeJs
  • framework : ExpressJs

Mungkin sekian perkenalan tentang JavaScript semoga dapat menambah ilmu kamu dan semangat untuk belajar lagi. Jika ada yang ingin ditanyakan silahkan tulis di kolom komentar. Terima Kasih ~