Artık Script Src denerek Javascript Yazılmıyor


npm ile ilgili görsel sonucu"

Normalde Javascript ile işimiz olduğunda ne yapardık? Eski web uygulama geliştiricileri hatırlayacaklardır. Hatta bir çok genç geliştirici de halen eski yöntemleri sürdürmeye devam ediyor. Çünkü çalışıyor. Nedir bu yöntem:

<script src="kutuphane_1"/>
<script>
//Buraya işlerimizi kodlarız
</script>

Bu kodları HTML dosyamıza koyarız ve çalışır. Buraya kada problem yok. Sonra ne olur, yeni kütüphaneler ekleriz ve scriptlerimiz şöyle olur

<script src="kutuphane_1"/>
<script src="kutuphane_2"/>
<script src="kutuphane_3"/>
<script src="kutuphane_4"/>
<script src="kutuphane_5"/>
<script src="kutuphane_6"/>



<script>
//Buraya işlerimizi kodlarız
</script>

Çorba Hazır!

İşte hikaye ondan sonra başlar, kütüphaneler çakışır, karışır, kodları düzenlerken bilerek bilmeyerek silinir (Ertan abi….!)

Ondan sonra insanlar Javascript’e sövmeye başlar ve Javascript ile harika şekilde halledilebilecek işleri bile garibim sunucu tarafına C#’a veya Java’ya yaptırır.

Oysa kurallar değişmiştir. npm denen mucizevi paket yöneticisi icat olmuş, insanlar aya çıkmıştır ama bir çok kişi bunu görmezden gelmektedir. Haksız sayılmazlar, çünkü sinsi sinsi yayılıp yüzbinden fazla paketi artık bünyesinde barındırmaktadır npm.

NPM nedir?

Visual Studio kullananlar nuget’i, Python kullananlar pip’i, Linux kullananlar apt-get’i bilirler. Komut satırına şunu getir, bunu kur, bunu güncelle deriz. Bu tür araçlar “konsol üzerinden paketlerimizi kurmamıza olanak verir.”

NPM ya da npm.js ise Javascript kütüphanelerinin tamamını barındıran evrensel bir yerdir. Bu kütüphane yardımı ile yukarıdaki gibi eski usülde “srcipt src” satırlarını şiir gibi dizmezsiniz, lazım olanlarını “npm install” komutu yardımı ile indirir, daha sonra browserify adlı araç yardımı ile (elbette bu da bir npm paketidir) hepsini tek bir “bundle.js” dosyasına sıkıştırır ve sayfanızdan sadece tek bir “bundle.js” dosyası çağırırsınız. Tüm paketler güvenle bir arada olur. Her seferinde bu birleştirme işleminini yapmamak için ise watchify adlı paket kullanabilirsiniz. Bu ise sizin ayrı ayrı javascriptlerinizi her kaydedişte otomatik birleştirir.

Haydi Deneyelim

  • Linux kullanıyorsanız “sudo apt-get install npm” komutu ile windows kullanıyorsanız önce ilgili programı kurun. https://www.npmjs.com/get-npm
  • Konsolu açın ve npm yazıp enter’a basın. Eğer çalışırsa npm kurulmuştur.
  • Boş bir klasör açın ve cd komutu ile içine girin
  • Konsolda bu klasörde iken “npm init” komutunu verin.
  • Bu komut bu klasörde package.json adlı paket envanterini yaratır. Bu bir nevi kuracağınız her paketin otomatik olarak listeleneceği yerdir.
  • Şimdi javascript birleştirme aracı browserify’i kurmak için şu komutu verin: npm install -g browserify
  • Klasöre göz atınca node_modules adlı klasör oluştuğunu görürsünüz bu otomatik inen paketlerdir.
  • Şimdi ise denemek için hesap makinesi kütüphanesi olan arithmetic adlı kütüphaneyi indirelim. Bunun için ise npm install –save arithmetic komutunu kullanırız. Burada save parametresi paketin adını daha önce oluşturduğumuz package.json dosyasına yazar.
  • Her şey hazır, şimdi direkt olarak newway.js diye bir dosya oluşturup içerisine aşağıdaki kodları yazalım:
 var arithmetic = require('arithmetic');
 var x = arithmetic.add(2,4);
 console.log("---merhaba---");
 console.log(x);
  • Şimdi ne oluyor diyebilirsiniz? Bu kodları ayrı bir dosyaya yazdık. Bu kodlardaki arithmetic nesnesi için daha önce duymadığımız ‘require’ fonksiyonunu kullandık. Bu yeni Javascript’çenin importu demek.
  • Şimdi browserify yardımı ile bu javascriptimizi sıkıştıracağız.
  • Bunun için konsola: browserify newway.js -o bundle.js Normalde bu zorunlu değildir ancak olması faydalıdır. Bu komut sonrasında bundle.js adlı bir dosyamız oluşur.
  • Şimdi index.html dosyasını açık sadece <script src="bundle.js"> diyerek dosyamızı çağırabiliriz.

Ne Yaptık, Ne Fark Var?

Normalde bu işlem için önce gidip artihmetic kütüphanesini bulup dosyasını indirip daha sonra bu dosyayı “script src” ile html dosyamıza çağıracaktık. Sonra da kendi yazdığımız (içinnde merhaba yazan) newway.js dosyamızı oluşturacaktık, ortada iki js dosyası ve html içinden çağrılan iki js referansı olacaktı. Bu daha fazla js için daha fazla iş demekti.

Yeni yöntemdeki senaryoda ise tek js dosyası mevcut, ayrıca kütüphaneleri indirmek için sitesine gitmek gerekmiyor.

Buna Değer Mi?

npm paketlerini şuradan inceleyebilirsiniz: https://www.npmjs.com/search?q=keywords:packages

Bu paketlerin içersinde daha önce javascript’e yaptırmadığınız onlarca işlevi barındıran süper paketler var. Örneğin resim işlemeden Json içinden sorgu yapmaya, tarihleri şekillendirmeden (moment.js), yapay zeka ile resim tanıma kütüphanelerine kadar “ücretsiz” yüzbinlerce kütüphane var. Emeğinize değer.

Evet bu yazıyı buraya kadar okumuş pek az kişi olacağını biliyorum, o parmaklar ekrandaki yazıları kaydırırken bir çok fırsat kaçıyor 🙂 Buraya kadar okuduysanız da “ehemm” diyip bu yazıyı unutup eski alışkanlıklarınızla kod yazmaya devam edebilirsiniz. Ama konfor zonda kalmak, ilkelliğe razı olmaktır. Daha sonra javascript çakışmaları yaşadığınızda bu yazıyı hatırlayacaksınız:)

Daha detaylı İngilizce bir yazı için: https://medium.com/jeremy-keeshin/hello-world-for-javascript-with-npm-modules-in-the-browser-6020f82d1072

Beğendiniz mi?

HTML sayfası içinden CSS ve Javascript dosyalarına nasıl link verilir?


Basit bir HTML dosyasını dışarıdan stilize etmek için CSS kullanırız. Aynı şekilde sayfamıza etkileşim katmak için ise Javascript kullanırız. Her ikisi de mevcut html dosyası içerisinde dışarıdan linkle ithal edilmeksizin direkt olarak tanımlanabilmektedir. Ancak bu kod okunabilirliği ve modülerlik bakımından tercih edilen bir yöntem sayılmaz.
Peki nasıl tanımlarız dış CSS ve Javascript dosyalarını: Aşağıda gösteriliyor:

https://gist.github.com/suatatan/f2fc490f01359d2cc13f.js

Excel makroları içinde gelişmiş denetimli formüller yazma


Bazen excel’deki formüllerin yetmediği durumlar olabilir. Mesela içiçe 5 eğer fonksiyonu veya karmaşık matematiksel hesaplamalar gibi. Bu durumlarda excel makrolarını kullanabilirsiniz.
Aşağıdaki ekte bulunan makro bundan evvel  şu makalede anlattığımız python ile yaptığımız parasal değere karşılık risk analizi yapan formülasyonun  excel makrosu dili (VBA) ile yazılmış halidir.
Şu adresten indirip makro alanına import edebilirsiniz.
https://docs.google.com/open?id=0B2QbjSFSlgaMX2NJWkU2U0dhT28

Makro kaynak kodları ise şöyle:

Sub VeriKontrol()
    ‘For dongumuzu acalim
    For i = 1 To 99
        ‘Parasal degerimizi tanimliyoruz
        Dim parasal_deger As Long
        ‘Sonra bu degere A1,A2,A3… hucremizden aldigimiz degeri atiyoruz her seferinde
        parasal_deger = Range(“A” & i)
        
        ‘Parasal degerimizi checkediyoruz.
        ‘Bunun icin parasal degeri x sayalim
        Dim x As Long
        x = parasal_deger
        ‘Risk degerimizi varsayian olarak 0 atayalim
        Dim risk As Integer
        risk = 0
        ‘If blogumuz pythondaki : yerine Then ve sonda Endif kullandik
        If x > 10000 And x
            risk = 1
        ElseIf x > 100000 And x
            risk = 2
        ElseIf x > 500000 And x
            risk = 3
        ElseIf x > 1000000 And x
            risk = 4
        ElseIf x > 2000000 Then
            risk = 5
        Else:
            risk = 0
        End If
        ‘Simdi hesaplanan risk degerimizi B sutunumuza siraliyoruz
        Range(“B” & i) = risk
        ‘For dongumuzu guzel guzel next ile devam ettiryoruz
        Next i
End Sub

Python ile Excel Manipülasyonu


Python üzerinden Excel dosyalarına erişim sağlayarak içindeki verileri alıp işlemek ve daha sonrasında bu verileri excel dosyasına yazdırmak pratik bir çözüm olabilir. Çünkü bazen exceldeki formüllerle aşılamayacak durumları oluyor. Bu durumlarda büyük miktardaki verileri python ile işlemek büyük kolaylık sağlıyor. Bu iş için  excel dosyası ile okuma operasyonlarında xlrd ve yazma operasyonlarında xlwt kütüphanelerini kullanacağız.
Aşağıdaki hazırladığım örnek risk.xls dosyası içindeki parasal değerleri alıp, risk değerli olarak 1 ila 5 arasındaki değerleri atıyor. Sonra bu sonuçları output-risk.xls dosyasına yazdırıyor.

İşte kodlar:

# -*- coding: utf-8-*-
import xlrd
import xlwt
#read

“”“
tek satira kaydedilmiş proje parasal degerlerini check edip
risk degerlendirmesi yapar 1 ila 5 arasindaki risk puanlarini bulur.
output-risk.xls dosyasina parasal degerler ve karsilik gelen risk degerlerini yazar
”“”
class DataController:
    def data_risk_test(self,parasal_deger=0):
        x=parasal_deger
        if (x>10000)&(x
                risk=1
        elif(x>100000)&(x
            risk=2
        elif(x>500000)&(x
            risk=3
        elif(x>1000000)&(x
            risk=4
        elif(x>2000000):
            risk=5
        else:
            risk=0
        return risk
   
    def risk_test(self):
        okuwb = xlrd.open_workbook(‘risk.xls’)
        okuwb.sheet_names()
        okuhucre = okuwb.sheet_by_index(0)
        okuhucre = okuwb.sheet_by_name(u’Sheet1’)
        #write
        yazwb = xlwt.Workbook()
        yazhucre = yazwb.add_sheet(‘Otomatik1’)
        risk=0
        i=0
        for rownum in range(okuhucre.nrows):
            #print sh.row_values(rownum)
            VAL=okuhucre.row_values(rownum)
            x=VAL[0]
            risk=self.data_risk_test(x)           
            #print str(x)+“:”+str(risk)
            yazhucre.write(i,0,x)
            yazhucre.write(i,1,risk)
            i=i+1
        yazwb.save(“output-risk.xls”)
        print “**Risk kontrolleri yapilarak output-risk.xls dosyasina islendi”
#**********************
dc=DataController()
dc.risk_test()

#———————————————-

Bu kodları aşağıdaki linkten indirebilirsiniz:
https://docs.google.com/open?id=0B2QbjSFSlgaMemZqSnl2T1BtOVE

Aynı işi Makro (Excel VBA) ile yapmak isterseniz şu makaleme bakın:
http://blog.suatatan.com/2012/06/excel-makrolar-icinde-gelismis.html

Aynı işi Google App Script ile yapmak isterseniz şu makaleme bakın:
http://blog.suatatan.com/2012/06/google-app-script-ile-tablo.html
   

Kendiliğinden kayma özelliği de olan basit bir Jquery content slider


Bundan önceki yazımızda kendiliğinden kaymayan yanlızca kullanıcı sayıların üzerine gelince kayan bir “kayar haber” scripti hazırlamıştık. Şimdi ise sitesini hazırladığım bir arkadaşımızın talebi üzerine, çoğu haber sitesinde olduğu gibi kullanıcı karışmasa dahi kendiliğinden kayma efekti veriyoruz.

<!--
This script aims teaching a simple news slider application
By Suat ATAN
suatatan.wordpress.com
All rights reserved

Basit bir jquery haber akış uygulaması-otomatik akış da dahil edildi
Her hakkı saklıdır
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Suat ATAN's Simple News Slider</title>
		<!--JQUERY-->
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript">
			google.load("jquery", "1.4.2");

		</script>
		<!--OUR SCRIPT-->
		<script type="text/javascript">
			$(document).ready(function() {
				/*HUMAN INTERACT*/
				$(".slide").not(":first").hide();

				$(".slide-hook").mouseover(function() {
					var index = $(".slide-hook").index(this);

					$(".slide").hide();
					$(".slide:eq(" + index + ")").show();

					$(".slide-hook").css("color", "black");
					$(this).css("color", "red");
				});
				/*AUTOSCROLL*/
				var timer = setInterval(rotate, 4000);

			});
			//dr
			function rotate() {
				var cur_slide = $(".slide:visible");
				var ls_slide = $(".slide:last");
				var fr_slide = $(".slide:first");

				if(cur_slide.html() != ls_slide.html()) {
					cur_slide.hide();
					cur_slide.next(".slide").show();

				} else {
					cur_slide.hide();
					fr_slide.show();
				}
			}
		</script>
		<!--CSS-->
		<style type="text/css">
			.slide-hook {
				float: left;
				padding: 5px;
				background-color: #990000;
				border-right: solid 1px #C2E1EF;
			}
			.slide-image {
				width: 500px;
				height: 375px;
			}
			#slider {
				width: 500px;
				height: 550px;
			}
			.slide {
			}

		</style>
	</head>
	<body>
		<div id="slider-capsule">
			<div id="slides">
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 1</h2>
					</div>
					<div class="slide-text">
						Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos
					</div>
					<div class="slide-image">
						<img src="http://farm5.static.flickr.com/4004/4612662356_888c2a81ca.jpg" alt="slide-image">
					</div>
				</div>
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 2</h2>
					</div>
					<div class="slide-text">
						Suat ATAN,Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos
					</div>
					<div class="slide-image">
						<img src="http://farm6.static.flickr.com/5008/5307303826_a33a56c1ae.jpg" alt="slide-image">
					</div>
				</div>
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 3</h2>
					</div>
					<div class="slide-text">
						Havasor,Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos 3
					</div>
					<div class="slide-image">
						<img src="http://farm4.static.flickr.com/3574/3341953499_ab044c925a.jpg" alt="slide-image">
					</div>
				</div>
				<!--Slide-->
				<div class="slide">
					<div class="slide-title">
						<h2>Title 4</h2>
					</div>
					<div class="slide-text">
						Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos
					</div>
					<div class="slide-image">
						<img src="http://farm4.static.flickr.com/3564/3342789118_9de9992351.jpg" alt="slide-image">
					</div>
				</div>
			</div>
		</div>
		<div id="slider-navig">
			<div class="slide-hook">
				1
			</div>
			<div class="slide-hook">
				2
			</div>
			<div class="slide-hook">
				3
			</div>
			<div class="slide-hook">
				4
			</div>
		</div>
		</div>
	</body>
</html>

Burada mantık şudur: rotate fonksiyonumuz o anda “visible” yani görünür olan “slide” elemanını saklayıp, bir sonraki “visible” ediyor. En son slide’a gelince onu da saklayıp bu kez ilk elemanı visible ediyor.

Bu fonksiyonu da setInterval ile 4000 milisaniyede bir çağırıyoruz. setIntetval fonksiyonu aslında bir tetik fonksiyon. Bir insanın düzenli olarak aynı hareketi yapması gibi bir durum. Gerisi tamamen zamanlama dışı klasik fonksiyonlar.

Kendiliğinden kayma özelliği de olan basit bir Jquery content slider


Bundan önceki yazımızda kendiliğinden kaymayan yanlızca kullanıcı sayıların üzerine gelince kayan bir “kayar haber” scripti hazırlamıştık. Şimdi ise sitesini hazırladığım bir arkadaşımızın talebi üzerine, çoğu haber sitesinde olduğu gibi kullanıcı karışmasa dahi kendiliğinden kayma efekti veriyoruz.

<!--
This script aims teaching a simple news slider application
By Suat ATAN
suatatan.wordpress.com
All rights reserved

Basit bir jquery haber akış uygulaması-otomatik akış da dahil edildi
Her hakkı saklıdır
-->



Suat ATAN's Simple News Slider

http://www.google.com/jsapi

google.load("jquery", "1.4.2");




$(document).ready(function() {
/*HUMAN INTERACT*/
$(".slide").not(":first").hide();

$(".slide-hook").mouseover(function() {
var index = $(".slide-hook").index(this);

$(".slide").hide();
$(".slide:eq(" + index + ")").show();

$(".slide-hook").css("color", "black");
$(this).css("color", "red");
});
/*AUTOSCROLL*/
var timer = setInterval(rotate, 4000);

});
//dr
function rotate() {
var cur_slide = $(".slide:visible");
var ls_slide = $(".slide:last");
var fr_slide = $(".slide:first");

if(cur_slide.html() != ls_slide.html()) {
cur_slide.hide();
cur_slide.next(".slide").show();

} else {
cur_slide.hide();
fr_slide.show();
}
}



.slide-hook {
float: left;
padding: 5px;
background-color: #990000;
border-right: solid 1px #C2E1EF;
}
.slide-image {
width: 500px;
height: 375px;
}
#slider {
width: 500px;
height: 550px;
}
.slide {
}









Title 1




Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos


slide-image





Title 2




Suat ATAN,Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos


slide-image





Title 3




Havasor,Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos 3


slide-image





Title 4




Akdamar Church, Akdamar. Gurpinar Gevas, Surp Marinos


slide-image






1


2


3


4




Burada mantık şudur: rotate fonksiyonumuz o anda “visible” yani görünür olan “slide” elemanını saklayıp, bir sonraki “visible” ediyor. En son slide’a gelince onu da saklayıp bu kez ilk elemanı visible ediyor.

Bu fonksiyonu da setInterval ile 4000 milisaniyede bir çağırıyoruz. setIntetval fonksiyonu aslında bir tetik fonksiyon. Bir insanın düzenli olarak aynı hareketi yapması gibi bir durum. Gerisi tamamen zamanlama dışı klasik fonksiyonlar.