BOOSTRAP ÇALIŞMASI İLK ÖRNEK

BOOSTRAP GİRİŞ

Bootstrap Nedir?

Bootstrap Front-End Developerlar için geliştirilmiş açık kaynak kodlu ve ücretsiz bir CSS framework'tür. Bootstrap sayesinde masaüstü, tablet, mobil cihaz ve tüm tarayıcılara uyumlu web siteleri geliştirebiliriz. Bunun yanında bir web sitesi için gerekli olan tüm bileşenleri yapısında barındırır. (Form öğeleri, tablolar, butonlar, uyarılar, navigasyon bar, sayfalandırma, etiketler, açılan menüler vb. tasarım öğeleri.) Bu hazır bileşenleri kullanarak hem gelişmiş bir görünüm hem de her cihaza uygun bir tasarım gerçekleştirmiş oluruz.

ÜZERİNE GELİNCE DURAN KAYAN YAZI

Bu örneğimizde marquee yardımıyla kayan yazımızı oluşturucağız ve bunun üzerine gelince durup hareket etmesini sağlayacağız.Bunu için öncelikle bazı kodları açıklamamız lazım ;

1) onmouseover= fare ile yazının üzerinde geldiğimizde olmasını istediğimiz komutları yazıyoruz

2) onmouseout= bu kodumuzda ise fare ile yazınınüzerinde geldiğimizde kayan yazının durduktan sonra tekrar hareket etmesi komutunu vermiş oluyoruz.

3) direction= türkçe kelimesi yöndür.Yani ekranın hangi yanından görünmeye başlayacağını belirliyoruzz.

ARKA PLAN RENGİ DEĞİŞTİRME VE DURDURMA

        Öncelikle bu örneğimizde switch yardımıyla devam ve dur butonları kullanarak arka plan renginin sürekli değişmesini sağlayacağız.Bu kodda yeni öğreneceğimiz bağzı özelliklerle başlayalım.

1)window.clearInterval(timer)⟶ bu kodun görevi switch çalışırken eğer dur butonuna basılırsa döngünün sonlanmasına ve renk değişiminin durmasında görevlidir.

Ekran Çıktısı;

Geri Sayım

  Bu çalışmamızda öncelikle bağzı window.setInterval den biraz bahsetmemiz gerekecektir.

   1) window.setInterval ⟾  Bu özellik ile bir işlemi belli süre aralıkları ile sonsuza kadar yineleyebiliyoruz. Örneğin bir dijital saat yaptığımızı düşünürsek dakika ve saniye alanlarını ayrı ayrı setInterval fonksiyonları içerisine alarak dakikayı 60 saniyede bir arttırıp saniyeyi de her 1 saniyede 1 artacak şekilde ayarlayabiliriz.

SetInterval'i tanımladığımıza göre yazdığımız kodlaı açıklayabiliriz

• Öncelikle form nesnesi içinde açmış olduğumuz input icerisinde text ve name verip başlıyoruz

• var=i olarak elemanımızı tanımlıyoruz

• daha sonra setInterval komudunu kullanarak functionumuzu oluşturuyoruz

• İ olarak tanımladığımız elemanı burada kullanacağız.Küme parantezi içerisinde form1deki sayinın değerini i kadar arttırıyoruz

• ve işlemi ekrana yazdırmış oluyoruz

Ekran Çıktısı ;

BULUNDUĞUNUZ ZAMANI GÖSTEREN YAZILIM

BULUNDUĞUNUZ ZAMANI GÖSTEREN YAZILIM

• Bu projemizde script etiketini body içinde kullanarak bulunduğumuz günü saati ve ayı bize gösterecektir.
• Bu projede önemli olan script etiketi içerisinde tanımlamış olduğumuz zaman elementinin farklı metotlarla kullanımıdır
• Zaman.getDate , zaman.getMonth etiketleriyle günleri ve ayları dilediğimiz şekilde ve sırayla yazdırabiliyoruz

Ekran Çıktısı;

Seçilen Günün İngilizcesini Yazan Program

Ekran Çıktısı;

Hangi Günde Olduğumuzu Bulduran Program

Ekran Çıktısı ;

Karne Notu Belirleme

GİRİLEN NOTA GÖRE KARNE NOTU BELİRLEME

• Bu kodumuzda girilen sayıya göre karnede görülecek olan notu belirleyeceğiz
• Öncelikle body etiketleri arasında iki adet text kutumuzu oluşturuyoruz. 
• Function etiketi içinde verilerimizi tanımıyoruz ve switc döngümüzü kullanarak girilen sayının karne notunda kaça tekabül ettiğini yazdırıyoruz.

Ekran Çıktısı ;

Java ve Kontroller

                  Javascript ve Kontroller 

  Bugün yazacağımız kodlarda biraz daha farklı ama aynı mantık çerçevesinde ilerlemeye devam edeceğiz.

a) Giriş Kontrolü 

• İlk olarak body etiketleri arasına isim kontol etmemiz için gerekli olan kodlarımızı yapıyoruz ve onay() metodumuzu oluşturuyoruz
• İkinci adımımızda function etiketimizin içinde "var isim" şeklinde isim girişi isteğimizi tanımlıyoruz
• İf döngüsünden yararlanarak eğer klavyeden girilen isim ali ise ekrana "ali sen misin? " ifadesini yazdırıyoruz
• Klavyeden girilen isim ali değilse bu sefer de ekrana "ali neredesin " ifadesini yazıyoruz

Ekran Çıktısı;

 b)1den 10a Kadar Olan Sayıların Karelerini Bulma

• Öncelikle işlem a etiketi içerisinde metotdumuzu tanımlıyoruz
• Daha sonra script etiketleri içine gelerek functionumuzu oluşturmaya başlıyoruz.Funciton içinde var a=1 diyerek verilerimizi tanımlıyoruz.
• İstediğimiz verilerin girişleri tamamlandıktan sonra while döngüsünden faydalanarak 1den 10a kadar olan sayıların karelerini buldurup ekranımıza yazdırmış oluyoruz

  Ekran Çıktısı;

Javascripte Örnekleri

JavaScript Örnekleri

  a ) Function Özellikleri 

  Mesaj penceresinde işlemler

• Öncelikle script etiketleri arasında kodlarımızın özelliklerini vereceğimiz kod satırlarımızı oluşturuyoruz.
• Body  etiketlerinden sonra <input type> özelliğinden yararlanarak yapmak istediğimiz işlemleri belirledik.
• Daha sonrasında yapmak istediğimiz işlemler için ayrı functionlar içinde istediğimiz verilerin girişini yaparak kodlarımızı tamamladık.

Ekran Çıktısı ;

                                           

b) Üzerine Gelindiğinde Renk Değiştiren Butonlar

• Öncelikle a etiketi içinde  "onmouseover" özelliğinden faydalanarak istediğimiz renklerin oluşabilmesi için butonlarımızı oluşturuyoruz.*Onmouseover özelliği mouse ile üzerine geldiğiniz anda istenilen özelliği yansıtmasıdır
• Body etiketleri arasında açmış olduğumuz a etiketine Script özelliklerini css yardımıyla yazdığımız koda veriyoruz.

Ekran Çıktısı ;

c) Ekrana 1'den 10'a Kadar Olan Sayıları Yazdırma

• İşimize bir buton ekleyerek başlıyoruz.Bu butonun üzerine geldiğimiz zaman bize 1den 10a kadar olan sayıları ekrana yazdırması lazımdır.
• Function etiketinin içinde bir for döngüsü tanımlayarak 1den 10a kadar olan sayılar için bir döngü kuruyoruz
• Döngümüz tamamlandıktan sonra açılan sayfanın arka plan rengini document.bgColor etiketiyle pembe rengine çeviriyoruz 

Ekran Çıktısı;