ödevler: Eylül 2013

16 Eylül 2013 Pazartesi

23.09.2013:

Bugün iki gün önce verilen ödevimi artık tamamlıyorum.En son aşamasına geldim.

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

$("#ayrl").css('font-size',bla);
});

yukarıda buton3 e tıkladığımda input a girdiğim değeri h1 in yazı büyüklüğü olarak ayarladım.

$('#ayrl').hover(function()
{

location.reload();

});

yukarıda mouse ile h1 in üzerine geldiğimde sayfam sıfırlanıp eski haline geliyor...

Vee ödevim bittiii....

20.09.2013:

Bugün bir önceki gün verilen ödevimi program üzerinde yapmaya başladım.

$('#button').click(function(){

   $( this ).css("color","gray");
   $(this).css("background-color","white");
   $(this).css("font","35px");
    $( "#ayrl").css("color","gray");
   $( "#ayrl").css("background-color","white");
   $( "#ayrl").css("font","35px");
});

yukarıda ilk butonumu yapmakla başladım.butonuma tıklandığında tüm özellikleri butona ve h1 e atayacak.

$('#button1').click(function(){
$("#button1").css("color",$('select').val());
$("#ayrl").css("color",$('select').val());
});
$('#button2').click(function(){
$("#button2").css("background",$('select').val());
$("#ayrl").css("background",$('select').val());

});

$("#menü").click(function ()     {
$("#button1").css("color",$(this).val());
});
$("#menü1").click(function ()     {
$("#button2").css("background",$(this).val());
});
$(":selected").css("background-color","red");
$(":selected").css("background-color","yellow");
   $(":selected").css("background-color","pink");
    $(":selected").css("background-color","green");

yukarıda buton1 e ve buton2 ye tıklandığında olması gerekenleri yaptım.Buton1 tıkladığımda buton1 in ve h1 in yazı rengini seçilen renk olarak ayraladım. Buton2 ye tıkladığımda ise buton2 ve h1 in arkaplan rengini seçilen renk olarak ayarladım...

19.09.2013:

Bugün ki ödevim aşağıdaki görseli oluşturmak için araştırma yapmak.

Yukarıda ki görseli oluşturmam istenildi.Kısaca ödevin içeriğinden bahsedecek olursam;

İlk butona basıldığında h1 de tanımlı olan metin ve butonun kendi büyüklüğü 35 px ,rengi gri ve arka plan rengi ise beyaz olacak.
Renklerin olduğu bir select oluşturlup button 1 e tıklandığında h1 in ve buton1 in yazı rengi seçilen renk olacak.
Renklerin olduğu bir select daha oluşturulacak buton2 ye tıklandığında h1 in ve buton2 nin arkaplan rengi seçilen renk olacak.
Bir adet input umuz olacak ve buraya girilen değer button3 e tıklandığında ilk önce mesajla gösterilecek ardından h1 e yazı boyutu olarak atanacak.
Son olarak ise mouse ile h1 in üzerine geldiğimizde sayfa sıfırlanıp ilk haline gelecek.

Bugün görseli oluşturmak için ön araştırma yaptım...

11 Eylül 2013 Çarşamba

18.09.2013:

STOP() METODU

STOP():Hareket halindeki nesneleri durdurmaya yardımcı olur.

örnek:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</script>
<script>
$(document).ready(function(){
$("#basla").click(function(){
    $("div").animate({height:300},3000);
    $("div").animate({width:300},3000);
});
$("#dur").click(function(){
    $("div").stop();
});
});
</script>
<title>stop ödev</title>
</head>

<body>

<p>
<button id="basla">basla</button>
<button id="dur">dur</button>
</p>

</body>

</html>

17.09.2013:


                               SİZE() METODU

   Sayfamızda tanımlamış olduğumuz elemanların sayısını göstermemize yardımcı olur. Cümlem biraz düşük olabilir kusura bakmayın kafamda toparlamak biraz zor oldu bu metodu :)...

örnek:

<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("li").size());
});
});

</script>
<title>size ödev</title>
</head>
<body>
<button>basla</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
<li>salep</li>
</ul>
</body>
</html>

16.09.2013:

EACH() METODU

For döngüsü olarak düşünün , tek farkı ise each elementlerin toplamını kendi alıyor ve hepsini tek tek işliyor.

örnek:

<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
});
});
</script>
<title>each ödev</title>
</head>
<body>
<button>göster</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>

13.09.2013:

VAL() METODU

Gerekli value özniteliği değeri belirtir.
Bu yöntem geri döndüğünde ilk eşleşen öğenin değerini ,nitelik değerine dödürür.

Bu tanımı ilk okuduumdada birşey anlamaıştım.Hala okuyorum birşey anlamıyorum.Örnekler olmasa idi val metodu hakkında hiçbirşey öğrenemezdim.

örnek:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

$("button").click(function(){

$("input:text").val("melek");
});
});

</script>
<title>val ödev</title>
</head>

<body>

</body>

</html>

sonnnnn

12.09.2013:

REMOVE() METODU

Belirtilen nesne veya nesneleri tamamen sayfadan kaldırır. Bir div içerisinde ne çağırırsak çağıralım bu divi .remove() ettiğimde bütün içeriğini siliyor.

örnek:

<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#yap").remove();
});
});
</script>
</head>
<body>
<div id="yap" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
TERCAN MYO
<p>BILGISAYAR PROGRAMCILIGI</p>
<p>MUHASEBE</p>
</div>
<br>
<button>REMOVE KULLAN</button>
</body>
</html>
bu ödevimide başarıyla tamamladım :) :)

11.09.2013:

REMOVECLASS() METODU

Seçtiğimiz nesne içerisinde ki belirlemiş olduğumuz class ı siler.

örnek:

<!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 src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").removeClass("okul");
});
});
</script>
<style type="text/css">
.okul
{
font-size:120%;
color:red;
}
</style>
<title>removeclass ödev</title>
</head>
<body>
<h1>baslangic</h1>
<p class="okul">birinci</p>
<p class="okul">ikinci</p>
<button>okul css kaldir</button>

</body>
</html>

10.09.2013:

ADDCLASS() METODU

Addclass yine çok kullandığımız bir metoddur.Seçtiğimiz nesneye daha önceden tanımlı bir class atar.

örnek:

<!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 src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p:first").addClass("okul");
});
});

</script>
<style>
.okul
{
font-size:150%;
color:red;
}
</style>
<title>addclass ödev</title>
</head>
<body>
<h1>baslangic</h1>
<p>gülseher</p>
<p>askale</p>
<button>ekle</button>
</body>
</html>

09.09.2013:

CSS() METODU

Daha önceki derslerimizde de kullandığımız bu özellik seçtiğimiz nesnenin css özelliklerini değiştirmemize yarar.

örnek:

06.09.2013:

ATTR() METODU

Bugün attr() metodunu araştırdım.Açıkçası bu metodu anlamam pek kolay olmadı biraz zorlandım.Anlamını okuduğumda hiçbirsey anlayamadım daha sonra bir örnek buldum ondan yola cıkarak anlamaya çalıştım.Ve sonunda çok çok iyi olmasada anladım sayılır.

Attr(): Bu metod sayesinde seçtiğimiz nesnenin özelliklerine ulaşabiliriz.

$('img') .attr('title','okyanus');

yukarıda ki kod ile img nesnemizin title özelliğini okyanus olarak değiştirdik.

örnek:

<!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 src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("img").attr("width","500");
});
});
</script>
<title>attr ödev</title>
</head>
<body>
<img src="abc.jpg" width="250" height="250">
<br>
<button>melek kirkpinar</button>
</body>
</html>

buda tamamdır...

05.09.2013:

SLİDEDOWN()

Bugün slidedown metodunu araştırdım ve örnek yaptım...

Slidedown:Görünmez haldeki nesneyi aşağı doğru kayma hareketiyle görünür hale getirir.

örnek:

<!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 src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
    $("p").slideUp();
});
$(".btn2").click(function(){
    $("p").slideDown();
});
});
</script>
<title>slidedown ödev</title>
</head>
<body>
<p>MELEK KIRKPINAR ISLEM YAP</p>
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>

</body>
</html>

                                                               SON

04.09.2013:

                                    SLİDEUP()

   Ben bugün ödevim olan slideup metodunu araştırdım.İlk öce kelime anlamını öğrenip ardından kullnım şekline ve ne işe yaradığına baktım ardından örnekler üzerinde uygulamalar yaptım...

SLİDEUP: Görünür haldeki nesneyi yukarı doğru kayma hareketi ile görünmez hale getirir.

ÖRNEK:

BUGÜNLÜK ÖDEVİMİ TAMAMLAMIŞ BULUNUYORUM....

10 Eylül 2013 Salı

03.09.2013:

                                     ANİMATE()

   Jquery animate bir jquery metodudur.Jquery animate metodu ile html malzemelerin CSS özelliklerini zamana bağlı olarak rahatlıkla değiştirebiliriz.

   Jquery animate 4 kısımdan oluşmaktadır.

.animate[süre(duration)],[görsellik(easing)],[tamamlandığında yapılacaklar(complete)]);

Özellikler:Animasyon ile değişecek olan CSS özellikleri (renk,genişlik.yükseklik,font boyutu v.b)
Süre(duration):Animasyon süresini belirler. Süre milisaniye cinsinden girilir.1 saniye için 1000 yazılır.
Görsellik(easing):Animasyon esnasında hangi görsel fonksiyonun kullanılacağı belirtilir.
Tamamlandığında yapılacaklar(complete):Animasyon tamamlandığında yapılacak olanlar bir fonksiyon içerisinde belirtilir.

Özellikler bölümünde javascript'in .style altında kullanılan bütün özellikleri kullanılabilir...

örnek: Aşağıda yaptığım örnekte mavi kutu sola doğru gelip ,aşağıya inip ,sola doğru genişlemeye başlıyor...

<!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 src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id').click(function(){
         $(this).animate({left:"300px"},1000);
   $(this).animate({top:"100px"},2000);
   $(this).animate({width:"400px"},1000);
   $(this).animate({hight:"200px"},2000);
});
});

</script>
<title>animate ödev </title>
</head>
<body>
<div id="id" style="width:200px;height:200px;position:relative;background:blue;"> melek kirkpinar </div>

</body>
</html>

02.09.2013:

                                  FADEOUT() VE FADEİN()

.Fadeout():Bu metod seçilen elemanları yavaşça donuklaştırır.

.Fadein():Bu metod yavaşça donuklaştırılan elemanları yavaşça belirginleştirir.

   Aslında bakarsak bu komutlarda gösterip gizleme işlemi yapar ama görsel olarak biraz farklı gizleyip gösterir...

örnek:

<!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 src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.güzelGoster').click(function(){
$('.p').fadeIn(1500);
});

$('.güzelGizle').click(function(){
$('.p').fadeOut(1500);
});
});
</script>
<title>fadeout ve fadein ödev</title>
</head>
<body>
<a href="#" class="güzelGoster">Güzel Göster </a><br/>
<a href="#" class="güzelGizle">Güzel Gizle</a>
<div class="p">
***....MELEK KIRKPINAR....***
</div>
</body>
</html>

29.08.2013:

SHOW()

Bu metod gizlenen nesneleri tekrar göstermemize yardımcı olur.Kelime anlamı zaten göster anlamına gelmektedir.

Öncelikle show nedir, nasıl kullanılır hakkında bilgi edinip daha sora örnek üzerinde alıştırma yaptım...

örnek:

<!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 src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.goster').click(function(){
$('.p').show();
});

$('.gizle').click(function(){
$('.p').hide();
});
});

</script>
<title>show ödev</title>
</head>
<body>
<a href="#" class="goster">göster</a><br>
<a href="#" class="gizle">gizle</a>
<div class="p">
Erzurum Atatürk Üniversitesi BAUM
</div>

</body>
</html>

SHOW ödevimde bittiiii....

28.08.2013:

İlk önce hide nedir, nasıl kullanılır hakkında araştırma yaptım.Ardından ise örnek üzerinde deneme yaptım...
HİDE()

Bu metod sayesinde seçilen elemanlar gizlenebilir...

örnek:

html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.gizle').click(function(){
$('.p').hide();
});
});
</script>
<title>gizleee</title>
</head>
<body>
<a href="#" class="gizle">gizle</a>
<div class="p">
melek kirkpinar 1992 erzurum askale...
</div>
</body>
</html>

BUGÜN DE TAMAMDIR....

9 Eylül 2013 Pazartesi

27.08.2013: Bugün mouseleave ve mouseout hakkında araştırma yapıp birer örnek yapacağım...

İlk önce mouseleave 'den başlayalım.

Mouseleave: Fare işaretçisi seçilen elemandan ayrıldığında mouseleave olayı gerçekleşir.Yani seçtiğimiz herhangi bi öğeye mouse üzerine gelip ayrıldığında hangi şekle veya konuma gelmesini istiyorsak onu yapar.

örnek:

Yazımı yazdım ve mouse üzerine geldiğnde arka plan renginin kırmızı olmasını istedim mouseleave sayesinde oldu...

<!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>
<script type="text/javascript">
$(document).ready(function(){
$("h1").mouseleave(function(){
$("h1").css("background-color","red");
});
});
</script>
<title>mouseleave ödev</title>
</head>
<body>
<h1> melek kirkpinar ayrildiginda renk degistirsin...</h1>
</div>
</body>
</html>

İkinci olarakta mouseout'u araştırmaya başladım...

Mouseout: Fare işaretçisi seçilen elemandan ayrıldığında mouseout olayı gerçekleşir... Mouseleave ve mouseout aynı görevi yapıyor galiba.Araştırdım ama aralarındaki farkı bulamadım anladığım kadarıyla ikisinin görevide aynı ama yinede emin değilim...

örnek:

Mouseleave için yaptığım aynı işlemleri mouseout içinde yaptı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>
<script type="text/javascript">
$(document).ready(function(){
$("h1").mouseout(function(){
$("h1").css("background-color","yellow");
});
});
</script>
<title>mouseout ödev</title>
</head>
<body>
<h1> bunu ben yaptim</h1>
</div>
</body>
</html>

veee bugünlük ödevimi tamamladımmm....

26.08.2013: Bugün ki ödevim .append() ve .prepend özelliği araştırılıp birer örnek verilecek...

.append()

Bu fonksiyon ile belirtilen nesne sonuna html tagı veya metin ekleyebiliriz...

<!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>
<script type="text/javascript">
$(document).ready(function(){
$('div.konu h1').append('kirkpinar');
$('div.konu p').append('<b>nedir? <br> Cevap :append belirtilen nesne sonuna html tagi ve ya metin eklemeye yarar!</b>');

});

</script>

<title> appen ödev</title>
</head>
<body>
<div class="konu">
<h1>***melek***</h1>
<p class="yazi">Soru : jQuery append </p>
</div>
</body>
</html>

.prepend()

Üzerine işlem yaptığımız elementin en başına ekleme yapmamızı sağlar.

8 Eylül 2013 Pazar

23.08.2013: Bugün jquery .click() ve .hover() özelliğini araştırıp örnek yapacağım.

.click(): jquery .click() mausenin sol tuşunu kontrol etmemize yarayan bir fonksiyondur. .click() mausenin sol tuşuna basıldığında aktif olur.Örneğin butona tıkladığınız anda .clik aktif olur.

örnek click:

<!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>
<script type="text/javascript">
$(document).ready(function(){

$("#hazir").click(function () {
alert('butona tikladiginizin farkindamisiniz...');
            });
        });
    </script>
<title>click ödevim</title>
</head>
<body>
<input id="hazir" type="button" value="hazir" />
</body>
</html>

.hover():jquery .hover metodu nesnelerin üzerine gelindiğinde yeni durum belirlemeye yarar.

örnek hover:

<!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>
<script type="text/javascript">
$(document).ready(function(){
$(".kutu1").hover(function () {
$(".kutu2").show(); },
function(){$(".kutu2").hide()}
);
});
</script>
<style >
.kutu1 { width:150px; height:50px; background:#066; color:#FFF;}
.kutu2 { width:150px; height:50px; margin-top:10px; background:#000;color:#FFF;}
</style>
<title>hover ödevim</title>
</head>
<body>
<div class="kutu1">buranin üzerine gelince</div>
<div class="kutu2">burasi gösterildi</div>
</body>
</html>

Araştırmamı yapıp örneklerimi tamaladım....

2 Eylül 2013 Pazartesi

22.08.2013: Bugün ki ödev konum;

Jquery nedir? Jquery kodlarını çalıştırmak için yapılması gereken işlemler nelerdir? Javascript nedir?

Jquery bir javascript kütüphanesidir.Sayfalardaki animasyonlarda kullanılır.Flash alternatifi sağlar.Slayt,fotogaleri v.b işlemler yapmak için kullanılır.

Jquery nasıl kurulur?

İlk öncelikle masaüstünde default adında bir klasör açtık.İçerisine css ve js isimli iki klasör daha oluşturduk.Boş bir html sayfası oluşturduk default klasörüne kaydettik.
Jqueryi indirdik.js klasörünün içerisine yapıstırdık.

Html sayfasını yani internet explorerı notepad++ birlikte açtık ve bu sayfada <meta....... kodunun altına aşağıdakileri yazıyoruz.

<script type="text/javascript "src=" js/ buraya js nın içerisindeki dosya adını yapıtırdık .js></script>
<script type="text/javascript">
$(document).ready(function(){
//bu bölüme jquery kodları yazılacak.
});
</script>
<body>
<h1>jquery kurulumu</h1>
</body>

id=Grup ismi,grup adresi anlamına gelir.
class=id gibi kullanılır.<div class="renk"> jquery kod kısmında $(".renk") diye çağırılır.

JQUERY ANİMATE
Tüm sayısal css komutları ile animasyon oluşturmamızı sağlayan bir jquery komutudur.Jquery animate ile bir malzeme (resim,yazı v.b)seçersiniz.Seçtiğiniz malzemenin tüm css özelliklerini istediğiniz gibi değiştirebilirsiniz.

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

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

JAVASCRİPT NEDİR?
Java ile javascript i karıştırmamak lazımdır. Javascript kullanımı kolay bir dildir. İnteraktif web sayfalarının tasarlanmasını sağlar.Javascript bir script dilidir.Çoğunlukla html dosyalarının içine gömülerek yapılır.javascript bir yorumlama dilidir.Lisans satın almadan herkes kullanabilir.Hareketli animasyonlar ve matematiksel işlemler yapılabilir.Javascript in yazılma amacı htlm de bulunmayan bazı özelliklern kullanılmak istenmesidir.