16 Eylül 2013 Pazartesi

23.09.2013

bugün ki ödevim 4 ve 5. maddeler.

4-) buton3 ün yukrısındaki inputbox a yazdığımız değerle h1 in yazı boyutu aynı olacak.
5-) h1 in üstüne geldiğimde verdiğim tüm sınıf özellikleri kalkacak.

buyrun kodlar==>
<script type="text/javascript">
$(document).ready(function(){
$('#tikla').click(function(){

   $( this ).css("color","white");
   $(this).css("background-color","green");
   $(this).css("font","35px");
    $( "#isim").css("color","black");
   $( "#isim").css("background-color","pink");
   $( "#isim").css("font","35px");
 });
  $("#tb1").click(function ()     {         $("#button1").css("color",$(this).val());//"$(this).val()" menü degerini göstermemizi saglar...  
  });
  $("#tb2").click(function ()     {         $("#button2").css("background",$(this).val());//"$(this).val()" menü degerini göstermemizi saglar...  
  });
 $('#button1').click(function(){
$("#button1").css("color",$('select').val());
 $("#isim").css("color",$('select').val());
 });
 $('#button2').click(function(){
$("#button2").css("background",$('select').val());
$("#isim").css("background",$('select').val());
});

 $('#button3').click(function(){
 var bla = $('#text1').val();
 alert(bla)

  $("h1").css('fontSize',bla);

 });
 
  $('#isim').hover(function()
 {
 
     location.reload();
    
 });
});

</script>
<title>Untitled Document</title>
</head>
<body>
<input id="tikla" type="button" value="tikla" /><br>
<h1 id="isim">Gülseher</h1>

<select id="tb1">
  <option value="red">Kirmizi</option>
  <option value="blue">Mavi</option> 
  <option value="grey">Gri</option>
  <option value="green">Yesil</option>
<option value="orange">Turuncu</option>
</select><br><br>
 <button id="button1">Ilk buton</button> <br><br>
 <select id="tb2">
 <option selected="selected">SARI</option>
  <option selected="selected">KIRMIZI</option>
  <option selected="selected">YESIL</option>
  <option selected="selected">TURUNCU</option>
</select>
<button id="button2">buton2</button><br>
<p>yazi boyutu : <input id="text1" type="text" name="user"></p>
<button id="button3">buton3</button><br>

</body>
</html>

 

 
H1 İN ÜZERİNE GELDİK SIFIRLADIK==>
 

 
 
 


 
20.09.2013

bugün ki ödevim 2 ve 3. maddeler.

2-) ilk butonun üstünden seçtiğimiz renk ilk butonun ve h1 in yazı rengini değiştirecek.
3-)buton ikinin solundan seçtiğimiz renk buton2 nin ve h1 in arkaplan rengini değiştirecek.

burun kodlar===> kırmızı ile yazılı kodlar 2 ve 3. buton için eklediğim kodlar.

<script type="text/javascript">
$(document).ready(function(){
$('#tikla').click(function(){

   $( this ).css("color","white");
   $(this).css("background-color","green");
   $(this).css("font","35px");
    $( "#isim").css("color","black");
   $( "#isim").css("background-color","pink");
   $( "#isim").css("font","35px");
 });
   $("#tb1").click(function ()     {         $("#button1").css("color",$(this).val());//"$(this).val()" menü degerini göstermemizi saglar...  
  });
  $("#tb2").click(function ()     {         $("#button2").css("background",$(this).val());//"$(this).val()" menü degerini göstermemizi saglar...  
  });
 $('#button1').click(function(){
$("#button1").css("color",$('select').val());
 $("#isim").css("color",$('select').val());
 });

 $('#button2').click(function(){
$("#button2").css("background",$('select').val());
$("#isim").css("background",$('select').val());

});
 });
 </script>
</head>
<body>
<input id="tikla" type="button" value="tikla" /><br>
<h1 id="isim">Gülseher</h1>
<select id="tb1">
  <option value="red">Kirmizi</option>
  <option value="blue">Mavi</option> 
  <option value="grey">Gri</option>
  <option value="green">Yesil</option>
<option value="orange">Turuncu</option>
</select><br><br>
 <button id="button1">Ilk buton</button> <br><br>
 <select id="tb2">
 <option selected="selected">SARI</option>
  <option selected="selected">KIRMIZI</option>
  <option selected="selected">YESIL</option>
  <option selected="selected">TURUNCU</option>
</select>
<button id="button2">buton2</button><br>
</body>
 

 
19.09.2013

 
bugün ki konum yukarıdaki görselin hazırlanıp şu işlevleri gerçekleştirmesi=
 
1-) tıkla butonuna bastığımda butonun ve h1 kısmınının hem arkaplan rengi hemde yazı renkleri değişecek.
 
2-) ilk butonun üstünden seçtiğimiz renk ilk butonun ve h1 in yazı rengini değiştirecek.
 
3-)buton ikinin solundan seçtiğimiz renk buton2 nin ve h1 in arkaplan rengini değiştirecek.
 
4-) buton3 ün yukrısındaki inputbox a yazdığımız değerle h1 in yazı boyutu aynı olacak.
 
5-) h1 in üstüne geldiğimde verdiğim tüm sınıf özellikleri kalkacak.
 
 
ilk gün tıkla butonunun işlevini gerçekleştirdim.
 buyrun kodları==>
 
<script type="text/javascript">
$(document).ready(function(){
$('#tikla').click(function(){

   $( this ).css("color","white");
   $(this).css("background-color","green");
   $(this).css("font","35px");
    $( "#isim").css("color","black");
   $( "#isim").css("background-color","pink");
   $( "#isim").css("font","35px");
 });
 });
 </script>
</head>
<body>
<input id="tikla" type="button" value="tikla" /><br>
<h1 id="isim">Gülseher</h1>
</body>
 

tıklamadan önce

 
 

tıkladıktan sonra

 
 

18.09.2013
 
Stop
 
 
 
Seçilen hareket halindeki animasyonları durdurmak için kullanılır.
 
kodlar :
$(document).ready(function(){
   $("#start").click(function(){
    $("div").animate({height:300},3000);
    $("div").animate({width:300},3000);
  });
  $("#stop").click(function(){
    $("div").stop();
  });

});
</script>
</head>
<body>
<p>
<button id="start">ANIMASYONA BASLA</button>
<button id="stop">ANINDA DURDUR</button>
</p>
<div style="background:#98bf21;height:100px;width:100px">
</div>
</body>
 
 

17.09.2013

VAL
 
Kod kısmında değişkene atadığımız değeri çağırdığımızda geri getirir.
 
buyrun kodlarım ve görseli ====>
 
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("input:text").val("al sana deger ;)");===> inputuma verdiğim değer.  });
});
</script>
</head>
<body>
 <input type="text" name="user">
<button> Giris alaninin degerini göster </button>
</body>
 
tıklamadan önce
 
 tıkladıkdan sonra
 

16.09.2013

EACH( )
 
 
Bu yöntem  her eşleşen öğe için ayrı bir fonksiyonu belirtir.mesela bu örneğimde liste elemanları olarak 3 ayrı nesne belirlerim kahve,süt,soda diye butona bastığımda bu üç nesnenin isimlerini ayrı yarı bildirdi.

buyrun koladr ve görseli =====>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });

 
});
</script>
</head>

<body>
<button>Tüm liste elemaninin adini SIRASIYLA göster </button>

<ul>
<li>Kahve</li>
<li>SÜT</li>
<li>Soda</li>
</ul>

</body>

 
 

 






11 Eylül 2013 Çarşamba

13.09.2013

SLİDEUP-SLİDEDOWN
 
 
SLİDEUP :  Bu yöntemle istediğimiz unsurları sayfamızda gizeleybiliriz.
 
SLİDEDOWN: Bu yöntemle ise gizlediğimiz unsurları geri getirebiliriz. Genelde slideup la birlikte kullanılır.
 

buyrun kodlar ve görseller =====>

<script>
$(document).ready(function(){

  $(".btn1").click(function(){
    $("p").slideUp();
  });
  $(".btn2").click(function(){
    $("p").slideDown();
  });
 
});
</script>
</head>

<body>
<p>gülseher yildirim</p>
<button class="btn1">havali gizle (slide up)</button>
<button class="btn2">havali göster (slide down)</button>

slideup yani gizle butonuna tıklandığında :

 
 
 
 slidedown yani göster butonuna tıklandığında :



 




12.09.2013
REMOVE
 
 
Bu yöntem tüm metin ve alt düğümlerini kaldırır. Yani sayfayı tamamen boşaltır.
 
remove classtan farkı remove tüm herşeyi kaldırı removeclass ise sadece sınıf yani css özelliklerini sıfırlar.

 

buyrun kodlar ve gorseli=====>

 

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").remove();
  });


});
</script>
</head>

<body>
<p>gülseher</p>
<p>yildirim</p>
<button>tikla hepsi gitsin</button>

</body>
</html>

tıklamadan önce ekranda yazılar var :

 

 

tıklandıktan sonra işlemi gerçekleştiren buton dışında her şey sıfırlanıyo:





11.09.2013

REMOVE CLASS
Seçilen elemanlardan daha önce verilen sınıf özelliklerini geri alma metodudur. Bir önceki konuda sınıf eklemiştik bu metodla eklediğimiz sınıf özelliğini geri çekeceğiz.

buyrun kodlar ve görseli===>

< script>
$(document).ready(function(){
$("button").click(function(){
$("p").removeClass("intro");
});

});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
</style>

< /head>

< body>
<h1>remove class</h1>
<p class="intro">gülseherrrr</p>
<p class="intro">yildirimm</p>

< button> eklenen tüm sinif özelliklerini kaldir </button>


</body>
</html>

TIKLAMADAN ÖNCE :

 

 

 TIKLADIKTAN SONRA :

 
10.09.2013
 
ADD CLASS
 
 
Bu eleman sayesinde seçtiğimiz elemanlara sınıf özellikleri verebiliriz.Yani css özelliği falan.

kodlarda ve resimlerde inceleyelim======>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p:first").addClass("intro");
  });
});
</script>
<style>
.intro
{
font-size:150%;
color:red;
}
</style>
</head>
<body>
<h1>ADD CLASS</h1>
<p>BU PARAGRAFA ÖZELLIK EKLENECEK</p>
<p>BU PARAGRAF DEGISMEYECEK</p>
<button>Ilk paragrafa sinif /özellik ekle</button>
</body>
</html>
 
 

 
09.09.2013
ATTR
 
 
Bu eleman nesneyi bizim kodlarda verdiğimiz değerlere yani özniteliğine çevirir.
 

 

buyrun kodlar ve resimler=====>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("img").attr("width","500");
  });
});
</script>
</head>
<body>
<img src="abc.jpg" alt="Manzara" width="284" height="213">
<br>
<button>TIKLA GÖR</button>
</body>
</html>
 

tıklamadan önce

 

 tıkladıktan sonra


06.09.2013
 
SİZE
 
Belirttiğimiz eleman sayısını belirtir.Mesela ben burada meyve isimlerini listeledim ve size ile sayısını istedim.

kodlara ve göresel bakalım====>

<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("li").size());
  });
});
</script>
</head>
<body>
<button> listedeki eleman sayisi </button>
<ul>
<li>Elma</li>
<li>Armut</li>
<li>Muz</li>
</ul>
</body>
</html>
 
 


05.09.2013
MOUSE HOVER
 
 
 
Hover üzerinde anlamına gelir mousehover ise mouse üzerine geldiğinde anlamına gelir.Biz mouse hover a özellik vererek mousemumuz nesne üzerindeyken yaptırmak istediğimiz işlemleri yaptırabilirz.
ben bu örneğimde bir parağraf tanımladım ve mouse yazının üzerine geldiğinde parağrafın arka plan rengi sarı olsun istedim
Kodlarıma ve görseline bakalım..
 
<script>
$(document).ready(function(){
  $("p").hover(function(){
    $("p").css("background-color","yellow");
    },function(){
    $("p").css("background-color","white");
  });
});
</script>
</head>
<body>
<p>paragrafin üzerine gelin sari arkaplan sari olsun...</p>
</body>
</html>

mouse üzerinde değilken

 mouse üzerindeyken

 

10 Eylül 2013 Salı

04.09.2013
Bugün önceden de ne işe yaradığını bildiğimiz css i jquery de basit örnekle kullandık.
hatırlamaya çalışırsak css stil özellikleri vemek için kullanılırdı ben bu örneğinde bir parağraf yazıp arkaplan rengini değiltirdim ve yazı boyutunu büyüttüm.
buyrun kodlarına bakalım======>
<script type="text/javascript">
$(document).ready(function(){
  $("p").css({"background-color":"yellow","font-size":"200%"});
});

</script>
yukarıda ki kısım da parağrafımın css özelliklerini tanımladım.
aşağıdaki kodda ise body bölümünde parağrafı oluşturdum..
<body>
<b> bu alanda csss yok aşağıda var </b>
  <p>Bu bölümde daha önceden bilgi sahibi olduğumuz css i jquery ile kullandık...</p>
</body>
 


03.09.2013
ANİMATE ( )
 
 
 
 
Jquery animate( ) metodu ile özle animasyonlar yapabilirz. ben en basit örneğiyle anlatmaya çalıştım.
Bir div oluşturup stil kodlarını içide tamamlayarak bir şekil oluşturdum sonra animate komutuyla bu şekli hareket ettirdim.

şimdi kodlarıma bakalım:

$(document).ready(function(){
$('#id').click(function(){
   $(this).animate({left:"200px"},2000);
 });  
});

</script>
<title> JQUERY ANIMATE </title>
</head>
<body>
<div id="id" style="width:250px;height:100px;position:relative;background:#f99;"> gulseher </div>
 

</body>
 
 

resimlerle daha iyi anlarız bence bakalım :) bun bu kodlarla oluşturduğum şekli girdiğim değerlerle sola kaydırdım. daha farklı şeyler de deneyebiliriz.

 
 

 
 

 



 
 
 
 
 

02.09.2013
 
 
 
SHOW( )
 
Gizlenen nesneleri göstermede yardımcı olur.
buyrun kodlar
$(document).ready(function(){
 $("#gizle").click(function () {
$("p").hide();
            });
  $("#göster").click(function () {
$("p").show();
  });


 });
 </script>
<title>GÖSTER</title>
</head>
<body>
<input id="gizle" type="button" value="gizle" />
<input id="göster" type="button" value="göster" />
<p> gülseher yildirim</p>
</body>
 
 
resimlere bakınn
show butonundan önce gizle butonuna bastık
 
 
sonra göster butonuna baktık

 
 
 

29.08.2013
FADEOUT( )VE FADEİN( )
 
 
 
 
 
 
FADEOUT: Bu yöntemle seçilen elemanlar yavaşça donuklaşır. yaptığım araştırmada bu tanım çıktı ama ben fadein ve faadeout u hide ve showdan ayırt edemedim.
 

 
FADEİN: Bu yöntemle ise belirginleşir.
 
 
 
 
buyrun kodlar
$(document).ready(function(){
$('.gizle').click(function(){
 $('.p').fadeOut();
});
$('.goster').click(function(){
 $('.p').fadeIn();
});
});
</script>
</head>
<Body>
<a href="#" class="gizle">SIMDI YAZIYI GIZLE BAKALIM</a><br/>
<div class="p">
Bilgisayar
 Bilgisayar, belirli komutlara göre veri isleyen ve depolayan bir makinedir. Bilgisayarlar çok
 farkli biçimlerde karsimiza çikabilirler. 20. yüzyilin ortalarindaki ilk bilgisayarlar büyük bir
 oda büyüklügünde olup, günümüz bilgisayarlarindan yüzlerce kat daha fazla enerji tüketiyorlardi.
 21. yüzyilin basina varildiginda ise bilgisayarlar bir kol saatine sigacak ve küçük bir pil ile
 çalisacak hâle geldiler.
</div>
<a href="#" class="goster">AAAA GIZLENDI TIKLADA GERI GELSIN</a><br/>
</body>


28.08.2013
HİDE( )  METODU
HİDE( ) :Bu metodla seçilen elemanları gizleyebiliriz.Bu metod gizlemenin en kolay şeklidir,genellikle show yani göster metoduyla kullanılır kodlara bakalım:
 
$(document).ready(function(){
 $("#gizle").click(function () {
$("p").hide();
            });


 });
<body>
<input id="gizle" type="button" value="gizle" />
<p> gülseher yildirim</p>
 
buyrun görselineee
butona tıklamadan önce




butona tıkladıktan sonra
 
 
 

 
 


9 Eylül 2013 Pazartesi

27.08.2013
MOUSELEAVE( ) VE MOUSEOUT( )
Mouseleave: Fare işaretçisi seçilen elemenın üzeinden ayrıldığında istediğimiz işlemi geçekleştirir.
buyrun kodalrı ve resimleri====>
$(document).ready(function(){
$("p").mouseleave(function(){
  $("p").css("background-color","gray");
 });
 });
<body>
 <p> deneme gülseher gülseher <p>
</body>
ilk şekli mouse muz üzerindeki hali
 ikinci şeklimizde ise mouse üzerinden ayrıldığı hali
mouseout: Mouseleave ile aynı işlevde ben bir farkını göremedim :)

26.08.2012
APPEND( ) VE  PREPEND( )
APPEND( ) :  Bu fonksiyonla seçilen bir öğenin sonuna eklemeler yapabiliriz.
buyrun kodlar ve resim ====>>>>
 
$(document).ready(function(){  
  $('div.isim b').append(' *YILDIRIM*'); 
 });
 </script>
<title>Untitled Document</title>
</head>
<body>
<div class="isim"> <b>GÜLSEHER </b>
</body>
append den önce ======>>>>
 append den sonra ====>










PREPEND( );
Bu fonksiyonla ise seçilen öğenin başına eklemeler yapılabilir.
 $(document).ready(function(){  
  $('div.isim b').prepend(' --GÜLSEHER--'); 
 });
 </script>
<title>Untitled Document</title>
</head>
<body>
<div class="isim"> <b>YILDIRIM </b>
</body>
prepend den önce ===>>>
 prependden sonra ===>>>
 



8 Eylül 2013 Pazar

23.08.2013
CLİCK( ) VE HOVER( )
Dün ki ödevim javascript ve jquery araştırmasıydı.Bugünde jquery nin tagı olan click( ) ve hover( ) olayını inceleyeceğim.Bunun için ilk önce jquery de çalışma yapmak için jquery i kurmam lazım ve bunu dünki araştırmamla çok kolay yaptım. 
CLİCK( ) :Click  tıklama manasına gelir.Jquery de click olayı bir tıklama meydana geldiğinde verdiğimiz görevi yerine getirir.Mesela ben bu örneğimde yazının üzerine tıklandığında "parağrafa tıklandı" mesajını vermesini istiyorum.
jquery kurduktan sonra şu kodları yazdım.
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>// jquery nin çalışması için gerekli kod bölümü<script type="text/javascript">

$(document).ready (function(){
$("p").click(function(){
  alert("paragrafa tiklandi");
 });

});
</script>
<title> Click </title>
</head>
<body>
<font color="red" size="24"><p><u>:) TIKLA VE MESAJI GÖR :)</u></p></font>
</body>
</html>
resimlerle inceleyelim ==>

 
 HOVER ( ) : Fare işaretcisini nesnelerin üzerine getirdiğimizde yapmasını istediğimiz işlemleri bu kodla gerçekleştirebilirim...
işte kodlarımmmm

$(document).ready(function(){
 $(".kutu1").hover(function () {
 $(".yazi").show(); },
  function(){$(".yazi").hide()}
 );
});
</script>
<style >
.kutu1 { width:250px; height:100px; background:#CCCC00 ; color:#0033FF;font-size:36px;}
.yazi { font-size:36px; color:pink;}
</style>
<title>HOVER</title>
</head>
<body>
<div class="kutu1">KUTUNUN ÜZERINE GEL</div>
<div class="yazi"><p>HOVER ÖZELLIGINI GÖR;)</p></div>
</body>


ve şimdi de resimlerle bakalım.
ilk hali =====>

sonraki hali===>
 

 

 


2 Eylül 2013 Pazartesi

22.08.2013

                JAVASCRİPT VE JQUERY NEDİR ? JQUERY KODLARI ÇALIŞTIRMAK İÇİN YAPILMASI GEREKEN İŞLEMLER NELERDİR?

JAVASCPRİT

Javascript HTML kodalrı ile bir bütündür.Yazılan kodalr web browser tarafından yorumlanır.Yani server tarafından değil de kullanıcı tarafından çalıştırılır.Dolayısıyla javascript ile program yazmaktaki amaç HTML kodları arasına javascript kodları yerleştirmektir.Ayrıca javascript kodları ayrı bir dosya haline getirilerekte kullanılabilir.Yazılma amacı HTML in sahip olmadığı bazı özelliklerin web sayfalarında kullanılmak istenmesidir.
Java ile javascprit birbiriyle karıştırılmamalıdır.Javascript java değildir.Java nesne yönelimli bir programlama dilidir.Javascript bir nesne yönelimli komut sistemi oluşturma dilidir.Java sanal makinede veya tarayıcıdan çalışan uygulamalar olıuşturulur.Javascript sadece sunucuda çalışır.Hareketli animasyonlar ve matematiksel işlemler html kullanışarak yapılabilir.Kontroller yüklenebilir üzerinde değişiklik yapılabilir.
kulanabilmemiz için <script language="javascript"></script> bu kodlar yazılmalıdır..
 
JQUERY
Jquery bir javascript kütüphanesidir.Daha çok sayfalardaki animasyonlar için flash alternatifi olarak kullanılır.jquery teknolojisi ile slaytlar,foto galeriler,tab menüler yapmak oldukça kolaydır.Jquery ile css iç içedir.CSS de yaptığımız statik siteleri jquery yardımı ile bir adım ilerleterek görsel açıdan zengin animasyonlu bir site haline getirebilir.
Jquery yalnızca 1 dosyadan oluşan .js uzantılı bir dosyadır.
JQUERY ANİMATE :Tüm sayısal css komutları ile animasyon oluşturmamızı sağlayan bir jquery komutudur.

.animate( )metodunun  .css( ) metodundan farkı

.animate( ) metodu ile tüm css değişiklikleri belli bir süre içerisinde gerçkeleşir..css( ) metodu ile width değeri değişikliği anında gerçeklerşir..animate( ) metodu ile belli bir süre tanımlarsınız ve değer değişikliği o süre içinde gerçekleşir.sonuç olarakta bu animasyon haline
dönüşür.

JQUERY KURULUMU

İlk önce masaüstünde default isimli bir klasör oluşturalım.Bu klasör içinde de css ve js isimli başka iki klasör daha oluşturalım.Jquery.comdan jqueryi indirelim.js isimli klasör içine kaydedelim.html sayfası oluşturup notpad++ la birlikte açalım.meta komutları altına
<script type="text/javascript" src="js/ js dosya adı.js"> </script>
<script type="text/javascript "$document).ready(function(){
...
});
yazdıktan sonra kurulum tamamlanmış olur .