En Meşhur Javascript Kütüphaneleri ve Araçları

Javascipt dilinin çeşitli çatı isimler altında gelişmesi hiç durmadan fırtına gibi devam ediyor. Tabi bu fırtınada insan ister istemez yönünü şaşırıyor, her şey birbirine giriyor. Front-end olarak tabir edilen ön yüz geliştirme işinde vazgeçilmez olan javascipt kütüphaneleri çok fazlalar ve takip etmek imkansız. Şimdi en meşhur javascript kütüphanelerine kısca bir göz atalım.

Popüler Kütüphaneler

AngularJS

GitHub: https://github.com/angular/angular.js
Website: angularjs.org

jQuery

GitHub: https://github.com/jquery/jquery
Website: jquery.com

React

GitHub: https://github.com/facebook/react
Website: Facebook.github.io/react/

Backbone

GitHub: https://github.com/jashkenas/backbone/
Website: backbonejs.org

Ember

GitHub: https://github.com/emberjs/ember.js
Website: emberjs.com

D3.js

GitHub: https://github.com/mbostock/d3
Website: d3js.org

Babylon.js

GitHub: https://github.com/BabylonJS/Babylon.js
Website: babylonjs.com

Three.js

GitHub: https://github.com/mrdoob/three.js/
Website: threejs.org

Mocha& Chai

Mocha GitHub: https://github.com/mochajs/mocha
Mocha Website: mochajs.org
Chai GitHub: https://github.com/chaijs/chai
Chai Website: chaijs.com

Karma

GitHub: https://github.com/karma-runner/karma
Website: karma-runner.github.io

PhantomJS

GitHub: https://github.com/ariya/phantomjs
Website: phantomjs.org

Grunt & Gulp

Grunt GitHub: https://github.com/gruntjs/grunt
Grunt Website: gruntjs.com
Gulp GitHub: https://github.com/gulpjs/gulp
Gulp Website: gulpjs.com

Babel

GitHub: https://github.com/babel/babel
Website: babeljs.io

 

Görselin orjinal genişlik ve yüksekliği nasıl bulunur.

Eğer resim veya fotoğrafın orjinal genişlik ve yükseklik değerlerini bulmak için JQuery ile width() veya height() gibi fonksiyonları kullanıyorsanız, cevap olarak tarayıcıda önizlediğiniz boyutları alacaksınızdır. Ama istediğim şey gördüğüm boyut değil, görselin doğal boyutları. Resmin orjinal genişlik ve yüksekliğini bulmak ve almak aslında basit. Javascript’in içinde bulunan iki özellik ile yapabiliriz. Hemen bakalım.

naturalWidth ve naturalHeight kullanımı

naturalWidth ve naturalHeight bu işi çözecek çok güzel iki tane JS özelliğimiz. GÖrselimizi tanımladıktan sonra, bu özelliklere giriyoruz.

Bu özellikleri Internet explorer 8 ve eski versiyonları hariç tüm tarayıcılar destekler.

var image = document.getElementById('resmim');
var genislik = image.naturalWidth;
var yukseklik = image.naturalHeight;

Resim Nesnesi Kullanımı

Tabiki tüm tarayıcılara destek verilmesi gerektiği için burada resim nesnesi oluşturup JS içine çağırıp gerçek yükseklik ve genişliğini buluyoruz.

var resim = new Image(); // or document.createElement('img')
var genislik, yukseklik;
resim.onload = function() {
genislik = this.width;
yukseklik = this.height;
};
resim.src = 'http://erenkorkmaz.com.tr/wp-content/uploads/2016/07/test-resmi-eren-korkmaz.jpg';

Son Hali

İkisini de birleştirip güzel bir sonuç elde ediyoruz. Yani natural width ve height desteklemeyen tarayıcılar için bir şart koyduk.