Blogum :)

26 Mart 2014 Çarşamba

Ben Ne Yangınlar Gördüm (Zakkum)

8 Eylül 2013 Pazar

JQuery İle İlgili Bazı Komutlar

HTML KODLARI

<html>
<head>
<title>JQuery Komutlari</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>

$(document).ready(function(){
$(".btn1").click(function(){
$("img").attr("width","500");
});
}); //nesnenin öznitelik özelliklere ulaşıp değiştirmeye yarar.
$(document).ready(function(){
$(".btn2").click(function(){
$("p:first").addClass("ezgi");
});
});//nesneye daha önceden tanımlı bir sınıf ekler.
$(document).ready(function(){
$(".btn3").click(function(){
$("p:first").removeClass();
});
});//nesnenin stil sınıfını kaldırır.
$(document).ready(function(){
$(".btn4").click(function(){
$("p").css("background-color","yellow");
});
});//stil,css özlelliklerini değiştirir.
$(document).ready(function(){
$(".btn5").click(function(){
$("p:first").remove();
});
});// nesneyi tamamen kaldırır.
$(document).ready(function(){
$(".btn6").click(function(){
$("p:first").append("<b>yine bennn:)</b>");
});
});//sona ekle
$(document).ready(function(){
$(".btn7").click(function(){
$("p:last").prepend("<b>yine yeni yeniden:)</b> ");
});
});//öne ekle
$(document).ready(function(){
$(".btn8").click(function(){
$("p").html(" <b> Ezgi Fidan</b>");
});
});//html içeriğini görüntüleyip değiştirmeye yarar.
$(document).ready(function(){
$(".btn9").click(function(){
$("input:text").val("Ezgi Fidan");
});
});//nesnenin varsa value değerini almaya ve değiştirmeye yarar.
$(document).ready(function(){
$(".btn10").click(function(){
alert($("p:first").hasClass(".fidan"));
});
});//nesneye sınıf eklimi kontrolü yapar.
</script>
<style>
.ezgi{font-size:150%;color:white;}
.fidan{font-size:150%;color:white;}
</style>
</head>
<body>
<h2>TANSU EZGI FIDAN</h2>
<p style="background-color:red">Tansu Ezgi Fidan</p>
<p style="background-color:orange">Bilgisayar Muhendisligi</p>
<p style="background-color:yellow">Ataturk Universitesi</p>
<img src="eifel.jpg" alt="Pulpit Rock" width="284" height="213">
<br></br>
<p>Name: <input type="text" name="user"></p>

<br></br>
<button class="btn1">attr</button>
<button class="btn2">addClass</button>
<button class="btn3">removeClass</button>
<button class="btn4">css</button>
<button class="btn5">remove</button>
<button class="btn6">append</button>
<button class="btn7">prepend</button>
<button class="btn8">html</button>
<button class="btn9">val</button>
<button class="btn10">hasclass</button>
</body>
</html>

EKRAN ÇIKTILARI

attr() sayesinde resim genişledi.

addClass() sayesinde ilk paragrafa sınıf ekledi.

removeClass() sayesinde ekli olan sınıf silindi.

css() sayesinde paragraflara yeni renk verildi.

remove() sayesinde ilk paragraf silindi.

append() sayesinde sona değer eklendi.

prepend()sayesinde öne değer eklendi.

html() son paragraftaki içeriği değiştirdi.

val() buton değerini verdi.

hasClass() sayesinde uygulanan nesnenin clası varsa trua yoksa false döndürür.

7 Eylül 2013 Cumartesi

Format

İlk olarak adres satırına ;

ftp://10.100.100.100/ yazıyoruz.

Dosyalar arasından Microsoft'u seçiyoruz.

Dosyalar arasından OperationSystems 'i tıklıyoruz.

Clients 'i tıklıyoruz.

windows_7_iso seçiyoruz.

Ardından 32/ 'yi seçiyoruz.

Ve son olarak 7_pro_x86_TR.iso yu tıklıyoruz.Adımlar sonunda karşımıza çıkacak ekran:

"yazdıktan sonra diski doğrula" seceneğini işaretliyoruz.

"yaz" a tıklıyarak,işlemi bitiriyoruz.

Menu Yapımı

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
* {margin:0;padding:0;}
.tabMenuUst{width:500px; background:#B44D4D; display:block; text-align:center; float:left; margin:10px auto;}
.tabMenuUst li(padding:5px 20px; display:inline-block; )
.tabMenuUst li a{color:#fff; display:inline-block;}
.tabMenuUst li a.secili, .tabMenuUst li a:hover{text-decoration:none;color:#000;}

.tabMenuAlt{width:500px; float:left;}
.tabMenuAlt div{width:480px; height:500px; text-align:center;padding:10px;background:#956FAC;display:none;}
.tabMenuAlt div.secili{display:block;}

</style>
</head>
<body>

<ul class="tabMenuUst">
<li> <a href="#">Menu 1</a></li>
<li> <a href="#">Menu 2</a></li>
<li> <a href="#">Menu 3</a></li>
</ul>

<div style="clear:both" ></div>
<div class="tabMenuAlt">
<div class="tabMenu1">
Icerik1
</div>
<div class="tabMenu2">
Icerik2
</div>
<div class="tabMenu3">
Icerik3
</div>
</div>
<script>
$('.tabMenuUst li:first-child.a').addClass('secili');
$('.tabMenuAlt div:first-child').addClass('secili');
$('.tabMenuUst li').click(function(){

$('.tabMenuUst li a').removeClass('secili');
$('.tabMenuAlt div').removeClass('secili');
$(this).find('a').addClass('secili');
var tiklananLi = $(this).index();
$('.tabMenuAlt div').eq(tiklananLi).addClass('secili');
});

</script>
</body>
</html>

Birinci menü seçeneğine tıklandığında oluşan içerik bölümü:

İkinci menü seçeneğine tıklandığında oluşan içerik bölümü:

Üçüncü menü seçeneğine tıklandığında oluşan içerik bölümü:

jquery le İlgili Bazı Kodlar

<html>
<head>
<title>EZGÄ°FÄ°DAN</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<style>
.ezgi{padding:20px 500px;display:block;background:orange; }
.fidan{padding:20px 500px;display:block;background:orange;}
.tansu{padding:20px 500px;display:block;background:orange;}
.ozge{padding:20px 500px;display:block;background:orange;}
.a{padding:10px 10px;display:block;background:yellow;}
.b{padding:10px 10px;display:block;background:yellow;}
.c{padding:10px 10px;display:block;background:yellow;}
.d{padding:10px 10px;display:block;background:yellow;}
.e{padding:10px 10px;display:block;background:yellow;}
.f{padding:10px 10px;display:block;background:yellow;}
.g{padding:10px 10px;display:block;background:yellow;}
.h{padding:10px 10px;display:block;background:yellow;}
span {color:red;}
body { cursor:pointer; min-height: 100px; }
div { width:50px; height:30px; margin:5px; float:left; background:blue; }
</style>

</head>
<body>
<ul>
<li><a href="#" class="ezgi">Hakkimda</a></li>
<li><a href="#" class="fidan">Anasayfa</a></li>
<li><a href="#" class="tansu">Urunler</a></li>
<ul>
<li><a href="#" class="a">Urun1</a></li>
<li><a href="#" class="b">Urun2</a></li>
<li><a href="#" class="c">Urun3</a></li>
<li><a href="#" class="d">Urun4</a></li>
<li><a href="#" class="e">Urun5</a></li>
<li><a href="#" class="f">Urun6</a></li>
<li><a href="#" class="g">Urun7</a></li>
<li><a href="#" class="h">Urun8</a></li>
</ul>
<li><a href="#" class="ozge">Bilgilerim</a></li>
</ul>
<button id="a.a">fadeout</button>

<script>

$("a.ezgi").click(function(){
alert('Hakkimda bolumu')
});
$("a.fidan").click(function(){
alert('Hakkimda bolumu')
});
$("a.tansu").click(function(){
$("a.ozge").show(1000)
});
$("a.ozge").click(function(){
$(this).hide(1000)
});
$("a.a").click(function () {
$("a.a").fadeOut("slow");
});
$("a.b").click(function () {
$("a.a").fadeIn("slow");
});
$("a.c").click(function(){
$("a.c").fadeTo('fast',0.5);
});
$(document.body).click(function () {
if ($("a.d:first").is(":hidden")) {
$("a.d").show("slow"); } else {
$("a.d").slideUp(); } });

$(document.body).click(function () {
if ($("a.e:first").is(":hidden")) {
$("a.e").slideDown("slow");} else {
$("a.e").hide();}});

$( "a.f" ).click(function() {
$( "a.f" ).animate({
width: "70%", opacity: 0.4,
marginLeft: "0.6in", fontSize: "3em",
borderWidth: "10px" }, 1500 );});

$(document.body).click(function() {
$(this).append( $("<div>") );
var n = $("div").size();
$("span").text("Ezgi " + n + ".");});

</script>
<span></span>
<div></div>
</body>
</html>

Sekmeleri teker teker çalıştırdığımızda çıkan sonuç;

6 Eylül 2013 Cuma

3.Gun

JQuery Nedir ?

Jquery bir javascript kütüphanesidir. Ya da bir javascript frameworküdür diyebiliriz. Daha çok sayfalardaki animasyonlar için Flash alternatifi olarak kullanılan bu teknoloji ile, slaytlar, foto galeriler, tab menüler yapmak oldukça kolaydır.
JQuery ve CSS’in içiçe kullanılır.Bu iki dil sanki birbirleri için yaratılmış. Öyle ki CSS ile yaptığınız statik siteleri, JQuery ile bir adım ileri götürerek görsel açıdan zengin, animasyonlu bir site haline getirebilirsiniz.
JQuery artık birçok sitede kullanılmaya başlandı. WordPress buna en basit ve çarpıcı örnektir. Kullanımı gitgide yaygınlaşan bu teknolojinin bu kadar çok sevilmesinin belki de en büyük sebepleri, hız, performans, kullanım kolaylığı ve kodları inanılmaz şekilde kısaltmasıdır. Hatta bu durum JQuery nin sloganını oluşturmaktadır : Az yaz, fazlasını yap…

JQuery Nasıl Kullanılır ?

JQuery sadece 1 dosyadan oluşan .js uzantılı bir dosyadır. Sürekli güncellenen bu dosyayı JQuery nin resmi sitesinden indirebilirsiniz.
İndirme işleminden sonra artık dosyayı kendi sayfanıza entegre etmeye gelmiştir.

<script type="text/javascript" src="latest-jquery.js"></script>

Entegre işleminde indirdiğiniz dosyanın yolunu göstermelisiniz.

Kodu Çalıştırmak
Çoğu Javascript programcısının yaptığı ilk şey aşağıdakine benzer bir kodu programına eklemektir:

window.onload = function(){ alert("hosgeldiniz"); }

Bu kod sayfa yüklendiğinde hangi kodu çalıştıracağını gösterir. Problem ise Javascript kodunun bütün imajların (Banner vs.) indirilmesi tamamlanmadan çalışmamasıdır. Kodunuzu ilk defa çalıştırmayı denediğinizde ilk olarak window.onload kullanılmasının sebebi ise HTML dosyasının henüz yüklenmeyi tamamlamamasıdır.
Bu iki problemi aşmak için ise jQuery basit bir komuta sahip, bu komutla document statüsü kontrol ediliyor, kod dosya kullanılmaya uygun olana kadar bekliyor, bu ayrıca ready event olarak da biliniyor.

$(document).ready(function(){

 // Kodunuz buraya

 });

Ready event içerisine click handler ekliyoruz:

$(document).ready(function(){

 $("a").click(function(event){

 alert("Ziyaret ettiğiniz için teşekkürler!!");

 });

 });

Hazırlamış olduğunuz HTML sayfasını kaydedin ve tarayıcınızda açın. Sayfadaki bağlantıya tıkladığınızda tarayıcınız Alastyr’a yönlenmeden evvel pop-up olarak bu uyarı mesajı çıkacak.
Click ve çoğu event‘de olduğu gibi event.preventDefault() ile öntanımlı davranışı engelleyen bir handler ekleyebilirsiniz.

$(document).ready(function(){

 $("a").click(function(event){

 alert("Gördüğünüz gibi bağlantı artık sizi Alastyr.com'a yönlendirmiyor. ");

 event.preventDefault();

 });

 });

Komple Örnek

Komple HTML dosyasının nasıl olacağına dair bir örnek aşağıda verildi. Lütfen Google CDN‘e giden bağlantıların jQuery core dosyasını yüklediğine dikkat edin.

<!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="utf-8">

 <title>jQuery demo</title>

 </head>

 <body>

 <a href="http://www.alastyr.com/">Alastyr</a>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

 <script>

 $(document).ready(function(){

 $("a").click(function(event){

 alert("Gördüğünüz gibi bağlantı sizi artık Alastyr.com'a yönlendirmiyor.");

 event.preventDefault();

 });

 });

 </script>

 </body>

 </html>

HTML Class Ekleme ve Silme

Önemli: jQuery örneklerimizin geri kalanı yukarıda belirtilen ready eventi içerisine eklenecektir. İsterseniz tekrar Sayfa Yüklendiğinde Kodu Çalıştırmak bölümüne göz atabilirsiniz.

Bir diğer yaygın iş ise class ekleyip silme işlemidir.
İlk olarak dosyanızın <head> bölümüne biraz stil ekleyin, aşağıdaki gibi:

<style>

 a.test { font-weight: bold; }

 </style>

Daha sonra, addClass ekleyerek scriptinize çağırın:

$("a").addClass("test");

Artık bütün a elementleriniz kalın gözükecek. class silmek için ise removeClass kullanabilirsiniz.

$("a").removeClass("test");

(HTML elementlere birden fazla class eklemenize olanak sağlıyor.)

Özel Efektler

jQuery işinize yarayabilecek birkaç tane yararlı efekte olanak sağlıyor. Test etmek için daha önce eklemiş olduğunuz click’de aşağıdaki değişikliği yapın:

$("a").click(function(event){

 event.preventDefault();

 $(this).hide("slow");

 });

Artık, herhangi bir bağlantıya tıkladığınızda bağlantı kendisini yavaşça görünmez hale getirecek.

Jquery Event .click()

Javascript deki .bind('click', handler) ve .trigger('click') yerine kullanılır. Belirlenen öğenin fare (mouse) ile tıklanıp bırakılması eylemini yakalar ve ona göre işlem yapar. Herhangi bir html öğesi ile bu olay tetiklenebilir.
Örneğin basitçe sadece bir öğenin otomatik olarak tıklanmasını sağlayabilir.

$('#button').click();

Ya da bu tıklanma olayını başka bir tıklanma ile tetikleyebilirsiniz:

$('#start').click(function(){
$('#button').click();
});

Başka bir bütün örnek görmek gerekirse:

<!DOCTYPE html>

<html>

<head>

<style>

p { color:red; margin:5px; cursor:pointer; }

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<script>

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

$(this).slideUp();

});

</script>

</body>

</html>

jQuery .Hover Kullanımı
Herhangi bir nesnenin fare ile üzerine gelme ve üzerinden ayrılma (over / out) işlemi için jQuery’de bu api kullanılabilir. Bu işlem için farklı api’lerde mevcuttur.

?

1

2

3

4

5

6

7

8

$("#nesne").hover(

function () {

// fare gelince (over) yapılacaklar..

},

function () {

// fare gidince (out) yapılacaklar..

}

);

Gayet açık bir kullanım şekli mevcut. Bunun yanında sadece fare gelince şeklinde de kullanılabilir. Bunun için de;

?

1

2

3

4

5

$("nesne").hover(

function () {

// fare gelince (over) işlemi yap ve bitir..

}

);

jQuery .attr Kullanımı
Herhangi bir nesnenin (tag) alt özelliği üzerinde oynama yapmak için kullanılan jQuery api’sidir.

?

1

2

3

4

5

$('#resim').attr('src', '/resimler/menu-on.png');

..veya..

$('#nesne a').attr('href', '/yeni-link.html');

..veya..

$('button').attr('disabled','disabled');

Örneklerde de gördüğünüz gibi tagların alt özelliklerini değiştirmeye yarıyor.

JQUERY KODLARI

<html>
<head>
<title> 4 Eylul</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
.ezgi{padding:100px 500px;display:block;background:Yellow;}
</style>
</head>
<body>
<a href="#" class="ezgi">Bilgisayar Muhendisligi</a>
Sayfanin Icerigi
<script>
$("a.ezgi").click(function(){
alert("uyarı onaylandı.")
});
</script>
</body>
</html>

<html>
<head>
<title> 4 Eylul</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
.ezgi{padding:100px 500px;display:block;background:Yellow;}
</style>
</head>
<body>
<a href="#" class="ezgi">Bilgisayar Muhendisligi</a>
Sayfanin Icerigi
<script>
$("a.ezgi").hover(function(){
alert("uyarı onaylandı.")
});
</script>
</body>
</html>

4 Eylül 2013 Çarşamba

2.Gun

Kasa Temizleme

Bu yazımda sizlere sırasıyla bilgisayarın içindeki parçaların nasıl temizlenmesi gerektiğini anlatacağım.

Kasamız bu. Yapacağımız ilk işlem başta elektrik kablosunu çıkarmak. Daha sonra diğer kabloları da sırasıyla yerlerinden çıkarıyoruz. Ki böylece rahat temizlik yapabiliriz.

Yan kapağın vidalarını söktükten sonra hiç de güzel manzara beklemiyor bizi. Kasanın her tarafını toz kaplamış. Bazı kullanıcılar sadece yüzeysel olarak elektrik süpürgesiyle temizlediklerini sanıyorlar ama bu faydalı olmuyor tabii ki.

Dikkat etmemiz gereken ilk parça tabii ki de işlemci soğutucusu. Eğer ki soğutucu bloğu çok fazla tozla kaplanırsa, fan içeriye yeterince hava iletemeyecektir, böylece işlemci ısınacaktır ve bilgisayarınızda belirgin bir şekilde performans düşüklüğü yaşayacaksınızdır. Ayrıca ekran kartının ne kadar tozlandığını bu resimden de görebilirsiniz.