Çarşamba , 23 Ağustos 2017
Anasayfa » Tag Arşivleri: javascript Örnekleri

Tag Arşivleri: javascript Örnekleri

JQuery İle Resim Kaydırma

Bu örneğimizde JQuery ile butona tıklandığında resmin hareket etmesini sağlayacağız. İlk olarak JQuery’nin sitesinden JQuery dosyalarını indiriyoruz. Css ve JavaScript dosyalarını açarak çalışma dosyamıza bağlıyoruz. Ağaç yapısı şu şekilde olacaktır;

Devamını oku »

JQuery UI Tabs Menü Kullanımı

Bu örneğimizde JQuery’nin Ui eklentisini kullanarak Tabs Menü yapacağız. İlk olarak JQuery’nin sayfasından, JQuery ve JQuery-Ui eklenti dosyalarını indiriyoruz. Ui.css ve theme.css dosyalarını çalışma klasörünün içerisindeki eklenti klasörünün içerisine kopyalıyoruz. Dosyaların ağaç yapısı şu şekilde olacaktır;

Devamını oku »

JQuery ile İsim Listeleme

  Bu çalışmamızda JQuery ile <ul> etiketinin içerisine tanımladığımız dizideki isimleri yazdıracağız. Çalışmaya başlamadan önce ilk olarak JQuery’nin kendi sitesinden JQuery dosyasını indiriyoruz.  https://jquery.com/

Devamını oku »

JavaScript Buton Yakalama Oyunu

  JavaScriptte koordinat kullanarak buton yakalama oyunu oluşturacağız. Fare ile üzerine gelindiğinde yerini değiştirmesini sağlayan ve yakalandığında ekrana uyarı verecek şekilde iki ayrı fonksiyon oluşturacağız. Daha sonrasında sayaç koyup kaç seferde yakalandığını hesaplayacağız.  

Devamını oku »

HTML5: Web Storage Kullanımı (Yapılacak Listesi)

HTML5 Web Storage kavramını JavaScript ile yapılacak listesini (To Do List) hazırlayarak anlatacağım. Web Storage kavramını açıklayarak başlayalım. Bir sayfa üzerinde yaptığımız değişliklikler sıklıkla o sayfada kalmaktadır.  Sayfada bir kaydı tutmak istediğimizde eski teknoloji olan Cokie kullanmamız gerekirdi. Cokie kullanımının çeşitli zorlukları var. En önemli olanlarından bir tanesi cokieler sadece 4kb ile sınırlıdır. Web Storage ile çok daha büyük verileri çok …

Devamını oku »

JavaScript: for-in Kullanımı

Dögnü içinde nesne nesne özelliklerine ulaşmak için kullanılır.  Eğer JavaScript nesne oluşturma hakkında fazla bir fikriniz yoksa bu yazıyı anlamakta zorluk çekebilirsiniz. JavaScriptte nesneleri kavradığınızda bu deyimi kullanamak çok faydalı olacaktır.

Devamını oku »

JavaScript Zaman Komutları

JavaScript ile  Date fonksiyonu tarih oluşturma, değiştirme ve kısmen tarih biçimlendirme işleri yapılabilir.  JavaScript  1 Ocak 1970 UTC tarihinden şu zamana kadar geçen milisaniye cinsinden zaman değerini temel alır.

Devamını oku »

JavaScript: Üçgenin Alanını Hesaplama

Text kutusuna taban uzunluğu ve yüksekliği  girilen üçgenin  alanını hesaplayıp ekrana uyarı olarak veren program: Nesneye olay atayarak javascript ile üçgenin  alanını hesaplama; document.getElementById ile nesne oluşturulduktan sonra oluşturulan nesnenin onclick niteliğine fonksiyon tanımlaması yaparak kullanma [crayon-599cfe9cebd04076254754/] HTML etiketinin onclick özelliğine fonksiyon tanımlayarak javascript ile üçgenin  alanını hesaplama; Etiketin onclick niteliğine fonksiyon yazılarak kullanma [crayon-599cfe9cebd0b418628643/] AddEventListener kullanarak javascript ile üçgenin  alanını hesaplama; Nesne document.getElementById ile …

Devamını oku »

JavaScript: Dikdörtgenin Çevresini ve Alanını Hesaplama

Text kutusuna uzun ve kısa kenarı girilen dikdörtgenin çevresini ve alanını hesaplayıp ekrana uyarı olarak veren program:   Nesneye olay atayarak javascript ile dikdörtgenin çevresini ve alanını hesaplama; document.getElementById ile nesne oluşturulduktan sonra oluşturulan nesnenin onclick niteliğine fonksiyon tanımlaması yaparak kullanma [crayon-599cfe9cece8d665882374/] HTML etiketinin onclick özelliğine fonksiyon tanımlayarak javascript ile dikdörtgenin çevresini ve alanını hesaplama; Etiketin onclick niteliğine fonksiyon yazılarak kullanma [crayon-599cfe9cece9b233944839/] AddEventListener kullanarak …

Devamını oku »

JavaScript: Sayıyı Yazıya Çevirme

Text kutusuna sayı olarak girilen değerin yazı ile karşılığını yazdırma örneği; DEMO Örnek kodumuzun çalışması şu şekildedir. 125 değerini text kutusuna girdiğimizi varsayalım. Div etiketi içine YüzYirmiBeş yazacaktır. Örneğimiz için gerekli olan HTML kodları [crayon-599cfe9cedf2a514669521/]   Örneğimizin CSS kodları [crayon-599cfe9cedf36340655146/]   Örneğin JavaScript Kodları 🙂 Not: Script içi olay kullandığım için script kodlarını yazarken body kapatma etiketinin hemen üzerin koymayı …

Devamını oku »

JavaScript String Metotları ve Özellikleri

JavaScript String nesnesi ile bir çok metinsel işlemi bir kaç adımda mümkün. String nesnesinin bazı önemli özellikleri ve metotları şunlardır.   Özellik/Metot Açıklama Sık Kullanılan String  Metotları/Özellikleri length Dizgenin uzunluğunu getirir.  String.fromCharCode()  Unicode değerlerinden oluşan yeni bir dizge döndürür. charAt()  String dizgesi içinde belirtilen sıradaki elemanı getirir.  charCodeAt()  UTF-16(65535  karekter) ya göre index numarası girilen karekteri getirir.  concat()  Parametre olarak girilen iki ve daha fazla …

Devamını oku »

JavaScript Örnekleri Uygulama Dosyası

Javascript Text Kutusuna Sadece Sayı Girdirme Javascript Text Kutusuna Sadece Sayı Girdirme(Olayın JavaScript Tarafında Yazılmış Hali) İki Text Kutusuna Girilen Sayıların Toplamını Div İçinde Gösterme Butona tıklandığında, tıklanan butondaki sayıları toplayan program İki text kutusuna girilen şifreyi kontrol eden javaScript örneği; Text kutusuna girilen sayılara göre ekrandaki div nesnesini hareket ettirme;     Sitede bulunan diğer örnek uygulamalar Jquery Slider …

Devamını oku »

JavaScript Dizilerde Kullanılan Fonksiyonlar

dizi metodları ve örnekleri

JavaScript dilinde dizilerde kullanılan bazı metodları kullanım şekil tablo ve örneklerle açıklanmıştır.   Dizi oluşturma ve dizilerde kullanılan bazı metodları Dizi Oluşturma isimli makalede belirtmiştim. Bu makalede diziler üzerinde işlem yapan metodların nasıl kullanıldıkları örneklerle açıklanmıştır. concat() Çağrıldığı dizi ile metodaa gönderilen dizi yada değerleri ekleyip geriye dizi döndürür. every() Dizideki tüm elemenları verilen fonksiyon ile test eder. Geri dönüş değeri …

Devamını oku »

Select Nesnesindeki Seçili Olan Alanların Toplamını Hesaplama

Select etiketi içinde seçili olan option etiketlerinin toplamını hesaplayıp ekrana yazdıran program;   Select kutusunun multiple özelliği kullanılarak aktif edilip, birden fazla seçim ile yapılan değerlerin toplamı sonuc etiketi içine yazdırıran program. Programın çalışma mantığı select kutusuna her tıklandığında select kutusundaki tüm alanlar(burada option nesneleri oluyor) üzerinde for döngüsü ile dönüp seçili olanarı(if ile) topluyor. Döngü bittikten sonra toplanan sayıları  idsi sonuc …

Devamını oku »

JavaScript Form Örnekleri

Text kutusu içine girilen yazıyı Div içine aktarma,Text kutusuna girilen yazıyı select nesnesine option olarak ekleme;Text kutusu boşsa formu göndermeyi iptal etme;JavaScript ile img ekiketindeki resimleri değiştirme……

Devamını oku »

Javascript Dizi Oluşturma

Öncelikle “dizi nedir” sorusuna cevap vererek başlayalım. Dizi benzer ifadelerin bir araya getirildiği özel değişkendir.   Bir değişken içinde bir veri saklana bilirken, dizilerde birden fazla veri saklamak mümkündür. Aşağıdaki örnek kod parçasının ilk satırında diller adında bir dizi oluşturulmuştur. İkinci satırda da idsi örnek olan etiket seçilmiş ve dizi içindeki değerler yerleştirilmiştir. [crayon-599cfe9cf0279540221237/] Eğer dizi kullanmasaydık yukarıdaki değerleri şu …

Devamını oku »

Javascript Direnç Renk Kodları Hesaplama Programı Yapımı

direnç renk kodları hesaplama programı

4 Bantlı direnç renk kodlarını hata payını hesaplamak için oluşturulmuş online çalışan programın kodları verilmiştir.   DEMO Çalışan program örneğine sayfanın sonunda ulaşabilirsiniz. Direnç renk kodları ile ilgili bilgiyi içeren wikipedia sayfası Uygulamanın HTML kodları: [crayon-599cfe9cf0da5818875764/]   HTML etiketlerini şekillendiren CSS kodları: [crayon-599cfe9cf0dae025840851/]   Programın script kodları: Programla ilgili açıklamalar yorum satırları içinde yazılmıştır. [crayon-599cfe9cf0db4573373191/]       Çalışan Örnek …

Devamını oku »