Wolder King

Html Eğitimi Ders 8-Resimler

Html Eğitimi Ders 8-Resimler

Merhaba, Şimdi önemli bir konu üzerinde duracağız. Resim eklemek ve düzenlemek gibi. Çok kolay bir ders olacak. Resimler İlk olarak b...

Devamı »

06:53

Html Eğitimi Ders 7-Form Oluşturma

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid8DO53cCid62CqITXc2HvORPmuE6LB9uBUjYEtDowxjjvblogCSZIL-WWMr7KfTvBtuCPniAFLyRKNn0UBiDN4farDOKKFXqat1fVs4VfaWa6tGlLr9E-43TVsFg-gSa-vIqqDo4nfR8/s1600/html.jpeg" width="165" /></a></div>
Merhaba,<br />
Bütün herşeyi oluşturduktan sonra önemli bir konu olan form nesnelerine başvuralım. Çok kolay ama bazen karışabilen bir konu olan bu ders size kolay gelecek. Eminim.<br />
<h3>
Formlar</h3>
<div>
Formlarda açma etiketi "input" olarak bilir ve türünü ise "type" değerine özellik vererek belirleriz. İlk olarak "text" yani yazı özelliğini göreceğiz. Sonradan "name" ile forma isim verebilir, "size" ile büyüklüğü belirtebilirsiniz. Örneğin:</div>
<div>
<br /></div>
<form name="giris" action="giris.asp" method="post"><br />
<b>Kullanıcı Adı:</b><br /><br />
<input type="text" name="kullaniciadi" size="12"><br /><br /><br />
<b>Şifre:</b><br /><br />
<input type="password" name="sifre" size="12"><br /><br /><br />
<input type="submit" name="giris" value="Giriş"><br /><br /><br />
</form><br />
<br />
<form action="giris.asp" method="post" name="giris">
Şimdi formu inceleyelim:<br />
<ul>
<li>name="isim": Form veya bir bölümüne isim vermek için kullanılır. Değerlendirmede bize yardımcı olur.</li>
<li>action="dosya": Form bilgilerinin gönderileceği veya test edileceği dosyadır.</li>
<li>method="post": Hangi şekilde dosyaya gideceğidir.. POST olursa bilgiler görünmez, GET olursa form nesnelerine göre dinamik şekilde adreste görünür.</li>
<li>type="tür": Kullanacağımız form nesnesidir. Burada "text" yazı kutusu, "password" şifre kutusu ve "sumbit" ile gönderme düğmesi oluşturmuş oluruz.</li>
<li>size="boyut": Form nesnelerinin uzunluğunu belirtip sadece "text" ve "password" özelliklerinde kullanılır.</li>
<li>value="deger": Butonda ya da metin kutusunda yazılacak değerler bu kısımda belirtilir.</li>
</ul>
<div>
Bunları öğrendikten sonra örneklere devam edelim. Bir yorum kutusu örneği (Çalışmaz ve sadece örnek önizlemedir):</div>
<div>
<br /></div>
<div>
<form name="yorum" action="yorum.asp" method="post"><br />
<b>Adınız Soyadınız:</b><br /><br />
<input type="text" name="adsoyad" size="24"><br /><br /><br />
<b>Yorum:</b><br /><br />
<textarea  cols="36" rows="4">Yorumunuz...</textarea><br /><br /><br />
<input type="submit" name="gonder" value="Gönder"><br /><br /><br />
</form></div>
</form>
<form action="yorum.asp" method="post" name="yarum">
Burada "textarea"yı bir "type" değeri içinde kullanmadık. Çünkü bu textarea bir form nesnesi olmayıp sadece içinde kullanılır. Özellikleri:<br />
<br />
<ul>
<li>cols="sutun sayısı"</li>
<li>rows="satır sayısı"</li>
</ul>
<div>
Bunun dışında "textarea" ve kapanma etiketi arasına içinde bulunan değer yazılır. Şimdi sadece bir tanesi seçilebilen radyo düğmeleri yapalım:</div>
<div>
<br />
<b> Öğrenmek İstediğiniz Programlama Çeşidi Nedir: </b><br /><br /></div>
<div>
<input type="radio" name="kod" value="html"> Html <br /></div>
<div>
<input type="radio" name="kod" value="css"> Css <br /></div>
<div>
<div>
<input type="radio" name="kod" value="php"> Php <br /></div>
<div>
<input type="radio" name="kod" value="asp"> Asp <br /></div>
</div>
</form>
Eğer denerseniz sadece bir tanesinin seçilebildiğini görebilirsiniz. Gördüğünüz gibi "type" değerini "radio" olarak verdik. Şimdi birden çok seçilebilen seçenekler oluşturalım:<br />
<br />
<b> Bildiğiniz Programlama Çeşitleri Nelerdir: </b><br /><br /><br />
<input type="checkbox" name="_html" value="html"> Html <br /><br />
<input type="checkbox" name="_css" value="css"> Css <br /><br />
<input type="checkbox" name="_php" value="php"> Php <br /><br />
<input type="checkbox" name="_asp" value="asp"> Asp <br /><br />
<br />
<br />
Denediyseniz birden fazla seçenek seçebiliyorsunuz. Burada da "type" değerini "checkbox" yaptık. Şimdi açılır seçim kutusu yapalım:<br />
<br />
<select name="kodlar"><br />
<option value="html"> Html </option><br />
<option value="css"> Css </option><br />
<option value="php"> Php </option><br />
<div>
<option value="asp"> Asp </option><br />
</select></div>
<div>
<br /></div>
Şimdi ise bambaşka bir seçenek kullandık. Bunu ve diğerlerini "form" tagları arasına koyabiliriz. Bu arada açılır seçim kutusunda ilk değer herzaman ilk olarak gözüken değerdir.<br />
<br />
Bu derslik bu kadar ve form oluşturmayı tam olarak öğrendik. İletişim formu bu bilgi ile oluşturulmaz. Bundan dolayı çalışan form oluşturmak için diğer sitelerden örnekeri inceleyin. Kolay Gelsin. Emek karşılığı ve soruları yorumda belirtin.

Html Eğitimi Ders 7-Form Oluşturma

Merhaba, Bütün herşeyi oluşturduktan sonra önemli bir konu olan form nesnelerine başvuralım. Çok kolay ama bazen karışabilen bir konu ola...

Devamı »

06:31

Css Eğitimi Ders 6-Bağlantı Özellikleri

Css Eğitimi Ders 6-Bağlantı Özellikleri

Merhaba, Yazı stillerini belirledikten sonra şimdi bağlantılarla oynayalım. Bağlantılar Bağlantılar ziyaret edilmiş, edilmemiş gibi b...

Devamı »

07:07

Css Eğitimi Ders 5-Yazı

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn6g5w5vuV4vMz1nyOFuw-90T45P85arbtihwjduHirEXC7svCFrFetpdB37bh2wSdieNmSMYuordTTOYwKZZeC9IgVs3ULuJLOkzv3m2oK8H25u7FndeSvezH0HVRp-dq9YeaD_gMGtu/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div>
Merhaba,<br />
Bir önceki ders ile arkaplanınızı belirttiyseniz şimdi biraz yazılarla oynayalım.<br />
<h3>
Yazı Rengi</h3>
<div>
Aynı arkaplanda yaptığımız gibi ama biraz farklı yazı rengi belirleyelim. Örneğin:</div>
<div>
<br /></div>
a {<br />
<div>
color: white; </div>
<div>
}</div>
<div>
<br /></div>
<div>
Bu stil ile bütün a kümelerinin beyaz olmalarını sağladık.</div>
<h3>
Yazı Hizası</h3>
<div>
Normalde kullandığımız sağda, solda ve ortada özelliklerini kullanalım. Örneğin:</div>
<div>
<br /></div>
a {<br />
<div>
text-align: justify; </div>
<div>
}</div>
<div>
<br /></div>
<div>
Bu sayede bütün a kümelerinin tam sağ ve sola dayanmasını sağladık. Bütün özellikleri görelim:<br />
<ul>
<li>left : Sol</li>
<li>right : Sağ</li>
<li>center : Orta</li>
<li>justify : Tam</li>
</ul>
<h3>
Yazı Dekorasyonu</h3>
</div>
<div>
Bir yazıdaki dekorasyonları kaldırmak için kullanılır. "none" değeri hayır anlamındadır. Örneğin:</div>
a {<br />
<div>
text-decoration: none; </div>
<div>
}</div>
<div>
<br /></div>
<div>
Bu şekilde tüm dekorasyonlar kalkar.</div>
<h3>
Yazıda İndent</h3>
<div>
İndent özelliği başlamadan önce başta bırakılan boşluktur. Örneğin:</div>
<div>
<br /></div>
p {<br />
<div>
text-indent: 50px; </div>
<div>
}</div>
<div>
<br /></div>
<div>
Bu sayede paragraf başlamadan 50px boşluk bırakabiliriz.</div>
<div>
<br /></div>
<div>
<h3>
Yazıda Spacing</h3>
<div>
Yazıda spacing kelime ve harf arasında boşluk oluştumak amaçlı kullanılır. 2'ye ayrılır.</div>
<h4>
     Letter-Spacing</h4>
<div>
Harfler arasında boşluğu belirtir. "px" olarak belirtilebilir.</div>
<h4>
     Word-Spacing</h4>
<div>
Kelimeler arasında boşluğu belirtir. "px" olarak belirtilebilir.<br />
<h3>
Yazı Fontu</h3>
</div>
</div>
<div>
Font belirlemek için font-family özelliği kullanılır. Örneğin:</div>
<div>
<br /></div>
<div>
a {</div>
<div>
font-family: Times New Roman;</div>
<div>
}</div>
<div>
<br /></div>
<div>
Bu şekilde yazının "Times New Roman"  olmasını sağladık.</div>
<h3>
Yazı Büyüklüğü</h3>
<div>
Yazı büyüklüğü belirlerken font-size özelliği kullanılır. Örneğin:</div>
<div>
<br /></div>
<div>
a {</div>
<div>
font-size: 12pt;</div>
<div>
}</div>
<div>
<br /></div>
<div>
Burada punto dışında büyüklük şekilleri kullanabiliriz. Örneğin "px".</div>
<h3>
Yazı Özellikleri</h3>
<div>
Yazı özelliği kullanarak yazıyı bold, italik yapabiliriz. Örneğin:</div>
<div>
a {</div>
<div>
font-style: italic;</div>
<div>
font-weight: bold;</div>
<div>
}</div>
<div>
<br />
Yazıları normal haline getirmek için ise "normal" ifadesini kullanırız.<br />
<br /></div>
<div>
Daha pek çok örnek verilebilir fakat şimdilik bunları bilmeniz yeterli.</div>

Css Eğitimi Ders 5-Yazı

Merhaba, Bir önceki ders ile arkaplanınızı belirttiyseniz şimdi biraz yazılarla oynayalım. Yazı Rengi Aynı arkaplanda yaptığımız gibi...

Devamı »

06:50

Css Eğitimi Ders 4-Arkaplan

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjltbWtZqeFa5pWOUTV-FTkP24u1GNrNR8FcyETtPlNEvEUCBJA69lLP5il7xx8SIOFdhaZ26AYZ6czdlNo9GCHgAabJO_68c-wqiRjdwZ2YI_hDFXazeYVA5ze96ziAazjdy7FcefsrVTL/s1600/5035a79ebf516.preview-620.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjltbWtZqeFa5pWOUTV-FTkP24u1GNrNR8FcyETtPlNEvEUCBJA69lLP5il7xx8SIOFdhaZ26AYZ6czdlNo9GCHgAabJO_68c-wqiRjdwZ2YI_hDFXazeYVA5ze96ziAazjdy7FcefsrVTL/s1600/5035a79ebf516.preview-620.jpg" width="200" /></a></div>
Merhaba,<br />
Şuan itibariyle css kullanım örneklerine başlıyoruz. İlk olarak arkaplan ile başlayalım.<br />
<h3>
Arkaplan Rengi</h3>
<div>
Normalde şimdi renklerin nasıl kullandığını anlatmak isterdim fakat bu bilindik bir şey. Bunu kullanarak öğreniceksiniz. Zaten ccs'nin temeli renklerdir. Bir örnek yapalım:</div>
<div>
<br /></div>
body { <div>
background-color: yellow; </div>
<div>
}</div>
<div>
<br /></div>
<div>
Burada arka plan renginin yellow (sarı) olmasını sağladık. Bunun yerine kodlama kullanabiliriz. #'den sonra gelen renk kodları da burada kullanılabilir.</div>
<h3>
Arkaplan Resmi</h3>
<div>
Eğer arkaplana bir resim eklemek istiyorsak bu işlemi kullanırız. Ve zaten genellikle bu kullanılır. Ya adres yoluyla ya da hosting'te resim adı ile bağlantı kurulur Örneğin:</div>
<div>
<br /></div>
<div>
body { <br />background-image: url('image.jpg'); <br /><div>
}</div>
</div>
<div>
<br /></div>
<div>
Bu şekilde "url" ile ya köprü bağlantısı ya da "image.jpg" kısmı ile sitede bulunan bir resmi ekleyebiliriz.</div>
<h3>
Arkaplan Repeat (Döşeme)</h3>
<div>
Yüklediğiniz arkaplan resmi eğer tam arka plana sığmıyor ise o zaman repeat özelliğine başvurulur. Yani resim tekrar ederek döşenir. Örneğin:</div>
<div>
<br /></div>
body {<div>
 background-image: url('image.jpg'); </div>
<div>
background-repeat: no-repeat; </div>
<div>
}</div>
<div>
<br /></div>
<div>
Repeat özelliğinin değerleri:</div>
<div>
<ul>
<li>no-repeat : Tekrar edilmeyecektir</li>
<li>repeat : Tekrarlanacaktır / döşenecektir</li>
<li>repeat-x : Sadece sağa doğru tekrar edecektir</li>
<li>repeat-y : Sadece aşağı doğru tekrar edecektir</li>
</ul>
<div>
Bundan da anlayacağımız gibi repeat özelliği küçük arkaplan resimleri için önemlidir.</div>
<h3>
Arkaplan Attachment (Sabitlik)</h3>
<div>
Bir arkaplan resminin sabitliğini belirlemek istiyorsak bu özelliğe fixed değeri veririz. Örneğin:</div>
<div>
<br /></div>
body { </div>
<div>
background-image: url('image.jpg');</div>
<div>
background-attachment: fixed; </div>
<div>
}<h3>
Arkaplan Position</h3>
<div>
Eğer arkaplanı "no-repeat" yani tekrar etmeyecek özelliği kattıysak bu resmin nereye hizalancağını belirleyebiliriz. Örneğin:</div>
<div>
<br /></div>
body { </div>
<div>
background-image: url('image.jpg'); </div>
<div>
background-repeat: no-repeat; </div>
<div>
background-position: left top; </div>
<div>
}</div>
<div>
<br /></div>
<div>
Burada left: sol, top: üst yani sol üst anlamındadır.</div>
<h3>
Arkaplan Belirmenin Kısa Yolu</h3>
body { <div>
background: #000000 veya url('image.jpg') no-repeat left top; </div>
<div>
}<div>
<div>
<br /></div>
</div>
</div>
<div>
Bu şekilde uzun bir kodu kısaltabilirsiniz.</div>

Css Eğitimi Ders 4-Arkaplan

Merhaba, Şuan itibariyle css kullanım örneklerine başlıyoruz. İlk olarak arkaplan ile başlayalım. Arkaplan Rengi Normalde şimdi renkl...

Devamı »

06:23

Mysql Eğitimi Ders 2-Veritabanı Oluşturma

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4_0PgxTUaKWpgqYTk9TaqBFYBgemrEUexotLfUAuiLNrrOiAkcvMljVwQ_nxpgu9VrxFDGiyzNQRPbDMS0JjRceut1jXIk84wSoq4TYfH6aGCu_8R5mf-n1NJZzaisaIWwajWGRRrUSRz/s1600/images.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4_0PgxTUaKWpgqYTk9TaqBFYBgemrEUexotLfUAuiLNrrOiAkcvMljVwQ_nxpgu9VrxFDGiyzNQRPbDMS0JjRceut1jXIk84wSoq4TYfH6aGCu_8R5mf-n1NJZzaisaIWwajWGRRrUSRz/s1600/images.jpg" width="200" /></a></div>
Merhaba,<br />
Şimdi çok basit bir konu olan veritabanı oluşturmayı göreceğiz. Burada sadece oluşturma gösterilecek. Düzenleme veya veriatama anlatılmayacak. Onlar çok yakında. Bu arada Mysql nasıl okunur öğrenelim :) May-Sı-Kul Aferim :)<br />
<h3>
Veritabanı Oluşturma</h3>
<div>
İlk olarak bilmeyenler için anlatalım. Veritabanı birgilerin sql (Tablo)ların saklandığı yerdir. İçine bilgi atayıp, bilgi ediniriz. İşte bu veritabanını kodla oluşturmak için:</div>
<div>
<br /></div>
CREATE DATABASE veritabani;<div>
<br /></div>
<div>
Burada "veritabani" adlı bir veritabanı oluşturduk. Peki bunu nasıl görüntüleriz. Yani önizleriz:</div>
<div>
<br /></div>
SHOW DATABASES;<div>
<br /></div>
<div>
+----------------+</div>
<div>
| Database           | </div>
<div>
+----------------+</div>
<div>
| veritabani           | </div>
<div>
| mysql                 |</div>
<div>
+----------------+<div>
<br /></div>
<div>
Bu komut ile sql tablosunu listeleriz ve şimdi gördüğünüz gibi liste bu şekilde gözüküyor.</div>
</div>
<div>
<br /></div>
<div>
Bu derslik de bukadar. Bir sonraki derste biraz karışık ama kolay bir ders olan tablo oluşturmayı göreceğiz. Daha sonra veri ekleyip alıp tabloyla oynamaya başlayacağız. Kolay gelsin.</div>

Mysql Eğitimi Ders 2-Veritabanı Oluşturma

Merhaba, Şimdi çok basit bir konu olan veritabanı oluşturmayı göreceğiz. Burada sadece oluşturma gösterilecek. Düzenleme veya veriatama a...

Devamı »

12:43

Mysql Eğitimi Ders 1-Komutlar

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4sfXUbBrd0tLWHWZMSxPTnfjKFoM-zbP7KMBZT01Bgmq8T1JJ4B997FXzj_ZOzraUXyK9rEp0fiwi4lA7TiQpF_d6mCLsUywZ4EW8yc4OEaofRCrV7wNYYCxqEZPweKK429aTsz7s9yag/s1600/images.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4sfXUbBrd0tLWHWZMSxPTnfjKFoM-zbP7KMBZT01Bgmq8T1JJ4B997FXzj_ZOzraUXyK9rEp0fiwi4lA7TiQpF_d6mCLsUywZ4EW8yc4OEaofRCrV7wNYYCxqEZPweKK429aTsz7s9yag/s1600/images.jpg" width="200" /></a></div>
Merhaba,<br />
Şuandan itibaren mysql eğitimlerine başlıyoruz. Tablo kullanım açısından önemli olan mysql örnek olarak php ile üyelik sistemi yapabilirsiniz. Hemen başlayalım.<br />
<h3>
Komutlar</h3>
<div>
Şimdi ilk olarak kuralları öğrenelim. Her komutu yazarken uymamız gereken kurallar şunlar:</div>
<div>
<div>
<br /></div>
</div>
<div>
<ul>
<li>Her komutun sonuna ; koymalıyız.</li>
<li>Komutlarda iç sorgu yaparken ( ve ) kullanırız.</li>
<li>Değişkenler " veya ' aralarına alınır.</li>
</ul>
<h4>
Açıklama Yazma</h4>
</div>
<div>
<ul>
<li># Açıklama</li>
<li>-- Açıklama</li>
<li>/* Açıklama<br />Açıklama Satır 2<br />Açıklama Satır 3*/</li>
</ul>
<div>
Bu ders kısa ve öz. Burada ana şeyleri anlattık ve bir sonraki ders veritabanı oluşturmayı göreceğiz. Yine kısa olucak.</div>
</div>

Mysql Eğitimi Ders 1-Komutlar

Merhaba, Şuandan itibaren mysql eğitimlerine başlıyoruz. Tablo kullanım açısından önemli olan mysql örnek olarak php ile üyelik sistemi y...

Devamı »

12:32

Javascript Eğitimi Ders 6-if,Else,Else İf ve Merdivenler

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijae9Q1k8gYP8_TEBZbBoBZhjOgKFQi7aDxLIOEE0_OmMSFdfVrXTjyBMJ0MZOuiVXvJOrDgYGbmgrhltw6zu4uxa7xycbtWfjnQ8Pbj-qoiol289A1nKihYcmX8axpgY_8GcQiQUhPHHF/s1600/JavaScript-logo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijae9Q1k8gYP8_TEBZbBoBZhjOgKFQi7aDxLIOEE0_OmMSFdfVrXTjyBMJ0MZOuiVXvJOrDgYGbmgrhltw6zu4uxa7xycbtWfjnQ8Pbj-qoiol289A1nKihYcmX8axpgY_8GcQiQUhPHHF/s1600/JavaScript-logo.png" width="200" /></a></div>
Bir şart olşuturma ve boolean ile şart doğru ise değişkene true, yanlış ise değişkene false değerini vermedir. Şimdi incelemeye başlayalım.<br />
<h3>
if</h3>
<div>
Söz dizimine bakalım:</div>
<div>
<br /></div>
<div>
if (şart) {</div>
<div>
//şart true değerini verirse yani doğru ise çalışacak kod grubu</div>
<div>
}</div>
<div>
<br /></div>
<div>
Bu komut sadece şart doğru ise çalışır. DOğru değil ise hiçbir şey yapılmaz. (Yani true değeri vermelidir) Örneğin:</div>
<div>
<br /></div>
<div>
var a = 12;</div>
<div>
if (a>9 && a<100) {</div>
<div>
console.log("a 2 basamaklı");</div>
<div>
}</div>
<div>
<br /></div>
<div>
Bu örnekte ">" operatörü yani büyüktür ve "<" operatörü yani küçüktür ile a (12) 9'dan büyük ve 10'den küçükse "a 2 basamaklı" yazısının yazılması istenilmiştir. Dolayısıyla yazar.</div>
<div>
<br /></div>
<div>
Not:"consolo.log" kafanızı karıştırmasın. Kullandıkça öğrenirsiniz. Ne diye yine sorarsanız şimdilik bir şeylerr yazmak olarak anlayın.</div>
<div>
<br /></div>
<h3>
if...Else</h3>
<div>
if'i sadece true değeri alınırsa kullanıyorduk. Peki false değeri için ne kullanacağız. Tam bu kısımda else anahtarı devreye giriyor. Söz dizimini inceleyelim:</div>
<div>
<br /></div>
<div>
<div>
if (şart) {</div>
<div>
//şart true değerini verirse yani doğru ise çalışacak kod grubu</div>
<div>
}else{</div>
</div>
<div>
//şart false değerini verirse yani yanlış ise çalışacak kod grubu</div>
<div>
}</div>
<div>
<br /></div>
<div>
Bu yapıda true değeri verilirse if kapsamındaki kodlar, false değerini verirse else kapsamındaki kodlar çalışacaktır. Örneğin:</div>
<div>
<br /></div>
<div>
<div>
var a = 7;</div>
<div>
if (a%2==0) {</div>
<div>
console.log("a çift sayı");</div>
<div>
}else{</div>
</div>
<div>
console.log("a tek sayı");</div>
<div>
}</div>
<div>
<br /></div>
<div>
Bu durumda ekrana "a tek sayı" yazılır. Çünkü burada a'nın 2'ye bölümünden kalanın 0 olup olmadığı kontrol ediliyor. Kalan 0 olmadığından false değeri üretilip else kapsamındaki kodlar çalışır.</div>
<h3>
if...Else if</h3>
<div>
Söz dizimini inceleyelim:</div>
<div>
<br /></div>
<div>
<div>
<div>
if (şart1) {</div>
<div>
//şart1 true değerini üretirse çalışacak kod grubu</div>
<div>
}else if (şart2){</div>
</div>
<div>
//şart1 false değerini, şart2 true değerini üretirse çalışacak kod grubu</div>
<div>
}</div>
</div>
<div>
<br /></div>
<div>
Else if yapısı ondan önce gelen if veya else if false değerini üretirse çalışır. Burada şart1 doğru ise if kapsamındaki kodlar çalışıp else if kapsamındaki kodlar es geçilir. Eğer şart1 false değerini üretirse else if'e bakılır ve true değerin üretirse else if kapsamındaki kodlar çalışır, aksi takdirde false değerini üretirse yine es geçilir. Ve bu durumda hiç bir kod çalışmaz. Örneğe bakalım:</div>
<div>
<br /></div>
<div>
<div>
<div>
var a = 5;</div>
<div>
if (a<0) {</div>
<div>
console.log("a sayısı negatif");</div>
<div>
}else if (a>0){</div>
</div>
<div>
console.log("a sayısı pozitif");</div>
<div>
}</div>
</div>
<div>
<br /></div>
<div>
Burada ekrana "a sayısı pozitif" yazar. Çünkü burada pozitif ve negatiflik test için 0'dan büyük veya küçük olduğu test edilmiş. Dolayısıyla ilk olarak "a<0" şartı ile false değeri üretilmiş ve else if yapısına bakılmış. Daha sonra "a>0" ile true değeri üretilip "a sayısı pozitif" yazılmış.</div>
<div>
<br /></div>
<div>
<b>Not: Burada "console.log kullandıktan sonra ekrana yazar dememiz asında yanlış. Bilgisayar bunu aklıda kaydeder. Yani ekrana yazmaz. Bunları görmek için Firefox'un firebug uzantısını kullanabilirsiniz.</b></div>
<div>
<b><br /></b></div>
<h3>
if...Else if...Else Merdiveni</h3>
<div>
Soz Dizimi:</div>
<div>
<br /></div>
<div>
<div>
<div>
if (şart1) {</div>
<div>
//şart1 true değerini üretirse çalışacak kod grubu</div>
<div>
}else if (şart2){</div>
</div>
<div>
//şart1 false değerini, şart2 true değerini üretirse çalışacak kod grubu</div>
<div>
}else if (şart3){</div>
<div>
//şart1 ve şart2 false değerini, şart3 true değerini üretirse çalışacak kod grubu</div>
</div>
<div>
}else{</div>
<div>
//şart3 false değerini üretirse çalışacak kod grubu</div>
<div>
}</div>
<div>
<br /></div>
<div>
Bu yapıda if'den sonra istenilen kadar else if getirilebilir. Fakat else sonda olmak şartıyla bir kere getirilir. Else if veya else'nin çalışması için ondan önce gelen else if veya if'in false değerini üretmesi gerekir. Örneği inceleyelim:</div>
<div>
<br /></div>
<div>
<div>
<div>
<div>
var sayi = prompt ("Pozitif bir sayı giriniz:");</div>
<div>
if (sayi<=0 && sayi<10) {</div>
<div>
console.log("a sayısı tek basamaklı");</div>
<div>
}else if (sayi<=10 && sayi<100) {</div>
</div>
<div>
console.log("a sayısı çift basamaklı");</div>
</div>
<div>
<div>
}else if (sayi<=100 && sayi<1000) {</div>
<div>
console.log("a sayısı 3 basamaklı");</div>
</div>
<div>
}else{</div>
<div>
console.log("a sayısının basamak sayısı 3'ten büyük");</div>
<div>
}</div>
</div>
<div>
<br /></div>
<div>
Yukarıdaki prompt() bir değişkene sayı atanmsı için ziyaretçiye bir kutu sunmaktadır. Ve bu yapıda sayının kaç basamaklı olduğunu bize bildirmektedir.</div>
<h3>
Kümeli if</h3>
<div>
Söz Dizimi:</div>
<div>
<br /></div>
<div>
<div>
if (şart1) {</div>
<div>
//şart1 true değerini verirse yani doğru ise çalışacak kod grubu</div>
<div>
     if (şart) {</div>
<div>
     //şart1 true değerini verip şart2 de true değeri üretirse çalışacak kod grubu</div>
<div>
}</div>
<div>
}</div>
</div>
<div>
<br /></div>
<div>
Bu yapı sayesinde şart cevabını da şartlayabilirsiniz. Örneğin:</div>
<div>
<br /></div>
<div>
var a = 4;</div>
<div>
<div>
if (a>2) {</div>
<div>
console.log("a 2'den büyük");Bu yöntem uzun if, else, else if yapılarından bizi kurtarır</div>
<div>
     if (a>3) {</div>
<div>
     console.log("a 3'den de büyük");</div>
<div>
}</div>
<div>
}</div>
</div>
<h3>
Switch</h3>
<div>
Bu yöntem uzun if, else, else if yapılarından bizi kurtarır. Söz dizimi:</div>
<div>
<br /></div>
<div>
switch(deyim) {</div>
<div>
case deger1:</div>
<div>
//deyim=deger1 ise çalışacak kod grubu</div>
<div>
break;</div>
<div>
<div>
case deger2:</div>
<div>
//deyim=deger2 ise çalışacak kod grubu</div>
<div>
break;</div>
</div>
<div>
default:</div>
<div>
/Yukarıdaki şartlar doğru değil ise çalışacak kod grubu</div>
<div>
}</div>
<div>
<br /></div>
<div>
Burada sıra sıra deyime eşit (==) bir değer aranıp çalışacak kodlar belirtilmektedir. Ve çıkış için "break" kullanılmaktadır. Yeni bir case için break kesin kullanmalıyız. "default" ise yukarıdaki case kodları çalışmazsa, yanlış ise çalışacak kod grubudur.</div>
<div>
<br /></div>
<div>
Bu derslik bukadar ve bayağı yol aldık. Bir sonraki derste döngüleri göreceğiz. Zor bir ders olacak. Kolay gelsin.</div>
<div>
<br /></div>

Javascript Eğitimi Ders 6-if,Else,Else İf ve Merdivenler

Bir şart olşuturma ve boolean ile şart doğru ise değişkene true, yanlış ise değişkene false değerini vermedir. Şimdi incelemeye başlayalım...

Devamı »