javascript örnekleri – Web Tasarım & Programlama

Etiket javascript örnekleri

Javascript

JavaScript Sayının Basamak Sayısını Bulan Program

Kullanıcı tarafından girilen bir sayının basamak sayısını ekrana yazdıran javascript programı. Sayının basamak sayısını öğrenmek için sayıyı sürekli 10’a bölmek ve bu bölme işleminin kaç sefer yapıldığını saymak gerekir. JavaScript Kodu: <!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript Örnekleri</title> <link href="" rel="stylesheet"> </head> <body style="background: #f1f2f6;"> <div class="container">...

Javascript

JavaScript Üs Alma Programı

Bu örnekte pow() metodu kullanmadan sayının üssünü alan programın nasıl yapıldığını göreceğiz. Sayının üssünü alma algoritma konuları içinde sıklıkla sorulan ve kullanılan örneklerdendir. Bir sayının üssünü almak demek sayıyı üssündeki sayı kadar kendisi ile çarpmak demektir. Örn: 35 =3*3*3*3*3 JavaScript Kodu: <!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript Örnekleri</title> <link href="" rel="stylesheet"> </head> <body...

Javascript

JavaScript Kullanıcı Tarafından Girilen Sayının Basamakları Toplamını Bulan Program

Günlük hayatta 10luk sistemi kullandığımız için sayının basamaklarını bulmak için sayıyı 10’a bölündüğü sürece bölümü devam ettirmek gerekir. Aşağıdaki örnek sayının basamakları toplamını yazdırmaktadır. JavaScript Kodu: <!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript Örnekleri</title> <link href="" rel="stylesheet"> </head> <body style="background: #f1f2f6;"> <div class="container"> <h2>Sayının...

Javascript

JavaScript Tarih Karşılaştırma

JavaScript programlama dilinde iki tarihi karşılaştırmak için hali hazırda bir fonksiyon yoktur. Fakat tarih nesnelerini bir birinden çıkardığımızda bu tarihler arasındaki zaman farkını bulmak mümkündür. Aşağıdaki örnekte JavaScript kullanarak iki tarih arasındaki gün farkı hesaplanmaktadır. Örnek 1: JavaScript ile iki tarih arasındaki farkı hesaplama // Date fonksiyonu aa/gg/yyyy formatında zamanı almaktadır. var tarih1 = new Date("9/14/2018"); var tarih2 = new Date("11/21/2018"); //iki tarih...

Javascript Web Tasarım

javaScript Object (Nesne) Kullanımı

5 adet veri tip, 3 adet Object tipi bulunan javaScript dilinde veri tiplerini Number, String, Boolean, Undefined, ve Null (bu da bir object’dir). Object tipini ise fonksiyon, dizi, nesne (object)  gibi referanslar oluşturmaktadır. Bu yazımızda JavaScript’te bir Object nasıl oluşturulur ve nasıl kullanılır bunu göreceğiz. Öncelikle Object oluşturma hangi yöntemlerle yapılır buna bakalım.

Javascript Web Tasarım

JavaScript Aritmetiksel İşlemler

Bu örneğimizde 2 adet text girişinden kullanıcı tarafından girilen sayıları alan ve basılan butona göre toplama, çıkarma,çarpma ya da bölme işlemini gerçekleştireceğiz. Sayfamızda form içinde 2 adet text ve 4 adet button oluşturacağız. Her bir button için gerekli javascript kodlarını oluşturacağız. Örneğimizi 2 farklı yöntemle gerçekleştireceğiz.

Javascript

JavaScript: TimeInterval ile Kayan Yazı

HTML5 ile marquee desteği bitti. Javascript ve CSS yöntemleri ile marqueenin yaptığı işlemleri yapmak mümkün. Bu kısa örnekte timeInterval nesnesinin kullanılarak kayan bir yazı yapılmıştır. Hazırlanan örnek fonksiyon olarak hazırlanmıştır. Fonksiyona kayacak nesne ve zaman değerleri girilerek bütün yazılara uygulamak mümkündür.

Javascript Jquery

JQuery UI DatePicker Kullanımı

Bu örneğimizde JQuery’nin UI eklentisini kullanarak DatePicker yapacağız. İlk olarak JQuery’nin sayfasından jquery ve ui dosyalarını indirerek çalışma dosyamıza bağlıyoruz. Ağaç yapısı şu şekilde olacaktır;

Javascript Jquery

JQuery UI Dialog Kullanımı

Bu örneğimizde JQuery’nin UI eklentisini kullanarak butona basıldığında açılan dialog kutusu yapacağız. İlk olarak JQuery’nin sitesinden JQuery dosyasını ve UI eklentisini indiriyoruz ve index sayfamıza bağlıyoruz. Head etiketlerinin arasına ui.css ve theme.css dosyalarını ekliyoruz. Body etiketlerinin arasına da ilk olarak JQuery dosyasını daha sonra JQuery-ui dosyasının yolunu yazarak çalışma dosyamıza ekliyoruz. Varsa kendi JavaScript dosyamızı en sona ekliyoruz <link...