javascript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
javascript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

27 Mart 2012 Salı

JavaScript Faktöriyel Hesaplatan Program

Faktöriyel bir çeşit çarpım serisidir. Verilen sayıdan başlayarak bire kadar olan sayılar bir dizi haline getirilir ve birbirleri ile çarpılır. Burada hazırladığım JavaScript programı yazı kutucuğuna girilen bir sayının faktöriyelini almakta ve yapılan faktöriyel işlemini, sonucu ile beraber başka bir div kutucuğunun içinde görüntülemektedir. Bu görüntüleme işlemi için innerHTML yöntemini kullanıdım.
Eğer Faktöriyel nedir bilmiyorsanız ya da bilgilerinizi tazelemek istiyorsanız şu adresteki kısa anlatımı bir okuyun...
fizikliblog.blogspot.com
<script language="javascript">

function faktoriyel(){ //faktoriyel adlı fonksiyon çalışmaya başlıyor

var a; // Değişken tanımlanıyor

a = document.form1.sayi.value; // değişken içine form1 içindeki sayi isimli kutudaki bilgi aktarılıyor

c = a; // a değişkenindeki bilgi c'ye aktarılıyor (döngüde a nın değeri değişeceğinden eski değere ihtiyacımız olacak)
if(a==0){
    document.getElementById("sonuc").innerHTML=1;
document.getElementById("say").innerHTML=c+"!";
}
b= new Array() //b adlı bir dizi değişkeni oluşturuluyor.

b[0]=a+"x"; //dizinin ilk değerini veriyorum
for(i=a-1;i>=1;i--){ //faktöriyeli hesaplayan döngü başlangıcı

a = a*i;

} //faktöriyeli hesaplayan döngü sonu

// bu kısım faktöriyel hesabı yapılan sayının çarpım dizisi elemanlarını b isimli dizi değişkeni içinde uygun yerlere yerleştirir

for (j=1; j<=c-1;j++){

for(i=c-j;i>=c-j;i--){

if(i>1){

b[j]=i+'x';

}else{

b[j]=i;
}
}
}
// bu kısımdan sonra sonucu ekranda başka bir HTML elemanının içine yazdıran kodlar sıralanmaktadır.
document.getElementById("sonuc").innerHTML=b.join("")+"="+a;
document.getElementById("say").innerHTML=c+"!";
}
// fonksiyon sonu

</script>

<form id="form1" name="form1" method="post" action="">

<label for="sayi"></label>

<input type="text" name="sayi" id="sayi" value="" />

<input type="button" name="ok" id="ok" value="Faktöriyel" onclick="faktoriyel();" />

</form>

<div id="say" style="font-size:36px;float:left;border:solid 1px #09C;color:#0F0;padding:5px;"></div><div id="sonuc" style="float:left;padding:15px 0 0 5px;;color:#60F"></div>

yukarıdakş kodlar doğu bir şekilde yazarsanız nacizane faktöriyel hesaplayıcınız tarayıcınızda arz-ı endam eder efem!!! Deneyin bakalım çalışıyor mu?







Turgut Arslan

14 Şubat 2012 Salı

Ücretsiz Javascript Jquery ve Ajax Eğitim Kitapları

JavaScript
Javascript-Jquery ve Ajax teknolojileri dinamik web sitelerinin ön yüz tasarımı için olmazsa olmaz programlardır. Javascrpt bir web sayfasını oluşturan elemanlara hareketlilik kazandıran, onları işlevsel kılan bir betik dilidir. Javascript olmadan sırf HTML ve CSS kullanılarak tasarlanan bir web sayfası, sadece içeriğin sunulduğu, kullanıcı ile etkileşimin olmadığı sabit bir ekran görüntüsünden ibarettir. Böyle bir web sayfasına bakmak dergi sayfalarını karıştırmaya benzer, sadece sayfaları çevirirsiniz, o kadar. Javascript ise sayfanıza can verir. Web sitelerinde sıklıkla gördüğünüz sliderlar, tıklayınca değişen hareketlenen öğeler hep javascript ile can kazanırlar.
jQuery
jQuery ise bir javascript kütüphanesidir. Yani içinde hazır Javascript fonksiyonlarının olduğu kodlarla dolu bir dosyadır. jQuery'in yazılma amacı daha az kod yazarak daha güzel ve etkili tasarımlar yapmak, Front-end tasarımın ufkunu genişletmektir. Gerçekten de jQuery kullanarak javascriptte onlarca hatta yüzlerce satırda yaptığınız işlemleri çok daha az kodlama ile yapabilir, web sayfalarında çok daha etkili ve gerçekçi animasyonlar tasarlayabilirsiniz. Hatta bu animasyonlar kalite bakımından flash animasyonlarla yarışacak düzeyde olabilirler. jQuery ile yapabilecekleriniz hayal gücünüz ve programlama yeteneğinizle sınırılı. Ayrıca sonsuz sabrı da unutmamak gerkiyor. Çünkü iyi ve etkli bir kodlama yapmak; güzel işler çıkarmak sabır ister, emek ister. Bunu aklınızdan çıkarmayın.
Ajax

...ve Ajax
Açılımı, Asynchronous JavaScript and XML, Türkçesi Eşzamansız JavaScript ve XML yine Javascriptten türetilmiş eşsiz bir şey.. Şey diyorum çünkü bu tam olarak bir programlama dili sayılmaz. Buna JavaScript ve XML'in beraber çalışmasından kurulmuş bir ortaklık diyebiliriz. Bir çeşit etkileşimli uygulama tekniği... Kullanım amacı web sayfası ile sunucudaki veritabanı arasında tüm sayfayı yenilemeden(refresh etmeden) veri transferini sağlamaktır. Ajax tekniği çoğunlukla açılır menülerde kullanılır. Mesela bir eticaret sitesinin sayfasında siz açlılır menüden(Dropdown list) bilgisayarı seçtiğinizde alt menülerde birden bilgisayarla ilgili alt seçeneklerin çıkması, sayfadaki öğelerin sayfa yenilenmeden filitrelenmesi gibi işlemler Ajax sayesinde yapılabilir.

Vesaire, vesaire vesaire... Web 2.0'ın olmazsa olmaz üç kavramı hakkında sayfalar dolusu şey söylenebilir. Piyasada bu konu ile ilgili yazılmış pekçok kaynak bulunmakta. Özellikle web sayfasının önyüz tasarımı(front-end design) ile ilgilenenlerin mutlaka az veya çok öğrenmesi gereken kavramlardır bunlar. Yarın birgün bir web sitesinde sırf önyüz tasarımcısı-grafiker olarak çalışmaya başlamış olsanız bile mutlaka işvereniniz sizden Javascrpt ya da jQuery ile uğraşmanızı gerektirecek bir iş isteyecektir. Bu durumda temel seviyede bile olsa bu kavramlar hakkında bilgi sahibi olmanız yararınıza olacaktır. Aşağıda indirme linkini paylaştığım sıkıştırılmış dosya içinde javascript,jQuery ve Ajax ile ilgili internetten derlediğim çoğunluğu Türkçe olan kaliteli kaynaklar e-kitap olarak bulunmakta. Ayrıca programlamayla ilk defa uğraşacaklar için de konu ile ilgili temel bilgilerin bulunduğu dokümanlar da var. Ben üzerime düşeni yaptım. Gerisi size kalmış. Linkteki dosyaları indirin ve çalışmaya başlayın. Kolay gelsin...


İndirme linki:

JavaScript jQuery ve Ajax Eğitim Kitapları İndir


3 Temmuz 2011 Pazar

Web sayfasına javascript kodu nasıl eklenir?

Bu çalışmamda, web sayfasına javascript kodları nasıl eklenir? Kodları eklerken nelere dikkat edilmeli onları araştırdım. Umarım hepimize faydalı olur.

Javascript kodu statik HTML sayfalarına işlevsellik kazandırmak, hareketlendirmek veya kullanıcılarla etkileşim kurmasını sağlamak için kullanılır. Javascript ile web sayfasındaki elemanları hareket ettirebilir veya onlara farklı efektler kazandırabilirsiniz. Bunun haricinde sayfada hesaplama, sorgulama, kullanıcı girişi, form doldurtma gibi işlemler javascript ile yapılır. Javascript kodları web sayfasının kullanıcı önyüzünde çalışır. Tasarım dünyasında buna front end derler. Gereksiz yere javascript kullanımı (CSS ya da HTML’nin yapabileceği işleri javascript’le yapmak) tarayıcının ram üzerindeki yükünü arttırır ve sayfanın görüntülenmesini zorlaştırır. Hatta bazı durumlarda sayfa hiç açılmayabilir. Ziyaretçi, tarayıcı ekranında “İnternet Explorer Bu Web Sayfasını Açamıyor” ya da “Sayfadaki betik çalışmıyor” benzeri hata mesajları alabilir. Bu durum sayfanızın ziyaretçi sayısını ve ziyaret süresini olumsuz etkiler. Çünkü internet çağının insanları için hız önemlidir ve insanların beklemeye tahammülü yoktur. Bu sebepten sayfayı kodlarken HTML, CSS, FLash ve Javascript elemanlarını yerinde ve gerektiği kadar kullanmaya özen gösterilmelidir. Bu kadar ön bilgiden sonra Javascript kodlarının web sayfasına nasıl eklendiğini görelim. Javascript kodları web sayfasının herhangi bir yerine yerleştirilebilir ve en genel kullanımı şu şekildedir.

<script type=”text/javascript” language=”Javascript”>

Bu kısımda
--------------------
--------------------
--------------------
Program kodları bulunur.

</script>

Kodları özellikle web sayfanızın <head></head> tagları arasına yerleştirmeniz kodların okunmasını, yorumlanmasını ve programın yüklenmesini hızlandırır. Burada tarayıcının HTML dosyasını yorumlama şeklinden bahsetmekte fayda var. Tarayıcılar HTML dokümanlarını yukardan aşağıya doğru ilk satırdan itibaren, satır satır okuyarak yorumlamaya ve bu yoruma göre sayfa öğelerini yerleştirip kullanıcıya görüntülemeye başlar. Bu sebepten sayfada öncelikle çalışmasını istediğimiz kodların ve CSS özelliklerinin sayfanın baş kısmında olması çalışma verimini arttırır. Ayrıca Javascipt’te yaptığınız değişken tanımlamalarını <head></head> tagları arasında yapıp ana program kodlarını yine sayfanın herhangi bir yerine de yazabilirsiniz. Ayrıca, özelikle fare ile tıklama veya farenin sayfadaki herhangi bir nesne(resim, buton, link vs.) üzerine gelmesi durumlarında işlemesi için(bunlara javascript’te event-olay denir) bazı kodlar HTML elemanları içine de yazılabilir. Buna da bir örnek verelim,

<img src=”resim.jpg” onClick=”parent.location.href=’http://www.google.com’”/>

Bu kodlama ile resim nesnesine ziyaretçi tıkladığı zaman sayfayı belirtilen web sitesine yönlendirme özelliği verilmiş olur. Aynı işlem şu şekilde de yapılabilir; sonuç aynı olur.

Öncelikle <head></head> etiketleri arasına ya da sayfadaki uygun herhangi bir yere şu kodlama yapılır,

<script type=”text/javascript” language=”javascript”>
function git()
{
parent.location.href=”http://www.google.com”
}
</script>

Sonra web sayfasına istenen nesne yerleştirilir ve tıklama olayı için bu fonksiyona aktive olma emri verilir.

<img src=”resim.jpg” onClick=”git()”/>

Burada sayfaya eklenen resim nesnesine tıklandığı zaman git() fonksiyonu devreye girer ve sayfa istenen web sitesine yönlendirilir. Bu basit link verme işlemi aslında HTML’nin <a></a> tagı kullanılarak da yapılabilir. Başta da söylediğim gibi HTML ya da CSS kullanarak yapabileceğiniz şeyleri Javascript ile yapmaktan kaçının ve her zaman tarayıcı yükünü hafifletmeye çalışın. Burada verdiğim örnek sadece siteye Javascript kodlarının nasıl ekleneceğini ve bu kodların nasıl işleyeceğini göstermek içindir.

Diyelim ki kapsamlı bir program hazırladınız. Satırlar dolusu kod yazdınız. Programınız sabitler, değişkenler, döngüler hesaplamalarla dolu. Bu programı web sayfanıza eklediğiniz zaman, tarayıcının sırtlanacağı yükü bir düşün. Tarayıcı yukardan aşağı tüm kodları yorumlarken, yükleneceği HTML ve CSS kodları, resimler, videolar, vs. elemanlara ek olarak bir de satırlar dolusu javascript kodunu yorumlamakla uğraşacak. Birde sayfada birden fazla Javacript programı kullanıyorsanız tarayıcının ağır yükten dolayı kaplumbağa hızında işlemesi ya da daha kötüsü, sitenin hiç açılmaması işten bile değil. Yukarıda da bahsettiğim gibi Javascript programları nesneye yönelik programlardır ve genelde çalışmak için kullanıcı tarafından tetiklenmeye(fare ile programa konu olan eleman üzerine gelme, tıklama ya da klavyeden bir tuşa basma gibi) ihtiyaç duyarlar. Eğer sayfanızı ziyaret eden kişi programınıza konu olan; programla ilişkilendirilmiş nesnelerle(resim, link vs) etkileşim kurmazsa(veya “window.onload” gibi bir önyükleme kodu da kullanmayacaksanız) muhtemelen kullanıcının ziyareti boyunca hiç kullanmayacağı bir program için tarayıcıya fazladan kod işleme yükü bindirmiş ve sayfa yüklenmesini yavaşlatmış olursunuz. Tüm bunların önüne geçmek ve tarayıcı yükünü hafifletmek için javascript kodlarınızı aynı CSS’de olduğu gibi harici bir dosya haline getirip, tek satırlık bir kodlama ile sayfanıza bağlayabilirsiniz. Böylelikle programınız sadece ziyaretçi tarafından önceden tarafınızdan nasıl olacağı belirlenen(genellikle tıklama) bir etkileşim gerçekleşirse aktive olur. Bu sayede tarayıcı yükünü hafifletmiş, site yüklenme süresini hızlandırmış ve ziyaretçinin bilgisayarını da gereksiz yere yormamış olursunuz. Şimdi tüm bu söylediklerimi yukarıdaki link işlemi için uygulayalım.

-İlk önce yeni bir metin belgesi oluşturalım ve kullanıcı tıkladığı zaman çalışmasını istediğimiz program kodlarını bu belgeye kodlayalım.

function git()
{
parent.location.href=”http://www.google.com”
}

Burada sadece kodları kopyalıyoruz; script etiketlerini almıyoruz.

-Sonra bu dosyayı link.js adıyla kaydedip, sunucumuzda uygun gördüğümüz bir yere kopyalıyoruz.
-Şimdi sıra link.js dosyasını web sayfamıza bağlamaya geldi. Bunun için aşağıdaki kodları HTML dosyamızın <head></head> etiketleri arasına yazıyoruz.

<script src="link.js" type="text/javascript"></script>

-HTML kısmı diğerleri ile aynı.

<img src=”resim.jpg” onClick=”git()”/>

-HTML dosyamızı kaydedip tarayıcımızdan açtığımızda yukarıda anlattığım yöntemlerle aynı sonucu aldığımızı görüyoruz. Bu yöntemle birden fazla sayfaya aynı dosyayı bağlayarak ziyaretçinin tarayıcısını her sayfa için tekrar tekrar kod yorumlama ve yükleme zahmetinden kurtarmış oluyoruz. Burada link.js dosyamızın adresi doğru verildiğinden emin olmalıyız. Aksi takdirde programımız çalışmaz.

Böylelikle web sayfasına Javascript kodu eklemek için kullanabileceğimiz üç yöntemi de görmüş olduk. Her yöntemin kendine göre avantaj veya dezavantajları bulunmaktadır. Tasarımcı, hazırlayacağı sayfanın ve programın işleyişine uygun yöntemi seçmek durumundadır. Eğer doğru tasarım ve program için doğru yöntem seçilirse sayfanın çalışma verimi en üst seviyede olur. Özellikle web sitelerinin front end (önyüz) tasarımı ile uğraşanların bu kurallara dikkat etmesi gerekir.